:root{
  --navy:#0A0D26; --violet:#1C1546; --amber:#FFB547; --amber-soft:#FFDA94; --teal:#22E4FF;
  --lilac:#7B6CE6; --ink:#ECEAFF; --muted:#A9A4D6; --line:rgba(123,108,230,.35);
  --card:rgba(16,14,48,.78); --err:#FF8A8A;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;min-height:100dvh;color:var(--ink);background-color:var(--navy);
  font:400 16px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;overflow-x:hidden}
a{color:var(--amber-soft)} a:hover{color:var(--amber)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.sr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Night Tower background (DaVinci README usage) ---------- */
.night-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:var(--navy) url("/brand/night-tower-bg-base.webp?v=0acbed210bbe03f0") center/cover no-repeat}
@media (max-width:900px){.night-bg{background-image:url("/brand/night-tower-bg-base-1280.webp?v=83fd7dae5db5a17a")}}
.night-bg object{width:100%;height:100%;display:block;pointer-events:none}

/* ---------- top bar ---------- */
.topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:calc(14px + env(safe-area-inset-top)) clamp(16px,2.5vw,28px) 0;font:500 .9rem Lexend,Inter,sans-serif;z-index:2}
.topbar a{color:var(--ink);text-decoration:none;opacity:.9;padding:6px 0}
.topbar a:hover{color:var(--teal);opacity:1}

/* ---------- layout ---------- */
.wrap{flex:1;width:100%;margin:0 auto;padding:0 16px 32px;display:flex;flex-direction:column;align-items:center}
.hero{width:100%;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(56px + env(safe-area-inset-top)) 0 clamp(20px,4vh,40px)}

/* ---------- interactive room ---------- */
.stage{position:relative;width:min(clamp(280px,58vh,660px),94vw);aspect-ratio:1;margin:0 auto clamp(6px,2vh,20px)}
.room{width:100%;height:100%;position:relative}
.room::before{content:"";position:absolute;inset:20%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,181,71,.18),rgba(123,108,230,.12) 55%,transparent);filter:blur(24px);animation:halo 5s ease-in-out infinite}
.room svg,.room img{position:relative;display:block;width:100%;height:100%;overflow:visible}
.room svg{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.82}}
@keyframes halo{0%,100%{opacity:.75}50%{opacity:1}}

#window,#light-spill{transform-box:fill-box;transform-origin:center}
#window{animation:flicker 5s steps(1,end) .6s infinite}
@keyframes flicker{0%,100%{opacity:1}41%{opacity:.82}42%{opacity:1}63%{opacity:.9}64%{opacity:.65}65%{opacity:1}}
#light-spill{animation:spill 5s ease-in-out .6s infinite}
@keyframes spill{0%,100%{opacity:1}50%{opacity:.9}64%{opacity:.7}}

