:root{
  --brand:#0ea5e9;
  --brand2:#38bdf8;
  --bg:#050507;
  --panel:#0d0d11;
  --fg:#eceef3;
  --dim:#8b8b97;
  --r:14px;
  --sec:104px;
  --shell-max:1180px;

  --bg2:#0b0b0f;
  --line:#1e1e26;
  --line2:#2c2c37;
  --dim2:#61626d;
  --brand-dim:rgba(14,165,233,.13);
  --brand-line:rgba(14,165,233,.42);
  --ok:#4ade80;
  --err:#f2a5a5;
  --shadow:0 26px 60px -34px rgba(0,0,0,.9);
  --btn-fg:#02121c;

  --shell:min(var(--shell-max), 100% - 44px);
  --gap:20px;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Inter Tight","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --grotesk:"Space Grotesk","Inter Tight",ui-sans-serif,system-ui,sans-serif;

  --btn-r:calc(var(--r) - 4px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  --bar-h:0px;

  
  --sheet-w:clamp(288px, 50vw, 460px);
  --sheet-pad:22px;
}
html[data-font="serif"] h1,html[data-font="serif"] h2,html[data-font="serif"] h3,
html[data-font="serif"] .hero h1{font-family:var(--serif); letter-spacing:-.02em}
html[data-font="grotesk"]{--sans:var(--grotesk)}
html[data-shape="pill"]{--btn-r:999px}
html[data-shape="square"]{--btn-r:4px}
html[data-density="compact"]{--gap:14px}
html[data-density="airy"]{--gap:28px}

html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{
  color-scheme:light;
  --brand:#0369a1;
  --brand2:#0284c7;
  --bg:#f7f8fa;
  --panel:#ffffff;
  --fg:#12141a;
  --dim:#5c6070;
  --bg2:#eef0f4;
  --line:#e2e5ea;
  --line2:#cdd2da;
  --dim2:#767b8a;
  --brand-dim:rgba(3,105,161,.09);
  --brand-line:rgba(3,105,161,.28);
  --err:#b42318;
  --ok:#15803d;
  --shadow:0 22px 50px -34px rgba(15,23,42,.45);
  --btn-fg:#ffffff;
}

@supports (color: color-mix(in srgb, #000, #fff)){
  html[data-theme="dark"]{
    --bg2:color-mix(in srgb, var(--bg) 88%, #ffffff);
    --line:color-mix(in srgb, var(--fg) 12%, transparent);
    --line2:color-mix(in srgb, var(--fg) 20%, transparent);
    --dim2:color-mix(in srgb, var(--dim) 70%, transparent);
    --brand-dim:color-mix(in srgb, var(--brand) 14%, transparent);
    --brand-line:color-mix(in srgb, var(--brand) 42%, transparent);
  }
  html[data-theme="light"]{
    --bg2:color-mix(in srgb, var(--bg) 92%, #000000);
    --line:color-mix(in srgb, var(--fg) 11%, transparent);
    --line2:color-mix(in srgb, var(--fg) 19%, transparent);
    --dim2:color-mix(in srgb, var(--dim) 80%, transparent);
    --brand-dim:color-mix(in srgb, var(--brand) 9%, transparent);
    --brand-line:color-mix(in srgb, var(--brand) 30%, transparent);
  }
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.028em; line-height:1.12}
p{margin:0}
a{color:inherit; text-decoration:none}
img,video{max-width:100%}
button,input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--brand2); outline-offset:3px; border-radius:6px}

.shell{width:var(--shell); margin-inline:auto}
.dim{color:var(--dim)}
.mono{font-family:var(--mono)}

.noise{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="light"] .noise{opacity:.025}
body.no-noise .noise{display:none}

#progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:90;
  background:linear-gradient(90deg,var(--brand),var(--brand2)); transition:width .1s linear;
}
body.no-progress #progress{display:none}

.blueprint{
  position:absolute; inset:0; pointer-events:none;
  background-size:52px 52px;
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--fg) 4%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--fg) 4%,transparent) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 78%);
}
body.no-grid .blueprint{display:none}

.glow{
  position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 24%,transparent),transparent 70%);
}
html[data-theme="light"] .glow{opacity:.5}

.eyebrow{
  display:flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em; color:var(--brand2);
}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--brand-line)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:var(--btn-r);
  min-height:44px; border:1px solid transparent;
  cursor:pointer; background:var(--brand); color:var(--btn-fg); font-weight:600;
  letter-spacing:-.01em; white-space:nowrap;
  transition:transform .16s ease, background .2s ease, box-shadow .25s ease;
}
.btn:hover{background:var(--brand2); transform:translateY(-1px);
  box-shadow:0 10px 30px -8px color-mix(in srgb,var(--brand) 55%,transparent)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45; cursor:default; transform:none; box-shadow:none}
.btn.ghost{background:transparent; border-color:var(--line2); color:var(--fg); font-weight:500}
.btn.ghost:hover{background:color-mix(in srgb,var(--fg) 6%,transparent); box-shadow:none}
.btn.sm{padding:9px 16px; font-size:14px}
.btn.wide{width:100%}

#announce{
  position:relative; z-index:61; display:flex; align-items:center; gap:12px;
  padding:9px 0; font-size:13.5px;
  background:linear-gradient(90deg,var(--brand-dim),transparent 60%),var(--panel);
  border-bottom:1px solid var(--line);
}
#announce .shell{display:flex; align-items:center; gap:12px; width:var(--shell)}
#announce a{color:var(--brand2); font-weight:550; white-space:nowrap}
#announce button{
  margin-left:auto; background:none; border:0; color:var(--dim); cursor:pointer;
  font-size:18px; line-height:1; padding:0 2px; min-width:32px; min-height:32px;
}
#announce button:hover{color:var(--fg)}

header{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(160%) blur(16px);
  background:color-mix(in srgb,var(--bg) 74%,transparent);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
header.stuck{border-bottom-color:var(--line);
  background:color-mix(in srgb,var(--bg) 92%,transparent)}
.hrow{display:flex; align-items:center; gap:22px; padding:13px 0}
.brand{display:flex; align-items:center; gap:11px; font-weight:650; letter-spacing:.04em}

.brand em,#foot-name em,#sheet-name em{
  font-style:normal; color:var(--brand2);
}
.brand-logo{height:34px; width:auto; display:block; object-fit:contain}

.brand-logo.wide{width:auto; max-width:min(260px, 46vw)}
@media(max-width:520px){ .brand-logo.wide{max-width:52vw} }
.brand-mark{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background:var(--brand-dim); border:1px solid var(--brand-line);
  color:var(--brand2); font-family:var(--mono); font-size:14px; font-weight:700; flex:none;
}

