/* ============ Tokens ============ */
:root{
  --bg:#07070c;
  --bg-elev:#101018;
  --bg-elev-2:#171724;
  --bg-elev-3:#1f1f30;
  --border:#262633;
  --border-soft:#1a1a26;

  --purple:#b8f53d;
  --purple-bright:#d4ff70;
  --magenta:#7c5cff;

  --text:#f5f6f0;
  --muted:#a8a8b8;
  --muted-dim:#6e6e82;

  --green:#22c55e;
  --grey:#6b7280;

  --font-display:'Space Grotesk', sans-serif;
  --font-mega:'Unbounded', 'Space Grotesk', sans-serif;
  --font-accent:'Instrument Serif', Georgia, serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-s:9px;
  --radius-m:16px;
  --radius-l:24px;

  --gradient-brand:linear-gradient(135deg, var(--purple) 0%, var(--magenta) 100%);
  --gradient-brand-soft:linear-gradient(135deg, rgba(124,58,237,0.5), rgba(236,72,153,0.5));
}

*,*::before,*::after{ box-sizing:border-box; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:76px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  margin:0;
  letter-spacing:-0.02em;
  text-wrap:balance;
}

::selection{
  background:rgba(124,58,237,0.55);
  color:#fff;
}

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--purple), var(--magenta));
  border-radius:8px;
  border:2px solid var(--bg);
}

/* eyebrow kickers above section titles */
.kicker{
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--purple-bright);
  margin:0 0 10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.kicker::after{
  content:"";
  height:1px;
  width:44px;
  background:linear-gradient(90deg, var(--purple-bright), transparent);
}

/* serif italic accents inside taglines */
.accent{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
}

a{ color:inherit; }

.wrap{
  max-width:1160px;
  margin:0 auto;
  padding:0 20px;
  position:relative;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  background:var(--purple);
  color:#fff;
  padding:10px 16px;
  border-radius:var(--radius-s);
  z-index:200;
}
.skip-link:focus{
  left:16px;
  top:16px;
}

:focus-visible{
  outline:2px solid var(--purple-bright);
  outline-offset:3px;
  border-radius:4px;
}

/* ============ Ambient background field ============ */
.bg-field{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.55;
  will-change:transform;
  transition:transform 0.4s ease-out;
}
.orb-a{
  width:520px; height:520px;
  top:-180px; left:-120px;
  background:radial-gradient(circle, var(--purple) 0%, transparent 70%);
}
.orb-b{
  width:480px; height:480px;
  top:280px; right:-160px;
  background:radial-gradient(circle, var(--magenta) 0%, transparent 70%);
  opacity:0.4;
}
.orb-c{
  width:420px; height:420px;
  bottom:-200px; left:30%;
  background:radial-gradient(circle, var(--purple-bright) 0%, transparent 70%);
  opacity:0.3;
}

/* ============ Header ============ */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(8,8,15,0.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.header-edge{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,58,237,0.6), rgba(236,72,153,0.6), transparent);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.brand-mark{
  border-radius:8px;
  display:block;
  box-shadow:0 2px 10px -2px rgba(124,58,237,0.7);
}
.brand-name{
  font-family:var(--font-mega);
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.08em;
}

.site-nav{
  display:none;
  gap:28px;
  font-size:0.94rem;
  font-weight:500;
}
.site-nav a{
  text-decoration:none;
  color:var(--muted);
  transition:color 0.15s ease;
}
.site-nav a:hover{ color:var(--text); }

@media (min-width:760px){
  .site-nav{ display:flex; }
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.94rem;
  text-decoration:none;
  border:none;
  cursor:pointer;
  border-radius:999px;
  padding:10px 20px;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.btn:active{ transform:translateY(1px) scale(0.98); }

.btn-primary{
  background:var(--gradient-brand);
  color:#fff;
  box-shadow:0 6px 22px -6px rgba(124,58,237,0.7);
}
.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 48%, transparent 66%);
  transform:translateX(-120%);
  transition:transform 0.6s ease;
}
.btn-primary:hover::after{ transform:translateX(120%); }
.btn-primary:hover{
  box-shadow:0 10px 30px -6px rgba(236,72,153,0.7);
  transform:translateY(-1px);
}

