/* ============================================================
   Tryout UTBK by Esfo — Landing Page styles
   Built on the Esfo Digital design system, re-anchored on a
   calm, trustworthy BLUE (eye-comfort for 90+ min sessions),
   with Esfo's purple/magenta bridged in as small accents.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Open+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');

:root {
  /* ── Brand: blue primary (trust + low eye-strain) ────────── */
  --primary:        #2563EB;   /* royal-trust blue */
  --primary-600:    #1D4FD7;
  --primary-700:    #1A43B8;
  --primary-100:    #DCE8FF;
  --primary-50:     #EEF3FB;

  /* Esfo accents — used sparingly */
  --coral:          #FF6B6B;
  --magenta:        #E040FB;
  --purple:         #7C4DFF;
  --green:          #16A34A;

  /* Anchor navy (blue-tinted for trust) */
  --navy:           #15223F;
  --navy-2:         #1B2C50;

  /* Signature gradient: blue → indigo → purple (bridges Esfo) */
  --grad:           linear-gradient(135deg, #2F6BFF 0%, #5A57F0 52%, #7C4DFF 100%);
  --grad-text:      linear-gradient(120deg, #2F6BFF 0%, #6A53F2 60%, #9B5BFF 100%);
  --grad-soft:      linear-gradient(135deg, rgba(47,107,255,0.10), rgba(124,77,255,0.10));

  /* ── Neutrals (warm-not-stark to cut glare) ─────────────── */
  --bg:             #F6F2EC;   /* warm broken white */
  --bg-alt:         #FBF8F4;
  --bg-cool:        #EEF3FB;   /* soft blue wash for product areas */
  --warm-gray:      #ECE6DE;
  --card:           #FFFFFF;
  --card-alt:       #FBF9F6;

  /* ── Text ────────────────────────────────────────────────── */
  --text:           #15223F;
  --text-2:         #475069;
  --text-3:         #7C849B;
  --on-dark:        #FFFFFF;
  --on-dark-2:      rgba(255,255,255,0.74);
  --on-dark-3:      rgba(255,255,255,0.52);

  --border:         rgba(21,34,63,0.09);
  --border-strong:  rgba(21,34,63,0.16);
  --border-on-dark: rgba(255,255,255,0.12);

  /* ── Type ────────────────────────────────────────────────── */
  --font-display:   'Montserrat', system-ui, sans-serif;
  --font-body:      'Open Sans', system-ui, sans-serif;
  --font-mono:      ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* ── Spacing / rhythm (driven by density tweak) ─────────── */
  --section-y:      clamp(56px, 8vw, 116px);
  --section-y-tight: clamp(40px, 5vw, 72px);
  --gap-card:       22px;
  --maxw:           1200px;

  /* ── Radius ──────────────────────────────────────────────── */
  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-2xl: 36px;  --r-pill: 999px;

  /* ── Shadow (soft, layered, large-radius) ───────────────── */
  --sh-xs: 0 1px 2px rgba(21,34,63,0.06);
  --sh-sm: 0 2px 10px rgba(21,34,63,0.06), 0 1px 2px rgba(21,34,63,0.04);
  --sh-md: 0 10px 30px rgba(21,34,63,0.09), 0 2px 8px rgba(21,34,63,0.05);
  --sh-lg: 0 24px 56px rgba(21,34,63,0.13), 0 6px 16px rgba(21,34,63,0.07);
  --sh-xl: 0 40px 90px rgba(21,34,63,0.18), 0 10px 24px rgba(21,34,63,0.09);
  --sh-glow: 0 22px 60px rgba(37,99,235,0.30);
  --sh-glow-soft: 0 16px 44px rgba(37,99,235,0.20);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-q: 140ms; --dur-b: 240ms; --dur-s: 480ms;
}

/* Density variants */
[data-density="compact"] { --section-y: clamp(40px, 5vw, 76px); --gap-card: 16px; }
[data-density="comfy"]   { --section-y: clamp(72px, 10vw, 150px); --gap-card: 28px; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--primary-100); color: var(--primary-700); }

