:root{
  --bg:#0D0D0D; --card:#151515; --card-2:#131313;
  --accent:#713DFF; --accent-core:#F54900;
  --white:#F5F5F5; --body-text:#9A9A9A; --muted:#707070;
  --border:rgba(255,255,255,0.1); --border-strong:rgba(255,255,255,0.16);
  --r-sm:4px; --r-md:6px; --r-lg:14px;
  --max:1320px;
  --shadow-card:0 4px 20px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-card-hover:0 16px 40px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-header:0 8px 30px rgba(0,0,0,0.35);
  --shadow-btn:0 8px 20px rgba(0,0,0,0.35);
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
/* scroll-snap-type:y proximity used to live here ("a touch of scroll jacking"). Removed for good —
   it depended on Lenis's CDN-loaded JS adding a class to cancel it out, and if that script is ever
   slow/blocked (ad blockers routinely block generic CDN hosts like unpkg.com), the snap silently
   re-activates with no JS involved at all: scrolling feels fine, then ~1-2s after you stop, the
   browser auto-corrects to the nearest section boundary — reads exactly like "it snaps into place."
   This CSS rule was the actual mechanism causing that, independent of whether Lenis itself loaded
   correctly. Removing it outright (rather than patching the Lenis-dependent disable hook again)
   closes the failure mode for good instead of re-creating the same race a fourth time. */
/* Layered charcoal background — near-black base (#151515) with a large, extremely soft radial
   glow behind the main content area (fades to nothing, no visible circle/hard edge) plus a second
   oversized off-center gradient for gentle uneven depth. Tiles once per viewport height so the
   same soft atmosphere is present consistently down the whole page, scrolling normally with
   content (not fixed to viewport). No color — monochrome charcoal only. */
body{
  background-color:#151515; color:var(--body-text);
  background-image:
    radial-gradient(ellipse 65% 55% at 50% 45%, rgba(55,55,55,0.55) 0%, rgba(38,38,38,0.35) 35%, rgba(21,21,21,0) 75%),
    radial-gradient(ellipse 80% 70% at 20% 80%, rgba(45,45,45,0.18) 0%, rgba(21,21,21,0) 65%);
  background-repeat:repeat-y;
  background-size:100vw 100vh;
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.wordmark,.cta-huge{font-family:'Space Grotesk',-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;}
h1,h2,h3{color:var(--white); font-weight:700; line-height:1.05; letter-spacing:-0.03em;}
h1{font-size:clamp(52px,9vw,124px); font-weight:700; letter-spacing:-0.035em; line-height:0.94; text-transform:uppercase;}
h2{font-size:clamp(28px,4.2vw,44px);}
h3{font-size:22px; letter-spacing:-0.02em;}
a{color:inherit; text-decoration:none;}
.container{max-width:var(--max); margin:0 auto; padding:0 80px;}
@media(max-width:900px){ .container{padding:0 20px;} }
section{padding:140px 0; scroll-snap-align:start; scroll-margin-top:90px;}
@media(max-width:900px){ section{padding:72px 0;} }

/* NOTE: the diagonal light-sweep now lives once on body (background-attachment:fixed) so it flows
   continuously behind every section instead of repeating per-section — see body rule above.
   .light-sweep class is intentionally retired; do not reintroduce per-section sweeps. */

.eyebrow{display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:18px;}
.eyebrow svg{width:14px; height:14px; opacity:0.8;}
.section-head{max-width:760px; margin-bottom:56px;}
.section-head p{color:var(--body-text); font-size:18px; margin-top:16px; max-width:600px;}

/* Monochrome ghost/pill buttons — no colorful fills, matches premium-studio direction */
.btn{
  --mx:0px; --my:0px;
  display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,0.28);
  background:transparent; color:var(--white); font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:14px; letter-spacing:0.02em; text-transform:uppercase; padding:12px 32px; border-radius:100px;
  cursor:pointer; transition:background 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out,
    transform 320ms var(--ease-bounce);
  transform:translate(var(--mx),var(--my)) scale(1);
}
.btn:hover{border-color:var(--white); background:rgba(255,255,255,0.06); transform:translate(var(--mx),var(--my)) scale(1.05);}
.btn:active{transform:translate(var(--mx),var(--my)) scale(0.92); transition-duration:100ms;}
.btn .plus{display:inline-block; transition:transform 320ms var(--ease-bounce);}
.btn:hover .plus{transform:rotate(90deg) scale(1.2);}
.btn-solid{background:var(--white); border-color:var(--white); color:#0D0D0D; box-shadow:var(--shadow-btn);}
.btn-solid:hover{background:transparent; color:var(--white); box-shadow:none;}
.btn-white{background:var(--white); border-color:var(--white); color:#0D0D0D; box-shadow:var(--shadow-btn);}
.btn-white:hover{background:transparent; color:var(--white); box-shadow:none;}
.link-arrow{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--body-text); border-bottom:1px solid var(--border-strong); padding-bottom:3px; transition:color 200ms ease-out, border-color 200ms ease-out, transform 280ms var(--ease-bounce); transform:translateX(0);}
.link-arrow:hover{color:var(--white); border-color:var(--white); transform:translateX(5px);}

/* Nav — spacious, architectural, monochrome premium-studio header.
   Always visible and usable, even at the top of the page — but the dividing line and the
   solid backdrop only appear once you've scrolled, so the bar blends into the hero at rest. */
header{
  position:sticky; top:0; z-index:50;
  background:transparent; border-bottom:1px solid transparent;
  transition:background 280ms ease-out, border-color 280ms ease-out;
}
header.scrolled{ background:rgba(13,13,13,0.97); backdrop-filter:blur(16px); border-bottom-color:var(--border); box-shadow:var(--shadow-header); }
nav{display:flex; align-items:center; justify-content:space-between; padding:26px 80px; transition:padding 280ms ease-out;}
header.scrolled nav{padding:34px 80px;}
@media(max-width:900px){ nav{padding:18px 20px;} header.scrolled nav{padding:22px 20px;} }
.wordmark{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; letter-spacing:0.01em; color:var(--white); display:inline-flex; align-items:center; gap:12px;}
.wordmark span{color:var(--white);}
.wordmark-mark{width:auto; height:18px; object-fit:contain;}
.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links a{font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--white); transition:opacity 200ms ease-out;}
.nav-links a:hover{opacity:0.65;}
.nav-links a.current{opacity:0.5;}
.nav-links a.nav-login{opacity:0.55;}
.nav-links a.nav-login:hover{opacity:0.85;}
.nav-right{display:flex; align-items:center; gap:24px;}
.nav-right .btn{padding:12px 26px; font-weight:600; font-size:13px; letter-spacing:0.06em; gap:6px;}
.nav-right .btn .plus{font-size:17px; line-height:1; font-weight:400;}
@media(max-width:1024px){ .nav-links, .nav-right .btn{display:none;} }
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.hamburger span{width:24px; height:2px; background:var(--white); display:block; transition:all 200ms ease-out;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:1024px){ .hamburger{display:flex;} }
.mobile-panel{display:none; position:fixed; inset:0; top:0; background:var(--bg); z-index:60; padding:120px 20px 40px; flex-direction:column; gap:4px;}
.mobile-panel.open{display:flex;}
.mobile-panel a{color:var(--white); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:28px; padding:18px 4px; border-bottom:1px solid var(--border); letter-spacing:-0.01em; text-transform:uppercase;}
.mobile-panel a:hover{color:var(--body-text);}
.mobile-panel .mp-cta{margin-top:28px;}

/* Hero — huge editorial typography over a subtle 3D room grid, restrained atmospheric lighting */
.hero{position:relative; padding:90px 0 80px; overflow:hidden; text-align:center;}
.hero-grid-wrap{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; transition:transform 400ms ease-out;}
.hero-tunnel{position:absolute; left:0; top:0; width:100%; height:100%; animation:tunnel-drift 26s ease-in-out infinite;}
.hero-tunnel line, .hero-tunnel rect{stroke:rgba(255,255,255,0.09); fill:none; stroke-width:1;}
@keyframes tunnel-drift{ 0%,100%{transform:scale(1) translateY(0);} 50%{transform:scale(1.015) translateY(-6px);} }
.hero-glow{position:absolute; left:50%; top:0%; width:720px; height:560px; margin-left:-360px; z-index:0; pointer-events:none;
  background:radial-gradient(50% 45% at 50% 55%, rgba(255,255,255,0.12) 0%, transparent 80%);
  animation:glow-breathe 10s ease-in-out infinite;
}
@keyframes glow-breathe{ 0%,100%{opacity:0.7;} 50%{opacity:1;} }
@media(prefers-reduced-motion:reduce){ .hero-glow, .hero-tunnel, .chrome-wordmark{animation:none !important;} }
.hero-inner{position:relative; z-index:1; max-width:1000px; margin:0 auto; opacity:0.62; transition:opacity 80ms linear;}
.hero p.lede{font-size:18px; color:var(--body-text); max-width:560px; margin:28px auto 0;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:36px;}

/* Smaller page-header variant for subpages (no chrome wordmark, shorter) */
.page-hero{padding:70px 0 60px;}
.page-hero h1{font-size:clamp(38px,6.5vw,80px);}

/* 3D chrome floating wordmark — CSS-only pseudo-3D object (no WebGL dependency) */
.chrome-wordmark-wrap{perspective:1000px; margin-bottom:12px; height:120px; display:flex; align-items:center; justify-content:center; position:relative;}
.chrome-wordmark-wrap::before{content:''; position:absolute; inset:-40px -60px; z-index:0;
  background:radial-gradient(ellipse 60% 70% at 50% 55%, rgba(0,0,0,0.55) 0%, transparent 75%);}
.chrome-wordmark{
  position:relative; z-index:1;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(30px,5.4vw,64px);
  letter-spacing:0.02em; text-transform:uppercase; display:inline-block;
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 30%,#d4d4d4 48%,#ffffff 55%,#c2c2c2 75%,#f5f5f5 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,0.6)) drop-shadow(0 10px 20px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(255,255,255,0.22));
  transform:perspective(1000px) rotateX(22deg) rotateY(-8deg);
  animation:chrome-float 7s ease-in-out infinite;
  will-change:transform;
}
@keyframes chrome-float{
  0%,100%{transform:perspective(1000px) rotateX(22deg) rotateY(-8deg) translateY(0);}
  50%{transform:perspective(1000px) rotateX(18deg) rotateY(-4deg) translateY(-8px);}
}
@media(max-width:700px){ .chrome-wordmark-wrap{height:80px;} }

/* Trust strip — editorial client band, thin borders, generous breathing room */
.trust{padding:80px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.trust-label{text-align:center; color:var(--muted); font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; font-family:'JetBrains Mono',monospace; margin:0;}
.trust-label-row{display:flex; align-items:center; gap:24px; margin-bottom:48px;}
.trust-label-row span{flex:1; height:1px; background:var(--border);}
.marquee-wrap{position:relative;}
.trust-logos{display:flex; align-items:center; justify-content:center; gap:64px; flex-wrap:wrap;}
.trust-logos img{height:38px; width:auto; filter:grayscale(1) brightness(1.6); opacity:0.75; transition:opacity 200ms ease-out; flex:none;}
.trust-logos img:hover{opacity:1;}

/* Services intro — massive left headline + short right column, matches ref mockup */
.squads-head{display:grid; grid-template-columns:1fr 320px; gap:60px; align-items:end; margin-bottom:64px;}
@media(max-width:900px){ .squads-head{grid-template-columns:1fr; gap:24px;} }
.squads-head h2{font-size:clamp(34px,5.4vw,72px); text-transform:uppercase; line-height:0.98;}
.squads-head .desc{font-size:16px; color:var(--body-text); padding-bottom:6px;}
.squads-head .desc strong{color:var(--white); font-weight:600;}
.services-foot{margin-top:32px;}
.eyebrow-center{justify-content:center;}

/* Services icon-grid (Home) — compact cards, distinct from the /services/ numbered-row treatment */
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media(max-width:1000px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .services-grid{grid-template-columns:1fr;} }
.service-card{background:rgba(55,55,55,0.55); border:1px solid var(--border-strong); border-radius:var(--r-lg); padding:32px 28px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-card); transition:border-color 200ms ease-out, transform 380ms var(--ease-bounce), box-shadow 380ms var(--ease-bounce);}
.service-card:hover{border-color:rgba(255,255,255,0.35); transform:translateY(-8px) scale(1.02); box-shadow:var(--shadow-card-hover);}
.service-icon{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; margin-bottom:4px;}
.service-icon svg{width:20px; height:20px; stroke:var(--white);}
.service-card h3{font-size:19px; text-transform:none; letter-spacing:-0.01em;}
.service-card p{font-size:14.5px; color:var(--body-text); flex:1;}
.service-card .link-arrow{align-self:flex-start; margin-top:2px;}

/* Stats bar — honest structural facts only, no fabricated revenue/ROAS figures */
.stats-bar{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border-strong); border-radius:var(--r-lg); background:rgba(255,255,255,0.03); margin-top:64px; box-shadow:var(--shadow-card);}
.stats-bar .stat{padding:32px 20px; text-align:center; border-right:1px solid var(--border);}
.stats-bar .stat:last-child{border-right:none;}
.stats-bar .stat .num{display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(24px,3vw,36px); color:var(--white); letter-spacing:-0.02em;}
.stats-bar .stat .label{display:block; font-size:12.5px; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:0.04em;}
@media(max-width:800px){
  .stats-bar{grid-template-columns:repeat(2,1fr);}
  .stats-bar .stat{border-bottom:1px solid var(--border);}
  .stats-bar .stat:nth-child(2n){border-right:none;}
}

