/* ArkWorks Lab v4 — one stylesheet for every page. System fonts only (ECC perf: no 2MB webfont, no font CDN).
   Deliberately single dark theme: the holographic HUD look is the brand. */
:root{
  --bg:#03070B; --panel:#071520; --line:rgba(79,216,255,.24); --line-2:rgba(79,216,255,.5);
  --ink:#E8F6FF; --ink-2:#B4D0DE; --ink-3:#8FAEBF; --holo:#4FD8FF; --holo-2:#8BE6FF; --amber:#FFB020; --ok:#7BE09B;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease:cubic-bezier(.16,.84,.3,1); --top:60px;
  --void:#03070B; --holo-2:#8BE6FF; --holo-dim:#1B6A86; --red:#FF5A47; --hud:var(--mono); --gut:clamp(16px,4vw,32px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--top) + 16px);scroll-padding-bottom:96px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere;
  background-image:radial-gradient(ellipse 80% 50% at 70% -10%,rgba(79,216,255,.14),transparent 60%),
    linear-gradient(rgba(79,216,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(79,216,255,.035) 1px,transparent 1px);
  background-size:auto,48px 48px,48px 48px}
img{max-width:100%;height:auto;display:block}
figure,blockquote{margin:0}
a{color:var(--holo);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,textarea:focus-visible,main:focus-visible{outline:2px solid var(--holo);outline-offset:3px}
main:focus{outline:none}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(32px,6vw,56px);font-weight:900}
h2{font-size:clamp(24px,3.6vw,36px);font-weight:850;margin-bottom:14px}
h3{font-size:19px;font-weight:800}
p,li{text-wrap:pretty}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:760px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--holo);color:#02202E;padding:10px 14px;font-weight:800}
.skip:focus{top:12px}
.hud{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--holo);margin-bottom:10px}
.lead{font-size:clamp(17px,1.8vw,19px);color:var(--ink-2);max-width:62ch;margin-top:12px}
.small{font-size:14px;color:var(--ink-3);margin-top:12px;max-width:72ch}
.tag-price{display:inline-block;vertical-align:middle;font-size:14px;font-weight:800;letter-spacing:0;padding:3px 10px;color:#1A1200;background:var(--amber);font-variant-numeric:tabular-nums}

/* ── header ── */
.top{position:sticky;top:0;z-index:50;background:rgba(3,7,11,.94);border-bottom:1px solid var(--line)}

.top-in{height:var(--top);display:flex;align-items:center;gap:16px}
.mark{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--mono);font-weight:700;letter-spacing:.18em;font-size:14px;min-height:44px}
.mark img{border-radius:5px}
.nav{margin-left:auto;position:relative}
.nav-inline{display:flex;gap:4px}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink-2);text-decoration:none;font-weight:700;font-size:15px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--holo)}
.nav details{display:none}
.nav summary{list-style:none;cursor:pointer;white-space:nowrap;display:flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-2);font-weight:700}
.nav summary::-webkit-details-marker{display:none}
.nav-list{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--panel);border:1px solid var(--line-2);padding:6px;display:grid}
.langs{display:flex;border:1px solid var(--line)}
.langs a{display:grid;place-items:center;min-width:44px;min-height:44px;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink-3);text-decoration:none}
.langs a[aria-current="true"]{background:var(--holo);color:#02202E}
@media(max-width:899px){.nav-inline{display:none}.nav details{display:block}.mark span{display:none}}

/* ── buttons ── */
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 20px;font:inherit;font-weight:800;font-size:16px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition-property:background-color,border-color,color,box-shadow,transform;transition-duration:160ms;transition-timing-function:var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn--go{background:var(--holo);color:#02202E;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(2,32,46,.18),0 8px 22px -12px rgba(79,216,255,.7)}
.btn--line{border-color:var(--line-2);color:var(--ink);background:rgba(79,216,255,.06)}
@media(hover:hover) and (pointer:fine){.btn--go:hover{background:var(--holo-2)}.btn--line:hover{border-color:var(--holo);color:var(--holo)}}
.i{width:19px;height:19px;flex:none}
.i.sm{width:16px;height:16px;display:inline;vertical-align:-3px}
.more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700}
.row-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}
.row-cta .ctas{margin-top:16px}

/* ── panels: the hologram frame ── */
.panel{position:relative;border:1px solid var(--line);background:radial-gradient(380px circle at var(--mx,-600px) var(--my,-600px),rgba(79,216,255,.10),transparent 62%),linear-gradient(180deg,rgba(14,58,86,.3),rgba(4,16,24,.72));box-shadow:inset 0 1px 0 rgba(139,230,255,.10);padding:clamp(16px,2.4vw,24px)}
.panel::before,.panel::after{content:"";position:absolute;width:12px;height:12px;border:1.5px solid var(--holo);pointer-events:none}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ── sections ── */
.sec{padding-block:clamp(48px,8vw,88px)}
.sec + .sec{border-top:1px solid rgba(79,216,255,.1)}
.hero{padding-block:clamp(40px,7vw,80px) clamp(40px,6vw,64px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero-txt>.small{margin-top:14px}
.chat{display:grid;gap:8px;margin-bottom:14px}
.b{max-width:88%;padding:8px 12px;line-height:1.5}
.b.c{background:#FEE500;color:#2A1A1A;justify-self:start}
.b.a{background:rgba(79,216,255,.16);border:1px solid var(--line-2);justify-self:end}
@media(max-width:899px){.hero-in{grid-template-columns:1fr}}

.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px}
.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-3);font-weight:700}
.tbl td:nth-last-child(-n+2),.tbl th:nth-last-child(-n+2){text-align:right}
.tbl tfoot td{font-weight:800;color:var(--holo);border-bottom:0}
.tscroll{overflow-x:auto;margin-top:18px;border:1px solid var(--line)}
.wait{margin-top:10px;font-size:14px;color:var(--amber)}
.okd{margin-top:10px;font-weight:800;color:var(--ok)}

