/* OCULITH marketing landing — dark, modern, orange-accent. Standalone (no app CSS). */
:root{
  --bg:#0b0b0c; --bg2:#101015; --ink:#f4f5f7; --muted:#9aa3ae;
  --line:#1e1f25; --accent:#ff7a00; --accent2:#F26B1F; --accent-deep:#b24e00;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.lp{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{line-height:1.08; letter-spacing:-.02em; margin:0;}

/* Editorial italic accent — the 2026 dark-SaaS convention for emphasis without
   another colour. Serif-leaning italic against the sans body reads deliberate. */
.ital{font-style:italic; font-weight:750; letter-spacing:-.03em;
  font-family:ui-serif,Georgia,"Times New Roman",serif;}
/* Small uppercase kicker above section headings. */
.lp-kicker{display:inline-flex; align-items:center; gap:9px; color:var(--accent);
  font-size:.74rem; font-weight:750; text-transform:uppercase; letter-spacing:.2em;
  margin-bottom:16px;}
.lp-kicker::before{content:""; width:22px; height:1px; background:var(--accent); opacity:.65;}

/* ---- backdrop: aurora glows + faint grid ---- */
.lp-bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.lp-aurora{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5;}
.lp-aurora.a1{width:60vw; height:60vw; top:-20vw; right:-10vw;
  background:radial-gradient(circle,rgba(255,122,0,.45),transparent 60%);}
.lp-aurora.a2{width:55vw; height:55vw; bottom:-25vw; left:-15vw;
  background:radial-gradient(circle,rgba(120,60,255,.22),transparent 60%);}
.lp-grid{position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; opacity:.25;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 80%);}

/* Film grain — the single cheapest thing that stops a dark page reading flat.
   An inline SVG fractal-noise turbulence, tiled and held at very low opacity. */
.lp-grain{position:absolute; inset:0; opacity:.032; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}
/* Vignette — pulls the eye to the centre column and darkens the edges. */
.lp-vignette{position:absolute; inset:0;
  background:radial-gradient(ellipse 100% 78% at 50% 42%, transparent 42%, rgba(3,3,5,.55) 100%);}

main,.lp-nav,.lp-footer{position:relative; z-index:1;}

/* ---- nav ---- */
.lp-nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px;
  padding:14px clamp(16px,5vw,56px); backdrop-filter:blur(12px);
  background:rgba(11,11,12,.55); border-bottom:1px solid transparent; transition:border-color .2s,background .2s;}
.lp-nav.scrolled{border-bottom-color:var(--line); background:rgba(11,11,12,.8);}
.lp-brand{display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:.02em; font-size:1.1rem;}
.lp-links{display:flex; gap:26px; margin-left:auto; color:var(--muted); font-size:.95rem;}
.lp-links a:hover{color:var(--ink);}
.lp-nav .lp-btn{margin-left:24px;}
@media(max-width:760px){ .lp-links{display:none;} .lp-nav .lp-btn{margin-left:auto;} }

/* ---- buttons ---- */
.lp-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:999px; font-weight:700; font-size:.95rem;
  border:1px solid var(--line); transition:transform .12s,box-shadow .2s,background .2s; white-space:nowrap;}
.lp-btn--lg{padding:14px 26px; font-size:1.02rem;}
.lp-btn--solid{background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#0b0b0c; border-color:transparent;
  box-shadow:0 8px 30px rgba(255,122,0,.28);}
.lp-btn--solid:hover{transform:translateY(-1px); box-shadow:0 12px 38px rgba(255,122,0,.4);}
.lp-btn--ghost{background:rgba(255,255,255,.03); color:var(--ink);}
.lp-btn--ghost:hover{background:rgba(255,255,255,.08);}

/* ---- hero (full-bleed section; scene is the background, text overlaid) ---- */
.lp-hero{position:relative; display:flex; align-items:center; overflow:hidden;
  min-height:clamp(560px,86vh,840px); padding:clamp(40px,8vw,96px) 0;}
.lp-hero-inner{position:relative; z-index:6; width:100%; max-width:1240px; margin:0 auto;
  padding:0 clamp(16px,5vw,56px);}
.lp-hero-copy{max-width:min(700px,58%);}
.lp-eyebrow{display:inline-block; color:var(--accent); font-weight:700; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.14em; margin-bottom:18px;}
/* Three headline lines need a smaller ceiling than the old two-line version, or
   the copy block outgrows the hero and clips under the sticky nav. */
.lp-hero h1{font-size:clamp(2.1rem,4.4vw,3.5rem); font-weight:850; text-wrap:balance;}
.grad{background:linear-gradient(100deg,var(--accent),#ffb066); -webkit-background-clip:text; background-clip:text; color:transparent;}
.lp-sub{color:var(--muted); font-size:clamp(1.02rem,1.5vw,1.18rem); max-width:48ch; margin:20px 0 30px;}
.lp-cta{display:flex; gap:14px; flex-wrap:wrap;}

/* ---- atmospheric monolith scene: FULL-BLEED hero background ---- */
.ms{position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(90% 80% at 72% 116%, rgba(255,122,0,.5), rgba(255,90,0,.12) 32%, transparent 60%),
    linear-gradient(180deg, #060608 0%, #0a0a0e 45%, #140f0b 80%, #1b1206 100%);}
/* left scrim keeps the headline legible over the scene */
.ms-scrim{position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(90deg, rgba(6,6,8,.92) 0%, rgba(6,6,8,.7) 34%, rgba(6,6,8,.15) 62%, transparent 78%);}
/* a real photo can replace the CGI: .ms.has-photo{background-image:var(--hero-photo)} */
.ms.has-photo{background-size:cover; background-position:center;}
.ms.has-photo::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,6,8,.55), rgba(6,6,8,.2) 40%, rgba(28,18,6,.55)),
    radial-gradient(120% 80% at 50% 115%, rgba(255,122,0,.45), transparent 55%);}
.ms.has-photo .ms-glow,.ms.has-photo .ms-ground{opacity:.5;}

.ms-glow{position:absolute; left:72%; bottom:8%; width:48%; height:62%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,140,0,.55), transparent 65%); filter:blur(34px); z-index:1;}
.ms-ground{position:absolute; left:0; right:0; bottom:0; height:38%; z-index:1;
  background:radial-gradient(70% 100% at 72% 100%, rgba(255,122,0,.38), transparent 60%);
  filter:blur(16px);}

.ms-monolith{position:absolute; left:72%; bottom:9%; transform:translateX(-50%);
  width:clamp(96px,11vw,168px); height:74%; z-index:2;
  clip-path:polygon(30% 0, 70% 0, 86% 100%, 14% 100%);  /* tapered: narrower at top */
  background:linear-gradient(100deg, #2a2b32 0%, #141519 28%, #050506 60%, #0c0d11 100%);
  box-shadow:0 30px 60px rgba(0,0,0,.6);}
.ms-face{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%);}
.ms-rim{position:absolute; top:0; bottom:0; left:14%; width:5px;
  background:linear-gradient(180deg, rgba(255,170,80,.95), rgba(255,122,0,.65));
  filter:blur(1.5px) drop-shadow(0 0 10px rgba(255,122,0,.9)); border-radius:4px;}
.ms-eye{position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  width:clamp(40px,5.4vw,64px); height:auto; z-index:3; pointer-events:none;
  filter:drop-shadow(0 0 16px rgba(255,122,0,.95)) drop-shadow(0 0 38px rgba(255,122,0,.6));
  animation:eyePulse 4.2s ease-in-out infinite;}