.btn-ghost{
  background:rgba(255,255,255,0.02);
  color:var(--text);
  border:1px solid var(--border);
}
.btn-ghost:hover{
  border-color:var(--purple-bright);
  background:rgba(124,58,237,0.1);
}

.btn-lg{
  padding:14px 28px;
  font-size:1rem;
}

.btn-nav{
  padding:9px 18px;
  font-size:0.88rem;
}

/* ============ 3D tilt utility ============ */
.tilt-card{
  perspective:900px;
}
.tilt-inner{
  transform-style:preserve-3d;
  transition:transform 0.5s cubic-bezier(0.22,1,0.36,1);
  will-change:transform;
  position:relative;
}
.tilt-card.is-active .tilt-inner{
  transition:transform 0.08s linear;
}

.tilt-glare{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at var(--px,50%) var(--py,50%), rgba(255,255,255,0.35), transparent 55%);
  opacity:0;
  transition:opacity 0.3s ease;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.tilt-card.is-active .tilt-glare{ opacity:1; }

/* ============ Hero ============ */
.hero{
  position:relative;
  padding:96px 0 88px;
  overflow:hidden;
}

.arena-floor{
  position:absolute;
  left:50%;
  bottom:-6%;
  width:180%;
  height:380px;
  transform:translateX(-50%) perspective(700px) rotateX(64deg);
  background-image:
    linear-gradient(rgba(157,107,255,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157,107,255,0.35) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to top, black, transparent 75%);
  mask-image:linear-gradient(to top, black, transparent 75%);
  opacity:0.55;
  animation:floor-drift 14s linear infinite;
  pointer-events:none;
}
@keyframes floor-drift{
  from{ background-position:0 0; }
  to{ background-position:0 224px; }
}

.hero-inner{
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:40px;
  text-align:center;
}

@media (min-width:860px){
  .hero-inner{
    flex-direction:row;
    text-align:left;
    justify-content:space-between;
    gap:24px;
  }
}

.hero-copy{
  max-width:560px;
  animation:fade-in-up 0.7s ease both;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--bg-elev);
  border:1px solid var(--border);
  padding:6px 14px 6px 10px;
  border-radius:999px;
  font-size:0.85rem;
  color:var(--muted);
  margin-bottom:28px;
}

.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--grey);
  flex-shrink:0;
}
.status-dot.is-online{
  background:var(--green);
  box-shadow:0 0 0 3px rgba(34,197,94,0.18);
}
.status-dot.is-offline{
  background:var(--grey);
}
.status-dot.is-pulsing{
  animation:pulse-dot 1.4s ease-in-out infinite;
}

@keyframes pulse-dot{
  0%,100%{ opacity:1; }
  50%{ opacity:0.35; }
}

.hero-title{
  font-family:var(--font-mega);
  font-weight:900;
  font-size:clamp(2.6rem, 8vw, 4.9rem);
  line-height:1;
  letter-spacing:0.01em;
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:18px;
  text-wrap:balance;
}

.hero-tagline{
  margin:0 auto 36px;
  color:var(--muted);
  font-size:1.1rem;
  max-width:46ch;
}

@media (min-width:860px){
  .hero-tagline{ margin:0 0 36px; }
}

.hero-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
@media (min-width:860px){
  .hero-actions{ justify-content:flex-start; }
}

