/* =========================================================
   ChipExpert Technologies - Core Stylesheet
   Theme: Deep tech navy + electric cyan + amber highlight
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --navy-950:#050A16;
  --navy-900:#0A1226;
  --navy-850:#0D1730;
  --navy-800:#111E3C;
  --navy-700:#182A52;
  --navy-600:#213563;

  --cyan-300:#67E8F9;
  --cyan-400:#22D3EE;
  --cyan-500:#06B6D4;
  --cyan-600:#0891B2;

  --amber-400:#FBBF24;
  --amber-500:#F59E0B;

  --white:#FFFFFF;
  --ink-100:#EAF1FB;
  --ink-200:#C7D5E8;
  --ink-300:#93A6C2;
  --ink-400:#6B7F9E;

  --surface:#F6F8FC;
  --surface-2:#EDF2F9;
  --line:rgba(255,255,255,.10);
  --line-dark:rgba(10,18,38,.10);

  --grad-cyan:linear-gradient(135deg,#22D3EE 0%,#0891B2 100%);
  --grad-hero:radial-gradient(1200px 600px at 15% -10%,rgba(34,211,238,.22),transparent 60%),
              radial-gradient(900px 500px at 95% 10%,rgba(99,102,241,.20),transparent 55%),
              linear-gradient(160deg,#050A16 0%,#0A1226 45%,#0D1730 100%);

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --shadow-sm:0 2px 8px rgba(5,10,22,.08);
  --shadow-md:0 12px 32px rgba(5,10,22,.12);
  --shadow-lg:0 28px 70px rgba(5,10,22,.22);
  --shadow-glow:0 18px 50px rgba(6,182,212,.28);

  --maxw:1200px;
  --ff:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ff-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--ff);background:var(--white);color:var(--navy-900);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
h1,h2,h3,h4,h5{margin:0 0 .6em;line-height:1.15;font-weight:800;letter-spacing:-.022em;}
p{margin:0 0 1.1em;}
ul{margin:0;padding:0;list-style:none;}
:focus-visible{outline:3px solid var(--cyan-400);outline-offset:3px;border-radius:4px;}

/* ---------- 3. Layout helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px;}
.section{padding:104px 0;position:relative;}
.section--tight{padding:72px 0;}
.section--dark{background:var(--navy-900);color:var(--ink-100);}
.section--deep{background:var(--navy-950);color:var(--ink-100);}
.section--soft{background:var(--surface);}
.grid{display:grid;gap:28px;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
.center{text-align:center;}
.mx-auto{margin-inline:auto;}

/* ---------- 4. Typography blocks ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.735rem;font-weight:750;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan-600);margin-bottom:16px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--grad-cyan);border-radius:2px;}
.section--dark .eyebrow,.section--deep .eyebrow{color:var(--cyan-400);}

.h-xl{font-size:clamp(2.5rem,5.6vw,4.15rem);}
.h-lg{font-size:clamp(2rem,3.9vw,3rem);}
.h-md{font-size:clamp(1.5rem,2.4vw,2rem);}
.lede{font-size:clamp(1.02rem,1.35vw,1.16rem);color:var(--ink-400);max-width:66ch;}
.section--dark .lede,.section--deep .lede{color:var(--ink-300);}
.head{max-width:720px;margin-bottom:56px;}
.head.center{margin-inline:auto;}
.grad{background:var(--grad-cyan);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:100px;font-weight:700;font-size:.95rem;
  border:1.5px solid transparent;cursor:pointer;transition:.28s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none;}
.btn-primary{background:var(--grad-cyan);color:#04121A;box-shadow:var(--shadow-glow);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 24px 60px rgba(6,182,212,.42);}
.btn-ghost{border-color:rgba(255,255,255,.28);color:var(--ink-100);background:rgba(255,255,255,.04);}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:var(--cyan-400);transform:translateY(-3px);}
.btn-dark{background:var(--navy-900);color:#fff;}
.btn-dark:hover{background:var(--navy-700);transform:translateY(-3px);}
.btn-outline{border-color:var(--line-dark);color:var(--navy-900);}
.btn-outline:hover{border-color:var(--cyan-500);color:var(--cyan-600);transform:translateY(-3px);}
.btn-sm{padding:11px 22px;font-size:.875rem;}

/* ---------- 6. Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:900;
  padding:16px 0;transition:.3s ease;
  background:rgba(5,10,22,.0);
}
.header.scrolled{
  background:rgba(6,11,24,.88);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);padding:10px 0;
}
.header.solid{background:rgba(6,11,24,.94);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.16rem;color:#fff;letter-spacing:-.02em;}
.logo-mark{width:38px;height:38px;flex:none;}
.logo small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.2em;color:var(--cyan-400);text-transform:uppercase;line-height:1;margin-top:3px;}
.logo b{line-height:1;}
.nav-links{display:flex;align-items:center;gap:6px;}
.nav-links a{
  padding:10px 16px;border-radius:100px;font-size:.925rem;font-weight:600;
  color:var(--ink-200);transition:.22s;
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.08);}
.nav-links a.active{color:var(--cyan-300);background:rgba(34,211,238,.12);}
.nav-cta{display:flex;align-items:center;gap:12px;}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:12px;align-items:center;justify-content:center;}
.burger span{display:block;width:19px;height:2px;background:#fff;position:relative;transition:.25s;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:#fff;transition:.25s;}
.burger span::before{top:-6px;} .burger span::after{top:6px;}
.burger.open span{background:transparent;}
.burger.open span::before{top:0;transform:rotate(45deg);}
.burger.open span::after{top:0;transform:rotate(-45deg);}

/* ---------- 7. Hero ---------- */
.hero{position:relative;background:var(--grad-hero);color:var(--ink-100);padding:190px 0 110px;overflow:hidden;}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 30%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 30%,#000 20%,transparent 78%);
}
.hero .wrap{position:relative;z-index:2;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.05rem);color:#fff;margin-bottom:22px;}
.hero .lede{color:var(--ink-200);font-size:1.12rem;max-width:56ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 40px;}
.pill{
  display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 10px;border-radius:100px;
  background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.28);
  font-size:.8rem;font-weight:650;color:var(--cyan-300);margin-bottom:22px;
}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--cyan-400);box-shadow:0 0 0 4px rgba(34,211,238,.20);animation:pulse 2.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.hero-trust{display:flex;flex-wrap:wrap;gap:26px;padding-top:28px;border-top:1px solid var(--line);}
.hero-trust div b{display:block;font-size:1.6rem;color:#fff;line-height:1.1;}
.hero-trust div span{font-size:.8rem;color:var(--ink-300);}

/* Hero visual card stack */
.hero-visual{position:relative;}
.chip-card{
  background:linear-gradient(150deg,rgba(23,38,74,.92),rgba(13,23,48,.92));
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);
}
.chip-card h4{color:#fff;font-size:1rem;margin-bottom:4px;}
.chip-card p{color:var(--ink-300);font-size:.86rem;margin:0;}
.hero-stack{display:grid;gap:16px;}
.float-a{animation:floaty 7s ease-in-out infinite;}
.float-b{animation:floaty 7s ease-in-out infinite 1.2s;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}
.mini-row{display:flex;align-items:center;gap:14px;}
.mini-icon{
  width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:rgba(34,211,238,.14);border:1px solid rgba(34,211,238,.26);color:var(--cyan-300);
}
.mini-icon svg{width:22px;height:22px;}

/* ---------- 8. Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:32px;transition:.3s cubic-bezier(.4,0,.2,1);height:100%;
}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:rgba(6,182,212,.4);}
.card h3{font-size:1.16rem;margin-bottom:10px;}
.card p{color:var(--ink-400);font-size:.94rem;margin:0;}
.card-dark{
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);color:var(--ink-100);
}
.card-dark h3{color:#fff;}
.card-dark p{color:var(--ink-300);}
.card-dark:hover{border-color:rgba(34,211,238,.45);background:linear-gradient(160deg,rgba(34,211,238,.09),rgba(255,255,255,.02));}
.ic{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--grad-cyan);color:#04121A;box-shadow:0 10px 26px rgba(6,182,212,.30);
}
.ic svg{width:26px;height:26px;}
.ic-soft{background:rgba(34,211,238,.13);color:var(--cyan-400);border:1px solid rgba(34,211,238,.26);box-shadow:none;}
.num{
  font-family:var(--ff-mono);font-size:.76rem;font-weight:700;color:var(--cyan-600);
  letter-spacing:.1em;margin-bottom:14px;display:block;
}
.section--dark .num{color:var(--cyan-400);}

/* ---------- 9. Feature list ---------- */
.ticks li{display:flex;gap:12px;align-items:flex-start;margin-bottom:13px;font-size:.94rem;color:var(--ink-400);}
.ticks li::before{
  content:"";flex:none;width:20px;height:20px;border-radius:50%;margin-top:2px;
  background:rgba(6,182,212,.14) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat;
}
.section--dark .ticks li,.section--deep .ticks li{color:var(--ink-300);}
.section--dark .ticks li::before,.section--deep .ticks li::before{
  background:rgba(34,211,238,.16) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367E8F9' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat;
}

/* ---------- 10. Page banner ---------- */
.banner{background:var(--grad-hero);color:#fff;padding:170px 0 84px;position:relative;overflow:hidden;}
.banner::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 100% at 50% 0%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 50% 0%,#000,transparent 72%);
}
.banner .wrap{position:relative;z-index:2;}
.crumbs{font-size:.85rem;color:var(--ink-300);margin-bottom:16px;display:flex;gap:9px;align-items:center;}
.crumbs a:hover{color:var(--cyan-300);}
.crumbs span{opacity:.5;}
.banner h1{font-size:clamp(2.15rem,4.4vw,3.4rem);color:#fff;}
.banner p{color:var(--ink-200);max-width:62ch;font-size:1.06rem;margin:0;}

/* ---------- 11. Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border-radius:var(--r-lg);overflow:hidden;}
.stat{background:var(--navy-900);padding:34px 26px;text-align:center;}
.stat b{display:block;font-size:2.4rem;color:#fff;line-height:1;margin-bottom:8px;letter-spacing:-.03em;}
.stat b em{font-style:normal;color:var(--cyan-400);}
.stat span{font-size:.83rem;color:var(--ink-300);letter-spacing:.02em;}

/* ---------- 12. Split section ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.split--rev .split-media{order:2;}

/* ---------- 13. Service detail rows ---------- */
.srow{
  display:grid;grid-template-columns:64px 1fr;gap:22px;padding:34px 0;
  border-bottom:1px solid var(--line-dark);
}
.srow:last-child{border-bottom:0;}
.srow h3{font-size:1.32rem;margin-bottom:8px;}
.srow p{color:var(--ink-400);margin-bottom:16px;}
.tags{display:flex;flex-wrap:wrap;gap:8px;}
.tag{
  font-size:.775rem;font-weight:650;padding:6px 13px;border-radius:100px;
  background:var(--surface-2);color:var(--navy-700);border:1px solid var(--line-dark);
}
.section--dark .tag{background:rgba(255,255,255,.06);color:var(--ink-200);border-color:var(--line);}

/* ---------- 14. UI MOCKUPS ---------- */
.mock-shell{
  border-radius:var(--r-lg);overflow:hidden;background:#0B1327;
  border:1px solid rgba(255,255,255,.13);box-shadow:var(--shadow-lg);
}
.mock-bar{
  display:flex;align-items:center;gap:8px;padding:11px 16px;background:#101B36;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.dot{width:10px;height:10px;border-radius:50%;}
.dot.r{background:#FF5F57;} .dot.y{background:#FEBC2E;} .dot.g{background:#28C840;}
.mock-url{
  margin-left:12px;flex:1;background:rgba(255,255,255,.07);border-radius:7px;
  padding:5px 12px;font-size:.7rem;color:var(--ink-300);font-family:var(--ff-mono);
}
.mock-body{display:grid;grid-template-columns:194px 1fr;min-height:430px;}

/* app sidebar */
.m-side{background:#0A1226;border-right:1px solid rgba(255,255,255,.07);padding:18px 12px;}
.m-brand{display:flex;align-items:center;gap:9px;padding:0 8px 16px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.07);}
.m-brand i{width:26px;height:26px;border-radius:8px;background:var(--grad-cyan);display:grid;place-items:center;font-size:.7rem;font-weight:800;color:#04121A;font-style:normal;}
.m-brand span{font-size:.8rem;font-weight:750;color:#fff;}
.m-nav li{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  font-size:.775rem;color:var(--ink-300);margin-bottom:3px;
}
.m-nav li.on{background:rgba(34,211,238,.14);color:var(--cyan-300);font-weight:700;}
.m-nav li i{width:15px;height:15px;border-radius:4px;background:currentColor;opacity:.42;flex:none;}
.m-nav li.on i{opacity:1;}

/* app main */
.m-main{padding:20px;background:#0B1327;}
.m-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.m-top h5{margin:0;font-size:1rem;color:#fff;font-weight:750;}
.m-top p{margin:2px 0 0;font-size:.72rem;color:var(--ink-400);}
.m-btn{font-size:.7rem;font-weight:700;padding:7px 14px;border-radius:8px;background:var(--grad-cyan);color:#04121A;}
.m-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.m-kpi{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:12px;}
.m-kpi span{font-size:.63rem;color:var(--ink-400);text-transform:uppercase;letter-spacing:.07em;font-weight:700;}
.m-kpi b{display:block;font-size:1.25rem;color:#fff;line-height:1.25;margin-top:5px;}
.m-kpi em{font-style:normal;font-size:.63rem;font-weight:700;color:#34D399;}
.m-kpi em.dn{color:#FB7185;}
.m-cols{display:grid;grid-template-columns:1.45fr 1fr;gap:14px;}
.m-panel{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px;}
.m-panel h6{margin:0 0 12px;font-size:.76rem;color:#fff;font-weight:750;display:flex;justify-content:space-between;align-items:center;}
.m-panel h6 s{text-decoration:none;font-size:.65rem;color:var(--cyan-400);font-weight:650;}

/* table */
.m-tbl{width:100%;border-collapse:collapse;font-size:.7rem;}
.m-tbl th{
  text-align:left;color:var(--ink-400);font-weight:700;font-size:.62rem;text-transform:uppercase;
  letter-spacing:.06em;padding:0 8px 8px;border-bottom:1px solid rgba(255,255,255,.09);
}
.m-tbl td{padding:9px 8px;color:var(--ink-200);border-bottom:1px solid rgba(255,255,255,.05);}
.m-tbl td b{color:#fff;font-weight:650;display:block;}
.m-tbl td s{text-decoration:none;display:block;font-size:.62rem;color:var(--ink-400);}
.badge{
  display:inline-block;font-size:.6rem;font-weight:750;padding:3px 9px;border-radius:100px;white-space:nowrap;
  background:rgba(34,211,238,.16);color:var(--cyan-300);
}
.badge.warn{background:rgba(251,191,36,.16);color:var(--amber-400);}
.badge.ok{background:rgba(52,211,153,.16);color:#34D399;}
.badge.dan{background:rgba(251,113,133,.16);color:#FB7185;}

/* mini bar chart */
.chartbars{display:flex;align-items:flex-end;gap:8px;height:118px;padding-top:6px;}
.chartbars div{flex:1;border-radius:5px 5px 0 0;background:var(--grad-cyan);opacity:.9;position:relative;}
.chartbars div:nth-child(even){background:linear-gradient(135deg,#6366F1,#4338CA);}
.chartlabels{display:flex;gap:8px;margin-top:7px;}
.chartlabels span{flex:1;text-align:center;font-size:.56rem;color:var(--ink-400);}

/* timeline */
.m-time li{display:flex;gap:10px;padding-bottom:13px;position:relative;}
.m-time li::before{content:"";position:absolute;left:5px;top:15px;bottom:0;width:1px;background:rgba(255,255,255,.11);}
.m-time li:last-child::before{display:none;}
.m-time li i{width:11px;height:11px;border-radius:50%;background:var(--cyan-400);flex:none;margin-top:3px;box-shadow:0 0 0 3px rgba(34,211,238,.16);}
.m-time li.alt i{background:var(--amber-400);box-shadow:0 0 0 3px rgba(251,191,36,.16);}
.m-time li b{display:block;font-size:.7rem;color:#fff;font-weight:650;}
.m-time li span{font-size:.63rem;color:var(--ink-400);}

/* ---------- 15. Phone mockups ---------- */
.phones{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;perspective:1400px;}
.phone{
  width:264px;flex:none;border-radius:38px;padding:11px;background:linear-gradient(160deg,#1B2A4C,#0A1226);
  border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow-lg);
}
.phone-in{background:#080F22;border-radius:29px;overflow:hidden;position:relative;height:582px;display:flex;flex-direction:column;}
.notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:82px;height:20px;background:#080F22;border-radius:100px;z-index:5;}
.p-status{display:flex;justify-content:space-between;padding:12px 18px 6px;font-size:.6rem;color:var(--ink-300);font-weight:650;}
.p-head{padding:12px 18px 12px;background:linear-gradient(160deg,rgba(34,211,238,.16),transparent);}
.p-head small{font-size:.63rem;color:var(--ink-400);}
.p-head h6{margin:2px 0 0;font-size:.95rem;color:#fff;font-weight:750;}
.p-body{flex:1;padding:0 16px 12px;overflow:hidden;}
.p-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:12px;margin-bottom:9px;}
.p-hero{background:var(--grad-cyan);color:#04121A;border:0;}
.p-hero span{font-size:.62rem;font-weight:750;opacity:.72;text-transform:uppercase;letter-spacing:.06em;}
.p-hero b{display:block;font-size:1.5rem;line-height:1.2;margin:3px 0 2px;}
.p-hero em{font-style:normal;font-size:.63rem;font-weight:700;opacity:.75;}
.p-row{display:flex;align-items:center;gap:10px;}
.p-row>div{min-width:0;flex:1;}
.p-row i{width:32px;height:32px;border-radius:10px;background:rgba(34,211,238,.16);flex:none;display:grid;place-items:center;color:var(--cyan-300);font-style:normal;font-size:.7rem;font-weight:800;}
.p-row b{font-size:.73rem;color:#fff;font-weight:650;display:block;}
.p-row s{text-decoration:none;font-size:.62rem;color:var(--ink-400);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p-row u{text-decoration:none;margin-left:auto;flex:none;font-size:.7rem;font-weight:750;color:var(--cyan-300);}
.p-tabs{display:flex;justify-content:space-around;padding:11px 8px 15px;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);}
.p-tabs div{display:grid;place-items:center;gap:4px;font-size:.55rem;color:var(--ink-400);font-weight:650;}
.p-tabs div i{width:17px;height:17px;border-radius:5px;background:currentColor;opacity:.42;}
.p-tabs div.on{color:var(--cyan-300);} .p-tabs div.on i{opacity:1;}
.p-gauge{display:grid;place-items:center;padding:0 0 6px;}
.p-gauge svg{width:122px;height:122px;}
.p-gauge-val{font-size:1.55rem;font-weight:800;fill:#fff;}
.p-gauge-lbl{font-size:.42rem;fill:#93A6C2;letter-spacing:.14em;font-weight:700;}
.spark{display:flex;align-items:flex-end;gap:4px;height:44px;margin-top:10px;}
.spark div{flex:1;background:rgba(34,211,238,.55);border-radius:3px 3px 0 0;}

/* ---------- 16. Screens strip ---------- */
.screens{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.screen{border-radius:var(--r-md);overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0B1327;}
.screen-cap{padding:12px 16px;font-size:.78rem;color:var(--ink-300);border-top:1px solid rgba(255,255,255,.08);}
.screen-cap b{color:#fff;display:block;font-size:.85rem;}

/* ---------- 17. Process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s;}
.step{position:relative;padding-top:26px;}
.step::before{
  counter-increment:s;content:"0" counter(s);
  font-family:var(--ff-mono);font-size:.8rem;font-weight:700;color:var(--cyan-500);
  position:absolute;top:0;left:0;
}
.step::after{content:"";position:absolute;top:8px;left:34px;right:-24px;height:1px;background:var(--line-dark);}
.step:last-child::after{display:none;}
.section--dark .step::after{background:var(--line);}
.step h4{font-size:1.04rem;margin:12px 0 8px;}
.step p{font-size:.9rem;color:var(--ink-400);margin:0;}

/* ---------- 18. Logos / partners ---------- */
.marq{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.brandchip{
  padding:12px 24px;border:1px solid var(--line);border-radius:12px;
  font-weight:700;color:var(--ink-300);font-size:.9rem;letter-spacing:.02em;
  background:rgba(255,255,255,.03);
}

/* ---------- 19. CTA ---------- */
.cta{
  background:var(--grad-cyan);border-radius:var(--r-xl);padding:64px;color:#04121A;
  position:relative;overflow:hidden;
}
.cta::after{
  content:"";position:absolute;right:-70px;top:-70px;width:320px;height:320px;border-radius:50%;
  background:rgba(255,255,255,.18);
}
.cta > *{position:relative;z-index:2;}
.cta h2{font-size:clamp(1.9rem,3.4vw,2.7rem);color:#04121A;}
.cta p{color:rgba(4,18,26,.78);max-width:56ch;font-size:1.05rem;}

/* ---------- 20. Forms ---------- */
.form{display:grid;gap:18px;}
.field label{display:block;font-size:.83rem;font-weight:700;margin-bottom:7px;color:var(--navy-800);}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line-dark);
  font-family:inherit;font-size:.94rem;background:#fff;color:var(--navy-900);transition:.2s;
}
.field textarea{min-height:140px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cyan-500);box-shadow:0 0 0 4px rgba(6,182,212,.14);
}
.form-note{font-size:.8rem;color:var(--ink-400);}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

/* contact info cards */
.ci{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);}
.ci:last-child{border-bottom:0;}
.ci .mini-icon{width:44px;height:44px;border-radius:12px;}
.ci b{display:block;color:#fff;font-size:.95rem;margin-bottom:3px;}
.ci span,.ci a{color:var(--ink-300);font-size:.9rem;}
.ci a:hover{color:var(--cyan-300);}

/* ---------- 21. Accordion ---------- */
.acc{border:1px solid var(--line-dark);border-radius:var(--r-md);overflow:hidden;margin-bottom:12px;background:#fff;}
.acc-q{
  width:100%;text-align:left;padding:20px 24px;background:none;border:0;cursor:pointer;
  font-size:1rem;font-weight:700;color:var(--navy-900);display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.acc-q::after{content:"+";font-size:1.4rem;color:var(--cyan-600);font-weight:600;line-height:1;transition:.25s;}
.acc.open .acc-q::after{transform:rotate(45deg);}
.acc-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.acc-a p{padding:0 24px 22px;margin:0;color:var(--ink-400);font-size:.94rem;}

/* ---------- 22. Footer ---------- */
.footer{background:var(--navy-950);color:var(--ink-300);padding:76px 0 0;border-top:1px solid var(--line);}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:52px;}
.footer h5{color:#fff;font-size:.83rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:20px;font-weight:750;}
.footer li{margin-bottom:11px;font-size:.9rem;}
.footer a:hover{color:var(--cyan-300);}
.footer p{font-size:.9rem;}
.f-bottom{
  border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.84rem;
}
.socials{display:flex;gap:10px;margin-top:20px;}
.socials a{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-300);transition:.22s;
}
.socials a:hover{background:var(--grad-cyan);color:#04121A;border-color:transparent;transform:translateY(-3px);}
.socials svg{width:17px;height:17px;}

/* ---------- 23. Reveal animation ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.4,0,.2,1);}
.rv.in{opacity:1;transform:none;}

/* ---------- 24. Responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:48px;}
  .split{grid-template-columns:1fr;gap:40px;}
  .split--rev .split-media{order:0;}
  .g-4{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .step::after{display:none;}
  .f-grid{grid-template-columns:1fr 1fr;gap:34px;}
  .screens{grid-template-columns:1fr;}
  .mock-body{grid-template-columns:150px 1fr;}
  .m-cols{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .nav-links{
    position:fixed;inset:68px 16px auto 16px;flex-direction:column;align-items:stretch;gap:4px;
    background:rgba(8,14,30,.98);backdrop-filter:blur(20px);border:1px solid var(--line);
    border-radius:18px;padding:14px;box-shadow:var(--shadow-lg);
    opacity:0;visibility:hidden;transform:translateY(-12px);transition:.25s;
  }
  .nav-links.show{opacity:1;visibility:visible;transform:none;}
  .nav-links a{padding:13px 16px;}
  .burger{display:flex;}
  .nav-cta .btn{display:none;}
  .header{background:rgba(6,11,24,.9);backdrop-filter:blur(16px);}
}
@media (max-width:720px){
  .section{padding:72px 0;}
  .hero{padding:150px 0 80px;}
  .banner{padding:140px 0 64px;}
  .g-2,.g-3,.g-4{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr;}
  .f-grid{grid-template-columns:1fr;}
  .cta{padding:40px 28px;}
  .f2{grid-template-columns:1fr;}
  .srow{grid-template-columns:1fr;gap:16px;}
  .m-kpis{grid-template-columns:repeat(2,1fr);}
  .mock-body{grid-template-columns:1fr;}
  .m-side{display:none;}
  .hero-trust{gap:18px;}
  .hero-trust div b{font-size:1.35rem;}
}

/* ---------- 25. CounselDesk product page ---------- */
.frame{margin:0;border-radius:var(--r-lg);overflow:hidden;background:#0B1327;
  border:1px solid rgba(255,255,255,.13);box-shadow:var(--shadow-lg);}
.frame img{width:100%;height:auto;display:block;background:#0B1327;}
.section--soft .frame,.section:not(.section--dark):not(.section--deep) .frame{
  border-color:var(--line-dark);box-shadow:var(--shadow-md);}

.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.tab{
  padding:9px 16px;border-radius:100px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--ink-300);
  font-size:.82rem;font-weight:650;cursor:pointer;transition:.22s;
}
.tab:hover{color:#fff;border-color:rgba(34,211,238,.4);}
.tab[aria-selected="true"]{background:var(--grad-cyan);color:#04121A;border-color:transparent;}
.shot-cap{margin-top:18px;max-width:72ch;}
.shot-cap b{display:block;color:#fff;font-size:1.02rem;margin-bottom:4px;}
.shot-cap p{color:var(--ink-300);font-size:.92rem;margin:0;}
.gal-note{margin-top:14px;font-size:.82rem;color:var(--ink-400);}

/* module catalogue */
.mod-group{padding:30px 0;border-top:1px solid var(--line-dark);}
.section--dark .mod-group,.section--deep .mod-group{border-top-color:var(--line);}
.mod-group:first-of-type{border-top:0;}
.mod-head{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;}
.mod-head h3{margin:0;font-size:1.12rem;color:#fff;}
.mod-head span{
  font-family:var(--ff-mono);font-size:.72rem;font-weight:700;color:var(--cyan-400);
  padding:3px 10px;border-radius:100px;background:rgba(34,211,238,.12);
}
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.mod{border-left:2px solid rgba(34,211,238,.35);padding-left:16px;}
.mod b{display:block;color:#fff;font-size:.96rem;margin-bottom:5px;}
.mod p{color:var(--ink-300);font-size:.875rem;margin:0;}

/* deployment columns */
.deploy{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.deploy-col{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;}
.deploy-col h3{font-size:1.05rem;color:#fff;margin-bottom:18px;}

/* sample-data notice */
.notice{
  display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border-radius:var(--r-md);
  background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.26);
  color:var(--amber-400);font-size:.86rem;line-height:1.55;
}
.notice b{color:var(--amber-400);}

@media (max-width:860px){
  .deploy{grid-template-columns:1fr;}
}

/* =========================================================
   26. ADVANCED LAYER — motion, depth, interaction
   ========================================================= */

/* ---- 26.1 scroll progress ---- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:1000;
  background:var(--grad-cyan);box-shadow:0 0 14px rgba(34,211,238,.7);
  transition:width .08s linear;pointer-events:none;
}

/* ---- 26.2 cursor spotlight ---- */
.spot{
  position:fixed;width:620px;height:620px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(34,211,238,.10) 0%,rgba(34,211,238,.045) 35%,transparent 68%);
  transform:translate3d(-50%,-50%,0);opacity:0;transition:opacity .4s ease;mix-blend-mode:screen;
}
.spot.on{opacity:1;}
@media (hover:none),(max-width:860px){.spot{display:none;}}

/* ---- 26.3 animated hero mesh + grain ---- */
.hero,.banner{isolation:isolate;}
.mesh{position:absolute;inset:-18%;z-index:0;pointer-events:none;filter:blur(72px);opacity:.75;}
.mesh i{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen;}
.mesh i:nth-child(1){width:46%;height:52%;left:-4%;top:-8%;background:rgba(34,211,238,.42);animation:drift1 19s ease-in-out infinite;}
.mesh i:nth-child(2){width:40%;height:46%;right:2%;top:4%;background:rgba(99,102,241,.40);animation:drift2 23s ease-in-out infinite;}
.mesh i:nth-child(3){width:34%;height:38%;left:34%;bottom:-12%;background:rgba(14,165,233,.34);animation:drift3 27s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(9%,7%,0) scale(1.14);}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.08);}50%{transform:translate3d(-11%,9%,0) scale(.92);}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(.95);}50%{transform:translate3d(7%,-9%,0) scale(1.18);}}

.grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.42'/></svg>");
}

/* scan line sweep across dark bands */
.sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.sweep::before{
  content:"";position:absolute;left:-30%;top:0;width:30%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(34,211,238,.055),transparent);
  animation:sweep 9s linear infinite;
}
@keyframes sweep{0%{transform:translateX(0);}100%{transform:translateX(560%);}}

/* ---- 26.4 headline word reveal ---- */
.wsplit{display:inline-block;overflow:hidden;vertical-align:bottom;}
.wsplit > span{display:inline-block;transform:translateY(102%);opacity:0;
  transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .6s ease;}
.wsplit.in > span{transform:none;opacity:1;}

/* ---- 26.5 reveal variants ---- */
.rv-l{opacity:0;transform:translateX(-26px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);}
.rv-r{opacity:0;transform:translateX(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);}
.rv-s{opacity:0;transform:scale(.955);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1);}
.rv-l.in,.rv-r.in,.rv-s.in{opacity:1;transform:none;}

/* ---- 26.6 magnetic + shine buttons ---- */
.btn{position:relative;overflow:hidden;will-change:transform;}
.btn::after{
  content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transition:transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none;
}
.btn:hover::after{transform:translateX(120%) skewX(-18deg);}

/* ---- 26.7 card depth + tilt + border glow ---- */
.card{position:relative;transform-style:preserve-3d;will-change:transform;}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(34,211,238,.55),transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity .3s;
}
.card:hover::before{opacity:1;}

/* ---- 26.8 bento ---- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.bento > *{margin:0;}
.b-2{grid-column:span 2;}
.b-3{grid-column:span 3;}
.b-4{grid-column:span 4;}
.b-tall{grid-row:span 2;}
.bento .card{display:flex;flex-direction:column;justify-content:flex-start;}
.bento .card.pad-lg{padding:38px;}
@media (max-width:1024px){.bento{grid-template-columns:repeat(2,1fr);}
  .b-3,.b-4{grid-column:span 2;}.b-tall{grid-row:auto;}}
@media (max-width:720px){.bento{grid-template-columns:1fr;}
  .b-2,.b-3,.b-4{grid-column:span 1;}}

/* ---- 26.9 marquee ---- */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.marquee-track{display:flex;width:max-content;gap:14px;animation:slide 42s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee + .marquee{margin-top:14px;}
.marquee.rev .marquee-track{animation-direction:reverse;animation-duration:52s;}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---- 26.10 sticky section nav ---- */
.subnav{
  position:sticky;top:64px;z-index:500;margin-bottom:0;
  background:rgba(6,11,24,.84);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.subnav-in{display:flex;gap:4px;overflow-x:auto;padding:10px 0;scrollbar-width:none;}
.subnav-in::-webkit-scrollbar{display:none;}
.subnav a{
  padding:8px 15px;border-radius:100px;font-size:.84rem;font-weight:650;color:var(--ink-300);
  white-space:nowrap;transition:.22s;
}
.subnav a:hover{color:#fff;background:rgba(255,255,255,.07);}
.subnav a.on{color:#04121A;background:var(--grad-cyan);}

/* ---- 26.11 lightbox ---- */
.zoomable{cursor:zoom-in;}
.lb{
  position:fixed;inset:0;z-index:2000;display:none;place-items:center;padding:28px;
  background:rgba(3,7,16,.93);backdrop-filter:blur(10px);
}
.lb.on{display:grid;animation:lbin .25s ease;}
@keyframes lbin{from{opacity:0;}to{opacity:1;}}
.lb img{max-width:min(1600px,96vw);max-height:92vh;width:auto;border-radius:14px;
  box-shadow:0 40px 110px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.16);}
.lb-x{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;
  font-size:1.3rem;line-height:1;cursor:pointer;}
.lb-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:var(--ink-300);font-size:.86rem;}

/* ---- 26.12 frame polish ---- */
.frame{position:relative;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s;}
.frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.frame.lift:hover{transform:translateY(-6px);box-shadow:0 44px 90px rgba(5,10,22,.55);}
.frame-glow{position:relative;}
.frame-glow::before{
  content:"";position:absolute;inset:-28px;border-radius:40px;z-index:-1;
  background:radial-gradient(60% 60% at 50% 40%,rgba(34,211,238,.26),transparent 72%);
  filter:blur(26px);
}

/* ---- 26.13 stat / kpi polish ---- */
.stat{position:relative;overflow:hidden;}
.stat::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--grad-cyan);transform:scaleX(0);transform-origin:left;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.stats.in .stat::after{transform:scaleX(1);}
.stats.in .stat:nth-child(2)::after{transition-delay:.12s;}
.stats.in .stat:nth-child(3)::after{transition-delay:.24s;}
.stats.in .stat:nth-child(4)::after{transition-delay:.36s;}

/* ---- 26.14 terminal strip ---- */
.term{
  font-family:var(--ff-mono);font-size:.82rem;color:var(--cyan-300);
  background:rgba(4,10,22,.6);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 20px;display:flex;align-items:center;gap:12px;overflow:hidden;white-space:nowrap;
}
.term b{color:var(--ink-400);font-weight:500;}
.term .cursor{display:inline-block;width:8px;height:15px;background:var(--cyan-400);
  vertical-align:-2px;animation:blink 1.1s step-end infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}

/* ---- 26.15 reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .mesh,.sweep,.spot,.grain{display:none;}
  .rv,.rv-l,.rv-r,.rv-s,.wsplit > span{opacity:1 !important;transform:none !important;}
  .marquee-track{animation:none;}
}

/* ---- 26.16 keep horizontal transforms inside the viewport on small screens ---- */
@media (max-width:900px){
  .rv-l,.rv-r{transform:translateY(22px);}
  .rv-l.in,.rv-r.in{transform:none;}
}
html{overflow-x:clip;}

/* =========================================================
   27. FULL DARK SURFACE — one continuous engineered canvas
   ========================================================= */
body{background:var(--navy-950);color:var(--ink-100);}
.section{background:transparent;}
.section--soft{background:var(--navy-900);}
.section--deep{background:#030712;}

h1,h2,h3,h4,h5{color:#fff;}
.lede{color:var(--ink-300);}
.eyebrow{color:var(--cyan-400);}
.num{color:var(--cyan-400);}

/* cards */
.card{
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid var(--line);color:var(--ink-100);
  backdrop-filter:blur(6px);
}
.card h3{color:#fff;}
.card p{color:var(--ink-300);}
.card:hover{
  border-color:rgba(34,211,238,.42);
  background:linear-gradient(160deg,rgba(34,211,238,.085),rgba(255,255,255,.02));
  box-shadow:0 26px 60px rgba(0,0,0,.45);
}

/* icons inside light-section cards */
.ic-soft{background:rgba(34,211,238,.13)!important;color:var(--cyan-400)!important;
  border:1px solid rgba(34,211,238,.26)!important;box-shadow:none!important;}

/* lists, rows, tags */
.ticks li{color:var(--ink-300);}
.ticks li::before{
  background:rgba(34,211,238,.16) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367E8F9' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat;
}
.srow{border-bottom-color:var(--line);}
.srow p{color:var(--ink-300);}
.tag{background:rgba(255,255,255,.06);color:var(--ink-200);border-color:var(--line);}
.brandchip{border-color:var(--line)!important;color:var(--ink-300)!important;
  background:rgba(255,255,255,.035)!important;}

/* steps */
.step p{color:var(--ink-300);}
.step::after{background:var(--line);}
.step::before{color:var(--cyan-400);}

/* accordion */
.acc{background:rgba(255,255,255,.035);border-color:var(--line);}
.acc-q{color:#fff;}
.acc-q::after{color:var(--cyan-400);}
.acc-a p{color:var(--ink-300);}
.acc:hover{border-color:rgba(34,211,238,.35);}

/* forms */
.field label{color:var(--ink-200);}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.04);border-color:var(--line);color:var(--ink-100);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-400);}
.field select option{background:#0D1730;color:var(--ink-100);}
.field input:focus,.field select:focus,.field textarea:focus{
  background:rgba(255,255,255,.07);border-color:var(--cyan-500);
}
.form-note{color:var(--ink-400);}

/* buttons on dark */
.btn-outline{border-color:var(--line);color:var(--ink-100);}
.btn-outline:hover{border-color:var(--cyan-400);color:var(--cyan-300);}
.btn-dark{background:rgba(255,255,255,.08);color:#fff;border-color:var(--line);}
.btn-dark:hover{background:rgba(255,255,255,.16);}

/* CTA band keeps its bright gradient but gets depth */
.cta{box-shadow:0 40px 90px rgba(6,182,212,.22);}
.cta .btn-dark{background:#04121A;color:#fff;border-color:transparent;}
.cta .btn-dark:hover{background:#0A1226;}
.cta .btn-outline{border-color:rgba(4,18,26,.35);color:#04121A;}
.cta .btn-outline:hover{border-color:#04121A;color:#04121A;background:rgba(255,255,255,.3);}

/* frames and shot captions */
.frame{border-color:var(--line)!important;}
.shot-cap b{color:#fff;}

/* header always solid on a dark canvas */
.header{background:rgba(5,10,22,.72);backdrop-filter:blur(18px);}
.header.scrolled,.header.solid{background:rgba(5,10,22,.92);}

/* section hairline separators */
.section--soft,.section--deep,.section--dark{position:relative;}
.section--soft::before,.section--deep::before,.section--dark::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.26),transparent);
}

/* ---- 27.1 sticky needs a non-scrolling ancestor: use clip, not hidden ---- */
body{overflow-x:clip;}

/* ---- 27.2 map sits on the dark canvas ---- */
.map-wrap{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-lg);position:relative;background:var(--navy-900);
}
.map-wrap iframe{filter:invert(.92) hue-rotate(185deg) saturate(.78) contrast(.9);}
.map-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ---- 27.3 long nowrap content must not stretch its grid column ---- */
.hero-grid > *,.split > *,.grid > *,.bento > *{min-width:0;}
.term{max-width:100%;}
.wsplit{max-width:100%;}