/* DM WebDevelopment v5 — "Neon Glass"
   Static, dependency-free. Fonts bundled locally (SIL OFL). */

@font-face { font-family:'Outfit'; src:url('../fonts/Outfit-Regular.woff') format('woff'); font-weight:400; font-display:swap; }
@font-face { font-family:'Outfit'; src:url('../fonts/Outfit-Bold.woff') format('woff'); font-weight:700; font-display:swap; }
@font-face { font-family:'Instrument Sans'; src:url('../fonts/InstrumentSans-Regular.woff') format('woff'); font-weight:400; font-display:swap; }
@font-face { font-family:'Instrument Sans'; src:url('../fonts/InstrumentSans-Bold.woff') format('woff'); font-weight:700; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('../fonts/InstrumentSerif-Italic.woff') format('woff'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('../fonts/GeistMono-Regular.woff') format('woff'); font-weight:400; font-display:swap; }

@property --angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }

:root {
  --bg:#04050a; --bg2:#080a12; --card:rgba(16,19,32,.62); --card-solid:#0d101b;
  --ink:#eef0fb; --soft:#c3c7da; --muted:#9097b0; --line:rgba(160,175,255,.12); --line2:rgba(160,175,255,.22);
  --cyan:#37f3ff; --violet:#7c5cff; --magenta:#ff4fd8; --lime:#c6ff4d;
  --grad:linear-gradient(100deg,var(--cyan) 0%,var(--violet) 48%,var(--magenta) 100%);
  --display:'Outfit','Helvetica Neue',Arial,sans-serif;
  --sans:'Instrument Sans','Helvetica Neue','Segoe UI',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --r:22px; --gutter:clamp(16px,4.5vw,64px);
  --header-h:76px;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 20px); -webkit-text-size-adjust:100%; text-size-adjust:100%; scrollbar-color:#3a3f5c var(--bg); }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