@keyframes fade-in-up{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* --- hero 3D badge --- */
.hero-badge-stage{
  position:relative;
  flex-shrink:0;
  animation:fade-in-up 0.8s ease 0.1s both;
}

.hero-badge{
  width:200px;
  height:200px;
}
@media (min-width:600px){
  .hero-badge{ width:240px; height:240px; }
}

.hero-badge-inner{
  width:100%;
  height:100%;
  border-radius:34px;
  animation:badge-float 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hero-badge-inner{ animation:none; }
}
.hero-badge.is-active .hero-badge-inner{
  animation-play-state:paused;
}

@keyframes badge-float{
  0%,100%{ transform:rotateX(6deg) rotateY(-8deg) translateY(0); }
  50%{ transform:rotateX(-4deg) rotateY(8deg) translateY(-10px); }
}

.hero-badge-img{
  width:100%;
  height:100%;
  display:block;
  border-radius:34px;
  box-shadow:
    0 30px 60px -20px rgba(124,58,237,0.6),
    0 10px 30px -8px rgba(236,72,153,0.4);
}

.hero-badge-shadow{
  display:block;
  width:70%;
  height:26px;
  margin:18px auto 0;
  background:radial-gradient(closest-side, rgba(124,58,237,0.45), transparent 75%);
  filter:blur(4px);
  animation:shadow-pulse 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hero-badge-shadow{ animation:none; }
}
@keyframes shadow-pulse{
  0%,100%{ transform:scale(1); opacity:0.7; }
  50%{ transform:scale(0.82); opacity:0.4; }
}

/* ============ Sections ============ */
.section{
  padding:68px 0;
  border-top:1px solid var(--border-soft);
  position:relative;
}

.section-head{
  margin-bottom:32px;
}
.section-head h2{
  font-size:clamp(1.4rem, 3vw, 1.75rem);
  margin-bottom:8px;
  text-wrap:balance;
}
.section-head p{
  color:var(--muted);
  margin:0;
  max-width:46ch;
}

/* ============ Stat cards ============ */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}

@media (min-width:640px){
  .stat-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (min-width:960px){
  .stat-grid{ grid-template-columns:repeat(5, 1fr); }
}

.stat-card{
  border-radius:var(--radius-m);
}

.stat-card .tilt-inner{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  padding:20px 18px;
  overflow:hidden;
  height:100%;
}

.stat-card .tilt-inner::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:var(--gradient-brand);
  opacity:0.75;
}

.stat-icon{
  display:inline-flex;
  width:26px;
  height:26px;
  margin-bottom:14px;
  color:var(--purple-bright);
  flex-shrink:0;
}
.stat-icon svg{ width:100%; height:100%; display:block; }

.stat-value{
  font-family:var(--font-display);
  font-size:1.9rem;
  font-weight:700;
  display:block;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
}

.stat-label{
  color:var(--muted);
  font-size:0.86rem;
  margin-top:4px;
  display:block;
}

.stat-card.has-alert .stat-value{
  color:var(--magenta);
}
.stat-card.has-alert .stat-icon{ color:var(--magenta); }

