/* ============================================================================
   OJ SCALES — company site
   Dark, sci-fi/HUD register. One person operation; every number on the page is
   measured, not claimed (see the FACTS comments in index.html).
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  --void:#04060a;
  --deep:#070b12;
  --panel:#0b1119;
  --line:rgba(80,220,255,.16);
  --line-hard:rgba(80,220,255,.34);
  --ink:#e8f4fb;
  --mute:#7f93a6;
  --arc:#3ce3ff;          /* arc-reactor cyan */
  --arc-dim:#1b8fab;
  --gold:#ffb63d;         /* repulsor amber */
  --hot:#ff4d6d;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Space Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--void); color:var(--ink);
  font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.lenis-ready{}
img{max-width:100%; display:block}
a{color:var(--arc); text-decoration:none}
::selection{background:rgba(60,227,255,.3); color:#fff}

.wrap{width:100%; max-width:1340px; margin:0 auto; padding:0 28px}
.wrap-narrow{max-width:960px}

h1,h2,h3{font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.02; margin:0}
h1{font-size:clamp(38px,6.4vw,88px)}
/* Each hero line is its own inline-block that must never wrap. The split-text
   reveal rebuilds every glyph as a separate inline-block span, which lets the
   browser break the line anywhere — including orphaning a full stop onto its
   own line, which is exactly what it did before this. */
.h1line{display:inline-block; white-space:nowrap; line-height:1.04}
h2{font-size:clamp(30px,5vw,64px)}
h3{font-size:clamp(19px,2.2vw,24px); font-weight:700; letter-spacing:-.01em; line-height:1.2}
p{margin:0 0 18px}

.kicker{
  font:600 11.5px/1 var(--mono); letter-spacing:.34em; text-transform:uppercase;
  color:var(--arc); display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
}
.kicker::before{
  content:""; width:30px; height:1px; background:linear-gradient(90deg,transparent,var(--arc));
}
.kicker.gold{color:var(--gold)}
.kicker.gold::before{background:linear-gradient(90deg,transparent,var(--gold))}

.lede{font:500 clamp(17px,1.5vw,21px)/1.62 var(--sans); color:#b8cbd9; letter-spacing:.005em}
.mute{color:var(--mute)}
.tiny{font:400 13.5px/1.6 var(--sans); color:var(--mute)}
.mono{font-family:var(--mono); font-size:.92em; color:var(--arc)}
.monolabel{font:600 11px/1 var(--mono); letter-spacing:.26em; text-transform:uppercase; color:var(--mute)}

/* ---- shared chrome: HUD corner brackets ---------------------------------- */
.brackets{position:relative}
.brackets::before,.brackets::after{
  content:""; position:absolute; width:22px; height:22px; pointer-events:none;
  border:1px solid var(--line-hard);
}
.brackets::before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.brackets::after{bottom:-1px; right:-1px; border-left:0; border-top:0}

/* ---- scanline + vignette overlay on the whole doc ----------------------- */
.fx-overlay{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
    radial-gradient(130% 100% at 50% 50%,transparent 42%,rgba(0,0,0,.62) 100%);
  mix-blend-mode:screen; opacity:.5;
}
/* Kept deliberately gentle: at .78 alpha from 40% out this crushed the whole
   page on a tall viewport, dimming the live embeds along with the edges. */
.fx-overlay.vig{mix-blend-mode:normal; background:radial-gradient(135% 105% at 50% 45%,transparent 58%,rgba(2,4,7,.5) 100%); opacity:1}

/* ---- boot sequence ------------------------------------------------------ */
#boot{
  position:fixed; inset:0; z-index:1000; background:var(--void);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:20px;
}
#boot .ring{
  width:64px; height:64px; border-radius:50%;
  border:1px solid rgba(60,227,255,.25); border-top-color:var(--arc);
  animation:spin 1s linear infinite;
  box-shadow:0 0 36px rgba(60,227,255,.45), inset 0 0 22px rgba(60,227,255,.22);
}
@keyframes spin{to{transform:rotate(360deg)}}
#boot .lines{font:500 12px/1.9 var(--mono); letter-spacing:.16em; color:var(--arc-dim); text-align:center; min-height:5.7em}
#boot .lines b{color:var(--arc); font-weight:500}

