/* ============ NOIR (Dark-Luxe) Tokens ============ */
:root{ /* light, if ever used */
  --bg:#0b1220; --card:#0f172a; --border:rgba(148,163,184,.14);
  --ink:#e5e7eb; --muted:#94a3b8;
  --brand:#60a5fa; --brand-2:#22d3ee; --brand-3:#a78bfa;
  --ring:rgba(96,165,250,.40);
}
:root:not(.dark){
  --bg:#f7f9ff; --card:#ffffff; --border:rgba(2,8,23,.08);
  --ink:#0f172a; --muted:#667085;
}

/* ============ Base ============ */
*{box-sizing:border-box} a{text-decoration:none;color:inherit} img{display:block;max-width:100%}
body{
  background:
    radial-gradient(900px 540px at 105% -20%, color-mix(in oklab,var(--brand) 18%, transparent), transparent 64%),
    radial-gradient(780px 420px at -10% -20%, color-mix(in oklab,var(--brand-3) 16%, transparent), transparent 64%),
    var(--bg);
  color:var(--ink);
}

/* Glass header */
.glass{background:rgba(15,23,42,.55);backdrop-filter:blur(12px);border:1px solid rgba(148,163,184,.18);
  border-radius:16px;box-shadow:0 18px 60px rgba(2,8,23,.55)}
#siteHeader.scrolled #siteNav{margin-block:.25rem;padding-block:.44rem;box-shadow:0 24px 70px rgba(2,8,23,.7)}
.nav-link{position:relative;padding:8px 10px;font-weight:600;color:var(--muted)}
.nav-link:hover{color:#fff}
.nav-link::after{content:"";position:absolute;left:14%;right:14%;bottom:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));transform:scaleX(0);transform-origin:left;transition:.22s}
.nav-link:hover::after{transform:scaleX(1)}
.logo{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#001;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));font-weight:900}

/* Cards / Buttons */
.card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.35)}
.card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 50px rgba(0,0,0,.45)}

.btn{position:relative;display:inline-flex;align-items:center;gap:.55rem;font-weight:800;border-radius:14px;
  padding:.75rem 1.05rem;border:1px solid transparent;transition:.22s}
.btn:hover{transform:translateY(-1px)} .btn:focus{outline:0;box-shadow:0 0 0 4px var(--ring)}
.btn-primary{color:#04161e;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-125%);transition:.65s}
.btn-primary:hover::after{transform:translateX(125%)}
.btn-light{background:rgba(255,255,255,.06);border:1px solid var(--border);color:#fff}

.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.73rem;background:rgba(34,211,238,.18);
  color:#c8f7ff;border:1px solid rgba(34,211,238,.28);border-radius:999px;padding:.35rem .6rem}

/* HERO */
.hero{position:relative;overflow:hidden;border-radius:28px;isolation:isolate}
.hero .aurora{position:absolute;inset:-15%;z-index:-1;
  background:
    radial-gradient(780px 360px at 90% -10%, color-mix(in oklab,var(--brand) 32%, transparent), transparent 70%),
    radial-gradient(620px 280px at 10% -20%, color-mix(in oklab,var(--brand-3) 28%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab,var(--brand-2) 14%, transparent), transparent 60%);
  animation:float 16s ease-in-out infinite alternate;}
@keyframes float{from{transform:translateY(-10px)}to{transform:translateY(10px)}}
.title-gradient{background:linear-gradient(95deg,var(--brand-2),var(--brand),var(--brand-3));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Poster (right) */
.poster{position:relative;border-radius:22px;overflow:hidden}
.poster::before{content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:linear-gradient(120deg,color-mix(in oklab,var(--brand) 60%,transparent),color-mix(in oklab,var(--brand-2) 60%,transparent),color-mix(in oklab,var(--brand-3) 60%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.float-badge{position:absolute;background:rgba(15,23,42,.7);backdrop-filter:blur(8px);
  border:1px solid var(--border);border-radius:12px;padding:6px 10px;box-shadow:0 10px 20px rgba(0,0,0,.45);
  font-weight:800;font-size:12px;color:#e2f5ff}
.b1{left:12px;top:12px} .b2{right:12px;bottom:12px}

/* Pills & stats */
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:999px;border:1px solid var(--border);
  background:rgba(255,255,255,.04);font-size:.74rem;color:#cbd5e1}
.stat{border:1px solid var(--border);border-radius:14px;padding:12px;background:rgba(255,255,255,.04);display:grid;gap:2px}
.stat .v{font-size:28px;font-weight:900;color:#fff} .stat .t{font-size:12px;color:var(--muted)}

/* Belts / Rail / Carousel */
.belt{display:flex;gap:10px;overflow:auto;scroll-snap-type:x mandatory} .belt::-webkit-scrollbar{display:none}
.belt-item{scroll-snap-align:center;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:999px;padding:8px 12px;white-space:nowrap;color:#cbd5e1}
.belt-ico{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:rgba(34,211,238,.22);color:#9df6ff;font-weight:900}

.rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rail::before{content:"";position:absolute;left:6px;right:6px;top:18px;height:2px;background:linear-gradient(90deg,var(--brand),transparent);opacity:.35}
.step .k{font-size:11px;color:var(--muted)}

.carousel-track{display:flex;gap:14px;overflow:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory}
.carousel-card{min-width:320px;flex:0 0 auto;scroll-snap-align:center}
.carousel-track::-webkit-scrollbar{display:none}
.ava{width:36px;height:36px;border-radius:999px;position:relative;overflow:hidden}
.ava::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:conic-gradient(var(--brand),var(--brand-2),var(--brand-3),var(--brand));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px}

/* Utilities */
.reveal{opacity:0;transform:translateY(14px);transition:.45s ease} .reveal.show{opacity:1;transform:none}
.tilt{transform-style:preserve-3d;transition:transform .25s} .tilt:hover{transform:rotateX(5deg) rotateY(-5deg)}
.dragx{cursor:grab} .dragx:active{cursor:grabbing}

#toastRoot{position:fixed;right:16px;top:16px;z-index:60;display:flex;flex-direction:column;gap:10px}
.toast{background:rgba(15,23,42,.85);border:1px solid var(--border);padding:10px 14px;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.5);min-width:240px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.toast .t{font-weight:800;color:#e6f2ff}.toast .x{cursor:pointer;opacity:.85;color:#e6f2ff}

@media (max-width:480px){ .carousel-card{min-width:85%} }