/* ===== Tokens ===== */
:root{
  --bg:#000000;
  --surface:#0c0c0e;
  --surface-2:#141417;
  --card:#111114;
  --line:#222228;
  --text:#f4f4f6;
  --muted:#8a8a93;
  --muted-2:#5c5c64;

  --yellow:#E5FF00;
  --blue:#1E90FF;
  --blue-2:#00A3FF;
  --purple:#A855F7;
  --green:#3ddc84;

  --radius:22px;
  --radius-sm:14px;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-weight:500;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:80px; /* room for dock */
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.05;letter-spacing:-.02em;font-weight:800}
img,svg{display:block;max-width:100%}
.grad-text{
  background:linear-gradient(100deg,var(--yellow),var(--blue-2) 45%,var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  padding:.85em 1.4em;border-radius:100px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s;
  white-space:nowrap;
}
.btn:active{transform:scale(.96)}
.btn--primary{
  background:var(--yellow);color:#0a0a0a;
  box-shadow:0 0 0 0 rgba(229,255,0,.5);
}
.btn--primary:hover{box-shadow:0 8px 30px -6px rgba(229,255,0,.55);transform:translateY(-2px)}
.btn--ghost{
  background:transparent;color:var(--text);border-color:var(--line);
}
.btn--ghost:hover{border-color:#444;background:var(--surface-2)}
.btn--card{
  background:var(--surface-2);color:var(--text);border:1px solid var(--line);
  width:100%;justify-content:center;padding:.8em 1em;
}
.btn--card:hover{background:var(--yellow);color:#0a0a0a;border-color:var(--yellow)}

.icon-btn{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  cursor:pointer;transition:.25s var(--ease);position:relative;
}
.icon-btn:hover{border-color:#444;transform:translateY(-2px)}
.cart__count{
  position:absolute;top:-4px;right:-4px;background:var(--yellow);color:#000;
  font-size:.66rem;font-weight:800;min-width:18px;height:18px;border-radius:9px;
  display:grid;place-items:center;padding:0 4px;
}

/* ===== Nav ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s,backdrop-filter .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(7,7,9,.72);backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;gap:22px;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.25rem;letter-spacing:-.03em}
.brand__mark{color:var(--yellow);display:grid;place-items:center}
.nav__links{display:flex;gap:6px;margin-left:18px}
.nav__link{
  position:relative;padding:8px 14px;border-radius:100px;color:var(--muted);
  font-weight:600;font-size:.95rem;transition:color .2s,background .2s;
}
.nav__link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;
  background:var(--accent,var(--yellow));transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.nav__link[data-accent="yellow"]{--accent:var(--yellow)}
.nav__link[data-accent="blue"]{--accent:var(--blue-2)}
.nav__link[data-accent="purple"]{--accent:var(--purple)}
.nav__link:hover{color:var(--text)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--text)}
.nav__actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav__toggle{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:8px}
.nav__toggle span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:.25s}

/* ===== Hero ===== */
.hero{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:140px 22px 40px;
}
/* glows fade out softly (no clip) and scale with the viewport so colour stays consistent at any width */
.hero__glow{position:absolute;border-radius:50%;aspect-ratio:1;filter:blur(130px);opacity:.5;pointer-events:none;z-index:0}
.hero__glow--purple{width:clamp(380px,55vw,640px);background:radial-gradient(circle,rgba(168,85,247,.55),transparent 70%);top:-140px;right:-60px}
.hero__glow--blue{width:clamp(360px,50vw,560px);background:radial-gradient(circle,rgba(0,163,255,.4),transparent 70%);bottom:-180px;left:-80px}
.hero__grid{
  position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;
  gap:40px;align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);padding:6px 12px;border-radius:100px;background:var(--surface);
}
.eyebrow__dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 10px var(--yellow)}
.hero__title{font-size:clamp(2.8rem,7vw,5.4rem);font-weight:900;margin:22px 0 18px}
.hero__lead{font-size:1.15rem;color:var(--muted);max-width:30ch;font-weight:500}
.rotator{color:var(--text);font-weight:700;border-bottom:2px solid var(--yellow);transition:opacity .3s}
.rotator.is-out{opacity:0}
.hero__cta{display:flex;gap:12px;margin:30px 0 36px;flex-wrap:wrap}
.hero__stats{list-style:none;display:flex;gap:30px;flex-wrap:wrap}
.hero__stats li{display:flex;flex-direction:column}
.hero__stats strong{font-size:1.35rem;font-weight:800}
.hero__stats span{font-size:.82rem;color:var(--muted)}

/* hero stage */
.hero__stage{position:relative;display:grid;place-items:center;min-height:420px}
.stage__ring{
  position:absolute;width:380px;height:380px;border-radius:50%;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.05),transparent 60%);
}
.stage__ring::after{
  content:"";position:absolute;inset:-40px;border-radius:50%;
  border:1px dashed #1c1c22;
}
.stage__product{position:relative;z-index:2;width:300px;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.art--coffee{width:100%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6))}
.led{animation:led 2.4s ease-in-out infinite}
@keyframes led{0%,100%{opacity:.4}50%{opacity:1;filter:drop-shadow(0 0 8px var(--yellow))}}
.stage__tag{
  position:absolute;top:8px;right:20px;z-index:3;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:5px 11px;border-radius:100px;
}
.stage__tag--yellow{background:var(--yellow);color:#0a0a0a}
.stage__pulse{
  position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  width:80px;height:80px;border-radius:50%;border:2px solid var(--yellow);
  opacity:0;animation:pulse 3s ease-out infinite;
}
@keyframes pulse{0%{transform:translateX(-50%) scale(.4);opacity:.7}100%{transform:translateX(-50%) scale(1.8);opacity:0}}
.stage__caption{position:absolute;bottom:0;text-align:center;color:var(--muted);font-size:.85rem}
.stage__caption span{color:var(--muted-2)}

.hero__chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:46px;position:relative;z-index:1}
.chip{
  font-size:.88rem;font-weight:600;padding:9px 15px;border-radius:100px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  cursor:default;transition:.25s var(--ease);
}
.chip.is-active{border-color:var(--yellow);color:var(--text);background:rgba(229,255,0,.07)}