/* ---- site header ------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:800; height:68px;
  display:flex; align-items:center;
  background:linear-gradient(180deg,rgba(4,6,10,.92),rgba(4,6,10,0));
  transition:background .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-header.solid{background:rgba(5,8,13,.9); backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line)}
.site-header .wrap{display:flex; align-items:center; gap:20px}
.brand{display:flex; align-items:center; gap:12px; font:800 19px/1 var(--display); letter-spacing:-.02em; color:var(--ink)}
.brand .dot{
  width:11px; height:11px; border-radius:50%; background:var(--arc);
  box-shadow:0 0 14px var(--arc),0 0 34px rgba(60,227,255,.6);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.55; transform:scale(.82)}}
.brand span{color:var(--arc)}
.site-nav{margin-left:auto; display:flex; align-items:center; gap:30px}
.site-nav a{font:600 11.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--mute)}
.site-nav a:hover{color:var(--ink)}
.btn{
  display:inline-flex; align-items:center; gap:10px; position:relative;
  font:700 12.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  padding:15px 26px; color:var(--void); background:var(--arc);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  box-shadow:0 0 0 1px rgba(60,227,255,.5),0 10px 40px -8px rgba(60,227,255,.6);
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover{transform:translateY(-2px); background:#6cf0ff; box-shadow:0 0 0 1px rgba(60,227,255,.8),0 16px 56px -8px rgba(60,227,255,.85)}
.btn.ghost{
  background:transparent; color:var(--arc);
  box-shadow:inset 0 0 0 1px var(--line-hard);
}
.btn.ghost:hover{background:rgba(60,227,255,.08); color:#9af4ff; box-shadow:inset 0 0 0 1px var(--arc)}
@media (max-width:900px){.site-nav a{display:none} .site-nav .btn{display:inline-flex}}

/* =========================================================================
   SECTION 1 — HERO
   ======================================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:120px 0 70px; overflow:hidden; isolation:isolate;
}
#hero-canvas{position:absolute; inset:0; z-index:-3; display:block; width:100%; height:100%}
.hero-glow{
  position:absolute; z-index:-2; pointer-events:none;
  width:min(1100px,120vw); aspect-ratio:1; left:50%; top:46%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(60,227,255,.17) 0%,rgba(60,227,255,.05) 36%,transparent 68%);
}
.hero-grid{
  position:absolute; z-index:-2; inset:auto 0 0 0; height:46vh; pointer-events:none;
  background-image:
    linear-gradient(rgba(60,227,255,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(60,227,255,.14) 1px,transparent 1px);
  background-size:62px 62px;
  transform:perspective(420px) rotateX(68deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(180deg,transparent,#000 42%,transparent 96%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%,transparent 96%);
  opacity:.8;
}
.hero-inner{display:grid; grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr); gap:48px; align-items:center; width:100%}

.hero-copy{position:relative; z-index:2}
.hero h1{margin-bottom:26px}
.hero h1 .glow{
  color:#fff;
  text-shadow:0 0 30px rgba(60,227,255,.55),0 0 90px rgba(60,227,255,.3);
}
.hero h1 .outline{
  -webkit-text-stroke:1.4px rgba(60,227,255,.85); color:transparent;
  text-shadow:0 0 40px rgba(60,227,255,.35);
}
.hero .lede{max-width:46ch}
.hero-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:34px}

.hero-telemetry{
  margin-top:44px; display:flex; gap:30px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid var(--line);
}
.hero-telemetry div b{display:block; font:800 25px/1 var(--display); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums}
.hero-telemetry div b.arc{color:var(--arc); text-shadow:0 0 22px rgba(60,227,255,.6)}
.hero-telemetry div b.gold{color:var(--gold); text-shadow:0 0 22px rgba(255,182,61,.5)}
.hero-telemetry div span{display:block; margin-top:7px; font:600 10px/1.4 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--mute)}

/* ---- the 3D laptop ----------------------------------------------------- */
.stage{
  perspective:1700px; perspective-origin:50% 44%;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.laptop{
  --lid:-16deg; --yaw:-19deg;
  width:min(100%,720px);
  transform-style:preserve-3d;
  transform:rotateX(var(--lid)) rotateY(var(--yaw)) rotateZ(.6deg);
  will-change:transform;
}
.laptop .lid{
  position:relative; transform-style:preserve-3d;
  border-radius:16px 16px 4px 4px;
  padding:13px 13px 26px;
  background:
    linear-gradient(155deg,#2b333d 0%,#161c24 34%,#0d131a 70%,#1c232c 100%);
  box-shadow:
    0 0 0 1px rgba(150,200,225,.16),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 60px 120px -40px rgba(0,0,0,.95),
    0 0 130px -20px rgba(60,227,255,.4);
}
.laptop .cam{
  position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:#060a0e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 7px rgba(60,227,255,.5);
}
.laptop .screen{
  position:relative; overflow:hidden; border-radius:6px;
  background:#02060a; aspect-ratio:16/10;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.9), inset 0 0 70px rgba(0,0,0,.65);
}
.laptop .screen img, .laptop .screen iframe{width:100%; height:100%; object-fit:cover; border:0; display:block}
.laptop .screen::after{   /* glass sheen */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.05) 22%,transparent 46%,transparent 100%);
  opacity:.72;
}
.laptop .sheen{
  position:absolute; inset:-40% -120%; pointer-events:none; z-index:3;
  background:linear-gradient(100deg,transparent 42%,rgba(190,245,255,.3) 50%,transparent 58%);
  transform:translateX(-45%);
}
.laptop .hinge{
  height:7px; margin:0 32px;
  background:linear-gradient(180deg,#2a333d,#0b1016);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.laptop .base{
  height:17px; border-radius:0 0 15px 15px;
  background:linear-gradient(180deg,#232b34 0%,#141a21 42%,#0a0e13 100%);
  box-shadow:
    0 0 0 1px rgba(150,200,225,.12),
    0 40px 70px -26px rgba(0,0,0,.95);
  position:relative;
}
.laptop .base::after{
  content:""; position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:16%; height:4px; border-radius:0 0 7px 7px; background:rgba(0,0,0,.6);
}
.laptop .reflect{
  margin:14px 26px 0; height:120px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%,rgba(60,227,255,.3),rgba(60,227,255,.05) 48%,transparent 74%);
  filter:blur(16px); opacity:.85;
}
.stage-tag{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  font:600 10px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--mute);
  white-space:nowrap;
}

