/* 07 · Opal — token skin. Pair with ../base.css */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700&family=Figtree:wght@400;500;600&display=swap');

:root {
  /* color */
  --bg: #FFFFFF;
  --bg-alt: #F7F6FC;
  --bg-dark: #241F33;
  --surface: #FFFFFF;
  --ink: #241F33;
  --ink-inverse: #F8F6FF;
  --text-body: #241F33;
  --muted: #6B6480;
  --accent: #6552E0;              /* violet — AA with white */
  --accent-hover: #5343C4;
  --accent-tint: #EFEBFC;
  --accent-2: #2E9FBF;            /* aqua — gradient partner */
  --line: #E7E4F2;
  --mint: #DFF3EA;                /* fourth tint for card rotation only */

  /* gradient recipe — keywords, CTA fills, thin rules, orbs. Never under body-size text. */
  --grad: linear-gradient(120deg, #6552E0 0%, #2E9FBF 55%, #E879B9 100%);
  --grad-deep: linear-gradient(120deg, #4D3BC4 0%, #1F7E9A 55%, #C4548F 100%); /* band variant, AA with white */

  /* type */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-utility: 'Figtree', system-ui, sans-serif;
  --display-weight: 700;
  --fs-h1: clamp(2.5rem, 5.5vw, 3.75rem);
  --fs-h2: clamp(1.875rem, 3.5vw, 2.5rem);
  --fs-h3: 1.1875rem;
  --fs-body: 1.0625rem;
  --lh-body: 1.7;

  /* shape & depth */
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-btn: var(--radius-pill);
  --shadow: 0 12px 32px rgba(101, 82, 224, 0.10);
  --speed: 200ms;
  --ease: cubic-bezier(0.34, 1.3, 0.64, 1);
  --input-bg: var(--bg-alt);
}

/* Signature: the gradient keyword — exactly one per H1 */
.grad-word {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Gradient primary CTA (white 600 label ≥18px for large-text AA) */
.btn-primary { background: var(--grad); color: #FFFFFF; }
.btn-primary:hover { filter: saturate(1.15); background: var(--grad); }
.btn-secondary { border: 1.5px solid var(--accent); color: var(--accent); }

/* Orbs — always behind content, never behind paragraphs */
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.12;
  background: var(--grad);
  pointer-events: none; z-index: 0;
}
.has-orbs { position: relative; overflow: hidden; }
.has-orbs > :not(.orb) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .orb { animation: orb-drift 30s ease-in-out infinite alternate; }
  @keyframes orb-drift { to { transform: translate(6%, -4%) scale(1.06); } }
}

/* Gradient border on card hover (double-background trick; no layout shift) */
.card { border: 1.5px solid var(--line); }
.card:hover {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  transform: translateY(-3px);
}

/* Tint rotation for card headers: violet → aqua → pink → mint */
.tint-1 { background: var(--accent-tint); }
.tint-2 { background: #E4F4F9; }
.tint-3 { background: #FCE9F3; }
.tint-4 { background: var(--mint); }

/* Floating rounded nav */
.site-header {
  position: sticky; top: 12px;
  margin-inline: var(--gutter);
  border: none; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow);
}

/* Gradient band (deep stops so white text passes) */
.band.grad { background: var(--grad-deep); color: #FFFFFF; }
.band.grad h2 { color: #FFFFFF; }

/* Thin gradient divider rule */
.rule-grad { height: 2px; border: 0; background: var(--grad); }

/* Footer sits under a gradient top rule, rounded page seat */
.site-footer { background: var(--bg-dark); color: var(--ink-inverse); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-top: 2px solid transparent; background-clip: padding-box; }