.pkg{min-width:640px}
.pkg td,.pkg th{text-align:left!important}
.pkg thead th{font-family:var(--sans);font-size:16px;color:var(--ink);letter-spacing:0}
.pkg .price{display:block;font-size:26px;font-weight:900;color:var(--holo);margin-top:4px}
.pkg .price small{font-size:14px;color:var(--ink-3);font-weight:600}
.pkg .pick{background:rgba(79,216,255,.07)}
.badge{font-size:12px;padding:1px 7px;background:var(--amber);color:#1A1200;font-weight:800;vertical-align:2px}
.pkg-sum{display:none}
@media(max-width:700px){
  .pkg-sum{display:grid;gap:10px;margin-top:18px}
  .pkg-sum li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline}
  .pkg-sum .price{font-size:24px;font-weight:900;color:var(--holo);font-variant-numeric:tabular-nums}
  .pkg-sum .price small{font-size:13px;color:var(--ink-3);font-weight:600}
  .pkg-sum p{grid-column:1/-1;color:var(--ink-2);font-size:14.5px}
  .pkg-sum .pick{border-color:var(--amber)}
}
.pkg tbody th{font-size:14px;color:var(--ink-3);font-weight:700;white-space:nowrap}

.pains,.cards,.tiers,.steps,.recs,.path,.samples{display:grid;gap:14px;margin-top:22px}
.pains{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards,.tiers,.samples{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps,.path{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:899px){.cards,.tiers,.samples,.steps,.path{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.pains,.cards,.tiers,.samples,.steps,.path{grid-template-columns:1fr}}
.q{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:6px}
.pains p:not(.q){color:var(--ink-2)}
.tier .price{font-size:22px;font-weight:900;color:var(--holo);margin:4px 0 10px;font-variant-numeric:tabular-nums}
.tier.first{border-color:var(--line-2)}
.tier li,.gets li,.dash li{position:relative;padding-left:18px;margin-top:6px;color:var(--ink-2)}
.tier li::before,.gets li::before{content:"";position:absolute;left:2px;top:.65em;width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--holo)}
.dash li::before{content:"—";position:absolute;left:0;color:var(--ink-3)}
.gets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px;margin-top:8px}
@media(max-width:600px){.gets{grid-template-columns:1fr}}
.strengths,.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;margin-top:24px}
.promises{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.strengths,.promises{grid-template-columns:1fr}}
.strengths b,.promises b{display:block;font-size:17px;margin-bottom:4px;padding-left:12px;border-left:2px solid var(--holo)}
.strengths p,.promises p{color:var(--ink-2);padding-left:14px}
.card .i{width:28px;height:28px;color:var(--holo);margin-bottom:10px}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card p{color:var(--ink-2);margin-top:6px}
@media(hover:hover) and (pointer:fine){.card:hover,.ind:hover{border-color:var(--holo)}}
.grp{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--ink-3);margin:26px 0 10px;font-weight:700}
.inds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:700px){.inds{grid-template-columns:1fr}}
.ind{display:block;text-decoration:none;color:var(--ink);padding:14px 16px;min-height:44px;transition:border-color 160ms var(--ease-out)}
.ind b{display:block}
.ind span{font-size:14px;color:var(--ink-3)}
.steps .n,.path .n,.bp .n{font-family:var(--mono);color:var(--holo);font-size:13px;font-weight:700}
.steps b,.path b{display:block;font-size:17px;margin-top:6px}
.steps p,.path p{color:var(--ink-2);font-size:15px;margin-top:4px}
.about .sig,.story .sig{margin-top:14px;color:var(--ink-3)}
.about .sig b,.story .sig b{color:var(--ink)}
.faq{display:grid;gap:10px;max-width:820px}
.faq details{border:1px solid var(--line);background:rgba(7,21,32,.7)}
.faq summary{cursor:pointer;padding:14px 16px;min-height:48px;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--holo)}
.faq details[open] summary::after{content:"−"}
.faq summary::-webkit-details-marker{display:none}
.faq details p{padding:0 16px 16px;color:var(--ink-2)}
.close-in{margin-top:36px}
.close .close-in{margin-top:0;text-align:left}

/* ── demo ── */
.demo{margin-top:22px}
.try label{display:block;font-weight:800;margin-bottom:8px}
.try .row{display:flex;flex-wrap:wrap;gap:10px}
.try textarea{flex:1 1 280px;min-width:0;min-height:52px;padding:11px 12px;font:inherit;font-size:16px;color:var(--ink);background:rgba(3,10,16,.8);border:1px solid var(--line-2);resize:vertical}
.try textarea::placeholder{color:var(--ink-3)}
.order-out{margin-top:16px;display:grid;gap:8px}
.order-out:empty{margin:0}