/* CTA bar — boxed panel variant, distinct from the full-bleed .close-cta lower on the page */
.cta-bar-section{padding-top:0;}
.cta-bar{display:flex; align-items:center; gap:28px; background:rgba(55,55,55,0.55); border:1px solid var(--border-strong); border-radius:var(--r-lg); padding:40px; flex-wrap:wrap; box-shadow:var(--shadow-card);}
.cta-bar-icon{width:56px; height:56px; border-radius:var(--r-md); background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; flex:none;}
.cta-bar-icon svg{width:24px; height:24px; color:var(--white);}
.cta-bar-text{flex:1; min-width:240px;}
.cta-bar-eyebrow{display:block; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.cta-bar-text h2{font-size:clamp(22px,3vw,32px); text-transform:none; margin-bottom:6px;}
.cta-bar-text p{font-size:14.5px; color:var(--body-text);}
@media(max-width:700px){ .cta-bar{padding:28px 24px;} }

/* Orbit / wireframe globe — dense sphere mesh + curved fan connectors */
.orbit{position:relative; max-width:760px; margin:0 auto; aspect-ratio:1000/760;}
.globe-svg{position:absolute; inset:0; width:100%; height:100%; overflow:hidden;}
.globe-svg .mesh{fill:none; stroke:rgba(255,255,255,0.32); stroke-width:1;}
.globe-svg .outer{stroke:rgba(255,255,255,0.6); stroke-width:1.3;}
.globe-svg .fan-line{fill:none; stroke:var(--border-strong); stroke-width:1; stroke-dasharray:2 5;}
.orbit-tag{position:absolute; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--white); text-align:center; transform:translate(-50%,-100%); white-space:nowrap;}
.orbit-t1{left:33%; top:19%;}
.orbit-t2{left:67%; top:19%;}
.orbit-t3{left:10%; top:6%;}
.orbit-t4{left:90%; top:6%;}
@media(max-width:700px){
  .orbit-tag{font-size:11.5px;}
}