nav.links{display:flex; gap:4px; margin-left:auto; font-size:14.5px; align-items:center}
nav.links a{
  position:relative; color:var(--dim); padding:8px 15px; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
  transition:color .2s ease, background .25s ease, border-color .25s ease;
}
nav.links a:hover{
  color:var(--fg);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--fg) 8%,transparent),
    color-mix(in srgb,var(--fg) 3%,transparent));
  border-color:var(--line);
}
nav.links a[aria-current="page"]{
  color:var(--brand2);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--brand) 17%,transparent),
    color-mix(in srgb,var(--brand) 7%,transparent));
  border-color:var(--brand-line);
  box-shadow:0 8px 22px -16px color-mix(in srgb,var(--brand) 85%,transparent);
}
html[data-bloom="strong"] nav.links a[aria-current="page"]{
  box-shadow:0 0 14px color-mix(in srgb,var(--brand) 35%,transparent);
}
@media(max-width:1240px){ nav.links a{padding:8px 12px} nav.links{gap:2px} }
.tools{display:flex; align-items:center; gap:8px}
.chip{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; min-width:34px; padding:0 10px; cursor:pointer;
  border:1px solid var(--line2); border-radius:10px; background:transparent;
  color:var(--dim); font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  transition:color .2s, border-color .2s, background .2s;
}
.chip:hover{color:var(--fg); border-color:var(--brand-line); background:var(--brand-dim)}
.chip svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7}

.burger{display:none; width:38px; padding:0}
.burger .burger-ico{position:relative; display:block; width:17px; height:12px}
.burger .burger-ico i{
  position:absolute; left:0; right:0; height:1.6px; border-radius:2px;
  background:currentColor;
  transition:transform .36s cubic-bezier(.32,.72,0,1), opacity .18s ease, width .3s ease;
}
.burger .burger-ico i:nth-child(1){top:0}
.burger .burger-ico i:nth-child(2){top:5.2px; width:66%}
.burger .burger-ico i:nth-child(3){top:10.4px}
.burger:hover .burger-ico i:nth-child(2){width:100%}
.burger[aria-expanded="true"]{color:var(--brand2); border-color:var(--brand-line); background:var(--brand-dim)}
.burger[aria-expanded="true"] .burger-ico i:nth-child(1){transform:translateY(5.2px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-ico i:nth-child(2){opacity:0; transform:translateX(-10px)}
.burger[aria-expanded="true"] .burger-ico i:nth-child(3){transform:translateY(-5.2px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){ .burger .burger-ico i{transition:none} }

.hero{position:relative; padding:70px 0 96px; overflow:hidden}
.hero.center .hero-grid{grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center}
.hero.center .eyebrow,.hero.center .hero-actions{justify-content:center}
.hero.center .lead{margin-inline:auto}
.hero.center .cube-stage{order:-1; transform:none; --stage-h:clamp(300px,32vw,440px)}
.hero.center .hero-stats{width:min(100%,760px)}
.hero.media .hero-grid{grid-template-columns:minmax(0,1fr); max-width:780px}
.hero.media .cube-stage{display:none}
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero-bg img,.hero-bg video{width:100%; height:100%; object-fit:cover}
.hero-bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) calc(var(--ov,62) * 1%),transparent),
    var(--bg))}
.hero .glow{width:700px; height:700px; top:-320px; right:-200px}
.hero-grid{
  position:relative; z-index:2; display:grid; gap:clamp(28px,5vw,60px);
  align-items:center; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
}
.hero-logo{display:block; margin-bottom:26px; height:var(--hero-logo-h,92px);
  max-width:100%; width:auto; object-fit:contain}
.badge{
  display:inline-flex; align-items:center; gap:9px; padding:6px 15px; border-radius:999px;
  background:var(--brand-dim); border:1px solid var(--brand-line);
  color:var(--brand2); font-size:12.5px; font-weight:550; letter-spacing:.03em;
}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--brand2);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--brand2) 60%,transparent); animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent} 100%{box-shadow:0 0 0 0 transparent}}

.hero h1{font-size:clamp(35px,4.9vw,61px); margin:24px 0 20px; letter-spacing:-.035em}
.hero h1 em{font-style:normal; color:var(--brand2)}
.hero .lead{font-size:clamp(16px,1.5vw,18.5px); color:var(--dim); max-width:34em}
.hero-actions{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}

.hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  margin-top:48px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.hero-stats > div{background:var(--bg); padding:19px 22px}

.hero-stats .v{font-size:23px; font-weight:650; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.hero-stats .k{font-size:12.5px; color:var(--dim2); margin-top:4px; line-height:1.45}

.cube-stage{
  --stage-h:clamp(360px, 42vw, 620px);
  position:relative; display:grid; place-items:center; width:100%;
  min-height:var(--stage-h);
  perspective:1500px; perspective-origin:50% 46%;
  transform:translateY(calc(var(--lift,46px) * -1));
}
.cube-stage.has-tools{min-height:calc(var(--stage-h) + 76px)}
.cube-orbit{
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  transform:rotateX(calc(var(--tilt,18) * -1deg));
}
.cube{
  --edge-req:236px;
  --cap:64vw;
  --edge:min(var(--edge-req), var(--cap));
  --half:calc(var(--edge) / 2);
  position:relative; width:var(--edge); height:var(--edge);
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  will-change:transform;
  animation:cube-spin var(--speed,26s) linear infinite;
}
@keyframes cube-spin{from{transform:rotateY(0deg)} to{transform:rotateY(360deg)}}
.cube-stage.pausable:hover .cube,
.cube-stage.pausable:focus-within .cube{animation-play-state:paused}

.face{
  position:absolute; inset:0; display:grid; place-items:center;
  background:color-mix(in srgb,var(--brand) 7%,transparent);
  border:1.5px solid var(--brand-line);
  box-shadow:inset 0 0 60px color-mix(in srgb,var(--brand) 16%,transparent);
  font-family:var(--mono); font-weight:700; line-height:1;
  font-size:calc(var(--edge) * var(--letter,.52));
  letter-spacing:-.02em; text-transform:uppercase;
  color:color-mix(in srgb,var(--brand2) 30%,#ffffff);
  text-shadow:0 0 34px color-mix(in srgb,var(--brand2) 60%,transparent);
  user-select:none;
}
html[data-theme="light"] .face{
  color:color-mix(in srgb,var(--brand) 78%,#ffffff);
  text-shadow:0 0 24px color-mix(in srgb,var(--brand) 30%,transparent);
  background:color-mix(in srgb,var(--brand) 6%,#ffffff);
}
.f1{transform:translateZ(var(--half))}
.f2{transform:rotateY(180deg) translateZ(var(--half))}
.f3{transform:rotateY(90deg)   translateZ(var(--half))}
.f4{transform:rotateY(-90deg)  translateZ(var(--half))}
.f5{transform:rotateX(90deg)   translateZ(var(--half))}
.f6{transform:rotateX(-90deg)  translateZ(var(--half))}

.cube-frame{display:none}
.cube-stage.framed::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  border-radius:calc(var(--r) + 10px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent),
             inset 0 0 70px -22px color-mix(in srgb,var(--brand) 75%,transparent);
}
.cube-caption{
  position:absolute; bottom:2%; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim2); white-space:nowrap;
}

@media(prefers-reduced-motion:reduce){
  .cube{animation:none; transform:rotateY(-32deg)}
  .badge::before{animation:none}
}

.marquee{
  border-block:1px solid var(--line); overflow:hidden; padding:16px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex; gap:52px; width:max-content; animation:slide 34s linear infinite}
.marquee span{font-family:var(--mono); font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim2); white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

section{padding:var(--sec) 0; position:relative}
section + section{border-top:1px solid color-mix(in srgb,var(--fg) 5%,transparent)}

.sec-head{
  display:grid; grid-template-columns:200px minmax(0,1fr);
  gap:40px; align-items:start; margin-bottom:48px;
}
.sec-head h2{font-size:clamp(27px,3.1vw,40px)}
.sec-head .lede{color:var(--dim); margin-top:14px; font-size:16.5px; max-width:52ch}

.grid{
  display:grid; gap:var(--gap); align-items:stretch;
  grid-auto-rows:1fr;
  grid-template-columns:minmax(0,1fr);
}
.grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid > *{height:100%}

.card{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 60%,var(--bg)));
  border:1px solid var(--line); border-radius:var(--r); padding:26px 24px 24px;
  overflow:hidden; transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--brand-line),transparent);
  opacity:0; transition:opacity .3s ease;
}
.card:hover{border-color:var(--line2); transform:translateY(-3px); box-shadow:var(--shadow)}
.card:hover::before{opacity:1}
.card h3{font-size:18.5px; margin-bottom:10px}
.card .body{color:var(--dim); font-size:15px; flex:1}
.card .meta{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim2);
}
.card .step{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  color:var(--brand2); margin-bottom:14px;
}
.ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--brand-dim); border:1px solid var(--brand-line); margin-bottom:16px;
}
.ico svg{width:21px; height:21px; stroke:var(--brand2); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}