/* ── inner pages ── */
.crumbs{max-width:1120px;margin-inline:auto;padding:14px var(--gut) 0;font-size:14px;color:var(--ink-3)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px}
.crumbs a{color:var(--ink-2)}
.two-head{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:center}
.svc-img{width:100%;max-width:300px;justify-self:end;mix-blend-mode:screen}
@media(max-width:760px){.two-head{grid-template-columns:1fr}.svc-img{display:none}}
.sec h2{margin-top:44px}
.sec .wrap>h2:first-of-type,.sec>.wrap>.hud+h2{margin-top:0}
.sec h3{margin-top:24px;margin-bottom:8px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media(max-width:700px){.two{grid-template-columns:1fr}}
.opts li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.opts b{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.num{counter-reset:n}
.num li{counter-increment:n;position:relative;padding-left:30px;margin-top:8px;color:var(--ink-2)}
.num li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;font-family:var(--mono);color:var(--holo);font-size:13px;top:.2em}
.bps{display:grid;gap:14px;margin-top:14px}
.bp li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.bp li:last-child{border-bottom:0}
.bp b{font-size:16px}
.bp em{font-style:normal;font-family:var(--mono);font-size:11.5px;margin-left:8px;padding:1px 6px;border:1px solid var(--line-2);color:var(--ink-3)}
.bp .t-human em{border-color:var(--amber);color:var(--amber)}
.bp p{color:var(--ink-2);font-size:15px}
.sample img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%;outline:1px solid rgba(255,255,255,.1);outline-offset:-1px;margin-bottom:12px}
.sample p{color:var(--ink-2);font-size:15px;margin-top:4px}
.links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px}
.links a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.recs li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px}
.recs .i{width:28px;height:28px;color:var(--holo)}
.recs p{color:var(--ink-2);margin-top:4px}
.ask{margin-top:24px}
.stat .big{font-size:clamp(48px,9vw,88px);font-weight:900;color:var(--amber);line-height:1;font-variant-numeric:tabular-nums}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:700px){.cols3{grid-template-columns:1fr}}
.cols3 h4{margin:0;font-size:16px}
.cols3 li,.plan li{margin-top:6px;color:var(--ink-2)}
.plan li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 12px}
.plan .tm{font-family:var(--mono);color:var(--holo);font-size:13.5px;grid-row:span 2}
.plan li>span:last-child{color:var(--ink-3);font-size:14.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips li{border:1px solid var(--line-2);padding:4px 10px;font-size:14px}
.story{margin:28px 0 0}
.story p+p{margin-top:12px;color:var(--ink-2)}
.nap{font-style:normal;line-height:1.8}

/* ── footer + mobile dock ── */
.foot{border-top:1px solid var(--line);padding-block:36px 40px;margin-top:20px;background:rgba(3,7,11,.6);font-size:15px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr}}
.foot address{font-style:normal;color:var(--ink-2);margin-top:8px}
.foot nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
.foot nav a{display:inline-flex;min-height:40px;align-items:center;color:var(--ink-2)}
.legal{margin-top:22px}
.dock{display:none}
@media(max-width:760px){
  body{padding-bottom:76px}
  .dock{display:flex;position:fixed;inset:auto 0 0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(3,7,11,.95);border-top:1px solid var(--line-2)}
  .dock .btn{flex:1}
}

/* one quiet arrival: the frame corners draw in. Content is never hidden behind it (ECC perf: LCP is the text). */
@media (prefers-reduced-motion:no-preference){
  .hero .panel::before,.hero .panel::after{animation:corner .5s var(--ease-out) .1s both}
  @keyframes corner{from{width:0;height:0;opacity:0}to{width:12px;height:12px;opacity:1}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.btn:active{transform:none}}

/* ═════════ v4.1 · ARK·OS layer ═════════ */
/* HUD — fixed frame and readouts; decoration only, never takes clicks */
.jv-hud{position:fixed;inset:0;z-index:30;pointer-events:none}
.jv-hud .c{position:absolute;width:26px;height:26px;border:1.5px solid rgba(79,216,255,.55)}
.jv-hud .tl{top:calc(var(--top) + 10px);left:10px;border-right:0;border-bottom:0}
.jv-hud .tr{top:calc(var(--top) + 10px);right:10px;border-left:0;border-bottom:0}
.jv-hud .bl{bottom:10px;left:10px;border-right:0;border-top:0}
.jv-hud .br{bottom:10px;right:10px;border-left:0;border-top:0}
.jv-read{position:absolute;display:flex;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(139,230,255,.7);text-transform:uppercase}
.jv-read b{color:var(--holo);font-weight:700}
.jv-read.r1{top:calc(var(--top) + 14px);right:44px}
.jv-read.r2{bottom:14px;left:44px}
.sig i{display:inline-block;width:3px;height:8px;margin-left:2px;background:var(--holo);animation:sig 1.6s steps(1) infinite}
.sig i:nth-child(2){animation-delay:.2s}.sig i:nth-child(3){animation-delay:.4s}.sig i:nth-child(4){animation-delay:.6s}
@keyframes sig{50%{opacity:.25}}
.jv-ring{position:absolute;right:-12vmin;top:18vh;width:min(62vmin,560px);opacity:.22}
.jv-ring circle,.jv-ring path{fill:none;stroke:var(--holo);stroke-width:.6}
.jv-ring .a{stroke-dasharray:2 6;animation:spin 80s linear infinite}
.jv-ring .b{stroke-dasharray:40 12 4 12;animation:spin 46s linear infinite reverse}
.jv-ring .c{stroke-dasharray:1 3;animation:spin 120s linear infinite}
.jv-ring circle{transform-origin:100px 100px}
@keyframes spin{to{transform:rotate(360deg)}}
.jv-sweep{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(79,216,255,.55),transparent);
  box-shadow:0 0 18px rgba(79,216,255,.5);animation:sweep 9s linear infinite;opacity:.6}
@keyframes sweep{0%{transform:translateY(var(--top))}100%{transform:translateY(100vh)}}
.jv-reticle{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border:1px solid rgba(79,216,255,.5);border-radius:50%;opacity:0;transition:opacity .3s}
.jv-reticle.on{opacity:1}
.jv-reticle::before,.jv-reticle::after{content:"";position:absolute;background:rgba(79,216,255,.6)}
.jv-reticle::before{left:50%;top:-8px;bottom:-8px;width:1px}
.jv-reticle::after{top:50%;left:-8px;right:-8px;height:1px}
.jv-reticle i{position:absolute;inset:16px;border-radius:50%;background:var(--holo);box-shadow:0 0 10px var(--holo)}
@media(max-width:760px){.jv-read.r1,.jv-read.r2,.jv-ring,.jv-hud .c{display:none}}
.jv-calm{position:fixed;right:14px;bottom:14px;z-index:41;min-height:44px;padding:6px 12px;font:600 12px var(--mono);letter-spacing:.1em;
  color:var(--ink-2);background:rgba(3,7,11,.85);border:1px solid var(--line-2);cursor:pointer}
