/* OCULITH marketing landing (templates/landing.html). Standalone: no app CSS.
   The sign-in pages (static/login.css) reuse these tokens, the monolith and the smoke.

   Art direction: an obsidian page lit by one light source, the eye in the
   monolith, with smoke rising behind it; everything else reads like a spec
   sheet (numbered sections, hairline rules, survey marks, mono labels).
   Orange is the flashlight: CTAs, live states, the eye and the smoke's core,
   never large fills. Buttons are the platform's own flat control (.dv-btn in
   the app). Surfaces step up in lightness instead of casting shadows, borders
   are hairlines, and display type is tight and large against a quiet body.
   The hero smoke (WebGL, home.js) is the only continuous motion; everything
   else is transform/opacity (plus a few one-shot SVG stroke draws) that plays
   once on reveal, and all of it is switched off under prefers-reduced-motion. */

@font-face{font-family:"Geist"; src:url("fonts/geist-latin-wght-normal.a147f99cd533.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;}
@font-face{font-family:"Geist Mono"; src:url("fonts/geist-mono-latin-wght-normal.a15f9d568fb0.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;}
@font-face{font-family:"Instrument Serif"; src:url("fonts/instrument-serif-latin-400-italic.bc891bdd08ad.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;}
/* Metric-matched fallback so the swap to Geist doesn't shift the hero. */
@font-face{font-family:"Geist Fallback"; src:local("Arial"); size-adjust:104%; ascent-override:92%; descent-override:24%; line-gap-override:0%;}

:root{
  --bg:#08080a; --s1:#0d0d10; --s2:#121216; --s3:#18181d; --s4:#202027;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.11); --line3:rgba(255,255,255,.18);
  --ink:#f5f5f4; --ink2:#a6a6ae; --ink3:#8a8a93;   /* ink3 clears AA on --bg */
  --accent:#ff7a00; --accent2:#f26b1f; --accent-hi:#ffb066; --accent-hover:#ff8c1a;
  --surface-ui:#1b1e24; --line-ui:#23252b;   /* the app's control surface + border */
  --glow:rgba(255,122,0,.16);
  --ok:#3cc878; --ok-ink:#8fe6b4; --warn:#ffb877; --blue:#7cc4ff;
  --sans:"Geist","Geist Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px,4.5vw,48px);
  --maxw:1200px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%;}
body.hp{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; overflow-x:clip; font-feature-settings:"ss01","cv11";}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4,h5{margin:0; font-weight:600; line-height:1.06; letter-spacing:-.035em;}
p{margin:0;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font:inherit; color:inherit;}
.mono{font-family:var(--mono); letter-spacing:-.01em;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible{outline:2px solid var(--accent-hi); outline-offset:3px; border-radius:6px;}
::selection{background:rgba(255,122,0,.35); color:#fff;}

/* editorial serif italic: the one flourish, used for a single word per heading */
.hx-serif{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em;
  background:linear-gradient(100deg,#ffd3a3 0%,var(--accent-hi) 30%,var(--accent) 75%);
  -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em;}

/* ---------- page atmosphere ---------- */
.hp-grain{position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}
.hp-progress{position:fixed; left:0; right:0; top:0; height:2px; z-index:90; pointer-events:none;}
.hp-progress span{display:block; height:100%; transform-origin:0 50%; transform:scaleX(var(--prog,0));
  background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent-hi));}

/* ---------- buttons: the platform's own button (.dv-btn / .sv-btn in the app),
   copied so the site and the product read as one thing. Flat, hairline border,
   dark surface; the primary is solid accent with dark text. ---------- */
.hp-btn,.lp-btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.42rem; white-space:nowrap;
  height:34px; padding:0 .85rem; border-radius:9px; border:1px solid var(--line-ui); background:var(--surface-ui); color:var(--ink);
  font:inherit; font-size:.8rem; font-weight:600; letter-spacing:.01em; line-height:1; cursor:pointer; text-decoration:none;
  transition:transform .12s ease,box-shadow .18s ease,background .12s ease,color .12s ease,border-color .12s ease;}
.hp-btn svg,.lp-btn svg{width:14px; height:14px;}
.hp-btn:hover,.lp-btn:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line-ui)); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.35);}
.hp-btn:active,.lp-btn:active{transform:none;}
.hp-btn:focus-visible,.lp-btn:focus-visible{outline:none; border-radius:9px; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent);}
.hp-btn--lg,.lp-btn--lg{height:42px; padding:0 1.1rem; font-size:.9rem;}
.hp-btn--solid,.lp-btn--solid{background:var(--accent); border-color:var(--accent); color:#0b0b0c;}
.hp-btn--solid:hover,.lp-btn--solid:hover{background:var(--accent-hover); border-color:var(--accent-hover);}
.hp-btn--ghost{background:transparent;}
.hp-btn--quiet{background:transparent; border-color:transparent; color:var(--ink2);}
.hp-btn--quiet:hover{color:var(--ink); border-color:transparent; background:color-mix(in srgb,var(--accent) 8%,transparent); box-shadow:none;}

/* ---------- nav: a floating glass bar ---------- */
.hp-nav{position:fixed; top:0; left:0; right:0; z-index:80; padding:12px var(--gut) 0; pointer-events:none;}
.hp-nav-in{pointer-events:auto; max-width:var(--maxw); margin:0 auto; height:56px; display:flex; align-items:center; gap:20px;
  padding:0 8px 0 16px; border-radius:16px; border:1px solid transparent;
  transition:background .35s,border-color .35s,box-shadow .35s,backdrop-filter .35s;}
.hp-nav.scrolled .hp-nav-in{background:rgba(14,14,17,.66); border-color:var(--line);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 40px -20px rgba(0,0,0,.8);}
.hp-brand{display:inline-flex; align-items:center; gap:10px; font-weight:650; letter-spacing:.14em; font-size:.92rem;}
.hp-brand img{filter:drop-shadow(0 0 8px rgba(255,122,0,.25));}
.hp-links{display:flex; gap:4px; margin:0 auto;}
.hp-links a{padding:7px 12px; border-radius:8px; color:var(--ink2); font-size:.9rem; transition:color .2s,background .2s;}
.hp-links a:hover{color:var(--ink); background:rgba(255,255,255,.05);}
.hp-nav-cta{display:flex; align-items:center; gap:6px;}
@media(max-width:900px){ .hp-links{display:none;} .hp-nav-cta{margin-left:auto;} }
@media(max-width:420px){ .hp-nav-cta .hp-btn--solid{padding:0 .7rem;} .hp-nav-cta .hp-btn--quiet{padding:0 .55rem;} .hp-nav .hp-brand span{display:none;} }

/* =================================================================
   HERO
   ================================================================= */
.hx{position:relative; padding:clamp(104px,13vh,132px) 0 0; isolation:isolate; overflow-x:clip;}
.hx-sky{position:absolute; inset:0 0 -10%; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 78%, rgba(255,122,0,.13), transparent 70%),
    radial-gradient(40% 40% at 50% 0%, rgba(255,255,255,.04), transparent 70%);}
.hx-grid{position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px; background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 10%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 10%,transparent 75%);}

.hx-copy{position:relative; z-index:5; max-width:1000px; margin:0 auto; padding:0 var(--gut); text-align:center;}
.hx-pill{display:inline-flex; align-items:center; gap:10px; padding:4px 10px 4px 4px; margin-bottom:22px;
  border-radius:9px; border:1px solid var(--line-ui); background:var(--surface-ui);
  font-size:.8rem; font-weight:500; color:var(--ink2); transition:border-color .12s,color .12s;}
.hx-pill:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line-ui)); color:var(--ink);}
.hx-pill svg{width:13px; height:13px;}
.hx-pill-new{font-family:var(--mono); font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  padding:3px 7px; border-radius:6px; color:#0b0b0c; background:var(--accent);}
.hx-title{font-size:clamp(2.9rem,6.9vw,6rem); font-weight:580; letter-spacing:-.052em; line-height:.96;
  text-wrap:balance;}
.hx-line{display:block;}
.hx-title .w{display:inline-block;}
.hx-title .hx-serif{font-size:1.1em; line-height:.8; letter-spacing:-.02em;
  filter:drop-shadow(0 0 22px rgba(255,122,0,.2));}
.hx-sub{max-width:44rem; margin:22px auto 0; color:var(--ink2); font-size:clamp(1.02rem,1.45vw,1.18rem); line-height:1.6; text-wrap:pretty;}
.hx-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px;}

/* the stage: smoke, monolith, sight lines, telemetry chips. Fixed aspect so
   the SVG sight-lines (viewBox 1200x640) land on the chips at every width. */
.hx-stage{position:relative; z-index:1; width:min(var(--maxw),calc(100% - 2 * var(--gut))); margin:0 auto;
  aspect-ratio:1200/640; --ex:0; --ey:0;
  margin-top:calc(-1 * clamp(0px,3.4vw,48px));}
