/* ============================================================
   NexSlot design system — "light futuristic" (Lumora-derived)
   Near-white surfaces, ink cards, ONE dynamic accent (--ac).
   Every accent tint is color-mix() so ANY chosen scheme gels.
   All sizes rem: the adaptive grid below scales the whole page.
   Load AFTER page theme CSS; pair with assets/js/ds-motion.js.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap');

/* ── Adaptive rem grid (design bases 1920/1440/1024/360) ── */
@media (max-width:1920px){ html{ font-size:0.833333vw } }
@media (max-width:1440px){ html{ font-size:1.111111vw } }
@media (max-width:1024px){ html{ font-size:1.5625vw } }
@media (max-width:640px){  html{ font-size:4.444444vw } }

/* ── Tokens ── */
:root{
  --ac: var(--pink, var(--ns-primary, #5B5BD6));   /* dynamic accent (never hardcode tints) */
  --ds-bg:#ffffff; --ds-surface:#f1f0ee; --ds-surface-2:#e3e2df;
  --ds-ink:#0a0a0a; --ds-text:#111111; --ds-muted:#8d8d8d; --ds-subtle:#b6b6b6;
  --ds-line:#e6e5e2;
  --ds-r-pill:9999px; --ds-r-card:2rem; --ds-r-card-sm:1.25rem; --ds-r-ctl:.875rem;
  --ds-font:'Onest','Inter',system-ui,sans-serif;
  --ds-ease-out:cubic-bezier(.215,.61,.355,1);
  --ds-ease-spring:cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"]{
  --ds-bg:#101014; --ds-surface:#1a1a20; --ds-surface-2:#24242c;
  --ds-ink:#f4f4f5; --ds-text:#f4f4f5; --ds-muted:#9b9ba3; --ds-subtle:#6b6b74;
  --ds-line:#2a2a33;
}

.ds{ font-family:var(--ds-font); background:var(--ds-bg); color:var(--ds-text);
     -webkit-font-smoothing:antialiased; }
.ds a{ color:inherit; text-decoration:none }
.ds :focus-visible{ outline:2px solid var(--ac); outline-offset:2px; border-radius:.25rem }

/* ── Shell / layout ── */
.ds-shell{ max-width:88rem; margin-inline:auto; padding-inline:1.25rem }
@media (min-width:640px){ .ds-shell{ padding-inline:2rem } }

/* ── Type ── */
.ds-display{ font-weight:700; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(2.25rem, 2rem + 2vw, 3.75rem) }
.ds-h2{ font-weight:700; letter-spacing:-.02em; line-height:1.08;
  font-size:clamp(1.75rem, 1.5rem + 1.2vw, 3rem) }
.ds-h3{ font-weight:600; letter-spacing:-.01em; font-size:1.5rem; line-height:1.2 }
.ds-lead{ font-size:1.05rem; line-height:1.6; color:var(--ds-muted) }
.ds-small{ font-size:.875rem } .ds-xs{ font-size:.75rem }
.ds-upper{ text-transform:uppercase; letter-spacing:.05em; font-weight:600; font-size:.75rem }

/* ── Eyebrow (accent dot + label) ── */
.ds-eyebrow{ display:inline-flex; align-items:center; gap:.5rem;
  font-size:.875rem; font-weight:600; color:color-mix(in srgb, var(--ds-text) 70%, transparent) }
.ds-eyebrow::before{ content:""; width:.375rem; height:.375rem; border-radius:var(--ds-r-pill);
  background:var(--ac) }
.ds-eyebrow.boxed{ border:1px solid var(--ds-line); border-radius:var(--ds-r-pill);
  padding:.375rem 1rem; background:var(--ds-bg) }
.ds-eyebrow.light{ color:rgba(255,255,255,.75) }

/* ── Pill buttons ── */
.ds-btn{ display:inline-flex; align-items:center; gap:.75rem; border-radius:var(--ds-r-pill);
  font-family:var(--ds-font); font-size:.9rem; font-weight:600; line-height:1; cursor:pointer;
  border:1px solid transparent; padding:.875rem 1.75rem; white-space:nowrap;
  transition:transform .25s var(--ds-ease-spring), box-shadow .25s, background .2s, color .2s,
             border-color .2s; text-decoration:none; min-height:2.75rem }
.ds-btn.dark{ background:var(--ds-ink); color:var(--ds-bg) }
.ds-btn.light{ background:var(--ds-surface); color:var(--ds-text) }
.ds-btn.accent{ background:var(--ac); color:#fff;
  box-shadow:0 .5rem 1.25rem color-mix(in srgb, var(--ac) 30%, transparent) }
.ds-btn.outline{ background:transparent; color:var(--ds-text); border-color:var(--ds-line) }
.ds-btn.on-ink{ background:#fff; color:#0a0a0a }
.ds-btn.has-arrow{ padding:.375rem .375rem .375rem 1.5rem }
.ds-btn .arrow{ width:2.25rem; height:2.25rem; display:grid; place-items:center;
  border-radius:var(--ds-r-pill); font-size:1rem; transition:transform .25s var(--ds-ease-spring) }
.ds-btn.dark .arrow, .ds-btn.on-ink .arrow{ background:var(--ds-bg); color:var(--ds-ink) }
.ds-btn.dark .arrow{ background:#fff; color:#0a0a0a }
.ds-btn.light .arrow, .ds-btn.outline .arrow{ background:var(--ds-ink); color:var(--ds-bg) }
.ds-btn.accent .arrow{ background:#fff; color:var(--ac) }
@media (hover:hover){
  .ds-btn:hover{ transform:translateY(-.125rem) scale(1.03) }
  .ds-btn:hover .arrow{ transform:translate(.1875rem,-.1875rem) }
  .ds-btn.accent:hover{ box-shadow:0 .75rem 1.75rem color-mix(in srgb, var(--ac) 40%, transparent) }
}

/* ── Cards ── */
.ds-card{ background:var(--ds-bg); border:1px solid var(--ds-line);
  border-radius:var(--ds-r-card); padding:1.5rem;
  box-shadow:0 1px 2px rgba(17,24,39,.04) }
.ds-card.ink{ background:#0a0a0a; color:#fff; border-color:rgba(255,255,255,.06) }
.ds-card.soft{ background:var(--ds-surface); border-color:transparent }
.ds-card-hover{ transition:transform .3s var(--ds-ease-spring), box-shadow .3s }
@media (hover:hover){
  .ds-card-hover:hover{ transform:translateY(-.5rem) scale(1.012);
    box-shadow:0 1.5rem 3rem rgba(17,24,39,.12) }
}

/* round arrow badge used on cards / rows */
.ds-badge{ width:2.75rem; height:2.75rem; display:grid; place-items:center; flex-shrink:0;
  border-radius:var(--ds-r-pill); background:color-mix(in srgb, var(--ds-ink) 6%, transparent);
  color:var(--ds-text); transition:transform .3s var(--ds-ease-spring), background .2s }
.ds-card.ink .ds-badge{ background:rgba(255,255,255,.1); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15) }
@media (hover:hover){
  .ds-card-hover:hover .ds-badge{ transform:rotate(45deg) scale(1.08) }
}

/* ── Chips / tags ── */
.ds-chip{ display:inline-flex; align-items:center; gap:.375rem; border:1px solid var(--ds-line);
  color:var(--ds-text); border-radius:var(--ds-r-pill); padding:.5rem 1rem; font-size:.875rem;
  background:var(--ds-bg); font-weight:500 }
.ds-chip.on-ink{ border-color:rgba(255,255,255,.25); color:#fff; background:transparent }
.ds-chip.accent{ border-color:transparent;
  background:color-mix(in srgb, var(--ac) 12%, var(--ds-bg)); color:var(--ac); font-weight:600 }
.ds-chip.active{ background:var(--ds-ink); color:var(--ds-bg); border-color:var(--ds-ink) }

/* ── Hairline list rows (hover fill) ── */
.ds-rows{ list-style:none; margin:0; padding:0 }
.ds-row{ display:flex; align-items:center; gap:1rem; border-top:1px solid var(--ds-line);
  padding:1.5rem 1.5rem; border-radius:var(--ds-r-card-sm);
  transition:background .35s var(--ds-ease-spring), padding .35s var(--ds-ease-spring) }
.ds-rows > :first-child .ds-row{ border-top:none }
@media (hover:hover){
  .ds-row:hover{ background:var(--ds-surface); padding-left:2rem; padding-right:1.25rem }
  .ds-row:hover .ds-badge{ transform:translateX(.3125rem) }
}
.ds-row .idx{ width:2.5rem; font-size:.875rem; font-weight:500; color:var(--ds-subtle) }

/* ── Inputs ── */
.ds-input, .ds-select, .ds-textarea{ width:100%; border:1px solid var(--ds-line);
  background:color-mix(in srgb, var(--ds-surface) 50%, var(--ds-bg));
  border-radius:var(--ds-r-ctl); padding:.75rem 1rem; font:inherit; font-size:.9rem;
  color:var(--ds-text); outline:none; transition:border-color .2s, background .2s }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus{
  border-color:color-mix(in srgb, var(--ac) 60%, var(--ds-line)); background:var(--ds-bg) }
.ds-label{ display:block; font-size:.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.025em; color:var(--ds-muted); margin-bottom:.375rem }

/* ── Watermark display text ── */
.ds-watermark{ pointer-events:none; user-select:none; font-weight:800; line-height:1;
  font-size:clamp(4rem, 13vw, 13rem); letter-spacing:-.02em; text-align:center;
  color:color-mix(in srgb, var(--ds-ink) 5%, transparent); white-space:nowrap }
.ds-watermark.on-ink{ color:rgba(255,255,255,.05) }

/* ── Stats ── */
.ds-stat .n{ font-weight:700; letter-spacing:-.02em; line-height:1;
  font-size:clamp(2.5rem, 2rem + 2vw, 4.5rem) }
.ds-stat .n .suffix{ color:var(--ac) }
.ds-stat .l{ margin-top:.75rem; font-size:.875rem; color:var(--ds-muted) }
.ds-card.ink .ds-stat .l{ color:rgba(255,255,255,.55) }

/* ── Hero aurora (soft animated accent gradient — the light-futuristic signature) ── */
.ds-aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none }
.ds-aurora::before, .ds-aurora::after{ content:""; position:absolute; width:60rem; height:60rem;
  border-radius:50%; filter:blur(90px); opacity:.5;
  background:radial-gradient(circle at center,
    color-mix(in srgb, var(--ac) 28%, transparent), transparent 65%) }
.ds-aurora::before{ top:-30rem; left:-15rem; animation:dsAuroraA 18s ease-in-out infinite alternate }
.ds-aurora::after{ bottom:-32rem; right:-18rem; opacity:.35;
  animation:dsAuroraB 22s ease-in-out infinite alternate }
@keyframes dsAuroraA{ from{ transform:translate(0,0) scale(1) } to{ transform:translate(8rem,4rem) scale(1.15) } }
@keyframes dsAuroraB{ from{ transform:translate(0,0) scale(1.1) } to{ transform:translate(-7rem,-5rem) scale(.95) } }

/* ── Header (blurred overlay bar) ── */
.ds-topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:1.5rem; padding:1rem 1.25rem;
  background:color-mix(in srgb, var(--ds-bg) 82%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--ds-line) 80%, transparent) }
@media (min-width:640px){ .ds-topbar{ padding:1.25rem 2rem } }
.ds-brand{ display:inline-flex; align-items:center; gap:.5rem; font-size:1.125rem;
  font-weight:700; letter-spacing:-.01em }
.ds-brand i{ color:var(--ac); font-size:1.35rem }

/* ── Intro loader (discover only, once per session) ── */
.ds-loader{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2rem; background:#0a0a0a; color:#fff;
  border-radius:0 0 var(--ds-r-card) var(--ds-r-card);
  transition:transform .7s var(--ds-ease-spring) }
.ds-loader.done{ transform:translateY(-100%) }
.ds-loader .center{ display:flex; flex-direction:column; align-items:center; gap:1.25rem;
  text-align:center; transition:opacity .4s, transform .4s }
.ds-loader.done .center{ opacity:0; transform:translateY(-12px) }
.ds-loader .brandline{ display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.5rem }
.ds-loader .brandline i{ color:var(--ac); font-size:1.875rem }
.ds-loader .tag{ max-width:24ch; font-size:.875rem; color:rgba(255,255,255,.55) }
.ds-loader .track{ width:min(22rem,72vw); height:1px; background:rgba(255,255,255,.15) }
.ds-loader .fill{ height:100%; width:0; background:var(--ac); transition:width .1s ease-out }
.ds-loader .meta{ width:min(22rem,72vw); display:flex; justify-content:space-between;
  font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  color:rgba(255,255,255,.45) }
.ds-loader .meta .num{ font-variant-numeric:tabular-nums; color:rgba(255,255,255,.8) }

/* ── Reveal motion (paired with ds-motion.js) ──
   Hiding is scoped under html.ds-motion (added by the script) so content is
   never invisible when JS is off, fails, or is still loading. */
html.ds-motion [data-reveal]{ opacity:0; transform:translateY(1.5rem) }
html.ds-motion [data-reveal].in{ opacity:1; transform:none;
  transition:opacity .9s var(--ds-ease-out), transform .9s var(--ds-ease-out) }
html.ds-motion [data-reveal="lines"] .rl{ display:block; overflow:hidden }
html.ds-motion [data-reveal="lines"] .rl > span{ display:block; transform:translateY(110%); opacity:0 }
html.ds-motion [data-reveal="lines"].in .rl > span{ transform:none; opacity:1;
  transition:transform .9s var(--ds-ease-out), opacity .9s var(--ds-ease-out) }
html.ds-motion [data-reveal="words"] .rw{ display:inline-block; transform:translateY(1.5rem); opacity:0 }
html.ds-motion [data-reveal="words"].in .rw{ transform:none; opacity:1;
  transition:transform .7s cubic-bezier(.165,.84,.44,1), opacity .7s cubic-bezier(.165,.84,.44,1) }

/* ── Footer (ink) ── */
.ds-footer{ position:relative; overflow:hidden; background:#0a0a0a; color:#fff;
  border-radius:var(--ds-r-card) var(--ds-r-card) 0 0 }
.ds-footer .cols a{ color:rgba(255,255,255,.65); font-size:.875rem;
  transition:color .2s, transform .25s var(--ds-ease-spring); display:inline-block }
@media (hover:hover){ .ds-footer .cols a:hover{ color:#fff; transform:translateX(.25rem) } }
.ds-footer .colt{ font-size:.75rem; text-transform:uppercase; letter-spacing:.025em;
  color:rgba(255,255,255,.4); font-weight:600 }

/* ── Section rhythm ── */
.ds-section{ padding-block:4rem }
@media (min-width:1024px){ .ds-section{ padding-block:6rem } }

/* ── Accessibility / reduced motion ── */
@media (prefers-reduced-motion: reduce){
  .ds *, .ds *::before, .ds *::after{ animation:none !important; transition:none !important }
  [data-reveal], [data-reveal="lines"] .rl > span, [data-reveal="words"] .rw{
    opacity:1 !important; transform:none !important }
}