/* ============ TOKENS ============ */
:root{
  --ink:#0A0A0A; --black:#0F0F0F; --panel:#141414; --panel-2:#1A1A1A;
  --line:#232323; --line-2:#2E2E2E;
  --white:#FFFFFF; --mist:#F5F5F5; --slate:#8A8A8A; --text:#A9A9A9;
  --lime:#CCFF00; --lime-ink:#0A0A0A; --lime-dim:#93B800;
  --f-display:'Outfit',system-ui,sans-serif;
  --f-body:'Work Sans',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:136px;
  --r:14px; --r-lg:22px;
  --wrap:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); font-size:15px}
@media(max-width:900px){
  html{
    scroll-behavior:auto;
    scroll-snap-type:y proximity;
    scroll-padding-top:calc(var(--nav-h) + 8px);
    scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }
  body > section, body > .ticker{
    scroll-snap-align:start;
    scroll-snap-stop:normal;
  }
  /* Founder is taller than one screen; snapping it stretches a black void
     between the CTA and the counters. */
  body > section.fnr{scroll-snap-align:none; scroll-snap-stop:normal}
}
@media(min-width:760px){html{font-size:16px}}
@media(min-width:1100px){html{font-size:17px}}
@media(min-width:1440px){html{font-size:18px}}
body{
  margin:0; background:var(--black); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--f-display); color:var(--white); margin:0; line-height:1.05; letter-spacing:-.028em; font-weight:700}
h1{font-size:clamp(2.35rem,4.9vw,4.1rem); font-weight:800; letter-spacing:-.038em}
h2{font-size:clamp(2rem,4.2vw,3.5rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.5rem); letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:2px solid var(--lime); outline-offset:3px; border-radius:4px}
::selection{background:var(--lime); color:var(--lime-ink)}

/* ============ LAYOUT ============ */
.wrap{width:min(var(--wrap),calc(100% - 48px)); margin-inline:auto}
.sec{padding:var(--s7) 0; position:relative}
.sec--tight{padding:var(--s6) 0}
.sec--ink{background:var(--ink)}
.divider{height:1px; background:var(--line); border:0; margin:0}

/* eyebrow: the focus-bar device from the brand sheet */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--slate); margin-bottom:22px;
}
.eyebrow::before{content:""; width:4px; height:16px; background:var(--lime); border-radius:1px; flex:none}
.lede{font-size:clamp(1rem,1.35vw,1.13rem); max-width:60ch; margin-top:20px; color:var(--text)}
.head{max-width:min(780px,100%)}
.head--split{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s4); align-items:end; max-width:none}
@media(max-width:900px){.head--split{grid-template-columns:1fr; align-items:start}}