.scroll-hint{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px; z-index:3;
  font:600 9.5px/1 var(--mono); letter-spacing:.3em; text-transform:uppercase; color:var(--mute);
}
.scroll-hint i{
  width:1px; height:44px; background:linear-gradient(180deg,var(--arc),transparent);
  animation:drop 1.9s ease-in-out infinite;
}
@keyframes drop{0%{opacity:0; transform:scaleY(.2)}40%{opacity:1}100%{opacity:0; transform:translateY(22px) scaleY(.4)}}

@media (max-width:1060px){
  .hero-inner{grid-template-columns:1fr; gap:52px}
  .hero{padding-top:106px}
  .laptop{--lid:-9deg; --yaw:-11deg}
}

/* =========================================================================
   SECTION 2 — WHO (side slide-in)
   ======================================================================= */
.band{position:relative; padding:clamp(90px,11vw,170px) 0; border-top:1px solid var(--line)}
.band.deep{background:
  radial-gradient(90% 70% at 12% 0%,rgba(60,227,255,.08),transparent 62%),
  linear-gradient(180deg,var(--deep),var(--void) 78%)}
.band.gold-wash{background:
  radial-gradient(80% 70% at 88% 10%,rgba(255,182,61,.07),transparent 60%),
  linear-gradient(180deg,var(--void),var(--deep))}

