/* SMARTX — Neon Blue/Purple, Stable Globe + X */

:root{
  --bg-a:#0b0b2e;
  --bg-b:#090014;
  --cyan:#00ffff;
  --cyan-soft:rgba(0,255,255,.12);
  --violet:#7a3cff;
  --text:#e9f2ff;
  --muted:#a8b3c7;
  --card:#ffffff;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#222; background:linear-gradient(180deg,var(--bg-a),var(--bg-b));
  overflow-x:hidden; -webkit-tap-highlight-color: transparent;
}

/* Sidebar toggle */
.menu-icon{
  position:fixed; top:18px; left:14px; z-index:1200;
  color:#fff; font-size:22px; cursor:pointer; user-select:none;
  padding:6px 10px; border-radius:10px; background:rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}
.menu-icon:focus{outline:none}

/* Sidebar */
#navbar{
  position:fixed; top:0; left:0; z-index:1100;
  width:86px; height:auto; padding:10px 0 12px;
  display:flex; flex-direction:column; gap:2px;
  background:rgba(4,6,20,.6);
  border-top-right-radius:18px; border-bottom-right-radius:18px;
  backdrop-filter: blur(12px);
  transform: translateX(-98px);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  border:1px solid rgba(0,255,255,.12);
}
#navbar.responsive{ transform: translateX(0) }
#navbar a{
  color:#fff; text-decoration:none; font-weight:600; font-size:14px;
  padding:10px 16px; border-radius:0 12px 12px 0;
  transition: background .25s ease, padding-left .25s ease;
}
#navbar a:hover{ background: var(--cyan-soft); padding-left:22px }
#navbar a:focus{ outline:none }

/* Hero */
.hero-header{
  position:relative; text-align:center; color:#fff; padding:120px 24px 140px;
  isolation:isolate;
}
.hero-header::before{
  content:""; position:absolute; inset:-20% -10% auto -10%;
  height:80%; z-index:-1;
  background:
    radial-gradient(40% 60% at 20% 20%, rgba(122,60,255,.35) 0%, transparent 60%),
    radial-gradient(50% 65% at 80% 40%, rgba(0,255,255,.25) 0%, transparent 70%),
    radial-gradient(60% 70% at 50% 90%, rgba(80,0,255,.25) 0%, transparent 70%);
  filter: blur(80px); opacity:.9;
}

/* Stable Globe + X */
.logo-wrap{max-width:900px;margin:0 auto}
.smartx-logo{
  width:110px;height:110px;margin:0 auto 18px; position:relative;
  border-radius:50%; box-shadow:0 0 28px rgba(0,255,255,.25) inset,
                                 0 0 38px rgba(122,60,255,.22);
  background: radial-gradient(120px 120px at 50% 50%, rgba(0,255,255,.06), rgba(0,0,0,.0));
}
.smartx-logo .ring{
  position:absolute; inset:6px; border-radius:50%;
  border:1px solid rgba(0,255,255,.25);
}
.smartx-logo .middle{ inset:12px; border-color: rgba(122,60,255,.25) }
.smartx-logo .inner{ inset:19px; border-color: rgba(0,255,255,.18) }

.smartx-logo .equator,
.smartx-logo .meridian{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background: linear-gradient(90deg, rgba(0,255,255,.45), rgba(122,60,255,.45));
  filter: drop-shadow(0 0 6px rgba(0,255,255,.35));
}
.smartx-logo .equator{ width:78%; height:2px; }
.smartx-logo .meridian{ width:2px; height:78%; }
.smartx-logo .mer-1{ transform: translate(-50%,-50%) rotate(25deg) }
.smartx-logo .mer-2{ transform: translate(-50%,-50%) rotate(-25deg) }

/* The X */
.smartx-logo .logo-x{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--cyan); font-weight:900; font-size:30px; letter-spacing:.5px;
  text-shadow:0 0 14px rgba(0,255,255,.9), 0 0 28px rgba(122,60,255,.6);
}

