/* ---------- tokens ---------- */
:root{
  --bg: #0a0e16;
  --bg-alt: #0d1220;
  --card: #131a29;
  --card-2: #161f31;
  --border: rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.05);
  --text: #e7ecf3;
  --muted: #8b96a8;
  --muted-2: #5f6b7e;
  --cyan: #6ee7ff;
  --violet: #a78bfa;
  --grad: linear-gradient(90deg, var(--cyan), var(--violet));
  --up: #4ade80;
  --radius: 14px;
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Space Grotesk', 'Inter', sans-serif;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em; color:var(--muted);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
svg{display:block;}

.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:0.14em;
  color:var(--cyan); margin-bottom:10px;
}
.eyebrow.center{text-align:center;}
.section-title{font-size:32px; font-weight:600; color:var(--text); max-width:640px;}
.section-title.center{max-width:none; text-align:center; margin:0 auto 44px;}
.section-subtitle{
  font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:600;
  color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text;
  letter-spacing:0.02em; margin:10px 0 18px;
}

.btn{
  display:inline-block;
  background:var(--grad);
  color:#08101c;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.06em;
  padding:13px 22px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(110,231,255,0.25);}
.btn-outline{
  display:inline-block;
  background:transparent;
  color:var(--text);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.06em;
  padding:12px 22px;
  border-radius:999px;
  border:1px solid var(--border);
  transition:border-color .15s ease, background .15s ease;
}
.btn-outline:hover{border-color:var(--cyan); background:rgba(110,231,255,0.06);}
.link{color:var(--cyan); font-weight:600; font-size:14px;}

/* ---------- topbar ---------- */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 40px;
  background:var(--bg-alt);
  border-bottom:1px solid var(--border-soft);
  font-size:12.5px;
  color:var(--muted);
  flex-wrap:wrap; gap:6px;
}
.topbar .left, .topbar .right{display:flex; align-items:center; gap:18px;}
.topbar .addr{color:var(--muted-2);}
.topbar .portal{display:flex; align-items:center; gap:6px; color:var(--muted); font-weight:600;}
.topbar .dot{width:6px; height:6px; border-radius:50%; background:var(--up); display:inline-block; box-shadow:0 0 6px var(--up);}
.topbar .assist{color:var(--muted-2);}
.topbar .phone{color:var(--cyan); font-weight:600;}

/* ---------- header ---------- */
.site-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 40px;
  background:var(--bg);
  border-bottom:1px solid var(--border-soft);
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(10px);
}
.logo-link{display:flex; align-items:center; gap:10px;}
.logo-mark{width:28px; height:28px;}
.logo-mark svg{width:28px; height:28px;}
.logo-word{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:18px; letter-spacing:0.02em;}
.header-cta{display:flex; align-items:center; gap:34px;}
.nav-links{display:flex; gap:26px; font-size:14px; font-weight:500;}
.nav-links a{color:var(--muted); transition:color .15s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--text);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:110px 40px 90px;
  overflow:hidden;
  background:radial-gradient(ellipse at top, #101828 0%, var(--bg) 60%);
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-grid{position:absolute; inset:0; width:100%; height:100%;}
.glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:0.35;}
.glow-a{width:420px; height:420px; background:var(--cyan); top:-160px; left:8%;}
.glow-b{width:380px; height:380px; background:var(--violet); bottom:-160px; right:10%;}
.hero-content{position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center;}
.hero h1{font-size:52px; line-height:1.08; margin:0 0 20px; color:#fff;}
.hero p{font-size:18px; max-width:560px; margin:0 auto 32px;}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- stat / cert strip ---------- */
.cert-strip{
  display:flex; align-items:center; gap:40px;
  padding:30px 40px;
  background:var(--bg-alt);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  flex-wrap:wrap;
}
.cert-strip .label{
  font-size:12px; font-weight:700; letter-spacing:0.1em; color:var(--muted-2);
  line-height:1.4; min-width:130px;
}
.stat-row{display:flex; gap:48px; flex-wrap:wrap; flex:1;}
.stat-row .stat{min-width:150px;}
.stat .num{font-family:'Space Grotesk', sans-serif; font-size:28px; font-weight:700; color:var(--text);}
.stat .num span{font-size:16px; color:var(--cyan); font-weight:600; margin-left:2px;}
.stat .label{font-size:12.5px; color:var(--muted); margin-top:2px; max-width:170px;}

/* ---------- section generic ---------- */
.section{max-width:var(--maxw); margin:0 auto; padding:90px 40px;}

/* ---------- welcome ---------- */
.welcome{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.welcome .stats{display:flex; gap:40px; margin-top:28px;}
.welcome .stats .num{font-family:'Space Grotesk', sans-serif; font-size:26px; font-weight:700; color:var(--cyan);}
.welcome .stats .label{font-size:12.5px; color:var(--muted); margin-top:2px;}

.welcome-panel{display:grid; grid-template-columns:1fr; gap:16px;}
.panel-visual{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; display:flex; align-items:center; justify-content:center;
}
.circuit-art{width:100%; height:auto; max-height:170px;}
.panel-list{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px 26px; display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;
}
.panel-list-item{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--muted);}
.panel-list-item .check{
  flex-shrink:0; width:18px; height:18px; border-radius:50%; background:var(--grad);
  color:#08101c; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.panel-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px;
}
.panel-card-1{grid-column:1 / 3;}
.panel-card-2{grid-row:2;}
.panel-card-3{grid-row:2;}
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.panel-label{font-size:12.5px; color:var(--muted);}
.tick{font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px;}
.tick.up{color:var(--up); background:rgba(74,222,128,0.12);}
.spark{width:100%; height:56px;}
.bar-row{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); margin-bottom:9px;}
.bar-row span{width:64px; flex-shrink:0;}
.bar{flex:1; height:6px; background:var(--border); border-radius:99px; overflow:hidden;}
.bar i{display:block; height:100%; background:var(--grad); border-radius:99px;}
.dot-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px;}
.dot-grid .d{width:100%; padding-top:100%; border-radius:4px; background:var(--border);}
.dot-grid .d.on{background:var(--grad);}