.work{
  display:flex; flex-direction:column; height:100%; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.work:hover{border-color:var(--brand-line); transform:translateY(-4px); box-shadow:var(--shadow)}
.work-media{position:relative; aspect-ratio:16/10; background:var(--bg2); overflow:hidden}
.work-media[data-open]{cursor:pointer}
.work-media img,.work-media video{width:100%; height:100%; object-fit:cover; display:block}
.work-media .placeholder{
  width:100%; height:100%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%,var(--brand-dim),transparent 65%);
  font-family:var(--mono); font-size:15px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--dim2);
}
.play{position:absolute; inset:0; display:grid; place-items:center;
  background:color-mix(in srgb,#000 34%,transparent); transition:background .25s}
.play span{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand); color:var(--btn-fg); font-size:19px; padding-left:4px;
  box-shadow:0 10px 34px -6px color-mix(in srgb,var(--brand) 60%,transparent);
}
.work-media:hover .play{background:color-mix(in srgb,#000 16%,transparent)}
.work-more{
  display:inline-flex; align-items:center; gap:6px; margin-top:auto;
  font-size:14px; font-weight:550; color:var(--brand2);
}
.work-more:hover{gap:10px; transition:gap .2s ease}
.work-body h3 a{color:inherit}
.work-body h3 a:hover{color:var(--brand2)}
.work-body{padding:22px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1}

.work-top{display:flex; align-items:flex-start; gap:12px}
.work-top > :first-child{margin-top:2px}
.site-ico{
  width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:var(--bg2); border:1px solid var(--line); overflow:hidden;
  font-family:var(--mono); font-weight:700; font-size:15px; color:var(--brand2);
}
.site-ico img{width:100%; height:100%; object-fit:contain; display:block}
.work-body h3{font-size:19px}
.work-body .desc{color:var(--dim); font-size:15px; flex:1}
.tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:4px}
.tag{
  font-family:var(--mono); font-size:11px; padding:4px 10px; border-radius:999px;
  background:color-mix(in srgb,var(--fg) 6%,transparent);
  border:1px solid var(--line); color:var(--dim); letter-spacing:.06em;
}
.work-link{
  display:inline-flex; align-items:center; gap:7px; color:var(--brand2);
  font-size:14.5px; font-weight:550; margin-top:8px;
}
.work-link:hover{gap:11px; transition:gap .2s}

.cube3d{
  position:absolute; inset:0; width:100%; height:100%;
  cursor:grab; touch-action:pan-y;
  opacity:0; transition:opacity .5s ease;
}
.cube3d.ready{opacity:1}

.cube3d.grabbed{touch-action:none}
.cube3d:active{cursor:grabbing}
.cube3d canvas{display:block; width:100%; height:100%; outline:none}

.scene-load{
  position:absolute; z-index:5;
  display:flex; align-items:center; gap:12px;
  width:min(220px, 46vw); padding:10px 14px; border-radius:999px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,#fff 7%,transparent),
      color-mix(in srgb,#fff 2%,transparent)),
    color-mix(in srgb,var(--bg) 48%,transparent);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
  box-shadow:
    0 18px 44px -26px color-mix(in srgb,var(--brand) 95%,transparent),
    0 2px 10px -6px rgba(0,0,0,.5),
    inset 0 1px 0 color-mix(in srgb,#fff 14%,transparent);
  animation:scene-load-in .5s cubic-bezier(.32,.72,0,1);
}
@keyframes scene-load-in{from{opacity:0; transform:translateY(8px) scale(.96)}}
.scene-load.done{
  opacity:0; transform:translateY(-6px) scale(.98);
  transition:opacity .55s ease, transform .55s ease;
}

.scene-load-track{
  position:relative; flex:1; height:7px; border-radius:999px; overflow:hidden;
  background:color-mix(in srgb,var(--fg) 9%,transparent);
  box-shadow:inset 0 1px 3px color-mix(in srgb,#000 40%,transparent),
             inset 0 -1px 0 color-mix(in srgb,#fff 6%,transparent);
}

.scene-load-fill{
  position:absolute; inset:0 auto 0 0; width:0; border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--brand) 78%,transparent) 0%,
    var(--brand2) 55%,
    color-mix(in srgb,#eaf8ff 70%,var(--brand2)) 100%);
  box-shadow:0 0 14px color-mix(in srgb,var(--brand2) 90%,transparent),
             0 0 3px color-mix(in srgb,#fff 60%,transparent);
  
  filter:blur(.35px);
}
.scene-load-fill::before,
.scene-load-fill::after{
  content:''; position:absolute; inset:-60% -20%;
  border-radius:44%;
  pointer-events:none;
}
.scene-load-fill::before{
  background:color-mix(in srgb,#fff 26%,transparent);
  animation:scene-load-wave 3.1s linear infinite;
}
.scene-load-fill::after{
  background:color-mix(in srgb,#fff 16%,transparent);
  animation:scene-load-wave 2.05s linear infinite reverse;
  opacity:.75;
}
@keyframes scene-load-wave{
  from{transform:translateX(-38%) rotate(0deg)}
  to{transform:translateX(38%) rotate(360deg)}
}

.scene-load.unknown .scene-load-fill{
  width:44%; animation:scene-load-run 1.5s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes scene-load-run{
  0%{left:-44%} 100%{left:100%}
}
.scene-load.unknown .scene-load-num{opacity:.4}

.scene-load-num{
  min-width:36px; text-align:right;
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  letter-spacing:-.02em; color:var(--fg); font-variant-numeric:tabular-nums;
  text-shadow:0 1px 6px color-mix(in srgb,var(--bg) 80%,transparent);
}

@media(max-width:700px){
  .scene-load{width:min(180px,58vw); padding:9px 12px; gap:10px}
  .scene-load-track{height:6px}
  .scene-load-num{font-size:11.5px; min-width:32px}
}
@media(prefers-reduced-motion:reduce){
  .scene-load{animation:none}
  .scene-load-fill::before,.scene-load-fill::after{animation:none}
  .scene-load.unknown .scene-load-fill{animation:none; width:100%}
}

.cube-stage.has-tools .cube3d{bottom:70px; height:auto}

.cube-stage.has-tools:has(.ar-note:not([hidden])) .cube3d{bottom:94px}
.stage-tools{
  position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  width:100%; padding:0 12px;
}
.ar-btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:12px 22px; border-radius:999px; max-width:100%;
  border:1px solid color-mix(in srgb,var(--brand) 42%,transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--brand) 22%,transparent),
      color-mix(in srgb,var(--brand) 9%,transparent)),
    color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  color:var(--fg); font:inherit; font-size:14.5px; font-weight:560;
  letter-spacing:-.01em; white-space:nowrap;
  box-shadow:0 16px 40px -22px color-mix(in srgb,var(--brand) 95%,transparent),
             inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent);
  transition:transform .24s cubic-bezier(.32,.72,0,1), box-shadow .24s ease,
             border-color .24s ease, background .24s ease;
}
.ar-btn svg{
  width:18px; height:18px; flex:none; fill:none; stroke:var(--brand2);
  stroke-width:1.6; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--brand2) 60%,transparent));
}
.ar-btn:hover:not(:disabled){
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--brand) 65%,transparent);
  box-shadow:0 22px 50px -22px color-mix(in srgb,var(--brand) 100%,transparent),
             inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent);
}
.ar-btn:active:not(:disabled){transform:translateY(0) scale(.985)}
.ar-btn:disabled{opacity:.5; cursor:default; box-shadow:none}
.ar-note{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim2); text-align:center;
}
@media(prefers-reduced-motion:reduce){ .ar-btn{transition:none} }