/* ============ ATMOSPHERE ============ */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.032; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow{
  position:fixed; width:520px; height:520px; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle,rgba(204,255,0,.09),transparent 62%);
  transform:translate(-50%,-50%); transition:opacity .5s ease; opacity:0; filter:blur(28px);
}
.progress{position:fixed; top:0; left:0; height:2px; background:var(--lime); width:0; z-index:120; transition:width .1s linear}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(10,10,10,.78); backdrop-filter:blur(16px) saturate(1.3); border-bottom-color:var(--line)}
.nav__in{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); width:min(var(--wrap),calc(100% - 48px)); margin-inline:auto}
.nav__logo{display:inline-flex; align-items:center; min-height:44px}
.nav__logo img{height:30px; width:auto}
.nav__links{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.nav__links a{
  position:relative; display:block; padding:9px 15px; font-size:.9rem; font-weight:500; color:var(--text);
  border-radius:9px; transition:color .22s var(--ease), background .22s var(--ease);
}
.nav__links a:hover{color:var(--white); background:rgba(255,255,255,.05)}
.nav__links a.is-active{color:var(--lime-ink); background:var(--lime); font-weight:600}
.nav__cta{display:flex; align-items:center; gap:10px}
.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:1px solid var(--line-2); border-radius:11px; cursor:pointer}
.burger span{display:block; width:17px; height:1.5px; background:var(--white); position:relative; transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--white); transition:.3s var(--ease)}
.burger span::before{top:-5.5px} .burger span::after{top:5.5px}
.burger.is-open span{background:transparent}
.burger.is-open span::before{top:0; transform:rotate(45deg)}
.burger.is-open span::after{top:0; transform:rotate(-45deg)}
.mobnav{
  position:fixed; inset:var(--nav-h) 0 0; background:var(--ink); z-index:99; padding:var(--s4) 24px;
  display:flex; flex-direction:column; gap:2px; transform:translateY(-12px); opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mobnav.is-open{opacity:1; visibility:visible; transform:none}
.mobnav a{padding:17px 4px; font-family:var(--f-display); font-size:1.5rem; font-weight:600; color:var(--white); border-bottom:1px solid var(--line)}
.mobnav .btn{margin-top:var(--s3); justify-content:center}

/* ============ BUTTONS ============ */
.btn{
  --bg:var(--lime); --fg:var(--lime-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 26px; background:var(--bg); color:var(--fg);
  font-family:var(--f-display); font-weight:600; font-size:.97rem; letter-spacing:-.01em;
  border:1px solid transparent; border-radius:12px; cursor:pointer; white-space:nowrap;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 36px -12px rgba(204,255,0,.55), 0 5px 14px -8px rgba(0,0,0,.5)}
.btn:active{transform:translateY(0) scale(.97); box-shadow:0 6px 16px -8px rgba(204,255,0,.4)}
.btn svg{transition:transform .28s var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn--ghost{--bg:transparent; --fg:var(--white); border-color:var(--line-2)}
.btn--ghost:hover{--bg:rgba(255,255,255,.06); box-shadow:none; border-color:#3C3C3C}
.btn--sm{min-height:42px; padding:10px 19px; font-size:.88rem; border-radius:10px}
.btn--lg{min-height:56px; padding:17px 34px; font-size:1.04rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.4; cursor:not-allowed; box-shadow:none}
.btn--onlight{--bg:var(--ink); --fg:var(--white)}

/* ============ FOCUS BOX (signature) ============ */
.fbox{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--lime); color:var(--lime-ink); border-radius:.16em;
  padding:0 .17em .06em; position:relative;
}
.hero__rotor{
  box-sizing:content-box;
  display:inline-flex; align-items:center; justify-content:flex-start;
  background:var(--lime); color:var(--lime-ink); border-radius:.15em;
  padding:0 .16em; overflow:hidden; vertical-align:baseline;
  width:5.4ch; transition:width .5s var(--ease);
}
.hero__rotor b{
  display:block; white-space:nowrap; font-weight:inherit; line-height:1.16;
  transition:transform .3s var(--ease), opacity .28s var(--ease);
}
.hero__rotor.is-swap b{transform:translateY(-105%); opacity:0}

/* A small sparkle animating in above the highlighted word — sits outside
   .hero__rotor so its own overflow:hidden (needed for the typewriter swap)
   never clips it. */
.hero__rotor-wrap{position:relative; display:inline-flex}
.hero__spark{
  position:absolute; top:-14px; right:-9px; width:16px; height:16px;
  color:var(--lime); pointer-events:none; transform-origin:center;
  animation:heroSpark 2.6s ease-in-out .6s infinite;
}
@keyframes heroSpark{
  0%,100%{opacity:.35; transform:scale(.75) rotate(0deg)}
  50%{opacity:1; transform:scale(1.05) rotate(14deg)}
}
@media(prefers-reduced-motion:reduce){.hero__spark{animation:none; opacity:.7}}
@media(max-width:520px){.hero__spark{top:-11px; right:-7px; width:13px; height:13px}}

/* ============ HERO ============ */
.hero{position:relative; padding-top:calc(var(--nav-h) + 78px); padding-bottom:var(--s6); overflow:hidden}
.hero::before{
  content:""; position:absolute; top:-180px; left:50%; width:1100px; height:620px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(204,255,0,.075),transparent 66%); pointer-events:none; filter:blur(20px);
}
.hero__grid{position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:var(--s5); align-items:center}
.hero__grid > *{min-width:0}
.hero h1{margin-bottom:26px}
.hero__trust{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:30px; list-style:none; padding:0}
.hero__trust li{display:flex; align-items:center; gap:8px; font-size:.87rem; color:var(--slate)}
.hero__trust svg{flex:none; color:var(--lime)}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
@media(max-width:1000px){
  .hero__grid{grid-template-columns:1fr; gap:var(--s5)}
  .hero{padding-top:calc(var(--nav-h) + 48px)}
}

/* ============ CONSOLE ============ */
.console{
  position:relative; background:linear-gradient(180deg,#171717,#111);
  border:1px solid var(--line-2); border-radius:var(--r-lg); padding:20px;
  box-shadow:0 44px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.045);
}
.console__bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
.console__tabs{display:flex; gap:4px; background:var(--ink); padding:4px; border-radius:11px; border:1px solid var(--line)}
.console__tab{
  padding:7px 14px; font-family:var(--f-mono); font-size:.71rem; letter-spacing:.08em; text-transform:uppercase;
  background:none; border:0; border-radius:8px; color:var(--slate); cursor:pointer; transition:.22s var(--ease); min-height:40px;
}
.console__tab[aria-selected="true"]{background:var(--lime); color:var(--lime-ink); font-weight:700}
.live{display:flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--slate)}
.live i{width:6px; height:6px; border-radius:50%; background:var(--lime); animation:pulse 2.1s infinite}
@keyframes pulse{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(204,255,0,.5)}50%{opacity:.55; box-shadow:0 0 0 6px rgba(204,255,0,0)}}
.console__hero{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:6px}
.console__label{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--slate); display:block; margin-bottom:6px}
.console__big{font-family:var(--f-display); font-size:clamp(2.4rem,4.6vw,3.2rem); font-weight:800; color:var(--white); line-height:1; letter-spacing:-.035em}
.delta{display:inline-flex; align-items:center; gap:4px; font-family:var(--f-mono); font-size:.78rem; font-weight:700; color:var(--lime); background:rgba(204,255,0,.1); border:1px solid rgba(204,255,0,.22); padding:5px 9px; border-radius:7px}
.chart{width:100%; height:132px; display:block; margin:14px 0 6px}
.chart__line{fill:none; stroke:var(--lime); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1200; stroke-dashoffset:1200; transition:stroke-dashoffset 1.7s var(--ease)}
.chart.in .chart__line{stroke-dashoffset:0}
.chart__area{fill:url(#limeFade); opacity:0; transition:opacity .8s ease .55s}
.chart.in .chart__area{opacity:1}
.chart__grid{stroke:var(--line); stroke-width:1}
/* The white comet that used to race along the graph line is removed — it read
   as a lightning flash rather than a data visualisation. The line draws itself
   in on reveal and then stays put. */
.chart__pulse{display:none}
.chart__dot{display:none}
.console__stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:14px}
.console__stat{background:var(--panel); padding:13px 14px}
.console__stat b{display:block; font-family:var(--f-display); font-size:1.22rem; font-weight:700; color:var(--white); letter-spacing:-.02em}
.console__stat span{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate)}
.console__rows{margin-top:14px; display:flex; flex-direction:column; gap:9px}
.crow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; font-size:.83rem}
.crow__name{color:#C4C4C4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crow__track{grid-column:1/-1; height:6px; background:var(--panel-2); border-radius:99px; overflow:hidden}
/* display:block is load-bearing — the fill is an <i>, and width/height do not
   apply to inline boxes, so without it the bar never paints at all. */
/* Flat lime, no travelling highlight. The near-white band that used to sweep
   through these bars was the other "lightning" effect in the first fold. */
.crow__fill{display:block; height:100%; width:0; border-radius:99px;
  transition:width 1.3s var(--ease);
  background:linear-gradient(90deg,#A8D400,var(--lime))}
.crow__val{font-family:var(--f-mono); font-size:.79rem; color:var(--white); font-weight:500}
/* moving performance bar inside the console — two identical halves travel -50%,
   every child carries its own trailing margin so the loop is seamless. */
.ctick{margin-top:16px; padding-top:12px; border-top:1px solid var(--line); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ctick__track{display:flex; align-items:center; width:max-content; animation:cslide 30s linear infinite}
.ctick:hover .ctick__track{animation-play-state:paused}
.ctick__item{display:flex; align-items:baseline; gap:7px; margin-right:22px; white-space:nowrap; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--slate)}
.ctick__item b{color:var(--lime); font-weight:700; font-size:.78rem; letter-spacing:.02em}
.ctick__sep{width:4px; height:4px; border-radius:50%; background:var(--lime); opacity:.45; flex:none; margin-right:22px}
@keyframes cslide{to{transform:translateX(-50%)}}
.chip{
  position:absolute; z-index:3; display:flex; align-items:center; gap:10px;
  background:rgba(20,20,20,.92); backdrop-filter:blur(12px); border:1px solid rgba(204,255,0,.38);
  border-radius:13px; padding:12px 16px; box-shadow:0 22px 50px -22px rgba(0,0,0,.95), 0 0 28px -6px rgba(204,255,0,.4);
}
.chip b{font-family:var(--f-display); font-size:1.34rem; color:var(--lime); font-weight:800; letter-spacing:-.02em}
.chip span{display:block; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:#C9C9C9}
.chip i{width:32px; height:32px; border-radius:9px; background:var(--lime); display:grid; place-items:center; color:var(--lime-ink); flex:none}
.chip--a{top:0; left:0; animation:float 6.5s ease-in-out infinite}
.chip--b{bottom:0; right:0; animation:float 7.5s ease-in-out infinite .8s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ============ TICKER ============ */
.ticker{border-block:1px solid var(--line); padding:26px 0; background:var(--ink); overflow:hidden; position:relative}
.ticker__label{position:relative; z-index:3; text-align:center; font-family:var(--f-display); font-size:clamp(1rem, 2.5vw, 1.4rem); font-weight:700; letter-spacing:.15em; text-transform:uppercase; margin-bottom:24px; padding:0 20px; line-height:1.4; background:linear-gradient(90deg, var(--slate) 0%, var(--lime) 30%, var(--white) 50%, var(--lime) 70%, var(--slate) 100%); background-size:200% auto; color:var(--lime); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:shine 5s linear infinite}
.ticker__label .fbox{background:transparent; color:inherit; padding:0; border-radius:0; box-shadow:none; text-shadow:none; -webkit-text-fill-color:inherit; display:inline}
@media(max-width:760px){
  .ticker__label{font-size:.85rem; letter-spacing:.12em; margin-bottom:20px; padding:0 16px}
}
@keyframes shine{to{background-position:200% center}}
.ticker__track{display:flex; gap:clamp(36px, 6vw, 88px); width:max-content; animation:slide 42s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker__item{font-family:var(--f-display); font-size:1.22rem; font-weight:600; color:#4F4F4F; letter-spacing:-.02em; white-space:nowrap; transition:color .3s var(--ease)}
.ticker__item:hover{color:var(--white)}
.ticker::before,.ticker::after{content:""; position:absolute; top:0; bottom:0; width:130px; z-index:2; pointer-events:none}
.ticker::before{left:0; background:linear-gradient(90deg,var(--ink),transparent)}
.ticker::after{right:0; background:linear-gradient(270deg,var(--ink),transparent)}

/* ============ LEAK / PROBLEM ============ */
.leaks{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-top:var(--s5)}
.leak{background:var(--black); padding:38px 34px; transition:background .35s var(--ease)}
.leak:hover{background:var(--panel)}
.leak__n{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; color:var(--lime); margin-bottom:16px; display:block}
.leak h3{margin-bottom:11px}
.leak p{font-size:.96rem}
@media(max-width:760px){.leaks{grid-template-columns:1fr} .leak{padding:30px 24px}}

/* ============ PRINCIPLES ============ */
.prin{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s5)}
.prin__i{width:44px; height:44px; border-radius:12px; background:rgba(204,255,0,.1); border:1px solid rgba(204,255,0,.2); display:grid; place-items:center; color:var(--lime); margin-bottom:20px}
.prin h3{margin-bottom:10px}
.prin p{font-size:.95rem}
@media(max-width:820px){.prin{grid-template-columns:1fr; gap:var(--s4)}}

/* ============ SERVICES ============ */
.svcs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:var(--s5)}
.svc{
  position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 28px 30px; overflow:hidden; transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.svc::after{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(204,255,0,.09),transparent 62%);
}
.svc:hover{transform:translateY(-5px); border-color:#3A3A3A; background:var(--panel-2)}
.svc:hover::after{opacity:1}
.svc__i{position:relative; z-index:2; width:48px; height:48px; border-radius:13px; background:var(--ink); border:1px solid var(--line-2); display:grid; place-items:center; color:var(--lime); margin-bottom:22px; transition:.4s var(--ease)}
.svc:hover .svc__i{background:var(--lime); color:var(--lime-ink); border-color:var(--lime)}
.svc h3{position:relative; z-index:2; margin-bottom:10px}
.svc p{position:relative; z-index:2; font-size:.93rem; margin-bottom:18px}
.svc ul{position:relative; z-index:2; list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.svc li{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.05em; color:#909090; background:var(--ink); border:1px solid var(--line); padding:5px 9px; border-radius:6px}
@media(max-width:960px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.svcs{grid-template-columns:1fr}}

/* ============ PROCESS (timeline) ============ */
.tl{position:relative; margin-top:var(--s5)}
.tl__spine{position:absolute; left:23px; top:6px; bottom:6px; width:2px; background:var(--line-2); overflow:hidden; border-radius:2px}
.tl__fill{position:absolute; inset:0; background:linear-gradient(180deg,var(--lime),var(--lime-dim)); transform:scaleY(var(--p,0)); transform-origin:top; transition:transform .2s linear}
.step{display:grid; grid-template-columns:48px 1fr; gap:24px; padding-bottom:36px; position:relative}
.step:last-child{padding-bottom:0}
.step__dot{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line-2); background:var(--ink);
  display:grid; place-items:center; font-family:var(--f-mono); font-size:.8rem; color:var(--slate);
  z-index:2; flex:none; transition:border-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}
.step.in .step__dot{border-color:var(--lime); color:var(--lime); box-shadow:0 0 0 5px rgba(204,255,0,.08)}
.step__body{padding-top:8px}
.step__when{display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-bottom:8px}
.step__body h3{font-size:clamp(1.2rem,2vw,1.55rem); margin-bottom:9px}
.step__body p{font-size:.96rem; max-width:60ch}
@media(max-width:600px){.step{grid-template-columns:38px 1fr; gap:16px} .step__dot{width:38px; height:38px; font-size:.7rem} .tl__spine{left:18px}}

/* ============ CASES ============ */
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:var(--s5)}
.case{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px; transition:border-color .35s var(--ease), transform .35s var(--ease)}
.case:hover{border-color:#3A3A3A; transform:translateY(-4px)}
.case__tag{font-family:var(--f-mono); font-size:.65rem; letter-spacing:.13em; text-transform:uppercase; color:var(--lime); margin-bottom:14px; display:block}
.case h3{margin-bottom:8px; font-size:1.32rem}
.case__sub{font-size:.88rem; color:var(--slate); margin-bottom:22px}
.case__spark{width:100%; height:56px; margin-bottom:20px}
.ba{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; padding:16px; background:var(--ink); border:1px solid var(--line); border-radius:13px; margin-bottom:16px}
.ba__col span{display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:#6A6A6A; margin-bottom:4px}
.ba__col b{font-family:var(--f-display); font-size:1.5rem; font-weight:700; letter-spacing:-.03em; color:#6E6E6E}
.ba__col--to b{color:var(--lime)}
.ba__arrow{color:var(--lime); opacity:.6}
.case__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.case__list li{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.86rem; padding-bottom:9px; border-bottom:1px solid var(--line)}
.case__list li:last-child{border:0; padding-bottom:0}
.case__list b{font-family:var(--f-mono); font-size:.86rem; color:var(--lime); font-weight:700}
@media(max-width:960px){.cases{grid-template-columns:1fr}}

/* ============ REAL RESULTS (screenshot proof) ============ */
.shots{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:var(--s5)}
.shot{margin:0}
.shot__bar{
  display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--panel); border:1px solid var(--line); border-bottom:0;
  border-radius:var(--r-lg) var(--r-lg) 0 0; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate);
}
.shot__bar::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--lime); flex:none}
.shot__frame{
  aspect-ratio:16/10; border:1px dashed var(--line-2); border-top:1px solid var(--line); border-radius:0 0 var(--r-lg) var(--r-lg);
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 2px, transparent 2px 14px), var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#4A4A4A; overflow:hidden;
}
.shot__frame span{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.05em; color:#565656; text-align:center; padding:0 20px}
.shot__frame img{width:100%; height:100%; object-fit:cover; display:block}
@media(max-width:900px){.shots{grid-template-columns:1fr}}

/* ============ COMPARISON ============ */
.cmp{margin-top:var(--s5); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.cmp__row{display:grid; grid-template-columns:1.05fr 1.25fr 1.25fr; border-bottom:1px solid var(--line)}
.cmp__row:last-child{border-bottom:0}
.cmp__row--head{background:var(--ink)}
.cmp__cell{padding:20px 24px; font-size:.93rem; border-right:1px solid var(--line)}
.cmp__cell:last-child{border-right:0}
.cmp__cell--k{font-family:var(--f-display); font-weight:600; color:var(--white); font-size:.98rem}
.cmp__cell--us{background:rgba(204,255,0,.032); color:#D6D6D6}
.cmp__row--head .cmp__cell{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--slate); padding-block:15px}
.cmp__row--head .cmp__cell--us{color:var(--lime)}
.cmp__mark{display:inline-flex; align-items:flex-start; gap:9px}
.cmp__mark svg{margin-top:4px}
.cmp__mark svg{flex:none}
.cmp__cell--us .cmp__mark svg{color:var(--lime)}
.cmp__cell--them{color:#7A7A7A}
.cmp__cell--them svg{color:#5A5A5A}
@media(max-width:820px){
  .cmp__row{grid-template-columns:1fr}
  .cmp__row--head{display:none}
  .cmp__cell{border-right:0; border-bottom:1px solid var(--line); padding:15px 20px}
  .cmp__cell--k{background:var(--ink)}
  .cmp__cell--them::before,.cmp__cell--us::before{display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:#6A6A6A; margin-bottom:6px}
  .cmp__cell--them::before{content:"Most agencies"}
  .cmp__cell--us::before{content:"Scalnix"; color:var(--lime)}
}

/* ============ METRICS ============ */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line)}
.metric{background:var(--ink); padding:44px 26px; text-align:center}
.metric b{display:block; font-family:var(--f-display); font-size:clamp(2.1rem,4vw,3.1rem); font-weight:800; color:var(--white); letter-spacing:-.04em; line-height:1}
.metric b em{font-style:normal; color:var(--lime)}
.metric > span{display:block; margin-top:10px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--slate)}
@media(max-width:820px){.metrics{grid-template-columns:repeat(2,1fr)} .metric{padding:32px 18px}}

/* ============ TESTIMONIALS (marquee) ============ */
.tmarq{position:relative; margin-top:var(--s5); overflow:hidden}
.tmarq::before,.tmarq::after{content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none}
.tmarq::before{left:0; background:linear-gradient(90deg,var(--black),transparent)}
.tmarq::after{right:0; background:linear-gradient(270deg,var(--black),transparent)}
.tmarq__track{display:flex; gap:18px; width:max-content; padding:6px 26px; animation:tslide 64s linear infinite}
.tmarq:hover .tmarq__track, .tmarq:focus-within .tmarq__track, .tmarq.is-touched .tmarq__track{animation-play-state:paused}
@keyframes tslide{to{transform:translateX(-50%)}}
.tcard{
  flex:none; width:380px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 26px; display:flex; flex-direction:column; transition:border-color .35s var(--ease);
  cursor:pointer;
}
.tcard:hover{border-color:#3A3A3A}
.tcard__top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
.tstars{display:flex; gap:3px; color:var(--lime)}
.tchip{font-family:var(--f-mono); font-size:.66rem; color:var(--lime); background:rgba(204,255,0,.09); border:1px solid rgba(204,255,0,.22); border-radius:100px; padding:4px 10px; white-space:nowrap; flex:none}
.tcard p{font-size:.95rem; color:#CACACA; flex:1; line-height:1.6}
.tcard footer{display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
.tav{width:40px; height:40px; border-radius:50%; background:linear-gradient(140deg,var(--lime),var(--lime-dim)); display:grid; place-items:center; color:var(--lime-ink); flex:none}
.tcard strong{display:block; font-family:var(--f-display); font-size:.93rem; color:var(--white); font-weight:600}
.tcard em{font-style:normal; font-family:var(--f-mono); font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; color:var(--slate)}
@media(max-width:600px){.tcard{width:300px; padding:24px 22px}}

/* ============ FAQ ============ */
.faq{margin-top:var(--s5); border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; text-align:left;
  background:none; border:0; padding:26px 4px; cursor:pointer; min-height:64px;
  font-family:var(--f-display); font-size:clamp(1.02rem,1.55vw,1.18rem); font-weight:600; color:var(--white);
  letter-spacing:-.015em; transition:color .25s var(--ease);
}
.faq__q:hover{color:var(--lime)}
.faq__ico{flex:none; width:30px; height:30px; border:1px solid var(--line-2); border-radius:8px; display:grid; place-items:center; color:var(--slate); transition:.32s var(--ease)}
.faq__item.is-open .faq__ico{background:var(--lime); border-color:var(--lime); color:var(--lime-ink); transform:rotate(45deg)}
.faq__a{max-height:0; overflow:hidden; transition:max-height .42s var(--ease)}
.faq__a p{padding:0 60px 28px 4px; font-size:.98rem}

/* ============ BOOKING ============ */
.book{display:grid; grid-template-columns:.92fr 1.08fr; gap:var(--s5); margin-top:var(--s5)}
/* The booking panel (calendar + form) is naturally much taller than the note
   list beside it — with items aligned to the top, the left column ran out of
   content early and left a wall of blank space beneath it. Stretching the
   column to match height and pinning a decorative mark to the bottom of it
   fills that gap instead of leaving it empty. */
.book__left{display:flex; flex-direction:column; min-height:100%}
.book__art{
  margin-top:auto; padding-top:var(--s4); display:flex; align-items:center;
  justify-content:center; min-height:120px; position:relative;
}
.book__art::before{
  content:""; position:absolute; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(204,255,0,.1),transparent 70%); filter:blur(6px);
}
.book__art-ic{
  position:relative; color:var(--lime); opacity:.5; width:52px; height:52px;
  filter:drop-shadow(0 0 26px rgba(204,255,0,.35));
  animation:float 6.5s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){.book__art-ic{animation:none}}
@media(max-width:1000px){.book__art{display:none}}
.book > *{min-width:0}
.book__panel{
  background:linear-gradient(145deg,#181818 0%,#111 68%);
  border:1px solid #303030; border-radius:var(--r-lg); padding:30px;
  box-shadow:0 28px 70px -38px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.035);
}
.book__note{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
.book__note li{display:flex; gap:12px; font-size:.94rem}
.book__note svg{flex:none; color:var(--lime); margin-top:3px}
.fgroup{margin-bottom:16px}
.fgroup label{display:block; font-family:var(--f-mono); font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; color:var(--slate); margin-bottom:8px}
.fgroup input,.fgroup select{
  width:100%; min-height:48px; background:linear-gradient(180deg,#101010,#090909);
  border:1px solid #343434; border-radius:11px;
  padding:12px 15px; color:var(--white); font-size:.95rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 8px 18px -14px #000;
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.fgroup input::placeholder{color:#5A5A5A}
.fgroup input:hover,.fgroup select:hover{border-color:#484848}
.fgroup input:focus,.fgroup select:focus{
  border-color:var(--lime); background:#0D0D0D; outline:none;
  box-shadow:0 0 0 3px rgba(204,255,0,.08), inset 0 1px 0 rgba(255,255,255,.04);
  transform:translateY(-1px);
}
.fgroup input[aria-invalid="true"]{border-color:#FF6B4A}
.fgroup .err{display:none; margin-top:7px; font-size:.79rem; color:#FF8264}
.fgroup.is-bad .err{display:block}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fhelp{font-size:.79rem; color:#6E6E6E; margin-top:9px}
.picker__label{
  display:flex; align-items:center; justify-content:space-between;
  margin:4px 0 14px; padding:9px 11px 9px 9px;
  background:linear-gradient(90deg,rgba(204,255,0,.075),transparent 72%);
  border:1px solid rgba(204,255,0,.12); border-radius:10px;
}
.picker__label span{
  display:flex; align-items:center; gap:9px; font-family:var(--f-mono);
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#D8D8D8;
}
.picker__label span b{
  display:grid; place-items:center; width:23px; height:23px; border-radius:7px;
  background:var(--lime); color:var(--lime-ink); font-size:.7rem;
  box-shadow:0 7px 16px -8px rgba(204,255,0,.85);
}
.picker__label #tzNote{font-size:.58rem; font-weight:500; color:#858585}
.dates{display:flex; gap:9px; overflow-x:auto; padding-bottom:10px; margin-bottom:22px; scrollbar-width:thin}
.dates::-webkit-scrollbar{height:4px}
.dates::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:9px}
.date{
  flex:none; min-width:66px; min-height:74px; padding:11px 8px;
  background:linear-gradient(155deg,#151515,#0B0B0B); border:1px solid #343434;
  border-radius:12px; cursor:pointer; text-align:center;
  box-shadow:0 12px 20px -16px #000, inset 0 1px 0 rgba(255,255,255,.04);
  transition:.25s var(--ease);
}
.date span{display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate)}
.date b{display:block; font-family:var(--f-display); font-size:1.35rem; font-weight:700; color:var(--white); margin:3px 0 1px; letter-spacing:-.02em}
.date em{font-style:normal; font-family:var(--f-mono); font-size:.58rem; color:#6A6A6A; letter-spacing:.06em}
.date:hover{border-color:#555; transform:translateY(-2px)}
.date.is-on{background:var(--lime); border-color:var(--lime); box-shadow:0 12px 24px -12px rgba(204,255,0,.62)}
.date.is-on span,.date.is-on b,.date.is-on em{color:var(--lime-ink)}
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px; margin-bottom:24px}
.slot{
  min-height:46px; padding:11px 8px; background:linear-gradient(180deg,#141414,#0A0A0A);
  border:1px solid #343434; border-radius:11px;
  font-family:var(--f-mono); font-size:.82rem; color:#C4C4C4; cursor:pointer; transition:.22s var(--ease);
}
.slot:hover{border-color:#555; color:var(--white); transform:translateY(-1px)}
.slot.is-on{background:var(--lime); border-color:var(--lime); color:var(--lime-ink); font-weight:700; box-shadow:0 10px 22px -12px rgba(204,255,0,.65)}
.book__done{display:none; text-align:center; padding:26px 10px}
.book__panel.is-done .book__form{display:none}
.book__panel.is-done .book__done{display:block}
.tick{width:66px; height:66px; margin:0 auto 24px; border-radius:50%; background:var(--lime); display:grid; place-items:center; color:var(--lime-ink); animation:pop .5s var(--ease)}
@keyframes pop{from{transform:scale(.5); opacity:0}to{transform:scale(1); opacity:1}}
.book__done h3{font-size:1.6rem; margin-bottom:12px}
.recap{margin:24px auto 0; max-width:340px; text-align:left; background:var(--ink); border:1px solid var(--line); border-radius:13px; padding:18px 20px}
.recap div{display:flex; justify-content:space-between; gap:14px; padding:8px 0; font-size:.88rem; border-bottom:1px solid var(--line)}
.recap div:last-child{border:0}
.recap b{font-family:var(--f-mono); color:var(--white); font-weight:500; font-size:.85rem; text-align:right}
@media(max-width:1000px){.book{grid-template-columns:1fr; gap:var(--s4)}}
@media(max-width:520px){.frow{grid-template-columns:1fr} .book__panel{padding:22px 18px}}

/* ============ FINAL CTA ============ */
.final{position:relative; overflow:hidden; text-align:center; background:var(--ink)}
.final::before{content:""; position:absolute; inset:auto 0 -320px; height:560px; background:radial-gradient(ellipse at center,rgba(204,255,0,.1),transparent 66%); pointer-events:none}
.final__in{position:relative; z-index:2}
.final h2{margin-inline:auto; max-width:19ch}
.final .lede{margin-inline:auto; text-align:center}
.final__actions{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:34px}

/* ============ FOOTER ============ */
.foot{border-top:1px solid var(--line); padding:var(--s5) 0 34px; background:var(--black)}
.foot__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--s4)}
.foot__logo img{height:32px; margin-bottom:20px}
.foot p{font-size:.9rem; max-width:34ch}
.foot h4{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-bottom:18px; font-weight:500}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.foot ul a{display:inline-flex; align-items:center; min-height:40px; padding:2px 0; font-size:.92rem; transition:color .22s var(--ease)}
.foot ul a:hover{color:var(--lime)}
.foot__bar{display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; margin-top:var(--s5); padding-top:26px; border-top:1px solid var(--line); font-size:.83rem; color:#6A6A6A}
.foot__admin{
  display:inline-flex; align-items:center; gap:7px; color:#858585;
  transition:color .2s var(--ease);
}
.foot__admin:hover{color:var(--lime)}
@media(max-width:880px){.foot__grid{grid-template-columns:1fr 1fr; gap:var(--s4)}}
@media(max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* ============ REVEAL + RESPONSIVE + A11Y ============ */
.rv{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0ms)}
.rv.in{opacity:1; transform:none}
.skip{position:absolute; left:-9999px; top:0; background:var(--lime); color:var(--lime-ink); padding:12px 18px; border-radius:0 0 10px 0; z-index:200; font-weight:600}
.skip:focus{left:0}
@media(max-width:960px){
  :root{--s6:76px; --s7:88px}
  .nav__links,.nav__cta .btn{display:none}
  .burger{display:flex}
  .wrap{width:calc(100% - 40px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .rv{opacity:1; transform:none}
  .chart__line{stroke-dashoffset:0} .chart__area{opacity:1}
  .chart__pulse{display:none}
  .glow{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   SCALNIX — PHP BUILD ADDITIONS
   Mobile slider rails · bottom nav · chatbot · lead popup · newsletter ·
   legal pages · admin-managed logo · richer motion.
   ══════════════════════════════════════════════════════════════════════ */

/* ============ BRAND MARK (logo image or wordmark fallback) ============ */
.brandmark{display:inline-flex; align-items:center; gap:9px; font-family:var(--f-display); font-weight:800;
  font-size:1.32rem; letter-spacing:-.045em; color:var(--white); line-height:1}
.brandmark .dot{width:9px; height:9px; border-radius:50%; background:var(--lime); flex:none;
  box-shadow:0 0 0 0 rgba(204,255,0,.55); animation:brandPulse 2.8s ease-out infinite}
@keyframes brandPulse{0%{box-shadow:0 0 0 0 rgba(204,255,0,.5)}70%,100%{box-shadow:0 0 0 9px rgba(204,255,0,0)}}
.foot__logo .brandmark{font-size:1.5rem; margin-bottom:20px}

/* ============ MOBILE SLIDER RAILS ============
   One shared pattern for services / cases / leaks / compare on phones.
   Deliberately NOT locking touch-action to pan-x: the browser resolves the
   gesture by angle, so a vertical swipe that starts on a card still scrolls
   the page instead of trapping the finger in the rail. */
.rail{scrollbar-width:none; -ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.sldr-dots{display:none; gap:6px; justify-content:center; margin-top:18px}
.sldr-dots i{width:6px; height:6px; border-radius:99px; background:var(--line-2); transition:.3s var(--ease)}
.sldr-dots i.on{width:20px; background:var(--lime)}
.sldr-hint{display:none; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:#5E5E5E; margin-top:14px; text-align:center}

@media(max-width:760px){
  .rail{
    display:flex !important; gap:14px;
    grid-template-columns:none !important;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    padding:2px 20px 4px; margin-inline:-20px;
    scroll-padding-left:20px;
  }
  .rail > *{flex:0 0 84%; max-width:84%; scroll-snap-align:start}
  .sldr-dots{display:flex}
  .sldr-hint{display:block}
  /* rails sit edge-to-edge, so drop the grid-shell borders that would clip */
  .leaks.rail{background:none; border:0; border-radius:0}
  .leaks.rail .leak{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel)}
  .cmp.rail{border:0; border-radius:0}
  .cmp.rail .cmp__row{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
}

/* 2x2 grids on phone wherever a single column would waste the screen */
@media(max-width:760px){
  .prin{grid-template-columns:repeat(2,1fr); gap:18px}
  .prin h3{font-size:1.02rem}
  .prin p{font-size:.87rem}
  .prin__i{width:38px; height:38px; margin-bottom:14px}
  .hero__trust{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px}
  .hero__trust li{font-size:.79rem; align-items:flex-start}
  .book__note{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .book__note li{font-size:.85rem}
}
@media(max-width:420px){
  .metrics{grid-template-columns:repeat(2,1fr)}
}

/* Phone: trim the visual weight that only earns its place on desktop */
@media(max-width:760px){
  :root{--s5:48px; --s6:60px; --s7:70px}
  .hide-sm{display:none !important}
  .console{padding:16px}
  .console__rows .crow:nth-child(n+4){display:none}
  .chip{padding:9px 12px}
  .chip b{font-size:.94rem}
  .chip span{font-size:.55rem}
  .shot__frame{aspect-ratio:4/3}
  .lede{font-size:.97rem}
  .foot__grid{grid-template-columns:1fr 1fr; gap:26px var(--s3)}
  .foot__grid > :first-child{grid-column:1/-1}
  .foot__bar{flex-direction:column; gap:6px}
}

/* ============ MOBILE BOTTOM NAV ============ */
.mnav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:98;
  background:rgba(12,12,12,.9); backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--line);
  padding:7px 6px calc(7px + env(safe-area-inset-bottom));
  grid-auto-flow:column; grid-auto-columns:1fr;
}
.mnav a,.mnav button{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:52px; padding:5px 2px; background:none; border:0; cursor:pointer;
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--slate); transition:color .22s var(--ease);
}
.mnav a.on,.mnav button.on,.mnav a:active{color:var(--lime)}
.mnav svg{width:21px; height:21px}
@media(max-width:960px){
  .mnav{display:grid}
  body.has-mnav{padding-bottom:66px}
  .cbot-bubble{bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* ============ CHATBOT ============ */
.cbot-bubble{
  position:fixed; right:18px; bottom:22px; z-index:105;
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:var(--lime); color:var(--lime-ink); display:grid; place-items:center;
  box-shadow:0 14px 38px -10px rgba(204,255,0,.55); transition:transform .3s var(--ease), opacity .3s;
}
.cbot-bubble:hover{transform:scale(1.07)}
.cbot-bubble.hid{opacity:0; pointer-events:none; transform:scale(.6)}
.cbot-bubble .ping{position:absolute; inset:0; border-radius:50%; border:2px solid var(--lime);
  animation:cping 2.4s cubic-bezier(.2,.6,.4,1) infinite}
@keyframes cping{0%{transform:scale(1); opacity:.7}100%{transform:scale(1.55); opacity:0}}

.cbot{
  position:fixed; right:18px; bottom:22px; z-index:106;
  width:min(384px, calc(100vw - 28px)); height:min(600px, calc(100vh - 96px));
  background:var(--panel); border:1px solid var(--line-2); border-radius:20px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.95);
  opacity:0; visibility:hidden; transform:translateY(18px) scale(.97);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.cbot.open{opacity:1; visibility:visible; transform:none}
@media(max-width:520px){
  .cbot{right:0; left:0; bottom:0; width:100%; height:88dvh; border-radius:20px 20px 0 0}
}
.cbot__h{display:flex; align-items:center; gap:11px; padding:15px 16px; background:var(--ink); border-bottom:1px solid var(--line); flex:none}
.cbot__av{width:38px; height:38px; border-radius:11px; background:var(--lime); color:var(--lime-ink);
  display:grid; place-items:center; font-family:var(--f-display); font-weight:800; font-size:1rem; flex:none}
.cbot__h b{display:block; font-family:var(--f-display); font-size:.98rem; color:var(--white); font-weight:600}
.cbot__h small{display:flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:.63rem; color:var(--slate)}
.cbot__h small::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--lime); animation:pulse 2.1s infinite}
.cbot__x{margin-left:auto; width:34px; height:34px; border-radius:9px; background:none; border:1px solid var(--line-2);
  color:var(--slate); cursor:pointer; display:grid; place-items:center; transition:.22s var(--ease); flex:none}
.cbot__x:hover{color:var(--white); border-color:#3E3E3E}
.cbot__tabs{display:flex; gap:4px; padding:9px 12px; background:var(--ink); border-bottom:1px solid var(--line); flex:none}
.cbot__tab{flex:1; min-height:40px; padding:9px 6px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:10px; color:var(--slate); cursor:pointer; font-family:var(--f-mono); font-size:.64rem;
  letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:.22s var(--ease)}
.cbot__tab svg{width:15px; height:15px}
.cbot__tab[aria-selected="true"]{background:var(--lime); border-color:var(--lime); color:var(--lime-ink); font-weight:700}
.cbot__pane{flex:1; min-height:0; display:none; flex-direction:column}
.cbot__pane.on{display:flex}
.cbot__thread{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:16px; display:flex; flex-direction:column; gap:12px}
.cmsg{max-width:86%; padding:11px 14px; border-radius:14px; font-size:.9rem; line-height:1.55; white-space:pre-wrap; word-wrap:break-word}
.cmsg.bot{align-self:flex-start; background:var(--panel-2); border:1px solid var(--line); color:#D2D2D2; border-bottom-left-radius:5px}
.cmsg.me{align-self:flex-end; background:var(--lime); color:var(--lime-ink); font-weight:500; border-bottom-right-radius:5px}
.cmsg.typing{display:flex; gap:4px; align-items:center; padding:14px}
.cmsg.typing i{width:6px; height:6px; border-radius:50%; background:var(--slate); animation:cdot 1.3s infinite}
.cmsg.typing i:nth-child(2){animation-delay:.18s} .cmsg.typing i:nth-child(3){animation-delay:.36s}
@keyframes cdot{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-4px)}}
.cbot__chips{display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px; flex:none}
.cbot__chips button{padding:7px 11px; background:var(--ink); border:1px solid var(--line-2); border-radius:99px;
  color:#B4B4B4; font-size:.76rem; cursor:pointer; transition:.22s var(--ease)}
.cbot__chips button:hover{border-color:var(--lime); color:var(--lime)}
.cbot__in{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:var(--ink); flex:none}
.cbot__in input{flex:1; min-width:0; min-height:44px; background:var(--panel); border:1px solid var(--line-2);
  border-radius:11px; padding:11px 14px; color:var(--white); font-size:.9rem}
.cbot__in input:focus{border-color:var(--lime); outline:none}
.cbot__in button{width:44px; height:44px; flex:none; border:0; border-radius:11px; background:var(--lime);
  color:var(--lime-ink); cursor:pointer; display:grid; place-items:center}
.cbot__in button:disabled{opacity:.4; cursor:not-allowed}
.cbot__gate{padding:20px 16px; display:flex; flex-direction:column; gap:12px}
.cbot__gate h4{font-family:var(--f-display); font-size:1.08rem; color:var(--white); margin:0}
.cbot__gate p{font-size:.86rem; color:var(--slate)}
.cbot__gate input{min-height:46px; background:var(--ink); border:1px solid var(--line-2); border-radius:11px;
  padding:12px 14px; color:var(--white); font-size:.92rem}
.cbot__gate input:focus{border-color:var(--lime); outline:none}
.cbot__act{padding:20px 16px; display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; justify-content:center; flex:1}
.cbot__act .big{width:64px; height:64px; border-radius:18px; background:rgba(204,255,0,.11);
  border:1px solid rgba(204,255,0,.25); color:var(--lime); display:grid; place-items:center}
.cbot__act h4{font-family:var(--f-display); font-size:1.18rem; color:var(--white); margin:0}
.cbot__act p{font-size:.9rem; color:var(--slate); max-width:30ch}

/* ============ LEAD POPUP ============ */
.pop-ov{position:fixed; inset:0; z-index:130; background:rgba(6,6,6,.78); backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; transition:.3s var(--ease); display:grid; place-items:center; padding:20px}
.pop-ov.open{opacity:1; visibility:visible}
.pop{width:min(430px,100%); background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:30px 26px; position:relative; transform:translateY(16px) scale(.97); transition:.32s var(--ease);
  max-height:92vh; overflow-y:auto}
.pop-ov.open .pop{transform:none}
.pop__x{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:9px; background:var(--ink);
  border:1px solid var(--line-2); color:var(--slate); cursor:pointer; display:grid; place-items:center; z-index:2}
.pop__x:hover{color:var(--white)}
.pop h3{font-size:1.42rem; margin-bottom:10px; padding-right:34px}
.pop p{font-size:.93rem; margin-bottom:20px}
.pop .fgroup{margin-bottom:12px}
.pop .ok{display:none; text-align:center; padding:14px 0}
.pop.done .pop__form{display:none} .pop.done .ok{display:block}

/* ============ PEEK — dashboard shot + review reader ============ */
.peek{
  position:fixed; inset:0; z-index:140; display:none;
  background:rgba(6,6,6,.9); backdrop-filter:blur(8px);
  padding:64px 18px 28px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.peek.open{display:block}
.peek__x{
  position:fixed; top:14px; right:14px; z-index:2; width:40px; height:40px;
  border-radius:10px; background:var(--panel); border:1px solid var(--line-2);
  color:var(--slate); cursor:pointer; display:grid; place-items:center;
}
.peek__x:hover{color:var(--white)}
.peek__box{width:min(760px,100%); margin:0 auto}
.peek__shot{margin:0}
.peek__shot img{width:100%; height:auto; display:block; border-radius:14px; border:1px solid var(--line)}
.peek__shot figcaption{
  margin-top:12px; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--slate);
}
.peek .tcard{
  width:100%; max-width:560px; margin:0 auto; cursor:default;
}
.peek .tcard p{
  display:block !important; -webkit-line-clamp:unset !important;
  overflow:visible !important; font-size:1rem; line-height:1.65;
}

/* ============ NEWSLETTER BAND ============ */
.news{border-top:1px solid var(--line); background:var(--ink); padding:var(--s5) 0}
.news__in{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s4); align-items:center}
.news h3{font-size:clamp(1.3rem,2.4vw,1.8rem); margin-bottom:8px}
.news p{font-size:.92rem}
.news form{display:flex; gap:10px}
.news input{flex:1; min-width:0; min-height:50px; background:var(--panel); border:1px solid var(--line-2);
  border-radius:12px; padding:13px 16px; color:var(--white); font-size:.95rem}
.news input:focus{border-color:var(--lime); outline:none}
.news .msg{font-size:.82rem; color:var(--lime); margin-top:10px; min-height:1em}
@media(max-width:820px){.news__in{grid-template-columns:1fr; gap:var(--s3)}}
@media(max-width:520px){.news form{flex-direction:column}}

/* ============ CLIENT TICKER — logo support ============ */
.ticker__item{display:inline-flex; align-items:center}
.ticker__item img{
  height:clamp(42px, 5.6vw, 72px); width:auto; max-width:clamp(150px, 22vw, 240px);
  object-fit:contain; filter:none; opacity:1; transition:.3s var(--ease);
}
.ticker__item:hover img{transform:translateY(-2px); filter:drop-shadow(0 8px 16px rgba(204,255,0,.28))}

/* ============ LEGAL / CONTENT PAGE ============ */
.doc{padding-top:calc(var(--nav-h) + 60px)}
.doc__body{max-width:74ch; margin-top:var(--s4)}
.doc__body h2{font-size:clamp(1.3rem,2.4vw,1.75rem); margin:36px 0 12px}
.doc__body p{margin-bottom:15px; font-size:1rem}
.doc__body ul,.doc__body ol{margin:0 0 16px 20px; padding:0}
.doc__body li{margin-bottom:8px}
.doc__body a{color:var(--lime); text-decoration:underline; text-underline-offset:3px}

/* ============ FLASH / FORM STATES ============ */
.flash{padding:13px 16px; border-radius:11px; font-size:.9rem; margin-bottom:16px}
.flash.ok{background:rgba(204,255,0,.09); border:1px solid rgba(204,255,0,.28); color:var(--lime)}
.flash.bad{background:rgba(255,90,60,.09); border:1px solid rgba(255,90,60,.3); color:#FF8264}
.btn.loading{pointer-events:none; opacity:.75}
.btn.loading::after{content:""; width:15px; height:15px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.slot.gone{opacity:.28; pointer-events:none; text-decoration:line-through}
.date.gone{opacity:.3; pointer-events:none}

/* ============ MOTION POLISH ============ */
@media(prefers-reduced-motion:reduce){
  .cbot-bubble .ping,.brandmark .dot{animation:none}
}

/* ============ STACKING ORDER FIX ============
   Must come last: the base .cbot-bubble rule is declared further up, and at
   equal specificity the later rule wins. (Moot now that .cbot-bubble is
   display:none on phones — kept for the rare fine-pointer tablet that matches
   this breakpoint but isn't touch-primary.) */
@media(max-width:960px){
  .cbot-bubble{bottom:calc(76px + env(safe-area-inset-bottom))}
  .cbot{bottom:calc(72px + env(safe-area-inset-bottom))}
}
@media(max-width:520px){
  /* On a phone the chat is a full-width sheet. Its z-index is above the nav bar,
     so anchoring it to 0 covers the bar cleanly instead of leaving a sliver. */
  .cbot{bottom:0; height:88dvh}
}

/* ══════════════════════════════════════════════════════════════════════
   SCALNIX — ROUND 2
   Bug fixes + motion pass + cinematic footer + ambient art.
   ══════════════════════════════════════════════════════════════════════ */

/* ============ FIX: [hidden] must actually hide ============
   The chatbot panes carry display:flex, which outranks the UA sheet's
   [hidden]{display:none}. That left the name/phone gate on screen next to the
   chips and input, so "Start chatting" looked like it did nothing. */
[hidden]{display:none !important}

/* ============ FIX: marquees froze under Reduce Motion ============
   The blanket reduced-motion reset collapses every animation to .001ms and one
   iteration, so both marquees jumped to their end frame and stopped. These two
   carry content rather than decoration, so they keep running — just slower —
   while every decorative animation stays disabled. */
/* Speed and looping are now handled entirely by fillMarquee() in main.js — it
   measures the rendered content, clones it to fill the container, and sets the
   animation (or "none" under reduced motion) directly on the element. That
   inline setting only loses to an author !important, so none of these tracks
   carry one any more. */
.ticker, .pfloop, .pmarq, .tmarq--duo{
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.ticker.is-drag, .pfloop.is-drag, .pmarq.is-drag, .tmarq--duo.is-drag{cursor: grabbing}
.ticker__track,.tmarq__track,.ctick__track,.pfloop__track,.pmarq__track{will-change:transform}

@keyframes mq-run{ to { transform:translateX(calc(-1 * var(--mqw, 50%))); } }
@keyframes mq-run-rev{ from { transform:translateX(calc(-1 * var(--mqw, 50%))); } to { transform:translateX(0); } }

/* ============ FIX: hero floating chips covered the console ============
   The chips used to float outside the card on a negative offset. At this
   card's actual width that overlap lands on the platform tabs (desktop) or the
   last campaign row (phone) — reported on both. Reserving real padding at every
   size and anchoring the chips inside it (top:0/left:0, bottom:0/right:0 — set
   in the base .chip rules above) guarantees they never sit over content, at any
   viewport. */
.hero__panel{position:relative; padding-block:66px 62px}
@media(max-width:760px){
  .hero__panel{padding-block:60px 56px}
  .chip{padding:9px 13px; gap:9px}
  .chip i{width:28px; height:28px}
  .chip b{font-size:1.1rem}
}
@media(max-width:400px){
  .chip b{font-size:1rem}
  .chip span{font-size:.54rem; letter-spacing:.08em}
}

/* ============ FIX: booking date picker on phones ============
   #dates had picked up the generic .rail sizing, so every date card stretched
   to 84% of the screen and only one was visible. Dates are chips, not cards. */
.dates{scroll-snap-type:x proximity; overscroll-behavior-x:contain; scrollbar-width:none}
.dates::-webkit-scrollbar{display:none}
.date{scroll-snap-align:start}
@media(max-width:760px){
  .dates{gap:8px; padding-bottom:12px; margin-inline:-2px; padding-inline:2px}
  .date{min-width:60px; min-height:70px; padding:9px 6px}
  .date b{font-size:1.2rem}
  .slots{grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px}
  .slot{min-height:44px; font-size:.78rem}
  .picker__label{margin-bottom:10px}
}

/* ============ Principles become a swipe rail on phones ============ */
@media(max-width:760px){
  .prin.rail{gap:14px}
  .prin.rail > *{background:var(--panel); border:1px solid var(--line);
    border-radius:var(--r-lg); padding:24px 22px}
  .prin.rail h3{font-size:1.14rem; margin-bottom:10px}
  .prin.rail p{font-size:.9rem}
  .prin.rail .prin__i{width:42px; height:42px; margin-bottom:16px}
}

/* ============ Phone: trim what does not earn its place ============ */
@media(max-width:760px){
  /* section intro paragraphs repeat what the heading already says */
  .head--split > .lede{font-size:.92rem; color:#8F8F8F}
  .sec--tight .lede{font-size:.94rem}
  .case__sub{font-size:.84rem}
  .svc p{font-size:.89rem}
  .step__body p{font-size:.9rem}
  .foot p{font-size:.85rem}
}

/* ============ TYPEWRITER ROTOR ============
   The rotor now types and deletes rather than sliding, with a blinking caret. */
.hero__rotor{transition:width .18s var(--ease)}
.hero__rotor b{position:relative}
.hero__rotor.typing b::after{
  content:""; position:absolute; right:-3px; top:.1em; bottom:.1em; width:2px;
  background:var(--lime-ink); animation:caret .9s steps(1) infinite;
}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero__rotor.typing b::after{animation:none; opacity:0}}

/* ============ AMBIENT ART — aurora field + light sweep ============
   Slow, very low-opacity colour drifting behind the page, plus a one-off shine
   that crosses a card when it first appears. Decorative only: both are disabled
   under Reduce Motion. */
.aurora{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.aurora i{
  position:absolute; display:block; border-radius:50%; filter:blur(90px); opacity:.42;
  background:radial-gradient(circle,rgba(204,255,0,.30),transparent 70%);
}
.aurora i:nth-child(1){width:46vw; height:46vw; top:-12vw; left:-10vw; animation:drift1 34s ease-in-out infinite}
.aurora i:nth-child(2){width:38vw; height:38vw; top:38vh; right:-12vw;
  background:radial-gradient(circle,rgba(120,200,255,.16),transparent 70%); animation:drift2 44s ease-in-out infinite}
.aurora i:nth-child(3){width:34vw; height:34vw; bottom:-10vw; left:22vw;
  background:radial-gradient(circle,rgba(204,255,0,.18),transparent 70%); animation:drift3 52s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,8vh) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,-6vh) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-7vh) scale(1.18)}}
/* The aurora sits between the page background and the content. Moving the
   background onto <html> lets a negative z-index do that on its own — an
   earlier attempt promoted every body child to position:relative instead,
   which silently un-fixed the nav, the progress bar, the chat bubble, the
   install pill and the popup. Never blanket-set position. */
html{background:var(--black)}
body{background-color:transparent}
.aurora{z-index:-1}

/* glass shine that sweeps a card once as it reveals */
.svc,.case,.leak,.tcard{position:relative; overflow:hidden}
.svc::before,.case::before{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-18deg); pointer-events:none; opacity:0;
}
.svc.in::before,.case.in::before{animation:sweep 1.15s var(--ease) .25s 1}
@keyframes sweep{0%{left:-60%; opacity:0}12%{opacity:1}100%{left:130%; opacity:0}}

/* hairline gradient at the top of each dark section — depth without weight */
.sec--ink::before,.final::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(204,255,0,.35),transparent);
}

@media(prefers-reduced-motion:reduce){
  .aurora{display:none}
  .svc.in::before,.case.in::before{animation:none}
}

/* ============ CINEMATIC FOOTER ============ */
.foot{position:relative; overflow:hidden}
.foot::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);
  background-size:200% 100%; animation:footline 9s linear infinite;
}
@keyframes footline{0%{background-position:200% 0}100%{background-position:-200% 0}}
.foot::after{
  content:""; position:absolute; left:50%; bottom:-260px; width:820px; height:420px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(204,255,0,.10),transparent 68%);
  filter:blur(24px);
}
.foot .wrap{position:relative; z-index:2}
.foot ul a{position:relative; transition:color .25s var(--ease), transform .25s var(--ease)}
.foot ul a::before{
  content:""; position:absolute; left:-12px; top:50%; width:5px; height:5px; margin-top:-2.5px;
  border-radius:50%; background:var(--lime); opacity:0; transform:scale(.4); transition:.25s var(--ease);
}
.foot ul a:hover{transform:translateX(12px)}
.foot ul a:hover::before{opacity:1; transform:scale(1)}
.foot__grid > div a[aria-label]{transition:transform .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease)}
.foot__grid > div a[aria-label]:hover{transform:translateY(-3px); border-color:var(--lime); color:var(--lime)}
/* oversized watermark wordmark, barely there */
.foot__bar{position:relative}
.foot__bar::before{
  content:"SCALNIX"; position:absolute; left:50%; bottom:-34px; transform:translateX(-50%);
  font-family:var(--f-display); font-weight:800; font-size:clamp(4rem,17vw,11rem);
  letter-spacing:-.06em; line-height:1; color:rgba(255,255,255,.026); pointer-events:none;
  white-space:nowrap; z-index:-1;
}
@media(prefers-reduced-motion:reduce){.foot::before{animation:none}}

/* ============ FIRST-VISIT ENTRANCE ============
   Nav, hero copy and the console arrive in sequence the first time the page
   loads. Subsequent scroll reveals stay as they were. */
body.intro .nav,
body.intro .hero h1,
body.intro .hero .eyebrow,
body.intro .hero .lede,
body.intro .hero__actions,
body.intro .hero__trust,
body.intro .hero__panel{opacity:0}
body.intro-go .nav{animation:dropIn .7s var(--ease) both}
body.intro-go .hero .eyebrow{animation:riseIn .7s var(--ease) .12s both}
body.intro-go .hero h1{animation:riseIn .8s var(--ease) .22s both}
body.intro-go .hero .lede{animation:riseIn .7s var(--ease) .38s both}
body.intro-go .hero__actions{animation:riseIn .7s var(--ease) .5s both}
body.intro-go .hero__trust{animation:riseIn .7s var(--ease) .6s both}
body.intro-go .hero__panel{animation:panelIn 1s var(--ease) .42s both}
@keyframes dropIn{from{opacity:0; transform:translateY(-14px)}to{opacity:1; transform:none}}
@keyframes riseIn{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
@keyframes panelIn{from{opacity:0; transform:translateY(28px) scale(.97)}to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){
  body.intro .nav,body.intro .hero h1,body.intro .hero .eyebrow,body.intro .hero .lede,
  body.intro .hero__actions,body.intro .hero__trust,body.intro .hero__panel{opacity:1}
  body.intro-go *{animation:none !important}
}

/* ============ CHATBOT — human touches ============ */
.cbot__thread{scroll-behavior:smooth}
.cmsg{animation:msgIn .34s var(--ease) both}
@keyframes msgIn{from{opacity:0; transform:translateY(9px)}to{opacity:1; transform:none}}
.cmsg time{display:block; margin-top:5px; font-family:var(--f-mono); font-size:.58rem;
  letter-spacing:.06em; opacity:.5}
.cmsg.me time{text-align:right}
.cbot__av{position:relative; overflow:visible}
.cbot__av::after{
  content:""; position:absolute; right:-2px; bottom:-2px; width:11px; height:11px;
  border-radius:50%; background:#4ADE80; border:2px solid var(--ink);
}
@media(prefers-reduced-motion:reduce){.cmsg{animation:none}}

/* ══════════════════════════════════════════════════════════════════════
   SCALNIX — ROUND 3
   Logo proportions · footer socials · proof marquee · lime cursor ·
   glorified comparison · watermark reuse · no duplicate chat on phones.
   ══════════════════════════════════════════════════════════════════════ */

/* ============ LOGO — never distort ============
   The mark carries its own aspect ratio; we only ever constrain the height. */
.brandlogo{height:30px; width:auto; max-width:190px; object-fit:contain; display:block}
.foot__logo .brandlogo{height:40px; max-width:230px; margin-bottom:20px}
@media(max-width:600px){
  .brandlogo{height:26px; max-width:150px}
  .foot__logo .brandlogo{height:34px}
}

/* ============ FOOTER SOCIALS ============ */
.foot__social{display:flex; flex-wrap:wrap; gap:9px; margin-top:22px}
.foot__social a{
  width:40px; height:40px; border:1px solid var(--line-2); border-radius:11px;
  display:grid; place-items:center; color:var(--slate);
  transition:color .25s var(--ease), border-color .25s var(--ease),
             transform .25s var(--ease), background .25s var(--ease);
}
.foot__social a:hover{
  color:var(--lime-ink); background:var(--lime); border-color:var(--lime); transform:translateY(-3px);
}

/* ============ PROOF SCREENSHOTS — auto-loop ============ */
.pmarq{position:relative; overflow:hidden; margin-top:var(--s5)}
.pmarq::before,.pmarq::after{content:""; position:absolute; top:0; bottom:0; width:110px; z-index:2; pointer-events:none}
.pmarq::before{left:0;  background:linear-gradient(90deg,var(--black),transparent)}
.pmarq::after {right:0; background:linear-gradient(270deg,var(--black),transparent)}
.pmarq__track{display:flex; gap:18px; width:max-content; padding:4px 24px; animation:pslide 55s linear infinite}
.pmarq:hover .pmarq__track,.pmarq:focus-within .pmarq__track{animation-play-state:paused}
.pmarq .shot{flex:none; width:min(430px,78vw); margin:0; cursor:zoom-in}
@media(max-width:600px){
  .pmarq__track{gap:12px; padding-inline:16px}
  .pmarq::before,.pmarq::after{width:44px}
}

/* ============ COMPARISON — the boring parts, made to feel premium ============
   The Scalnix column is the point of the table, so it is lifted out of the grid:
   its own surface, a lime edge and a glow, with the rest kept deliberately flat. */
.cmp{position:relative; background:var(--panel); box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.cmp__row{transition:background .3s var(--ease)}
.cmp__row:not(.cmp__row--head):hover{background:rgba(255,255,255,.018)}
.cmp__cell--k{position:relative}
.cmp__row:not(.cmp__row--head) .cmp__cell--k::before{
  content:""; position:absolute; left:0; top:50%; width:3px; height:0; margin-top:-0; background:var(--lime);
  transition:height .3s var(--ease), margin-top .3s var(--ease);
}
.cmp__row:not(.cmp__row--head):hover .cmp__cell--k::before{height:60%; margin-top:-30%}
.cmp__cell--us{
  background:linear-gradient(180deg,rgba(204,255,0,.055),rgba(204,255,0,.025));
  color:#E4E4E4; position:relative;
}
.cmp__cell--us::after{
  content:""; position:absolute; inset:0 0 0 auto; width:1px;
  background:linear-gradient(180deg,transparent,rgba(204,255,0,.5),transparent);
}
.cmp__row--head .cmp__cell--us{
  background:rgba(204,255,0,.1); color:var(--lime); font-weight:700;
}
.cmp__row--head .cmp__cell--us::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--lime);
}
.cmp__cell--them{color:#6E6E6E}
.cmp__cell--them .cmp__mark svg{color:#4A4A4A}
.cmp__cell--us .cmp__mark svg{
  color:var(--lime); filter:drop-shadow(0 0 6px rgba(204,255,0,.45));
}
.cmp__cell--k{font-size:1rem; letter-spacing:-.015em}
@media(max-width:820px){
  .cmp__cell--us{background:rgba(204,255,0,.05)}
  .cmp__cell--us::after{display:none}
}

/* ============ WATERMARK WORDMARK — reused as a section device ============
   The footer treatment the client liked, applied where a section needs depth. */
/* The watermark is a real element, not ::before. Three of the sections that
   use it (.final, and the two .sec--ink ones) already define their own
   ::before for a glow / hairline — same pseudo-element, same specificity, so
   the cascade merged the two rules and the watermark inherited
   `bottom:-320px; height:560px`, pushing it out of the clipped box. It showed
   partially on tall desktop sections and not at all on phones. A dedicated
   child element can't collide with anything. */
.wmark{position:relative; overflow:hidden}
.wmark__bg{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); z-index:0; pointer-events:none;
  white-space:nowrap; user-select:none;
  font-family:var(--f-display); font-weight:800; font-size:clamp(4.5rem,19vw,15rem);
  letter-spacing:-.06em; line-height:1; color:rgba(255,255,255,.045);
}
.wmark > *:not(.wmark__bg){position:relative; z-index:1}
@media(max-width:760px){
  /* a touch stronger on phones — at 2% it read as pure black on an OLED */
  .wmark__bg{color:rgba(255,255,255,.06); font-size:clamp(3.6rem,22vw,7rem)}
}

/* ============ LIME CURSOR ============
   A small filled dot plus a lagging ring, both lime. Pointer-fine only, and the
   native cursor stays put on anything interactive so nothing feels lost. */
@media(pointer:fine){
  body.limecursor{cursor:none}
  body.limecursor a,body.limecursor button,body.limecursor input,
  body.limecursor select,body.limecursor textarea,body.limecursor [role="tab"]{cursor:none}
  .cur-dot,.cur-ring{
    position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
    border-radius:50%; will-change:transform; opacity:0; transition:opacity .3s
  }
  .cur-dot{width:7px; height:7px; background:var(--lime); margin:-3.5px 0 0 -3.5px;
    box-shadow:0 0 12px rgba(204,255,0,.9)}
  .cur-ring{width:34px; height:34px; margin:-17px 0 0 -17px;
    border:1.5px solid rgba(204,255,0,.55);
    transition:opacity .3s, width .25s var(--ease), height .25s var(--ease),
               margin .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease)}
  body.cur-on .cur-dot,body.cur-on .cur-ring{opacity:1}
  /* over something clickable the ring swells and fills faintly */
  body.cur-hot .cur-ring{
    width:54px; height:54px; margin:-27px 0 0 -27px;
    background:rgba(204,255,0,.1); border-color:var(--lime);
  }
  body.cur-hot .cur-dot{opacity:.35}
}
@media(prefers-reduced-motion:reduce){
  body.limecursor{cursor:auto}
  .cur-dot,.cur-ring{display:none}
}

/* ============ PHONE — one chat entry point, not two ============
   The bottom bar already has Chat, so the floating bubble is redundant there. */
@media(max-width:960px){
  .cbot-bubble{display:none}
}

/* ============ ROTATING WORD STRIP (attention device) ============ */
.wordflip{display:inline-grid; vertical-align:bottom; overflow:hidden; height:1.15em}
.wordflip > span{
  grid-area:1/1; opacity:0; transform:translateY(60%);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.wordflip > span.on{opacity:1; transform:none}
.wordflip > span.out{opacity:0; transform:translateY(-60%)}

/* ══════════════════════════════════════════════════════════════════════
   SCALNIX — ROUND 4 · REBUILD
   New typeface pairing · animated hero field · social drawer ·
   portfolio · about · richer diagnosis · cinematic footer.
   ══════════════════════════════════════════════════════════════════════ */

/* ============ TYPOGRAPHY ============
   Archivo carries the headlines — a grotesque with real weight at 800/900 and
   tight tracking, so the big statements land without shouting. Instrument Sans
   sets the body: slightly narrow, high x-height, easy at small sizes on a
   phone. JetBrains Mono stays for anything that reads as data. */
:root{
  --f-display:'Archivo','Outfit',system-ui,sans-serif;
  --f-body:'Instrument Sans','Work Sans',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
}
body{font-family:var(--f-body); letter-spacing:-.005em}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:800; letter-spacing:-.035em}
h1{font-size:clamp(2.5rem,5.4vw,4.4rem); font-weight:900; letter-spacing:-.045em; line-height:1.02}
h2{font-size:clamp(2.05rem,4.3vw,3.4rem); letter-spacing:-.04em; line-height:1.05}
h3{font-size:clamp(1.16rem,1.9vw,1.45rem); font-weight:700; letter-spacing:-.025em}
.btn{font-family:var(--f-display); font-weight:700; letter-spacing:-.015em}
.lede{font-weight:400; line-height:1.6}

/* ============ ANIMATED HERO FIELD ============
   A perspective grid drifting toward the horizon, a slow colour wash and a
   soft vignette. Pure CSS — no canvas, no images, nothing to download. */
.hero{isolation:isolate}
.herobg{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.herobg::before{
  content:""; position:absolute; left:-25%; right:-25%; top:38%; bottom:-45%;
  background-image:
    linear-gradient(rgba(204,255,0,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204,255,0,.13) 1px, transparent 1px);
  background-size:56px 56px;
  transform:perspective(340px) rotateX(64deg);
  transform-origin:50% 0;
  mask-image:linear-gradient(to bottom, transparent, #000 22%, transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, transparent 78%);
  animation:gridrun 9s linear infinite;
}
@keyframes gridrun{to{background-position:0 56px, 0 0}}
.herobg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(204,255,0,.14), transparent 70%),
    radial-gradient(40% 40% at 88% 22%, rgba(120,200,255,.07), transparent 70%);
}
.hero > .wrap{position:relative; z-index:2}
@media(prefers-reduced-motion:reduce){.herobg::before{animation:none}}
@media(max-width:760px){.herobg::before{background-size:40px 40px}}

/* the console chart's horizontal rules read as stray white lines — drop them */
.chart__grid{display:none}

/* ============ SOCIAL DRAWER (right edge) ============ */
.sdrawer-tab{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:97;
  width:38px; height:112px; border:1px solid var(--line-2); border-right:0;
  border-radius:12px 0 0 12px; background:rgba(18,18,18,.92); backdrop-filter:blur(12px);
  color:var(--slate); cursor:pointer; display:grid; place-items:center; gap:0;
  transition:color .25s var(--ease), background .25s var(--ease), width .25s var(--ease);
}
.sdrawer-tab:hover{color:var(--lime); background:var(--panel); width:44px}
.sdrawer-tab span{
  writing-mode:vertical-rl; font-family:var(--f-mono); font-size:.58rem;
  letter-spacing:.2em; text-transform:uppercase;
}
.sdrawer{
  position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw); z-index:120;
  background:var(--ink); border-left:1px solid var(--line-2);
  transform:translateX(101%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column; padding:22px; overflow-y:auto;
}
.sdrawer.open{transform:none}
.sdrawer__x{
  align-self:flex-end; width:38px; height:38px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line-2); color:var(--slate);
  cursor:pointer; display:grid; place-items:center;
}
.sdrawer__x:hover{color:var(--white)}
.sdrawer__blk{padding:26px 0; border-bottom:1px solid var(--line); text-align:center}
.sdrawer__blk:last-child{border-bottom:0}
.sdrawer__ico{
  width:52px; height:52px; margin:0 auto 14px; border-radius:15px;
  border:1px solid rgba(204,255,0,.28); background:rgba(204,255,0,.08);
  color:var(--lime); display:grid; place-items:center;
}
.sdrawer__blk h4{font-size:1.05rem; margin-bottom:5px}
.sdrawer__blk a{color:var(--text); font-size:.9rem; word-break:break-all}
.sdrawer__blk a:hover{color:var(--lime)}
.sdrawer__row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px}
.sdrawer__row a{
  width:42px; height:42px; border:1px solid var(--line-2); border-radius:12px;
  display:grid; place-items:center; color:var(--slate); transition:.25s var(--ease);
}
.sdrawer__row a:hover{color:var(--lime-ink); background:var(--lime); border-color:var(--lime); transform:translateY(-3px)}
.sdrawer-ov{position:fixed; inset:0; z-index:119; background:rgba(6,6,6,.7); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:.3s}
.sdrawer-ov.open{opacity:1; visibility:visible}
@media(max-width:960px){.sdrawer-tab{display:none}}

/* ============ DIAGNOSIS — more visual ============ */
.leak{position:relative; padding-top:44px}
.leak__n{
  position:absolute; top:26px; left:34px;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; color:var(--lime);
}
.leak::after{
  content:attr(data-num); position:absolute; top:6px; right:20px;
  font-family:var(--f-display); font-weight:900; font-size:4.6rem; line-height:1;
  color:rgba(255,255,255,.035); pointer-events:none; letter-spacing:-.05em;
}
.leak__bar{height:3px; background:var(--line-2); border-radius:2px; margin:18px 0 0; overflow:hidden}
.leak__bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lime),var(--lime-dim));
  transition:width 1.1s var(--ease) .2s}
.leak.in .leak__bar i{width:var(--w,70%)}
.leak h3{margin-bottom:9px; font-size:1.18rem}
.leak p{font-size:.92rem}
@media(max-width:760px){.leak{padding-top:40px} .leak__n{left:26px}}

/* ============ PORTFOLIO ============ */
.pf__tabs{display:flex; gap:6px; padding:5px; background:var(--ink); border:1px solid var(--line);
  border-radius:13px; margin-top:var(--s4); width:max-content; max-width:100%}
.pf__tab{
  padding:10px 20px; border:0; border-radius:9px; background:none; color:var(--slate);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; min-height:42px; transition:.22s var(--ease); white-space:nowrap;
}
.pf__tab[aria-selected="true"]{background:var(--lime); color:var(--lime-ink); font-weight:700}
.pf__pane{display:none; margin-top:var(--s4)}
.pf__pane.on{display:block}

/* browser-chrome cards for the sites we shipped */
.pfweb{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:20px}
.pfsite{display:block; group:site}
.pfsite__bar{
  display:flex; align-items:center; gap:6px; padding:9px 12px;
  background:var(--panel-2); border:1px solid var(--line-2); border-bottom:0;
  border-radius:13px 13px 0 0;
}
.pfsite__bar i{width:8px; height:8px; border-radius:50%; background:#3A3A3A; flex:none}
.pfsite__bar .u{flex:1; height:14px; margin-left:6px; border-radius:99px; background:rgba(255,255,255,.05)}
.pfsite__shot{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink);
  border:1px solid var(--line-2); border-top:0; border-radius:0 0 13px 13px;
  transition:border-color .4s var(--ease);
}
.pfsite__shot img{width:100%; height:100%; object-fit:cover; object-position:top;
  transition:transform 1.6s var(--ease)}
.pfsite:hover .pfsite__shot img{transform:scale(1.05)}
.pfsite:hover .pfsite__shot{border-color:rgba(204,255,0,.35)}
.pfsite__go{
  position:absolute; inset:0; display:grid; place-items:center; opacity:0;
  background:rgba(10,10,10,.72); backdrop-filter:blur(2px); transition:opacity .3s var(--ease);
}
.pfsite:hover .pfsite__go{opacity:1}
.pfsite__go span{
  display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:99px;
  background:var(--lime); color:var(--lime-ink); font-family:var(--f-display);
  font-weight:700; font-size:.8rem;
}
.pfsite__meta{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px}
.pfsite__meta b{display:block; font-family:var(--f-display); font-size:1rem; color:var(--white); font-weight:700}
.pfsite__meta span{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--slate)}
.pfsite:hover .pfsite__meta b{color:var(--lime)}

/* instagram grid */
.pfsocial{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px}
.pfpost{
  position:relative; aspect-ratio:9/16; border-radius:15px; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); display:block;
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.pfpost:hover{transform:translateY(-5px); border-color:rgba(204,255,0,.35)}
.pfpost img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease)}
.pfpost:hover img{transform:scale(1.06)}
.pfpost__c{position:absolute; inset:auto 0 0 0; padding:26px 13px 13px;
  background:linear-gradient(transparent,rgba(8,8,8,.92))}
.pfpost__c b{display:block; font-family:var(--f-display); font-size:.84rem; color:#fff; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pfpost__c span{font-family:var(--f-mono); font-size:.55rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--lime)}
@media(max-width:760px){
  .pfweb{grid-template-columns:1fr}
  .pfsocial{grid-template-columns:repeat(2,1fr); gap:10px}
  .pf__tabs{width:100%}
  .pf__tab{flex:1; padding:10px 8px; font-size:.62rem}
}

/* ============ ABOUT / FOUNDER ============ */
.about__grid{
  display:grid; grid-template-columns:minmax(220px,300px) 1fr;
  gap:clamp(28px,5vw,64px); align-items:center;
}
.about__shot{position:relative; max-width:300px; justify-self:center}
.about__frame{
  position:relative; width:100%; aspect-ratio:1; border-radius:50%;
  padding:5px;
  background:conic-gradient(from 200deg, var(--lime) 0 18%, #4a5600 42%, var(--lime) 70%, #6d8200 100%);
  box-shadow:0 0 0 1px rgba(204,255,0,.18), 0 18px 48px rgba(204,255,0,.12);
}
.about__frame::before{
  content:""; position:absolute; inset:5px; border-radius:50%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%, rgba(204,255,0,.16), transparent 42%),
    radial-gradient(circle at 50% 100%, #1a1a1a, #101010 70%);
}
.about__frame img{
  position:relative; z-index:1; width:100%; height:100%;
  object-fit:cover; object-position:top center; border-radius:50%;
  background:#121212;
}
.about__quote{
  margin:18px 8px 0; padding:0; border:0; background:none;
}
.about__quote p{font-size:.88rem; color:#D8D8D8; font-style:italic; line-height:1.5}
.about__quote footer{display:flex; align-items:center; gap:10px; margin-top:10px}
.about__quote footer i{width:22px; height:1px; background:var(--lime); flex:none}
.about__quote footer span{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate)}
.about__body h2{max-width:18ch; margin:10px 0 16px}
.about__body h2 .fbox{padding:.02em .16em .05em; font-weight:800}
.about__body p{margin-bottom:12px; font-size:1rem; max-width:58ch}
.about__pills{
  display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 22px;
  list-style:none; padding:0;
}
.about__pills li{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  background:var(--panel); border:1px solid var(--line); border-radius:99px;
  font-size:.78rem; color:#D2D2D2; white-space:nowrap;
}
.about__pills li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--lime); flex:none}
.about__who{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.about__who b{font-family:var(--f-display); font-size:1.08rem; color:var(--white)}
.about__who span{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate)}
.about__eyebrow-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px}
.about__badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:99px;
  background:rgba(204,255,0,.09); border:1px solid rgba(204,255,0,.25); color:var(--lime);
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase;
}
.about__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:20px 0 4px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.about__stat{background:var(--panel); padding:16px 10px; text-align:center}
.about__stat b{
  display:block; font-family:var(--f-display); font-weight:900; letter-spacing:-.04em;
  font-size:clamp(1.55rem,3.2vw,2.05rem); color:var(--lime); line-height:1;
  font-variant-numeric:tabular-nums;
}
.about__stat span{
  display:block; margin-top:6px; font-family:var(--f-mono); font-size:.56rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--slate); line-height:1.35;
}
.about__actions{display:flex; flex-wrap:wrap; gap:11px; margin-top:4px}
#about .wmark__bg{top:0; transform:translate(-50%,-22%)}
@media(max-width:900px){
  .about__grid{grid-template-columns:1fr; gap:var(--s4); justify-items:center}
  .about__shot{max-width:240px}
  .about__body{width:100%}
  .about__body h2{max-width:none}
  .about__pills li{font-size:.74rem; padding:7px 11px}
}
@media(max-width:520px){
  .about__shot{max-width:200px}
  .about__stats{margin:16px 0 2px}
  .about__stat{padding:12px 6px}
  .about__stat span{font-size:.5rem; letter-spacing:.06em}
  .about__actions .btn{flex:1; min-width:0; justify-content:center}
  .about__quote p{font-size:.8rem}
}


/* ============ METRICS — now high on the page, so give them presence ======= */
.metrics{position:relative}
.metric b{font-family:var(--f-display); font-weight:900; letter-spacing:-.05em}
.metric{transition:background .35s var(--ease)}
.metric:hover{background:var(--panel)}

/* ============ FOOTER — top strip like the reference ============ */
.foot__top{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  padding:0 0 var(--s4); margin-bottom:var(--s4); border-bottom:1px solid var(--line);
}
.foot__top a{display:flex; align-items:center; gap:12px; color:var(--text); transition:color .25s var(--ease)}
.foot__top a:hover{color:var(--lime)}
.foot__top i{
  width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:rgba(204,255,0,.08); border:1px solid rgba(204,255,0,.22); color:var(--lime);
}
.foot__top small{display:block; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.15em;
  text-transform:uppercase; color:#5E5E5E; margin-bottom:2px}
.foot__top b{font-weight:600; font-size:.92rem; color:var(--white); word-break:break-all}
.foot__top a:hover b{color:var(--lime)}
@media(max-width:820px){.foot__top{grid-template-columns:1fr; gap:14px}}

/* ============ CONTENT DENSITY ============
   The client's note was that everything reads as a wall of text. Tighter
   measure and calmer secondary copy does more than deleting sentences. */
.lede{max-width:58ch}
.head--split > .lede{font-size:1rem; color:#8E8E8E}
.svc p,.case__sub,.step__body p{color:#8E8E8E}
@media(max-width:760px){
  .head--split > .lede{font-size:.9rem}
}

/* ══════════════════════════════════════════════════════════════════════
   SCALNIX — ROUND 5 · COMPACT PHONE
   The page was simply too tall on a phone. Everything below trades
   vertical scrolling for horizontal swiping, and tightens the rhythm.
   ══════════════════════════════════════════════════════════════════════ */

/* ============ Console: Meta only ============ */
.console__badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  background:var(--lime); color:var(--lime-ink); border-radius:9px;
  font-family:var(--f-mono); font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.console__badge svg{width:15px; height:15px}

/* ============ Testimonial avatar — initials when there's no photo ======== */
.tav{overflow:hidden}
.tav img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
.tav b{font-family:var(--f-display); font-weight:800; font-size:1rem; color:var(--lime-ink)}

/* ══════════════════════════════════════════════════════════════════════
   TWO-ROW SWIPE RAIL
   Cards flow top-to-bottom then across, so a nine-item grid becomes two
   short rows you swipe instead of nine screens you scroll past.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  .g2rail{
    display:grid !important;
    grid-auto-flow:column;
    grid-template-rows:repeat(2, auto);
    grid-auto-columns:minmax(214px, 68vw);
    gap:10px;
    overflow-x:auto; overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    padding:2px 20px 6px; margin-inline:-20px;
    scroll-padding-left:20px;
    align-items:stretch;
  }
  .g2rail > *{
    flex:none !important; max-width:none !important; width:auto !important;
    scroll-snap-align:start; min-width:0;
  }

  /* services get shorter inside a two-row rail */
  .svcs.g2rail > .svc{padding:18px 16px}
  .svcs.g2rail .svc__i{width:36px; height:36px; margin-bottom:12px; border-radius:10px}
  .svcs.g2rail .svc h3{font-size:.98rem; margin-bottom:6px}
  .svcs.g2rail .svc p{font-size:.81rem; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .svcs.g2rail .svc ul{display:none}     /* tag pills are noise at this size */

  .leaks.g2rail > .leak{padding:34px 18px 18px}
  .leaks.g2rail .leak h3{font-size:1rem}
  .leaks.g2rail .leak p{font-size:.82rem;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
  .leaks.g2rail .leak::after{font-size:3rem; right:12px}
  .leaks.g2rail .leak__n{left:18px; top:16px}

  .pfsocial.g2rail{grid-auto-columns:minmax(132px, 38vw)}
  .pfsocial.g2rail > .pfpost{aspect-ratio:9/14}
  .pfsocial.g2rail .pfpost__c{padding:20px 10px 10px}
  .pfsocial.g2rail .pfpost__c b{font-size:.72rem}

  .pfweb.rail > .pfsite{flex:0 0 82% !important; max-width:82% !important}
}

/* Reviews were briefly a phone-only swipe grid before the client asked for
   the same auto-loop on phone as desktop — that treatment (and its
   animation:none !important, which was silently overriding the JS-driven
   loop below at every screen size) is superseded by `.tmarq--duo` further
   down and has been removed. Do not reintroduce a bare `.tmarq__track`
   override here — anything targeting reviews on mobile belongs scoped under
   `.tmarq--duo` so it can't outrank fillMarquee()'s inline animation again. */

/* ============ Comparison: one swipeable row, not eight stacked blocks ==== */
@media(max-width:820px){
  .cmp{
    display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px, 78vw);
    gap:10px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; background:none; border:0; box-shadow:none;
    padding:2px 20px 6px; margin-inline:-20px; scrollbar-width:none;
  }
  .cmp::-webkit-scrollbar{display:none}
  .cmp__row--head{display:none}
  .cmp__row{
    display:flex; flex-direction:column; scroll-snap-align:start;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
    overflow:hidden;
  }
  .cmp__cell{border:0; padding:13px 15px; font-size:.84rem}
  .cmp__cell--k{
    background:var(--ink); font-size:.9rem; padding:13px 15px;
    border-bottom:1px solid var(--line);
  }
  .cmp__cell--them::before,.cmp__cell--us::before{
    display:block; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.14em;
    text-transform:uppercase; margin-bottom:5px;
  }
  .cmp__cell--them{color:#7A7A7A}
  .cmp__cell--them::before{color:#5E5E5E}
  .cmp__cell--us{border-top:1px solid var(--line)}
  .cmp__cell--us::before{color:var(--lime)}
  .cmp__mark{gap:7px; align-items:flex-start}
  .cmp__mark svg{width:14px; height:14px; margin-top:2px}
}

/* ============ TIGHTER PHONE RHYTHM ============
   Section padding, heading sizes and gaps all come down together — this is
   what actually removes screens of scrolling, more than any single card fix. */
@media(max-width:760px){
  :root{--s4:26px; --s5:32px; --s6:40px; --s7:46px}
  h1{font-size:clamp(1.95rem,8.2vw,2.5rem); line-height:1.06}
  h2{font-size:clamp(1.55rem,6.4vw,2.05rem); line-height:1.1}
  h3{font-size:1.02rem}
  .eyebrow{margin-bottom:12px; font-size:.63rem}
  .lede{margin-top:12px; font-size:.89rem; line-height:1.55}
  .head--split{gap:14px}
  .sldr-dots{margin-top:12px}
  .sldr-hint{margin-top:9px}
  .hero{padding-top:calc(var(--nav-h) + 26px); padding-bottom:var(--s5)}
  .hero h1{margin-bottom:16px}
  .hero__actions{margin-top:22px; gap:9px}
  .hero__actions .btn{flex:1; min-width:0; padding:13px 14px; font-size:.88rem}
  .hero__trust{margin-top:20px}
  .hero__grid{gap:var(--s4)}
  .prin.rail > *{padding:20px 18px}
  .tl{margin-top:var(--s4)}
  .step{padding-bottom:22px; gap:13px}
  .step__body p{font-size:.85rem;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .metric{padding:22px 12px}
  .faq__q{padding:17px 4px; min-height:52px; font-size:.95rem}
  .faq__a p{padding:0 30px 18px 4px; font-size:.87rem}
  .book__panel{padding:18px 15px}
  .news{padding:var(--s5) 0}
  .foot{padding:var(--s5) 0 26px}
  .about__body p{font-size:.89rem; margin-bottom:12px}
  .pf__pane{margin-top:var(--s3)}
  .ticker{padding:18px 0}
  .ticker__label{margin-bottom:14px; font-size:clamp(.72rem, 3.2vw, .9rem)}
  .case{padding:20px 18px}
  .case__list li{font-size:.8rem; padding-bottom:7px}
  .ba{padding:12px; margin-bottom:13px}
  .ba__col b{font-size:1.25rem}
}
@media(max-width:420px){
  .g2rail{grid-auto-columns:minmax(200px, 74vw)}
  .pfsocial.g2rail{grid-auto-columns:minmax(120px, 40vw)}
}

/* Swipe affordance — a rail nobody notices is a rail nobody uses. */
@media(max-width:760px){
  .sldr-hint{display:block}
  .g2rail,.cmp,.tmarq__track{scrollbar-width:none}
  .g2rail::-webkit-scrollbar{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   SCALNIX — ROUND 6
   Opposing review rows · bolder rule icons · richer case cards ·
   self-scrolling portfolio · platform tabs restored.
   ══════════════════════════════════════════════════════════════════════ */

/* ============ Platform tabs (back, click-only) ============ */
.console__tab{display:inline-flex; align-items:center; gap:6px}
.console__tab svg{width:14px; height:14px; opacity:.85}
.console__tab[aria-selected="true"] svg{opacity:1}
@media(max-width:520px){
  .console__tab{padding:7px 10px; font-size:.62rem; gap:4px}
  .console__tab svg{width:12px; height:12px}
}

/* ══════════════════════════════════════════════════════════════════════
   REVIEWS — two rows, opposite directions
   Top row drifts left, bottom row drifts right. Each row holds half the
   reviews printed twice, so -50% lands exactly on the seam.
   ══════════════════════════════════════════════════════════════════════ */
.tmarq--duo{display:flex; flex-direction:column; gap:16px; overflow:hidden}
.tmarq--duo .tmarq__track{
  display:flex; gap:16px; width:max-content;
  animation:tslide 58s linear infinite;
}
.tmarq--duo .tmarq__track--rev{animation:tslide-rev 66s linear infinite}
@keyframes tslide-rev{from{transform:translateX(-50%)} to{transform:translateX(0)}}
.tmarq--duo:hover .tmarq__track,
.tmarq--duo:focus-within .tmarq__track{animation-play-state:paused}
.tmarq--duo .tcard{
  flex:none; width:355px;
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.tmarq--duo .tcard:hover{transform:translateY(-4px); border-color:rgba(204,255,0,.35)}
@media(max-width:760px){
  /* stays a loop on phones now — the client wanted the motion, not a swipe grid */
  .tmarq--duo{gap:10px}
  .tmarq--duo .tmarq__track{gap:10px; animation-duration:40s}
  .tmarq--duo .tmarq__track--rev{animation-duration:46s}
  .tmarq--duo .tcard{width:255px; padding:16px 15px}
  .tmarq--duo .tcard p{font-size:.83rem; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
}
@media(max-width:420px){.tmarq--duo .tcard{width:225px}}

/* ============ THREE RULES — square cards, icons that carry ============ */
.prin{grid-template-columns:repeat(3,1fr); gap:16px}
.prin > *{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 26px; position:relative; overflow:hidden;
  transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.prin > *:hover{border-color:#3A3A3A; transform:translateY(-5px); background:var(--panel-2)}
.prin__i{
  width:62px; height:62px; border-radius:17px; margin-bottom:22px;
  background:var(--lime); border:0; color:var(--lime-ink);
  display:grid; place-items:center;
  box-shadow:0 12px 30px -12px rgba(204,255,0,.55);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.prin__i svg{width:30px; height:30px; stroke-width:2.1}
.prin > *:hover .prin__i{transform:scale(1.07) rotate(-4deg); box-shadow:0 16px 40px -12px rgba(204,255,0,.7)}
/* oversized index behind each rule */
.prin > *::after{
  content:counter(prin); counter-increment:prin;
  position:absolute; top:10px; right:20px; z-index:0;
  font-family:var(--f-display); font-weight:900; font-size:4.4rem; line-height:1;
  color:rgba(255,255,255,.035); letter-spacing:-.05em; pointer-events:none;
}
.prin{counter-reset:prin}
.prin h3,.prin p{position:relative; z-index:1}
@media(max-width:900px){.prin{grid-template-columns:repeat(3,1fr); gap:12px}}
@media(max-width:760px){
  .prin.rail > *{padding:22px 20px}
  .prin__i{width:52px; height:52px; border-radius:15px; margin-bottom:16px}
  .prin__i svg{width:26px; height:26px}
  .prin > *::after{font-size:3.2rem; top:6px; right:14px}
}

/* ============ CASE CARDS — depth, icons, a proper before/after ============ */
.case{
  background:linear-gradient(165deg,#171717,#101010);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.95);
}
.case:hover{box-shadow:0 34px 74px -34px rgba(0,0,0,1), 0 0 0 1px rgba(204,255,0,.16)}
.case__tag{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  background:rgba(204,255,0,.09); border:1px solid rgba(204,255,0,.22);
  border-radius:99px; margin-bottom:16px;
}
.ba{
  background:linear-gradient(180deg,#0D0D0D,#111);
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 26px -18px rgba(0,0,0,.9);
  position:relative; overflow:hidden;
}
.ba::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 100% at 100% 50%, rgba(204,255,0,.09), transparent 70%);
}
.ba__col b{transition:color .3s var(--ease)}
.ba__col--to b{
  color:var(--lime); text-shadow:0 0 22px rgba(204,255,0,.4);
  font-size:1.7rem;
}
.ba__arrow{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:rgba(204,255,0,.12); border:1px solid rgba(204,255,0,.3);
  color:var(--lime); opacity:1;
}
.ba__arrow svg{width:16px; height:16px}
.case__list li{position:relative; padding-left:20px}
.case__list li::before{
  content:""; position:absolute; left:0; top:50%; margin-top:-3px;
  width:6px; height:6px; border-radius:1px; background:var(--lime); opacity:.75;
}
.case__list b{font-family:var(--f-display); font-weight:800}
@media(max-width:760px){
  .ba__col--to b{font-size:1.35rem}
  .ba__arrow{width:26px; height:26px}
  .case__list li{padding-left:15px}
}

/* ============ PORTFOLIO — self-scrolling ============ */
.pfloop{position:relative; overflow:hidden; margin-top:var(--s3)}
.pfloop::before,.pfloop::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.pfloop::before{left:0;  background:linear-gradient(90deg,var(--black),transparent)}
.pfloop::after {right:0; background:linear-gradient(270deg,var(--black),transparent)}
.pfloop__track{display:flex; gap:20px; width:max-content; padding:4px 0 6px;
  animation:pslide 62s linear infinite}
.pfloop--rev .pfloop__track{animation:tslide-rev 74s linear infinite}
.pfloop:hover .pfloop__track,.pfloop:focus-within .pfloop__track{animation-play-state:paused}
.pfloop .pfsite{flex:none; width:min(400px,80vw)}
.pfloop .pfpost{flex:none; width:min(190px,42vw)}
@media(max-width:760px){
  .pfloop__track{gap:12px; animation-duration:44s}
  .pfloop--rev .pfloop__track{animation-duration:52s}
  .pfloop::before,.pfloop::after{width:36px}
  .pfloop .pfsite{width:78vw}
  .pfloop .pfpost{width:38vw}
}

/* dots only ever appear when there is genuinely more than one page */
.sldr-dots:empty{display:none}

/* ══════════════════════════════════════════════════════════════════════
   SCALNIX — ROUND 7
   Why Scalnix — richer, less washed out.
   FAQ — rebuilt with a photo collage + floating ask badge (client reference),
   active row now fills solid lime like the reference instead of just an icon flip.
   ══════════════════════════════════════════════════════════════════════ */

/* ============ WHY SCALNIX — more presence, less grey-on-grey ============ */
.cmp{
  border:1px solid var(--line-2);
  box-shadow:0 40px 90px -46px rgba(0,0,0,1), 0 0 0 1px rgba(204,255,0,.05);
}
.cmp__cell--them{color:#8C8C8C}                 /* was #7A7A7A — a shade brighter to read on the near-black ground */
.cmp__cell--k{color:var(--white); font-size:1.02rem}
.cmp__row--head{position:relative}
.cmp__row--head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);
}
.cmp__cell--us{
  background:linear-gradient(180deg,rgba(204,255,0,.08),rgba(204,255,0,.03));
}
.cmp__row--head .cmp__cell--us{background:rgba(204,255,0,.14)}
@media(max-width:820px){
  .cmp__cell--them{color:#8A8A8A}
  .cmp__row{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
}

/* ══════════════════════════════════════════════════════════════════════
   FAQ — two-row split (heading+ask / photo-collage+accordion), inspired by
   the client's reference: overlapping photo bubbles, a floating chat badge,
   and an accordion row that fills solid lime when open.
   ══════════════════════════════════════════════════════════════════════ */
.faq__ask{margin-top:20px}
.faq__ask svg{transition:transform .25s var(--ease)}
.faq__ask:hover svg{transform:translate(3px,-2px)}

.faq__layout{display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--s5); margin-top:var(--s5); align-items:start}
.faq__layout > *{min-width:0}
/* No photos uploaded yet → the art column has nothing in it, but a grid still
   reserves that track's width even with no child inside it, leaving a large
   blank gap. Collapse to one column until photos are added. */
.faq__layout--full{grid-template-columns:1fr; max-width:840px}
.faq__layout--full .faq{max-width:none}

.faq__art{position:relative; min-height:400px}
.faq__pic{
  position:absolute; overflow:hidden; border:1px solid var(--line-2);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
  background:var(--panel);
}
.faq__pic img{width:100%; height:100%; object-fit:cover; display:block}
.faq__pic--a{
  top:0; left:0; width:66%; aspect-ratio:4/5;
  border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
}
.faq__pic--b{
  right:0; bottom:0; width:52%; aspect-ratio:1/1;
  border-radius:54% 46% 42% 58% / 46% 54% 46% 54%;
  z-index:2;
}
.faq__badge{
  position:absolute; left:50%; bottom:14%; z-index:3; transform:translateX(-38%);
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px;
  background:var(--lime); color:var(--lime-ink); border:0; border-radius:14px 14px 14px 4px;
  font-family:var(--f-display); font-weight:700; font-size:.85rem; white-space:nowrap;
  box-shadow:0 18px 40px -14px rgba(204,255,0,.55); cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  animation:faqBadgeFloat 4.5s ease-in-out infinite;
}
.faq__badge:hover{transform:translateX(-38%) translateY(-3px); box-shadow:0 24px 50px -14px rgba(204,255,0,.7)}
@keyframes faqBadgeFloat{0%,100%{margin-top:0}50%{margin-top:-9px}}
@media(prefers-reduced-motion:reduce){.faq__badge{animation:none}}

/* ── accordion: bordered rows, active row fills solid lime ── */
.faq{margin-top:0; border-top:0; display:flex; flex-direction:column; gap:10px}
.faq__item{
  border:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:14px; background:var(--panel); overflow:hidden;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.faq__item:hover{border-color:#3A3A3A}
.faq__q{padding:22px 22px; min-height:auto}
.faq__ico{border-radius:50%}
.faq__a p{padding:0 60px 24px 22px}
.faq__item.is-open{background:var(--lime); border-color:var(--lime)}
.faq__item.is-open .faq__q{color:var(--lime-ink)}
.faq__item.is-open .faq__q:hover{color:var(--lime-ink)}
.faq__item.is-open .faq__ico{background:var(--lime-ink); border-color:var(--lime-ink); color:var(--lime)}
.faq__item.is-open .faq__a p{color:rgba(10,10,10,.78)}

@media(max-width:900px){
  .faq__layout{grid-template-columns:1fr; gap:var(--s4)}
  .faq__art{min-height:280px; max-width:340px; margin-inline:auto}
}
@media(max-width:760px){
  .faq__q{padding:18px 16px; font-size:.94rem}
  .faq__a p{padding:0 40px 18px 16px; font-size:.87rem}
  .faq__badge{font-size:.76rem; padding:9px 14px}
}

/* ══════════════════════════════════════════════════════════════════════
   SCALNIX — ROUND 10
   Legibility of the ghost numbers · richer service icons · a fuller
   booking column · FAQ art that survives a phone screen · footer icons.
   ══════════════════════════════════════════════════════════════════════ */

/* ============ Ghost index numbers — were effectively invisible ============
   3.5% white on near-black reads as nothing on most screens. Lime at low
   alpha keeps them a background device while actually being legible. */
.prin > *::after{
  color:rgba(204,255,0,.13);
  font-size:5rem; top:6px; right:18px;
}
.prin > *:hover::after{color:rgba(204,255,0,.2)}
.leak::after{color:rgba(204,255,0,.13)}
.leak:hover::after{color:rgba(204,255,0,.19)}
@media(max-width:760px){
  .prin > *::after{font-size:3.4rem; top:4px; right:14px}
}

/* ============ SERVICE CARD ICONS — a warmer state change ============
   The icon already flipped to solid lime on hover; adding a lift, a glow and
   a slight rotation makes the whole card feel like it responds rather than
   just recolouring one box. */
.svc__i{
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .4s var(--ease),
             box-shadow .4s var(--ease);
}
.svc:hover .svc__i{
  transform:translateY(-3px) rotate(-5deg) scale(1.06);
  box-shadow:0 14px 30px -10px rgba(204,255,0,.6);
}
.svc__i svg{transition:transform .4s var(--ease)}
.svc:hover .svc__i svg{transform:scale(1.08)}

/* ============ BOOKING — the left column had a lone floating icon ========
   An icon by itself in a large empty space reads as a mistake. Giving it a
   bordered panel with a line of copy makes it deliberate. */
.book__glance{
  margin:28px 0 22px; padding:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(204,255,0,.025));
  border:1px solid var(--line); border-radius:var(--r-lg);
}
.book__glance > p{
  margin:0 0 14px; font-family:var(--f-mono); font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--lime);
}
.book__glance > div{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line)}
.book__glance span{
  display:grid; align-content:start; gap:5px; min-width:0; padding:14px 12px;
  background:#111;
}
.book__glance svg{color:var(--lime); margin-bottom:3px}
.book__glance b{font-family:var(--f-display); font-size:.92rem; color:var(--white)}
.book__glance small{font-size:.72rem; line-height:1.35; color:var(--slate)}
.book__art{
  margin-top:0; padding:22px; min-height:auto;
  gap:16px; justify-content:flex-start;
  background:linear-gradient(150deg,rgba(204,255,0,.05),transparent 70%);
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
}
.book__art::before{
  content:""; position:absolute; right:-40px; top:-40px;
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle,rgba(204,255,0,.16),transparent 70%);
  filter:blur(10px); pointer-events:none;
}
.book__art-ic{
  flex:none; width:44px; height:44px; opacity:1;
  color:var(--lime-ink); background:var(--lime); border-radius:13px; padding:9px;
  box-shadow:0 10px 26px -10px rgba(204,255,0,.6);
}
.book__art-txt{position:relative; min-width:0}
.book__art-txt b{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:.98rem; color:var(--white); letter-spacing:-.02em;
}
.book__art-txt span{display:block; font-size:.85rem; color:var(--slate); margin-top:3px}
@media(max-width:1000px){.book__art{display:flex; margin-top:var(--s3)}}

/* ============ FAQ ART ON PHONES ============
   The blob pair is absolutely positioned inside a fixed-height box; at phone
   width the box was too short for the taller blob, so the pair collapsed into
   a sliver. Sizing the container from its own width keeps the proportions. */
@media(max-width:900px){
  .faq__art{
    min-height:0; max-width:400px; margin-inline:auto; width:100%;
    aspect-ratio:1/.82;              /* gives the absolute children room to exist */
  }
}
@media(max-width:520px){
  .faq__art{max-width:none; aspect-ratio:1/.86}
  .faq__badge{
    font-size:.72rem; padding:8px 12px; bottom:10%;
    border-radius:12px 12px 12px 3px;
  }
  .faq__badge svg{width:12px; height:12px}
}

/* ============ FOOTER LINK ICONS ============ */
.foot ul a{gap:9px}
.foot__ico{
  flex:none; width:15px; height:15px; color:var(--slate);
  transition:color .22s var(--ease), transform .22s var(--ease);
}
.foot ul a:hover .foot__ico{color:var(--lime); transform:translateX(2px)}

/* ══════════════════════════════════════════════════════════════════════
   SCALNIX — ROUND 11
   A lighter first fold on phones · watermark that clears its section's
   content · founder block.
   ══════════════════════════════════════════════════════════════════════ */

/* ============ FIRST FOLD — less crowded on a phone ============
   The fold was carrying headline + paragraph + two buttons + four trust
   points + the full live console, all above the crease. Trimming the copy
   and the console's own density buys back most of that weight without
   removing anything the client asked to keep. */
@media(max-width:760px){
  .hero .lede{
    font-size:.86rem; line-height:1.5; margin-top:10px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .hero h1{margin-bottom:13px}
  .hero__actions{margin-top:18px}
  .hero__trust{margin-top:16px; gap:8px 12px}
  .hero__trust li{font-size:.74rem; gap:6px}
  .hero__trust svg{width:13px; height:13px}
  .hero__grid{gap:22px}

  /* the console is the heaviest object in the fold — tighten it */
  .hero__panel{padding-block:52px 48px}
  .console{padding:14px}
  .console__hero{margin-bottom:2px}
  .console__big{font-size:clamp(1.9rem,8vw,2.4rem)}
  .chart{height:96px; margin:10px 0 4px}
  .console__stats{margin-top:10px}
  .console__stat{padding:10px 11px}
  .console__stat b{font-size:1.02rem}
  .console__stat span{font-size:.55rem}
  .console__rows{margin-top:10px; gap:7px}
  /* two campaign rows is enough on a phone — the rest is noise above the fold */
  .console__rows .crow:nth-child(n+3){display:none}
  .ctick{margin-top:11px; padding-top:9px}
}
@media(max-width:420px){
  .hero .lede{-webkit-line-clamp:2}
  .hero__trust li{font-size:.7rem}
}

/* ============ WATERMARK — must never sit under an image ============
   Centred, it landed behind the portfolio cards and disappeared. Anchoring it
   to the section's top edge keeps it in open space in every section that has
   media, and it stays a background device rather than competing with content. */
.wmark__bg{
  top:auto; bottom:auto;
  /* default stays vertically centred for text-only sections */
}
#portfolio .wmark__bg,
#services .wmark__bg,
#process .wmark__bg,
#about .wmark__bg{
  top:0; transform:translate(-50%,-18%);
}
#numbers .wmark__bg{top:50%; transform:translate(-50%,-50%)}
@media(max-width:760px){
  #portfolio .wmark__bg,
  #services .wmark__bg,
  #process .wmark__bg,
  #about .wmark__bg{transform:translate(-50%,-12%)}
}

/* ============ FAQ SUPPORT CARD (replaces the stock photos) ============ */
.faqcard{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg,#171717,#101010);
  border:1px solid var(--line-2); border-radius:var(--r-lg); padding:30px 26px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95);
}
.faqcard::before{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  border-radius:50%; background:radial-gradient(circle,rgba(204,255,0,.14),transparent 70%);
  filter:blur(12px); pointer-events:none;
}
.faqcard__top{display:flex; align-items:center; gap:13px; position:relative}
.faqcard__av{
  width:52px; height:52px; border-radius:16px; flex:none; display:grid; place-items:center;
  background:var(--lime); color:var(--lime-ink); font-family:var(--f-display);
  font-weight:900; font-size:1.25rem; box-shadow:0 12px 30px -12px rgba(204,255,0,.6);
}
.faqcard__who b{display:block; font-family:var(--f-display); font-size:1.05rem; color:var(--white); font-weight:700}
.faqcard__who span{
  display:flex; align-items:center; gap:6px; margin-top:3px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate);
}
.faqcard__who span::before{
  content:""; width:7px; height:7px; border-radius:50%; background:#4ADE80;
  box-shadow:0 0 0 0 rgba(74,222,128,.5); animation:pulse 2.4s infinite;
}
.faqcard__msg{
  position:relative; margin:22px 0 0; padding:16px 18px;
  background:var(--ink); border:1px solid var(--line); border-radius:14px 14px 14px 4px;
  font-size:.92rem; color:#D2D2D2; line-height:1.55;
}
.faqcard__acts{display:flex; flex-direction:column; gap:9px; margin-top:18px; position:relative}
.faqcard__acts .btn{width:100%; justify-content:center}
.faqcard__note{
  display:flex; align-items:center; gap:8px; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line); font-size:.8rem; color:var(--slate); position:relative;
}
.faqcard__note svg{color:var(--lime); flex:none}
.faqcard__ticks{
  display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; list-style:none;
  margin:18px 0 0; padding:0; font-size:.82rem; color:#C8C8C8; position:relative;
}
.faqcard__ticks li{display:flex; align-items:center; gap:7px}
.faqcard__ticks svg{color:var(--lime); flex:none}
.faqcard__foot{
  display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line); font-size:.82rem; color:#B4B4B4; position:relative;
}
.faqcard__foot span{display:inline-flex; align-items:center; gap:7px}
.faqcard__foot svg{color:var(--lime); flex:none}
@media(prefers-reduced-motion:reduce){.faqcard__who span::before{animation:none}}
@media(max-width:900px){.faqcard{max-width:460px; margin-inline:auto}}
@media(max-width:520px){.faqcard{padding:22px 18px}}

/* ══════════════════════════════════════════════════════════════════════
   SCALNIX — FOUNDER
   ══════════════════════════════════════════════════════════════════════ */
.fnr{background:var(--black); padding:0 0 40px; overflow:hidden; position:relative}
.fnr__stage{
  display:grid; grid-template-columns:max-content minmax(0, 1fr);
  max-width:none; margin:0; align-items:stretch; column-gap:0;
  padding-left:max(28px, calc((100% - 1200px) / 2));
}
.fnr__copy{
  padding:20px 8px 88px 0; z-index:2; position:relative; align-self:start;
  width:min-content; min-width:18rem; max-width:28rem;
}
.fnr__kicker{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--slate); margin:0 0 12px; display:flex; align-items:center; gap:10px;
}
.fnr__kicker::before{content:""; width:4px; height:14px; background:var(--lime); border-radius:1px; flex:none}
.fnr__title{
  display:flex; flex-direction:column; align-items:flex-start;
  font-size:clamp(2.5rem, 5.2vw, 5.6rem); font-weight:900; letter-spacing:-.07em;
  line-height:.85; color:var(--white); margin:0 0 4px; max-width:none;
  text-shadow:0 14px 42px rgba(0,0,0,.48);
}
.fnr__title span{display:block; line-height:.85}
/* Desktop used to tighten this to line-height .72 with a -.38em pull on the
   second line — at 900 weight that stacked FOUNDER straight over THE. Keep the
   lines snug but never touching. */
@media(min-width:901px){
  .fnr__title span + span{margin-top:-.04em}
}
.fnr__name{
  font-family:var(--f-mono); font-size:clamp(.78rem, 1.05vw, .98rem);
  letter-spacing:.2em; text-transform:uppercase; color:var(--lime);
  margin:0 0 4px;
}
.fnr__role{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lime); margin:0 0 14px;
}
.fnr__lede{font-size:clamp(1rem, 1.2vw, 1.14rem); color:#E4E4E4; max-width:36ch; line-height:1.45; margin:0 0 12px}
.fnr__lede .fbox{font-weight:800}
.fnr__desc{font-size:.92rem; color:#B8B8B8; max-width:40ch; line-height:1.5; margin:0 0 8px}
.fnr__pills{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:12px 0 18px; padding:0}
.fnr__pills li{
  font-size:.75rem; color:#D0D0D0; background:var(--panel); border:1px solid var(--line);
  border-radius:99px; padding:7px 12px;
}
.fnr__pills li::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--lime); margin-right:8px; vertical-align:middle}
.fnr__actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:6px}
.fnr__shot{
  position:relative; align-self:stretch;
  margin-left:-200px; margin-right:0;
  /* No fixed height cap: an explicit height overrides align-self:stretch, so
     the photo used to stop ~620px down and leave a black gap between the
     founder and the stats bar. A min-height floor keeps short-copy layouts
     from collapsing; stretch carries it the rest of the way down to the bar. */
  height:auto; min-height:min(68vh, 560px); overflow:hidden;
}
.fnr__shot img, .fnr__img{
  width:100%; height:100%; object-fit:cover; object-position:62% 20%;
}
.fnr__shot .fnr__img{display:none}
.fnr__shot .fnr__img--desk{display:block; height:100%; min-height:100%}
.fnr__shot::before{
  content:""; position:absolute; inset:0 auto 0 0; width:48%; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--black) 0%, rgba(15,15,15,.7) 38%, transparent 100%);
}
.fnr__shot::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:28%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, var(--black), transparent);
}
.fnr__avail{display:none}
.fnr__bar{
  display:grid; grid-template-columns:repeat(4,1fr); margin-top:-40px; position:relative; z-index:3;
  background:#121212; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.fnr__stat{
  padding:20px 12px 18px; text-align:center; border-right:1px solid var(--line);
  min-width:0;
}
.fnr__stat:last-child{border-right:0}
.fnr__stat svg{color:var(--lime); margin-bottom:8px}
.fnr__stat b{
  display:block; font-family:var(--f-display); font-weight:900; letter-spacing:-.04em;
  font-size:clamp(1.35rem, 2.2vw, 1.85rem); color:var(--white); line-height:1;
  font-variant-numeric:tabular-nums;
}
.fnr__stat span{
  display:block; margin-top:6px; font-family:var(--f-mono); font-size:.55rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
  overflow-wrap:anywhere;
}

/* 14-inch / short laptop: keep copy, portrait, and counters in one view */
@media(max-width:1440px){
  .fnr .hide-sm{display:none !important}
  .fnr__stage{grid-template-columns:max-content minmax(0, 1fr)}
  .fnr__copy{padding:28px 8px 64px 0}
  .fnr__title{font-size:clamp(2.35rem, 4.4vw, 3.7rem)}
  .fnr__shot{height:auto; min-height:min(58vh, 440px); margin-left:-140px}
  .fnr__shot .fnr__img--desk{display:none}
  .fnr__shot .fnr__img--laptop{display:block; height:100%; min-height:100%; object-position:58% 18%}
  .fnr__bar{margin-top:-36px}
  .fnr__stat{padding:16px 10px 14px}
}
@media(max-width:1180px){
  .fnr__stage{padding-left:24px}
  .fnr__shot{margin-left:-72px}
  .fnr__title{font-size:clamp(2.2rem, 4vw, 3.1rem)}
  .fnr__lede{font-size:1rem; max-width:32ch}
}
@media(max-height:820px) and (min-width:901px){
  .fnr__copy{padding-top:22px; padding-bottom:52px}
  .fnr__title{margin-bottom:6px}
  .fnr__shot{height:auto; min-height:min(56vh, 420px)}
  .fnr__bar{margin-top:-32px}
}

@media(max-width:900px){
  .fnr{padding-bottom:12px; min-height:0}
  .fnr__stage{
    grid-template-columns:1fr; min-height:0; padding:0;
  }
  .fnr__copy{
    /* Kill the desktop 88px bottom pad that clears the overlapping counters.
       On phone the bar sits below, so that pad becomes a black hole. */
    padding:14px 20px 0 !important; align-self:start; max-width:none; width:auto; min-width:0;
  }
  .fnr__shot{order:-1; min-height:0; height:min(82vw, 400px); margin:0}
  .fnr__shot .fnr__img--desk,
  .fnr__shot .fnr__img--laptop,
  .fnr__shot .fnr__img--phone{display:none}
  .fnr__shot .fnr__img--port{display:block; min-height:0; height:100%; object-position:center top}
  .fnr__shot::before{width:100%; height:16%; inset:auto 0 0 0;
    background:linear-gradient(to top, var(--black), transparent)}
  .fnr__shot::after{display:none}
  .fnr__title{
    max-width:none; font-size:clamp(2.4rem, 12vw, 3.4rem);
    line-height:.82; letter-spacing:-.05em; margin-bottom:8px;
  }
  .fnr__title span{line-height:.82}
  .fnr__title span + span{margin-top:-.1em}
  .fnr__lede{max-width:none; margin-bottom:12px}
  .fnr__desc{max-width:none; margin-bottom:12px}
  .fnr__avail{display:none}
  .fnr > .wrap{margin-top:0}
  .fnr__bar{grid-template-columns:1fr 1fr; margin:12px 0 0 !important; border-radius:14px; box-shadow:none}
  .fnr__stat{padding:16px 10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
  .fnr__stat:nth-child(2n){border-right:0}
  .fnr__stat:nth-last-child(-n+2){border-bottom:0}
  .fnr__actions{flex-direction:column; align-items:stretch; gap:10px; margin-top:10px; margin-bottom:0}
  .fnr__actions .btn{
    flex:none; width:100%; min-width:0; justify-content:center;
    white-space:normal; text-align:center; padding:15px 16px;
  }
}
@media(max-width:700px){
  .fnr__shot .fnr__img--port{display:none}
  .fnr__shot .fnr__img--phone{display:block; min-height:0; height:100%; object-position:center top}
}
@media(max-width:520px){
  .fnr__shot{height:min(88vw, 380px)}
  .fnr__title{font-size:clamp(2.2rem, 11.5vw, 2.8rem)}
  .fnr__copy{padding:12px 18px 0 !important}
}

/* ══════════════════════════════════════════════════════════════════════
   RAILS + DIAGNOSIS — cards must sit fully on screen; leaks stay 2×2
   ══════════════════════════════════════════════════════════════════════ */
.leak{background:var(--panel)}
.leak p{color:#C4C4C4}
.leak::after{color:rgba(255,255,255,.07)}
.leak-foot{
  margin:22px 0 0; font-size:.95rem; color:#B0B0B0; max-width:62ch;
}
.leak-foot a{color:var(--lime); font-weight:600; margin-left:6px; white-space:nowrap}
.leak-foot a:hover{text-decoration:underline}

@media(max-width:760px){
  /* Four leaks already fill a 2×2 — no swipe, no dots. */
  .leaks.g2rail{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-auto-flow:row !important;
    grid-auto-columns:unset !important;
    grid-template-rows:none !important;
    overflow:visible;
    margin-inline:0; padding:0; gap:10px;
    scroll-snap-type:none;
  }
  .leaks.g2rail > .leak{width:auto; max-width:none; scroll-snap-align:unset}
  #leaks [data-dots]{display:none !important}

  /* Services: exactly two columns in view so nothing is sliced off. */
  .svcs.g2rail{
    grid-auto-columns:calc((100% - 10px) / 2);
    margin-inline:0; padding:2px 0 6px;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
  }
  .svcs.g2rail > .svc{scroll-snap-align:start}
}