/* hotspots (DaVinci README) */
.hotspot{cursor:pointer;transform-box:fill-box;transform-origin:center bottom;transition:transform .25s ease,filter .25s ease;outline:none;-webkit-tap-highlight-color:transparent}
.hotspot:hover,.hotspot:focus-visible,.hotspot.is-active{transform:translateY(-6px);filter:drop-shadow(0 0 10px #22E4FF) drop-shadow(0 0 3px #22E4FF)}
#hs-window{transform-origin:center}
#hs-window:hover,#hs-window:focus-visible,#hs-window.is-active{transform:none;filter:brightness(1.15) drop-shadow(0 0 14px #FFB547)}
@media (hover:none){.hotspot:hover:not(.is-active){transform:none;filter:none}}

/* "what's coming" card */
.info{position:absolute;z-index:5;width:min(230px,calc(100vw - 16px));text-align:left;
  background:rgba(22,18,62,.95);border:1px solid var(--teal);border-radius:11px;padding:8px 28px 9px 11px;
  box-shadow:0 0 0 1px rgba(34,228,255,.1),0 0 16px rgba(34,228,255,.2),0 8px 24px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:pop .16s ease-out}
/* pointer (rotated square) — points down at the prop by default, up when the bubble sits below it */
.info::after{content:"";position:absolute;left:var(--ax,50%);bottom:-6px;width:10px;height:10px;margin-left:-5px;
  background:rgb(22,18,62);border-right:1px solid var(--teal);border-bottom:1px solid var(--teal);transform:rotate(45deg)}
.info.info--below::after{bottom:auto;top:-6px;transform:rotate(225deg)}
.info:focus{outline:none}
.info[hidden]{display:none}
.info-title{font:600 .86rem/1.3 Lexend,Inter,sans-serif;margin:0 0 2px;color:#fff}
.info-body{margin:0;color:#D7D3F5;font-size:.78rem;line-height:1.4}
.info-close{position:absolute;top:2px;right:2px;width:26px;height:26px;border:0;border-radius:7px;background:transparent;color:var(--muted);
  font:400 1.15rem/1 Inter,sans-serif;cursor:pointer}
.info-close:hover{color:#fff;background:rgba(255,255,255,.06)}
/* active prop: teal outline glow while its bubble is open */
.hotspot.is-active,#hs-window.is-active{filter:drop-shadow(0 0 1.5px #22E4FF) drop-shadow(0 0 1.5px #22E4FF) drop-shadow(0 0 10px rgba(34,228,255,.75))!important}
/* desk hint: subtle teal glow pulse until the first hotspot interaction */
.stage.hinting #hs-keyboard:not(:hover):not(:focus-visible):not(.is-active){animation:deskGlow 3s ease-in-out infinite}
@keyframes deskGlow{
  0%,100%{filter:drop-shadow(0 0 1px rgba(34,228,255,.55)) drop-shadow(0 0 3px rgba(34,228,255,.25))}
  50%{filter:drop-shadow(0 0 3px rgba(34,228,255,.95)) drop-shadow(0 0 10px rgba(34,228,255,.5))}}
@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- type ---------- */
h1,h2{font-family:Lexend,Inter,system-ui,sans-serif;margin:0;letter-spacing:-.01em}
.title{font-size:clamp(2.6rem,min(11vw,8vh),5rem);line-height:1.05;letter-spacing:-.02em;color:#fff}
.t-studio{font-weight:700}
.t-cube{font-weight:400;color:var(--teal);text-shadow:0 0 28px rgba(34,228,255,.25)}
.title.has-svg{line-height:0}
.wordmark-img{display:block;height:clamp(44px,min(11vw,8vh),80px);width:auto;max-width:86vw;margin:0 auto}
.slogan{margin:clamp(10px,1.8vh,16px) auto 0;font:600 clamp(1.1rem,4.4vw,1.35rem)/1.3 Inter,system-ui,sans-serif;color:#F2F0FF}
.soon{display:flex;align-items:center;justify-content:center;gap:9px;margin:clamp(6px,1.2vh,10px) auto 0;
  color:#CFCBEF;font-weight:500;font-size:clamp(.9rem,3.4vw,.98rem)}
.soon strong{font-weight:500;color:#E9E6FF}
.dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.btn.btn--cta{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:220px;padding:0 28px;margin-top:clamp(14px,2.4vh,22px);text-decoration:none}
.btn--cta:hover{color:#1b1203}
.tip{margin:10px 0 0;color:var(--muted);font-size:.85rem;opacity:.85}
.tip-touch{display:none}
@media (hover:none){.tip-mouse{display:none}.tip-touch{display:inline}}

/* ---------- card / form ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,5vw,32px);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
  width:100%;max-width:460px;margin:0 auto;scroll-margin-top:24px}
.card:focus{outline:none}
.card h2{font-size:1.3rem;font-weight:600}
.card-sub{color:var(--muted);margin:.35em 0 1.2em;font-size:.95rem}
.field{margin:0 0 14px;border:0;padding:0;min-width:0}
label,legend{display:block;font-weight:500;font-size:.9rem;margin-bottom:6px;padding:0}
.opt{color:var(--muted);font-weight:400}
input[type=email],input[type=text]{width:100%;font:inherit;color:var(--ink);background:rgba(8,8,30,.6);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:48px;transition:border-color .15s,box-shadow .15s}
input::placeholder{color:#6f6a9c}
input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(34,228,255,.16)}
input[aria-invalid=true]{border-color:var(--err)}
.prefix{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:12px;background:rgba(8,8,30,.6);overflow:hidden}
.prefix:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(34,228,255,.16)}
.prefix span{display:flex;align-items:center;padding:0 0 0 14px;color:var(--muted);font-size:.9rem;white-space:nowrap}
.prefix input{border:0;background:transparent;padding-left:2px;box-shadow:none!important}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:rgba(8,8,30,.6);border:1px solid var(--line);border-radius:12px;padding:4px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{margin:0;text-align:center;padding:10px 4px;border-radius:9px;cursor:pointer;color:var(--muted);font-weight:500;min-height:40px}
.seg input:checked+label{background:linear-gradient(180deg,#3B2F94,#2A2170);color:#fff;box-shadow:inset 0 0 0 1px rgba(34,228,255,.55)}
.seg input:focus-visible+label{outline:2px solid var(--teal);outline-offset:1px}
.err{color:var(--err);font-size:.85rem;margin:6px 0 0}
.err:empty{display:none}
.ts{min-height:65px;margin:6px 0 12px}
.btn{width:100%;min-height:52px;font:600 1rem Lexend,Inter,sans-serif;color:#1b1203;cursor:pointer;border:0;border-radius:14px;
  background:linear-gradient(180deg,#FFC66E,var(--amber));box-shadow:0 8px 28px rgba(255,181,71,.32);transition:transform .1s,filter .15s}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:progress}
.status{margin:10px 0 0;font-size:.9rem;min-height:1.2em}
.status.is-error{color:var(--err)}
.privacy{color:var(--muted);font-size:.8rem;margin:14px 0 0}
.done{text-align:center;padding:12px 0}
.done:focus{outline:none}
.done h2{font-size:1.35rem;margin-top:10px}
.done p{color:var(--muted)}
.done-icon{width:56px;height:56px;margin:0 auto;border-radius:14px;background:var(--amber);box-shadow:0 0 30px rgba(255,181,71,.6);rotate:45deg;scale:.8}

/* ---------- footer ---------- */
.foot{text-align:center;padding:18px 20px calc(24px + env(safe-area-inset-bottom));color:var(--muted);font-size:.875rem}
.social{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.social a{color:var(--ink);text-decoration:none;padding:6px 2px}
.social a:hover{color:var(--teal)}
.credit{margin:10px 0 2px}
.copy{margin:0;opacity:.7;font-size:.8rem}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hotspot,#window,#light-spill,.room svg{animation:none!important;transition:none!important}
  .hotspot:hover,.hotspot:focus-visible,.hotspot.is-active{transform:none}
  /* gentle, non-moving version: no float/flicker, but the lamp and halo breathe very slowly (opacity only) */
  #window{animation:breathe 8s ease-in-out infinite!important}
  .room::before{animation:breathe 8s ease-in-out infinite!important}
  .stage.hinting #hs-keyboard:not(:hover):not(:focus-visible):not(.is-active){filter:drop-shadow(0 0 2px rgba(34,228,255,.8)) drop-shadow(0 0 6px rgba(34,228,255,.35))}
}