.showcase{display:flex; flex-direction:column; gap:clamp(34px,6vw,84px)}
.case{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,54px); align-items:center;
}
.case:nth-child(even) .case-media{order:2}
.case-media{
  position:relative; border-radius:calc(var(--r) + 6px); overflow:hidden;
  border:1px solid var(--line); background:var(--bg2); aspect-ratio:16/10;
  box-shadow:var(--shadow); transition:transform .35s ease, border-color .35s ease;
}
.case-media[data-open]{cursor:pointer}
.case-media:hover{transform:translateY(-4px); border-color:var(--brand-line)}
.case-media img,.case-media video{width:100%; height:100%; object-fit:cover; display:block}
.case-media .placeholder{width:100%; height:100%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%,var(--brand-dim),transparent 65%);
  font-family:var(--mono); letter-spacing:.3em; text-transform:uppercase; color:var(--dim2)}
.case-body{display:flex; flex-direction:column; gap:14px; min-width:0}
.case-body h3{font-size:clamp(21px,2.3vw,30px)}
.case-body .lede{color:var(--dim); font-size:16px}
.case-no{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--brand2)}
.case-head{display:flex; align-items:center; gap:13px}

.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,34%);
  gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:10px; scrollbar-width:thin;
}
.rail > *{scroll-snap-align:start}
.rail-nav{display:flex; gap:8px; margin-top:16px}
.rail-nav button{
  width:38px; height:38px; border-radius:10px; cursor:pointer; background:transparent;
  border:1px solid var(--line2); color:var(--dim); transition:.2s;
}
.rail-nav button:hover{color:var(--fg); border-color:var(--brand-line); background:var(--brand-dim)}

