/* design-system.css — Printr-style dark Web3 tokens */
:root{
  --bg-0:#07070B;
  --bg-1:#0D0D14;
  --bg-2:#14141F;
  --bg-3:#1C1C2B;

  --line: rgba(255,255,255,.06);
  --line-strong: rgba(255,255,255,.12);
  --line-violet: rgba(124,77,255,.4);

  --text-hi:#F5F5FA;
  --text-md:#A8A8B8;
  --text-lo:#6A6A7E;

  --violet:#7C4DFF;
  --violet-2:#5B2EE6;
  --pink:#FF4DCB;
  --cyan:#4DE1FF;
  --green:#19E39A;
  --red:#FF4D6A;

  --grad-primary: linear-gradient(135deg, #7C4DFF 0%, #FF4DCB 100%);
  --grad-spectrum: linear-gradient(90deg, #4DE1FF 0%, #7C4DFF 50%, #FF4DCB 100%);
  --grad-surface: linear-gradient(180deg, #14141F 0%, #0D0D14 100%);

  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px -12px rgba(0,0,0,.8);
  --glow-violet: 0 0 0 1px rgba(124,77,255,.4), 0 8px 32px -4px rgba(124,77,255,.45);
  --glow-pink: 0 0 0 1px rgba(255,77,203,.35), 0 8px 32px -4px rgba(255,77,203,.4);
  --glow-cyan: 0 0 0 1px rgba(77,225,255,.3), 0 8px 32px -4px rgba(77,225,255,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-0);color:var(--text-hi)}
body{
  font-family:'Geist',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.mono{font-family:'Geist Mono',ui-monospace,monospace;font-feature-settings:"zero","tnum"}
.tnum{font-variant-numeric:tabular-nums}
::selection{background:var(--violet);color:#fff}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* grid + glow scene */
.scene{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(800px 500px at 15% -5%, rgba(124,77,255,.22), transparent 60%),
    radial-gradient(900px 600px at 95% 10%, rgba(255,77,203,.16), transparent 60%),
    radial-gradient(700px 400px at 50% 110%, rgba(77,225,255,.1), transparent 60%),
    var(--bg-0);
}
.scene::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image: radial-gradient(ellipse at 50% 20%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 30%, transparent 75%);
}
.scene::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.04;mix-blend-mode:screen;
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:10px;
  font-size:13px;font-weight:500;letter-spacing:-0.005em;
  border:1px solid var(--line-strong);
  background:var(--bg-2);color:var(--text-hi);
  cursor:default;transition:border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.btn:hover{border-color:var(--line-violet);background:var(--bg-3)}
.btn-primary{
  background:var(--grad-primary);
  color:#fff;border:1px solid transparent;
  box-shadow: var(--glow-violet);
  position:relative;
}
.btn-primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-ghost{
  background:transparent;border-color:transparent;color:var(--text-md);
}
.btn-ghost:hover{color:var(--text-hi);background:rgba(255,255,255,.04)}

/* chips */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 11px;border-radius:999px;
  font-family:'Geist Mono';font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-md);
  border:1px solid var(--line-strong);
  background:rgba(20,20,31,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.chip .dot.violet{background:var(--violet);box-shadow:0 0 12px var(--violet)}

/* gradient text */
.grad-text{
  background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.grad-text-spectrum{
  background:var(--grad-spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* gradient-border card */
.card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-card);
}
.card-glow{
  position:relative;border-radius:18px;padding:1px;
  background:var(--grad-primary);
  box-shadow:var(--glow-violet);
}
.card-glow > .inner{
  background:var(--bg-2);border-radius:17px;
  position:relative;overflow:hidden;
}
.card-glow > .inner::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 0% 0%, rgba(124,77,255,.12), transparent 60%);
}

/* section heads */
.section-label{
  font-family:'Geist Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-lo);display:flex;align-items:center;gap:12px;
}
.section-label::before{
  content:"";width:24px;height:1px;background:var(--grad-spectrum);
}
h1, h2, h3{letter-spacing:-0.03em;font-weight:500;margin:0}
h1{font-size: clamp(56px, 9vw, 128px); line-height:.95; font-weight:500}
h2{font-size: clamp(34px, 4.5vw, 56px); line-height:1.05}
h3{font-size:22px;line-height:1.2}

/* perforated gradient divider */
.hr-grad{height:1px;background:var(--grad-spectrum);opacity:.3;border:0}

/* hairline dotted divider */
.hr-dot{height:1px;background:repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 6px);border:0}