main { overflow-x:hidden; }
@supports (overflow:clip) { body, main { overflow-x:clip; } }
body.dialog-open { overflow:hidden; }
h1,h2,h3,h4,p,figure { margin:0; }
h1,h2,h3,h4 { font-family:var(--display); font-weight:700; line-height:1.02; letter-spacing:-.035em; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; padding:0; }
img,video,canvas,svg { display:block; max-width:100%; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; border-radius:6px; }
::selection { background:var(--violet); color:#fff; }
.shell { width:min(1320px,calc(100% - var(--gutter)*2)); margin-inline:auto; }
.section { padding:clamp(88px,12vw,160px) 0; position:relative; }
.icon { width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.svg-sprite,.sr-only { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:fixed; z-index:1001; top:12px; left:12px; padding:12px 20px; border-radius:10px; background:var(--cyan); color:#000; font-weight:700; transform:translateY(-160%); transition:transform .3s; }
.skip-link:focus { transform:none; }
.noscript-note { position:fixed; z-index:95; left:0; right:0; bottom:0; margin:0; padding:12px var(--gutter); background:var(--cyan); color:#000; font-size:13px; }
.no-js .hud-tr { display:none; }

.grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.serif { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em; }
.dim { color:#5d6380; }

.eyebrow { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:1.5; }
.eyebrow .sq { width:7px; height:7px; background:var(--grad); flex:none; }
.pulse { position:relative; width:8px; height:8px; border-radius:50%; background:var(--lime); flex:none; box-shadow:0 0 12px var(--lime); }
.pulse::after { content:''; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--lime); animation:ping 2s var(--ease) infinite; }
@keyframes ping { 0%{transform:scale(.4);opacity:1} 100%{transform:scale(2);opacity:0} }

/* ---------- Buttons ---------- */
.btn { --bh:56px; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:var(--bh); padding:0 26px; border-radius:999px; font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:.005em; white-space:nowrap; isolation:isolate; transition:transform .5s var(--ease),box-shadow .4s,background .3s,color .3s; will-change:transform; }
.btn b { font-weight:400; font-size:18px; transition:transform .4s var(--ease); }
.btn:hover b { transform:translate(3px,-3px); }
.btn .icon { width:20px; height:20px; }
.btn-sm { --bh:44px; padding:0 18px; font-size:13px; }
.btn-block { width:100%; }
.btn-glow { color:#050510; background:linear-gradient(100deg,var(--cyan),#a5b4ff 35%,var(--magenta) 65%,var(--cyan)); background-size:300% 100%; box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 10px 40px -10px rgba(124,92,255,.8),0 0 30px -8px rgba(55,243,255,.6); animation:btnflow 7s ease-in-out infinite alternate; }
.btn-glow::after { content:''; position:absolute; inset:-2px; z-index:-1; border-radius:inherit; background:inherit; filter:blur(18px); opacity:.45; transition:opacity .4s; }
.btn-glow:hover::after { opacity:.85; }
@keyframes btnflow { from { background-position:0% 0; } to { background-position:100% 0; } }
.btn-ghost { color:var(--ink); background:rgba(255,255,255,.04); border:1px solid var(--line2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.btn-ghost:hover { background:rgba(255,255,255,.08); border-color:rgba(55,243,255,.5); box-shadow:0 0 30px -10px var(--cyan); }
.link-arrow { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:14px; color:var(--ink); background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; padding-bottom:3px; transition:background-size .5s var(--ease); }
.link-arrow:hover { background-size:100% 1px; }
.link-arrow span { color:var(--cyan); transition:transform .4s var(--ease); }
.link-arrow:hover span { transform:translate(3px,-3px); }

/* ---------- Loader ---------- */
.loader { display:none; }
.js .loader { position:fixed; inset:0; z-index:999; display:grid; place-items:center; background:var(--bg); transition:clip-path 1s var(--ease-io),visibility 0s 1s; clip-path:inset(0 0 0 0); }
.js.is-loaded .loader { clip-path:inset(0 0 100% 0); visibility:hidden; }
.loader-core { width:min(320px,70vw); }
.loader-logo { font-family:var(--display); font-weight:700; font-size:64px; letter-spacing:-.06em; line-height:1; margin-bottom:22px; }
.loader-logo i { font-style:normal; color:var(--cyan); text-shadow:0 0 20px var(--cyan); }
.loader-bar { height:2px; background:var(--line); overflow:hidden; border-radius:2px; }
.loader-bar span { display:block; height:100%; width:100%; background:var(--grad); transform-origin:left; transform:scaleX(var(--p,0)); box-shadow:0 0 12px var(--cyan); }
.loader-meta { display:flex; justify-content:space-between; margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted); }

/* ---------- Global FX ---------- */
.fx-noise { position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.06; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.scroll-progress { position:fixed; inset:0 0 auto; height:2px; z-index:100; pointer-events:none; }
.scroll-progress span { display:block; height:100%; background:var(--grad); transform-origin:left; transform:scaleX(0); box-shadow:0 0 10px var(--cyan); }

.cursor { display:none; }
.has-cursor .cursor { display:block; position:fixed; inset:0; z-index:1000; pointer-events:none; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary, .has-cursor label { cursor:none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor:auto; }
.cursor-dot,.cursor-ring { position:absolute; left:0; top:0; border-radius:50%; will-change:transform; }
.cursor-dot { width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.cursor-ring { width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid rgba(55,243,255,.55); display:grid; place-items:center; transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s,border-color .3s,opacity .3s; }
.cursor-label { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#050510; opacity:0; transition:opacity .2s; }
.cursor.is-hover .cursor-ring { width:64px; height:64px; margin:-32px 0 0 -32px; border-color:rgba(255,79,216,.8); background:rgba(124,92,255,.12); }
.cursor.is-label .cursor-ring { width:86px; height:86px; margin:-43px 0 0 -43px; background:var(--cyan); border-color:transparent; box-shadow:0 0 40px -6px var(--cyan); }
.cursor.is-label .cursor-label { opacity:1; }
.cursor.is-label .cursor-dot { opacity:0; }
.cursor.is-hidden { opacity:0; }
.cursor.is-down .cursor-ring { width:26px; height:26px; margin:-13px 0 0 -13px; }

/* ---------- Header ---------- */
.site-header { position:fixed; inset:0 0 auto; z-index:80; transition:transform .5s var(--ease),background .4s,border-color .4s; border-bottom:1px solid transparent; }
.site-header.scrolled { background:rgba(4,5,10,.72); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); border-bottom-color:var(--line); }
.site-header.is-hidden { transform:translateY(-105%); }
.header-inner { display:flex; align-items:center; gap:18px; height:var(--header-h); }
.brand { display:inline-flex; align-items:center; gap:12px; flex:none; }
.brand-mark { font-family:var(--display); font-weight:700; font-size:30px; letter-spacing:-.07em; line-height:1; }
.brand-mark i { font-style:normal; color:var(--cyan); text-shadow:0 0 14px var(--cyan); }
.brand-name { font-family:var(--display); font-weight:700; font-size:13px; line-height:1.3; letter-spacing:-.01em; }
.brand-name small { display:block; font-family:var(--mono); font-weight:400; font-size:8.5px; letter-spacing:.2em; color:var(--muted); }
.desktop-nav { display:flex; gap:6px; margin-left:auto; padding:6px; border-radius:999px; background:rgba(255,255,255,.035); border:1px solid var(--line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.desktop-nav a { position:relative; display:flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px; font-size:13px; font-weight:700; color:var(--soft); transition:color .3s,background .3s; }
.desktop-nav a em { font-style:normal; font-family:var(--mono); font-size:9.5px; color:var(--muted); font-weight:400; }
.desktop-nav a:hover { color:var(--ink); background:rgba(255,255,255,.06); }
.desktop-nav a[aria-current] { color:#050510; background:var(--ink); }
.desktop-nav a[aria-current] em { color:#555; }
.motion-toggle { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line2); color:var(--soft); flex:none; transition:border-color .3s,color .3s; }
.motion-toggle:hover { border-color:var(--cyan); color:var(--cyan); }
.motion-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.motion-toggle .i-play { display:none; }
.motion-toggle[aria-pressed="true"] .i-play { display:block; }
.motion-toggle[aria-pressed="true"] .i-pause { display:none; }
.motion-toggle:disabled { opacity:.45; cursor:not-allowed; }
.menu-toggle { display:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--line2); position:relative; flex:none; }
.menu-toggle span { position:absolute; left:14px; right:14px; height:1.5px; background:var(--ink); transition:transform .4s var(--ease),top .4s var(--ease); }
.menu-toggle span:first-child { top:18px; } .menu-toggle span:last-child { top:26px; }
.menu-toggle[aria-expanded="true"] span:first-child { top:22px; transform:rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top:22px; transform:rotate(-45deg); }
.mobile-nav { position:fixed; inset:var(--header-h) 0 auto; height:calc(100svh - var(--header-h)); overflow-y:auto; padding:18px var(--gutter) calc(30px + env(safe-area-inset-bottom)); background:rgba(4,5,10,.94); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); display:flex; flex-direction:column; }
.mobile-nav a { display:flex; align-items:baseline; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-family:var(--display); font-weight:700; font-size:clamp(26px,8vw,40px); letter-spacing:-.03em; line-height:1.1; opacity:0; transform:translateY(20px); animation:navIn .6s var(--ease) forwards; }
.mobile-nav a:nth-child(2){animation-delay:.04s}.mobile-nav a:nth-child(3){animation-delay:.08s}.mobile-nav a:nth-child(4){animation-delay:.12s}.mobile-nav a:nth-child(5){animation-delay:.16s}.mobile-nav a:nth-child(6){animation-delay:.2s}.mobile-nav a:nth-child(7){animation-delay:.24s}
.mobile-nav em { font-style:normal; font-family:var(--mono); font-size:11px; color:var(--cyan); font-weight:400; letter-spacing:.1em; }
.mobile-nav small { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-left:auto; }
.mobile-nav .mobile-cta { border:0; margin-top:18px; padding:18px 22px; border-radius:18px; background:var(--grad); color:#050510; }
.mobile-nav .mobile-cta small { color:#050510; }
@keyframes navIn { to { opacity:1; transform:none; } }

/* ---------- Hero ---------- */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:calc(var(--header-h) + 40px) 0 90px; overflow:hidden; isolation:isolate; }
.hero-bg { position:absolute; inset:0; z-index:-1; background:radial-gradient(1200px 700px at 75% 20%,rgba(124,92,255,.35),transparent 60%),radial-gradient(900px 600px at 10% 90%,rgba(55,243,255,.18),transparent 60%),var(--bg); }
.hero-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.6s ease; }
.hero-canvas.is-ready { opacity:1; }
.hero-video-slot { position:absolute; inset:0; }
.hero-video-slot video { width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s; }
.hero-video-slot video.is-playing { opacity:.75; }
.hero-grid-floor { position:absolute; left:-50%; right:-50%; bottom:-10%; height:55%; background-image:linear-gradient(rgba(55,243,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(124,92,255,.28) 1px,transparent 1px); background-size:64px 64px; transform:perspective(520px) rotateX(72deg); transform-origin:bottom; -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 75%); mask-image:linear-gradient(to top,#000 0%,transparent 75%); animation:floor 3.5s linear infinite; opacity:.55; }
@keyframes floor { to { background-position:0 64px; } }
.hero-vignette { position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 40%,rgba(4,5,10,.85) 100%),linear-gradient(to bottom,transparent 70%,var(--bg)); }
.hud { position:absolute; z-index:2; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--muted); display:flex; align-items:center; gap:10px; text-transform:uppercase; }
.hud i { font-style:normal; color:#474d6a; }
.hud b { color:var(--ink); font-weight:400; font-variant-numeric:tabular-nums; }
.hud-tl { top:calc(var(--header-h) + 14px); left:var(--gutter); }
.hud-tr { top:calc(var(--header-h) + 14px); right:var(--gutter); }
.hud-bl { bottom:28px; left:var(--gutter); }
.hud-br { bottom:28px; right:var(--gutter); }
.hud-dot { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); animation:blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity:.2; } }
.hud-scroll { width:1px; height:34px; background:var(--line2); position:relative; overflow:hidden; }
.hud-scroll i { position:absolute; left:0; top:0; width:1px; height:40%; background:var(--cyan); animation:scrollcue 1.8s var(--ease) infinite; }
@keyframes scrollcue { from { transform:translateY(-100%); } to { transform:translateY(250%); } }
.hero-layout { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(30px,5vw,80px); position:relative; z-index:1; }
.hero-copy .eyebrow { margin-bottom:26px; }
.hero-title { font-size:clamp(46px,7.4vw,118px); letter-spacing:-.035em; line-height:.95; }
.hero-title .line { display:block; overflow:hidden; padding:.04em .02em .1em; margin-bottom:-.08em; }
.hero-intro { max-width:520px; margin-top:28px; font-size:clamp(15px,1.25vw,18px); color:var(--soft); line-height:1.7; }
.hero-intro strong { color:var(--ink); }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.hero-assurance { margin-top:22px; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.hero-assurance strong { color:var(--ink); }
.check { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; color:#050510; background:var(--lime); box-shadow:0 0 14px -2px var(--lime); }

/* Split chars (hero) */
.char { display:inline-block; will-change:transform; }
.js .hero-title .char { transform:translateY(110%) rotate(8deg); opacity:0; transition:transform 1.1s var(--ease),opacity .8s var(--ease); transition-delay:calc(var(--i)*22ms + .1s); }
.js .is-loaded .hero-title .char, .js.is-loaded .hero-title .char { transform:none; opacity:1; }
.js .hero-title .grad-text .char { background:var(--grad); background-size:var(--gw,100%) 100%; background-position:calc(var(--gx,0px) * -1) 0; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.js .hero-title .grad-text { background:none; }
.js .hero-copy > :not(h1) { opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease),transform 1s var(--ease); }
.js.is-loaded .hero-copy > :not(h1) { opacity:1; transform:none; }
.js.is-loaded .hero-copy .eyebrow { transition-delay:.05s; }
.js.is-loaded .hero-intro { transition-delay:.55s; }
.js.is-loaded .hero-actions { transition-delay:.7s; }
.js.is-loaded .hero-assurance { transition-delay:.85s; }
.js .hero-stage { opacity:0; transform:translateY(40px) scale(.94); transition:opacity 1.4s var(--ease) .4s,transform 1.4s var(--ease) .4s; }
.js.is-loaded .hero-stage { opacity:1; transform:none; }
.js .hud { opacity:0; transition:opacity 1s .9s; }
.js.is-loaded .hud { opacity:1; }

/* Hero stage */
.hero-stage { position:relative; justify-self:end; width:100%; max-width:470px; perspective:1200px; }
.orbit { position:absolute; left:50%; top:50%; border-radius:50%; pointer-events:none; }
.orbit-1 { width:135%; aspect-ratio:1; transform:translate(-50%,-50%) rotateX(72deg); border:1px solid rgba(55,243,255,.25); box-shadow:0 0 40px rgba(55,243,255,.12) inset; animation:spin 22s linear infinite; }
.orbit-2 { width:118%; aspect-ratio:1; transform:translate(-50%,-50%) rotate(-18deg); border:1px dashed rgba(255,79,216,.25); animation:spin2 34s linear infinite; }
.orbit-2 i { position:absolute; top:-5px; left:50%; width:10px; height:10px; border-radius:50%; background:var(--magenta); box-shadow:0 0 18px 4px rgba(255,79,216,.6); }
@keyframes spin { to { transform:translate(-50%,-50%) rotateX(72deg) rotateZ(360deg); } }
@keyframes spin2 { to { transform:translate(-50%,-50%) rotate(342deg); } }
.holo-card { --mx:50%; --my:50%; position:relative; border-radius:24px; padding:10px; background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 120px -30px rgba(124,92,255,.65),0 0 0 1px rgba(55,243,255,.08),0 0 60px -20px rgba(55,243,255,.5); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transform-style:preserve-3d; transition:transform .6s var(--ease); animation:float 7s ease-in-out infinite; }
@keyframes float { 50% { translate:0 -12px; } }
.holo-bar { display:flex; align-items:center; gap:10px; padding:4px 6px 10px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.dots { display:flex; gap:5px; } .dots i { width:8px; height:8px; border-radius:50%; background:#2a2f45; } .dots i:first-child { background:var(--magenta); } .dots i:nth-child(2) { background:var(--violet); } .dots i:last-child { background:var(--cyan); }
.holo-url { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.35); }
.holo-url .icon { width:12px; height:12px; color:var(--lime); }
.holo-ext { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:var(--ink); transition:background .3s; }
.holo-ext:hover { background:rgba(255,255,255,.1); }
.holo-screen { position:relative; display:block; border-radius:16px; overflow:hidden; aspect-ratio:1436/1536; background:#000; transform:translateZ(30px); }
.holo-screen img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.holo-screen:hover img { transform:scale(1.04); }
.scanlines { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px); mix-blend-mode:overlay; }
.holo-sheen { position:absolute; inset:0; pointer-events:none; background:radial-gradient(500px circle at var(--mx) var(--my),rgba(255,255,255,.22),transparent 40%),linear-gradient(115deg,transparent 30%,rgba(55,243,255,.12) 45%,rgba(255,79,216,.12) 55%,transparent 70%); mix-blend-mode:screen; }
.holo-foot { display:flex; align-items:center; gap:8px; padding:12px 6px 4px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--muted); }
.holo-foot i { font-style:normal; color:#474d6a; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); animation:blink 1.6s steps(2) infinite; }
.float-chip { position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:16px; background:rgba(10,12,22,.7); border:1px solid var(--line2); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 20px 50px -20px rgba(0,0,0,.8); font-size:12px; color:var(--soft); animation:float 6s ease-in-out infinite; }
.float-chip b { display:block; font-family:var(--display); font-size:17px; color:var(--ink); letter-spacing:-.02em; }
.chip-a { left:-14%; bottom:12%; flex-direction:column; align-items:flex-start; gap:2px; animation-delay:-2s; }
.chip-b { right:-8%; top:14%; animation-delay:-4s; font-family:var(--mono); font-size:11px; letter-spacing:.08em; }
.chip-b .icon { width:18px; height:18px; color:var(--cyan); }

/* ---------- Marquee ---------- */
.marquee { position:relative; padding:26px 0; border-block:1px solid var(--line); overflow:hidden; background:linear-gradient(90deg,rgba(55,243,255,.05),rgba(124,92,255,.07),rgba(255,79,216,.05)); transform:rotate(-1.2deg) scale(1.03); margin-block:10px; }
.marquee-track { display:flex; width:max-content; animation:marquee 38s linear infinite; }
.marquee-list { display:flex; list-style:none; margin:0; padding:0; flex:none; }
.marquee-list li { display:flex; align-items:center; gap:36px; padding-right:36px; font-family:var(--display); font-weight:700; font-size:clamp(28px,4.4vw,58px); letter-spacing:-.035em; white-space:nowrap; line-height:1.1; }
.marquee-list li::after { content:'✦'; font-size:.5em; color:var(--cyan); text-shadow:0 0 12px var(--cyan); }
.marquee-list li.o { color:transparent; -webkit-text-stroke:1px rgba(238,240,251,.55); }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ---------- Manifesto ---------- */
.manifesto { padding:clamp(90px,13vw,180px) 0 clamp(40px,6vw,80px); }
.manifesto .eyebrow { margin-bottom:30px; }
.manifesto-text { font-family:var(--display); font-weight:700; font-size:clamp(28px,4.3vw,64px); line-height:1.12; letter-spacing:-.035em; max-width:1180px; }
.manifesto-text em { font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:-.01em; }
.js .manifesto-text .w { opacity:.14; transition:opacity .35s linear,color .35s; }
.js .manifesto-text .w.on { opacity:1; }
.js .manifesto-text em .w.on { color:var(--cyan); text-shadow:0 0 30px rgba(55,243,255,.5); }

/* ---------- Section heading ---------- */
.sec-head { display:grid; grid-template-columns:1.4fr 1fr; align-items:end; gap:40px; margin-bottom:clamp(44px,6vw,80px); }
.sec-head .eyebrow { margin-bottom:22px; }
.sec-title { font-size:clamp(40px,6vw,92px); letter-spacing:-.04em; line-height:.98; }
.sec-title.sm { font-size:clamp(34px,4.4vw,64px); }
.sec-title.xl { font-size:clamp(46px,7.6vw,120px); }
.sec-title .line { display:block; overflow:hidden; padding:.02em 0 .12em; margin-bottom:-.1em; }
.sec-title .split { display:inline-block; }
.sec-title .serif { font-size:1.08em; line-height:.9; }
.js .sec-title .split { transform:translateY(105%); transition:transform 1.2s var(--ease); }
.js .sec-title .line:nth-child(2) .split { transition-delay:.08s; } .js .sec-title .line:nth-child(3) .split { transition-delay:.16s; }
.js .is-in .sec-title .split, .js .sec-title.is-in .split { transform:none; }
.sec-lead { color:var(--soft); font-size:clamp(15px,1.2vw,17px); max-width:430px; justify-self:end; line-height:1.7; }
.sec-lead .link-arrow { display:inline-flex; margin-top:16px; }
.footnote { margin-top:40px; font-size:12.5px; color:var(--muted); max-width:760px; }
.footnote.center { text-align:center; margin-inline:auto; }

/* Reveal */
.js .reveal { opacity:0; transform:translateY(46px); transition:opacity 1.1s var(--ease),transform 1.1s var(--ease); }
.js .reveal.is-in { opacity:1; transform:none; }
.js .sec-head.reveal { opacity:1; transform:none; }
.js .sec-head.reveal > div > .eyebrow, .js .sec-head.reveal > .sec-lead { opacity:0; transform:translateY(20px); transition:opacity 1s var(--ease) .2s,transform 1s var(--ease) .2s; }
.js .sec-head.reveal.is-in > div > .eyebrow, .js .sec-head.reveal.is-in > .sec-lead { opacity:1; transform:none; }

/* ---------- Case study ---------- */
.case { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; }
.case-visual { position:relative; }
.device { position:relative; perspective:1400px; }
.device-frame { position:relative; padding:12px; border-radius:28px; background:linear-gradient(145deg,rgba(55,243,255,.35),rgba(124,92,255,.15) 40%,rgba(255,79,216,.3)); transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1)); transform-style:preserve-3d; transition:transform .2s linear; box-shadow:0 60px 140px -40px rgba(124,92,255,.7); }
.device-frame::before { content:''; position:absolute; inset:1px; border-radius:27px; background:var(--card-solid); z-index:-0; }
.device-label { position:relative; display:flex; justify-content:space-between; padding:4px 8px 12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--muted); }
.device-label .live { display:flex; align-items:center; gap:7px; color:var(--lime); }
.device-label .live i { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); animation:blink 1.6s steps(2) infinite; }
.device-screen { position:relative; display:block; border-radius:18px; overflow:hidden; aspect-ratio:1436/1536; background:#000; }
.device-screen img, .device-screen video { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 1.2s var(--ease); }
.device-screen:hover img { transform:scale(1.035); }
.scan-beam { position:absolute; left:0; right:0; height:120px; top:-120px; background:linear-gradient(to bottom,transparent,rgba(55,243,255,.16),transparent); animation:beam 5s ease-in-out infinite; pointer-events:none; mix-blend-mode:screen; }
@keyframes beam { 0%{top:-120px} 60%,100%{top:110%} }
.device-glow { position:absolute; inset:15% 10% -8%; z-index:-1; background:var(--grad); filter:blur(80px); opacity:.35; border-radius:50%; }
.case-caption { margin-top:18px; font-size:12.5px; color:var(--muted); }
.case-copy .eyebrow { margin-bottom:18px; }
.case-title { font-size:clamp(52px,7vw,104px); letter-spacing:-.06em; line-height:.9; }
.case-lead { margin-top:22px; font-size:clamp(16px,1.35vw,19px); color:var(--soft); max-width:520px; }
.tabs { position:relative; display:flex; gap:4px; margin-top:34px; padding:5px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--line); width:max-content; max-width:100%; }
.tabs button { position:relative; z-index:1; display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; font-weight:700; font-size:14px; color:var(--soft); transition:color .4s; }
.tabs button em { font-style:normal; font-family:var(--mono); font-size:10px; font-weight:400; opacity:.7; }
.tabs button[aria-selected="true"] { color:#050510; }
.tab-ink { position:absolute; z-index:0; top:5px; bottom:5px; left:0; width:0; border-radius:999px; background:var(--grad); box-shadow:0 0 24px -4px rgba(124,92,255,.8); transition:transform .6s var(--ease),width .6s var(--ease); }
.no-js .tab-ink { display:none; }
.case-panel { margin-top:26px; padding:28px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); min-height:300px; }
.case-panel.is-swapping > * { animation:swapIn .7s var(--ease) both; }
.case-panel.is-swapping > *:nth-child(2){animation-delay:.04s}.case-panel.is-swapping > *:nth-child(3){animation-delay:.08s}.case-panel.is-swapping > *:nth-child(4){animation-delay:.12s}.case-panel.is-swapping > *:nth-child(5){animation-delay:.16s}.case-panel.is-swapping > *:nth-child(6){animation-delay:.2s}
@keyframes swapIn { from { opacity:0; transform:translateY(14px); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
.verbs { display:flex; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:14px; }
.panel-cat { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--muted); }
.case-panel h4 { font-size:clamp(26px,2.5vw,36px); margin:10px 0 14px; letter-spacing:-.035em; }
.case-panel > p { color:var(--soft); }
.case-value { display:flex !important; gap:10px; align-items:flex-start; margin:18px 0 20px; padding-top:16px; border-top:1px solid var(--line); color:var(--ink) !important; font-weight:700; font-size:14px; }
.case-value .icon { color:var(--magenta); width:18px; height:18px; margin-top:2px; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:26px 0 0; background:var(--line); border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.facts div { background:var(--bg2); padding:14px 16px; }
.facts dt { font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--muted); }
.facts dd { margin:4px 0 0; font-weight:700; font-size:14px; }
.case-end { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:26px; }
.case-end p { color:var(--soft); font-size:14px; max-width:330px; }
.case-end strong { color:var(--ink); }

/* Showreel */
.showreel { margin-top:clamp(80px,10vw,140px); }
.showreel-frame { position:relative; border-radius:28px; overflow:hidden; aspect-ratio:16/9; background:#000; border:1px solid var(--line2); box-shadow:0 60px 140px -50px rgba(124,92,255,.7); }
.showreel-frame video { width:100%; height:100%; object-fit:cover; }
.showreel-hud { position:absolute; inset:18px 22px auto; display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:#fff; mix-blend-mode:difference; }
.showreel-hud span:first-child { display:flex; align-items:center; gap:8px; }
.showreel-hud i { width:8px; height:8px; border-radius:50%; background:#ff3b3b; animation:blink 1.4s steps(2) infinite; }
.showreel-toggle { position:absolute; right:18px; bottom:18px; width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:12px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

/* Concepts */
.concept-head { margin-top:clamp(110px,14vw,180px); }
.concepts { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.concept { --mx:50%; --my:50%; display:block; text-align:left; border-radius:var(--r); background:var(--card); border:1px solid var(--line); padding:10px; transition:border-color .4s,box-shadow .4s,transform .6s var(--ease); transform-style:preserve-3d; }
.concept:hover { border-color:rgba(55,243,255,.4); box-shadow:0 40px 90px -40px rgba(124,92,255,.8); }
.concept-media { position:relative; display:block; aspect-ratio:4/4.4; border-radius:16px; overflow:hidden; }
.concept-media img { width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease),filter .8s; filter:saturate(.85) contrast(1.05); }
.concept:hover .concept-media img { transform:scale(1.08); filter:saturate(1.1) contrast(1.1); }
.concept-media::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(4,5,10,.85),transparent 55%),linear-gradient(to bottom,rgba(4,5,10,.55),transparent 30%); }
.concept-top { position:absolute; z-index:2; inset:14px 16px auto; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:#fff; }
.concept-top b { font-family:var(--display); font-size:20px; letter-spacing:-.03em; font-weight:700; }
.concept-claim { position:absolute; z-index:2; left:16px; bottom:16px; right:16px; font-family:var(--display); font-weight:700; font-size:clamp(22px,2.1vw,30px); line-height:1.05; letter-spacing:-.035em; color:#fff; transform:translateY(8px); transition:transform .8s var(--ease); }
.concept:hover .concept-claim { transform:none; }
.concept-glare { position:absolute; inset:0; z-index:3; background:radial-gradient(420px circle at var(--mx) var(--my),rgba(55,243,255,.25),transparent 45%); opacity:0; transition:opacity .4s; mix-blend-mode:screen; }
.concept:hover .concept-glare { opacity:1; }
.concept-cap { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 8px 8px; }
.concept-cap b { font-family:var(--display); font-size:18px; }
.concept-cap small { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.tag { flex:none; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; padding:5px 9px; border-radius:999px; border:1px solid var(--line2); color:var(--soft); }

/* ---------- Bento ---------- */
.glow-card { --mx:-500px; --my:-500px; position:relative; isolation:isolate; }
.glow-card::before { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; z-index:2; pointer-events:none; background:radial-gradient(360px circle at var(--mx) var(--my),rgba(55,243,255,.9),rgba(124,92,255,.6) 35%,transparent 65%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.glow-card::after { content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none; background:radial-gradient(500px circle at var(--mx) var(--my),rgba(124,92,255,.10),transparent 50%); }
.bento { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.bento-card { border-radius:var(--r); padding:30px; background:var(--card); border:1px solid var(--line); min-height:330px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.b-wide { grid-column:span 2; }
.bento-card h3 { font-size:clamp(22px,2vw,28px); margin:18px 0 10px; letter-spacing:-.03em; }
.bento-card p { color:var(--soft); font-size:15px; max-width:480px; }
.b-icon { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(145deg,rgba(55,243,255,.18),rgba(124,92,255,.18)); border:1px solid var(--line2); color:var(--cyan); }
.b-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.bento-visual { position:absolute; inset:24px 24px auto auto; pointer-events:none; }
.v-layout { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:min(46%,280px); }
.v-layout i { height:44px; border-radius:10px; background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(55,243,255,.16),rgba(255,255,255,.04)); background-size:200% 100%; border:1px solid var(--line); animation:shimmer 3s linear infinite; }
.v-layout i:first-child { grid-column:span 2; height:64px; } .v-layout i:nth-child(3){animation-delay:-.8s} .v-layout i:nth-child(4){animation-delay:-1.6s}
@keyframes shimmer { to { background-position:-200% 0; } }
.v-globe { width:130px; height:130px; }
.v-globe i { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(55,243,255,.35); }
.v-globe i:nth-child(1) { animation:rot3d 8s linear infinite; }
.v-globe i:nth-child(2) { animation:rot3d 8s linear infinite -2.6s; border-color:rgba(124,92,255,.4); }
.v-globe i:nth-child(3) { animation:rot3d 8s linear infinite -5.2s; border-color:rgba(255,79,216,.35); }
@keyframes rot3d { from { transform:rotateY(0) rotateX(20deg); } to { transform:rotateY(360deg) rotateX(20deg); } }
.v-search { width:130px; height:130px; border-radius:50%; border:1px solid var(--line2); background:repeating-radial-gradient(circle,transparent 0 18px,rgba(55,243,255,.08) 18px 19px); overflow:hidden; }
.v-search i { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,rgba(55,243,255,.45),transparent 25%); animation:radar 3.2s linear infinite; }
@keyframes radar { to { transform:rotate(360deg); } }
.v-chat { display:flex; flex-direction:column; gap:8px; align-items:flex-start; width:min(50%,300px); font-size:12.5px; }
.v-chat span { padding:9px 14px; border-radius:14px 14px 14px 4px; background:rgba(255,255,255,.07); border:1px solid var(--line); color:var(--soft); }
.v-chat .me { align-self:flex-end; border-radius:14px 14px 4px 14px; background:linear-gradient(100deg,rgba(55,243,255,.25),rgba(124,92,255,.3)); color:var(--ink); }
.js .v-chat span { opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.js .is-in .v-chat span { opacity:1; transform:none; transition-delay:.5s; }
.js .is-in .v-chat .me { transition-delay:1.3s; }

/* ---------- Metrics ---------- */
.metrics { border-block:1px solid var(--line); background:linear-gradient(180deg,rgba(124,92,255,.05),transparent); }
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.metric { padding:clamp(28px,4vw,50px) 22px; border-left:1px solid var(--line); }
.metric:first-child { border-left:0; }
.m-val { display:flex; align-items:baseline; gap:6px; font-family:var(--display); font-weight:700; line-height:1; letter-spacing:-.05em; }
.m-val b { font-size:clamp(46px,5.4vw,84px); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-variant-numeric:tabular-nums; }
.m-val small { font-size:clamp(14px,1.3vw,18px); color:var(--soft); letter-spacing:-.01em; font-weight:400; font-family:var(--sans); }
.m-lab { display:block; margin-top:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* ---------- Timeline ---------- */
.timeline { position:relative; --p:0; }
.timeline-rail { position:absolute; left:0; right:0; top:11px; height:1px; background:var(--line2); }
.timeline-fill { position:absolute; inset:0; background:var(--grad); transform-origin:left; transform:scaleX(var(--p)); box-shadow:0 0 14px var(--cyan); }
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.step { position:relative; padding-top:48px; }
.node { position:absolute; top:0; left:0; width:23px; height:23px; border-radius:50%; background:var(--bg); border:1px solid var(--line2); display:grid; place-items:center; transition:border-color .5s,box-shadow .5s; }
.node::after { content:''; width:7px; height:7px; border-radius:50%; background:var(--line2); transition:background .5s,box-shadow .5s; }
.step.is-active .node { border-color:var(--cyan); box-shadow:0 0 22px -2px var(--cyan); }
.step.is-active .node::after { background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.step-n { font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--muted); transition:color .5s; }
.step.is-active .step-n { color:var(--cyan); }
.step h3 { font-size:clamp(22px,2vw,28px); margin:10px 0 12px; letter-spacing:-.03em; }
.step p { color:var(--soft); font-size:15px; }
.js .step { opacity:.35; transition:opacity .6s; }
.js .step.is-active { opacity:1; }

/* ---------- Pricing ---------- */
.price-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:1100px; margin-inline:auto; }
.price-card { border-radius:28px; padding:clamp(28px,3.4vw,44px); background:var(--card); border:1px solid var(--line); display:flex; flex-direction:column; }
.price-card.featured { background:linear-gradient(180deg,rgba(124,92,255,.14),rgba(16,19,32,.7)); border-color:transparent; }
.featured-border { position:absolute; inset:0; border-radius:inherit; padding:1.5px; z-index:1; pointer-events:none; background:conic-gradient(from var(--angle),var(--cyan),var(--violet),var(--magenta),var(--cyan)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:rotateBorder 6s linear infinite; }
.featured::after { background:radial-gradient(600px circle at 50% 0%,rgba(55,243,255,.12),transparent 60%) !important; }
@keyframes rotateBorder { to { --angle:360deg; } }
.price-top { display:flex; justify-content:space-between; align-items:center; }
.price-top .icon { color:var(--cyan); }
.price-label { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--muted); }
.price-amount { display:flex; align-items:baseline; gap:6px; margin-top:26px; font-family:var(--display); font-weight:700; letter-spacing:-.06em; line-height:.9; }
.price-amount b { font-size:clamp(76px,8vw,120px); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.price-amount span { font-size:clamp(34px,3.4vw,50px); }
.price-amount small { font-size:18px; color:var(--soft); font-family:var(--sans); font-weight:400; letter-spacing:0; }
.price-cadence { margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--cyan); text-transform:uppercase; }
.price-desc { margin-top:16px; color:var(--soft); }
.checks { list-style:none; margin:24px 0 30px; padding:0; display:grid; gap:12px; }
.checks li { position:relative; padding-left:30px; font-size:15px; }
.checks li::before { content:''; position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:6px; background:linear-gradient(145deg,rgba(55,243,255,.25),rgba(124,92,255,.25)); border:1px solid rgba(55,243,255,.35); }
.checks li::after { content:''; position:absolute; left:6px; top:8px; width:6px; height:9px; border:solid var(--cyan); border-width:0 1.8px 1.8px 0; transform:rotate(45deg); }
.price-card .btn { margin-top:auto; align-self:flex-start; }
.price-note { margin-top:18px; font-size:12.5px; color:var(--muted); }

/* ---------- About ---------- */
.about-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,6vw,100px); align-items:center; }
.about-visual { perspective:1200px; }
.mono-3d { position:relative; aspect-ratio:1; max-width:520px; margin-inline:auto; display:grid; place-items:center; border-radius:32px; background:radial-gradient(circle at 50% 45%,rgba(124,92,255,.25),transparent 60%),var(--card); border:1px solid var(--line); overflow:hidden; transform-style:preserve-3d; transition:transform .6s var(--ease); }
.mono-3d::before { content:''; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:40px 40px; -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 75%); mask-image:radial-gradient(circle,#000 30%,transparent 75%); }
.ring { position:absolute; left:50%; top:50%; border-radius:50%; border:1px solid rgba(55,243,255,.4); }
.r1 { width:78%; aspect-ratio:1; animation:ringA 12s linear infinite; }
.r2 { width:62%; aspect-ratio:1; border-color:rgba(255,79,216,.4); animation:ringB 16s linear infinite; }
.r3 { width:92%; aspect-ratio:1; border-style:dashed; border-color:rgba(124,92,255,.35); animation:ringC 40s linear infinite; }
@keyframes ringA { from { transform:translate(-50%,-50%) rotateX(70deg) rotateZ(0); } to { transform:translate(-50%,-50%) rotateX(70deg) rotateZ(360deg); } }
@keyframes ringB { from { transform:translate(-50%,-50%) rotateY(70deg) rotateZ(0); } to { transform:translate(-50%,-50%) rotateY(70deg) rotateZ(-360deg); } }
@keyframes ringC { from { transform:translate(-50%,-50%) rotate(0); } to { transform:translate(-50%,-50%) rotate(360deg); } }
.mono { position:relative; z-index:2; font-family:var(--display); font-weight:700; font-size:clamp(110px,15vw,210px); letter-spacing:-.08em; line-height:1; background:linear-gradient(180deg,#fff 20%,rgba(255,255,255,.35)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; transform:translateZ(60px); filter:drop-shadow(0 0 40px rgba(124,92,255,.6)); }
.mono::before,.mono::after { content:attr(data-text); position:absolute; inset:0; background:inherit; -webkit-background-clip:text; background-clip:text; opacity:0; }
.mono-3d:hover .mono::before { opacity:.8; background:var(--cyan); -webkit-background-clip:text; background-clip:text; animation:glitch1 .5s steps(2) infinite; }
.mono-3d:hover .mono::after { opacity:.8; background:var(--magenta); -webkit-background-clip:text; background-clip:text; animation:glitch2 .5s steps(2) infinite; }
@keyframes glitch1 { 0%{transform:translate(-4px,2px);clip-path:inset(10% 0 55% 0)} 50%{transform:translate(4px,-2px);clip-path:inset(60% 0 5% 0)} 100%{transform:translate(-2px,0);clip-path:inset(30% 0 40% 0)} }
@keyframes glitch2 { 0%{transform:translate(4px,-1px);clip-path:inset(55% 0 10% 0)} 50%{transform:translate(-4px,2px);clip-path:inset(5% 0 70% 0)} 100%{transform:translate(2px,1px);clip-path:inset(40% 0 30% 0)} }
.mono-sub { position:absolute; bottom:24px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--muted); z-index:2; }
.mono-sub i { font-style:normal; color:var(--cyan); }
.about-copy .eyebrow { margin-bottom:22px; }
.about-copy .sec-title { margin-bottom:28px; }
.about-copy > p { color:var(--soft); margin-top:14px; max-width:560px; }
.location { display:flex !important; gap:12px; align-items:flex-start; padding:18px 20px; margin:26px 0 !important; border-radius:16px; background:var(--card); border:1px solid var(--line); }
.location .icon { color:var(--magenta); }
.location strong { display:block; color:var(--ink); }

/* ---------- FAQ ---------- */
.faq-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,6vw,100px); align-items:start; }
.faq-side { position:sticky; top:calc(var(--header-h) + 40px); }
.faq-side .eyebrow { margin-bottom:22px; }
.faq-side .sec-lead { justify-self:start; margin-top:24px; }
.faq-list { display:grid; gap:10px; }
details { border-radius:18px; background:var(--card); border:1px solid var(--line); transition:border-color .4s,background .4s; interpolate-size:allow-keywords; }
details[open] { border-color:rgba(55,243,255,.35); background:rgba(20,24,42,.8); }
summary { list-style:none; display:flex; align-items:center; gap:16px; padding:20px 22px; font-weight:700; font-size:16px; line-height:1.4; }
summary::-webkit-details-marker { display:none; }
summary em { font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--cyan); font-weight:400; letter-spacing:.1em; }
.plus { position:relative; margin-left:auto; width:28px; height:28px; flex:none; border-radius:50%; border:1px solid var(--line2); transition:transform .5s var(--ease),background .3s,border-color .3s; }
.plus::before,.plus::after { content:''; position:absolute; left:50%; top:50%; width:10px; height:1.5px; margin:-.75px 0 0 -5px; background:currentColor; }
.plus::after { transform:rotate(90deg); }
details[open] .plus { transform:rotate(135deg); background:var(--cyan); border-color:var(--cyan); color:#050510; }
details::details-content { block-size:0; overflow:hidden; transition:block-size .5s var(--ease),content-visibility .5s allow-discrete; }
details[open]::details-content { block-size:auto; }
.faq-a { padding:0 22px 22px 60px; color:var(--soft); font-size:15px; }

/* ---------- Contact ---------- */
.contact { position:relative; padding:clamp(100px,13vw,170px) 0; overflow:hidden; isolation:isolate; }
.contact-bg { position:absolute; inset:0; z-index:-1; background:radial-gradient(900px 500px at 20% 30%,rgba(124,92,255,.28),transparent 60%),radial-gradient(700px 500px at 90% 80%,rgba(255,79,216,.18),transparent 60%),radial-gradient(600px 400px at 70% 10%,rgba(55,243,255,.14),transparent 60%); }
.contact-bg::after { content:''; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 70%); mask-image:radial-gradient(ellipse at center,#000 20%,transparent 70%); }
.contact-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,6vw,90px); align-items:center; }
.contact-copy .eyebrow { margin-bottom:22px; }
.contact-copy .sec-lead { margin-top:26px; justify-self:start; }
.contact-person { display:flex; align-items:center; gap:14px; margin-top:30px; font-weight:700; }
.contact-person small { display:block; font-weight:400; color:var(--muted); font-size:13px; }
.avatar { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); background:var(--grad); color:#050510; box-shadow:0 0 30px -6px var(--violet); }
.terminal { border-radius:26px; background:rgba(10,12,22,.72); border:1px solid var(--line2); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 50px 120px -40px rgba(124,92,255,.6); overflow:hidden; }
.terminal-bar { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--muted); }
.terminal-bar span:nth-child(2) { flex:1; text-align:center; }
.blink { color:var(--lime); animation:blink 1.4s steps(2) infinite; }
.brief { padding:clamp(22px,3vw,34px); display:grid; gap:12px; }
.brief label, .brief legend { font-weight:700; font-size:14px; display:flex; align-items:center; gap:10px; }
.brief label em, .brief legend em { font-style:normal; font-family:var(--mono); font-size:10px; color:var(--cyan); font-weight:400; }
.opt { color:var(--muted); font-weight:400; }
.brief fieldset { border:0; margin:10px 0 6px; padding:0; }
.brief legend { margin-bottom:10px; padding:0; }
.select-wrap { position:relative; }
.select-wrap::after { content:''; position:absolute; right:18px; top:50%; width:8px; height:8px; margin-top:-6px; border:solid var(--cyan); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); pointer-events:none; }
select, textarea { width:100%; padding:15px 18px; border-radius:14px; border:1px solid var(--line2); background:rgba(0,0,0,.35); color:var(--ink); font-size:16px; transition:border-color .3s,box-shadow .3s; appearance:none; -webkit-appearance:none; }
select { padding-right:44px; margin-bottom:8px; }
select option { background:#0d101b; color:var(--ink); }
textarea { resize:vertical; min-height:92px; margin-bottom:10px; }
select:focus, textarea:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(55,243,255,.12); }
.goals { display:flex; flex-wrap:wrap; gap:8px; }
.goals label { position:relative; }
.goals input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.goals span { display:block; padding:10px 16px; border-radius:999px; border:1px solid var(--line2); font-size:13.5px; font-weight:700; color:var(--soft); transition:all .3s; }
.goals input:checked + span { color:#050510; background:var(--grad); border-color:transparent; box-shadow:0 0 22px -6px var(--violet); }
.goals input:focus-visible + span { outline:2px solid var(--cyan); outline-offset:3px; }
.form-note { font-size:12.5px; color:var(--muted); text-align:center; }

/* ---------- Footer ---------- */
.site-footer { position:relative; padding:clamp(60px,8vw,110px) 0 calc(28px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); overflow:hidden; }
.footer-word { --fx:50%; --fy:50%; display:block; font-family:var(--display); font-weight:700; font-size:clamp(54px,12.5vw,210px); line-height:.9; letter-spacing:-.065em; }
.fw-line { display:flex; align-items:center; gap:.15em; }
.fw-line:first-child { color:transparent; -webkit-text-stroke:1px rgba(238,240,251,.35); }
.fw-grad { background:radial-gradient(circle at var(--fx) var(--fy),#fff 0%,var(--cyan) 15%,var(--violet) 40%,var(--magenta) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.fw-line i { font-style:normal; font-size:.55em; color:var(--cyan); transition:transform .6s var(--ease); }
.footer-word:hover i { transform:translate(10px,-10px) rotate(8deg); }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:clamp(40px,6vw,80px); padding-top:30px; border-top:1px solid var(--line); }
.footer-nav { display:flex; gap:26px; flex-wrap:wrap; }
.footer-nav a { color:var(--soft); font-weight:700; font-size:14px; transition:color .3s; }
.footer-nav a:hover { color:var(--cyan); }
.back-top { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line2); font-size:20px; transition:background .3s,color .3s,border-color .3s; }
.back-top:hover { background:var(--cyan); color:#050510; border-color:var(--cyan); }
.footer-bottom { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:30px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted); }
.footer-info { font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--soft); text-decoration:underline; text-underline-offset:4px; }

.floating-wa { position:fixed; z-index:70; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:10px; padding:12px 18px 12px 14px; border-radius:999px; background:rgba(10,12,22,.8); border:1px solid rgba(55,243,255,.35); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 0 30px -8px rgba(55,243,255,.6); font-weight:700; font-size:14px; opacity:0; transform:translateY(20px) scale(.9); pointer-events:none; transition:opacity .5s var(--ease),transform .5s var(--ease); }
.floating-wa .icon { color:var(--cyan); }
.floating-wa.is-visible { opacity:1; transform:none; pointer-events:auto; }
.no-js .floating-wa { display:none; }

/* ---------- Dialogs ---------- */
.dlg { width:min(640px,calc(100% - 28px)); max-height:calc(100dvh - 28px); padding:26px; border-radius:26px; border:1px solid var(--line2); background:rgba(10,12,22,.92); color:var(--ink); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 60px 140px -40px rgba(124,92,255,.7); overflow:auto; }
.dlg[open] { animation:dlgIn .6s var(--ease); }
@keyframes dlgIn { from { opacity:0; transform:translateY(24px) scale(.97); } }
.dlg::backdrop { background:rgba(2,3,8,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.dlg-top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:18px; }
.dlg h2 { font-size:clamp(26px,3.2vw,38px); letter-spacing:-.04em; margin-top:6px; }
.dlg-close { width:44px; height:44px; flex:none; border-radius:50%; border:1px solid var(--line2); font-size:24px; line-height:1; transition:background .3s,color .3s,transform .5s var(--ease); }
.dlg-close:hover { background:var(--ink); color:#050510; transform:rotate(90deg); }
.dlg-note { margin-top:14px; font-size:12.5px; color:var(--muted); }
.dlg-shot { width:min(980px,calc(100% - 28px)); }
.dlg-toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.06em; }
.chip-btn { padding:9px 14px; border-radius:999px; border:1px solid var(--line2); font-size:12px; font-weight:700; transition:border-color .3s; }
.chip-btn:hover { border-color:var(--cyan); }
.shot-viewport { max-height:62dvh; overflow:auto; border-radius:16px; background:#000; border:1px solid var(--line); }
.shot-viewport img { width:100%; height:auto; margin-inline:auto; }
.shot-viewport:not(.is-zoomed) img { max-height:62dvh; width:auto; }
.shot-viewport.is-zoomed img { width:1436px; max-width:none; }
.dlg-shot .link-arrow { margin-top:12px; }
.dlg-project { width:min(1000px,calc(100% - 28px)); }
.project-dlg-body { display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:start; }
.project-dlg-img { position:relative; border-radius:18px; overflow:hidden; }
.project-dlg-img img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.project-dlg-img .tag { position:absolute; left:12px; top:12px; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); color:#fff; }
.project-dlg-copy > p:not(.eyebrow):not(.dlg-note) { color:var(--soft); margin-top:12px; }
.project-dlg-copy .checks { margin:20px 0 24px; }
.dlg-msg textarea { margin-top:14px; font-size:14px; }
#message-context { color:var(--soft); margin-top:8px; }
.msg-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.copy-feedback { margin-top:10px; font-size:13px; color:var(--cyan); min-height:1.4em; }
.privacy-content p { color:var(--soft); margin-top:12px; font-size:15px; }

/* ---------- Responsive ---------- */
@media (max-width:1180px) {
  .desktop-nav a { padding:8px 12px; }
  .chip-a { left:-4%; } .chip-b { right:-2%; }
}
@media (max-width:1024px) {
  :root { --header-h:68px; }
  .desktop-nav, .header-cta { display:none; }
  .menu-toggle { display:block; }
  .motion-toggle { margin-left:auto; }
  .hero { padding-top:calc(var(--header-h) + 60px); align-items:flex-start; }
  .hero-layout { grid-template-columns:1fr; gap:70px; }
  .hero-stage { justify-self:center; max-width:440px; }
  .sec-head { grid-template-columns:1fr; gap:22px; }
  .sec-lead { justify-self:start; }
  .case { grid-template-columns:1fr; }
  .case-visual { max-width:560px; width:100%; margin-inline:auto; }
  .bento { grid-template-columns:1fr 1fr; }
  .metrics-grid { grid-template-columns:1fr 1fr; }
  .metric:nth-child(3) { border-left:0; }
  .metric:nth-child(n+3) { border-top:1px solid var(--line); }
  .about-grid, .faq-grid, .contact-grid { grid-template-columns:1fr; }
  .about-visual { max-width:460px; width:100%; margin-inline:auto; }
  .faq-side { position:static; }
  .price-grid { grid-template-columns:1fr; max-width:620px; }
}
@media (max-width:860px) {
  .concepts { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; margin-inline:calc(var(--gutter) * -1); padding:6px var(--gutter) 20px; scrollbar-width:none; }
  .concepts::-webkit-scrollbar { display:none; }
  .concept { flex:0 0 min(78vw,360px); scroll-snap-align:center; }
  .js .concept.reveal { opacity:1; transform:none; }
  .steps { grid-template-columns:1fr; gap:34px; padding-left:44px; }
  .timeline-rail { left:11px; right:auto; top:0; bottom:0; width:1px; height:auto; }
  .timeline-fill { transform-origin:top; transform:scaleY(var(--p)); }
  .step { padding-top:0; }
  .node { left:-44px; top:2px; }
  .hud-bl, .hud-tr { display:none; }
}
@media (max-width:640px) {
  body { font-size:15.5px; }
  .brand-name { display:none; }
  .hero { padding-bottom:70px; }
  .hero-title { font-size:clamp(42px,12.6vw,64px); }
  .hero-actions .btn { width:100%; }
  .hud-tl { font-size:9.5px; }
  .hud-br { display:none; }
  .chip-a { left:-2%; bottom:-6%; padding:10px 12px; } .chip-a b { font-size:15px; }
  .chip-b { right:-2%; top:-5%; }
  .orbit-1 { width:120%; } .orbit-2 { width:108%; }
  .bento { grid-template-columns:1fr; }
  .b-wide { grid-column:auto; }
  .bento-card { min-height:300px; padding:24px; }
  .v-layout, .v-chat { width:62%; }
  .metric { padding:26px 14px; }
  .tabs { width:100%; } .tabs button { flex:1; justify-content:center; padding:10px 8px; }
  .case-panel { padding:22px; min-height:0; }
  .facts { grid-template-columns:1fr 1fr 1fr; } .facts div { padding:12px 10px; } .facts dd { font-size:13px; }
  .case-end .btn { width:100%; }
  .faq-a { padding-left:22px; }
  summary { padding:18px; font-size:15px; }
  .price-card .btn { align-self:stretch; }
  .project-dlg-body { grid-template-columns:1fr; }
  .dlg { padding:20px; border-radius:22px; }
  .footer-nav { gap:18px; }
  .floating-wa span { display:none; }
  .floating-wa { padding:14px; }
  .marquee { transform:rotate(-2deg) scale(1.06); }
}
@media (max-width:380px) {
  .goals span { padding:9px 12px; font-size:12.5px; }
  .m-val b { font-size:40px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-play-state:paused !important; transition-duration:.001ms !important; transition-delay:0s !important; }
.reduce-motion .reveal, .reduce-motion .hero-stage, .reduce-motion .hero-copy > *, .reduce-motion .sec-title .split, .reduce-motion .hero-title .char, .reduce-motion .step, .reduce-motion .v-chat span, .reduce-motion .hud { opacity:1 !important; transform:none !important; }
.reduce-motion .manifesto-text .w { opacity:1 !important; }
.reduce-motion .timeline { --p:1 !important; }
html.reduce-motion { scroll-behavior:auto; }

/* =====================================================================
   Concept fonts (loaded only when a concept uses them)
   ===================================================================== */
@font-face { font-family:'Gloock'; src:url('../fonts/Gloock-Regular.woff') format('woff'); font-display:swap; }
@font-face { font-family:'Italiana'; src:url('../fonts/Italiana-Regular.woff') format('woff'); font-display:swap; }
@font-face { font-family:'Young Serif'; src:url('../fonts/YoungSerif-Regular.woff') format('woff'); font-display:swap; }
@font-face { font-family:'Lora'; src:url('../fonts/Lora-Bold.woff') format('woff'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Big Shoulders Display'; src:url('../fonts/BigShoulders-Bold.woff') format('woff'); font-weight:400 800; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('../fonts/BricolageGrotesque-Bold.woff') format('woff'); font-weight:400 800; font-display:swap; }
@property --lab-a { syntax:'<color>'; initial-value:#37f3ff; inherits:true; }
@property --lab-b { syntax:'<color>'; initial-value:#7c5cff; inherits:true; }

/* =====================================================================
   Concept Lab
   ===================================================================== */
.lab { --lab-a:#c8492c; --lab-b:#5b6b2f; position:relative; transition:--lab-a .9s var(--ease),--lab-b .9s var(--ease); }
.lab-stage { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(20px,3vw,44px); align-items:start; }
.lab-frame { position:relative; justify-self:center; width:100%; padding:10px; border-radius:26px; background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); box-shadow:0 50px 120px -40px color-mix(in srgb,var(--lab-a) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--lab-a) 20%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:max-width .7s var(--ease),box-shadow .9s; }
.lab-frame[data-view="mobile"] { max-width:340px; }
.lab-glow { position:absolute; inset:12% 8% -6%; z-index:-1; border-radius:50%; background:linear-gradient(100deg,var(--lab-a),var(--lab-b)); filter:blur(90px); opacity:.35; pointer-events:none; }
.lab-bar { display:flex; align-items:center; gap:10px; padding:4px 6px 10px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.lab-url { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.35); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lab-url .icon { width:12px; height:12px; color:var(--lime); }
.lab-views { display:flex; gap:2px; padding:3px; border-radius:999px; background:rgba(0,0,0,.35); }
.lab-view { width:30px; height:26px; border-radius:999px; display:grid; place-items:center; color:var(--muted); transition:background .3s,color .3s; }
.lab-view .icon { width:15px; height:15px; }
.lab-view[aria-pressed="true"] { background:var(--ink); color:#050510; }
.lab-screen { position:relative; container-type:inline-size; aspect-ratio:16/10.5; border-radius:16px; overflow:hidden; background:#0b0d16; transition:aspect-ratio .7s var(--ease); }
.lab-frame[data-view="mobile"] .lab-screen { aspect-ratio:9/17; border-radius:24px; }
.lab-screen.is-manual { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.lab-screen.is-manual .mock { position:relative; min-height:100%; }
.lab-fallback { list-style:none; margin:0; padding:24px; display:grid; gap:8px; color:var(--soft); font-size:15px; }

/* Transitions between concepts */
.mock { position:absolute; inset:0; overflow:hidden; }
.lab-screen.is-manual .mock { overflow:visible; }
.mock.is-entering { z-index:2; clip-path:circle(0% at var(--ox,50%) var(--oy,100%)); transition:clip-path .95s var(--ease-io); }
.mock.is-entering.is-in { clip-path:circle(150% at var(--ox,50%) var(--oy,100%)); }
.mock.is-leaving { transform:scale(.94); filter:blur(4px) brightness(.55); transition:transform .95s var(--ease-io),filter .95s; }

/* =====================================================================
   Mini-site mockups (scaled with container query units)
   ===================================================================== */
.mock { --m-display:Georgia,serif; font-family:var(--sans); background:var(--m-bg); color:var(--m-ink); font-size:1.12cqi; line-height:1.45; letter-spacing:0; }
.m-page { will-change:transform; animation:mscroll 22s ease-in-out infinite; animation-delay:1.2s; }
.lab-screen:hover .m-page { animation-play-state:paused; }
.lab-screen.is-manual .m-page { animation:none; }
@keyframes mscroll { 0%,14% { transform:translateY(0); } 48%,62% { transform:translateY(var(--scroll,0px)); } 100% { transform:translateY(0); } }
.m-nav { display:flex; align-items:center; gap:2.2em; padding:1.7em 3.2em; }
.m-logo { font-family:var(--m-display); font-size:2em; line-height:1; letter-spacing:-.01em; display:flex; align-items:center; gap:.18em; }
.m-logo i { width:.26em; height:.26em; border-radius:50%; background:var(--m-accent); margin-top:.3em; }
.m-links { display:flex; gap:2.4em; margin-left:auto; font-size:1em; color:var(--m-muted); }
.m-cta { padding:.75em 1.5em; border-radius:99em; background:var(--m-ink); color:var(--m-bg); font-weight:700; font-size:.95em; }
.m-burger { display:none; margin-left:auto; width:2.6em; height:2.6em; border-radius:50%; border:1px solid color-mix(in srgb,var(--m-ink) 25%,transparent); position:relative; }
.m-burger i { position:absolute; left:28%; right:28%; height:1.5px; background:var(--m-ink); top:42%; } .m-burger i + i { top:56%; }
.m-hero { position:relative; display:grid; grid-template-columns:1.05fr 1fr; gap:2.5em; padding:1.4em 3.2em 3.4em; min-height:34em; align-items:center; }
.m-copy { display:flex; flex-direction:column; gap:1.2em; position:relative; z-index:2; }
.m-kicker { font-family:var(--mono); font-size:.85em; letter-spacing:.16em; color:var(--m-accent); }
.m-title { font-family:var(--m-display); font-size:4.4em; line-height:1; letter-spacing:-.025em; text-wrap:balance; }
.is-upper .m-title { text-transform:uppercase; letter-spacing:.02em; }
.is-italic .m-title, .is-italic .m-logo, .is-italic .m-h { font-style:italic; }
.m-lead { font-size:1.25em; color:var(--m-muted); max-width:28em; }
.m-btns { display:flex; gap:.8em; flex-wrap:wrap; margin-top:.4em; }
.m-btn { display:inline-flex; align-items:center; padding:.95em 1.7em; border-radius:99em; background:var(--m-accent); color:var(--m-on); font-weight:700; font-size:1em; white-space:nowrap; }
.m-ghost { background:transparent; color:var(--m-ink); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-ink) 30%,transparent); }
.m-media { position:relative; height:100%; min-height:28em; border-radius:1.6em; overflow:hidden; background:var(--m-surface); }
.m-media img, .m-media svg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.m-media img { animation:kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform:scale(1.02); } to { transform:scale(1.12) translate(-1.5%,-1%); } }
.layout-split-rev .m-media { order:-1; }
/* full-bleed photo with overlay */
.layout-full .m-hero { grid-template-columns:1fr; min-height:40em; padding:0; margin:0 1.6em; border-radius:1.8em; overflow:hidden; align-items:end; }
.layout-full .m-media { position:absolute; inset:0; border-radius:0; min-height:0; }
.layout-full .m-media::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,color-mix(in srgb,var(--m-ink) 82%,transparent),transparent 65%); }
.layout-full .m-copy { padding:3.2em; color:var(--m-bg); }
.layout-full .m-lead { color:color-mix(in srgb,var(--m-bg) 80%,transparent); }
.layout-full .m-kicker { color:var(--m-accent2); }
.layout-full .m-ghost { color:var(--m-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-bg) 50%,transparent); }
.layout-full .m-title { font-size:5.4em; }
/* centered copy above a wide banner */
.layout-center .m-hero { grid-template-columns:1fr; text-align:center; gap:2.2em; padding-top:2.4em; }
.layout-center .m-copy { align-items:center; }
.layout-center .m-lead { margin-inline:auto; }
.layout-center .m-btns { justify-content:center; }
.layout-center .m-media { min-height:24em; height:24em; }
/* poster: huge type over artwork */
.layout-poster .m-hero { grid-template-columns:1fr; min-height:40em; padding:0; margin:0 1.6em; border-radius:1.2em; overflow:hidden; align-items:end; }
.layout-poster .m-media { position:absolute; inset:0; border-radius:0; min-height:0; }
.layout-poster .m-media::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,var(--m-bg) 8%,color-mix(in srgb,var(--m-bg) 55%,transparent) 55%,transparent 85%); }
.layout-poster .m-copy { padding:3em; }
.layout-poster .m-title { font-size:7.2em; line-height:.86; max-width:9em; }
.layout-poster .m-lead { color:var(--m-ink); opacity:.8; }
.m-section { padding:3.6em 3.2em 2em; }
.m-h { display:block; font-family:var(--m-display); font-size:2.4em; line-height:1.05; margin-bottom:.9em; letter-spacing:-.015em; }
.is-upper .m-h { text-transform:uppercase; letter-spacing:.03em; }
.m-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2em; }
.m-card { display:flex; flex-direction:column; gap:.35em; padding:1.6em; border-radius:1.2em; background:var(--m-surface); min-height:11em; }
.m-card-n { font-family:var(--mono); font-size:.8em; color:var(--m-muted); margin-bottom:auto; }
.m-card b { font-size:1.3em; line-height:1.2; }
.m-card small { color:var(--m-muted); font-size:1em; }
.m-card em { font-style:normal; font-weight:700; color:var(--m-accent); font-size:1.15em; }
.m-band { margin:2em 3.2em; padding:2.6em; border-radius:1.6em; background:var(--m-accent2); color:var(--m-bg); display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:2em; align-items:center; }
.m-band .m-h { margin:0 0 .3em; font-size:2.1em; }
.m-band .m-p { grid-column:1; opacity:.85; font-size:1.1em; }
.m-band .m-btn { grid-column:2; grid-row:1 / span 2; background:var(--m-bg); color:var(--m-ink); }
.mock-kinesis .m-band .m-btn { background:var(--m-accent); color:var(--m-on); }
.mock-kinesis .m-band { background:var(--m-surface); color:var(--m-ink); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-accent) 40%,transparent); }
.mock-arco .m-band, .mock-materia .m-band { background:var(--m-surface); color:var(--m-ink); }
.mock-arco .m-band .m-btn, .mock-materia .m-band .m-btn { background:var(--m-accent); color:var(--m-on); }
.m-info { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2em; padding:1.6em 3.2em 2.4em; }
.m-info div { padding-top:1em; border-top:1px solid color-mix(in srgb,var(--m-ink) 18%,transparent); display:flex; flex-direction:column; gap:.3em; }
.m-info small { font-family:var(--mono); font-size:.78em; letter-spacing:.14em; color:var(--m-muted); }
.m-info b { font-size:1.1em; }
.m-foot { display:flex; justify-content:space-between; padding:1.8em 3.2em 2.2em; font-size:.9em; color:var(--m-muted); border-top:1px solid color-mix(in srgb,var(--m-ink) 12%,transparent); }
.m-foot span:first-child { font-family:var(--m-display); color:var(--m-ink); font-size:1.3em; }

/* Mobile view of the mini-site */
@container (max-width:480px) {
  .mock { font-size:3.3cqi; }
  .m-nav { padding:1.3em 1.4em; gap:1em; }
  .m-links, .m-cta { display:none; }
  .m-burger { display:block; }
  .m-hero, .layout-split-rev .m-hero { grid-template-columns:1fr; gap:1.6em; padding:.6em 1.4em 2.4em; min-height:0; }
  .m-media, .layout-center .m-media { min-height:17em; height:17em; }
  .layout-split .m-media { order:-1; }
  .m-title { font-size:2.9em; }
  .layout-full .m-hero, .layout-poster .m-hero { min-height:34em; margin:0 .8em; padding:0; }
  .layout-full .m-media, .layout-poster .m-media { height:auto; min-height:0; }
  .layout-full .m-copy, .layout-poster .m-copy { padding:1.8em; }
  .layout-full .m-title { font-size:3.4em; }
  .layout-poster .m-title { font-size:4.6em; }
  .m-section { padding:2.6em 1.4em 1em; }
  .m-grid, .m-info { grid-template-columns:1fr; }
  .m-card { min-height:0; }
  .m-band { margin:1.6em 1.4em; padding:1.8em; grid-template-columns:1fr; row-gap:.8em; }
  .m-band .m-btn { grid-column:1; grid-row:auto; justify-self:start; }
  .m-info { padding:1em 1.4em 2em; }
  .m-foot { flex-direction:column; gap:.4em; padding:1.6em 1.4em; }
}

/* Artwork animation */
.art .sun { animation:sunset 14s ease-in-out infinite alternate; }
@keyframes sunset { to { transform:translateY(22px); fill:#ffc58f; } }
.art .waves { animation:waves 6s ease-in-out infinite alternate; }
@keyframes waves { to { transform:translateX(18px); } }
.art .lanes { animation:lanes 3s linear infinite; }
@keyframes lanes { from { transform:translateX(-40px); } to { transform:translateX(40px); } }
.art .pulse { stroke-dasharray:620; stroke-dashoffset:620; animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 60%,100% { stroke-dashoffset:0; } }
.art .b1 { animation:blob1 11s ease-in-out infinite alternate; } .art .b2 { animation:blob2 13s ease-in-out infinite alternate; }
@keyframes blob1 { to { transform:translate(40px,30px); } } @keyframes blob2 { to { transform:translate(-50px,-20px); } }
.art-arches .arcs path { stroke-dasharray:900; stroke-dashoffset:900; animation:draw 2.4s var(--ease) forwards; animation-delay:var(--d); }
@keyframes draw { to { stroke-dashoffset:0; } }
.art .bloom { transform-box:view-box; transform-origin:200px 150px; animation:bloom 40s linear infinite; }
@keyframes bloom { to { transform:rotate(360deg); } }

/* =====================================================================
   Lab info panel
   ===================================================================== */
.lab-info { position:relative; padding:clamp(22px,2.4vw,32px); border-radius:24px; background:var(--card); border:1px solid var(--line); }
.lab-info.is-swapping > * { animation:swapIn .7s var(--ease) both; }
.lab-info.is-swapping > :nth-child(2){animation-delay:.04s}.lab-info.is-swapping > :nth-child(3){animation-delay:.08s}.lab-info.is-swapping > :nth-child(4){animation-delay:.12s}.lab-info.is-swapping > :nth-child(5){animation-delay:.16s}.lab-info.is-swapping > :nth-child(6){animation-delay:.2s}.lab-info.is-swapping > :nth-child(7){animation-delay:.24s}.lab-info.is-swapping > :nth-child(8){animation-delay:.28s}
.lab-kicker { display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--muted); }
.lab-kicker .tag { margin-left:auto; }
.lab-index { color:var(--lab-a); filter:brightness(1.4) saturate(1.2); }
.lab-name { font-size:clamp(40px,4.4vw,64px); letter-spacing:-.05em; margin-top:12px; }
.lab-tagline { font-family:var(--serif); font-style:italic; font-size:clamp(19px,1.6vw,23px); color:var(--soft); margin-top:4px; }
.lab-desc { color:var(--soft); font-size:14.5px; margin-top:14px; }
.spec-label { display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--muted); margin-bottom:10px; }
.lab-specs { display:grid; grid-template-columns:1.3fr 1fr; gap:18px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.swatches { display:flex; gap:8px; }
.swatch { position:relative; flex:1; }
.swatch i { display:block; aspect-ratio:1; border-radius:10px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); transition:transform .4s var(--ease); }
.swatch:hover i { transform:translateY(-4px) scale(1.06); }
.swatch small { display:block; margin-top:6px; font-family:var(--mono); font-size:8.5px; line-height:1.4; letter-spacing:.04em; color:var(--muted); }
.type-sample { font-size:44px; line-height:1; color:var(--ink); }
.type-sample small { display:block; margin-top:8px; font-family:var(--mono); font-style:normal; font-size:9.5px; letter-spacing:.06em; color:var(--muted); line-height:1.4; }
.lab-lists { display:grid; grid-template-columns:1fr 1.2fr; gap:18px; margin-top:18px; }
.lab-chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.lab-chips li { padding:4px 10px; border-radius:999px; border:1px solid var(--line2); font-size:12px; color:var(--soft); }
.checks.sm { margin:0; gap:8px; }
.checks.sm li { font-size:13px; padding-left:24px; }
.checks.sm li::before { width:15px; height:15px; top:3px; border-radius:5px; }
.checks.sm li::after { left:5px; top:6px; width:5px; height:8px; }
.lab-signature { display:flex; gap:10px; align-items:flex-start; margin:18px 0; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.04); font-size:13px; color:var(--soft); }
.lab-signature .icon { width:18px; height:18px; color:var(--magenta); flex:none; margin-top:1px; }
.lab-signature b { color:var(--ink); }

/* =====================================================================
   Floating dock selector
   ===================================================================== */
.dock-wrap { position:sticky; bottom:max(16px,env(safe-area-inset-bottom)); z-index:6; display:flex; justify-content:center; margin-top:26px; pointer-events:none; }
.dock { pointer-events:auto; position:relative; display:flex; align-items:center; gap:4px; max-width:100%; padding:8px; border-radius:999px; background:rgba(10,12,22,.78); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); box-shadow:0 24px 60px -18px rgba(0,0,0,.9),0 0 50px -14px var(--lab-a); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; scroll-behavior:smooth; animation:float 6s ease-in-out infinite; }
.dock::-webkit-scrollbar { display:none; }
.dock::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--angle),var(--lab-a),transparent 30%,var(--lab-b) 55%,transparent 80%,var(--lab-a)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:rotateBorder 5s linear infinite; }
.dock-item { position:relative; z-index:1; flex:none; display:flex; align-items:center; padding:5px; border-radius:999px; color:var(--soft); background:transparent; transition:background .45s var(--ease),box-shadow .45s var(--ease); }
.dock-item[aria-selected="true"] { background:var(--ink); box-shadow:0 0 26px -4px var(--lab-a); animation:dockPop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes dockPop { 0% { transform:scale(.9); } 100% { transform:scale(1); } }
.dock-orb { position:relative; width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 30% 28%,color-mix(in srgb,var(--a) 70%,#fff),var(--a) 45%,var(--b)); box-shadow:inset 0 -3px 8px rgba(0,0,0,.3),0 4px 14px -4px var(--a); transform:scale(var(--mag,1)); transform-origin:50% 50%; transition:transform .25s var(--ease); }
.dock-orb i { font-style:normal; font-family:var(--display); font-weight:700; font-size:15px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.dock-item:hover .dock-orb { --mag-h:1; }
.dock-ring { position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); transform:rotate(-90deg); pointer-events:none; }
.dock-ring circle { fill:none; stroke:var(--lab-a); stroke-width:2; stroke-linecap:round; stroke-dasharray:116.3; stroke-dashoffset:116.3; opacity:0; }
.dock-item.is-timing .dock-ring circle { opacity:1; animation:ring 7s linear forwards; }
@keyframes ring { to { stroke-dashoffset:0; } }
.dock-label { display:block; max-width:0; overflow:hidden; opacity:0; white-space:nowrap; text-align:left; font-weight:700; font-size:13.5px; line-height:1.15; color:#050510; transition:max-width .6s var(--ease),opacity .35s,margin .6s var(--ease); }
.dock-label small { display:block; font-family:var(--mono); font-weight:400; font-size:8.5px; letter-spacing:.12em; color:#555a70; }
.dock-item[aria-selected="true"] .dock-label { max-width:170px; opacity:1; margin:0 14px 0 10px; }
.dock-item[aria-selected="true"] .dock-orb { box-shadow:inset 0 -3px 8px rgba(0,0,0,.3),0 0 0 2px #fff,0 6px 18px -4px var(--a); }
.dock-item:focus-visible { outline-offset:0; }
.dock-play { position:relative; z-index:1; flex:none; width:40px; height:40px; margin-left:4px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line2); color:var(--soft); transition:border-color .3s,color .3s; }
.dock-play:hover { border-color:var(--lab-a); color:var(--ink); }
.dock-play svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dock-play .i-play { display:none; } .dock-play[aria-pressed="false"] .i-play { display:block; } .dock-play[aria-pressed="false"] .i-pause { display:none; }
.js .lab .dock-item, .js .lab .dock-play { opacity:0; transform:translateY(16px) scale(.7); }
.js .lab.is-in .dock-item, .js .lab.is-in .dock-play { opacity:1; transform:none; transition:opacity .6s var(--ease),transform .7s cubic-bezier(.34,1.56,.64,1); transition-delay:calc(var(--i,8) * 60ms + .3s); }
.lab-in-view .floating-wa { opacity:0; pointer-events:none; transform:translateY(20px); }

/* =====================================================================
   Pricing VAT badge & legal line
   ===================================================================== */
.vat-badge { display:flex; align-items:center; gap:10px; margin-top:12px; font-size:12.5px; color:var(--soft); }
.vat-badge b { padding:3px 9px; border-radius:999px; background:var(--lime); color:#050510; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; box-shadow:0 0 16px -4px var(--lime); }
.legal-vat { color:var(--soft); }

/* =====================================================================
   Fisco chiaro
   ===================================================================== */
.fisco-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:22px; align-items:start; }
.fisco-cards { display:grid; gap:14px; }
.fisco-card { padding:26px 28px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); }
.fc-n { font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--cyan); }
.fisco-card h3 { font-size:clamp(21px,1.8vw,26px); margin:8px 0 8px; letter-spacing:-.03em; }
.fisco-card p { color:var(--soft); font-size:14.5px; }
.fisco-card strong { color:var(--ink); }
.calc { padding:clamp(22px,2.6vw,34px); border-radius:28px; background:linear-gradient(180deg,rgba(55,243,255,.07),rgba(16,19,32,.75)); border:1px solid var(--line2); position:sticky; top:calc(var(--header-h) + 24px); }
.calc-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.calc-head h3 { font-size:clamp(24px,2.2vw,32px); letter-spacing:-.035em; }
.calc fieldset { border:0; margin:0; padding:0; }
.calc-regimes { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; }
.calc-regimes label { position:relative; }
.calc-regimes input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.calc-regimes span { display:block; height:100%; padding:10px 12px; border-radius:14px; border:1px solid var(--line2); font-size:12.5px; font-weight:700; line-height:1.3; color:var(--soft); transition:all .3s; }
.calc-regimes small { display:block; font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.06em; color:var(--muted); margin-top:3px; }
.calc-regimes input:checked + span { color:#050510; background:var(--grad); border-color:transparent; box-shadow:0 0 24px -8px var(--violet); }
.calc-regimes input:checked + span small { color:#1c1c30; }
.calc-regimes input:focus-visible + span { outline:2px solid var(--cyan); outline-offset:3px; }
.calc-inputs { display:grid; grid-template-columns:1fr 1.4fr; gap:18px; margin-top:20px; }
.calc-inputs label { display:block; }
.calc-money { position:relative; display:block; }
.calc-money input { width:100%; padding:12px 34px 12px 16px; border-radius:14px; border:1px solid var(--line2); background:rgba(0,0,0,.35); color:var(--ink); font-family:var(--display); font-weight:700; font-size:20px; }
.calc-money input:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(55,243,255,.12); }
.calc-money i { position:absolute; right:14px; top:50%; transform:translateY(-50%); font-style:normal; color:var(--muted); }
.calc output { color:var(--cyan); }
input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; margin:0; }
input[type="range"]::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta)); }
input[type="range"]::-moz-range-track { height:4px; border-radius:4px; background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; margin-top:-9px; border-radius:50%; background:var(--ink); border:0; box-shadow:0 0 0 5px rgba(55,243,255,.22),0 0 18px var(--cyan); }
input[type="range"]::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--ink); border:0; box-shadow:0 0 0 5px rgba(55,243,255,.22),0 0 18px var(--cyan); }
input[type="range"]:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.calc-results { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:22px; border-radius:16px; overflow:hidden; background:var(--line); border:1px solid var(--line); }
.calc-results div { padding:14px 14px 16px; background:var(--bg2); }
.calc-results .spec-label { margin-bottom:6px; font-size:8.5px; }
.calc-results b { font-family:var(--display); font-size:clamp(18px,1.7vw,24px); letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.calc-results .hl b { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.calc-bar { display:flex; height:10px; margin-top:16px; border-radius:10px; overflow:hidden; background:var(--line); }
.calc-bar span { display:block; height:100%; transition:width .6s var(--ease); }
.calc-bar-net { background:#3a4060; }
.calc-bar-save { background:var(--grad); box-shadow:0 0 16px var(--cyan); }
.calc-formula { margin-top:12px; font-family:var(--mono); font-size:11.5px; color:var(--cyan); letter-spacing:.02em; }
.calc.is-flat .calc-formula { color:var(--lime); }
.calc-note { margin-top:14px; font-size:11.5px; line-height:1.55; color:var(--muted); }
.faq-a .link-arrow { margin-left:6px; font-size:14px; }

@media (max-width:1024px) {
  .lab-stage { grid-template-columns:1fr; }
  .fisco-grid { grid-template-columns:1fr; }
  .calc { position:static; }
}
@media (max-width:640px) {
  .lab-frame { padding:7px; border-radius:20px; }
  .lab-frame[data-view="mobile"] { max-width:300px; }
  .lab-specs, .lab-lists { grid-template-columns:1fr; }
  .dock-wrap { margin-inline:calc(var(--gutter) * -1 + 8px); }
  .dock-orb { width:34px; height:34px; }
  .dock-item[aria-selected="true"] .dock-label { max-width:120px; margin:0 10px 0 8px; }
  .calc-inputs { grid-template-columns:1fr; }
  .calc-results { grid-template-columns:1fr; }
  .calc-results div { display:flex; justify-content:space-between; align-items:baseline; }
  .calc-results .spec-label { margin:0; }
  .vat-badge { align-items:flex-start; }
}
.reduce-motion .m-page { animation:none !important; }
.reduce-motion .lab-screen { overflow-y:auto; }
.reduce-motion .lab-screen .mock { position:relative; min-height:100%; overflow:visible; }
.reduce-motion .lab .dock-item, .reduce-motion .lab .dock-play { opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce) { .m-page { animation:none !important; } .lab-screen { overflow-y:auto; } .lab-screen .mock { position:relative; min-height:100%; overflow:visible; } }