.hx-mono,.hx-reflect{position:absolute; left:50%; bottom:0; height:94%; aspect-ratio:440/640; transform:translateX(-50%);}
.hx-mono{z-index:3; filter:drop-shadow(0 40px 60px rgba(0,0,0,.85));}
.hx-mono-svg{display:block; width:100%; height:100%; overflow:visible;}
.hx-reflect{z-index:1; top:100%; bottom:auto; transform:translateX(-50%) scaleY(-1); opacity:.16; pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 34%); mask-image:linear-gradient(to top,#000 0%,transparent 34%);}
.hx-reflect .hx-eye-halo{display:none;}

/* eye: a steady light. The halo breathes slowly; the pupil follows the pointer
   (--ex/--ey from JS). No blink: the eye never closes on the job. */
.hx-eye-halo{opacity:.7;}
.hx-pupil{transform:translate(calc(var(--ex) * 1px),calc(var(--ey) * 1px)); transition:transform .5s cubic-bezier(.2,.8,.2,1);}

/* smoke rising behind the monolith. home.js draws it with a small WebGL shader
   (domain-warped noise) into .hx-smoke and sets .smoke-on on the stage; until
   then, and whenever WebGL is missing or JS is off, the static haze in
   .hx-smoke-fb stands in with the same colours. */
.hx-smoke,.hx-smoke-fb{position:absolute; z-index:0; left:-12%; right:-12%; top:-22%; bottom:-4%; pointer-events:none;}
.hx-smoke{width:124%; height:126%; opacity:0; transition:opacity 1.6s ease;}
.hx-stage.smoke-on .hx-smoke{opacity:1;}
.hx-stage.smoke-on .hx-smoke-fb{opacity:0;}
.hx-smoke-fb{transition:opacity 1.6s ease;
  background:
    radial-gradient(18% 26% at 50% 49%, rgba(255,122,0,.20), transparent 70%),
    radial-gradient(34% 44% at 47% 56%, rgba(122,46,0,.34), transparent 72%),
    radial-gradient(46% 38% at 55% 78%, rgba(60,24,4,.45), transparent 75%);
  filter:blur(18px);}

/* survey framing: registration marks on the stage corners and a datum at the
   horizon, the way a sheet marks its extents and its levels */
.hx-marks{position:absolute; z-index:2; inset:12% 2% 0; pointer-events:none;}
.hx-marks i{position:absolute; width:18px; height:18px; border:0 solid rgba(210,220,235,.28);}
.hx-marks i:nth-child(1){left:0; top:0; border-width:1px 0 0 1px;}
.hx-marks i:nth-child(2){right:0; top:0; border-width:1px 1px 0 0;}
.hx-marks i:nth-child(3){left:0; bottom:0; border-width:0 0 1px 1px;}
.hx-marks i:nth-child(4){right:0; bottom:0; border-width:0 1px 1px 0;}
.hx-datum{position:absolute; z-index:3; left:4%; bottom:10px; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3);}
.hx-datum svg{width:14px; height:14px; flex:none;}
.hx-horizon{position:absolute; z-index:2; left:-20%; right:-20%; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,150,70,.25) 20%,rgba(255,200,150,.95) 50%,rgba(255,150,70,.25) 80%,transparent);
  box-shadow:0 0 30px 6px rgba(255,122,0,.35);}
.hx-horizon::before{content:""; position:absolute; left:15%; right:15%; bottom:-120px; height:240px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,122,0,.34), transparent 70%); filter:blur(10px);}

.hx-lines{position:absolute; inset:0; z-index:2; width:100%; height:100%; overflow:visible; pointer-events:none;}
.hx-sight path{fill:none; stroke-width:1.2; stroke-dasharray:3 5;}

.hx-chip{position:absolute; z-index:4; left:var(--x); top:var(--y); display:flex; align-items:center; gap:10px;
  padding:8px 14px 8px 8px; border-radius:14px; white-space:nowrap;
  background:linear-gradient(180deg,rgba(26,26,31,.82),rgba(14,14,17,.82)); border:1px solid var(--line2);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px -14px rgba(0,0,0,.9);}
.hx-chip.l{transform:translate(-100%,-50%);}
.hx-chip.r{transform:translate(0,-50%);}
.hx-chip .ic{width:30px; height:30px; padding:6px; border-radius:9px; flex:none; color:var(--accent-hi);
  background:rgba(255,122,0,.1); box-shadow:inset 0 0 0 1px rgba(255,122,0,.22);}
.hx-chip span{display:flex; flex-direction:column; line-height:1.25;}
.hx-chip b{font-size:.8rem; font-weight:600; letter-spacing:-.01em;}
.hx-chip i{font-style:normal; font-family:var(--mono); font-size:.7rem; color:var(--ink2); display:inline-flex; align-items:center; gap:6px;}
.hx-chip i.up{color:var(--ok-ink);}
.live,.hp-live{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none;
  box-shadow:0 0 0 0 rgba(60,200,120,.5);}


/* =================================================================
   RIBBON, MANIFESTO
   ================================================================= */
.hp-ribbon{position:relative; z-index:2; margin-top:clamp(70px,9vw,120px); padding:26px 0 0; text-align:center;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(8,8,10,.4),var(--bg) 40%);}
.hp-ribbon-proof{color:var(--ink2); font-size:.92rem; padding:0 var(--gut);}
.hp-ribbon-proof .hp-live{margin-right:10px; vertical-align:1px;}
.hp-ribbon-proof b{color:var(--ink); font-weight:600;}
.hp-suite-list{max-width:960px; margin:20px auto 0; padding:0 var(--gut) 8px; display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 28px; font-family:var(--mono); font-size:.8rem; letter-spacing:.02em; color:var(--ink3);}

/* Plate I: four tenets beside the eye's compass construction (replaces the
   scroll-lit manifesto). The text is static; only the drawing builds, once. */
