/* ============================================================
   ABxDesign — Design Tokens
   css/tokens.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

/* ── Color Tokens ─────────────────────────────────────────── */
:root {
--bg:  #06041a;
--bg2: #09071f;
--bg3: #0d0b26;
  --surf:      #10102a;
  --surf2:     #181838;
  --surf3:     #1e1e42;

  --a1:        #7c6ff7;   /* primary purple   */
  --a2:        #06d6c7;   /* cyan              */
  --a3:        #ff6b9d;   /* pink              */
  --a4:        #4fffb0;   /* mint green        */
  --a5:        #ffd166;   /* amber             */

  --bd:        rgba(124,111,247,0.13);
  --bd2:       rgba(124,111,247,0.28);
  --bd3:       rgba(124,111,247,0.45);

  --t1:        #eeeaff;
  --t2:        #9b98c8;
  --t3:        #55527a;
  --t4:        #2e2c4a;

  --glow1:     0 0 52px rgba(124,111,247,0.45);
  --glow2:     0 0 52px rgba(6,214,199,0.35);
  --glow3:     0 0 52px rgba(255,107,157,0.35);

  /* ── Typography ───────────────────────────────────────── */
  --font-display: 'Unbounded', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Spacing / Layout ─────────────────────────────────── */
  --max-w:     1200px;
  --pad-x:     clamp(20px, 4.5vw, 56px);
  --radius:    14px;
  --radius-lg: 22px;

  /* ── Transitions ──────────────────────────────────────── */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font-body);
  line-height: 1.68;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--a1); }

/* ── Selection ───────────────────────────────────────────── */
::selection { background: rgba(124,111,247,0.32); color: var(--t1); }

/* ── Focus ───────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--a1); outline-offset: 3px; border-radius: 4px; }

/* ── Utility classes ─────────────────────────────────────── */
.text-grad {
  background: linear-gradient(135deg, var(--a1) 0%, var(--a2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-ghost {
  -webkit-text-stroke: 1px rgba(238,234,255,0.14);
  color: transparent;
}
.text-a1 { color: var(--a1); }
.text-a2 { color: var(--a2); }
.text-a3 { color: var(--a3); }
.text-a4 { color: var(--a4); }
.text-t2  { color: var(--t2); }
.text-t3  { color: var(--t3); }
.center   { text-align: center; }
.inner    { max-width: var(--max-w); margin: 0 auto; }

/* ── Reveal animation ────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* ── Gradient divider ────────────────────────────────────── */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bd2) 50%, transparent);
  margin: 0;
}

/* ── Section base ────────────────────────────────────────── */
.section {
  padding: clamp(80px,11vh,130px) var(--pad-x);
  position: relative;
  z-index: 10;
}
.section--alt { background: var(--bg2); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--a2);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.eyebrow::before { content:''; display:block; width:26px; height:1px; background:var(--a2); }

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4.8vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: clamp(12px,1.8vh,18px);
}
.section-sub {
  font-size: clamp(14px,1.6vw,17px);
  color: var(--t2);
  line-height: 1.82;
  max-width: 560px;
}