@keyframes eyePulse{0%,100%{opacity:.9; filter:drop-shadow(0 0 12px rgba(255,122,0,.7)) drop-shadow(0 0 30px rgba(255,122,0,.4));}
  50%{opacity:1; filter:drop-shadow(0 0 22px rgba(255,122,0,1)) drop-shadow(0 0 52px rgba(255,122,0,.65));}}

/* drifting fog */
.ms-fog{position:absolute; left:-20%; right:-20%; height:42%; z-index:3; pointer-events:none;
  background:radial-gradient(60% 80% at 30% 50%, rgba(180,180,200,.10), transparent 70%),
    radial-gradient(50% 70% at 70% 60%, rgba(255,180,120,.08), transparent 70%);
  filter:blur(8px);}
.ms-fog-1{bottom:6%; animation:fog 26s linear infinite;}
.ms-fog-2{bottom:22%; opacity:.7; animation:fog 38s linear infinite reverse;}
@keyframes fog{0%{transform:translateX(-6%);}50%{transform:translateX(6%);}100%{transform:translateX(-6%);}}

/* floating embers */
.ms-embers{position:absolute; inset:0; z-index:3; pointer-events:none;}
.ms-embers i{position:absolute; bottom:12%; width:3px; height:3px; border-radius:50%;
  background:#ffb066; box-shadow:0 0 8px 2px rgba(255,140,0,.7); opacity:0; animation:ember 7s linear infinite;}
.ms-embers i:nth-child(1){left:64%; animation-delay:0s;}
.ms-embers i:nth-child(2){left:74%; animation-delay:1.4s;}
.ms-embers i:nth-child(3){left:70%; animation-delay:2.8s; width:2px; height:2px;}
.ms-embers i:nth-child(4){left:80%; animation-delay:3.6s;}
.ms-embers i:nth-child(5){left:60%; animation-delay:4.6s; width:2px; height:2px;}
.ms-embers i:nth-child(6){left:77%; animation-delay:5.3s;}
.ms-embers i:nth-child(7){left:68%; animation-delay:6s; width:4px; height:4px;}
@keyframes ember{0%{transform:translateY(0) translateX(0); opacity:0;}
  15%{opacity:.9;} 80%{opacity:.5;} 100%{transform:translateY(-220px) translateX(12px); opacity:0;}}

.ms::after{content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  box-shadow:inset 0 0 110px 30px rgba(4,4,6,.85);}

@media(prefers-reduced-motion:reduce){ .ms-eye,.ms-fog,.ms-embers i{animation:none;} }
@media(max-width:860px){
  .lp-hero{min-height:auto; padding:clamp(48px,14vw,96px) 0;}
  .ms-monolith{left:80%; opacity:.7;}
  .ms-scrim{background:linear-gradient(180deg, rgba(6,6,8,.5), rgba(6,6,8,.78)),
    linear-gradient(90deg, rgba(6,6,8,.88), rgba(6,6,8,.4) 72%, transparent);}
}
/* Phones: stop overlaying the headline on the monolith. Stack the copy on top
   and render the monolith + eye as its own clean panel beneath the text. */
@media(max-width:760px){
  .lp-hero{flex-direction:column; align-items:stretch; min-height:auto; padding:32px 0 4px;}
  .lp-hero-inner{order:1;}
  .lp-hero-copy{max-width:none; text-align:center; margin:0 auto;}
  .lp-sub{max-width:42ch; margin:18px auto 26px;}
  .lp-cta{justify-content:center;}
  .ms{position:relative; inset:auto; order:2; width:100%;
    height:clamp(280px,66vw,380px); margin-top:24px; border-radius:18px;
    background:
      radial-gradient(95% 80% at 50% 116%, rgba(255,122,0,.5), rgba(255,90,0,.12) 32%, transparent 60%),
      linear-gradient(180deg,#060608 0%,#0a0a0e 45%,#140f0b 80%,#1b1206 100%);}
  .ms-scrim{display:none;}
  .ms-embers{display:none;}
  .ms-glow{left:50%; bottom:4%; width:74%; height:68%;}
  .ms-ground{background:radial-gradient(72% 100% at 50% 100%, rgba(255,122,0,.4), transparent 60%);}
  .ms-monolith{left:50%; bottom:5%; opacity:1; height:88%; width:clamp(124px,36vw,170px);}
  .ms-eye{width:clamp(50px,13vw,68px);}
}

/* ---- trust strip ---- */
.lp-trust{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center;
  color:var(--muted); font-size:.9rem; padding:8px 16px 40px;}
.lp-trust .dot{opacity:.5;}

/* ---- sections ---- */
.lp-section{max-width:1180px; margin:0 auto; padding:clamp(48px,7vw,96px) clamp(16px,5vw,56px);}
.lp-section-head{text-align:center; max-width:680px; margin:0 auto clamp(36px,5vw,64px);}
.lp-section-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:820;}
.lp-section-head p{color:var(--muted); font-size:1.1rem; margin-top:14px;}

/* alternating feature rows */
.lp-feat{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px,4vw,64px); align-items:center; margin:clamp(40px,6vw,88px) 0;}
.lp-feat:nth-child(even) .lp-feat-text{order:2;}
.lp-feat-tag{color:var(--accent); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px;}
.lp-feat-text h3{font-size:clamp(1.6rem,2.8vw,2.3rem); font-weight:800;}
.lp-feat-text p{color:var(--muted); font-size:1.08rem; margin-top:14px; max-width:46ch;}
.lp-feat-list{list-style:none; margin:20px 0 0; padding:0; max-width:48ch; display:grid; gap:11px;}
.lp-feat-list li{position:relative; padding-left:28px; color:var(--text); font-size:.99rem; line-height:1.45;}
.lp-feat-list li::before{content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:2px;
  background:var(--accent); box-shadow:0 0 0 4px rgba(255,122,0,.14); transform:rotate(45deg);}
.lp-feat-shot{position:relative;}
/* ambient accent glow behind the mockup (Vercel-style) */
.lp-feat-shot::after{content:""; position:absolute; inset:-8% -6% -14% -6%; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 42%, rgba(255,122,0,.16), transparent 70%);
  filter:blur(18px); opacity:.9;}
@media(max-width:820px){ .lp-feat{grid-template-columns:1fr;} .lp-feat:nth-child(even) .lp-feat-text{order:0;} }