.plans{display:grid; gap:var(--gap); align-items:stretch; grid-auto-rows:1fr}
.plans[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.plans[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.plans[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.plan{
  position:relative; display:flex; flex-direction:column; padding:28px 26px;
  border:1px solid var(--line); border-radius:calc(var(--r) + 4px); background:var(--panel);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.plan:hover{transform:translateY(-4px); border-color:var(--line2); box-shadow:var(--shadow)}
.plan.on{border-color:var(--brand-line);
  background:linear-gradient(170deg,var(--brand-dim),transparent 55%),var(--panel)}
.plan .tagline{position:absolute; top:-11px; left:26px; padding:3px 11px; border-radius:999px;
  background:var(--brand); color:var(--btn-fg); font-size:11px; font-weight:650;
  letter-spacing:.05em; text-transform:uppercase}
.plan h3{font-size:20px}
.plan .price{font-family:var(--mono); font-size:31px; font-weight:650; letter-spacing:-.03em;
  margin:16px 0 4px}
.plan .per{color:var(--dim2); font-size:13px}
.plan .desc{color:var(--dim); font-size:15px; margin-top:14px}
.plan ul{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column;
  gap:9px; font-size:14.5px; flex:1}
.plan li{display:flex; gap:10px; align-items:flex-start; color:var(--dim)}
.plan li::before{content:''; width:16px; height:16px; flex:none; margin-top:3px; border-radius:50%;
  background:var(--brand-dim); border:1px solid var(--brand-line);
  background-image:linear-gradient(45deg,transparent 45%,var(--brand2) 45%,var(--brand2) 55%,transparent 55%)}
.plan .foot{margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:12px}
.plan .seats{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim2)}

.metrics{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.metrics[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.metrics[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.metrics[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.metrics > div{background:var(--bg); padding:26px 24px}
.metrics .v{font-size:clamp(28px,3.4vw,40px); font-weight:650; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:var(--brand2); font-family:var(--mono)}
.metrics .l{margin-top:8px; font-size:15.5px}
.metrics .n{margin-top:4px; font-size:13px; color:var(--dim2)}

.logos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.logos > *{
  background:var(--bg); display:grid; place-items:center; padding:26px 20px;
  min-height:104px; transition:background .25s;
}
.logos > a:hover{background:var(--panel)}
.logos img{max-height:42px; max-width:100%; object-fit:contain;
  transition:filter .3s, opacity .3s}
.logos.gray img{filter:grayscale(1); opacity:.62}
.logos.gray > *:hover img{filter:none; opacity:1}
.logos .name{font-family:var(--mono); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim2); text-align:center}

.quote{
  display:flex; flex-direction:column; height:100%; padding:28px 26px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.quote:hover{border-color:var(--brand-line); transform:translateY(-3px); box-shadow:var(--shadow)}
.quote .mark{font-family:var(--serif); font-size:46px; line-height:.7; color:var(--brand-line)}
.quote p{margin:14px 0 20px; font-size:16px; flex:1}
.quote .who{display:flex; align-items:center; gap:12px; padding-top:16px;
  border-top:1px solid var(--line)}
.quote .who img{width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none}
.quote .who .ini{width:42px; height:42px; border-radius:50%; flex:none; display:grid;
  place-items:center; background:var(--brand-dim); border:1px solid var(--brand-line);
  color:var(--brand2); font-family:var(--mono); font-weight:700}
.quote .who b{display:block; font-weight:600; font-size:15px}
.quote .who span{color:var(--dim2); font-size:13.5px}

.lead-form{
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  padding:26px; display:flex; flex-direction:column; height:100%;
}
.lead-form h3{font-size:18px; margin-bottom:6px}
.lead-form .hint{color:var(--dim); font-size:14px; margin-bottom:18px}
.contact-wrap{display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:start}
.contact-cards{display:grid; gap:var(--gap)}

.calc{display:grid; gap:24px; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:start}
.calc-group{margin-bottom:28px}
.calc-group > h4{
  font-family:var(--mono); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.18em; color:var(--dim2); margin:0 0 12px; font-weight:500;
}
.opt{
  display:block; border:1px solid var(--line); border-radius:calc(var(--r) - 2px);
  padding:17px 19px; margin-bottom:10px; cursor:pointer; background:var(--panel);
  transition:border-color .2s, background .2s;
}
.opt:hover{border-color:var(--line2)}
.opt.on{border-color:var(--brand-line); background:var(--brand-dim)}
.opt-top{display:flex; align-items:flex-start; gap:14px}
.opt input[type=checkbox]{margin:3px 0 0}
.opt-ico{display:inline-flex; vertical-align:-4px; margin-right:8px}
.opt-ico svg{width:17px; height:17px}
.opt-name{font-weight:600}
.opt-desc{color:var(--dim); font-size:14.5px; margin-top:4px}
.opt-price{margin-left:auto; white-space:nowrap; color:var(--brand2); font-weight:650;
  font-variant-numeric:tabular-nums;
  font-family:var(--mono); font-size:15px}
.opt-extra{margin:15px 0 0 31px; display:none; flex-direction:column; gap:10px}
.opt.on .opt-extra{display:flex}
.sub{display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--dim)}
.sub input[type=checkbox]{width:16px; height:16px; border-radius:5px}
.sub .p{margin-left:auto; color:var(--dim2); white-space:nowrap; font-family:var(--mono); font-size:13px}
.qty{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--dim)}
.qty input{width:66px; padding:6px 8px; border-radius:8px; border:1px solid var(--line2);
  background:var(--bg); text-align:center; font-family:var(--mono)}

.summary{
  position:sticky; top:92px;
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 55%,var(--bg)));
  border:1px solid var(--line); border-radius:var(--r); padding:26px;
}
.summary h3{font-size:17px; margin-bottom:18px}
.sum-lines{display:flex; flex-direction:column; gap:10px; font-size:14.5px;
  max-height:240px; overflow:auto; margin-bottom:18px}
.sum-line{display:flex; gap:12px; color:var(--dim)}

.sum-line b{margin-left:auto; color:var(--fg); font-weight:550; white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-family:var(--mono); font-size:13.5px}
.sum-total{display:flex; align-items:baseline; gap:12px; padding-top:18px;
  border-top:1px solid var(--line)}
.sum-total .v{margin-left:auto; font-size:28px; font-weight:650; color:var(--brand2);
  letter-spacing:-.03em; font-family:var(--mono)}
.sum-note{color:var(--dim2); font-size:13px; margin-top:12px; line-height:1.5}
.empty-sum{color:var(--dim2); font-size:14.5px; padding:6px 0 14px}

.field{margin-bottom:14px}
.field label{display:block; font-size:12.5px; color:var(--dim); margin-bottom:7px;
  font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase}
.field input,.field textarea{
  width:100%; padding:12px 14px; border-radius:calc(var(--r) - 4px);
  border:1px solid var(--line2); background:var(--bg); outline:none;
  transition:border-color .2s, background .2s;
}
.field input:focus,.field textarea:focus{border-color:var(--brand-line);
  background:color-mix(in srgb,var(--brand) 4%,var(--bg))}
.field textarea{resize:vertical; min-height:76px}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--dim);
  margin:8px 0 16px; cursor:pointer}
.consent input{accent-color:var(--brand); margin-top:3px; flex:none}

input[type=checkbox]{
  appearance:none; -webkit-appearance:none; margin:0;
  width:18px; height:18px; flex:none; border-radius:6px;
  border:1px solid var(--line2); background:var(--bg2);
  display:inline-grid; place-content:center; cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
input[type=checkbox]::before{
  content:''; width:10px; height:10px; transform:scale(0);
  transition:transform .14s cubic-bezier(.3,1.4,.5,1);
  background:var(--btn-fg);
  clip-path:polygon(14% 46%,0 60%,40% 100%,100% 18%,86% 4%,38% 72%);
}
input[type=checkbox]:hover{border-color:var(--brand-line)}
input[type=checkbox]:checked{background:var(--brand); border-color:var(--brand)}
input[type=checkbox]:checked::before{transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  input[type=checkbox],input[type=checkbox]::before{transition:none}
}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.msg{margin-top:12px; font-size:14px}
.msg.err{color:var(--err)}
.msg.ok{color:var(--ok)}

.faq-list{display:flex; flex-direction:column; gap:10px}
.qa{border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:hidden}
.qa summary{
  list-style:none; cursor:pointer; padding:20px 22px; display:flex; align-items:center; gap:16px;
  font-weight:600; font-size:16.5px; transition:color .2s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--brand2)}
.qa summary::after{
  content:'+'; margin-left:auto; font-family:var(--mono); font-size:21px; color:var(--brand2);
  line-height:1; transition:transform .25s ease;
}
.qa[open] summary::after{transform:rotate(45deg)}
.qa .a{padding:0 22px 22px; color:var(--dim); font-size:15.5px; max-width:80ch}

.cta-band{
  position:relative; overflow:hidden;
  border:1px solid var(--brand-line); border-radius:calc(var(--r) + 4px);
  padding:clamp(30px,4.4vw,52px);
  background:linear-gradient(120deg,var(--brand-dim),transparent 62%),var(--panel);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center;
}
.cta-band h2{font-size:clamp(23px,2.6vw,32px)}
.cta-band p{color:var(--dim); margin-top:12px; max-width:56ch; font-size:16px}

.contact-card{
  display:flex; flex-direction:column; justify-content:space-between; height:100%;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; transition:border-color .25s, transform .25s, box-shadow .25s;
}
.contact-card:hover{border-color:var(--brand-line); transform:translateY(-3px); box-shadow:var(--shadow)}
.contact-card .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim2)}
.contact-card .v{color:var(--brand2); font-size:18px; margin-top:12px; word-break:break-word}