.who{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,6vw,92px); align-items:center}
.who-copy h2{margin-bottom:26px}
.who-copy h2 em{font-style:normal; color:var(--arc); text-shadow:0 0 34px rgba(60,227,255,.5)}
.who-list{list-style:none; margin:30px 0 0; padding:0}
.who-list li{
  position:relative; padding:16px 0 16px 34px; border-top:1px solid var(--line);
  font-size:16px; color:#b8cbd9;
}
.who-list li:last-child{border-bottom:1px solid var(--line)}
.who-list li::before{
  content:""; position:absolute; left:3px; top:25px;
  width:8px; height:8px; border:1px solid var(--arc); transform:rotate(45deg);
  box-shadow:0 0 12px rgba(60,227,255,.8);
}
.who-list li b{color:var(--ink); font-weight:700}

.who-panel{position:relative}
.who-panel .frame{
  position:relative; padding:28px; background:
    linear-gradient(145deg,rgba(60,227,255,.07),transparent 55%),var(--panel);
  box-shadow:inset 0 0 0 1px var(--line), 0 40px 90px -40px rgba(0,0,0,.9);
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
}
.who-panel .readout{font:500 12.5px/2 var(--mono); color:var(--mute); margin:0}
.who-panel .readout span{color:var(--arc)}
.who-panel .readout b{color:var(--ink); font-weight:500}
.who-panel h3{margin:0 0 18px; color:var(--ink)}
.who-panel .bar{height:1px; background:linear-gradient(90deg,var(--arc),transparent); margin:20px 0}

@media (max-width:980px){.who{grid-template-columns:1fr; gap:46px}}

/* =========================================================================
   SECTION 3 — LIVE DEVICES
   ======================================================================= */
.devices{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(30px,5vw,70px); align-items:end; margin-top:clamp(50px,6vw,88px);
}
.device-col{position:relative}
.device-head{margin-bottom:26px}
.device-head h3{margin-bottom:9px}
.device-head p{margin:0; font-size:15px; color:var(--mute); line-height:1.55}