/* ===== Possibilities band ===== */
.band{max-width:var(--maxw);margin:0 auto;padding:80px 22px}
.band__title{font-size:clamp(1.8rem,4vw,3rem);font-weight:900;text-align:center;margin-bottom:44px}
.band__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.poss{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;transition:.3s var(--ease);
}
.poss:hover{transform:translateY(-6px);border-color:#33333c}
.poss__icon{
  display:grid;place-items:center;width:54px;height:54px;border-radius:16px;font-size:1.6rem;
  background:color-mix(in srgb,var(--c) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 35%,transparent);margin-bottom:18px;
}
.poss h3{font-size:1.2rem;margin-bottom:10px}
.poss p{color:var(--muted);font-size:.95rem}

/* ===== Two products showcase ===== */
.duo{position:relative;max-width:var(--maxw);margin:0 auto;padding:64px 22px 40px}
.duo__glow{
  position:absolute;width:min(900px,90vw);aspect-ratio:1;border-radius:50%;filter:blur(150px);
  background:radial-gradient(circle,rgba(0,163,255,.16),rgba(168,85,247,.16) 55%,transparent 72%);
  top:-40px;left:50%;transform:translateX(-50%);pointer-events:none;
}
.duo__head{position:relative;display:block;text-align:center}
.duo__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* each card carries its own accent via --c */
.duo__card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0e0e11,#0a0a0c);
  border:1px solid var(--line);border-radius:26px;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.duo__card::before{ /* faint accent wash from the top */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 16%,transparent),transparent 42%);
  opacity:0;transition:opacity .35s var(--ease);
}
.duo__card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--c) 45%,var(--line));
  box-shadow:0 30px 70px -34px color-mix(in srgb,var(--c) 65%,transparent);
}
.duo__card:hover::before{opacity:1}

