/* ─────────────────────────────────────────
   STEAL RISK — Design System Tokens
   Source: Claude Design export v1
   ──────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap');

/* ── Colors ── */
:root {
  --brand-violet:        #4D3DF7;
  --brand-violet-dark:   #2A1E9E;
  --brand-ink:           #17141F;
  --paper:               #FBF6EE;

  /* Amici */
  --amici-500:           #FF991C;
  --amici-600:           #B8540A;
  --amici-900:           #2C1500;
  --amici-lime:          #CBF24A;
  --amici-surface:       #FFF3E0;

  /* Coppia Romantica */
  --coppia-rom-500:      #FF6F91;
  --coppia-rom-600:      #6E1A33;
  --coppia-rom-surface:  #FFE5EB;

  /* Coppia Piccante */
  --coppia-spicy-500:    #C12B72;
  --coppia-spicy-dark:   #2A0E22;
  --coppia-spicy-ink:    #0D0509;

  /* Random */
  --random-500:          #2D6BFF;
  --random-600:          #0A2E6E;
  --random-cyan:         #00C2D6;
  --random-dark:         #0B1F4D;

  /* Neutrals */
  --ink-60:              rgba(23,20,31,0.6);
  --ink-40:              rgba(23,20,31,0.4);
  --ink-12:              rgba(23,20,31,0.12);
  --white-60:            rgba(255,255,255,0.6);
  --white-40:            rgba(255,255,255,0.4);
  --white-08:            rgba(255,255,255,0.08);
  --white-05:            rgba(255,255,255,0.05);

  /* Surfaces */
  --surface-card:        #ffffff;
  --surface-cream-card:  #F2ECE2;
  --muted-text:          #726D7E;
  --muted-label:         #9C97A4;

  /* ── Typography ── */
  --font-display:   'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:      'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-numeric:   'Space Grotesk', 'Hanken Grotesk', monospace;

  --text-xs:        11px;
  --text-sm:        13px;
  --text-base:      15px;
  --text-md:        17px;
  --text-lg:        19px;
  --text-xl:        22px;
  --text-2xl:       28px;
  --text-3xl:       36px;
  --text-4xl:       48px;
  --text-5xl:       60px;
  --text-6xl:       76px;

  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-black:       800;

  --ls-tight:       -0.03em;
  --ls-display:     -0.04em;
  --ls-label:       0.08em;

  /* ── Spacing (4pt grid) ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-11:  56px;
  --space-12:  96px;

  --site-max:           1200px;
  --page-gutter:        clamp(20px, 4vw, 48px);
  --section-pad:        clamp(60px, 8vw, 100px);

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-sticker:    4px 4px 0 0 var(--sticker-color, #000);
  --shadow-sticker-lg: 6px 6px 0 0 var(--sticker-color, #000);
  --shadow-card:       0 2px 12px rgba(23,20,31,0.10), 0 1px 3px rgba(23,20,31,0.06);
  --shadow-card-hover: 0 8px 32px rgba(23,20,31,0.16), 0 2px 8px rgba(23,20,31,0.10);

  /* ── Animation ── */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--brand-ink);
  overflow-x: hidden;
}

::selection {
  background: var(--brand-violet);
  color: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ── Utility classes ── */
.site-wrap {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.section {
  padding: var(--section-pad) var(--page-gutter);
}

.section-inner {
  max-width: var(--site-max);
  margin: 0 auto;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-black);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-6xl);
  letter-spacing: var(--ls-display);
  line-height: 0.96;
}

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-5xl);
  letter-spacing: var(--ls-tight);
  line-height: 0.98;
}

.heading {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-3xl);
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
}

.subheading {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.body-lg {
  font-size: var(--text-lg);
  line-height: 1.6;
}

.body {
  font-size: var(--text-base);
  line-height: 1.65;
}

.numeric {
  font-family: var(--font-numeric);
  font-weight: var(--fw-bold);
}

/* ── Sticker button ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--fw-black);
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition:
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  --sticker-color: rgba(0,0,0,0.25);
  box-shadow: var(--shadow-sticker);
  text-decoration: none;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--sticker-color);
}

.btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.btn-violet {
  background: var(--brand-violet);
  color: #fff;
  --sticker-color: var(--brand-violet-dark);
}

.btn-ink {
  background: var(--brand-ink);
  color: #fff;
  --sticker-color: #000;
}

.btn-white {
  background: #fff;
  color: var(--brand-ink);
  --sticker-color: rgba(0,0,0,0.18);
}

.btn-ghost {
  background: var(--white-08);
  color: #fff;
  --sticker-color: rgba(0,0,0,0.2);
}

.btn-sm {
  font-size: var(--text-sm);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
}

/* ── Tag / badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-cream-card);
  color: var(--muted-label);
}

/* ── Category card ── */
.cat-card {
  border-radius: var(--radius-xl);
  padding: 28px 28px 24px;
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease-bounce),
    box-shadow var(--dur-fast) var(--ease-out);
  --sticker-color: rgba(0,0,0,0.25);
  box-shadow: var(--shadow-sticker-lg);
}

.cat-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 0 var(--sticker-color);
}

.cat-card:active {
  transform: translate(6px, 6px);
  box-shadow: none;
}

/* ── Divider ── */
.divider {
  border: none;
  border-top: 1px solid var(--ink-12);
}

/* ── Step numbers ── */
.step-num {
  font-family: var(--font-numeric);
  font-weight: var(--fw-bold);
  font-size: 64px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #E7E0D6;
}

/* ── Grid helpers ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-8); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-8); }

/* ── White card on cream ── */
.card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
}

/* ── Round list row ── */
.round-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.round-row:last-child { border-bottom: none; }

.round-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 8px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .display-xl { font-size: clamp(40px, 10vw, 76px); }
  .display    { font-size: clamp(32px, 9vw, 60px); }
  .heading    { font-size: clamp(26px, 7vw, 36px); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hide-mobile { display: none !important; }
}

@media (max-width: 480px) {
  .display-xl { font-size: 36px; }
  .display    { font-size: 30px; }
}