/* ── Design tokens ── */
:root, [data-theme="dark"] {
  --bg:         #07070f;
  --surf:       #0f0f1c;
  --surf2:      #161626;
  --surf3:      #1c1c30;
  --bord:       rgba(255,255,255,.06);
  --bord2:      rgba(255,255,255,.1);
  --txt:        #e8e6f5;
  --txt2:       #9090b8;
  --txt3:       #52526e;
  --muted:      #52526e;
  --accent:     #7c6af5;
  --accent-soft:rgba(124,106,245,.13);
  --accent-br:  rgba(124,106,245,.3);
  --accent-border: rgba(124,106,245,.3);
  --teal:       #1ecfaa;
  --teal-soft:  rgba(30,207,170,.13);
  --teal-br:    rgba(30,207,170,.28);
  --amber:      #f5a623;
  --amber-soft: rgba(245,166,35,.13);
  --amber-br:   rgba(245,166,35,.28);
  --coral:      #f05c5c;
  --coral-soft: rgba(240,92,92,.13);
  --coral-br:   rgba(240,92,92,.25);
  --green:      #3ecf8e;
  --green-soft: rgba(62,207,142,.13);
  --green-br:   rgba(62,207,142,.25);
}

[data-theme="light"] {
  --bg:    #f5f4ef;
  --surf:  #ffffff;
  --surf2: #f0eef8;
  --surf3: #e8e5f5;
  --bord:  rgba(0,0,0,.07);
  --bord2: rgba(0,0,0,.12);
  --txt:   #1a1920;
  --txt2:  #555370;
  --txt3:  #8e8aaa;
  --muted: #8e8aaa;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--txt);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px; line-height: 1.6;
  overflow-x: hidden;
}
img, svg { display: block; }

/* Shared utility */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; color: var(--accent); font-family: 'DM Mono', monospace; text-transform: uppercase; margin-bottom: 16px; }
.eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.sec-title { font-family: 'Syne', sans-serif; font-size: 38px; font-weight: 800; letter-spacing: -1.8px; line-height: 1.1; margin-bottom: 14px; }
.sec-sub { font-size: 16px; color: var(--txt2); line-height: 1.7; max-width: 540px; }

/* Toast */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(8px);
  z-index: 9999; background: var(--surf3); border: 1px solid var(--bord2);
  color: var(--txt); padding: 10px 20px; border-radius: 10px;
  font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Upgrade banner */
.upgrade-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--amber-soft); border: 1px solid var(--amber-br);
  border-radius: 10px; padding: 12px 18px; font-size: 13px; color: var(--txt2);
  flex-wrap: wrap;
}
.upgrade-link { color: var(--amber); text-decoration: none; font-weight: 500; }
.upgrade-link:hover { text-decoration: underline; }