/* Services — editorial numbered rows, not generic feature cards */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:1000px){ .grid-3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .grid-3{grid-template-columns:1fr;} }

.service-list{border-top:1px solid var(--border); margin-top:80px;}
.service-list.no-margin{margin-top:0;}
.service-row{
  display:grid; grid-template-columns:60px 1fr 260px 48px; gap:24px; align-items:center;
  padding:32px 20px; border-bottom:1px solid var(--border); position:relative; overflow:hidden;
  transition:padding 250ms ease-out; text-decoration:none;
}
.service-row::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 300ms ease-out;
  background:radial-gradient(60% 160% at 88% 50%, rgba(255,255,255,0.1), transparent 80%);
}
.service-row:hover{padding-left:32px;}
.service-row:hover::before{opacity:1;}
.service-row .num{font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--muted); position:relative; z-index:1;}
.service-row h3{text-transform:uppercase; letter-spacing:0.01em; position:relative; z-index:1; margin:0;}
.service-row .tags{font-size:14px; color:var(--body-text); text-align:right; position:relative; z-index:1;}
.service-row .arrow{
  width:40px; height:40px; border:1px solid var(--border-strong); border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
  transition:all 200ms ease-out;
}
.service-row .arrow svg{width:16px; height:16px;}
.service-row:hover .arrow{border-color:var(--white); transform:rotate(45deg);}
@media(max-width:800px){
  .service-row{grid-template-columns:1fr; gap:8px; padding:24px 4px; text-align:left;}
  .service-row:hover{padding-left:4px;}
  .service-row .tags{text-align:left;}
  .service-row .arrow{display:none;}
}