/* skeleton */
.skeleton{
  position:relative;
  overflow:hidden;
  background:var(--bg-elev-2);
  border-radius:6px;
  color:transparent !important;
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{
  100%{ transform:translateX(100%); }
}

.state-error{
  grid-column:1 / -1;
  background:var(--bg-elev);
  border:1px dashed var(--border);
  border-radius:var(--radius-m);
  padding:22px;
  color:var(--muted);
  text-align:center;
  font-size:0.95rem;
}
.state-error strong{
  color:var(--text);
  display:block;
  margin-bottom:4px;
  font-family:var(--font-display);
  font-weight:600;
}

/* ============ Leaderboard panel ============ */
.panel{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  overflow:hidden;
}

.tabs{
  display:flex;
  border-bottom:1px solid var(--border);
}

.tab{
  flex:1;
  background:none;
  border:none;
  color:var(--muted);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  padding:16px 12px;
  cursor:pointer;
  position:relative;
  transition:color 0.15s ease;
}
.tab:hover{ color:var(--text); }
.tab.is-active{ color:var(--text); }
.tab.is-active::after{
  content:"";
  position:absolute;
  left:16px; right:16px; bottom:-1px;
  height:2px;
  background:var(--gradient-brand);
  border-radius:2px;
}

.board-wrap{ padding:28px 20px 12px; }
.board-wrap.is-hidden{ display:none; }

/* --- podium (top 3) --- */
.podium{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:14px;
  perspective:1200px;
  margin-bottom:28px;
  padding:0 4px;
}

.podium-slot{
  flex:1;
  max-width:200px;
  background:var(--bg-elev-2);
  border:1px solid var(--border);
  border-radius:var(--radius-m) var(--radius-m) 8px 8px;
  padding:18px 12px 16px;
  text-align:center;
  position:relative;
  transform-style:preserve-3d;
}

.podium-slot--1{
  order:2;
  padding-top:26px;
  padding-bottom:24px;
  background:var(--bg-elev-3);
  border-color:#3a3870;
  box-shadow:0 18px 40px -16px rgba(124,58,237,0.55);
  transform:translateZ(24px);
  z-index:2;
}
.podium-slot--2{
  order:1;
  transform:rotateY(9deg);
  opacity:0.96;
}
.podium-slot--3{
  order:3;
  transform:rotateY(-9deg);
  opacity:0.92;
}

.podium-medal{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--muted-dim);
  display:block;
  margin-bottom:8px;
}
.podium-slot--1 .podium-medal{ color:#f5c451; font-size:0.85rem; }
.podium-slot--2 .podium-medal{ color:#c9ccd8; }
.podium-slot--3 .podium-medal{ color:#d99a63; }

.podium-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  margin:0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.2rem;
  color:#fff;
  background:var(--gradient-brand);
}
.podium-slot--1 .podium-avatar{
  width:64px; height:64px;
  font-size:1.4rem;
  box-shadow:0 0 0 3px rgba(245,196,81,0.5);
}

.podium-name{
  font-weight:600;
  font-size:0.95rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-bottom:4px;
}

.podium-value{
  font-family:var(--font-mono);
  font-size:0.92rem;
  color:var(--purple-bright);
}
.podium-value.is-coins{ color:var(--magenta); }
.podium-value .unit{
  color:var(--muted-dim);
  font-size:0.76rem;
  margin-left:3px;
}

/* --- remaining ranks list --- */
.board-list{ padding:4px 0; }

.board-row{
  display:grid;
  grid-template-columns:30px 1fr auto;
  align-items:center;
  gap:14px;
  padding:11px 8px;
  border-radius:var(--radius-s);
}
.board-row + .board-row{
  border-top:1px solid var(--border-soft);
}

.board-rank{
  font-family:var(--font-mono);
  font-size:0.88rem;
  color:var(--muted-dim);
  text-align:center;
}

.board-name{
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.board-meta{
  font-family:var(--font-mono);
  font-size:0.88rem;
  color:var(--muted);
  white-space:nowrap;
}
.board-meta .unit{
  color:var(--muted-dim);
  margin-left:4px;
  font-size:0.78rem;
}
.board-meta.is-xp{ color:var(--purple-bright); }
.board-meta.is-coins{ color:var(--magenta); }

.board-empty{
  padding:44px 24px;
  text-align:center;
  color:var(--muted);
}
.board-empty strong{
  display:block;
  color:var(--text);
  font-family:var(--font-display);
  margin-bottom:6px;
  font-weight:600;
}

/* ============ Commands ============ */
.command-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
  flex-wrap:wrap;
}

.search-field{
  position:relative;
  flex:1;
  min-width:220px;
  max-width:420px;
}
.search-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:17px;
  height:17px;
  color:var(--muted-dim);
  pointer-events:none;
}
#command-search{
  width:100%;
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:0.94rem;
  padding:11px 16px 11px 40px;
}
#command-search::placeholder{ color:var(--muted-dim); }
#command-search:focus{
  border-color:var(--purple-bright);
}

.command-count{
  color:var(--muted-dim);
  font-size:0.86rem;
  font-family:var(--font-mono);
  white-space:nowrap;
}

.command-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:640px){
  .command-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:960px){
  .command-grid{ grid-template-columns:repeat(3, 1fr); }
}

.command-card{ border-radius:var(--radius-m); }

.command-card .tilt-inner{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  padding:16px 18px;
  transition:border-color 0.2s ease;
  height:100%;
  overflow:hidden;
}
.command-card.is-active .tilt-inner{
  border-color:var(--purple-bright);
}

.command-name{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:0.98rem;
  color:var(--magenta);
  display:block;
  margin-bottom:6px;
}

.command-desc{
  color:var(--muted);
  font-size:0.92rem;
  margin:0;
}

.command-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
}
.command-empty strong{
  display:block;
  color:var(--text);
  font-family:var(--font-display);
  margin-bottom:6px;
}

