/* =============================================================================
   FROZEN THEME — drop-in design system for landing pages.
   Add this ONE file to a project and import it globally. Fonts auto-load.
   Use the classes + CSS variables below; never hardcode colors/px.
   To rebrand: change only the values in :root.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ── Brand (the one accent hue) ───────────────────────────────── */
  --brand:        #0098FF;
  --brand-deep:   #0D1B3E;            /* deep navy: headings + dark sections */
  --brand-sky:    #7FB3FF;            /* lighter accent on dark              */
  --brand-dark:   #0057D4;            /* CTA gradient end                    */
  --brand-subtle: rgba(0,152,255,.08);
  --brand-border: rgba(0,152,255,.18);

  /* ── Text ─────────────────────────────────────────────────────── */
  --text-heading: #0D1B3E;
  --text-body:    #475569;
  --text-muted:   #5F6B7A;
  --text-inverse: #FFFFFF;

  /* ── Surfaces ─────────────────────────────────────────────────── */
  --surface-card: #FFFFFF;
  --surface-page: #F5F7FF;
  --surface-tint: #F2F8FF;
  --surface-dark: #0D1B3E;

  /* ── Borders / status ─────────────────────────────────────────── */
  --border-light: rgba(15,23,42,.08);
  --border-med:   rgba(15,23,42,.12);
  --success:      #27C98A;
  --danger:       #E8543E;

  /* ── Radius ───────────────────────────────────────────────────── */
  --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px;
  --radius-2xl: 24px; --radius-pill: 999px;

  /* ── Shadow ───────────────────────────────────────────────────── */
  --shadow-card:      0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --shadow-hover:     0 4px 12px rgba(15,23,42,.08), 0 24px 48px rgba(15,23,42,.10);
  --shadow-cta:       0 8px 24px rgba(0,87,212,.28);
  --shadow-cta-hover: 0 14px 34px rgba(0,87,212,.42);

  /* ── Spacing / layout ─────────────────────────────────────────── */
  --section-pad: clamp(56px, 7vh, 88px);
  --hero-pad:    clamp(72px, 9vh, 104px);
  --max-content: 1280px;

  /* ── Type ─────────────────────────────────────────────────────── */
  --font-sans:  'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --type-hero:  clamp(32px, 5vw, 52px);
  --type-h2:    clamp(26px, 3.4vw, 40px);
  --type-lead:  clamp(17px, 1.6vw, 20px);

  /* ── Gradients ────────────────────────────────────────────────── */
  --gradient-page: linear-gradient(180deg, #F5F7FF 0%, #FFFFFF 100%);
  --gradient-cta:  linear-gradient(135deg, #0098FF 0%, #0057D4 100%);
  --gradient-hero: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(0,152,255,.12), transparent 64%);
  --gradient-dark: linear-gradient(160deg, #0D1B3E 0%, #0A1454 100%);
}

/* ── Base ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-card);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); }

/* ── Layout ───────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max-content); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

.section        { padding: var(--section-pad) 0; }
.section--hero  { padding: var(--hero-pad) 0 calc(var(--section-pad) * .6); background: var(--gradient-page); position: relative; overflow: hidden; }
.section--tint  { background: var(--surface-tint); }
.section--dark  { background: var(--gradient-dark); color: rgba(255,255,255,.82); }
.section--dark .type-h2,
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: var(--brand-sky); background: rgba(127,179,255,.12); border-color: rgba(127,179,255,.25); }
.section--dark .serif-accent { color: var(--brand-sky); }

/* ── Typography ───────────────────────────────────────────────────── */
.type-hero { font-family: var(--font-sans); font-weight: 800; font-size: var(--type-hero); line-height: 1.08; letter-spacing: -.02em; color: var(--text-heading); margin: 0 0 18px; }
.type-h2   { font-family: var(--font-sans); font-weight: 800; font-size: var(--type-h2);   line-height: 1.14; letter-spacing: -.02em; color: var(--text-heading); margin: 0 0 14px; }
.type-h3   { font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--text-heading); margin: 0 0 8px; }
.type-lead { font-size: var(--type-lead); line-height: 1.7; color: var(--text-body); }
.text-muted { color: var(--text-muted); }

/* The SIGNATURE: wrap one heading phrase in this */
.serif-accent { font-family: var(--font-serif) !important; font-weight: 400; }
.italic { font-style: italic; }

/* Eyebrow pill */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-subtle); border: 1px solid var(--brand-border);
  padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 16px;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-cta, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 14px 28px; border-radius: var(--radius-pill); text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-cta   { color: #fff; background: var(--gradient-cta); border: 1px solid transparent; box-shadow: var(--shadow-cta); }
.btn-cta:hover  { transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); }
.btn-ghost { color: var(--text-heading); background: var(--surface-card); border: 1px solid var(--border-med); }
.btn-ghost:hover { background: var(--surface-tint); }

/* ── Cards ────────────────────────────────────────────────────────── */
.card { background: var(--surface-card); border: 1px solid var(--border-light); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); padding: 24px; }
.card--hover { transition: transform .25s, box-shadow .25s, border-color .25s; }
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--brand-border); }
.section--dark .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.82); }

/* ── Grids ────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ── Hero ambient orbs (optional decoration) ──────────────────────── */
.orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.orbs::before, .orbs::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); }
.orbs::before { width: 620px; height: 620px; top: -200px; left: 4%; background: radial-gradient(circle at 40% 40%, rgba(0,152,255,.20), transparent 70%); animation: orbFloat 22s ease-in-out infinite; }
.orbs::after  { width: 480px; height: 480px; top: -120px; right: 4%; background: radial-gradient(circle at 60% 30%, rgba(0,87,212,.14), transparent 70%); animation: orbFloat 26s ease-in-out infinite reverse; }

/* ── Scroll/entrance reveal (add class="reveal" to animate up on view) ─ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ── Motion safety ────────────────────────────────────────────────── */
@keyframes orbFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(28px,-22px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}