.tn-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(32px,6vw,96px); align-items:start;}
.tn-plate{position:sticky; top:96px; margin:0; border:1px solid var(--line2); border-radius:6px; background:#0b0b0e; overflow:hidden;}
.tn-plate-hd{display:flex; justify-content:space-between; padding:0 14px; min-height:34px; align-items:center; border-bottom:1px solid var(--line2);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3);}
.tn-plate figcaption{padding:12px 14px 14px; border-top:1px solid var(--line2); font-size:.84rem; line-height:1.5; color:var(--ink2);}
.tn-plate figcaption i{font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--ink); margin-right:6px;}
.tn-svg{display:block; width:100%; height:auto; padding:6px 10px 0;}
/* the plan: COMP1, level 1 */
.pl-grid{fill:none; stroke:rgba(124,196,255,.1); stroke-width:1; stroke-dasharray:8 3 2 3;}
.pl-bub{fill:#0b0b0e; stroke:rgba(210,220,235,.4); stroke-width:1;}
.pl-bt{font-family:var(--mono); font-size:8.5px; fill:var(--ink3); text-anchor:middle;}
.pl-wall{fill:#101115; stroke:rgba(215,225,240,.7); stroke-width:5; stroke-linejoin:miter;}
.pl-wall-in{fill:none; stroke:#101115; stroke-width:2.2; stroke-linejoin:miter;}
.pl-room{fill:none; stroke:rgba(215,225,240,.35); stroke-width:1;}
.pl-rt{font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; fill:var(--ink3); text-anchor:middle;}
.pl-crew{stroke:#08080a; stroke-width:1.5;}
.pl-a1{fill:#ff9a52;} .pl-a2{fill:#6fb4ff;} .pl-a3{fill:#c99bff;} .pl-a5{fill:#ffce6b;}
.pl-ct{font-family:var(--mono); font-size:8.5px; fill:var(--ink2);}
.pl-gear{fill:none; stroke:rgba(210,220,235,.5); stroke-width:1;}
.pl-gear.pl-done{fill:rgba(60,200,120,.35); stroke:#3cc878;}
.pl-lead{fill:none; stroke:rgba(255,176,102,.5); stroke-width:1;}
.pl-tag{font-family:var(--mono); font-size:9.5px; fill:var(--ok-ink); letter-spacing:.04em;}
.pl-tag2{font-family:var(--mono); font-size:8px; fill:var(--ink3);}
.pl-cloud{fill:rgba(255,80,60,.06); stroke:#ff6247; stroke-width:1.4;}
.pl-delta{fill:none; stroke:#ff6247; stroke-width:1.3;}
.pl-dt{font-family:var(--mono); font-size:8px; fill:#ff8a73; text-anchor:middle;}
.pl-trail{fill:none; stroke:var(--accent); stroke-width:1.6; stroke-dasharray:1;}
.pl-stop{fill:var(--accent); stroke:#08080a; stroke-width:1.5;}
.pl-tt{font-family:var(--mono); font-size:8.5px; fill:var(--accent-hi);}
.pl-lock{fill:rgba(255,90,40,.14); stroke:#ff8a4a; stroke-width:1;}
.pl-lt{font-family:var(--mono); font-size:8px; font-weight:600; fill:#ffb08a; text-anchor:middle;}
.pl-tb{fill:none; stroke:var(--line2); stroke-width:1;}
.pl-tbt{font-family:var(--mono); font-size:9px; letter-spacing:.1em; fill:var(--ink3);}
.pl-rev-c{fill:var(--accent-hi); opacity:0;}
.pl-north{fill:var(--accent-hi);}
.tn-lead{font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.5; color:var(--ink2); max-width:34rem; text-wrap:pretty;}
.tn-list{margin-top:clamp(28px,4vw,48px); border-top:1px solid var(--line2);}
.tn-item{display:grid; grid-template-columns:clamp(56px,7vw,92px) 1fr; gap:10px; padding:clamp(26px,4vw,44px) 0; border-bottom:1px solid var(--line2);}
.tn-n{font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1; color:var(--accent-hi); padding-top:.2em;}
.tn-item h3{font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(2.2rem,4.6vw,3.9rem); line-height:1; letter-spacing:-.015em; color:var(--ink);}
.tn-item p{margin-top:14px; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); line-height:1.7;}
/* the sheet fills in step by step (JS raises data-step, one per tenet); with
   JS off it is simply complete. The trail draws in; everything else fades. */
html.js .tn-plate .st > *{opacity:0; transition:opacity .7s ease;}
html.js .tn-plate .pl-trail{stroke-dashoffset:1; transition:stroke-dashoffset 1.4s var(--ease);}
html.js .tn-plate .pl-done{opacity:0; transition:opacity .6s ease .5s;}
html.js .tn-plate[data-step="1"] .st1 > *,
html.js .tn-plate[data-step="2"] :is(.st1,.st2) > *,
html.js .tn-plate[data-step="3"] :is(.st1,.st2,.st3) > *,
html.js .tn-plate[data-step="4"] .st > *{opacity:1;}
html.js .tn-plate:is([data-step="2"],[data-step="3"],[data-step="4"]) .pl-done{opacity:1;}
html.js .tn-plate[data-step="4"] .pl-trail{stroke-dashoffset:0;}
/* the title block's revision moves to C with the cloud */
.pl-rev-b,.pl-rev-c{transition:opacity .5s ease .4s;}
html:not(.js) .pl-rev-b,.tn-plate:is([data-step="3"],[data-step="4"]) .pl-rev-b{opacity:0;}
html:not(.js) .pl-rev-c,.tn-plate:is([data-step="3"],[data-step="4"]) .pl-rev-c{opacity:1;}
@media(max-width:900px){
  .tn-grid{grid-template-columns:1fr;}
  .tn-plate{position:relative; top:0; max-width:460px;}
}

/* =================================================================
   SECTIONS
   ================================================================= */
.hp-section{position:relative; max-width:calc(var(--maxw) + 2 * var(--gut)); margin:0 auto; padding:clamp(70px,10vw,140px) var(--gut);}
.hp-section::before{content:""; position:absolute; top:0; left:var(--gut); right:var(--gut); height:1px;
  background:linear-gradient(90deg,transparent,var(--line2) 20%,var(--line2) 80%,transparent);}
.hp-head{max-width:760px; margin:0 auto clamp(40px,5.5vw,72px); text-align:center;}
.hp-kicker{display:inline-block; margin-bottom:18px; text-wrap:balance; line-height:1.9;
  font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-hi);}
/* section numbers as drawing bubbles with a short leader, like a detail tag */
.hp-kicker em,.lp-kicker em{position:relative; display:inline-grid; place-items:center; width:28px; height:28px; margin-right:32px; vertical-align:middle;
  border:1px solid var(--line3); border-radius:50%; font-style:normal; font-size:.66rem; letter-spacing:0; color:var(--ink2);}
.hp-kicker em::after,.lp-kicker em::after{content:""; position:absolute; left:calc(100% + 6px); top:50%; width:18px; height:1px; background:var(--line3);}
.hp-head h2{font-size:clamp(2.1rem,4.6vw,3.9rem); font-weight:580; letter-spacing:-.045em; text-wrap:balance;}
.hp-head h2 .hx-serif{font-size:1.08em;}
.hp-head p{margin:18px auto 0; max-width:36rem; color:var(--ink2); font-size:1.08rem; text-wrap:pretty;}

/* ---------- bento ---------- */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:16px;}
.bx{position:relative; grid-column:span 4; display:flex; flex-direction:column; min-width:0; overflow:hidden;
  border-radius:22px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--s2),var(--s1) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .4s,transform .5s var(--ease);}
.bx--w7{grid-column:span 7;} .bx--w5{grid-column:span 5;} .bx--w6{grid-column:span 6;} .bx--w4{grid-column:span 4;}
.bx:hover{border-color:var(--line2);}
/* cursor spotlight on the face + a lit hairline border that follows it */
.bx::before,.sc-card::before,.su-app::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,122,0,.075), transparent 60%);}
.bx::after,.sc-card::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; padding:1px; opacity:0; transition:opacity .4s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%), rgba(255,150,70,.7), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);}
.bx:hover::before,.bx:hover::after,.sc-card:hover::before,.sc-card:hover::after,.su-app:hover::before{opacity:1;}
.bx-vis{position:relative; z-index:1; height:230px; padding:18px 18px 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent); mask-image:linear-gradient(180deg,#000 72%,transparent);}
.bx--w7 .bx-vis,.bx--w5 .bx-vis{height:270px;}
.bx-txt{position:relative; z-index:1; padding:6px 26px 28px;}
.bx-tag{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin-bottom:12px;}
.bx-tag em{font-style:normal; color:var(--accent-hi);}
.bx h3{font-size:clamp(1.3rem,1.9vw,1.62rem); font-weight:590; letter-spacing:-.035em;}
.bx p{margin-top:10px; color:var(--ink2); font-size:.97rem; line-height:1.55;}
.bx ul{margin-top:18px; display:grid; gap:9px; border-top:1px solid var(--line); padding-top:16px;}
.bx li{position:relative; padding-left:20px; font-size:.9rem; line-height:1.45; color:#d5d5d8;}
.bx li::before{content:""; position:absolute; left:2px; top:.52em; width:6px; height:6px; transform:rotate(45deg);
  border:1.5px solid var(--accent); border-radius:1px;}
@media(max-width:1020px){
  .bento{grid-template-columns:1fr 1fr;}
  .bx,.bx--w4,.bx--w5,.bx--w6{grid-column:span 1;}
  .bx--w7,.bx:last-child{grid-column:span 2;}
}
@media(max-width:680px){
  .bento{grid-template-columns:1fr; gap:14px;}
  .bx,.bx--w7,.bx:last-child{grid-column:auto;}
  .bx-vis,.bx--w7 .bx-vis,.bx--w5 .bx-vis{height:220px; padding:14px 14px 0;}
  .bx-txt{padding:4px 20px 22px;}
  .v-cd .rl,.v-cd .nm{display:none;}
  .v-board{gap:6px;} .v-col{padding:6px;}
}

/* ---------- abstract product visuals (partials/_home_visual.html) ---------- */
.v{height:100%; display:flex; flex-direction:column; gap:10px; padding:0 12px 12px; font-size:11px; color:var(--ink2);
  border-radius:12px; border:1px solid var(--line); background:linear-gradient(180deg,#0f0f13,#0a0a0d);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);}
.v-bar{display:flex; align-items:center; gap:8px; margin:0 -12px; padding:9px 12px; border-bottom:1px solid var(--line); flex:none;}
.v-bar::before{content:""; width:28px; height:7px; flex:none; background:
  radial-gradient(circle at 3.5px 3.5px,#3a3a42 3.2px,transparent 3.6px),
  radial-gradient(circle at 13.5px 3.5px,#3a3a42 3.2px,transparent 3.6px),
  radial-gradient(circle at 23.5px 3.5px,#3a3a42 3.2px,transparent 3.6px);}
.v-tt{font-weight:600; color:#d8d8dc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.v-seg{margin-left:auto; display:inline-flex; padding:2px; border-radius:7px; background:rgba(255,255,255,.04); border:1px solid var(--line); flex:none;}
.v-seg b{font-size:9.5px; font-weight:600; padding:1px 7px; border-radius:5px;}
.v-seg b.on{background:var(--accent); color:#160a01;}
.v-seg+.v-live{margin-left:8px;}
.v-live{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:10px; white-space:nowrap; flex:none;}
.v-live em{width:6px; height:6px; border-radius:50%; background:var(--ok);}
.v-live span{color:var(--ink); font-weight:650;}
.v-lgd{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:9.5px; white-space:nowrap;}
.v-lgd em{width:10px; height:3px; border-radius:2px; margin-left:4px;}
.v-lgd .k1{background:var(--accent);} .v-lgd .k2{background:var(--ink2);}
.v-lgd .k3,.v-stack .s1{background:rgba(255,255,255,.18);} .v-lgd .k4,.v-stack .s2{background:rgba(255,122,0,.55);} .v-lgd .k5,.v-stack .s3{background:linear-gradient(90deg,var(--accent),var(--accent-hi));}
.v-find{margin-left:auto; font-size:9.5px; padding:2px 9px; border-radius:6px; border:1px solid var(--line); background:rgba(255,255,255,.03); white-space:nowrap;}
.nm{display:inline-block; height:6px; border-radius:4px; background:rgba(255,255,255,.16); flex:none;}
.nm.w1{width:30px;} .nm.w2{width:46px;} .nm.w3{width:62px;}
.av{width:18px; height:18px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25);}
.av.a1{background:#ff9a52;} .av.a2{background:#6fb4ff;} .av.a3{background:#7ee0a8;} .av.a4{background:#c99bff;} .av.a5{background:#ffce6b;} .av.a6{background:#ff8a8a;} .av.a7{background:#8ecbff;}
.rl{margin-left:auto; font-style:normal; font-family:var(--mono); font-size:8.5px; padding:1px 5px; border-radius:4px; background:rgba(255,255,255,.06);}
.pill{display:inline-flex; align-items:center; font-style:normal; font-size:9.5px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap;
  color:var(--ink2); background:rgba(255,255,255,.06);}
.pill.ok{color:var(--ok-ink); background:rgba(60,200,120,.14);}
.pill.go{color:var(--warn); background:rgba(255,122,0,.15);}
.pill.warn{color:#ffc69a; background:rgba(255,90,40,.16);}
.chip{font-style:normal; font-size:9px; padding:2px 7px; border-radius:6px; border:1px solid var(--line); background:rgba(255,255,255,.03); white-space:nowrap;}
.chip.warn{color:var(--warn); border-color:rgba(255,122,0,.3); background:rgba(255,122,0,.07);}

.v-board{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; flex:1; min-height:0;}
.v-col{display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.015); min-width:0;}
.v-col--bench{border-color:rgba(255,122,0,.2); background:rgba(255,122,0,.04);}
.v-ch{display:flex; justify-content:space-between; font-size:9.5px; font-weight:650; color:#d8d8dc;}
.v-ch b{font-family:var(--mono); color:var(--accent-hi); font-weight:500;}
.v-cd{display:flex; align-items:center; gap:6px; padding:5px; border-radius:7px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); box-shadow:inset 2px 0 0 var(--accent);}
.v-cd .av{width:16px; height:16px;}
.v-cd--drag{box-shadow:inset 2px 0 0 var(--accent),0 0 0 1px rgba(255,122,0,.45),0 10px 20px -6px rgba(255,122,0,.35);}

.v-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.v-kpis div{padding:7px 9px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.02); display:flex; flex-direction:column;}
.v-kpis b{font-size:17px; font-weight:650; color:var(--ink); letter-spacing:-.03em; line-height:1.1;}
.v-kpis .up b{color:var(--ok-ink);}
.v-kpis span{font-size:9px;}
.v-plot{width:100%; flex:1; min-height:0;}
.v-actual{stroke-dasharray:100; stroke-dashoffset:0; filter:drop-shadow(0 0 6px rgba(255,122,0,.6));}
.v-xaxis{display:flex; justify-content:space-between; font-family:var(--mono); font-size:8.5px; color:var(--ink3);}

.v-rows{display:flex; flex-direction:column; gap:7px;}
.v-r{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.018);}
.v-r .nm{flex:1; max-width:90px;}
.v-r > em:last-child,.v-r .v-prog{margin-left:auto;}
.v-r .mono{font-style:normal; font-size:9.5px; color:var(--ink3); width:36px; flex:none;}
.v-tl{display:flex; align-items:center; gap:6px; margin-top:auto; font-family:var(--mono); font-size:8.5px; color:var(--ink3); white-space:nowrap;}
.v-tl i{flex:1; height:1px; background:linear-gradient(90deg,var(--accent),rgba(255,122,0,.2));}
.v-tl .on{color:var(--accent-hi);}
.v-prog{width:64px; height:5px; border-radius:9px; background:rgba(255,255,255,.07); overflow:hidden; flex:none;}
.v-prog b{display:block; height:100%; width:var(--p); border-radius:9px; background:linear-gradient(90deg,var(--accent),var(--accent-hi)); transform-origin:left;}

.v-kan{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; flex:1; min-height:0;}
.v-k{display:flex; flex-direction:column; gap:6px; padding:7px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.015); min-width:0;}
.v-k.on{border-color:rgba(60,200,120,.25); background:rgba(60,200,120,.04);}
.v-kh{font-family:var(--mono); font-size:8.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.v-kc{display:block; height:26px; border-radius:6px; border:1px solid var(--line2); background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); box-shadow:inset 2px 0 0 var(--accent);}
.v-kc.s{height:18px; opacity:.6;}
.v-kc.ok{box-shadow:inset 2px 0 0 var(--ok);}
.v-kc--move{box-shadow:inset 2px 0 0 var(--accent),0 0 0 1px rgba(255,122,0,.4),0 8px 18px -6px rgba(255,122,0,.4);}

.v-inst{display:flex; flex-direction:column; gap:9px;}
.v-ir{display:grid; grid-template-columns:44px 1fr 32px; align-items:center; gap:9px;}
.v-ir .mono{font-size:9.5px;}
.v-ir em{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--ink); text-align:right;}
.v-stack{position:relative; height:10px; border-radius:6px; background:rgba(255,255,255,.05); overflow:hidden;}
.v-stack b{position:absolute; left:0; top:0; bottom:0; width:var(--p); border-radius:6px; transform-origin:left;}
.v-phase{display:flex; align-items:center; gap:8px; margin-top:auto; padding:8px 9px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.02);}
.v-phase .mono{font-size:9.5px; color:var(--ink);}
.v-ph{position:relative; flex:1; height:16px; border-radius:4px; background:rgba(255,255,255,.05); overflow:hidden;}
.v-ph b{position:absolute; inset:0 auto 0 0; width:var(--p); background:rgba(124,196,255,.35); transform-origin:left;}
.v-ph i{position:absolute; left:6px; top:50%; transform:translateY(-50%); font-style:normal; font-family:var(--mono); font-size:8.5px; color:#dbeeff;}

.v-assets{display:flex; flex-direction:column; gap:8px;}
.v-scan{display:flex; align-items:center; gap:12px; padding:9px; border-radius:10px; border:1px solid rgba(255,122,0,.22); background:rgba(255,122,0,.04);}
.v-scanmeta{display:flex; flex-direction:column; gap:3px; align-items:flex-start;}
.v-scanmeta b{color:var(--ink); font-size:12px;}
.v-scanmeta span{font-size:10px;}

.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:22px; height:22px; border-radius:4px;}
.mk-qr.md{width:92px; height:92px; border-radius:8px; padding:4px;}
.mk-qr.big{width:54px; height:54px;}
.mk-qr.hero{width:120px; height:120px; border-radius:12px; padding:7px;
  box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,122,0,.3),0 0 50px rgba(255,122,0,.18);}
.mk-qr .beam{position:absolute; left:0; right:0; height:34%; top:-40%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,122,0,.85),transparent); mix-blend-mode:multiply;}

.v-gates{display:flex; align-items:center; gap:0; padding:18px 4px 6px;}
.v-gates > i{flex:1; height:2px; background:var(--ok);}
.v-gates > i.dim{background:var(--line2);}
.v-g{width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; border:1.5px solid var(--line2); background:#0c0c0f;}
.v-g b{font-family:var(--mono); font-size:9.5px; font-weight:500;}
.v-g.done{border-color:var(--ok); background:rgba(60,200,120,.14); color:var(--ok-ink);}
.v-g.now{border-color:var(--accent); color:var(--accent-hi); box-shadow:0 0 0 5px rgba(255,122,0,.1),0 0 18px rgba(255,122,0,.45);}
.v-sign{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding:8px 10px; border-radius:8px; border:1px dashed var(--line2);}
.v-sig{color:#e8e8ea; width:120px; height:30px;}
.v-sig svg{width:100%; height:100%;}
.v-sig path{stroke-dasharray:100; stroke-dashoffset:0;}

.v-split{display:grid; grid-template-columns:1.1fr 1fr; gap:10px; flex:1; min-height:0;}
.v-steps{display:flex; flex-direction:column; justify-content:center; gap:14px;}
.v-st{position:relative; display:flex; align-items:center; gap:10px; font-size:10.5px;}
.v-st b{width:16px; height:16px; border-radius:50%; flex:none; border:1.5px solid var(--line2); background:#0c0c0f; position:relative; z-index:1;}
.v-st:not(:last-child)::after{content:""; position:absolute; left:7.5px; top:17px; height:14px; width:1.5px; background:var(--ok);}
.v-st.done b{border-color:var(--ok); background:var(--ok);}
.v-st.done b::after{content:""; position:absolute; left:4px; top:2px; width:4px; height:7px; border:solid #0a0a0c; border-width:0 1.8px 1.8px 0; transform:rotate(45deg);}
.v-st.now b{border-color:var(--accent); box-shadow:0 0 0 4px rgba(255,122,0,.12);}
.v-st.done span{color:#d8d8dc;}
.v-lock{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border-radius:10px; border:1px solid rgba(255,90,40,.28);
  background:repeating-linear-gradient(-45deg,rgba(255,90,40,.06) 0 8px,transparent 8px 16px); color:#ff8a4a;}
.v-lock svg{width:26px; height:32px;}
.v-lock .mono{font-size:9.5px; color:var(--ink);}

.v-fleet{display:flex; flex-direction:column; gap:8px;}
.v-fr{display:flex; align-items:center; gap:10px; padding:6px 9px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.018);}
.v-fr .mono{font-size:10px; color:var(--ink);}
.v-fr .chip{margin-left:auto;}
.v-ring{width:30px; height:30px; transform:rotate(-90deg); flex:none;}
.v-ring circle{fill:none; stroke-width:4; stroke:rgba(255,255,255,.08);}
.v-ring .fg{stroke:var(--ok); stroke-linecap:round; stroke-dasharray:var(--pct) 100;}
.v-ring.warn .fg{stroke:var(--accent);}

/* ---------- DrawingVault showcase ---------- */
.dv-stage{position:relative; max-width:1100px; margin:0 auto; border-radius:20px; border:1px solid var(--line2); overflow:hidden;
  background:var(--s1); box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.6),0 0 120px -40px rgba(255,122,0,.16);}
.dv-stage::before{content:""; position:absolute; left:10%; right:10%; top:0; height:1px; z-index:5;
  background:linear-gradient(90deg,transparent,rgba(255,170,90,.8),transparent);}
.dv-chrome{display:flex; align-items:center; gap:14px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--s2);}
.dv-tabs{display:flex; gap:4px;}
.dv-tabs b{font-family:var(--mono); font-size:.72rem; font-weight:500; padding:4px 10px; border-radius:7px; color:var(--ink3);}
.dv-tabs b.on{color:var(--ink); background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px var(--line2);}
.dv-tools{display:flex; gap:5px; margin:0 auto;}
.dv-tools i{width:24px; height:24px; border-radius:7px; background:rgba(255,255,255,.04); border:1px solid var(--line);}
.dv-tools i.on{background:rgba(255,122,0,.16); border-color:rgba(255,122,0,.45);}
.dv-rev .pill{font-size:.72rem; padding:3px 10px;}
.dv-cmp{position:relative; aspect-ratio:800/520; background:#0c0f14; --cmp:46%;}
.dv-layer{position:absolute; inset:0;}
.dv-layer--b{clip-path:inset(0 calc(100% - var(--cmp)) 0 0);}
.dv-layer--b .sh-paper{fill:#0f0d0d;}
.sh{display:block; width:100%; height:100%;}
.sh-paper{fill:#0c0f14;}
.sh-frame{fill:none; stroke:rgba(190,205,225,.28); stroke-width:1;}
.sh-gridl line{stroke:rgba(124,196,255,.13); stroke-width:1; stroke-dasharray:10 4 2 4;}
.sh-bub circle{fill:#0c0f14; stroke:rgba(190,205,225,.5);}
.sh-bub text,.sh-gear text,.sh-tb text,.sh-dim text,.sh-delta text{font-family:var(--mono); font-size:10px; fill:rgba(210,220,235,.72); text-anchor:middle;}
.sh-wall rect,.sh-wall path{fill:none; stroke:rgba(215,225,240,.62); stroke-width:3;}
.sh-door path{fill:none; stroke:rgba(215,225,240,.35); stroke-width:1;}
.sh-gear rect{stroke-width:1.4;}
.st-done{fill:rgba(60,200,120,.3); stroke:#3cc878;}
.st-prog{fill:rgba(255,122,0,.28); stroke:var(--accent);}
.st-none{fill:rgba(255,255,255,.02); stroke:rgba(210,220,235,.45);}
.sh-feed{fill:none; stroke:rgba(255,160,80,.55); stroke-width:1.4; stroke-dasharray:6 4;}
.sh-cloud{fill:rgba(255,80,60,.05); stroke:#ff6247; stroke-width:1.8; stroke-dasharray:100; stroke-dashoffset:0;}
.sh-delta path{fill:none; stroke:#ff6247; stroke-width:1.5;}
.sh-delta text{fill:#ff8a73; font-size:10px;}
.sh-dim path{fill:none; stroke:var(--blue); stroke-width:1.4;}
.sh-dim-l{stroke-dasharray:100; stroke-dashoffset:0;}
.sh-dim rect{fill:#0c0f14; stroke:var(--blue); stroke-width:1;}
.sh-dim text{fill:#cfe8ff; font-size:11px;}
.sh-pin circle{fill:var(--accent);}
.sh-pin .sh-pin-ring{fill:rgba(255,122,0,.2); transform-box:fill-box; transform-origin:center;}
.sh-pin path{fill:#160a01;}
.sh-void{font-family:var(--sans); font-size:62px; font-weight:800; letter-spacing:.08em; fill:rgba(255,70,70,.2); text-anchor:middle;}
.sh-tb rect,.sh-tb path{fill:none; stroke:rgba(190,205,225,.45);}
.sh-tb text{text-anchor:start; font-size:9px;}
.sh-tb .sh-tb-num{font-size:15px; fill:#eef3fa; font-weight:600;}
.sh-tb .sh-tb-rev{font-size:24px; fill:var(--accent-hi); font-weight:600;}
.sh--b .sh-tb .sh-tb-rev{fill:#ff7070;}
.dv-handle{position:absolute; z-index:3; top:0; bottom:0; left:var(--cmp); width:2px; transform:translateX(-1px); pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--accent-hi) 12%,var(--accent-hi) 88%,transparent); box-shadow:0 0 18px rgba(255,122,0,.8);}
.dv-handle span{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  color:#160a01; background:linear-gradient(180deg,#ffa04d,var(--accent)); box-shadow:0 0 0 5px rgba(255,122,0,.2),0 10px 24px rgba(0,0,0,.6);}
.dv-handle svg{width:18px; height:18px;}
.dv-cmp:has(input:focus-visible) .dv-handle span{outline:2px solid #fff; outline-offset:3px;}
.dv-range{position:absolute; inset:0; z-index:4; margin:0;}
.dv-range input{width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent;}
.dv-lbl{position:absolute; z-index:3; top:12px; font-family:var(--mono); font-size:.7rem; padding:3px 9px; border-radius:6px; pointer-events:none;
  background:rgba(8,8,10,.75); border:1px solid var(--line2);}
.dv-lbl--b{left:12px; color:#ff9a9a;} .dv-lbl--c{right:12px; color:var(--ok-ink);}
.dv-thread{position:absolute; z-index:3; left:53%; top:58%; display:flex; align-items:center; gap:9px; padding:7px 12px 7px 7px; border-radius:12px 12px 12px 3px;
  background:rgba(20,20,25,.92); border:1px solid var(--line2); box-shadow:0 14px 30px -10px rgba(0,0,0,.9); pointer-events:none;}
.dv-thread span:last-child{display:flex; flex-direction:column; line-height:1.3;}
.dv-thread b{font-size:.76rem; font-weight:600;}
.dv-thread i{font-style:normal; font-family:var(--mono); font-size:.66rem; color:var(--ink3);}
.dv-legend{display:flex; justify-content:center; gap:20px; padding:10px 14px; border-top:1px solid var(--line); background:var(--s2);
  font-family:var(--mono); font-size:.7rem; color:var(--ink2);}
.dv-legend span{display:inline-flex; align-items:center; gap:7px;}
.dv-legend i{width:12px; height:12px; border-radius:3px; border:1.4px solid;}
.dv-legend i.st-done{background:rgba(60,200,120,.3); border-color:var(--ok);}
.dv-legend i.st-prog{background:rgba(255,122,0,.28); border-color:var(--accent);}
.dv-legend i.st-none{border-color:rgba(210,220,235,.45);}
.dv-points{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; max-width:1100px; margin:clamp(36px,5vw,56px) auto 0;
  border-radius:18px; overflow:hidden; border:1px solid var(--line);}
/* hairlines come from each cell, so a cell still waiting to reveal leaves no grey block */
.dv-pt{padding:24px 24px 26px; background:var(--bg); box-shadow:0 0 0 1px var(--line); transition:background .3s;}
.dv-pt:hover{background:var(--s1);}
.dv-pt h4{font-size:1.02rem; font-weight:600; letter-spacing:-.02em; display:flex; align-items:center; gap:10px;}
.dv-pt h4::before{content:""; width:6px; height:6px; transform:rotate(45deg); background:var(--accent); flex:none;}
.dv-pt p{margin-top:8px; color:var(--ink2); font-size:.93rem; line-height:1.55;}
@media(max-width:900px){ .dv-points{grid-template-columns:1fr 1fr;} .dv-tools{display:none;} .dv-chrome{justify-content:space-between;} }
@media(max-width:600px){
  .dv-points{grid-template-columns:1fr;}
  .dv-thread{display:none;}
  .dv-legend{gap:12px; font-size:.64rem;}
  .dv-tabs b:not(.on){display:none;}
  .dv-stage{border-radius:14px;}
}

/* ---------- connected flow ---------- */
.cx-flow{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1100px; margin:0 auto; counter-reset:cx;}
.cx-flow::before{content:""; position:absolute; left:12.5%; right:12.5%; top:32px; height:1px;
  background:linear-gradient(90deg,rgba(255,122,0,.15),rgba(255,122,0,.5),rgba(255,122,0,.15));}
.cx-flow::after{content:""; position:absolute; top:28px; left:12.5%; width:9px; height:9px; margin-left:-4px; border-radius:50%; opacity:0;
  background:#ffd2a8; box-shadow:0 0 12px 3px rgba(255,140,40,.9),0 0 30px 8px rgba(255,122,0,.4);}
.cx-step{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; counter-increment:cx;}
.cx-node{position:relative; z-index:1; width:64px; height:64px; border-radius:18px; display:grid; place-items:center; color:var(--accent-hi);
  background:linear-gradient(180deg,var(--s3),var(--s1)); border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 40px -18px rgba(0,0,0,.9);}
.cx-node .ic{width:26px; height:26px;}
.cx-node::after{content:""; position:absolute; inset:-1px; border-radius:inherit; opacity:0;
  box-shadow:0 0 0 1px rgba(255,150,60,.8),0 0 28px rgba(255,122,0,.55);}
.cx-app{margin-top:16px; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-hi);}
.cx-app::before{content:counter(cx,decimal-leading-zero) "  "; color:var(--ink3);}
.cx-step p{margin-top:8px; max-width:15rem; font-size:1rem; line-height:1.45; color:#dcdce0;}
@media(max-width:820px){
  .cx-flow{grid-template-columns:1fr; gap:26px; max-width:460px;}
  .cx-flow::before{left:32px; right:auto; top:32px; bottom:32px; width:1px; height:auto;
    background:linear-gradient(180deg,rgba(255,122,0,.15),rgba(255,122,0,.5),rgba(255,122,0,.15));}
  .cx-flow::after{display:none;}
  .cx-step{display:grid; grid-template-columns:64px 1fr; column-gap:18px; text-align:left; align-items:start;}
  .cx-node{grid-row:span 2;}
  .cx-app{margin-top:8px;}
  .cx-step p{margin-top:4px;}
}

/* ---------- Oculith Field ---------- */
.fd-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px,6vw,96px); align-items:center;}
.fd-copy h2{font-size:clamp(2.1rem,4.4vw,3.6rem); font-weight:580; letter-spacing:-.045em;}
.fd-copy > p{margin-top:18px; color:var(--ink2); font-size:1.08rem; max-width:32rem;}
.fd-list{margin-top:28px; display:grid; gap:0; border-top:1px solid var(--line);}
.fd-list li{position:relative; padding:14px 0 14px 30px; border-bottom:1px solid var(--line); color:#dcdce0; font-size:.98rem;}
.fd-list li::before{content:""; position:absolute; left:4px; top:21px; width:8px; height:8px; border-radius:2px; transform:rotate(45deg);
  background:var(--accent);}
.fd-qr{display:flex; align-items:center; gap:20px; margin-top:30px; padding:16px; border-radius:18px; border:1px solid var(--line2);
  background:linear-gradient(135deg,rgba(255,122,0,.07),rgba(255,255,255,.015) 55%);}
.fd-qr > span{font-size:.92rem; color:var(--ink2); line-height:1.5;}
.fd-qr b{display:block; color:var(--ink); font-weight:600; margin-bottom:4px;}
.fd-phone-wrap{position:relative; display:grid; place-items:center; perspective:1600px; padding:20px 0;}
.fd-glow{position:absolute; z-index:0; width:80%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,0,.14), transparent 62%); filter:blur(20px);}
.fd-phone{position:relative; z-index:1; width:292px; height:600px; border-radius:48px; padding:12px;
  background:linear-gradient(145deg,#2a2a31,#0b0b0e 40%,#16161b);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 6px #050506,0 50px 100px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.8);
  transform:rotateY(-16deg) rotateX(6deg) rotateZ(1deg); transition:transform 1s var(--ease);}
.fd-phone-wrap:hover .fd-phone{transform:rotateY(-4deg) rotateX(2deg);}
.fd-phone::before{content:""; position:absolute; inset:12px; border-radius:37px; background:#08080a; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);}
.fd-notch{position:absolute; z-index:5; top:22px; left:50%; width:92px; height:26px; border-radius:20px; background:#000; transform:translateX(-50%);}
.fd-status{position:absolute; z-index:4; top:24px; left:34px; right:34px; display:flex; justify-content:space-between; font-size:.72rem; font-weight:600;}
.fd-sig{display:flex; align-items:flex-end; gap:2px;}
.fd-sig i{width:3px; border-radius:1px; background:var(--ink);}
.fd-sig i:nth-child(1){height:5px;} .fd-sig i:nth-child(2){height:8px;} .fd-sig i:nth-child(3){height:11px; opacity:.35;}
.fd-screens{position:absolute; inset:62px 24px 76px;}
.fd-scr{position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; opacity:0; transform:translateY(10px) scale(.985); pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease); font-size:12px; color:var(--ink2);}
.fd-phone[data-screen="0"] .fd-scr[data-i="0"],.fd-phone[data-screen="1"] .fd-scr[data-i="1"],
.fd-phone[data-screen="2"] .fd-scr[data-i="2"],.fd-phone[data-screen="3"] .fd-scr[data-i="3"]{opacity:1; transform:none;}
.fd-h{display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--line);}
.fd-h b{font-size:1.05rem; color:var(--ink); font-weight:620; letter-spacing:-.02em;}
.fd-row{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid var(--line);}
.fd-row .av{width:24px; height:24px;}
.fd-tog{margin-left:auto; width:34px; height:20px; border-radius:20px; background:rgba(255,255,255,.1); position:relative; transition:background .3s;}
.fd-tog i{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#d8d8dc; transition:transform .3s var(--ease);}
.fd-tog.on{background:var(--ok);} .fd-tog.on i{transform:translateX(14px); background:#fff;}
.fd-tog.late{background:var(--accent);} .fd-tog.late i{transform:translateX(7px); background:#fff;}
.fd-foot{margin-top:auto; font-family:var(--mono); font-size:.66rem; color:var(--ink3); text-align:center;}
.fd-view{position:relative; flex:1; display:grid; place-items:center; border-radius:16px; background:radial-gradient(circle,#15151a,#08080a);}
.fd-cor{position:absolute; inset:22% 18%; border-radius:14px;
  background:
    linear-gradient(var(--accent),var(--accent)) top left/22px 3px no-repeat, linear-gradient(var(--accent),var(--accent)) top left/3px 22px no-repeat,
    linear-gradient(var(--accent),var(--accent)) top right/22px 3px no-repeat, linear-gradient(var(--accent),var(--accent)) top right/3px 22px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom left/22px 3px no-repeat, linear-gradient(var(--accent),var(--accent)) bottom left/3px 22px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom right/22px 3px no-repeat, linear-gradient(var(--accent),var(--accent)) bottom right/3px 22px no-repeat;
  filter:drop-shadow(0 0 6px rgba(255,122,0,.8));}
.fd-res{display:flex; flex-direction:column; gap:4px; align-items:flex-start; padding:11px 12px; border-radius:14px; background:rgba(60,200,120,.06); border:1px solid rgba(60,200,120,.25);}
.fd-res b{color:var(--ink); font-size:.95rem;}
.fd-sheet{position:relative; flex:1; border-radius:12px; overflow:hidden; border:1px solid var(--line2); background:#0c0f14;}
.fd-sheet .sh{position:absolute; top:0; left:50%; height:100%; width:auto; aspect-ratio:800/520; transform:translateX(-56%) scale(1.25); transform-origin:50% 60%;}
.fd-track{display:flex; flex-direction:column; gap:0; padding:6px 4px;}
.fd-track div{position:relative; display:flex; align-items:center; gap:12px; padding:10px 0; font-size:.86rem; color:var(--ink3);}
.fd-track div:not(:last-child)::after{content:""; position:absolute; left:6.5px; top:26px; height:22px; width:1.5px; background:var(--line2);}
.fd-track i{width:15px; height:15px; border-radius:50%; border:1.5px solid var(--line3); flex:none; background:#08080a; position:relative; z-index:1;}
.fd-track .done{color:#d8d8dc;} .fd-track .done i{background:var(--ok); border-color:var(--ok);}
.fd-track .done::after{background:var(--ok) !important;}
.fd-track .now{color:var(--ink); font-weight:600;} .fd-track .now i{border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 5px rgba(255,122,0,.18);}
.fd-tabs{position:absolute; z-index:4; left:18px; right:18px; bottom:22px; display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:2px;
  border-radius:9px; background:#15181d; border:1px solid var(--line-ui);}
.fd-tabs button{border:0; background:none; height:28px; padding:0; border-radius:7px; font-size:.62rem; font-weight:600; color:var(--ink3); cursor:pointer; transition:background .2s,color .2s;}
.fd-phone[data-screen="0"] [data-go="0"],.fd-phone[data-screen="1"] [data-go="1"],
.fd-phone[data-screen="2"] [data-go="2"],.fd-phone[data-screen="3"] [data-go="3"]{background:var(--surface-ui); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.4);}
@media(max-width:900px){
  .fd-grid{grid-template-columns:1fr;}
  .fd-phone-wrap{order:-1;}
  .fd-phone{transform:none;}
}
@media(max-width:420px){ .fd-phone{width:262px; height:540px;} .fd-qr{flex-direction:column; align-items:flex-start;} }

/* ---------- suite: four panels of six ---------- */
.su-groups{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.su-group{padding:22px; border-radius:22px; border:1px solid var(--line); background:linear-gradient(180deg,var(--s1),rgba(13,13,16,.4));}
.su-gh{display:flex; align-items:center; gap:14px; margin:2px 4px 16px; font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2);}
.su-gh::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line2),transparent);}
.su-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.su-app{position:relative; display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:14px; overflow:hidden;
  border:1px solid transparent; transition:border-color .3s,background .3s;}
.su-app:hover{border-color:rgba(255,122,0,.28); background:var(--s2);}
.su-app > *{position:relative; z-index:1;}
.su-ic{width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:10px; color:var(--accent-hi);
  background:rgba(255,122,0,.08); box-shadow:inset 0 0 0 1px rgba(255,122,0,.2);}
.su-ic .ic{width:19px; height:19px;}
.su-app h4{font-size:.96rem; font-weight:600; letter-spacing:-.02em;}
.su-app p{margin-top:3px; font-size:.85rem; color:var(--ink2); line-height:1.45;}
@media(max-width:1020px){ .su-groups{grid-template-columns:1fr;} }
@media(max-width:560px){ .su-grid{grid-template-columns:1fr;} .su-group{padding:16px 12px;} .su-app{padding:12px;} }

/* ---------- metrics ---------- */
.hp-metrics{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); display:grid; grid-template-columns:repeat(4,1fr);}
.hp-metric{display:flex; flex-direction:column; align-items:center; gap:8px; padding:34px 16px; text-align:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.hp-metric + .hp-metric{border-left:1px solid var(--line);}
.hp-metric-v{font-size:clamp(2.6rem,5vw,4.2rem); font-weight:600; letter-spacing:-.05em; line-height:1;
  background:linear-gradient(180deg,#fff,#b9b9c0); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums;}
.hp-metric:first-child .hp-metric-v{background-image:linear-gradient(180deg,#ffd3a3,var(--accent));}
.hp-metric-l{font-size:.9rem; color:var(--ink2);}
@media(max-width:720px){ .hp-metrics{grid-template-columns:1fr 1fr;} .hp-metric:nth-child(3){border-left:0;} .hp-metric:nth-child(n+3){border-top:0;} }

/* ---------- proof ---------- */
/* The Barn, as a drawing plate: a header strip, the isometric drawing
   (partials/_home_barn.html) and a caption with a north arrow, then the copy. */
.pf-plate{position:relative; margin:0; border:1px solid var(--line2); border-radius:6px; overflow:hidden;
  background:linear-gradient(180deg,#0c0c0f,#09090b);}
.pf-plate::before,.pf-plate::after{content:""; position:absolute; z-index:2; width:14px; height:14px; pointer-events:none;
  border:0 solid rgba(255,176,102,.6);}
.pf-plate::before{left:8px; top:44px; border-width:1px 0 0 1px;}
.pf-plate::after{right:8px; bottom:52px; border-width:0 1px 1px 0;}
.pf-plate-hd,.pf-plate-ft{display:flex; align-items:center; gap:18px; padding:0 16px; min-height:36px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3);}
.pf-plate-hd{border-bottom:1px solid var(--line2);}
.pf-plate-hd span + span{padding-left:18px; border-left:1px solid var(--line2);}
.pf-plate-t{color:var(--ink2);}
.pf-plate-hd span:last-child{margin-left:auto;}
.pf-plate-draw{position:relative; aspect-ratio:1986/662; padding:10px 8px 0;
  background-image:radial-gradient(60% 70% at 40% 110%,rgba(255,122,0,.08),transparent 70%);}
.pf-plate-ft{min-height:44px; border-top:1px solid var(--line2); text-transform:none; letter-spacing:0; font-family:var(--sans); font-size:.82rem;}
.pf-plate-ft .pf-badge{position:static; flex:none; font-family:var(--sans);}
.pf-fig{color:var(--ink2);}
.pf-fig i{font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--ink); margin-right:8px;}
.pf-north{width:30px; height:30px; margin-left:auto; flex:none;}
.pf-north circle{fill:none; stroke:var(--line3);}
.pf-north path{fill:var(--accent-hi);}
.pf-north text{font-family:var(--mono); font-size:7px; fill:var(--ink3); text-anchor:middle;}
.pf-badge{display:inline-flex; align-items:center; gap:8px; padding:5px 11px; border-radius:6px;
  font-size:.74rem; font-weight:600; color:var(--ink); background:rgba(255,255,255,.04); border:1px solid var(--line2);}
.pf-copy{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,5vw,72px); align-items:end; margin-top:clamp(28px,4vw,48px);}
.pf-copy h2{font-size:clamp(1.6rem,2.8vw,2.3rem); font-weight:580; letter-spacing:-.04em; text-wrap:balance;}
.pf-copy p{margin-top:16px; color:var(--ink2);}
.pf-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border-radius:6px; overflow:hidden; background:var(--line); border:1px solid var(--line);}
.pf-stats div{display:flex; flex-direction:column; gap:4px; padding:16px; background:var(--s1);}
.pf-stats b{font-size:1.45rem; font-weight:600; letter-spacing:-.04em; color:var(--accent-hi);}
.pf-stats span{font-size:.78rem; color:var(--ink2);}
.pf-loc{margin-top:18px; font-size:.76rem; color:var(--ink3);}
/* project data block: label / value rows like a drawing's project data */
.pf-data{margin-top:clamp(28px,4vw,44px);}
.pf-data-h{font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3);
  padding-bottom:10px; border-bottom:1px solid var(--line2);}
.pf-facts{margin:0; display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(24px,5vw,72px);}
.pf-facts div{display:grid; grid-template-columns:8.5rem 1fr; gap:14px; padding:10px 0; border-bottom:1px solid var(--line);}
.pf-facts dt{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); padding-top:.2em;}
.pf-facts dd{margin:0; font-size:.88rem; color:var(--ink2);}
@media(max-width:760px){ .pf-facts{grid-template-columns:1fr;} }
@media(max-width:480px){ .pf-facts div{grid-template-columns:1fr; gap:2px;} }
@media(max-width:860px){
  .pf-copy{grid-template-columns:1fr;}
  .pf-plate-hd span:nth-child(3){display:none;}
  .pf-plate-draw{aspect-ratio:auto; height:300px; overflow-x:auto; overflow-y:hidden; padding:10px 0 0;}
  .pf-plate-draw .bn-svg{width:760px; max-width:none;}
  .pf-fig{font-size:.76rem; flex:1 1 100%; order:3;}
  .pf-plate-ft{flex-wrap:wrap; gap:10px 14px; padding:10px 14px;}
  .pf-plate::after{display:none;}
}

/* the drawing itself: 30 degree isometric line art, one warm light */
.bn-svg{display:block; width:100%; height:100%; overflow:visible;}
.bn-svg path,.bn-svg circle,.bn-svg ellipse{vector-effect:non-scaling-stroke; stroke-linejoin:round;}
.bn-grid{fill:none; stroke:rgba(124,196,255,.07); stroke-width:1;}
.bn-l,.bn-ch-l,.bn-bess-l{fill:#121318; stroke:rgba(210,220,235,.32); stroke-width:1;}
.bn-r,.bn-ch-r,.bn-bess-r{fill:#0b0c0f; stroke:rgba(210,220,235,.32); stroke-width:1;}
.bn-t,.bn-ch-t,.bn-bess-t{fill:#1b1c22; stroke:rgba(210,220,235,.4); stroke-width:1;}
.bn-fan{fill:#0d0e12; stroke:rgba(210,220,235,.28); stroke-width:.8;}
.bn-joint{fill:none; stroke:rgba(210,220,235,.12); stroke-width:1;}
.bn-edge,.bn-fence{fill:none; stroke:rgba(210,220,235,.3); stroke-width:1;}
.bn-fence{stroke-dasharray:3 3;}
.bn-road{fill:none; stroke:rgba(210,220,235,.22); stroke-width:1;}
.bn-road-c{fill:none; stroke:rgba(210,220,235,.14); stroke-width:1; stroke-dasharray:6 6;}
.bn-door{fill:rgba(255,122,0,.16); stroke:rgba(255,160,80,.6); stroke-width:1;}
.bn-led{fill:none; stroke:rgba(255,140,40,.5); stroke-width:1.4; stroke-dasharray:2 5;}
.bn-tower{fill:none; stroke:rgba(210,220,235,.35); stroke-width:1;}
.bn-wire{fill:none; stroke:rgba(210,220,235,.2); stroke-width:1;}
.bn-flow{fill:none; stroke:#ffb066; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:.6 5.4; opacity:.9;}
.bn-beacon{fill:#ff5a3c;}
/* the barn: the one warm-red building, kept at the gate */
.bn-barn-l{fill:#2a1311; stroke:rgba(255,190,170,.4); stroke-width:1;}
.bn-barn-r{fill:#1e0e0c; stroke:rgba(255,190,170,.45); stroke-width:1;}
.bn-board{fill:none; stroke:rgba(255,190,170,.12); stroke-width:1;}
.bn-roof-lo{fill:#1c1d23; stroke:rgba(210,220,235,.4); stroke-width:1;}
.bn-roof-hi{fill:#23242b; stroke:rgba(210,220,235,.45); stroke-width:1;}
.bn-bdoor{fill:#0a0a0c; stroke:rgba(255,190,170,.4); stroke-width:1;}
.bn-trim{fill:none; stroke:rgba(255,190,170,.4); stroke-width:1;}
.bn-eye{fill:#ff7a00; stroke:#ffe4c4; stroke-width:.8;}
.bn-eye-glow{fill:rgba(255,122,0,.28); filter:blur(8px);}
.bn-pupil{fill:#060607;}
.bn-silo{fill:#111216; stroke:rgba(210,220,235,.38); stroke-width:1;}
.bn-silo-t{fill:#1d1e24; stroke:rgba(210,220,235,.42); stroke-width:1;}
.bn-call path{fill:none; stroke:rgba(255,176,102,.55); stroke-width:1;}
.bn-call circle{fill:#08080a; stroke:rgba(255,176,102,.8); stroke-width:1;}
.bn-call text{font-family:var(--mono); font-size:13px; font-weight:600; fill:#ffb066; text-anchor:middle;}
.bn-call text.bn-lab{font-size:15px; font-weight:500; letter-spacing:.12em; fill:var(--ink2);}
.bn-call .bn-lab--l{text-anchor:end;} .bn-call .bn-lab--r{text-anchor:start;}
@media(max-width:480px){ .pf-stats{grid-template-columns:1fr;} .pf-plate-hd span:nth-child(2){display:none;} }

/* ---------- security + admin ---------- */
.sc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.sc-card{position:relative; overflow:hidden; padding:26px; border-radius:20px; border:1px solid var(--line); background:linear-gradient(180deg,var(--s2),var(--s1));}
.sc-card > *{position:relative; z-index:1;}
.sc-card--big{grid-column:span 2; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end;}
.sc-ic{display:grid; place-items:center; width:40px; height:40px; border-radius:11px; margin-bottom:18px; color:var(--accent-hi);
  background:rgba(255,122,0,.08); box-shadow:inset 0 0 0 1px rgba(255,122,0,.22);}
.sc-ic .ic{width:21px; height:21px;}
.sc-card--big .sc-ic{position:absolute; top:26px; left:26px; margin:0;}
.sc-card h4{font-size:1.08rem; font-weight:600; letter-spacing:-.02em;}
.sc-card p{margin-top:8px; font-size:.92rem; color:var(--ink2); line-height:1.5;}
.sc-card--big p{max-width:26rem;}
.sc-vis{position:absolute !important; z-index:0 !important; top:22px; right:22px;}
.sc-vis--iso{display:flex; gap:8px;}
.sc-vis--iso i{display:flex; align-items:flex-end; justify-content:center; width:74px; height:118px; padding-bottom:8px; border-radius:10px;
  font-style:normal; font-family:var(--mono); font-size:.62rem; color:var(--ink3);
  border:1px dashed var(--line3); background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 12px,transparent 12px 20px);}
.sc-vis--iso i:nth-child(2){border-style:solid; border-color:rgba(255,122,0,.5); color:var(--accent-hi); background:repeating-linear-gradient(0deg,rgba(255,122,0,.1) 0 12px,transparent 12px 20px);
  box-shadow:0 0 30px -6px rgba(255,122,0,.45);}
.sc-vis--mx{display:grid; grid-template-columns:repeat(6,14px); gap:7px;}
.sc-vis--mx i{width:14px; height:14px; border-radius:4px; background:rgba(255,255,255,.05); border:1px solid var(--line);}
.sc-vis--mx i:nth-child(1),.sc-vis--mx i:nth-child(2),.sc-vis--mx i:nth-child(3),.sc-vis--mx i:nth-child(7),.sc-vis--mx i:nth-child(8),
.sc-vis--mx i:nth-child(14),.sc-vis--mx i:nth-child(16),.sc-vis--mx i:nth-child(19),.sc-vis--mx i:nth-child(22){background:rgba(255,122,0,.55); border-color:rgba(255,160,80,.6);}
.ad{margin-top:14px; padding:clamp(24px,3vw,34px); border-radius:20px; border:1px solid var(--line);
  background:radial-gradient(60% 120% at 0% 0%,rgba(255,122,0,.07),transparent 60%),var(--s1);}
.ad-h{font-size:1.2rem; font-weight:600; letter-spacing:-.025em; margin-bottom:22px;}
.ad-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.ad-item{padding-top:16px; border-top:1px solid var(--line2);}
.ad-item h4{font-size:.98rem; font-weight:600; letter-spacing:-.015em;}
.ad-item p{margin-top:6px; font-size:.88rem; color:var(--ink2); line-height:1.5;}
@media(max-width:960px){ .sc-grid{grid-template-columns:1fr 1fr;} .ad-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){ .sc-grid,.ad-grid{grid-template-columns:1fr;} .sc-card--big{grid-column:auto; min-height:250px;} .sc-vis{transform:scale(.8); transform-origin:top right;} }

/* ---------- contact (partials/_landing_contact.html) ---------- */
.lp-contact{position:relative; overflow:hidden; padding:clamp(90px,12vw,160px) var(--gut); isolation:isolate;}
/* the hero's horizon returns as a line of light across the top of the close */
.lp-contact::before{content:""; position:absolute; z-index:-1; left:50%; top:0; width:min(1100px,92vw); height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,150,70,.3) 20%,rgba(255,205,160,.95) 50%,rgba(255,150,70,.3) 80%,transparent);
  box-shadow:0 0 26px 4px rgba(255,122,0,.35);}
.lp-contact::after{content:""; position:absolute; z-index:-1; left:50%; top:0; width:min(1200px,120vw); height:520px; transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 0%,rgba(255,122,0,.16),transparent 70%);}
.lp-contact-inner{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,6vw,90px); align-items:start;}
.lp-contact-copy .lp-kicker{display:inline-block; margin-bottom:18px; font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-hi);}
.lp-contact-copy h2{font-size:clamp(2.2rem,4.8vw,4rem); font-weight:580; letter-spacing:-.05em;}
.lp-contact-copy > p{margin-top:18px; color:var(--ink2); font-size:1.08rem; max-width:32rem;}
.lp-contact-facts{margin-top:28px; display:grid; gap:12px;}
.lp-contact-facts li{position:relative; padding-left:28px; color:#dcdce0;}
.lp-contact-facts li::before{content:""; position:absolute; left:0; top:.45em; width:14px; height:8px; border:solid var(--accent); border-width:0 0 2px 2px; transform:rotate(-45deg);}
.lp-form{position:relative; display:grid; gap:14px; padding:clamp(22px,3vw,34px); border-radius:24px; border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(24,24,29,.85),rgba(13,13,16,.92)); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 50px 100px -40px rgba(0,0,0,.95);}
.lp-form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.lp-field{display:grid; gap:7px;}
.lp-field > span{font-size:.8rem; font-weight:560; color:var(--ink2);}
.lp-field > span i{font-style:normal; font-weight:400; color:var(--ink3); margin-left:4px;}
.lp-field input,.lp-field textarea{width:100%; font:inherit; font-size:.97rem; color:var(--ink); padding:12px 14px; border-radius:12px;
  border:1px solid var(--line2); background:rgba(0,0,0,.35); transition:border-color .2s,box-shadow .2s,background .2s;}
.lp-field textarea{min-height:120px; resize:vertical;}
.lp-field input:focus,.lp-field textarea:focus{outline:none; border-color:rgba(255,122,0,.6); background:rgba(0,0,0,.5); box-shadow:0 0 0 4px rgba(255,122,0,.14);}
.lp-field-err{font-style:normal; font-size:.8rem; color:#ff9a8a;}
.lp-form-ok{padding:12px 14px; border-radius:12px; color:var(--ok-ink); background:rgba(60,200,120,.1); border:1px solid rgba(60,200,120,.3);}
.lp-form-err{padding:12px 14px; border-radius:12px; color:#ffb4a8; background:rgba(255,80,60,.1); border:1px solid rgba(255,80,60,.3);}
.lp-hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden;}
.lp-form-send{width:100%; margin-top:4px;}
.lp-form-fine{font-size:.8rem; color:var(--ink3); text-align:center;}
@media(max-width:900px){ .lp-contact-inner{grid-template-columns:1fr;} }
@media(max-width:520px){ .lp-form-row{grid-template-columns:1fr;} }

/* ---------- footer ---------- */
.hp-foot{position:relative; overflow:hidden; padding:64px var(--gut) 28px; border-top:1px solid var(--line);}
.hp-foot-top{max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.hp-foot-brand p{margin-top:12px; color:var(--ink2); font-size:.92rem;}
.hp-foot-cols{display:grid; grid-template-columns:repeat(3,minmax(120px,1fr)); gap:40px;}
.hp-foot-cols h5{font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin-bottom:14px;}
.hp-foot-cols a{display:block; padding:4px 0; font-size:.92rem; color:var(--ink2); transition:color .2s;}
.hp-foot-cols a:hover{color:var(--ink);}
.hp-foot-mark{max-width:var(--maxw); margin:56px auto 0; text-align:center; font-size:clamp(4.5rem,19vw,17rem); font-weight:700; letter-spacing:-.06em; line-height:.8;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 85%); -webkit-background-clip:text; background-clip:text; color:transparent;
  user-select:none;}
.hp-tblock{max-width:var(--maxw); margin:40px auto 0; display:grid; grid-template-columns:2.4fr repeat(4,1fr);
  border:1px solid var(--line2); border-radius:4px;}
.hp-tblock div{padding:10px 14px; border-left:1px solid var(--line2); min-width:0;}
.hp-tblock div:first-child{border-left:0;}
.hp-tblock dt{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3);}
.hp-tblock dd{margin:4px 0 0; font-size:.84rem; color:var(--ink2);}
.hp-tblock-stamp{font-family:var(--mono); font-size:.72rem !important; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-hi) !important;}
@media(max-width:760px){ .hp-tblock{grid-template-columns:1fr 1fr;} .hp-tblock-wide{grid-column:1 / -1; border-bottom:1px solid var(--line2);}
  .hp-tblock div:nth-child(2),.hp-tblock div:nth-child(4){border-left:0;} .hp-tblock div:nth-child(n+2):nth-child(-n+3){border-bottom:1px solid var(--line2);} }
.hp-foot-meta{max-width:var(--maxw); margin:18px auto 0; padding-top:22px; border-top:1px solid var(--line); font-size:.78rem; color:var(--ink3); text-align:center;}
@media(max-width:620px){ .hp-foot-cols{grid-template-columns:repeat(2,1fr); gap:28px;} }

/* =================================================================
   HERO: responsive
   ================================================================= */
@media(max-width:1100px){
  .hx-chip{padding:6px 11px 6px 6px; gap:8px;}
  .hx-chip .ic{width:26px; height:26px; padding:5px;}
  .hx-chip b{font-size:.72rem;} .hx-chip i{font-size:.64rem;}
}
@media(max-width:760px){
  .hx-stage{aspect-ratio:1/1.02; width:100%;}
  .hx-mono,.hx-reflect{height:92%;}
  .hx-smoke,.hx-smoke-fb{left:-30%; right:-30%; top:-14%;}
  .hx-smoke{width:160%; height:118%;}
  .hx-datum{display:none;}
  .hx-lines,.hx-chip{display:none;}
  .hx-title{font-size:clamp(2.6rem,12vw,3.6rem);}
  .hx-cta .hp-btn{flex:1 1 100%; max-width:340px;}
  .hx-pill{font-size:.76rem;}
  .hp-ribbon-proof{font-size:.84rem;}
}

/* =================================================================
   MOTION (all of it lives here, and all of it is opt-in)
   ================================================================= */
/* reveal: hidden only when JS is present, so no-JS readers see everything */
html.js .reveal{opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease),transform 1.1s var(--ease);
  transition-delay:calc(min(var(--k,0),5) * 70ms);}
html.js .reveal.in{opacity:1; transform:none;}

@media(prefers-reduced-motion:no-preference){
  /* hero intro: one orchestrated sequence */
  html.js .hx-pill{animation:hxUp .9s var(--ease) both .05s;}
  html.js .hx-title .w{animation:hxWord 1s var(--ease) both; animation-delay:calc(var(--i) * 70ms + 120ms);}
  html.js .hx-title .hx-serif{animation-name:hxWordGlow;}
  html.js .hx-sub{animation:hxUp 1s var(--ease) both .55s;}
  html.js .hx-cta{animation:hxUp 1s var(--ease) both .68s;}
  html.js .hx-mono{animation:hxRise 1.8s var(--ease) both .35s;}
  html.js .hx-reflect{animation:hxFade 2s ease both .8s;}
  html.js .hx-horizon{animation:hxHorizon 1.6s var(--ease) both .3s;}
  html.js .hx-chip{animation:hxChip .9s var(--ease) both; animation-delay:calc(var(--i) * 110ms + 1.2s);}
  html.js .hx-sight{animation:hxFade 1.4s ease both 1.1s;}

  .hx-eye-halo{animation:halo 8s ease-in-out infinite;}
  .live,.hp-live{animation:live 2.4s ease-out infinite;}
  /* scroll parallax: the monolith settles as the hero leaves (--sy 0..1 from JS) */
  .hx-stage{transform:translateY(calc(var(--sy,0) * -40px)); }


  /* bento visuals play once when their tile reveals */
  .bx.in .v-cd{animation:rise .6s var(--ease) both; animation-delay:calc(var(--i,0) * 60ms + .2s);}
  .bx.in .v-cd--drag{animation:drag 3.4s var(--ease) infinite 1s;}
  .bx.in .v-actual{animation:draw 1.8s var(--ease) both .3s;}
  .bx.in .v-area{animation:fade 1.6s ease both .7s;}
  .bx.in .v-r{animation:rise .6s var(--ease) both; animation-delay:calc(var(--i,0) * 70ms + .15s);}
  .bx.in .v-prog b,.bx.in .v-stack b,.bx.in .v-ph b{animation:grow 1.3s var(--ease) both .35s;}
  .bx.in .v-kc--move{animation:truck 4.5s var(--ease) infinite 1s;}
  .bx.in .v-g.now{animation:nowPulse 2.2s ease-out infinite;}
  .bx.in .v-sig path{animation:draw 2.2s ease both .5s;}
  .bx.in .v-ring .fg{animation:ring 1.6s var(--ease) both .3s;}
  .bx.in .mk-qr.big .beam,.fd-view .mk-qr .beam,.fd-qr .mk-qr .beam{animation:scan 2.8s cubic-bezier(.5,0,.5,1) infinite;}

  /* DrawingVault: the markup draws itself once the sheet is on screen */
  .dv-stage.in .sh--c .sh-cloud{animation:draw 1.6s ease both 1.4s;}
  .dv-stage.in .sh--c .sh-dim-l{animation:draw 1.1s var(--ease) both 1.8s;}
  .dv-stage.in .sh--c .sh-dim rect,.dv-stage.in .sh--c .sh-dim text{animation:fade .6s ease both 2.5s;}
  .dv-stage.in .sh--c .sh-pin-ring{animation:pinPulse 2.4s ease-out infinite 2s;}
  .dv-stage.in .sh--c .sh-lp2a{animation:lpBlink 2.4s ease-in-out infinite 2.2s;}
  .dv-stage.in .dv-thread{animation:pop .7s var(--ease) both 2.8s;}

  /* The Barn: current flows along the conductors; obstruction beacons flash
     at the FAA rate (about 30 a minute). Paused off screen via .off. */
  .pf-plate .bn-flow{animation:flow 2.4s linear infinite; animation-delay:var(--d,0s);}
  .pf-plate .bn-beacon{animation:beacon 2s steps(1) infinite; animation-delay:var(--d,0s);}
  /* connected: a spark runs the line once and lights each app as it arrives */
  .cx-flow.in::after{animation:spark 6s cubic-bezier(.45,0,.55,1) 1 .6s forwards;}
  .cx-flow.in .cx-node::after{animation:nodeLit 6s ease-out 1 forwards; animation-delay:calc(var(--k) * 1.5s + .6s);}

}
/* anything looping pauses while its section is off screen (JS toggles .off) */
.off,.off *{animation-play-state:paused !important;}

@keyframes hxUp{from{opacity:0; transform:translateY(16px);}to{opacity:1; transform:none;}}
@keyframes hxWord{from{opacity:0; transform:translateY(.32em); filter:blur(12px);}to{opacity:1; transform:none; filter:blur(0);}}
@keyframes hxWordGlow{from{opacity:0; transform:translateY(.32em); filter:blur(12px) drop-shadow(0 0 0 rgba(255,122,0,0));}to{opacity:1; transform:none; filter:blur(0) drop-shadow(0 0 28px rgba(255,122,0,.35));}}
@keyframes hxRise{from{opacity:0; transform:translate(-50%,60px);}to{opacity:1; transform:translate(-50%,0);}}
@keyframes hxFade{from{opacity:0;}}
@keyframes hxHorizon{from{opacity:0; transform:scaleX(.2);}to{opacity:1; transform:none;}}
@keyframes hxChip{from{opacity:0; filter:blur(6px);}to{opacity:1; filter:blur(0);}}
@keyframes halo{0%,100%{opacity:.64;}50%{opacity:.76;}}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(60,200,120,.5);}70%,100%{box-shadow:0 0 0 7px rgba(60,200,120,0);}}
@keyframes rise{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}}
@keyframes drag{0%,100%{transform:none;}30%,55%{transform:translate(-8px,-14px) rotate(-2deg);}}
@keyframes draw{from{stroke-dashoffset:100;}to{stroke-dashoffset:0;}}
@keyframes fade{from{opacity:0;}}
@keyframes grow{from{transform:scaleX(0);}}
@keyframes truck{0%,15%{transform:none;}45%,70%{transform:translateX(calc(100% + 16px)); opacity:1;}71%{opacity:0;}72%{transform:none; opacity:0;}90%,100%{opacity:1;}}
@keyframes nowPulse{0%{box-shadow:0 0 0 0 rgba(255,122,0,.5),0 0 18px rgba(255,122,0,.45);}70%,100%{box-shadow:0 0 0 12px rgba(255,122,0,0),0 0 18px rgba(255,122,0,.45);}}
@keyframes ring{from{stroke-dasharray:0 100;}}
@keyframes scan{0%{top:-40%;}55%,100%{top:110%;}}
@keyframes pinPulse{0%{transform:scale(.6); opacity:.9;}100%{transform:scale(2.2); opacity:0;}}
@keyframes lpBlink{0%,100%{fill-opacity:1;}50%{fill:rgba(255,122,0,.6);}}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.94);}to{opacity:1; transform:none;}}
@keyframes spark{0%{left:12.5%; opacity:0;}4%{opacity:1;}75%{left:87.5%; opacity:1;}80%,100%{left:87.5%; opacity:0;}}
@keyframes flow{to{stroke-dashoffset:-12;}}
@keyframes beacon{0%{opacity:1;}50%{opacity:.15;}}
@keyframes nodeLit{0%{opacity:1;}30%,100%{opacity:0;}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.js .reveal{opacity:1; transform:none; transition:none;}
  .hx-pupil,.fd-scr,.fd-phone{transition:none;}
  .hx-stage{transform:none;}
  .mk-qr .beam{display:none;}
}