/* Mission breaker — oversized editorial statement */
.mission-quote{font-family:'Space Grotesk',sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(30px,5.4vw,64px); max-width:1100px; margin:0 auto; text-align:center; color:var(--white); line-height:1.02; letter-spacing:-0.02em;}
.mission-quote span{color:var(--body-text);}

/* Horizontal scroll-snap carousel (case studies + differentiation) */
.hscroll-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px; flex-wrap:wrap;}
.hscroll-arrows{display:flex; gap:12px; flex:none;}
.hs-arrow{width:44px; height:44px; border-radius:50%; border:1px solid var(--border-strong); background:transparent; color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color 200ms ease-out, color 200ms ease-out, transform 300ms var(--ease-bounce);}
.hs-arrow:hover{border-color:var(--accent); color:var(--accent); transform:scale(1.12);}
.hs-arrow:active{transform:scale(0.9); transition-duration:100ms;}
.hscroll{display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none;}
.hscroll::-webkit-scrollbar{display:none;}
.hscroll > *{scroll-snap-align:start; flex:none;}

/* Case studies — testimonial-style cards, real client data only (no fabricated quotes/stats) */
.case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:1000px){ .case-grid{grid-template-columns:1fr; max-width:480px; margin:0 auto;} }
.case-card{background:rgba(55,55,55,0.55); border:1px solid var(--border-strong); border-radius:var(--r-lg); padding:32px 28px; display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow-card); transition:border-color 200ms ease-out, transform 380ms var(--ease-bounce), box-shadow 380ms var(--ease-bounce);}
.case-card:hover{border-color:rgba(255,255,255,0.35); transform:translateY(-8px) scale(1.02); box-shadow:var(--shadow-card-hover);}
.case-head{display:flex; align-items:center;}
.case-logo{height:22px; width:auto; filter:brightness(1.6);}
.case-headline{font-size:21px; line-height:1.25; letter-spacing:-0.01em;}
.case-desc{font-size:14.5px; color:var(--body-text); flex:1;}
.case-stat{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--accent-core); background:rgba(245,73,0,0.08); border:1px solid rgba(245,73,0,0.3); border-radius:var(--r-sm); padding:8px 12px; display:inline-block;}
.case-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:16px; border-top:1px solid var(--border); flex-wrap:wrap;}
.case-pills{display:flex; gap:8px; flex-wrap:wrap;}
.pill{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:4px 10px;}