footer{border-top:1px solid var(--line); padding:44px 0 52px; color:var(--dim); font-size:14.5px}

.foot-grid{
  display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:center;
}
.foot-grid > .soc:last-child{justify-self:end}
.foot-center{
  display:flex; flex-direction:column; align-items:center; gap:11px;
  text-align:center; min-width:0;
}
.foot-center .brand{gap:10px}
.foot-center a{color:var(--dim)}
.foot-center a:hover{color:var(--brand2)}
.foot-center > span:nth-of-type(2) a{margin:0 12px}
.foot-center .mono{font-size:12.5px; color:var(--dim2)}

.frow{display:flex; gap:26px; flex-wrap:wrap; align-items:center}

.soc{
  --soc-size:44px; --soc-gap:10px;
  display:flex; gap:var(--soc-gap); flex-wrap:wrap; justify-content:center;
  max-width:calc(var(--soc-size) * 2 + var(--soc-gap));
}
.soc-btn{
  width:var(--soc-size,44px); height:var(--soc-size,44px); border-radius:50%; overflow:hidden; flex:0 0 auto;
  display:grid; place-items:center;
  border:1px solid var(--brand-line);
  background:color-mix(in srgb,var(--panel) 70%,transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.soc-btn img{width:100%; height:100%; object-fit:cover; display:block}
.soc-btn:hover{
  border-color:var(--brand);
  transform:translateY(-2px);
  box-shadow:0 8px 24px -8px color-mix(in srgb,var(--brand) 55%,transparent);
}
@media(prefers-reduced-motion:reduce){ .soc-btn{transition:none} .soc-btn:hover{transform:none} }

.foot-legal{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.6; color:var(--dim2);
}

dialog.media{
  border:1px solid var(--line2); border-radius:calc(var(--r) + 2px);
  background:var(--panel); color:var(--fg); padding:0;
  max-width:min(1040px,94vw); width:100%;
  
  max-height:92dvh;
}
dialog.media[open]{display:flex; flex-direction:column}
dialog.media::backdrop{background:color-mix(in srgb,#000 84%,transparent); backdrop-filter:blur(5px)}
dialog.media .m-head{display:flex; align-items:flex-start; gap:16px; padding:16px 20px;
  border-bottom:1px solid var(--line)}

dialog.media .m-head h3{font-size:17px; line-height:1.35; min-width:0; overflow-wrap:anywhere}
dialog.media .m-body{background:#000; display:flex; min-height:0}

dialog.media .m-body img,dialog.media .m-body video{
  width:100%; max-height:min(720px,calc(92dvh - var(--m-chrome,190px)));
  object-fit:contain; display:block}
.thumbs{display:flex; gap:8px; padding:14px 20px; overflow-x:auto; scrollbar-width:thin}

.thumbs:empty{display:none}
.thumbs img{flex:0 0 auto; width:90px; height:57px; object-fit:cover; border-radius:8px;
  cursor:pointer; border:1px solid var(--line2); opacity:.55;
  transition:opacity .2s, border-color .2s}
.thumbs img:hover,.thumbs img.on{opacity:1; border-color:var(--brand)}

dialog.media .m-foot{display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 20px; border-top:1px solid var(--line)}
dialog.media .m-foot[hidden]{display:none}
dialog.media .m-foot p{color:var(--dim); font-size:14.5px; line-height:1.55; min-width:0}
dialog.media .m-foot .btn{flex:0 0 auto}
.x{flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  margin-left:auto; background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  color:var(--dim); font-size:20px; cursor:pointer; line-height:1;
  transition:color .2s, border-color .2s, background .2s}
.x:hover{color:var(--fg); border-color:var(--line2); background:var(--panel)}

html[data-bloom="soft"]{--bloom:.55; --bloom-r:10px}
html[data-bloom="strong"]{--bloom:1; --bloom-r:16px}

html[data-bloom]:not([data-bloom="off"]) .ico svg{
  filter:drop-shadow(0 0 calc(var(--bloom-r) * .7)
    color-mix(in srgb, var(--brand2) calc(var(--bloom) * 65%), transparent));
}
html[data-bloom]:not([data-bloom="off"]) .brand-mark,
html[data-bloom]:not([data-bloom="off"]) .site-ico,
html[data-bloom]:not([data-bloom="off"]) .badge{
  box-shadow:0 0 calc(var(--bloom-r) * 1.4)
    color-mix(in srgb, var(--brand) calc(var(--bloom) * 40%), transparent);
}
html[data-bloom]:not([data-bloom="off"]) .metrics .v,
html[data-bloom]:not([data-bloom="off"]) .plan .price,
html[data-bloom]:not([data-bloom="off"]) .sum-total .v,
html[data-bloom]:not([data-bloom="off"]) .eyebrow::before{
  text-shadow:0 0 calc(var(--bloom-r) * 1.6)
    color-mix(in srgb, var(--brand2) calc(var(--bloom) * 55%), transparent);
}
html[data-bloom]:not([data-bloom="off"]) .btn:not(.ghost){
  box-shadow:0 0 calc(var(--bloom-r) * 1.6)
    color-mix(in srgb, var(--brand) calc(var(--bloom) * 45%), transparent);
}
html[data-bloom]:not([data-bloom="off"]) .btn:not(.ghost):hover{
  box-shadow:0 8px calc(var(--bloom-r) * 2.4) -4px
    color-mix(in srgb, var(--brand) calc(var(--bloom) * 70%), transparent);
}
html[data-bloom]:not([data-bloom="off"]) .cube .face{
  box-shadow:inset 0 0 60px color-mix(in srgb, var(--brand) 16%, transparent),
             0 0 calc(var(--bloom-r) * 2)
             color-mix(in srgb, var(--brand) calc(var(--bloom) * 35%), transparent);
}
html[data-bloom]:not([data-bloom="off"]) .cube3d canvas{
  filter:drop-shadow(0 0 calc(var(--bloom-r) * 2)
    color-mix(in srgb, var(--brand2) calc(var(--bloom) * 45%), transparent));
}
html[data-bloom]:not([data-bloom="off"]) .avatar{
  box-shadow:0 0 calc(var(--bloom-r) * 2)
    color-mix(in srgb, var(--ring, var(--brand)) calc(var(--bloom) * 55%), transparent);
}
html[data-bloom="strong"] .glow{opacity:1; filter:blur(90px)}
@media(prefers-reduced-motion:reduce){
  html[data-bloom] .btn:not(.ghost){box-shadow:none}
}

.reveal{opacity:0; transform:translateY(22px);
  transition:opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

@media(max-width:1080px){
  .contact-wrap{grid-template-columns:1fr}
  .metrics[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case{grid-template-columns:1fr}
  .case:nth-child(even) .case-media{order:0}
  .plans[data-cols="3"],.plans[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail{grid-auto-columns:minmax(260px,72%)}
  .grid[data-cols="3"],.grid[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{grid-template-columns:1fr}
  .cube-stage{order:-1; transform:none; --stage-h:clamp(340px,56vw,520px)}
  .calc{grid-template-columns:1fr}
  .summary{position:static}
  .sec-head{grid-template-columns:1fr; gap:16px}
  nav.links{display:none}
  .burger{display:inline-flex}
  .tools{margin-left:auto}
  .cta-band{grid-template-columns:1fr}
}
@media(hover:none){
  .card:hover,.work:hover,.quote:hover,.plan:hover,.contact-card:hover,.case-media:hover{
    transform:none; box-shadow:none}
  .work-link:hover{gap:7px}
  nav.links a::after{display:none}
}

@media(max-width:700px){
  .plans[data-cols="2"],.plans[data-cols="3"],.plans[data-cols="4"]{grid-template-columns:minmax(0,1fr)}
  .rail{grid-auto-columns:88%; margin-inline:calc(var(--shell) * -0.02);
        padding-inline:2px; scroll-padding-left:2px}
  .metrics[data-cols="2"],.metrics[data-cols="3"],.metrics[data-cols="4"]{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics > div{padding:20px 16px}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos > *{padding:20px 14px; min-height:88px}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-head{margin-bottom:32px}
  .card,.plan,.quote,.lead-form,.summary{padding:22px 18px}
  .work-body{padding:18px 18px 20px}
  
  header .brand,
  .mobile-nav .sheet-head .brand,
  .foot-center a{
    min-height:44px; display:inline-flex; align-items:center;
  }
  
  .foot-center > span:nth-of-type(2) a{padding:0 4px}

  
  .foot-grid{grid-template-columns:1fr; gap:22px; justify-items:center}
  .foot-grid > .soc:last-child{justify-self:center}
  .soc{--soc-size:42px; --soc-gap:9px; max-width:none}
  .foot-center > span:nth-of-type(2) a{margin:0 9px}
  .qa summary{padding:17px 18px; font-size:16px}
  .qa .a{padding:0 18px 18px}
  .cta-band{padding:26px 20px}
  dialog.media{max-width:100vw; border-radius:18px 18px 0 0; margin:auto 0 0;
    max-height:92dvh}
  dialog.media .m-head{padding:14px 16px; gap:12px}
  dialog.media .m-head h3{font-size:15.5px}
  dialog.media .m-body img,dialog.media .m-body video{max-height:56vh}
  dialog.media .thumbs{padding:12px 16px}
  
  dialog.media .thumbs:last-child{padding-bottom:calc(12px + var(--safe-b))}
  dialog.media .m-foot{flex-direction:column; align-items:stretch; gap:12px;
    padding:14px 16px calc(14px + var(--safe-b))}
  dialog.media .m-foot .btn{width:100%; justify-content:center}
  .opt{padding:15px 15px}
  .opt-price{width:100%; margin:8px 0 0 31px; text-align:left}
  .opt-top{flex-wrap:wrap}
  :root{--sec:72px; --shell:min(var(--shell-max),100% - 32px)}
  .hero{padding:44px 0 64px}
  .cube{--cap:72vw}
  .cube-stage{--stage-h:clamp(320px,94vw,470px)}
  .grid[data-cols="2"],.grid[data-cols="3"],.grid[data-cols="4"]{grid-template-columns:minmax(0,1fr)}
  
  .hero-logo{height:min(var(--hero-logo-h,92px),64px)}
  #nav-cta{display:none}
  .hero{padding-top:32px}
  .hero .lead{font-size:16px}
  .hero-actions{gap:10px}
  .hero-actions .btn{flex:1; min-width:calc(50% - 5px)}
}

@media(max-width:420px){
  .hero-actions .btn{width:100%}
  .metrics[data-cols="2"],.metrics[data-cols="3"],.metrics[data-cols="4"]{
    grid-template-columns:minmax(0,1fr)}
}

body.sheet-lock{position:fixed; left:0; right:0; width:100%; overflow:hidden}

.sheet-back{
  position:fixed; inset:0; z-index:70;
  background:
    radial-gradient(120% 90% at 100% 0,
      color-mix(in srgb,var(--brand) 13%,transparent), transparent 62%),
    color-mix(in srgb,#000 60%,transparent);
  backdrop-filter:blur(3px) saturate(115%);
  -webkit-backdrop-filter:blur(3px) saturate(115%);
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
html[data-theme="light"] .sheet-back{background:
    radial-gradient(120% 90% at 100% 0,
      color-mix(in srgb,var(--brand) 12%,transparent), transparent 62%),
    rgba(16,20,28,.4)}
.sheet-back.on{opacity:1; pointer-events:auto}

.mobile-nav{
  position:fixed; z-index:71; top:0; right:0; bottom:0;
  width:var(--sheet-w); max-width:100%;
  display:flex; flex-direction:column;
  padding:calc(14px + var(--safe-t)) 0 calc(16px + var(--safe-b));
  background:
    linear-gradient(206deg,
      color-mix(in srgb,var(--brand) 9%,var(--panel)) 0%,
      var(--panel) 38%,
      color-mix(in srgb,var(--bg) 72%,var(--panel)) 100%);
  border-left:1px solid color-mix(in srgb,var(--brand) 18%,var(--line));
  box-shadow:
    -34px 0 80px -34px rgba(0,0,0,.78),
    -1px 0 0 0 color-mix(in srgb,var(--brand) 14%,transparent);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  transform:translate3d(101%,0,0); visibility:hidden;
  transition:transform .44s cubic-bezier(.32,.72,0,1), visibility .44s linear;
  will-change:transform;
}

.mobile-nav::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb,var(--brand2) 55%,transparent), transparent);
  opacity:.8; pointer-events:none;
}
.mobile-nav.open{transform:translate3d(0,0,0); visibility:visible}

.mobile-nav.dragging{transition:none}

.mobile-nav .sheet-head{
  display:flex; align-items:center; gap:12px;
  padding:2px var(--sheet-pad) 14px; margin-bottom:4px;
  border-bottom:1px solid var(--line);
}
.mobile-nav .sheet-head .brand{font-size:15.5px}
.mobile-nav .sheet-x{
  margin-left:auto; width:40px; height:40px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line2); background:transparent; color:var(--dim);
  display:grid; place-items:center; padding:0; line-height:0;
  transition:border-color .22s, background .22s, color .22s, transform .22s;
}

.mobile-nav .sheet-x svg{
  width:15px; height:15px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;
}
.mobile-nav .sheet-x:hover,.mobile-nav .sheet-x:focus-visible{
  border-color:var(--brand-line); background:var(--brand-dim);
  color:var(--brand2); transform:rotate(90deg);
}

.mobile-nav #mobile-links{
  display:flex; flex-direction:column; gap:3px; flex:1 0 auto;
  padding:14px var(--sheet-pad) 10px;
}
.mobile-nav #mobile-links a{
  position:relative; display:flex; align-items:center;
  min-height:52px; padding:11px 14px 11px 16px; border-radius:12px;
  color:var(--dim); font-size:clamp(16px,4.2vw,19px); font-weight:560;
  letter-spacing:-.01em; border-bottom:0;
  opacity:0; transform:translate3d(26px,0,0);
  transition:background .3s ease, color .25s ease, box-shadow .3s ease;
}

.mobile-nav #mobile-links a::before{
  content:''; position:absolute; left:6px; top:50%; width:2px; height:0;
  border-radius:2px; background:var(--brand2);
  transform:translateY(-50%);
  box-shadow:0 0 12px color-mix(in srgb,var(--brand2) 70%,transparent);
  transition:height .32s cubic-bezier(.32,.72,0,1);
}
.mobile-nav #mobile-links a::after{
  content:'→'; margin-left:auto; font-size:15px; color:var(--brand2);
  opacity:0; transform:translateX(-6px);
  transition:opacity .28s ease, transform .28s cubic-bezier(.32,.72,0,1);
}
.mobile-nav #mobile-links a:hover,
.mobile-nav #mobile-links a:focus-visible,
.mobile-nav #mobile-links a[aria-current="page"]{
  color:var(--fg); outline:none;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--brand) 17%,transparent) 0%,
    color-mix(in srgb,var(--brand) 5%,transparent) 58%,
    transparent 100%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--brand) 20%,transparent),
    0 12px 30px -20px color-mix(in srgb,var(--brand) 90%,transparent);
}
.mobile-nav #mobile-links a:hover::before,
.mobile-nav #mobile-links a:focus-visible::before,
.mobile-nav #mobile-links a[aria-current="page"]::before{height:22px}
.mobile-nav #mobile-links a:hover::after,
.mobile-nav #mobile-links a:focus-visible::after,
.mobile-nav #mobile-links a[aria-current="page"]::after{opacity:1; transform:none}
.mobile-nav #mobile-links a:active{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--brand) 26%,transparent),
    color-mix(in srgb,var(--brand) 8%,transparent) 60%, transparent);
}
.mobile-nav #mobile-links a[aria-current="page"]{color:var(--brand2)}