@media(hover:hover) and (pointer:fine){.jv-calm:hover{color:var(--holo)}}
.jv-calm[aria-pressed=true]{color:#02202E;background:var(--holo)}
@media(max-width:760px){.jv-calm{bottom:84px}}
.calm .jv-ring *,.calm .jv-sweep,.calm .sig i{animation:none!important}
.calm .jv-sweep{display:none}
.calm .sim::after{animation:none!important}

/* first visit (v4.8) — like JARVIS powering up: a crosshair ignites, the rings draw themselves, the counter runs to 100,
   SYSTEMS ONLINE, then the screen zooms through and every pane flies out of the centre. ~1.9 s, click or any key skips. */
.jv-boot{position:fixed;inset:0;z-index:200;display:grid;place-items:center;cursor:pointer;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,rgba(14,58,86,.5),#010305 62%) #010305;transition:opacity .42s var(--ease-out),transform .42s var(--ease-out)}
.jv-boot.off{opacity:0;transform:scale(1.3);pointer-events:none}
.jv-boot .x-h,.jv-boot .x-v{position:absolute;opacity:.65}
.jv-boot .x-h{left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--holo),transparent);transform:scaleX(0);animation:xIn .5s var(--ease-out) forwards}
.jv-boot .x-v{top:0;bottom:0;left:50%;width:1px;background:linear-gradient(transparent,var(--holo),transparent);transform:scaleY(0);animation:yIn .5s var(--ease-out) .06s forwards}
@keyframes xIn{to{transform:scaleX(1)}}@keyframes yIn{to{transform:scaleY(1)}}
.jv-core{position:relative;width:min(62vmin,380px);aspect-ratio:1;display:grid;place-content:center;justify-items:center;text-align:center}
.jv-core svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jv-core circle,.jv-core path{fill:none;stroke:var(--holo)}
.jv-core circle{transform-origin:100px 100px}   /* not on the tick paths: it would bend their own rotate() */
.jv-core .dr{stroke-dasharray:100;stroke-dashoffset:100;animation:draw .7s var(--ease-out) forwards}
.jv-core .r1{stroke-width:.6;animation-delay:.12s}
.jv-core .r3{stroke-width:1;animation-delay:.3s}
@keyframes draw{to{stroke-dashoffset:0}}
.jv-core .ticks path{stroke-width:.7}
.jv-core .ticks{transform-origin:100px 100px;opacity:0;animation:on .3s .45s forwards,spin 16s linear infinite reverse}
.jv-core .seg{stroke-width:5;stroke-dasharray:5.5 2.8;opacity:0;animation:on .3s .38s forwards,spin 7s linear infinite}
.jv-core .arc{stroke-width:1.8;stroke-dasharray:62 38;opacity:0;animation:on .2s .55s forwards,spin 1.4s linear infinite}
.jv-core .e{fill:rgba(79,216,255,.1);stroke-width:1.4;opacity:0;animation:on .3s .65s forwards;transition:fill .25s}
.jv-boot.up .jv-core .e{fill:rgba(79,216,255,.32)}
@keyframes on{to{opacity:1}}
.jv-pct{position:relative;white-space:nowrap;font:800 clamp(30px,8vmin,46px)/1 var(--mono);color:var(--holo-2);font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(79,216,255,.7)}
.jv-pct small{font-size:.42em;margin-left:2px}
.jv-name{position:relative;margin-top:8px;font:700 10.5px var(--mono);letter-spacing:.32em;color:var(--holo)}
.jv-boot.up .jv-name{color:var(--amber)}
.jv-log{position:absolute;left:clamp(16px,5vw,56px);bottom:clamp(56px,10vh,96px);font:12px/1.9 var(--mono);letter-spacing:.1em;color:var(--ink-3)}
.jv-log li{opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.jv-log li.on{opacity:1;transform:none}
.jv-log li.on::after{content:" ······ OK";color:var(--holo)}
.jv-hex{position:absolute;right:clamp(16px,5vw,56px);top:clamp(40px,12vh,110px);font:11px/1.8 var(--mono);color:rgba(79,216,255,.5);text-align:right}
.jv-hex span{display:block;clip-path:inset(0 100% 0 0);animation:clipIn .3s steps(10) forwards}
.jv-boot>small{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:12.5px;color:var(--ink-3)}
@media(max-width:760px){.jv-hex{display:none}.jv-log{left:0;right:0;bottom:64px;text-align:center}}
/* while the intro plays the panes wait; a CSS fallback shows everything even if the script never runs */
.jv-intro main .panel{opacity:0;animation:jvShow 0s 3s forwards}
@keyframes jvShow{to{opacity:1}}
.jv-deploy .jv-fly{opacity:1;animation:deploy .75s var(--ease-out) both;animation-delay:calc(var(--d,0s) + .05s);backdrop-filter:none}
@keyframes deploy{
  0%{opacity:0;transform:perspective(1100px) translate(var(--fx,0px),var(--fy,0px)) scale(.3) rotateY(var(--dry,0deg));clip-path:inset(46% 0 46% 0)}
  20%{opacity:1}
  60%{clip-path:inset(0 0 0 0)}
  100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}

/* panels below the fold boot as they scroll in: a line, then the pane */
.jv-wait{opacity:0}
.jv-on{animation:unfold .62s var(--ease-out) both}
@keyframes unfold{0%{clip-path:inset(49% 0 49% 0);opacity:.2}35%{clip-path:inset(49% 0 49% 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:1}}
.panel.jv-on::before,.panel.jv-on::after{animation:corner .5s var(--ease-out) .3s both}
@keyframes corner{from{width:0;height:0;opacity:0}to{width:12px;height:12px;opacity:1}}

/* holographic tilt */
@media(hover:hover) and (pointer:fine){[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s var(--ease-out),border-color .16s}}   /* phones: no 3D layer per card */

/* blueprint simulation — a signal walks down the steps */
.bp.flow{position:relative}
.bp.flow li{transition:opacity .25s}.bp.flow.running li:not(.on){opacity:.42}   /* dim only while it plays — never left dim (WCAG 1.4.3) */
.bp.flow li.on{opacity:1}
.bp.flow li .n{position:relative}
.bp.flow li.cur .n::after{content:"";position:absolute;left:-12px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--holo);border-radius:50%;box-shadow:0 0 10px var(--holo)}
.bp.flow li.cur{background:linear-gradient(90deg,rgba(79,216,255,.12),transparent 70%)}
.bp.flow li.hold{background:linear-gradient(90deg,rgba(255,176,32,.16),transparent 70%)}
.bp.flow li.hold em{animation:pulse .5s ease-in-out infinite alternate}
@keyframes pulse{to{background:var(--amber);color:#1A1200}}
.bp.flow.done li{opacity:1}
.jv-run{margin-top:12px}
.btn--sm{min-height:44px;padding:9px 15px;font-size:14px}
.sim .demo-head .btn{white-space:nowrap}
.btn--ghost{border-color:var(--line-2);color:var(--ink);background:rgba(79,216,255,.05)}

/* live demo containers */
.sim{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,rgba(14,58,86,.26),rgba(4,16,24,.78));padding:clamp(14px,2.2vw,22px);margin-top:14px;min-height:180px}
.sim::before{content:"SIM";position:absolute;top:-1px;right:-1px;font:700 10.5px var(--mono);letter-spacing:.2em;padding:3px 8px;background:var(--holo);color:#02202E}
.jv .sim:not(.sim-on)::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--holo);box-shadow:0 0 14px var(--holo);animation:scanY 1.4s ease-in-out infinite alternate}
@keyframes scanY{from{transform:translateY(-60px)}to{transform:translateY(60px)}}
.sim.sim-on{animation:simOn .5s var(--ease-out)}
@keyframes simOn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.sim-h{margin-top:34px}
.sim-h p{color:var(--ink-2);margin-top:4px;max-width:70ch}

/* systems catalogue */
.sys-card{display:flex;flex-direction:column;gap:8px}
.sys-card .k{font:700 11.5px var(--mono);letter-spacing:.14em;color:var(--holo);text-transform:uppercase}
.sys-card h3{margin:0}
.sys-card p{color:var(--ink-2);font-size:15px}
.sys-card .row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:auto;padding-top:6px}
.sys-card .tagx{font:12px var(--mono);color:var(--ink-3)}