/* Differentiation numbered gradient cards */
.diff-card{width:min(320px,78vw); min-height:360px; border-radius:var(--r-lg); border:1px solid rgba(255,255,255,0.22); padding:32px; display:flex; flex-direction:column; position:relative; overflow:hidden; box-shadow:var(--shadow-card); transition:transform 380ms var(--ease-bounce), box-shadow 380ms var(--ease-bounce), border-color 200ms ease-out;}
.diff-card:hover{transform:translateY(-8px) scale(1.02); box-shadow:var(--shadow-card-hover); border-color:rgba(255,255,255,0.4);}
.diff-card .num{font-size:56px; font-weight:700; color:var(--white); line-height:1;}
.diff-card p{position:relative; z-index:1; color:var(--white); font-size:16px; margin-top:auto; max-width:240px;}
.diff-1{background:radial-gradient(120% 90% at 20% 100%, rgba(255,255,255,0.12), transparent 65%), rgba(55,55,55,0.75);}
.diff-2{background:radial-gradient(120% 90% at 20% 100%, rgba(255,255,255,0.09), transparent 65%), rgba(55,55,55,0.75);}
.diff-3{background:radial-gradient(120% 90% at 20% 100%, rgba(255,255,255,0.07), transparent 70%), rgba(55,55,55,0.75);}