.mobile-nav.open #mobile-links a{
  opacity:1; transform:none;
  transition:opacity .3s ease, transform .38s cubic-bezier(.32,.72,0,1),
             background .3s ease, color .25s ease, box-shadow .3s ease;
}
.mobile-nav.open #mobile-links a:nth-child(1){transition-delay:.1s}
.mobile-nav.open #mobile-links a:nth-child(2){transition-delay:.145s}
.mobile-nav.open #mobile-links a:nth-child(3){transition-delay:.19s}
.mobile-nav.open #mobile-links a:nth-child(4){transition-delay:.235s}
.mobile-nav.open #mobile-links a:nth-child(5){transition-delay:.28s}
.mobile-nav.open #mobile-links a:nth-child(6){transition-delay:.325s}
.mobile-nav.open #mobile-links a:nth-child(n+7){transition-delay:.37s}

.mobile-nav .sheet-actions{
  display:flex; flex-direction:column; gap:9px;
  padding:12px var(--sheet-pad) 0; margin-top:auto;
  opacity:0; transform:translate3d(20px,0,0);
}
.mobile-nav.open .sheet-actions{
  opacity:1; transform:none;
  transition:opacity .34s ease .34s, transform .4s cubic-bezier(.32,.72,0,1) .34s;
}
.mobile-nav .sheet-actions .btn{width:100%; min-height:48px}
.mobile-nav .sheet-meta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:16px var(--sheet-pad) 0; padding-top:14px;
  border-top:1px solid var(--line);
  font-size:13.5px; color:var(--dim);
  opacity:0; transform:translate3d(20px,0,0);
}
.mobile-nav.open .sheet-meta{
  opacity:1; transform:none;
  transition:opacity .34s ease .42s, transform .4s cubic-bezier(.32,.72,0,1) .42s;
}