/* phone */
.phone{
  position:relative; width:min(100%,352px); margin:0 auto;
  aspect-ratio:430/932; border-radius:52px; padding:11px;
  background:linear-gradient(150deg,#333c46,#141a21 42%,#0b1016 72%,#2a323b);
  box-shadow:
    0 0 0 1px rgba(150,200,225,.18),
    inset 0 1px 0 rgba(255,255,255,.2),
    0 50px 100px -34px rgba(0,0,0,.95),
    0 0 120px -26px rgba(60,227,255,.45);
  transform-style:preserve-3d;
}
.phone .notch{
  position:absolute; top:19px; left:50%; transform:translateX(-50%);
  width:96px; height:26px; border-radius:14px; background:#04070b; z-index:4;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.phone .btn-side{position:absolute; right:-2px; top:22%; width:3px; height:72px; border-radius:2px; background:linear-gradient(180deg,#39424c,#161c23)}
.phone .btn-side.b2{top:14%; right:auto; left:-2px; height:34px}
.phone .viewport{position:relative; overflow:hidden; border-radius:42px; background:#02060a; height:100%}

/* laptop (section 3 variant, flatter + live) */
.laptop.live{--lid:0deg; --yaw:0deg; width:100%; transform:none}
.laptop.live .lid{border-radius:13px 13px 3px 3px; padding:11px 11px 22px}
.laptop.live .screen{aspect-ratio:1440/900}

/* shared iframe shell */
.liveframe{position:relative; width:100%; height:100%; overflow:hidden; background:#02060a}
.liveframe iframe{
  position:absolute; top:0; left:0; border:0; display:block;
  transform-origin:0 0; pointer-events:none;
}
.liveframe.armed iframe{pointer-events:auto}
.liveframe .poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
  z-index:2; transition:opacity .5s ease; pointer-events:none;
}
.liveframe.loaded .poster{opacity:0}
.liveframe .arm{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 50%,rgba(4,8,13,.5),rgba(4,8,13,.82));
  cursor:pointer; border:0; width:100%; transition:opacity .35s ease;
  font:700 11px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--arc);
}
.liveframe .arm span{
  padding:14px 22px; background:rgba(4,8,13,.8);
  box-shadow:inset 0 0 0 1px var(--line-hard),0 0 40px -6px rgba(60,227,255,.5);
}
.liveframe.armed .arm{opacity:0; pointer-events:none}
.device-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:20px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap;
}
.device-foot a{font:600 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase}
.device-foot a:hover{color:#8df1ff}
.livedot{display:inline-flex; align-items:center; gap:8px; font:600 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}
.livedot i{width:7px; height:7px; border-radius:50%; background:#43e07f; box-shadow:0 0 11px #43e07f; animation:pulse 2.2s ease-in-out infinite}

@media (max-width:980px){
  .devices{grid-template-columns:1fr; gap:64px; align-items:stretch}
  .laptop.live{max-width:620px; margin:0 auto}
}

/* =========================================================================
   SECTION 4 — MEASURED (stat grid)
   ======================================================================= */
.statgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:54px;
  background:var(--line);
  box-shadow:0 0 0 1px var(--line);
}
.statcell{background:var(--deep); padding:34px 26px 30px; position:relative; overflow:hidden}
.statcell::before{
  content:""; position:absolute; inset:0 auto 0 0; width:2px;
  background:linear-gradient(180deg,var(--arc),transparent);
  opacity:.7;
}
.statcell.is-zero::before{background:linear-gradient(180deg,var(--gold),transparent)}
.statcell b{
  display:block; font:800 clamp(40px,4.6vw,62px)/1 var(--display); letter-spacing:-.045em;
  color:#fff; font-variant-numeric:tabular-nums; text-shadow:0 0 42px rgba(60,227,255,.4);
}
.statcell.is-zero b{color:var(--gold); text-shadow:0 0 42px rgba(255,182,61,.45)}
.statcell em{font-style:normal; font-size:.55em; letter-spacing:-.01em; opacity:.85}
.statcell span{display:block; margin-top:14px; font:600 11px/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}
.statcell small{display:block; margin-top:10px; font:400 13px/1.55 var(--sans); color:#6d8294}
.proof{
  margin-top:34px; padding:26px 28px; background:rgba(11,17,25,.7);
  box-shadow:inset 0 0 0 1px var(--line); border-left:2px solid var(--gold);
}
.proof p:last-child{margin-bottom:0}
.proof p{font-size:15.5px; color:#a9bdcb}
.proof b{color:var(--ink)}
@media (max-width:1000px){.statgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.statgrid{grid-template-columns:1fr}}

/* =========================================================================
   SECTION 5 — PIPELINE / HOW
   ======================================================================= */
.pipeline{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:56px; background:var(--line); box-shadow:0 0 0 1px var(--line)}
.step{background:var(--panel); padding:34px 26px 32px; position:relative; min-height:260px}
.step .n{
  font:800 13px/1 var(--mono); letter-spacing:.1em; color:var(--arc);
  display:inline-block; padding:8px 11px; margin-bottom:22px;
  box-shadow:inset 0 0 0 1px var(--line-hard);
}
.step h3{margin-bottom:12px}
.step p{margin:0; font-size:15px; color:var(--mute); line-height:1.6}
/* The accent bar at the foot of each step is injected by app.js as a real
   element, not a ::after, so each card's bar can be staggered individually. */
@media (max-width:1000px){.pipeline{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pipeline{grid-template-columns:1fr} .step{min-height:0}}

/* ---- capability marquee ------------------------------------------------ */
.marquee{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:22px 0; background:rgba(7,11,18,.8); margin-top:0;
}
.marquee-track{display:flex; gap:48px; white-space:nowrap; will-change:transform}
.marquee-track span{
  font:800 clamp(22px,3vw,40px)/1 var(--display); letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1px rgba(120,210,235,.45);
}
.marquee-track span:nth-child(3n){-webkit-text-stroke:1px rgba(255,182,61,.5)}
.marquee-track i{font-style:normal; color:var(--arc); font-size:clamp(18px,2vw,30px); align-self:center; opacity:.8}

/* =========================================================================
   SECTION 6 — GALLERY RAIL
   ======================================================================= */
.rail{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px}
.card{
  position:relative; display:block; overflow:hidden; background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line); transition:transform .35s ease, box-shadow .35s ease;
}
.card:hover{transform:translateY(-6px); box-shadow:inset 0 0 0 1px var(--line-hard),0 30px 70px -30px rgba(60,227,255,.5)}
.card .shot{aspect-ratio:16/10; overflow:hidden; position:relative}
.card .shot img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease; filter:saturate(1.08)}
.card:hover .shot img{transform:scale(1.05)}
.card .shot::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(5,8,13,.85))}
.card .meta{padding:22px 24px 24px}
.card .meta h3{margin-bottom:8px; font-size:19px}
.card .meta p{margin:0; font-size:14px; color:var(--mute); line-height:1.55}
.card .tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font:700 9.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  padding:8px 11px; color:var(--arc); background:rgba(4,8,13,.78);
  box-shadow:inset 0 0 0 1px var(--line-hard);
}
@media (max-width:980px){.rail{grid-template-columns:1fr}}