/* ---- high-fidelity product mockups (coded, no screenshots) ---- */
.mock{border:1px solid var(--line); border-radius:16px; overflow:hidden; position:relative;
  background:linear-gradient(180deg,#16171d,#0c0d11);
  box-shadow:0 2px 6px rgba(0,0,0,.45), 0 30px 80px -12px rgba(0,0,0,.6); aspect-ratio:16/11;
  display:flex; flex-direction:column; font-size:12px;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;}
/* accent-tinted top edge + soft sheen */
.mock::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,122,0,.55),transparent);}
.lp-feat:hover .mock{transform:translateY(-6px); box-shadow:0 44px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,122,0,.18);}
.mock-bar{display:flex; align-items:center; gap:6px; padding:10px 13px; flex:none;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.02);}
.mock-bar i{width:9px; height:9px; border-radius:50%; background:#2a2c33; flex:none;}
.mock-bar i:nth-child(1){background:#4a2a18;} .mock-bar i:nth-child(2){background:#4a3d18;} .mock-bar i:nth-child(3){background:#1e3a24;}
.mock-tt{margin-left:7px; font-weight:700; color:#cfd4dc; font-size:11.5px; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mock-seg{margin-left:auto; display:inline-flex; padding:2px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid var(--line);}
.mock-seg b{font-size:10px; font-weight:700; color:var(--muted); padding:2px 8px; border-radius:6px;}
.mock-seg b.on{background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#120a02;}
.mock-live{margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:10.5px; font-weight:600;}
.mock-live .dot{width:7px; height:7px; border-radius:50%; background:#3cc878; box-shadow:0 0 0 0 rgba(60,200,120,.5); animation:livePulse 2.4s ease-out infinite;}
.mock-live .cnt{color:var(--ink); font-weight:800;}
.mock-lgd{margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:10px; font-weight:600;}
.mock-lgd em{width:12px; height:3px; border-radius:2px; display:inline-block;}
.mock-lgd em.k1{background:var(--accent);} .mock-lgd em.k2{background:var(--muted);}
.mock-lgd em.k2+*{margin-left:2px;}
.mock-find{margin-left:auto; font-size:10px; color:var(--muted); padding:3px 10px; border-radius:7px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);}
.mock-body{flex:1; padding:14px; min-height:0; display:flex; flex-direction:column;}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(60,200,120,.45);}70%,100%{box-shadow:0 0 0 7px rgba(60,200,120,0);}}

/* shared atoms */
.nm{display:inline-block; height:7px; border-radius:4px; background:rgba(255,255,255,.16);}
.nm.w1{width:34px;} .nm.w2{width:52px;} .nm.w3{width:68px;}
.av{width:20px; height:20px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  font-size:8.5px; font-weight:800; color:#0c0d11;}
.av.a1{background:#ff9a52;} .av.a2{background:#6fb4ff;} .av.a3{background:#7ee0a8;}
.av.a4{background:#c99bff;} .av.a5{background:#ffce6b;} .av.a6{background:#ff8a8a;}
.rl{margin-left:auto; font-size:8.5px; font-weight:700; color:var(--muted); padding:1px 6px; border-radius:5px; background:rgba(255,255,255,.06);}
.pill{font-size:9px; font-weight:800; letter-spacing:.02em; padding:2px 8px; border-radius:999px; white-space:nowrap;
  color:var(--muted); background:rgba(255,255,255,.06);}
.pill.ok{color:#8fe6b4; background:rgba(60,200,120,.15);}
.pill.go{color:#ffb877; background:rgba(255,122,0,.17);}
.pill.wait{color:#9aa3ae; background:rgba(255,255,255,.06);}
.chip{font-size:9px; font-weight:600; color:var(--muted); padding:2px 7px; border-radius:6px;
  background:rgba(255,255,255,.045); border:1px solid var(--line); white-space:nowrap;}
.chip.warn{color:#ffb877; border-color:rgba(255,122,0,.3); background:rgba(255,122,0,.08);}
.dotok,.dotgo{width:8px; height:8px; border-radius:50%; flex:none;}
.dotok{background:#3cc878;} .dotgo{background:var(--accent);}
/* Real QR — the inline SVG from partials/_landing_qr.html. The light plate is
   part of the SVG (phones need dark-on-light), so this just sizes and frames it
   like a printed asset label. */
.mk-qr{flex:none; position:relative; overflow:hidden; display:inline-block; line-height:0;
  border-radius:5px; background:#eef1f6; padding:1px;
  box-shadow:0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);}
.mk-qr svg{display:block; width:100%; height:100%;}
.mk-qr.sm{width:24px; height:24px; border-radius:4px;}
.mk-qr.md{width:46px; height:46px;}
.mk-qr.big{width:56px; height:56px;}
.mk-qr.hero{width:clamp(132px,17vw,178px); height:clamp(132px,17vw,178px); border-radius:12px; padding:8px;
  box-shadow:0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,122,0,.28), 0 0 48px rgba(255,122,0,.16);}
.mk-qr .beam{position:absolute; left:0; right:0; height:34%; top:-40%; z-index:2;
  background:linear-gradient(180deg,transparent,rgba(255,122,0,.85),transparent);
  mix-blend-mode:hard-light; pointer-events:none;}

/* card intro: default visible; replays when the row reveals */
.lp-feat.in .mk-cd,.lp-feat.in .mk-r,.lp-feat.in .mk-or,.lp-feat.in .mk-st,.lp-feat.in .mk-vr{animation:mkRise .5s cubic-bezier(.2,.7,.2,1) both;}
@keyframes mkRise{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}}

/* board */
.mk-board{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; height:100%;}
.mk-col{display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:9px;
  background:rgba(255,255,255,.02); border:1px solid var(--line); min-width:0;}
.mk-col--bench{background:rgba(255,122,0,.05); border-color:rgba(255,122,0,.18);}
.mk-ch{display:flex; align-items:center; justify-content:space-between; font-size:9.5px; font-weight:800; color:#cfd4dc; margin-bottom:1px;}
.mk-ch b{font-size:9px; color:var(--accent); background:rgba(255,122,0,.12); border-radius:5px; padding:0 5px;}
.mk-cd{display:flex; align-items:center; gap:5px; padding:5px; border-radius:7px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)); box-shadow:inset 2px 0 0 var(--accent);}
.mk-cd .nm{background:rgba(255,255,255,.22);}
.lp-feat.in .mk-cd{animation-delay:calc(var(--i,0)*.05s);}
.mk-col:nth-child(1) .mk-cd:nth-child(2){--i:1;} .mk-col:nth-child(1) .mk-cd:nth-child(3){--i:2;} .mk-col:nth-child(1) .mk-cd:nth-child(4){--i:3;}
.mk-col:nth-child(2) .mk-cd:nth-child(2){--i:2;} .mk-col:nth-child(2) .mk-cd:nth-child(3){--i:3;}
.mk-col:nth-child(3) .mk-cd:nth-child(2){--i:3;} .mk-col:nth-child(3) .mk-cd:nth-child(3){--i:4;} .mk-col:nth-child(3) .mk-cd:nth-child(4){--i:5;}
.mk-col:nth-child(4) .mk-cd:nth-child(2){--i:4;} .mk-col:nth-child(4) .mk-cd:nth-child(3){--i:5;}
.mk-cd--drop{box-shadow:inset 2px 0 0 var(--accent),0 0 0 1px rgba(255,122,0,.4);}
.lp-feat.in .mk-cd--drop{animation:mkDrop .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:.5s;}
@keyframes mkDrop{0%{opacity:0; transform:translate(-14px,-10px) scale(.96);}100%{opacity:1; transform:none;}}

/* chart */
.mk-kpis{display:flex; gap:8px; margin-bottom:12px;}
.kpi{flex:1; border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:rgba(255,255,255,.02);}
.kpi .kv{display:block; font-size:16px; font-weight:850; color:var(--ink); letter-spacing:-.02em; line-height:1;}
.kpi.up .kv{color:#8fe6b4;}
.kpi .kl{font-size:8.5px; color:var(--muted); font-weight:600;}
.mk-plot{width:100%; flex:1; min-height:0; display:block;}
.mk-actual{stroke-dasharray:440;}
.lp-feat.in .mk-actual{animation:mkDraw 1.3s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes mkDraw{from{stroke-dashoffset:440;}to{stroke-dashoffset:0;}}
.mk-area{opacity:1;}
.lp-feat.in .mk-area{animation:mkFade 1.3s ease forwards;}
@keyframes mkFade{from{opacity:0;}to{opacity:1;}}
.mk-dot{filter:drop-shadow(0 0 5px rgba(255,122,0,.9)); animation:dotPulse 2.6s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{r:3.4;}50%{r:5;}}
.mk-xaxis{display:flex; justify-content:space-between; margin-top:6px; font-size:8px; color:var(--muted); letter-spacing:.02em;}

/* assets */
.mk-scan{display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,.025); margin-bottom:10px;}
.mk-scanmeta{display:flex; flex-direction:column; gap:8px; min-width:0;}
.mk-scanmeta .nm{background:rgba(255,255,255,.24);}
.mk-sub{display:flex; align-items:center; gap:7px;}
.mk-rows{display:flex; flex-direction:column; gap:8px;}
.mk-r{display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:8px;
  border:1px solid var(--line); background:rgba(255,255,255,.015);}
.mk-r .nm{flex:1;}
.lp-feat.in .mk-r:nth-child(2){animation-delay:.08s;} .lp-feat.in .mk-r:nth-child(3){animation-delay:.16s;}
.lp-feat.in .mk-qr.big .beam{animation:scan 2.6s cubic-bezier(.5,0,.5,1) infinite;}
@keyframes scan{0%{top:-40%;}55%,100%{top:110%;}}

/* orders */
.mk-orows{display:flex; flex-direction:column; gap:9px; justify-content:center; height:100%;}
.mk-or{display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:9px;
  border:1px solid var(--line); background:rgba(255,255,255,.02);}
.onum{font-size:10px; font-weight:800; color:var(--muted); flex:none; width:34px;}
.mk-or .nm{flex:1;}
.mk-or .av{width:18px; height:18px;}
.prog{flex:none; width:56px; height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden;}
.prog b{display:block; height:100%; width:var(--p); border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#ffb066); transform-origin:left;}
.lp-feat.in .prog b{animation:progIn 1.1s cubic-bezier(.3,.8,.3,1) both;}
@keyframes progIn{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.lp-feat.in .mk-or:nth-child(2){animation-delay:.07s;} .lp-feat.in .mk-or:nth-child(3){animation-delay:.14s;} .lp-feat.in .mk-or:nth-child(4){animation-delay:.21s;}

/* checks */
.mk-steps{display:flex; flex-direction:column; gap:2px; justify-content:center; height:100%;}
.mk-st{display:flex; align-items:center; gap:11px; padding:9px 4px; position:relative;}
.mk-st:not(:last-child)::after{content:""; position:absolute; left:11px; top:30px; bottom:-2px; width:2px; background:var(--line);}
.mk-st.done:not(:last-child)::after{background:linear-gradient(180deg,#3cc878,var(--line));}
.mk-st .tk{width:22px; height:22px; border-radius:50%; flex:none; border:2px solid var(--line); position:relative; z-index:1; background:#0c0d11;}
.mk-st.done .tk{border-color:transparent; background:#3cc878;}
.mk-st.done .tk::after{content:""; position:absolute; inset:0; margin:auto; width:8px; height:5px;
  border-left:2px solid #0c0d11; border-bottom:2px solid #0c0d11; transform:rotate(-45deg) translate(1px,-1px);}
.mk-st.now .tk{border-color:var(--accent); background:rgba(255,122,0,.22); box-shadow:0 0 0 0 rgba(255,122,0,.5);}
.lp-feat.in .mk-st.now .tk{animation:nowPulse 2.4s ease-out infinite;}
@keyframes nowPulse{0%{box-shadow:0 0 0 0 rgba(255,122,0,.5);}70%,100%{box-shadow:0 0 0 8px rgba(255,122,0,0);}}
.stnm{font-size:11px; font-weight:700; color:#cfd4dc;}
.mk-st .pill{margin-left:auto;}
.lp-feat.in .mk-st:nth-child(2){animation-delay:.08s;} .lp-feat.in .mk-st:nth-child(3){animation-delay:.16s;} .lp-feat.in .mk-st:nth-child(4){animation-delay:.24s;}

/* fleet */
.mk-veh-list{display:flex; flex-direction:column; gap:10px; justify-content:center; height:100%;}
.mk-vr{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.02);}
.vname{font-size:11px; font-weight:800; color:#cfd4dc; flex:none; width:56px;}
.mk-vr .nm{flex:1;}
.mk-ring{width:38px; height:38px; flex:none; transform:rotate(-90deg);}
.mk-ring .rbg{fill:none; stroke:rgba(255,255,255,.09); stroke-width:4;}
.mk-ring .rfg{fill:none; stroke:#3cc878; stroke-width:4; stroke-linecap:round;
  stroke-dasharray:var(--pct) 100;}
.mk-ring.warn .rfg{stroke:var(--accent);}
.lp-feat.in .mk-ring .rfg{animation:ringFill 1.2s cubic-bezier(.3,.8,.3,1) both;}
@keyframes ringFill{from{stroke-dashoffset:var(--pct);}to{stroke-dashoffset:0;}}
.mk-ring .rtx{fill:#cfd4dc; font-size:12px; font-weight:800; transform:rotate(90deg); transform-origin:22px 22px;}
.lp-feat.in .mk-vr:nth-child(2){animation-delay:.08s;} .lp-feat.in .mk-vr:nth-child(3){animation-delay:.16s;}

/* compliance: permit stepper beside the live lockout tag */
.mk-split{flex-direction:row !important; gap:12px; align-items:stretch;}
.mk-split .mk-steps{flex:1; min-width:0;}
.mk-loto{flex:none; width:112px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:9px; padding:10px; border-radius:10px;
  border:1px solid rgba(255,122,0,.28); background:rgba(255,122,0,.06);}
.mk-loto-hd,.mk-loto-ft{display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center;}

/* equipment install lifecycle — stacked Set / Termed / Torqued per area */
.mock-lgd em.k3{background:#5ad1c0;} .mock-lgd em.k4{background:#8f9bff;} .mock-lgd em.k5{background:#c58bff;}
.mk-inst{display:flex; flex-direction:column; gap:9px; flex:1; justify-content:space-evenly;}
.mk-ir{display:flex; align-items:center; gap:10px;}
.mk-stack{flex:1; display:flex; flex-direction:column; gap:3px; min-width:0;}
.mk-stack b{display:block; height:5px; border-radius:999px; width:var(--p); min-width:2px;
  transform-origin:left;}
.mk-stack b.s1{background:linear-gradient(90deg,#5ad1c0,#8fe6d8);}
.mk-stack b.s2{background:linear-gradient(90deg,#8f9bff,#b6bdff);}
.mk-stack b.s3{background:linear-gradient(90deg,#c58bff,#e0bbff);}
.mk-ir .pct{flex:none; width:32px; text-align:right; font-size:10px; font-weight:800; color:#cfd4dc;}
.lp-feat.in .mk-stack b{animation:progIn 1s cubic-bezier(.3,.8,.3,1) both;}
.lp-feat.in .mk-stack b.s2{animation-delay:.1s;} .lp-feat.in .mk-stack b.s3{animation-delay:.2s;}
.mk-instft{display:flex; gap:6px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line);}
.mk-mini{flex:1; display:flex; flex-direction:column; gap:2px;}
.mk-mini em{font-size:8px; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase;}
.mk-mini b{font-size:13px; font-weight:850; color:#cfd4dc; letter-spacing:-.02em;}
.mk-mini.up b{color:var(--accent);}

/* quality gates + sealed-record line */
.mk-gates{display:flex; flex-direction:column; gap:6px; flex:1; justify-content:space-evenly;}
.mk-g{display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:8px;
  border:1px solid var(--line); background:rgba(255,255,255,.015);}
.mk-g .gl{flex:none; width:24px; font-size:9px; font-weight:850; color:var(--muted);
  text-align:center; padding:2px 0; border-radius:4px; background:rgba(255,255,255,.06);}
.mk-g.done .gl{color:#8fe6b4; background:rgba(60,200,120,.16);}
.mk-g.now .gl{color:#ffb877; background:rgba(255,122,0,.18);}
/* the .nm atom is a redacted *label*, so it keeps its own short width here —
   flexing it to fill made the rows read as empty progress bars */
.mk-g .pill{margin-left:auto;}
.lp-feat.in .mk-g{animation:mkRise .5s cubic-bezier(.2,.7,.2,1) both;}
.lp-feat.in .mk-g:nth-child(2){animation-delay:.06s;} .lp-feat.in .mk-g:nth-child(3){animation-delay:.12s;}
.lp-feat.in .mk-g:nth-child(4){animation-delay:.18s;} .lp-feat.in .mk-g:nth-child(5){animation-delay:.24s;}
.mk-evid{display:flex; align-items:center; gap:6px; margin-top:11px; padding-top:11px;
  border-top:1px solid var(--line); flex-wrap:wrap;}
.mk-ph{width:26px; height:20px; border-radius:4px; flex:none; border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02));}
.mk-lockline{display:inline-flex; align-items:center; gap:6px; font-size:8.5px; color:var(--muted);
  font-weight:600; margin-left:auto;}
.mk-lockline .lk{width:8px; height:8px; border-radius:2px; flex:none; background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,122,0,.16);}

@media(prefers-reduced-motion:reduce){
  .mock,.mock *{animation:none !important; transition:none !important;}
  .mk-actual{stroke-dasharray:none;} .mk-ring .rfg{stroke-dashoffset:0;} .prog b{transform:none;}
  .mk-stack b{transform:none;}
}

/* ---- metrics / outcomes band ---- */
.lp-metrics{border-block:1px solid var(--line); background:rgba(255,255,255,.015);}
.lp-metrics-inner{max-width:1100px; margin:0 auto; padding:clamp(28px,4vw,44px) clamp(16px,5vw,56px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.lp-metric{display:flex; flex-direction:column; gap:6px;}
.lp-metric-val{font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:850; letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--accent),#ffb066); -webkit-background-clip:text; background-clip:text; color:transparent;}
.lp-metric-lbl{color:var(--muted); font-size:.92rem; line-height:1.35;}
@media(max-width:640px){ .lp-metrics-inner{grid-template-columns:repeat(2,1fr); gap:22px 16px;} }

/* ---- security / enterprise band ---- */
.lp-sec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.lp-sec-card{border:1px solid var(--line); border-radius:14px; padding:22px 22px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008)); position:relative;}
.lp-sec-ic{display:block; width:34px; height:34px; border-radius:9px; margin-bottom:14px;
  background:radial-gradient(circle at 30% 25%,rgba(255,122,0,.5),transparent 70%),rgba(255,122,0,.12);
  border:1px solid rgba(255,122,0,.35); position:relative;}
.lp-sec-ic::after{content:""; position:absolute; inset:0; margin:auto; width:13px; height:8px;
  border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg) translate(1px,-2px);}
.lp-sec-card h4{font-size:1.08rem; margin-bottom:7px;}
.lp-sec-card p{color:var(--muted); font-size:.95rem; line-height:1.5;}
.lp-sec-card{transition:transform .18s cubic-bezier(.16,1,.3,1), border-color .18s, background .18s;}
.lp-sec-card:hover{transform:translateY(-3px); border-color:rgba(255,122,0,.3);}
@media(max-width:860px){ .lp-sec-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .lp-sec-grid{grid-template-columns:1fr;} }
.lp-final p{color:var(--muted); font-size:1.1rem; margin-bottom:28px; margin-top:-14px;}

/* ---- numbered feature tag ---- */
/* flex-wrap is load-bearing: without it this row's min-content width is
   "01" + the full uppercase tag on one unbreakable line (~400px), which blows
   out the grid column and gives the whole page horizontal overflow on a phone. */
.lp-feat-tag{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.lp-num{font-style:normal; font-variant-numeric:tabular-nums; font-size:.74rem; font-weight:800;
  color:var(--accent); opacity:.75; padding:2px 7px; border-radius:5px;
  background:rgba(255,122,0,.1); border:1px solid rgba(255,122,0,.24); letter-spacing:.06em;}

/* ---- module grid (the compact "everything else" band) ---- */
.lp-mods{padding-top:0;}
.lp-mod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.lp-mod{position:relative; padding:20px 18px 20px; border-radius:14px;
  border:1px solid var(--line); overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.006));
  transition:transform .18s cubic-bezier(.16,1,.3,1), border-color .18s, background .18s;}
/* inner top highlight — the "liquid glass" edge that keeps cards from reading flat */
.lp-mod::before{content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);}
.lp-mod:hover{transform:translateY(-3px); border-color:rgba(255,122,0,.3);
  background:linear-gradient(180deg,rgba(255,122,0,.05),rgba(255,255,255,.01));}
.lp-mod-ix{display:block; width:9px; height:9px; border-radius:2px; margin-bottom:14px;
  background:var(--accent); box-shadow:0 0 0 4px rgba(255,122,0,.13); transform:rotate(45deg);}
.lp-mod h4{font-size:1rem; margin-bottom:7px; letter-spacing:-.01em;}
.lp-mod p{color:var(--muted); font-size:.9rem; line-height:1.5;}
@media(max-width:980px){ .lp-mod-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .lp-mod-grid{grid-template-columns:1fr;} }

/* ---- scan band — the real QR, given room to be the hero of its own section ---- */
.lp-scan{position:relative; border-block:1px solid var(--line); overflow:hidden;
  background:
    radial-gradient(70% 120% at 82% 50%, rgba(255,122,0,.14), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.014),transparent);}
.lp-scan-inner{max-width:1180px; margin:0 auto; padding:clamp(48px,7vw,90px) clamp(16px,5vw,56px);
  display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(28px,5vw,64px); align-items:center;}
.lp-scan-copy h2{font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:820;}
.lp-scan-copy p{color:var(--muted); font-size:1.06rem; line-height:1.6; margin-top:16px; max-width:52ch;}
.lp-scan-code{display:flex; flex-direction:column; align-items:center; gap:14px;}
.lp-scan-cap{font-size:.8rem; color:var(--muted); letter-spacing:.04em; text-align:center;}
.lp-scan-code .mk-qr .beam{animation:scan 3s cubic-bezier(.5,0,.5,1) infinite;}
@media(prefers-reduced-motion:reduce){ .lp-scan-code .mk-qr .beam{animation:none; display:none;} }
@media(max-width:820px){
  .lp-scan-inner{grid-template-columns:1fr; text-align:center;}
  .lp-scan-copy p{margin-inline:auto;}
  .lp-scan .lp-kicker{justify-content:center;}
}

/* why cards */
.lp-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;}
.lp-card{border:1px solid var(--line); border-radius:14px; padding:24px; background:rgba(255,255,255,.02);
  transition:transform .18s cubic-bezier(.16,1,.3,1), border-color .18s, background .18s;}
.lp-card:hover{transform:translateY(-3px); border-color:rgba(255,122,0,.28); background:rgba(255,255,255,.035);}
.lp-card h4{font-size:1.15rem; margin-bottom:8px;}
.lp-card p{color:var(--muted); font-size:.98rem;}

/* final CTA */
.lp-final{text-align:center; max-width:760px; margin:0 auto; padding:clamp(56px,8vw,120px) 16px;}
.lp-final h2{font-size:clamp(2rem,4vw,3rem); font-weight:840; margin-bottom:28px;}

/* footer */
.lp-footer{border-top:1px solid var(--line); padding:34px clamp(16px,5vw,56px);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:var(--muted);}
.lp-footer .lp-brand{font-size:1rem; color:var(--ink);}

/* scroll reveal — only hides when JS is present (progressive enhancement),
   so no-JS / pre-scroll content is always visible. */
html.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease;}
html.js .reveal.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){ html.js .reveal{opacity:1; transform:none; transition:none;} .lp-eye{animation:none;} html{scroll-behavior:auto;} }

/* ---- live-project proof band (hyperscale data-center build) ---- */
.lp-proof{position:relative; overflow:hidden; border-block:1px solid var(--line);
  background:
    radial-gradient(80% 130% at 12% 50%, rgba(255,122,0,.13), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent);}
/* brushed-metal texture: fine diagonal hatch, barely there, keeps the band from
   reading as flat colour on a big screen */
.lp-proof::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.028) 0 1px, transparent 1px 7px);}
.lp-proof-inner{position:relative; max-width:1180px; margin:0 auto;
  padding:clamp(34px,5vw,60px) clamp(16px,5vw,56px);
  display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(24px,4vw,56px); align-items:center;}
.lp-proof-copy h2{font-size:clamp(1.4rem,2.5vw,2.05rem); font-weight:820;}
.lp-proof-copy p{color:var(--muted); font-size:1.02rem; line-height:1.62; margin-top:13px; max-width:60ch;}
.lp-proof-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.lp-proof-stat{display:flex; flex-direction:column; gap:5px; padding:14px 12px;
  border-radius:12px; border:1px solid var(--line); text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.008));}
.lp-proof-stat .v{font-size:clamp(1.05rem,1.9vw,1.4rem); font-weight:850; letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--accent),#ffb066);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.lp-proof-stat .l{font-size:.74rem; color:var(--muted); line-height:1.3;}
@media(max-width:820px){
  .lp-proof-inner{grid-template-columns:1fr; gap:22px;}
}

/* ---- contact / inquiry ---- */
.lp-contact{position:relative; overflow:hidden;
  background:radial-gradient(70% 110% at 84% 8%, rgba(255,122,0,.12), transparent 60%);}
.lp-contact-inner{max-width:1180px; margin:0 auto;
  padding:clamp(52px,7vw,104px) clamp(16px,5vw,56px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,68px); align-items:start;}
.lp-contact-copy h2{font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:820;}
.lp-contact-copy p{color:var(--muted); font-size:1.06rem; line-height:1.6; margin-top:16px; max-width:46ch;}
.lp-contact-facts{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px;}
.lp-contact-facts li{position:relative; padding-left:26px; color:var(--muted); font-size:.97rem;}
.lp-contact-facts li::before{content:""; position:absolute; left:0; top:.45em; width:8px; height:8px;
  border-radius:2px; background:var(--accent); box-shadow:0 0 0 4px rgba(255,122,0,.13);
  transform:rotate(45deg);}

/* the form surface itself — layered glass so it reads as a real panel */
.lp-form{position:relative; border:1px solid var(--line); border-radius:18px;
  padding:clamp(22px,3vw,32px);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);}
.lp-form::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,122,0,.5),transparent);}
.lp-form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.lp-form .lp-field{display:block; margin-bottom:14px; min-width:0;}
.lp-form .lp-field>span{display:block; font-size:.82rem; color:var(--muted);
  margin-bottom:7px; font-weight:600;}
.lp-form .lp-field>span i{font-style:normal; opacity:.6; font-weight:500;}
.lp-form input[type=text],.lp-form input[type=email],.lp-form input[type=tel],
.lp-form textarea{width:100%; padding:12px 14px; border-radius:11px; color:var(--ink);
  font:inherit; font-size:1rem; background:rgba(255,255,255,.04);
  border:1px solid var(--line); -webkit-appearance:none; appearance:none;
  transition:border-color .15s, box-shadow .15s, background .15s;}
.lp-form textarea{resize:vertical; min-height:104px;}
.lp-form input::placeholder,.lp-form textarea::placeholder{color:rgba(255,255,255,.28);}
.lp-form input:focus,.lp-form textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,122,0,.18); background:rgba(255,255,255,.06);}
.lp-form-send{width:100%; margin-top:6px; min-height:50px;}
.lp-form-fine{color:var(--muted); font-size:.8rem; text-align:center; margin:12px 0 0;}
.lp-field-err{display:block; color:#ff9a7a; font-size:.8rem; margin-top:6px; font-style:normal;}
.lp-form-ok{color:#8fe6b4; background:rgba(60,200,120,.12); border:1px solid rgba(60,200,120,.34);
  border-radius:11px; padding:11px 14px; font-size:.92rem; margin:0 0 16px;}
.lp-form-err{color:#ffd7c2; background:rgba(220,53,69,.14); border:1px solid rgba(220,53,69,.4);
  border-radius:11px; padding:11px 14px; font-size:.92rem; margin:0 0 16px;}
/* honeypot: gone for sighted users AND out of the a11y tree / tab order */
.lp-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
@media(max-width:900px){
  .lp-contact-inner{grid-template-columns:1fr; gap:28px;}
}
@media(max-width:520px){
  .lp-form-row{grid-template-columns:1fr; gap:0;}
}

/* =================================================================
   RESPONSIVE HARDENING — polished at every width, not just desktop.

   Two classes of problem are handled here:
   1. Horizontal overflow. Grid/flex children default to min-width:auto, so one
      unbreakable child (a long uppercase tag, a wide mockup atom) sets the
      column's min-content width and the whole page scrolls sideways. Every
      layout child below gets min-width:0 and long text gets break-word.
   2. The mockups are internally fixed-scale (12px type, px-width atoms) with a
      16/11 aspect ratio. On a ~340px-wide card that ratio leaves ~230px of
      height — not enough for five rows plus a footer — so content crushes.
      Below 560px the ratio is released and the dense layouts relax.
   ================================================================= */

/* --- 1. overflow containment (applies at all widths) --- */
.lp-feat,.lp-feat-text,.lp-feat-shot,.lp-scan-inner,.lp-scan-copy,
.lp-mod,.lp-card,.lp-sec-card,.lp-metric{min-width:0;}
.lp-feat-text p,.lp-feat-list li,.lp-scan-copy p,.lp-mod p,.lp-card p,
.lp-sec-card p,.lp-section-head p{overflow-wrap:break-word;}
.lp-hero h1,.lp-section-head h2,.lp-scan-copy h2{overflow-wrap:break-word;}
/* The decorative layers deliberately bleed past the edges (.ms-fog is
   left:-20%/right:-20%; the auroras are oversized blurs). They are clipped
   visually by their ancestors, but the document can still count them as
   scrollable width. overflow-x:clip on the root kills the sideways scroll
   without creating a scroll container the way overflow:hidden would — and
   100% is used rather than 100vw, since 100vw includes the scrollbar and is
   itself a classic source of a few px of phantom overflow. */
html{overflow-x:clip; max-width:100%;}
.lp-bg{max-width:100%;}

/* --- 2. tablet / small laptop --- */
@media(max-width:900px){
  /* the 58% cap is for sitting beside the monolith; below this the copy owns
     the row, so let it use the full column instead of a squeezed column */
  .lp-hero-copy{max-width:min(700px,88%);}
}

/* --- 3. phones --- */
@media(max-width:640px){
  .lp-section{padding-inline:18px;}
  .lp-section-head{margin-bottom:32px;}
  .lp-section-head h2{font-size:clamp(1.6rem,6.4vw,2rem);}
  .lp-section-head p{font-size:1rem;}
  .lp-feat{margin-block:44px; gap:22px;}
  .lp-feat-text h3{font-size:clamp(1.45rem,6.2vw,1.8rem);}
  .lp-feat-text p{font-size:1rem;}
  .lp-feat-list li{font-size:.95rem; padding-left:24px;}
  .lp-kicker{font-size:.68rem; letter-spacing:.16em;}
  /* full-width tap targets for the hero CTAs — thumb-friendly, no 2-up squeeze */
  .lp-cta{gap:10px;}
  .lp-cta .lp-btn{flex:1 1 100%; min-height:48px;}
  .lp-nav .lp-btn{min-height:40px;}
  .lp-trust{font-size:.82rem; gap:8px; padding-bottom:28px;}
  .lp-scan-cap{font-size:.75rem;}
  .lp-final h2{font-size:clamp(1.7rem,7vw,2.2rem);}
  .lp-footer{flex-direction:column; align-items:flex-start; gap:12px; text-align:left;}
  .lp-foot-meta{font-size:.8rem;}
}

/* --- 4. the mockups: release the fixed scale so nothing crushes --- */
@media(max-width:560px){
  .mock{aspect-ratio:auto; min-height:0; font-size:11px;}
  .mock-body{padding:11px; gap:9px;}
  .mock-tt{font-size:11px;}
  /* four crew columns at ~78px each is unreadable — go 2-up and let it breathe */
  .mk-board{grid-template-columns:repeat(2,1fr); gap:7px; height:auto;}
  .mk-col{padding:7px;}
  /* stack the permit stepper above the lockout tag instead of side-by-side */
  .mk-split{flex-direction:column !important;}
  .mk-loto{width:100%; flex-direction:row; justify-content:space-between; padding:9px 11px;}
  /* dense footers wrap rather than compress */
  .mk-instft,.mk-kpis{flex-wrap:wrap; gap:8px;}
  .mk-mini,.kpi{flex:1 1 calc(50% - 4px);}
  .mk-evid{gap:8px;}
  .mk-lockline{margin-left:0; flex-basis:100%;}
  .mk-inst,.mk-gates,.mk-orows,.mk-veh-list,.mk-steps,.mk-rows{gap:7px;}
  .vname{width:48px;}
  .mk-or .prog{width:42px;}
  .mk-scan{gap:10px;}
  /* the title bar holds dots + title + a control + a live count; on a ~340px
     card the count wrapped onto two lines ("142 / on site"). Keep it on one
     line and let the title take the squeeze via its existing ellipsis. */
  .mock-live,.mock-lgd,.mock-find{white-space:nowrap; flex:none;}
}
/* Under ~420px drop the segmented control from the mock title bar entirely —
   at that width it competes with the title and the live count for ~180px. */
@media(max-width:420px){
  .mock-seg{display:none;}
  .mock-lgd{font-size:9px;}
}

/* --- 5. very narrow (320-360px) --- */
@media(max-width:380px){
  .lp-hero h1{font-size:1.85rem;}
  .lp-sub{font-size:.98rem;}
  .mk-board{grid-template-columns:1fr;}
  .mk-board .mk-col:nth-child(n+3){display:none;}  /* two lanes tell the story */
  .lp-metrics-inner{gap:18px 12px;}
  .lp-metric-lbl{font-size:.84rem;}
}

/* --- 6. landscape phones: don't let a 400px-tall hero swallow the fold --- */
@media(max-height:520px) and (orientation:landscape){
  .lp-hero{min-height:auto; padding-block:40px;}
  .ms-embers{display:none;}
}

/* --- 7. mobile texture -------------------------------------------------
   On a phone the page is one narrow column of flat panels, so the desktop
   depth cues (wide gradients, big shadows) mostly fall outside the viewport
   and it reads cheap. These add per-surface texture at small sizes: a hairline
   inner highlight on every panel, a faint hatch on the hero's monolith panel,
   and a slightly stronger grain. All are sub-pixel-cheap — no extra requests.  */
@media(max-width:760px){
  .lp-grain{opacity:.05;}
  /* the monolith becomes its own panel on phones — give it a real edge, an
     inner top highlight and a woven hatch so it looks machined, not filled */
  .ms{border:1px solid rgba(255,255,255,.07);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 24px 60px -20px rgba(0,0,0,.9);}
  .ms::before{content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.6;
    background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(-115deg, rgba(255,255,255,.014) 0 1px, transparent 1px 9px);}
  /* every card surface gets the top-edge highlight that sells "glass" */
  .lp-card,.lp-sec-card,.lp-mod,.mock,.lp-form,.lp-proof-stat{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 14px 34px -16px rgba(0,0,0,.8);}
  /* accent hairline along the top of the mock chrome, as on desktop hover */
  .mock{border-color:rgba(255,255,255,.09);}
  .lp-metrics{background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 1px, transparent 1px 8px),
      rgba(255,255,255,.015);}
}

/* =================================================================
   MOTION — restrained on purpose.

   The reference set (Linear/Vercel/Procore) all use motion to signal state or
   direction, never for decoration: content arrives on scroll, numbers count up
   once, surfaces respond to a pointer. Nothing loops in the reader's periphery
   while they are trying to read. Everything below is one-shot or
   pointer-driven, and the whole block is disabled under
   prefers-reduced-motion at the end of this file.
   ================================================================= */

/* Staggered arrival: children of a revealed block come in just behind their
   parent, which reads as one deliberate movement instead of a popping grid. */
html.js .lp-mod-grid .lp-mod,
html.js .lp-cards .lp-card,
html.js .lp-sec-grid .lp-sec-card,
html.js .lp-proof-stats .lp-proof-stat{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);}
html.js .lp-mod-grid.in .lp-mod,
html.js .lp-cards.in .lp-card,
html.js .lp-sec-grid.in .lp-sec-card,
html.js .lp-proof-stats.in .lp-proof-stat{opacity:1; transform:none;}
html.js .lp-mod:nth-child(2),html.js .lp-card:nth-child(2),
html.js .lp-sec-card:nth-child(2),html.js .lp-proof-stat:nth-child(2){transition-delay:.06s;}
html.js .lp-mod:nth-child(3),html.js .lp-card:nth-child(3),
html.js .lp-sec-card:nth-child(3),html.js .lp-proof-stat:nth-child(3){transition-delay:.12s;}
html.js .lp-mod:nth-child(4),html.js .lp-card:nth-child(4),
html.js .lp-sec-card:nth-child(4){transition-delay:.18s;}
html.js .lp-mod:nth-child(5),html.js .lp-sec-card:nth-child(5){transition-delay:.24s;}
html.js .lp-mod:nth-child(6),html.js .lp-sec-card:nth-child(6){transition-delay:.30s;}
html.js .lp-mod:nth-child(7){transition-delay:.36s;}
html.js .lp-mod:nth-child(8){transition-delay:.42s;}

/* Pointer sheen: a soft highlight tracks the cursor across a card. --mx/--my
   are written by landing.js only on devices with a real pointer. */
@media(hover:hover) and (pointer:fine){
  .lp-mod,.lp-card,.lp-sec-card{position:relative; isolation:isolate;}
  .lp-mod::after,.lp-card::after,.lp-sec-card::after{
    content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
    opacity:0; transition:opacity .28s ease; pointer-events:none;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),
      rgba(255,122,0,.16), transparent 62%);}
  .lp-mod:hover::after,.lp-card:hover::after,.lp-sec-card:hover::after{opacity:1;}
}

/* Hero glow drifts a few px with scroll — depth without a parallax library.
   --sy is set by landing.js (rAF-throttled). */
.ms-glow{will-change:transform;}
html.js .lp-hero .ms-glow{transform:translateX(-50%) translateY(calc(var(--sy,0) * -14px));}

/* The nav grows a hairline accent as soon as the page is scrolled — a small
   "you have left the top" signal rather than a decorative flourish. */
.lp-nav::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,122,0,.5),transparent);
  opacity:0; transition:opacity .3s ease;}