mark{
  background:rgba(124,58,237,0.4);
  color:inherit;
  border-radius:3px;
  padding:0 1px;
}

/* ============ Footer ============ */
.site-footer{
  border-top:1px solid var(--border-soft);
  padding:40px 0;
  position:relative;
}

.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:8px;
}

.footer-note{
  color:var(--muted-dim);
  font-size:0.86rem;
  max-width:420px;
  margin:0;
}

.footer-links{
  display:flex;
  gap:20px;
  font-size:0.9rem;
}
.footer-links a{
  text-decoration:none;
  color:var(--muted);
}
.footer-links a:hover{ color:var(--text); }

/* ============ Light theme ============ */
[data-theme="light"]{
  --bg:#f4f4ef;
  --bg-elev:#ffffff;
  --bg-elev-2:#eceee4;
  --bg-elev-3:#e2e5d6;
  --border:#d4d8c4;
  --border-soft:#e4e6d8;
  --text:#14140f;
  --muted:#55554a;
  --muted-dim:#8a8a78;
  --purple:#5a9e00;
  --purple-bright:#4c8a00;
  --magenta:#6a4dff;
}
[data-theme="light"] .site-header{ background:rgba(244,244,239,0.8); }
[data-theme="light"] .orb{ opacity:0.25; }
[data-theme="light"] .btn-primary{ color:#0c0c06; }
[data-theme="light"] .hero-title{ filter:none; }

/* theme toggle */
.theme-toggle{
  background:var(--bg-elev-2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:999px;
  width:38px;
  height:38px;
  cursor:pointer;
  font-size:1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.theme-toggle:hover{ border-color:var(--purple-bright); }

/* ============ Feature grid ============ */
.feat-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:640px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .feat-grid{ grid-template-columns:repeat(3,1fr); } }
.feat-card{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  padding:22px;
  transition:transform 0.15s ease, border-color 0.2s ease;
}
.feat-card:hover{ transform:translateY(-3px); border-color:var(--purple-bright); }
.feat-icon{
  font-size:1.7rem;
  display:block;
  margin-bottom:12px;
}
.feat-card h3{ font-size:1.05rem; margin-bottom:6px; }
.feat-card p{ color:var(--muted); font-size:0.92rem; margin:0; }
.feat-card code{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--purple-bright);
  background:#ffffff10;
  padding:1px 6px;
  border-radius:6px;
}

/* ============ Steps ============ */
.steps{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  counter-reset:step;
}
@media (min-width:760px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  padding:22px;
  position:relative;
}
.step::before{
  counter-increment:step;
  content:"0" counter(step);
  font-family:var(--font-mono);
  color:var(--purple-bright);
  font-size:0.85rem;
  display:block;
  margin-bottom:10px;
}
.step h3{ margin-bottom:6px; }
.step p{ color:var(--muted); font-size:0.92rem; margin:0; }

/* ============ FAQ ============ */
.faq{ display:flex; flex-direction:column; gap:10px; }
.faq details{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  padding:16px 20px;
}
.faq summary{
  cursor:pointer;
  font-weight:600;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  font-family:var(--font-mono);
  color:var(--purple-bright);
  font-size:1.2rem;
  flex-shrink:0;
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{ color:var(--muted); margin:12px 0 0; font-size:0.94rem; }

/* ============ Footer columns ============ */
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  width:100%;
  text-align:left;
  margin-top:8px;
}
@media (min-width:760px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; } }
.footer-col h4{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted-dim);
  margin:0 0 12px;
}
.footer-col a{
  display:block;
  text-decoration:none;
  color:var(--muted);
  font-size:0.92rem;
  margin-bottom:8px;
}
.footer-col a:hover{ color:var(--text); }

/* ============ Settings rows ============ */
.set-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 8px;
  border-top:1px solid var(--border-soft);
}
.set-row:first-child{ border-top:none; }
.set-name{ font-weight:600; }
.set-desc{ color:var(--muted); font-size:0.88rem; }
.set-val{
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--purple-bright);
  background:#ffffff0a;
  padding:4px 12px;
  border-radius:999px;
  white-space:nowrap;
}
.set-val.off{ color:var(--muted-dim); }