/* ===================================================================
   QUIZ Q — cool blue-glass design system
   Tokens · type scale · glass recipe · components
   =================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* brand accent (overridable by Tweaks) */
  --accent: #2F6BFF;
  --accent-deep: #1E4FD0;
  --accent-soft: #6E97FF;
  --accent-ink: #163A9E;

  /* cohesive cool tonal scale (no rainbow) */
  --t-azure: #2F6BFF;
  --t-indigo: #4656D9;
  --t-sky: #2293D8;
  --t-slate: #3A4D7A;
  --t-cyan: #1AA6C2;
  --t-deep: #1B2C5E;

  /* ink / neutrals — cool navy family */
  --ink: #0C1426;
  --ink-2: #2A3650;
  --muted: #5C6880;
  --muted-2: #8B94A8;
  --line: rgba(18, 38, 84, 0.10);
  --line-2: rgba(18, 38, 84, 0.06);

  /* surfaces */
  --bg: #EAF0FB;
  --bg-deep: #0B1430;
  --card: rgba(255, 255, 255, 0.66);
  --card-solid: #FFFFFF;
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-edge: rgba(120, 150, 220, 0.18);

  /* radii */
  --r-xs: 10px;
  --r-sm: 14px;
  --r: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --pill: 999px;

  /* shadows — soft, multi-layer, floaty */
  --sh-sm: 0 1px 2px rgba(16, 36, 84, 0.06), 0 4px 12px -6px rgba(16, 36, 84, 0.14);
  --sh: 0 1px 0 rgba(255,255,255,0.9) inset, 0 2px 6px rgba(16, 36, 84, 0.05),
        0 22px 44px -22px rgba(16, 36, 84, 0.30);
  --sh-lg: 0 1px 0 rgba(255,255,255,0.95) inset, 0 4px 10px rgba(16, 36, 84, 0.06),
        0 40px 80px -34px rgba(16, 36, 84, 0.42);
  --sh-accent: 0 10px 30px -8px color-mix(in oklab, var(--accent) 55%, transparent);

  /* type */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-script: "Caveat", "Unbounded", cursive;
  --font-ui: "Manrope", system-ui, -apple-system, sans-serif;

  /* layout */
  --maxw: 1200px;
  --gut: clamp(18px, 4vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* headline font swap (Tweaks) */
:root[data-headline="serif"] { --font-display: "Fraunces", Georgia, serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ambient cool-blue background glow */
.bg-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 18% 8%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(50% 45% at 92% 14%, rgba(120, 170, 255, 0.30), transparent 62%),
    radial-gradient(55% 50% at 70% 96%, rgba(150, 130, 255, 0.18), transparent 60%),
    linear-gradient(180deg, #F2F6FD 0%, var(--bg) 40%, #E6EDFA 100%);
}
.bg-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(40, 70, 140, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
          mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
  opacity: 0.6;
}

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.script {
  font-family: var(--font-script);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
  line-height: 0.9;
}
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.h-sec {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.lead {
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ---------- Layout primitives ---------- */
.wrap { width: min(100% - var(--gut) * 2, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(64px, 10vw, 132px) 0; position: relative; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head .lead { margin-top: 18px; }

/* ---------- Glass card recipe ---------- */
.glass {
  position: relative;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.82), rgba(255,255,255,0.52) 60%, rgba(244,248,255,0.6));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
          backdrop-filter: blur(22px) saturate(170%);
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,0.95), rgba(255,255,255,0) 38%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-ui); font-weight: 700; font-size: 1rem;
  padding: 0.92em 1.4em; border-radius: var(--pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s;
  white-space: nowrap;
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn-dark {
  background: linear-gradient(180deg, #16213f, var(--ink));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 14px 30px -12px rgba(11,20,48,0.7);
}
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 22px 42px -14px rgba(11,20,48,0.8); }
.btn-accent {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  color: #fff;
  box-shadow: var(--sh-accent), 0 1px 0 rgba(255,255,255,0.4) inset;
}
.btn-accent:hover { transform: translateY(-2px); }
.btn-ghost {
  background: rgba(255,255,255,0.55);
  border-color: var(--glass-border);
  color: var(--ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,0.8); }
.btn-sm { padding: 0.62em 1.05em; font-size: 0.9rem; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.86rem; font-weight: 600; color: var(--ink-2);
  padding: 0.5em 0.9em; border-radius: var(--pill);
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-sm);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.chip svg { width: 15px; height: 15px; color: var(--accent); }

/* icon-pill (square soft accent tile behind an icon) */
.ipill {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 18%, white), color-mix(in oklab, var(--accent) 6%, white));
  border: 1px solid color-mix(in oklab, var(--accent) 22%, white);
  color: var(--accent-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  flex: none;
}
.ipill svg { width: 22px; height: 22px; stroke-width: 1.7; }

svg { display: block; }
.lucide { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.07s; }
.reveal[data-d="2"] { transition-delay: 0.14s; }
.reveal[data-d="3"] { transition-delay: 0.21s; }
.reveal[data-d="4"] { transition-delay: 0.28s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}