/* =========================================================================
   SECTION 7 — CTA
   ======================================================================= */
.cta-band{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(100px,13vw,190px) 0;
  border-top:1px solid var(--line);
  background:radial-gradient(70% 90% at 50% 0%,rgba(60,227,255,.14),transparent 62%),var(--void);
}
.cta-band .rings{position:absolute; inset:0; z-index:0; pointer-events:none; display:grid; place-items:center}
.cta-band .rings i{
  position:absolute; border:1px solid rgba(60,227,255,.14); border-radius:50%;
  width:var(--d); height:var(--d);
}
.cta-band .wrap{position:relative; z-index:2}
.cta-band h2{margin-bottom:22px}
.cta-band .lede{margin:0 auto 38px; max-width:60ch}
.cta-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.cta-mail{
  display:inline-block; margin-top:34px;
  font:800 clamp(18px,3vw,34px)/1.2 var(--display); letter-spacing:-.02em; color:var(--ink);
  word-break:break-word;
}
.cta-mail:hover{color:var(--arc)}

/* =========================================================================
   FOOTER
   ======================================================================= */
footer.site-foot{padding:70px 0 90px; border-top:1px solid var(--line); background:var(--deep)}
footer.site-foot .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
footer.site-foot h4{margin:0 0 16px; font:600 10.5px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--arc)}
footer.site-foot p,footer.site-foot li{font-size:14.5px; color:var(--mute); line-height:1.65}
footer.site-foot ul{list-style:none; margin:0; padding:0}
footer.site-foot li{padding:5px 0}
footer.site-foot a{color:#c3d6e3}
footer.site-foot a:hover{color:var(--arc)}
.foot-note{margin-top:46px; padding-top:26px; border-top:1px solid var(--line); font-size:13.5px; color:#60758a}
@media (max-width:860px){footer.site-foot .cols{grid-template-columns:1fr; gap:34px}}

/* ---- reveal defaults (JS adds .is-in; no-JS shows everything) ---------- */
.js .reveal{opacity:0}
.js .slide-l{opacity:0; transform:translate3d(-90px,0,0)}
.js .slide-r{opacity:0; transform:translate3d(90px,0,0)}

@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .slide-l,.js .slide-r{opacity:1 !important; transform:none !important}
  #boot{display:none}
  .fx-overlay{display:none}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important}
}