:root { --bg:#0b0b0c; --fg:#f2f1ee; --muted:#8f8c87; --faint:rgba(255,255,255,.08); --card:#141415; --line:rgba(255,255,255,.09);
  --glass:rgba(18,18,20,.55); --ease:cubic-bezier(.2,.7,.2,1); color-scheme: dark; }
@media (prefers-color-scheme: light) { :root { --bg:#fbfaf8; --fg:#141414; --muted:#6d6a66; --faint:rgba(0,0,0,.08); --card:#fff; --line:rgba(0,0,0,.09); } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:"Inter var",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-feature-settings:"cv11","ss01"; -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.55; letter-spacing:-.011em; }
a { color:inherit; }
.wrap { width:min(1120px, calc(100vw - 48px)); margin:0 auto; }
.eyebrow { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 18px; }
h1 { font-weight:500; font-size:clamp(44px, 7.4vw, 92px); line-height:1; letter-spacing:-.045em; margin:0; }
h2 { font-weight:500; font-size:clamp(28px, 3.6vw, 44px); line-height:1.08; letter-spacing:-.035em; margin:0 0 14px; }
h3 { font-weight:500; font-size:17px; letter-spacing:-.015em; margin:18px 0 6px; }
p.lede { font-size:clamp(18px, 2vw, 22px); color:var(--muted); margin:22px 0 34px; max-width:40ch; text-wrap:balance; line-height:1.4; }
p { color:var(--muted); margin:0; }
.cta { display:inline-flex; gap:10px; align-items:center; padding:13px 22px; border-radius:999px; background:var(--fg); color:var(--bg);
  text-decoration:none; font-size:15px; font-weight:500; transition:transform .4s var(--ease), opacity .3s; }
.cta:hover { transform:translateY(-1px); opacity:.9; } .cta span { transition:transform .4s var(--ease); } .cta:hover span { transform:translateX(3px); }
.cta.ghost { background:transparent; color:var(--fg); box-shadow:inset 0 0 0 1px var(--line); }
section { padding:120px 0; }
.hero .wrap { padding-bottom:72px; }
.hero { padding:150px 0 0; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
.band { margin-top:auto; flex:none; height:clamp(220px, 34vw, 380px); overflow:hidden; position:relative; }
.band .reel { position:absolute; inset:0 auto 0 0; display:flex; height:100%; width:max-content; animation:drift 260s linear infinite; will-change:transform; }
.band img { height:100%; width:auto; display:block; max-width:none; }
.band .live { position:absolute; left:28px; bottom:20px; z-index:2; color:#fff; font-size:12px; display:flex; gap:8px; align-items:center; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.dot { width:6px; height:6px; border-radius:50%; background:#6ee7a8; box-shadow:0 0 10px #6ee7a8; animation:pulse 2.4s ease-in-out infinite; }
.band .cap { position:absolute; right:28px; bottom:20px; z-index:2; color:rgba(255,255,255,.88); font-size:12px; text-shadow:0 1px 8px rgba(0,0,0,.6); }
@keyframes drift { to { transform:translateX(-50%); } }
@keyframes pulse { 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) { .band .reel { animation-duration:2400s; } .reveal { transition:none !important; } }
.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:52px; }
.step .n { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.shot { position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; background:#111; }
.shot img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform 1.6s var(--ease); }
.shot:hover img { transform:scale(1.06); }
.ui-over { position:absolute; inset:auto 14px 14px 14px; color:#fff; font-size:12.5px; }
.glass { background:rgba(18,18,20,.5); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.12); border-radius:12px; }
.composer { display:flex; align-items:center; gap:10px; padding:11px 12px 11px 15px; }
.composer .ph { flex:1; color:rgba(255,255,255,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.composer .caret { display:inline-block; width:1px; height:14px; background:#fff; vertical-align:-2px; margin-left:1px; animation:pulse 1s steps(1) infinite; }
.composer .send { width:26px; height:26px; border-radius:50%; background:#fff; color:#000; display:grid; place-items:center; font-size:13px; }
.queue { padding:10px 12px; display:grid; gap:6px; }
.queue .row { display:flex; justify-content:space-between; gap:10px; } .queue .row b { font-weight:500; } .queue .row i { font-style:normal; opacity:.6; }
.toast { padding:11px 13px; display:flex; gap:12px; align-items:center; justify-content:space-between; }
.toast .copy { padding:5px 11px; border-radius:999px; background:#fff; color:#000; font-weight:500; font-size:12px; }
.caption { position:absolute; left:14px; top:14px; color:#fff; font-size:12.5px; text-shadow:0 1px 10px rgba(0,0,0,.6); }
.caption small { display:block; opacity:.7; font-size:11.5px; }
.feats { display:grid; grid-template-columns:repeat(6, 1fr); gap:28px; margin-top:52px; }
.feat { grid-column:span 2; } .feat.wide { grid-column:span 3; }
.feat .shot { aspect-ratio:16/11; }
.thumbchip { position:absolute; left:28px; bottom:28px; display:flex; gap:8px; align-items:center; padding:6px 10px 6px 6px; }
.thumbchip img { width:30px; height:30px; border-radius:6px; object-fit:cover; transform:none; }
.alive { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:start; }
.stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:30px 0 18px; }
.stat { background:var(--bg); padding:18px; } .stat b { display:block; font-size:26px; font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stat span { font-size:12.5px; color:var(--muted); }
.small { font-size:12.5px; color:var(--muted); }
.reveal { opacity:0; transform:translateY(14px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (max-width: 860px) {
  .wrap { width:calc(100vw - 40px); }

  section { padding:84px 0; } .hero { padding:118px 0 0; }
  .steps, .alive,   .feats { grid-template-columns:1fr; gap:40px; } .feat, .feat.wide { grid-column:auto; }
  .hero .wrap { padding-bottom:52px; } .band .cap { display:none; } .band .live { left:20px; }
  .stats { grid-template-columns:1fr 1fr 1fr; } .stat { padding:14px 12px; } .stat b { font-size:20px; }

}

.ui-over.top { inset:14px 14px auto 14px; }
.caption.bottom { top:auto; bottom:14px; }
.bar { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-radius:999px; font-size:12px; }
.bar .dot { display:inline-block; margin-right:7px; vertical-align:1px; }
.bar .icons { display:flex; gap:12px; } .bar svg { width:15px; height:15px; }
.tabs { display:flex; gap:12px; font-size:11.5px; opacity:.85; margin-bottom:4px; } .tabs span { opacity:.55; } .tabs b { font-weight:500; }
.sort { display:flex; gap:6px; font-size:11px; } .sort b, .sort span { padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.18); font-weight:400; } .sort b { background:#fff; color:#000; }
.drawer { position:absolute; top:12px; right:12px; bottom:12px; width:46%; padding:12px; color:#fff; font-size:12px; border-radius:12px; }
.drawer p { color:rgba(255,255,255,.88); margin:8px 0 0; } .drawer p i { font-style:normal; opacity:.55; margin-right:6px; }
.story { padding:10px 12px; } .small-l { font-size:11.5px; opacity:.85; }
.pips { display:flex; gap:5px; margin-top:8px; } .pips i { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.25); } .pips i.on { background:#fff; }
.cal { padding:10px 12px; width:max-content; } .cal .m { font-size:11.5px; opacity:.85; margin-bottom:6px; }
.cal .g { display:grid; grid-template-columns:repeat(7, 18px); gap:3px; font-size:10px; text-align:center; } .cal .g i { font-style:normal; opacity:.75; line-height:18px; }
.cal .g i.on { background:#fff; color:#000; border-radius:50%; opacity:1; }
.share { display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:center; } .share .shot { aspect-ratio:16/10; }
@media (max-width: 860px) { .share { grid-template-columns:1fr; gap:28px; } .drawer { width:56%; } }


/* Tapestry lights: soft colour glow spilling above the band, a few twinkling motes, a slow sheen. Opacity/transform only. */
.band { overflow:hidden; overflow:clip visible; }
.band .glow { position:absolute; left:0; right:0; bottom:100%; height:140px; pointer-events:none; overflow:hidden; opacity:.5;
  -webkit-mask-image:linear-gradient(to top, #000, transparent); mask-image:linear-gradient(to top, #000, transparent); }
.band .glow i { position:absolute; bottom:-90px; width:46vw; height:180px; border-radius:50%; will-change:transform;
  background:radial-gradient(closest-side, rgba(255,176,82,.55), transparent); animation:ab-drift 38s ease-in-out infinite alternate; }
.band .glow i:nth-child(1) { left:-6vw; } .band .glow i:nth-child(2) { left:28vw; background:radial-gradient(closest-side, rgba(70,110,255,.45), transparent); animation-duration:47s; animation-delay:-12s; }
.band .glow i:nth-child(3) { left:60vw; animation-duration:42s; animation-delay:-25s; }
.band .lights { position:absolute; inset:0; overflow:hidden; pointer-events:none; mix-blend-mode:screen; }
.band .lights i { position:absolute; width:110px; height:110px; margin:-55px; border-radius:50%; opacity:0; will-change:opacity, transform;
  background:radial-gradient(closest-side, rgba(255,214,150,.55), rgba(255,170,80,.12) 45%, transparent); animation:twinkle 9s ease-in-out infinite; }
.band .lights i:nth-child(1) { left:8%; top:30%; } .band .lights i:nth-child(2) { left:21%; top:68%; animation-delay:-2s; animation-duration:11s; }
.band .lights i:nth-child(3) { left:36%; top:22%; animation-delay:-5s; } .band .lights i:nth-child(4) { left:49%; top:58%; animation-delay:-7s; animation-duration:12s; }
.band .lights i:nth-child(5) { left:62%; top:35%; animation-delay:-3s; animation-duration:10s; } .band .lights i:nth-child(6) { left:74%; top:72%; animation-delay:-8s; }
.band .lights i:nth-child(7) { left:86%; top:26%; animation-delay:-1s; animation-duration:13s; } .band .lights i:nth-child(8) { left:94%; top:60%; animation-delay:-6s; }
.band .sheen { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.band .sheen::before { content:""; position:absolute; top:0; bottom:0; left:0; width:30%; will-change:transform;
  background:linear-gradient(100deg, transparent, rgba(255,240,215,.07) 45%, rgba(255,240,215,.1) 50%, transparent); animation:sheen 14s ease-in-out infinite; transform:translateX(-120%); }
@keyframes twinkle { 0%,100% { opacity:0; transform:scale(.7); } 50% { opacity:.85; transform:scale(1); } }
@keyframes sheen { 0%,55% { transform:translateX(-120%); } 100% { transform:translateX(420%); } }
@keyframes ab-drift { from { transform:translate3d(-4vw,0,0) scale(1); } to { transform:translate3d(5vw,8%,0) scale(1.12); } }
@media (prefers-color-scheme: light) { .band .glow { opacity:.38; } }
@media (prefers-reduced-motion: reduce) { .band .glow i, .band .lights i, .band .sheen::before { animation:none; } .band .lights i { opacity:.35; } }
@media (max-width: 860px) { .band { height:clamp(300px, 52svh, 520px); } .band .glow { height:90px; } }