/* ---------- services ---------- */
.services-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:36px; flex-wrap:wrap; gap:14px;}
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.service-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 22px; transition:border-color .15s ease, transform .15s ease;
}
.service-card:hover{border-color:rgba(110,231,255,0.35); transform:translateY(-3px);}
.icon-wrap{
  width:44px; height:44px; border-radius:10px;
  background:var(--card-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.icon-wrap svg{width:22px; height:22px;}
.service-card .title{font-weight:600; font-size:16.5px; margin-bottom:8px; color:var(--text);}
.service-card p{font-size:14px; margin:0;}

/* ---------- approach ---------- */
.approach{background:var(--bg-alt); max-width:none; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);}
.approach > .section-title, .approach > .eyebrow{max-width:var(--maxw); margin-left:auto; margin-right:auto; padding:0 40px;}
.steps{
  max-width:var(--maxw); margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative;
}
.step{position:relative;}
.step-num{
  font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:700;
  color:var(--bg); background:var(--grad);
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.step .title{font-weight:600; font-size:16.5px; margin-bottom:6px; color:var(--text);}
.step p{font-size:14px; margin:0;}

/* ---------- work / results ---------- */
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.work-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:transform .15s ease, border-color .15s ease;
}
.work-card:hover{transform:translateY(-3px); border-color:rgba(167,139,250,0.35);}
.work-top{
  padding:26px 22px; display:flex; justify-content:space-between; align-items:flex-end;
  min-height:96px;
}
.grad-1{background:linear-gradient(135deg,#123044,#0a0e16 75%);}
.grad-2{background:linear-gradient(135deg,#2a1f4a,#0a0e16 75%);}
.grad-3{background:linear-gradient(135deg,#123c34,#0a0e16 75%);}
.work-tag{font-size:11px; font-weight:700; letter-spacing:0.1em; color:var(--cyan);}
.work-metric{font-family:'Space Grotesk', sans-serif; font-size:26px; font-weight:700; color:#fff;}
.work-card .body{padding:20px 22px 24px;}
.work-card .title{font-weight:600; font-size:16px; margin-bottom:8px; color:var(--text);}
.work-card p{font-size:13.5px; margin:0;}

/* ---------- reviews ---------- */
.reviews{background:var(--bg-alt); max-width:none; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);}
.reviews-grid{max-width:var(--maxw); margin:0 auto; padding:0 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.review-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px;
}
.stars{color:var(--cyan); letter-spacing:2px; font-size:14px; margin-bottom:12px;}
.review-card p{font-size:14.5px; color:var(--text); margin-bottom:20px; font-style:italic;}
.reviewer{display:flex; align-items:center; gap:12px;}
.avatar{
  width:36px; height:36px; border-radius:50%; background:var(--grad);
  color:#08101c; font-weight:700; font-size:12.5px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.reviewer .name{font-size:14px; font-weight:600; color:var(--text);}
.reviewer .role{font-size:12.5px; color:var(--muted);}

/* ---------- contact ---------- */
.contact-intro{max-width:560px; margin:0 auto 44px;}
.contact-intro p.center{text-align:center; margin:0;}
.contact-form{
  max-width:640px; margin:0 auto;
  background:linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box;
  border:2px solid transparent; border-radius:var(--radius);
  padding:40px; display:flex; flex-direction:column; gap:20px;
  box-shadow:0 0 60px rgba(110,231,255,0.12), 0 0 90px rgba(167,139,250,0.10);
}
.contact-form label{font-size:13.5px; color:var(--muted); display:flex; flex-direction:column; gap:7px;}
.contact-form input, .contact-form textarea{
  background:var(--bg-alt); border:1px solid var(--border); border-radius:9px;
  padding:13px 15px; color:var(--text); font-family:inherit; font-size:15px; resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--cyan);}
.contact-form .btn{margin-top:8px; align-self:center; padding:14px 32px; font-size:14px;}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-alt); border-top:1px solid var(--border-soft); padding:44px 40px 26px;}
.footer-top{
  max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:20px; padding-bottom:28px; border-bottom:1px solid var(--border-soft);
}
.footer-brand{display:flex; align-items:center; gap:10px;}
.footer-links{display:flex; gap:24px; font-size:13.5px; color:var(--muted);}
.footer-links a:hover{color:var(--text);}
.footer-bottom{
  max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:8px; padding-top:20px; font-size:12.5px; color:var(--muted-2);
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr); row-gap:32px;}
  .work-grid{grid-template-columns:1fr 1fr;}
  .reviews-grid{grid-template-columns:1fr 1fr;}
  .welcome{grid-template-columns:1fr;}
}
@media (max-width: 680px){
  .topbar{display:none;}
  .site-header{padding:14px 20px;}
  .nav-links{display:none;}
  .hero{padding:70px 20px 60px;}
  .hero h1{font-size:34px;}
  .section{padding:60px 20px;}
  .cert-strip{padding:24px 20px;}
  .services-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr; padding:0 20px;}
  .approach > .section-title, .approach > .eyebrow{padding:0 20px;}
  .work-grid{grid-template-columns:1fr;}
  .reviews-grid{grid-template-columns:1fr; padding:0 20px;}
  .panel-list{grid-template-columns:1fr;}
}