/* Blog — index grid + article prose */
.blog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media(max-width:800px){ .blog-grid{grid-template-columns:1fr;} }
.blog-card{background:rgba(55,55,55,0.55); border:1px solid var(--border-strong); border-radius:var(--r-lg); padding:32px 28px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-card); transition:border-color 200ms ease-out, transform 380ms var(--ease-bounce), box-shadow 380ms var(--ease-bounce);}
.blog-card:hover{border-color:rgba(255,255,255,0.35); transform:translateY(-8px) scale(1.02); box-shadow:var(--shadow-card-hover);}
.blog-cat{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);}
.blog-card h3{font-size:22px; line-height:1.2; letter-spacing:-0.01em;}
.blog-card p{font-size:14.5px; color:var(--body-text); flex:1;}
.blog-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; border-top:1px solid var(--border);}
.blog-meta{font-size:13px; color:var(--muted);}

.article{max-width:720px; margin:0 auto;}
.article-meta{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted); margin-bottom:18px; text-transform:uppercase; letter-spacing:0.04em; font-family:'JetBrains Mono',monospace;}
.article-meta .blog-cat{color:var(--accent);}
.article h1{font-size:clamp(32px,5vw,52px); text-transform:none; margin-bottom:8px;}
.article .lede{font-size:19px; color:var(--body-text); margin-bottom:0;}
.article-body{margin-top:56px;}
.article-body h2{font-size:26px; text-transform:none; margin:44px 0 16px;}
.article-body p{font-size:16.5px; color:var(--body-text); margin-bottom:20px;}
.article-body p:first-child{margin-top:0;}
.article-body strong{color:var(--white); font-weight:600;}
.article-body ul{margin:0 0 20px; padding-left:22px; color:var(--body-text); font-size:16.5px;}
.article-body ul li{margin-bottom:10px;}

