/* ===============================================================
   The Synth Studio design tokens
   Extracted from the live site (synth-site/css/site.css).
   Load fonts first: fonts-local.css, or the Fontshare link in fonts.md.
   Full colour system with roles: 04-color/palette.md
   Type scale: 05-typography/typography.md
=============================================================== */
:root {
  /* deep space */
  --bg: #0a0812;          /* main surface */
  --bg-base: #08060f;     /* deepest page base */
  --bg-soft: #120e20;     /* cards, glass panels */

  /* brand spectrum */
  --violet: #8b6cff;      /* primary: buttons, links, gradient start */
  --blue: #4f7dff;        /* gradient end, rim light */
  --lavender: #c9bcff;    /* kickers, hairline borders */
  --pink: #f0a6c8;        /* the signature warm note, use on purpose */

  /* ink and material */
  --ink: #ece8f6;         /* primary text, never pure white */
  --ink-dim: #9d94b8;     /* sub-copy, captions */
  --line: rgba(201, 188, 255, 0.12);
  --card: rgba(139, 108, 255, 0.06);

  /* type */
  --font-display: "Clash Display", sans-serif;
  --font-body: "General Sans", sans-serif;
}

/* page base: deep space with the two aurora washes */
html {
  background:
    radial-gradient(130% 80% at 50% -10%, #171129 0%, transparent 55%),
    radial-gradient(120% 80% at 50% 112%, #0c1230 0%, transparent 55%),
    var(--bg-base);
}
body {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--violet); color: #fff; }

/* headlines: Clash Display 600, tight */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.06;
}
/* scale: hero clamp(48px, 7vw, 96px); h2 clamp(38px, 5vw, 62px); h3 21px */

/* the accent-word device: gradient-fill ONE word per headline, no more */
.accent {
  background: linear-gradient(100deg, var(--violet), var(--blue) 55%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* kicker / eyebrow label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lavender); margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; width: 30px; height: 1px;
  background: linear-gradient(90deg, var(--violet), transparent);
}

/* primary button: the action gradient on a pill */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: #fff; text-decoration: none; padding: 15px 32px; border-radius: 100px;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  box-shadow: 0 10px 40px -14px rgba(139,108,255,0.7), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 54px -16px rgba(139,108,255,0.9); }
.btn-ghost {
  background: rgba(201,188,255,0.06); border: 1px solid var(--line);
  box-shadow: none; color: var(--ink);
}
.btn-ghost:hover { border-color: var(--violet); background: rgba(139,108,255,0.12); box-shadow: none; }

/* drifting aurora backdrop, always subtle */
.aurora {
  position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(26% 30% at 20% 22%, rgba(139,108,255,0.20), transparent 70%),
    radial-gradient(32% 34% at 84% 14%, rgba(79,125,255,0.16), transparent 72%),
    radial-gradient(38% 40% at 70% 90%, rgba(139,108,255,0.13), transparent 72%);
  filter: blur(50px) saturate(1.15);
  animation: aurora 30s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.06); }
}