.lp-nav.scrolled::after{opacity:1;}

@media(prefers-reduced-motion:reduce){
  html.js .lp-mod,html.js .lp-card,html.js .lp-sec-card,html.js .lp-proof-stat{
    opacity:1 !important; transform:none !important; transition:none !important;}
  html.js .lp-hero .ms-glow{transform:translateX(-50%);}
  .lp-mod::after,.lp-card::after,.lp-sec-card::after{display:none;}
}

/* =================================================================
   Split login — monolith scene on one side, modern card on the other.
   Reuses the hero .ms scene so it's continuous with the landing page.
   ================================================================= */
.lp-login-body{margin:0; background:var(--bg); color:var(--ink); overflow:hidden;}
.lp-login{min-height:100vh; min-height:100dvh; display:grid;
  grid-template-columns:1.05fr .95fr; background:var(--bg);}

/* scene panel */
.lp-login-scene{position:relative; overflow:hidden; border-right:1px solid var(--line);}
.lp-login-scene .ms{position:absolute; inset:0;
  background:
    radial-gradient(95% 80% at 50% 116%, rgba(255,122,0,.5), rgba(255,90,0,.12) 32%, transparent 60%),
    linear-gradient(180deg,#060608 0%,#0a0a0e 45%,#140f0b 80%,#1b1206 100%);}
.lp-login-scene .ms-monolith{left:50%;}
.lp-login-scene .ms-glow{left:50%;}
.lp-login-scene .ms-ground{background:radial-gradient(70% 100% at 50% 100%, rgba(255,122,0,.38), transparent 60%);}
/* soft fade toward the form panel instead of the left-edge headline scrim */
.lp-login-scene .ms-scrim{background:linear-gradient(90deg, transparent 45%, rgba(6,6,8,.6) 100%);}
.lp-login-scene-copy{position:absolute; left:clamp(28px,4vw,60px); bottom:clamp(30px,6vw,64px);
  z-index:6; max-width:22ch;}
.lp-login-scene-copy h2{font-size:clamp(1.5rem,2.4vw,2.2rem); font-weight:840;}
.lp-login-scene-copy p{color:var(--muted); margin-top:12px; font-size:1.02rem; line-height:1.5;}

/* form panel + card */
.lp-login-panel{display:flex; align-items:center; justify-content:center;
  padding:clamp(28px,5vw,72px); position:relative; z-index:2;}
.lp-login-card{width:100%; max-width:410px;
  border:1px solid var(--line); border-radius:20px; padding:clamp(26px,3vw,38px);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  box-shadow:0 30px 80px rgba(0,0,0,.45);}
.lp-login-brand{display:flex; align-items:center; gap:11px; margin-bottom:26px;}
.lp-login-brand img{display:block; filter:drop-shadow(0 0 14px rgba(255,122,0,.45));}
.lp-login-brand span{font-weight:800; font-size:1.35rem; letter-spacing:.02em;}
.lp-login-card h1{font-size:1.55rem; font-weight:820;}
.lp-login-sub{color:var(--muted); font-size:.96rem; margin:6px 0 24px;}
.lp-login-note{font-size:.88rem; color:var(--muted); background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; margin-bottom:16px;}
.lp-login-note code{color:var(--accent); word-break:break-all;}
.lp-login-alert{font-size:.9rem; color:#ffd7c2; background:rgba(220,53,69,.14);
  border:1px solid rgba(220,53,69,.4); border-radius:10px; padding:10px 13px; margin-bottom:16px;}
.lp-field{margin-bottom:16px;}
.lp-field label{display:block; font-size:.84rem; color:var(--muted); margin-bottom:7px; font-weight:600;}
.lp-input{width:100%; padding:13px 15px; border-radius:12px; color:var(--ink); font-size:1rem;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  transition:border-color .15s, box-shadow .15s, background .15s; -webkit-appearance:none; appearance:none;}
.lp-input:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,122,0,.18); background:rgba(255,255,255,.06);}
select.lp-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239aa3ae' viewBox='0 0 16 16'%3E%3Cpath d='M1.6 4.6a.5.5 0 0 1 .7 0L8 10.3l5.6-5.7a.5.5 0 1 1 .8.8l-6 6a.5.5 0 0 1-.8 0l-6-6a.5.5 0 0 1 0-.8z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;}
.lp-field-err{color:#ff9a7a; font-size:.82rem; margin-top:6px;}
.lp-login-card .lp-btn{width:100%; margin-top:8px;}
.lp-login-foot{margin-top:18px; font-size:.9rem; color:var(--muted); text-align:center;}
.lp-login-foot a{color:var(--accent);}
.lp-login-foot a:hover{text-decoration:underline;}

/* Mobile: login centered, no scroll; the scene becomes a dimmed full-bg. */
@media(max-width:860px){
  .lp-login{grid-template-columns:1fr;}
  /* Full-screen monolith behind, but raised so the eye sits clearly ABOVE the
     card; card anchors to the bottom so it stays center-of-attention with no
     scroll. Scrim is light up top (monolith visible) and dark behind the card. */
  .lp-login-scene{position:fixed; inset:0; z-index:0; border:none;}
  .lp-login-scene-copy{display:none;}
  .lp-login-scene .ms-monolith{bottom:auto; top:1%; height:62%; width:clamp(132px,36vw,176px);}
  .lp-login-scene .ms-glow{bottom:auto; top:4%; height:48%; width:88%;}
  .lp-login-scene .ms-eye{width:clamp(56px,16vw,76px);}
  .lp-login-scene .ms-ground{opacity:.5;}
  .lp-login-scene .ms-scrim{background:linear-gradient(180deg,
    rgba(6,6,8,.18) 0%, rgba(6,6,8,.5) 46%, rgba(6,6,8,.9) 78%);}
  .lp-login-panel{min-height:100dvh; z-index:2; padding:20px; align-items:flex-end;}
  .lp-login-card{background:rgba(13,13,18,.8); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:0 30px 80px rgba(0,0,0,.7); margin-bottom:6px;}
}
/* Very short phones: keep everything in one screen — trim card padding. */
@media(max-width:860px) and (max-height:680px){
  .lp-login-scene .ms-monolith{height:52%;}
  .lp-login-card{padding:20px 18px;}
  .lp-login-brand{margin-bottom:16px;}
  .lp-login-sub{margin:6px 0 16px;}
}