/* FAQ — thin-divider editorial list, not a boxed accordion widget */
.faq-list{border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; background:none; border:none; border-radius:var(--r-sm); color:var(--white); text-align:left; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; padding:28px 4px; cursor:pointer; transition:padding 260ms var(--ease-bounce), background 200ms ease-out;}
.faq-q:hover{background:rgba(255,255,255,0.035); padding-left:14px; padding-right:14px;}
.faq-q .plus{flex:none; width:30px; height:30px; position:relative; border-radius:50%; border:1px solid var(--border-strong); transition:transform 320ms var(--ease-bounce), border-color 220ms ease-out, background 220ms ease-out;}
.faq-q:hover .plus{border-color:var(--white); transform:scale(1.12) rotate(90deg);}
.faq-q .plus::before, .faq-q .plus::after{content:''; position:absolute; background:var(--white); transition:transform 250ms var(--ease-bounce), background 220ms ease-out;}
.faq-q .plus::before{left:6px; top:14px; width:18px; height:2px;}
.faq-q .plus::after{left:14px; top:6px; width:2px; height:18px;}
.faq-item.open .faq-q .plus{background:var(--white); border-color:var(--white); transform:scale(1) rotate(180deg);}
.faq-item.open .faq-q .plus::before{background:#0D0D0D;}
.faq-item.open .faq-q .plus::after{background:#0D0D0D; transform:rotate(90deg); opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height 340ms var(--ease-bounce);}
.faq-a p{color:var(--body-text); font-size:15.5px; padding:0 4px 28px; max-width:680px; opacity:0; transform:translateY(-8px); transition:opacity 260ms ease-out 40ms, transform 320ms var(--ease-bounce) 40ms;}
.faq-item.open .faq-a{max-height:320px;}
.faq-item.open .faq-a p{opacity:1; transform:translateY(0);}

/* Quote flow */
.quote-box{background:rgba(55,55,55,0.75); border:1px solid rgba(255,255,255,0.22); border-radius:var(--r-lg); max-width:760px; margin:0 auto; padding:48px; position:relative; box-shadow:var(--shadow-card-hover);}
@media(max-width:700px){ .quote-box{padding:28px 20px;} }
.quote-step-label{font-size:12.5px; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:10px;}
.quote-progress{display:flex; gap:6px; margin-bottom:36px;}
.quote-progress span{height:3px; flex:1; background:var(--border); border-radius:2px; transition:background 250ms ease-out;}
.quote-progress span.done{background:var(--accent);}
.quote-error{background:rgba(255,90,90,0.12); border:1px solid rgba(255,90,90,0.4); color:#ffb3b3; border-radius:var(--r-sm); padding:12px 16px; font-size:14px; margin-top:14px;}
.required-mark{color:var(--accent-core);}
.quote-form-row input.field-error, .quote-form-row textarea.field-error{border-color:#ff5a5a;}
.quote-step{display:none;}
.quote-step.active{display:block;}
.quote-step h3{font-size:22px; margin-bottom:8px;}
.quote-step .step-sub{font-size:14.5px; color:var(--muted); margin-bottom:28px;}
.pill-grid{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px;}
.pill-choice{border:1px solid var(--border-strong); border-radius:var(--r-sm); background:transparent; color:var(--white); font-family:'Inter',sans-serif; font-size:15px; font-weight:500; padding:14px 22px; cursor:pointer; transition:all 180ms ease-out;}
.pill-choice:hover{border-color:var(--white);}
.pill-choice.selected{background:var(--white); border-color:var(--white); color:#0D0D0D; font-weight:600;}
.login-error{background:rgba(255,90,90,0.12); border:1px solid rgba(255,90,90,0.4); color:#ffb3b3; border-radius:var(--r-sm); padding:12px 16px; font-size:14px; margin-bottom:20px;}
.quote-form-row{margin-bottom:18px;}
.quote-form-row label{display:block; font-size:13.5px; color:var(--muted); margin-bottom:8px; letter-spacing:0.02em;}
.quote-form-row input, .quote-form-row textarea{
  width:100%; background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--r-sm); color:var(--white);
  font-family:'Inter',sans-serif; font-size:15px; padding:13px 16px; transition:border-color 180ms ease-out;
}
.quote-form-row input:focus, .quote-form-row textarea:focus{outline:none; border-color:var(--accent);}
.quote-form-row textarea{min-height:90px; resize:vertical;}
.quote-nav{display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
.quote-back{background:none; border:none; color:var(--muted); font-size:14px; cursor:pointer; padding:8px;}
.quote-back:hover{color:var(--white);}
.quote-back:disabled{visibility:hidden;}
.quote-summary{background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:18px 20px; margin-bottom:24px; font-size:14px; color:var(--body-text);}
.quote-summary strong{color:var(--white);}

/* Glow band */
.glow-band{background:radial-gradient(60% 90% at 50% 0%, rgba(255,255,255,0.09), transparent 65%), var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); text-align:center;}

/* Closing CTA + footer */
.close-cta{padding:100px 0 60px; text-align:center; position:relative; overflow:hidden;}
.close-cta::before{content:''; position:absolute; left:50%; top:-40%; width:900px; height:900px; margin-left:-450px;
  background:radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 65%); pointer-events:none;}
.cta-huge{position:relative; z-index:1; font-weight:400; color:var(--white); font-size:clamp(28px,5.4vw,56px); line-height:1.2; letter-spacing:-0.01em; margin:0 auto 40px; max-width:820px;}
.cta-huge span{color:var(--accent);}

footer{padding:60px 0 40px; border-top:1px solid var(--border);}

/* Expanded footer — newsletter bar, link columns, social, giant chrome wordmark */
.footer-newsletter{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:44px; margin-bottom:44px; border-bottom:1px solid var(--border);}
.footer-newsletter p{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:20px; color:var(--white); margin:0;}
.footer-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-bottom:48px;}
@media(max-width:700px){ .footer-cols{grid-template-columns:repeat(2,1fr);} }
.footer-col{display:flex; flex-direction:column; gap:12px;}
.footer-col h4{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:6px;}
.footer-col a{font-size:14.5px; color:var(--body-text); transition:color 180ms ease-out;}
.footer-col a:hover{color:var(--white);}
.footer-social{display:flex; justify-content:center; gap:16px; margin-bottom:32px;}
.footer-social a{width:38px; height:38px; border:1px solid var(--border-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--body-text); transition:color 180ms ease-out, border-color 180ms ease-out, transform 300ms var(--ease-bounce);}
.footer-social a:hover{color:var(--white); border-color:var(--white); transform:scale(1.15) rotate(-8deg);}
.footer-social a:active{transform:scale(0.9); transition-duration:100ms;}
.footer-social svg{width:17px; height:17px;}
.footer-chrome-wrap{display:flex; justify-content:center; margin:52px 0 20px; overflow:hidden;}
.chrome-wordmark.footer-chrome{font-size:clamp(40px,9vw,140px);}
.footer-contact{text-align:center; font-size:15px; color:var(--body-text); line-height:2; margin-bottom:40px;}
.footer-contact strong{color:var(--white);}
.footer-contact a:hover{color:var(--accent);}
.footer-links{display:flex; justify-content:center; gap:28px; flex-wrap:wrap; font-size:14px; color:var(--muted); margin-bottom:40px;}
.footer-links a:hover{color:var(--white);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-top:28px; border-top:1px solid var(--border); font-size:13px; color:var(--muted);}

.center{text-align:center;}
.mx-auto{margin-left:auto; margin-right:auto;}

/* Home teaser rows (short section-head + link, no full content — drives to dedicated pages) */
.teaser{border-top:1px solid var(--border);}

/* Scroll reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity 600ms ease-out, transform 600ms ease-out;}
.reveal.in-view{opacity:1; transform:translateY(0);}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} }