.mobile-nav .sheet-meta a{
  display:inline-flex; align-items:center; padding:0 2px; border:0;
  min-height:44px; font-size:13.5px;
  font-weight:400; color:var(--brand2); opacity:1; transform:none;
}
.mobile-nav .sheet-switch{display:flex; gap:8px; margin-left:auto}

@media(prefers-reduced-motion:reduce){
  .mobile-nav{transition:transform .01s linear, visibility .01s linear}
  .mobile-nav #mobile-links a,
  .mobile-nav .sheet-actions,
  .mobile-nav .sheet-meta{opacity:1; transform:none; transition:none}
  .mobile-nav.open #mobile-links a{transition:none; transition-delay:0s}
}

#bottombar{
  position:fixed; z-index:59; left:0; right:0; bottom:0; display:none; gap:10px;
  padding:10px 16px calc(10px + var(--safe-b));
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .3s cubic-bezier(.32,.72,0,1);
}
#bottombar.on{transform:none}
#bottombar .btn{flex:1; min-height:46px}
body.has-bar{padding-bottom:var(--bar-h)}

.calc-mode{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  padding:6px; margin-bottom:22px;
  border:1px solid var(--line); border-radius:calc(var(--r) + 4px);
  background:color-mix(in srgb,var(--panel) 60%,transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.calc-mode button{
  display:flex; align-items:flex-start; gap:11px;
  padding:14px 16px; text-align:left; cursor:pointer;
  border:1px solid transparent; border-radius:var(--r);
  background:transparent; color:var(--dim);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.calc-mode .txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.calc-mode b{font-weight:600; font-size:15px; letter-spacing:-.01em; color:var(--dim)}
.calc-mode small{font-size:12.5px; color:var(--dim2); line-height:1.4}

.calc-mode .tick{
  flex:0 0 auto; width:17px; height:17px; margin-top:2px; border-radius:50%;
  border:1.5px solid var(--line2); display:grid; place-items:center;
  transition:border-color .2s ease;
}
.calc-mode .tick::after{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--brand); transform:scale(0);
  transition:transform .18s cubic-bezier(.3,1.4,.5,1);
}
.calc-mode button:hover{background:var(--bg2)}
.calc-mode button:hover .tick{border-color:var(--brand-line)}
.calc-mode button.on{
  background:color-mix(in srgb,var(--brand) 10%,var(--bg2));
  border-color:var(--brand-line);
}
.calc-mode button.on b{color:var(--fg)}
.calc-mode button.on small{color:var(--dim)}
.calc-mode button.on .tick{border-color:var(--brand)}
.calc-mode button.on .tick::after{transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  .calc-mode button,.calc-mode .tick,.calc-mode .tick::after{transition:none}
}

.sum-monthly{border-top:1px dashed var(--line); margin-top:2px}
.sum-monthly .v{font-size:19px; color:var(--brand2)}
.opt-price small{display:block; font-size:11.5px; color:var(--dim2); font-weight:500}

@media(max-width:700px){
  
  .calc-mode{grid-template-columns:1fr; gap:4px; padding:5px}
  .calc-mode button{padding:12px 13px; gap:10px}
  .calc-mode b{font-size:14.5px}
  .calc-mode small{font-size:12px}
}