/* the hologram window */
dialog.holo{width:min(1080px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line-2);background:#041019;color:var(--ink);
  box-shadow:0 0 0 1px rgba(79,216,255,.15),0 0 60px rgba(79,216,255,.18),0 30px 80px rgba(0,0,0,.6)}
dialog.holo::backdrop{background:rgba(1,4,7,.78);backdrop-filter:blur(3px)}
dialog.holo .dlg-in{padding:clamp(16px,2.6vw,28px);overflow:auto;max-height:calc(100vh - 26px);max-height:calc(100dvh - 26px)}
dialog.holo .dlg-top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
dialog.holo .dlg-top h2{font-size:clamp(20px,2.6vw,28px);margin:0}
dialog.holo .dlg-desc{color:var(--ink-2);margin-top:6px}
dialog.holo .x{min-width:44px;min-height:44px;font-size:22px;color:var(--ink);background:none;border:1px solid var(--line-2);cursor:pointer}
dialog.holo.jv-open{animation:dlgIn .45s var(--ease-out)}
@keyframes dlgIn{0%{clip-path:inset(49% 0 49% 0);opacity:.3}40%{clip-path:inset(49% 0 49% 0);opacity:1}100%{clip-path:inset(0 0 0 0)}}

/* new systems: booking · quote · review */
.b-sms{background:rgba(52,199,89,.14);border:1px solid rgba(52,199,89,.5);padding:10px 12px;margin:8px 0 12px;max-width:60ch}
.demo-book tr.live td{color:var(--holo)}
.rp.r-ok{color:var(--ok)}.rp.r-change{color:var(--amber)}.rp.r-none{color:var(--ink-3)}
.q-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px}
@media(max-width:760px){.q-grid{grid-template-columns:1fr}}
.q-in{display:grid;gap:14px;align-content:start}
.q-in label{display:grid;gap:6px;font-weight:700}
.q-grid>*{min-width:0}
.q-in fieldset{min-width:0;border:1px solid var(--line);padding:10px 12px;display:flex;flex-wrap:wrap;gap:6px 16px}
.q-in legend{font-weight:700;padding:0 4px}
.q-in .opt{display:flex;align-items:center;gap:8px;font-weight:600;min-height:40px}
.q-in input[type=range]{width:100%;accent-color:var(--holo)}
.q-in select,.try-row select,.try-row input{min-height:44px;padding:8px 10px;font:inherit;font-size:16px;color:var(--ink);background:rgba(3,10,16,.8);border:1px solid var(--line-2)}
.q-in output{font-family:var(--mono);color:var(--holo)}
.kpis.one{grid-template-columns:1fr}
.rv-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media(max-width:760px){.rv-cols{grid-template-columns:1fr}}
.rv-list{display:grid;gap:8px}
.rv{width:100%;text-align:left;display:grid;gap:4px;padding:12px;font:inherit;color:var(--ink);background:rgba(3,14,22,.6);border:1px solid var(--line);cursor:pointer}
.rv.on{border-color:var(--holo)}
@media(hover:hover) and (pointer:fine){.rv:hover{border-color:var(--holo)}}
.rv.low{border-color:rgba(255,90,71,.6)}
.rv span{color:var(--ink-2);font-size:15px}
.rv em{font-style:normal;font-size:12.5px;color:var(--red)}
.stars{color:var(--amber);letter-spacing:2px}.stars i{font-style:normal;color:rgba(255,176,32,.25)}
.rv-draft{min-height:4.5em;padding:10px 12px;border:1px solid var(--line-2);background:rgba(3,10,16,.7);margin:8px 0 10px}
.rv-draft[contenteditable=true]{outline:2px solid var(--holo)}
.ctas-s{display:flex;flex-wrap:wrap;gap:8px}