/* Titles */
.logo-wrap h1{ margin:0; line-height:1; font-size:48px; font-weight:900 }
.logo-wrap .smart{ color:#fff }
.logo-wrap .x{ color:var(--cyan); text-shadow:0 0 18px rgba(0,255,255,.8) }
.solution{ display:block; margin-top:8px; color:#d7e7ff; opacity:.9; font-weight:600; font-size:22px }
.tagline{ margin-top:8px; color:#c7d3eb }

.cta-btn{
  display:inline-block; margin-top:16px; padding:10px 22px;
  border-radius:50px; text-decoration:none; font-weight:700; color:#001018;
  background: linear-gradient(90deg, var(--cyan), #00aaff);
  box-shadow: 0 0 0 rgba(0,255,255,0);
  transition: box-shadow .25s ease, transform .2s ease, color .25s ease;
}
.cta-btn:hover{ color:#fff; box-shadow:0 0 18px rgba(0,255,255,.35) }

/* Sections */
section{
  max-width:1060px; margin:54px auto; padding:22px;
  background:var(--card); border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.08);
}
section h2{ text-align:center; margin-bottom:8px; font-size:28px; color:#111 }
section p{ color:#333 }

.about-section .highlight{
  text-align:center; color:var(--violet); font-weight:700; margin:12px 0 4px;
}
.founder-profile{ display:flex; gap:20px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:18px }
.founder-photo{
  width:130px;height:130px;border-radius:50%;object-fit:cover;
  border:3px solid var(--cyan);
  box-shadow:0 0 16px rgba(0,255,255,.35)
}
.founder-info h3{ font-size:20px; margin-bottom:6px }
.founder-info p{ color:#333 }

/* Services */
.services-section .service-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px; margin-top:18px;
}
.service-card{
  background:#fff; padding:18px; border-radius:12px;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{
  transform: translateY(-4px);
  box-shadow:0 6px 24px rgba(0,255,255,.22);
}
.service-card .icon{ font-size:28px; margin-bottom:8px }

/* Portfolio */
.portfolio-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px; margin-top:18px;
}
.portfolio-grid img{ width:100%; border-radius:10px; display:block }
.card{ background:#fff; padding:14px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.1) }
.card:hover{ box-shadow:0 4px 16px rgba(0,255,255,.22) }
.card h4{ margin:8px 0 4px }

/* Contact */
.contact-form{
  max-width:620px; margin:18px auto 4px; display:flex; flex-direction:column; gap:12px
}
.contact-form input, .contact-form textarea{
  padding:12px; font-size:15px; border:1px solid #dfe6f2; border-radius:10px
}
.contact-form .hp{ display:none !important } /* honeypot */
.contact-form button{
  border:none; cursor:pointer; border-radius:50px; padding:10px 20px; font-weight:700; color:#001018;
  background: linear-gradient(90deg, var(--cyan), #00aaff);
  transition: box-shadow .25s ease, color .25s ease;
}
.contact-form button:hover{ color:#fff; box-shadow:0 0 14px rgba(0,255,255,.35) }
.form-note{ display:block; text-align:center; color:#6b7a93 }

/* Footer */
footer{ color:#eaf5ff; background:linear-gradient(180deg,#0b0b2e,#070716); padding:34px 16px 22px; margin-top:40px }
.footer-content{
  max-width:1100px; margin:0 auto 12px;
  display:grid; gap:18px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
}
.footer-content h4{ color:#fff; margin-bottom:8px }
.footer-content a{ color:var(--cyan); text-decoration:none }
.footer-content a:hover{ text-decoration:underline }
.foot-links{ list-style:none }
.foot-links li+li{ margin-top:6px }
.socials a{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; margin-right:8px;
  border-radius:8px; color:#001018; background:var(--cyan); font-weight:800; font-size:12px
}
.footer-bottom{ text-align:center; opacity:.8; font-size:13px; margin-top:6px }

/* WhatsApp FAB (no flicker) */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:1300;
  display:inline-grid; place-items:center; width:58px; height:58px;
  border-radius:50%; background:rgba(0,0,0,.35); backdrop-filter: blur(8px);
  border:1px solid rgba(0,255,255,.18);
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.whatsapp-float:focus{ outline:none }
.wa-icon{ width:30px; height:30px; fill:#e8fffe; display:block }
.whatsapp-float:hover{ box-shadow:0 0 18px rgba(0,255,255,.28) }
.whatsapp-float:active{ box-shadow:none } /* prevent click flash */

/* Responsive */
@media (max-width:768px){
  .hero-header{ padding:96px 16px 110px }
  .logo-wrap h1{ font-size:40px }
  .solution{ font-size:20px }
  .menu-icon{ font-size:21px; top:16px; left:12px }
}