.duo__media{
  position:relative;height:200px;display:grid;place-items:center;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c) 13%,#101015),#0a0a0c 72%);
}
/* clicker visual: a press button with rippling rings */
.duo__btn{
  position:relative;width:78px;height:78px;border-radius:50%;border:0;cursor:pointer;z-index:2;
  background:radial-gradient(circle at 38% 30%,#3a3a44,#15151b);
  box-shadow:0 10px 0 #08080c,0 18px 26px rgba(0,0,0,.55),inset 0 0 0 2px color-mix(in srgb,var(--c) 60%,transparent);
  transition:transform .12s var(--ease),box-shadow .12s;
}
.duo__btn-top{position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle at 40% 32%,#23232b,#101015)}
.duo__btn:active{transform:translateY(6px);box-shadow:0 4px 0 #08080c,0 8px 14px rgba(0,0,0,.55),inset 0 0 0 2px color-mix(in srgb,var(--c) 60%,transparent)}
.duo__ring{
  position:absolute;width:78px;height:78px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--c) 70%,transparent);
  animation:duoRing 2.4s var(--ease) infinite;
}
.duo__ring--2{animation-delay:1.2s}
@keyframes duoRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.5);opacity:0}}
/* canvas visual: a little desk screen on a stand */
.duo__screen{
  position:relative;width:122px;height:90px;border-radius:13px;z-index:2;
  background:radial-gradient(circle at 50% 38%,#201a2c,#0c0c12);
  border:2px solid color-mix(in srgb,var(--c) 55%,#2a2a34);
  box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 24px color-mix(in srgb,var(--c) 30%,transparent);
  display:grid;place-items:center;
}
.duo__screen::before{content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);width:10px;height:14px;background:#15101e}
.duo__screen::after{content:"";position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);width:54px;height:10px;border-radius:0 0 7px 7px;background:#15101e;border:1px solid color-mix(in srgb,var(--c) 40%,#2a2a34);border-top:0}
.duo__screen-img{font-size:2.3rem;animation:duoPop 2.6s var(--ease) infinite}
@keyframes duoPop{0%,70%,100%{transform:scale(1)}82%{transform:scale(1.22)}}

.duo__body{padding:26px;display:flex;flex-direction:column;gap:11px;flex:1}
.duo__kicker{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--c)}
.duo__name{font-size:1.5rem;font-weight:900}
.duo__desc{color:var(--muted);font-size:.96rem;max-width:44ch}
.duo__points{list-style:none;display:flex;flex-direction:column;gap:8px;margin:2px 0 4px}
.duo__points li{font-size:.92rem;font-weight:600;display:flex;align-items:center;gap:9px}
.duo__cta{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5em;
  font-weight:800;font-size:.95rem;color:var(--ct,#0a0a0a);background:var(--c);
  padding:.72em 1.25em;border-radius:100px;
  transition:transform .25s var(--ease),box-shadow .25s;
}
.duo__cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px color-mix(in srgb,var(--c) 70%,transparent)}

/* ===== Section head ===== */
.section-head{
  max-width:var(--maxw);margin:0 auto;padding:0 0 28px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
}
.section-head__title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;margin-top:14px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;transition:.2s}
.link-arrow:hover{color:var(--yellow)}