@media (prefers-reduced-motion:reduce){
  .jv-hud .jv-ring *,.jv-sweep,.sig i,.sys-card .viz i,.sim:not(.sim-on)::after{animation:none!important}
  .jv-sweep{display:none}
  [data-tilt]{transform:none}
}

/* ═════════ v4.2 · sharper graphics ═════════ */
/* film grain — fixed, never scrolls, never takes clicks */
body::after{content:"";position:fixed;inset:0;z-index:29;pointer-events:none;opacity:.04;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* order-flow schematic in the hero card */
.flowviz{display:block;width:100%;height:auto;margin:2px 0 14px}
.flowviz .w{fill:none;stroke:rgba(79,216,255,.35);stroke-width:1;stroke-dasharray:2 3}
.flowviz rect{fill:rgba(3,14,22,.85);stroke:rgba(79,216,255,.45);stroke-width:1}
.flowviz .core rect{fill:rgba(79,216,255,.14);stroke:var(--holo)}
.flowviz .out rect{stroke:var(--amber)}
.flowviz text{fill:var(--ink-2);font:600 10.5px var(--mono);text-anchor:middle;letter-spacing:.04em}
.flowviz .core text{fill:var(--holo);font-weight:700}
.flowviz .out text{fill:var(--amber)}
.flowviz .pk{fill:var(--holo);offset-rotate:0deg;animation:pk 1.65s cubic-bezier(.45,0,.55,1) infinite}
.flowviz .pk.out{fill:var(--amber)}
@keyframes pk{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.flowviz .core rect{animation:corePulse 1.65s ease-in-out infinite}
@keyframes corePulse{50%{fill:rgba(79,216,255,.26)}}
.calm .flowviz *{animation:none!important}
.flowviz.off *{animation-play-state:paused}.calm .flowviz .pk{opacity:0}

.jv-clip{animation:clipIn .9s steps(18) .25s both}
@keyframes clipIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* scroll circuit — wide screens only */
.jv-rail{position:fixed;left:22px;top:calc(var(--top) + 56px);bottom:56px;width:22px;z-index:31;pointer-events:none}
.jv-rail .line,.jv-rail .fill{position:absolute;left:10px;top:0;bottom:0;width:1px;background:rgba(79,216,255,.18)}
.jv-rail .fill{background:var(--holo);transform-origin:top;transform:scaleY(0)}
@supports (animation-timeline:scroll()){.jv-rail .fill{animation:fill linear both;animation-timeline:scroll(root)}}
@keyframes fill{to{transform:scaleY(1)}}
.jv-rail b{position:absolute;left:5px;width:11px;height:11px;margin-top:-5px;border:1px solid rgba(79,216,255,.5);background:#03070B;transform:rotate(45deg);transition:background-color .3s,border-color .3s}
.jv-rail b span{position:absolute;left:18px;top:-3px;transform:rotate(-45deg);transform-origin:left;font:700 10px var(--mono);color:var(--ink-3);opacity:0;transition:opacity .3s}
.jv-rail b.on{background:var(--holo);border-color:var(--holo)}
.jv-rail b.on span{opacity:1;color:var(--holo)}
@media(max-width:1279px){.jv-rail{display:none}}

/* systems as a bento: wide and narrow tiles, never three equal boxes */
.sys-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:22px}
.sys-grid>li{grid-column:span 2}
.sys-grid>li:nth-child(12n+1),.sys-grid>li:nth-child(12n+9){grid-column:span 4}
.sys-grid>li:nth-child(12n+6),.sys-grid>li:nth-child(12n+7){grid-column:span 3}
.sys-grid.home>li:nth-child(n){grid-column:span 3}
.sys-grid.home>li:nth-child(1),.sys-grid.home>li:nth-child(4){grid-column:span 4}
.sys-grid.home>li:nth-child(2),.sys-grid.home>li:nth-child(3){grid-column:span 2}
@media(max-width:899px){.sys-grid>li:nth-child(n),.sys-grid.home>li:nth-child(n){grid-column:span 3}}
@media(max-width:560px){.sys-grid{grid-template-columns:1fr}.sys-grid>li:nth-child(n),.sys-grid.home>li:nth-child(n){grid-column:auto}}

/* each card's live picture */
.sys-card .viz{height:68px;position:relative;overflow:hidden;border:1px solid rgba(79,216,255,.16);background:linear-gradient(180deg,rgba(3,14,22,.6),rgba(3,14,22,.2))}
.viz i{position:absolute;display:block}
.v-chat i{height:12px;border-radius:2px;left:10px;background:rgba(254,229,0,.85);animation:msg 4.8s var(--ease-out) infinite}
.v-chat i:nth-child(1){top:8px;width:46%}
.v-chat i:nth-child(2){top:27px;left:auto;right:10px;width:38%;background:rgba(79,216,255,.55);animation-delay:.8s}
.v-chat i:nth-child(3){top:46px;width:28%;animation-delay:1.6s}
@keyframes msg{0%,5%{opacity:0;transform:translateY(6px)}15%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
.v-rows i{left:10px;right:10px;height:9px;background:linear-gradient(90deg,rgba(79,216,255,.5) var(--w,60%),rgba(79,216,255,.12) 0);transform-origin:left;animation:row 4.2s var(--ease-out) infinite}
.v-rows i:nth-child(1){top:8px;--w:72%}.v-rows i:nth-child(2){top:22px;--w:48%;animation-delay:.35s}
.v-rows i:nth-child(3){top:36px;--w:85%;animation-delay:.7s}.v-rows i:nth-child(4){top:50px;--w:30%;animation-delay:1.05s;background:linear-gradient(90deg,rgba(255,176,32,.7) var(--w),rgba(255,176,32,.14) 0)}
@keyframes row{0%{transform:scaleX(0)}25%,85%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.v-bars i{bottom:8px;width:8%;background:linear-gradient(var(--holo),rgba(79,216,255,.15));transform-origin:bottom;animation:bar 2.6s ease-in-out infinite alternate}
.v-bars i:nth-child(1){left:6%;height:34%}.v-bars i:nth-child(2){left:19%;height:58%;animation-delay:.2s}.v-bars i:nth-child(3){left:32%;height:44%;animation-delay:.4s}
.v-bars i:nth-child(4){left:45%;height:76%;animation-delay:.6s}.v-bars i:nth-child(5){left:58%;height:50%;animation-delay:.8s}
.v-bars i:nth-child(6){left:71%;height:66%;animation-delay:1s}.v-bars i:nth-child(7){left:84%;height:40%;animation-delay:1.2s;background:linear-gradient(var(--amber),rgba(255,176,32,.15))}
@keyframes bar{to{transform:scaleY(.5)}}
.v-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:7px 10px}
.v-cal i{position:static;height:14px;background:rgba(79,216,255,.1);animation:cal 3.6s steps(1) infinite}
.v-cal i:nth-child(3n+1){animation-delay:.6s}.v-cal i:nth-child(4n+2){animation-delay:1.4s}.v-cal i:nth-child(5n){animation-delay:2.2s}
@keyframes cal{40%{background:rgba(79,216,255,.55)}70%{background:rgba(79,216,255,.1)}}
.calm .viz i{animation:none!important;opacity:1;transform:none}

/* spotlight also lights the demo frames */
.sim{background:radial-gradient(420px circle at var(--mx,-600px) var(--my,-600px),rgba(79,216,255,.08),transparent 62%),linear-gradient(180deg,rgba(14,58,86,.26),rgba(4,16,24,.78))}

@media (prefers-reduced-motion:reduce){
  .flowviz *,.viz i{animation:none!important}.flowviz .pk{opacity:0}.viz i{opacity:1;transform:none}
  .jv-rail .fill{animation:none;transform:scaleY(1);opacity:.4}
}

/* ═════════ v4.8 · pictures first, fewer words ═════════ */
/* hero: the holographic workshop behind the words (900 px file on phones) */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 20%,rgba(3,7,11,.7) 55%,rgba(3,7,11,.4)),linear-gradient(0deg,var(--bg),transparent 35%),url(img/bg-workshop.jpg) 70% 40%/cover no-repeat}
@media(max-width:760px){.hero::before{background:linear-gradient(0deg,var(--bg) 10%,rgba(3,7,11,.82) 55%,rgba(3,7,11,.55)),url(img/bg-workshop-m.jpg) 60% 0/cover no-repeat}}
/* v4.10 — Paul's line under the headline: the first half carries the weight */
.hero .manifesto{color:var(--ink);font-weight:700;font-size:clamp(17px,1.9vw,20px);line-height:1.6;max-width:none}
.hero h1{font-size:clamp(30px,4.6vw,52px)}
/* the services in a ring around the core — links stay put, only the ring and the spokes move */
.hero-orbit{position:relative;width:100%;max-width:470px;aspect-ratio:1;margin-inline:auto}
.hero-orbit svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible}
.hero-orbit .o-out{fill:none;stroke:rgba(79,216,255,.14);stroke-width:.25}
.hero-orbit .o-ring{fill:none;stroke:rgba(79,216,255,.35);stroke-width:.3;stroke-dasharray:.6 1.4;transform-origin:50px 50px;animation:spin 90s linear infinite}
.hero-orbit .o-spoke{stroke:rgba(79,216,255,.5);stroke-width:.35;stroke-dasharray:1 2}   /* v4.11: still — motion beside the headline made it harder to read */