/* ── Layout helpers ──────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 24px; }
.section { padding-block: var(--section-y); }
.section-tight { padding-block: var(--section-y-tight); }
.bg-alt { background: var(--bg-alt); }
.bg-cool { background: var(--bg-cool); }
.bg-warm { background: var(--warm-gray); }
.bg-navy { background: var(--navy); color: var(--on-dark); }

/* ── Type roles ──────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--primary); opacity: 0.6;
}
.eyebrow.center { justify-content: center; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); letter-spacing: -0.02em; line-height: 1.08; font-weight: 800; }
.h-display { font-size: clamp(40px, 6.4vw, 82px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; }
.h1 { font-size: clamp(32px, 4.6vw, 56px); }
.h2 { font-size: clamp(28px, 3.6vw, 46px); }
.h3 { font-size: clamp(21px, 2.2vw, 28px); font-weight: 700; }
.lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--text-2); }
.muted { color: var(--text-2); }
.muted-3 { color: var(--text-3); }
.grad-text {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section-head { max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 16px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  font-family: var(--font-display); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: var(--r-md); white-space: nowrap;
  transition: transform var(--dur-b) var(--ease), box-shadow var(--dur-b) var(--ease), background var(--dur-b) var(--ease), filter var(--dur-b) var(--ease);
  font-size: 15px; padding: 14px 24px; letter-spacing: 0.005em;
}
.btn i { font-size: 0.9em; }
.btn-lg { font-size: 16px; padding: 17px 30px; }
.btn-sm { font-size: 13.5px; padding: 10px 18px; border-radius: var(--r-sm); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--sh-glow-soft); }
.btn-primary:hover { background: var(--primary-600); transform: translateY(-2px); box-shadow: var(--sh-glow); }
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-grad { background: var(--grad); color: #fff; box-shadow: var(--sh-glow-soft); }
.btn-grad:hover { transform: translateY(-2px); box-shadow: var(--sh-glow); filter: brightness(1.05); }
.btn-outline { background: transparent; color: var(--text); border: 1.5px solid var(--border-strong); }
.btn-outline:hover { background: rgba(37,99,235,0.06); border-color: var(--primary); color: var(--primary-700); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-2); transform: translateY(-2px); }
.btn-on-dark { background: #fff; color: var(--navy); }
.btn-on-dark:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn-ghost-dark { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid var(--border-on-dark); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.18); }

/* ── Pills / badges ──────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  padding: 7px 14px; border-radius: var(--r-pill); letter-spacing: 0.01em;
}
.pill-live { background: #fff; border: 1px solid var(--border); color: var(--text); box-shadow: var(--sh-xs); }
.pill-live .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--green); box-shadow: 0 0 0 4px rgba(22,163,74,0.18); }
.pill-soon { background: rgba(124,77,255,0.10); color: var(--purple); }
.pill-new { background: var(--coral); color: #fff; }
.pill-grad { background: var(--grad); color: #fff; }
.pill-free { background: rgba(22,163,74,0.12); color: #15803d; }
.pill-blue { background: var(--primary-50); color: var(--primary-700); border: 1px solid rgba(37,99,235,0.16); }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  transition: transform var(--dur-b) var(--ease), box-shadow var(--dur-b) var(--ease), border-color var(--dur-b) var(--ease);
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: rgba(37,99,235,0.22); }

/* ── Reveal on scroll ────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Misc utilities ──────────────────────────────────────── */
.grid { display: grid; gap: var(--gap-card); }
.flex { display: flex; }
.center { align-items: center; }
.between { justify-content: space-between; }
.wrap-gap { display: flex; flex-wrap: wrap; gap: 12px; }
.divider { height: 1px; background: var(--border); border: 0; }
.mono { font-family: var(--font-mono); }
.hex {
  width: 1em; height: 1em; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--grad); display: inline-block;
}