/* ===== Catalog grid ===== */
.catalog{max-width:var(--maxw);margin:0 auto;padding:40px 22px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.35s var(--ease);
}
.card:hover{transform:translateY(-6px);border-color:#34343d;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.card__media{
  position:relative;aspect-ratio:6/5;
  background:radial-gradient(circle at 50% 35%,#1a1a1f,#0a0a0c 75%);
  display:grid;place-items:center;border-bottom:1px solid var(--line);
}
.card__media .art{width:78%;transition:transform .4s var(--ease)}
.card:hover .card__media .art{transform:scale(1.06) rotate(-2deg)}
.tag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  padding:5px 10px;border-radius:100px;
}
.tag--yellow{background:var(--yellow);color:#0a0a0a}
.tag--purple{background:var(--purple);color:#fff}
.tag--blue{background:var(--blue-2);color:#031018}
.tag--green{background:var(--green);color:#06160d}
.card__body{padding:20px}
.card__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.card__name{font-size:1.25rem;font-weight:800}
.card__price{font-size:1.1rem;font-weight:800;color:var(--text)}
.card__desc{color:var(--muted);font-size:.9rem;margin:8px 0 16px}
.tag--canvas{background:linear-gradient(100deg,var(--purple),#ec4899);color:#fff}
.btn--canvas:hover{background:var(--purple);color:#fff;border-color:var(--purple)}

/* featured full-width Canvas card */
.card--feature{grid-column:1/-1;border-color:color-mix(in srgb,var(--purple) 30%,var(--line))}
.card--feature .card__points{list-style:none;display:flex;flex-direction:column;gap:7px;margin:0 0 16px}
.card--feature .card__points li{font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:9px}
.card-canvas{
  display:grid;place-items:center;width:100%;height:100%;min-height:240px;
  background:radial-gradient(circle at 50% 40%,#1a1426,#0a0a0c 72%);
}
.card-canvas__screen{
  position:relative;width:158px;height:114px;border-radius:15px;
  background:radial-gradient(circle at 50% 38%,#201a2c,#0c0c12);
  border:2px solid color-mix(in srgb,var(--purple) 55%,#2a2a34);
  box-shadow:0 16px 36px rgba(0,0,0,.5),0 0 28px rgba(168,85,247,.3);
  display:grid;place-items:center;
}
.card-canvas__screen span{font-size:2.8rem;animation:duoPop 2.6s var(--ease) infinite}
.card-canvas__screen::before{content:"";position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);width:11px;height:16px;background:#15101e}
.card-canvas__screen::after{content:"";position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);width:64px;height:11px;border-radius:0 0 8px 8px;background:#15101e;border:1px solid color-mix(in srgb,var(--purple) 40%,#2a2a34);border-top:0}
/* horizontal layout for the feature card on wider screens */
@media (min-width:861px){
  .card--feature{display:grid;grid-template-columns:1.12fr 1fr}
  .card--feature .card__media{aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
  .card--feature .card__body{padding:34px;display:flex;flex-direction:column;justify-content:center;gap:4px}
}

/* ===== Configurator ===== */
.config{position:relative;max-width:var(--maxw);margin:0 auto;padding:80px 22px}
.config__glow{
  position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(130px);
  background:radial-gradient(circle,rgba(168,85,247,.3),transparent 70%);
  top:0;left:50%;transform:translateX(-50%);pointer-events:none;
}
.config__panel{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:linear-gradient(180deg,#0e0e11,#0a0a0c);
  border:1px solid var(--line);border-radius:28px;overflow:hidden;
}
.config__stage{
  position:relative;padding:40px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:24px;
  border-right:1px solid var(--line);
  background:radial-gradient(circle at 50% 40%,#161620,#0a0a0c 70%);
  perspective:900px;min-height:380px;
}
.hw{
  position:relative;width:280px;height:200px;
  transform:rotateX(52deg) rotateZ(-2deg);transform-style:preserve-3d;
}
.hw__plate{
  position:absolute;inset:0;border-radius:24px;
  background:linear-gradient(145deg,#26262e,#121217);
  box-shadow:0 30px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid #34343e;
}
.keycap{
  position:absolute;width:64px;height:64px;border:0;cursor:pointer;border-radius:14px;
  background:linear-gradient(180deg,#2a2a32,#1a1a20);
  box-shadow:0 8px 0 #0c0c10,0 14px 18px rgba(0,0,0,.5);
  transition:transform .12s var(--ease),box-shadow .12s,background .2s;
  display:grid;place-items:center;transform:translateZ(20px);
}
.keycap__top{font-size:1.7rem;transform:rotateX(-52deg)}
.keycap:hover{transform:translateZ(20px) translateY(-3px)}
.keycap:active,.keycap.is-pressed{transform:translateZ(0) translateY(6px);box-shadow:0 2px 0 #0c0c10,0 4px 8px rgba(0,0,0,.5)}
.keycap--yellow{left:34px;top:64px;box-shadow:0 8px 0 #0c0c10,0 14px 18px rgba(0,0,0,.5),inset 0 0 0 2px rgba(229,255,0,.5)}
.keycap--blue{left:108px;top:48px;box-shadow:0 8px 0 #0c0c10,0 14px 18px rgba(0,0,0,.5),inset 0 0 0 2px rgba(0,163,255,.5)}
.keycap--purple{left:108px;top:122px;box-shadow:0 8px 0 #0c0c10,0 14px 18px rgba(0,0,0,.5),inset 0 0 0 2px rgba(168,85,247,.5)}
.hw__knob{
  position:absolute;right:26px;top:70px;width:62px;height:62px;border-radius:50%;
  background:radial-gradient(circle at 40% 32%,#45454f,#15151a);
  box-shadow:0 10px 0 #0a0a0e,0 16px 20px rgba(0,0,0,.5);transform:translateZ(16px);
}
.hw__knob span{position:absolute;left:50%;top:8px;width:4px;height:16px;background:var(--purple);border-radius:2px;transform:translateX(-50%)}
.config__hint{color:var(--muted);font-size:.9rem}

/* right side: live bedroom demo */
.config__room{
  padding:22px;display:flex;flex-direction:column;gap:14px;
  background:radial-gradient(circle at 60% 30%,#121218,#0a0a0c 70%);
}
.room__head{display:flex;align-items:center;justify-content:space-between}
.room__title{font-weight:700;font-size:.95rem}
.room__status{
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);border:1px solid var(--line);
  padding:4px 10px;border-radius:100px;transition:color .3s var(--ease);
}
.room{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0c0c10}
.room__svg{display:block;width:100%;height:auto}

/* light */
.room__bulb{fill:#2a2a20;transition:fill .35s var(--ease)}
.room.is-lit .room__bulb{fill:#ffe169}
.room__glow,.room__cone{opacity:0;transition:opacity .4s var(--ease)}
.room.is-lit .room__glow,.room.is-lit .room__cone{opacity:1}

/* speaker */
.room__waves{opacity:0;transition:opacity .3s var(--ease)}
.room.is-playing .room__waves{opacity:1}
.room.is-playing .room__wave{animation:roomWave 1.1s var(--ease) infinite}
.room.is-playing .room__wave--2{animation-delay:.15s}
.room.is-playing .room__wave--3{animation-delay:.3s}
@keyframes roomWave{0%,100%{opacity:.25}50%{opacity:1}}

/* door lock */
.room__lock-body,.room__lock-shackle{transition:fill .3s var(--ease),stroke .3s var(--ease)}
.room__lock-body{fill:#5a5a66}
.room__lock-shackle{stroke:#5a5a66}
.room.is-locked .room__lock-body{fill:var(--green)}
.room.is-locked .room__lock-shackle{stroke:var(--green)}
.room__lock-shackle--closed{display:none}
.room.is-locked .room__lock-shackle--closed{display:block}
.room.is-locked .room__lock-shackle--open{display:none}

/* lit-up active keycaps */
.keycap.is-active .keycap__top{filter:drop-shadow(0 0 8px rgba(255,255,255,.55))}
.keycap--yellow.is-active{box-shadow:0 8px 0 #0c0c10,0 14px 18px rgba(0,0,0,.5),inset 0 0 0 2px var(--yellow),0 0 20px rgba(229,255,0,.45)}
.keycap--blue.is-active{box-shadow:0 8px 0 #0c0c10,0 14px 18px rgba(0,0,0,.5),inset 0 0 0 2px var(--blue-2),0 0 20px rgba(0,163,255,.45)}
.keycap--purple.is-active{box-shadow:0 8px 0 #0c0c10,0 14px 18px rgba(0,0,0,.5),inset 0 0 0 2px var(--purple),0 0 20px rgba(168,85,247,.45)}

/* ===== Letter box live demo ===== */
.letterbox{position:relative;max-width:var(--maxw);margin:0 auto;padding:80px 22px}
.letterbox .section-head{display:block;text-align:center}
.section-head__sub{color:var(--muted);max-width:54ch;margin:12px auto 0}
.lb__glow{
  position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(140px);
  background:radial-gradient(circle,rgba(0,163,255,.22),rgba(168,85,247,.18) 50%,transparent 72%);
  top:20px;left:50%;transform:translateX(-50%);pointer-events:none;
}
.lb__sides{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lb__side{
  display:flex;flex-direction:column;gap:14px;padding:22px;
  background:linear-gradient(180deg,#0e0e11,#0a0a0c);
  border:1px solid var(--line);border-radius:24px;
}
.lb__tag{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem}
.lb__dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--blue-2));box-shadow:0 0 10px var(--c,var(--blue-2))}

/* room + desk */
.lb__room{
  position:relative;height:240px;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 22%,#1a1a24,#0b0b0f 72%);
}
.lb__desk{
  position:absolute;left:0;right:0;bottom:0;height:56px;
  background:linear-gradient(180deg,#241d18,#171210);border-top:2px solid #34281f;
}
/* device */
.lb__device{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:172px;z-index:2}
.lb__screen{
  position:relative;height:118px;border-radius:14px;overflow:hidden;
  background:#06060a;border:1px solid #23232c;
  display:grid;place-items:center;
  box-shadow:0 14px 26px rgba(0,0,0,.5),inset 0 0 0 4px #0d0d12;
  transition:box-shadow .35s var(--ease);
}
.lb__slot{
  height:12px;margin:0 22px;border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#1c1c24,#101016);border:1px solid #23232c;border-top:0;
}
.lb__screen.has-letter{box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 26px rgba(0,163,255,.4),inset 0 0 0 4px #0d0d12}
.lb__idle{color:var(--muted-2);font-size:.82rem;transition:opacity .25s var(--ease)}
.lb__screen.has-letter .lb__idle{opacity:0}
.lb__screen-img{
  position:absolute;font-size:3rem;line-height:1;opacity:0;transform:scale(.4);
}
.lb__screen.has-letter .lb__screen-img{animation:lbPop .5s var(--ease) forwards}
@keyframes lbPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
.lb__notif{
  position:absolute;top:8px;left:50%;transform:translateX(-50%) translateY(-8px);
  font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:#06060a;background:var(--blue-2);padding:3px 9px;border-radius:100px;
  opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);white-space:nowrap;
}
.lb__screen.has-letter .lb__notif{opacity:1;transform:translateX(-50%) translateY(0)}

/* send tray */
.lb__send-hint{color:var(--muted);font-size:.85rem;text-align:center}
.lb__tray{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.lb__img{
  width:50px;height:50px;display:grid;place-items:center;cursor:pointer;
  font-size:1.5rem;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),border-color .2s;
}
.lb__img:hover{transform:translateY(-3px);border-color:#3a3a46}
.lb__img:active,.lb__img.is-pressed{transform:translateY(2px) scale(.94)}

/* flying letter */
.lb__fly{
  position:absolute;font-size:1.9rem;z-index:6;pointer-events:none;
  transform:translate(-50%,-50%);
  transition:transform .72s cubic-bezier(.45,0,.25,1),opacity .72s ease-in;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));
}

/* ===== Support ===== */
.support{
  max-width:980px;margin:60px auto;padding:64px 30px;text-align:center;
  background:radial-gradient(circle at 50% 0%,#16161c,#0a0a0c 75%);
  border:1px solid var(--line);border-radius:28px;
}
.support h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;margin-bottom:14px}
.support p{color:var(--muted);max-width:46ch;margin:0 auto 28px}
.support__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ===== Footer ===== */
.footer{max-width:var(--maxw);margin:0 auto;padding:60px 22px 30px;border-top:1px solid var(--line)}
.footer__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px}
.footer__cols{display:flex;gap:60px;flex-wrap:wrap}
.footer__cols h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:14px;font-weight:700}
.footer__cols a{display:block;color:var(--text);font-weight:500;padding:5px 0;font-size:.95rem;transition:color .2s}
.footer__cols a:hover{color:var(--yellow)}
.footer__bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.85rem;padding-top:24px;border-top:1px solid var(--line)}

/* ===== Floating dock with ticker ===== */
.dock{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:90;
  width:min(960px,calc(100% - 28px));
  display:flex;align-items:center;gap:18px;padding:10px 12px 10px 18px;
  background:rgba(12,12,15,.82);backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--line);border-radius:100px;
  box-shadow:0 20px 50px -10px rgba(0,0,0,.7);
}
.dock__lead{display:flex;align-items:center;gap:10px;flex:none}
.dock__lead strong{font-size:.92rem;white-space:nowrap}
.dock__pulse{width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 0 rgba(229,255,0,.6);animation:dockpulse 2s infinite}
@keyframes dockpulse{0%{box-shadow:0 0 0 0 rgba(229,255,0,.55)}70%{box-shadow:0 0 0 10px rgba(229,255,0,0)}100%{box-shadow:0 0 0 0 rgba(229,255,0,0)}}
.ticker{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker__track{display:flex;align-items:center;gap:18px;width:max-content;animation:ticker 22s linear infinite}
.ticker__track span{color:var(--muted);font-weight:600;font-size:.9rem;white-space:nowrap}
.ticker__track .dot{color:var(--purple);font-size:.5rem}
.dock:hover .ticker__track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.dock__btn{flex:none}

/* ===== Reveal on scroll ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ===== Responsive ===== */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:10px}
  .hero__stage{min-height:340px;order:-1}
  .band__grid,.grid{grid-template-columns:1fr 1fr}
  .duo__grid{grid-template-columns:1fr}
  .config__panel{grid-template-columns:1fr}
  .config__stage{border-right:0;border-bottom:1px solid var(--line)}
  .lb__sides{grid-template-columns:1fr}
  .nav__links{display:none}
  .nav__links.is-open{
    display:flex;flex-direction:column;position:absolute;top:64px;left:14px;right:14px;
    background:rgba(10,10,13,.96);backdrop-filter:blur(20px);border:1px solid var(--line);
    border-radius:18px;padding:10px;margin:0;
  }
  .nav__toggle{display:flex}
  .dock__lead strong{display:none}
}
@media (max-width:560px){
  .band__grid,.grid{grid-template-columns:1fr}
  .hero{padding-top:120px}
  .footer__top{flex-direction:column;gap:24px}
  .ticker{display:none}
  .dock{width:calc(100% - 24px);justify-content:space-between}
  .dock__lead strong{display:inline}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}