.hero-orbit .o-core{fill:rgba(7,40,58,.92);stroke:var(--holo);stroke-width:.5}
.hero-orbit .o-arc{fill:none;stroke:var(--holo);stroke-width:.8;stroke-dasharray:62 38;transform-origin:50px 50px;animation:spin 3.2s var(--ease-out) 2}   /* turns twice on arrival, then rests */
.hero-orbit .o-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 clamp(9.5px,1.4vw,12px) var(--mono);letter-spacing:.2em;color:var(--holo-2);pointer-events:none;white-space:nowrap}
.hero-orbit li{position:absolute;width:27%;transform:translate(-50%,-36%)}
.hero-orbit a{display:grid;justify-items:center;gap:6px;color:var(--ink);text-decoration:none;text-align:center;font-weight:800;font-size:clamp(11.5px,1.5vw,14px);line-height:1.25;min-height:44px}
.hero-orbit img{width:74%;aspect-ratio:1;object-fit:cover;object-position:50% 35%;border-radius:50%;border:1px solid var(--line-2);background:#010305;
  box-shadow:0 0 0 4px rgba(3,7,11,.9),0 0 22px -6px rgba(79,216,255,.6);transition:transform .2s var(--ease-out),border-color .16s var(--ease-out)}
.hero-orbit span{text-shadow:0 1px 6px #03070B,0 0 2px #03070B;overflow-wrap:normal;hyphens:auto}   /* never split a label mid-word */
.hero-orbit a:active img{transform:scale(.96)}
@media(hover:hover) and (pointer:fine){.hero-orbit a:hover img{transform:scale(1.06);border-color:var(--holo)}.hero-orbit a:hover{color:var(--holo)}}
.hero-orbit.off *,.calm .hero-orbit *{animation-play-state:paused}
.lite .hero-orbit *{animation:none!important}
@media (prefers-reduced-motion:reduce){.hero-orbit *{animation:none!important}.hero-orbit img{transition:none}}
@media(max-width:899px){.hero-orbit{max-width:400px;margin-top:8px}}
/* phones: the service tiles follow right under the buttons — the ring would repeat them and sit under the fixed bar */
@media(max-width:760px){.hero-orbit{display:none}}
/* Korean hero: two buttons, email as a quiet link under them */
.hero-mail{margin-top:12px;font-size:15px}.hero-mail a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink-2)}
@media(hover:hover) and (pointer:fine){.hero-mail a:hover{color:var(--holo)}}
/* phones: the motion switch lives in the footer instead of floating over the page */
.foot .jv-calm{position:static;margin-top:16px}
.jv-intro .hero-orbit{opacity:0;animation:jvShow 0s 3s forwards}

/* service tiles — a picture and one line each */
.svc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.svc-tile{display:flex;flex-direction:column;height:100%;padding:0;color:var(--ink);text-decoration:none;
  transition:border-color .16s var(--ease-out),transform .16s var(--ease-out)}
.svc-tile .pic{display:block;aspect-ratio:1;overflow:hidden;background:#010305}
.svc-tile .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform .5s var(--ease-out)}
.svc-tile .cap{display:grid;gap:4px;justify-items:start;padding:14px 16px 18px}
.svc-tile b{font-size:19px;font-weight:850;line-height:1.3}
.svc-tile .one{color:var(--ink-2);font-size:15px;line-height:1.5}
.svc-tile .tag-price{font-size:12.5px;padding:2px 8px}
.svc-tile:active{transform:scale(.985)}
@media(hover:hover) and (pointer:fine){.svc-tile:hover{border-color:var(--holo)}.svc-tile:hover .pic img{transform:scale(1.04)}}
@media(max-width:899px){.svc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.svc-tiles{gap:10px}.svc-tile .cap{padding:10px 12px 14px}.svc-tile b{font-size:16px}.svc-tile .one{font-size:13.5px}}

/* model archive — Mark I to IV, the last one still being assembled */
.archive{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.archive li{display:flex;flex-direction:column;padding:0}
.archive img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#010305}
.archive .cap{display:grid;gap:2px;padding:12px 14px 16px}
.archive .hud{margin:0;font-size:11px}
.archive b{font-size:18px;font-weight:850}
.archive .sub{font-size:14px;color:var(--ink-2)}
.archive .next{border-style:dashed;border-color:rgba(255,176,32,.55)}
.archive .next .hud{color:var(--amber)}
.archive .next img{filter:saturate(.6) brightness(.8)}
@media(max-width:760px){.archive{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.archive b{font-size:16px}}
.sec .archive+.more{margin-top:14px}

/* industries as one row of chips */
.ind-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ind-chips a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--line-2);background:rgba(79,216,255,.05);
  color:var(--ink);text-decoration:none;font-weight:700;transition:border-color .16s var(--ease-out),color .16s var(--ease-out),transform .16s var(--ease-out)}
.ind-chips a:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.ind-chips a:hover{border-color:var(--holo);color:var(--holo)}}

/* animations pause while off screen (set by jarvis.js) */
.viz.off i{animation-play-state:paused}

/* older browsers: no moving-along-a-path → hide the packets rather than leave dots in a corner */
@supports not (offset-path:path('M0 0')){.flowviz .pk{display:none}}

/* light mode for low-memory phones, data saver and slow CPUs (boot.js sets .lite and skips the intro): the decoration goes, the content stays */
.lite body::after,.lite .jv-sweep,.lite .jv-ring,.lite .jv-reticle,.lite .jv-hex{display:none}
.lite dialog.holo::backdrop{backdrop-filter:none}
.lite .flowviz *,.lite .viz i{animation:none!important}.lite .flowviz .pk{display:none}.lite .viz i{opacity:1;transform:none}
.lite .jv-on,.lite .jv-deploy .jv-fly{animation:none}.lite .jv-wait{opacity:1}

/* phones: the sweep line and the film grain are two full-screen layers for almost nothing */
@media(max-width:760px){.jv-sweep,body::after{display:none}}
/* the fixed readouts overprint the text below 1280 px (they had room only beside the content) */
@media(max-width:1279px){.jv-read{display:none}}
/* short screens (landscape phones, 400 % zoom): the fixed bottom bar and the pause button would cover the page */
@media(max-height:480px){.dock,.jv-calm{display:none}body{padding-bottom:0}}


@media (prefers-reduced-motion:reduce){
  .svc-tile,.svc-tile .pic img,.ind-chips a{transition:none}.svc-tile:active,.ind-chips a:active{transform:none}
  .sim.sim-on,dialog.holo.jv-open{animation:none}
}
/* ── v4.8 compatibility (separate review) ── */
/* phones: the menu opened from the button's right edge and ran off the left of a 320–375 px screen — anchor it to the bar */
@media(max-width:899px){.top-in{position:relative}.nav{position:static}.nav-list{right:var(--gut);left:auto;max-width:calc(100vw - 2*var(--gut))}}
/* browsers without <dialog> (iOS 15.0–15.3, old webviews) showed the empty window under the footer */
dialog.holo:not([open]){display:none}
/* landscape iPhone with viewport-fit=cover: keep text clear of the notch */
.wrap{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
/* `inset` arrived late in some webviews — spell the fixed layers out too (the later `inset` still wins where it works) */
.jv-hud,.jv-boot,body::after{top:0;right:0;bottom:0;left:0}
@media(max-width:760px){.dock{left:0;right:0;bottom:0}}

/* the price chip reads after the service name (link name order) but shows above it */
.svc-tile .tag-price{order:-1}@media(max-width:760px){br.pc{display:none}}   /* line break for wide screens only */