/* ==========================================================================
   ikode — brand design system
   v1.0 · Light theme · Self-contained (no external assets)
   Targets: modern browsers + headless-Chrome print-to-PDF
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette — "Ultramarine" system */
  --ik-primary:        #4634E0;  /* Ultramarine — brand core, buttons, links */
  --ik-primary-strong: #3423B4;  /* hover / pressed */
  --ik-primary-deep:   #1D1470;  /* dark brand panels, title slides */
  --ik-primary-tint:   #EEEDFC;  /* washes, selected states */
  --ik-primary-ghost:  #F6F5FE;  /* faintest wash */

  --ik-violet:         #7B5CFF;  /* gradient partner */
  --ik-ink:            #0E1023;  /* headings, near-black navy */
  --ik-body:           #363C58;  /* body text */
  --ik-muted:          #5C627C;  /* secondary text (AA on white) */
  --ik-faint:          #8A90A8;  /* tertiary — large/decorative only */

  --ik-surface:        #FFFFFF;
  --ik-surface-2:      #F6F7FB;  /* section alternation, cards on white */
  --ik-surface-3:      #EEF0F7;  /* deeper wash */
  --ik-border:         #E3E6F0;
  --ik-border-strong:  #C9CEE0;

  --ik-accent:         #B45309;  /* Amber — urgency, deadlines (text-safe) */
  --ik-accent-bright:  #F5A623;  /* amber fills, highlights, meter bars */
  --ik-accent-tint:    #FDF3E3;

  --ik-success:        #0E7F5B;  /* text-safe green */
  --ik-success-tint:   #E5F5EE;
  --ik-danger:         #C22F45;
  --ik-danger-tint:    #FBEBEE;

  /* Gradient pair (brand) */
  --ik-grad-a:         #3A28CE;
  --ik-grad-b:         #7B5CFF;
  --ik-gradient:       linear-gradient(120deg, var(--ik-grad-a) 0%, var(--ik-grad-b) 100%);
  --ik-gradient-soft:  linear-gradient(160deg, #F7F6FE 0%, #EFF1FB 55%, #F3F0FE 100%);
  --ik-gradient-deep:  linear-gradient(135deg, #171040 0%, #2A1D96 62%, #4634E0 100%);

  /* Typography */
  --ik-font-sans: "Inter", -apple-system, "SF Pro Text", "Segoe UI", system-ui,
                  "Noto Sans", "Helvetica Neue", Arial, "DejaVu Sans", sans-serif;
  --ik-font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", ui-monospace,
                  Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* Modular type scale — 1.25 ratio, 16px base */
  --ik-fs-xs:   0.8rem;      /* 12.8  small print, footers            */
  --ik-fs-sm:   0.875rem;    /* 14    captions, pills, nav            */
  --ik-fs-base: 1rem;        /* 16    body                            */
  --ik-fs-lead: 1.1875rem;   /* 19    lead paragraphs                 */
  --ik-fs-md:   1.25rem;     /* 20    h5 / card titles                */
  --ik-fs-lg:   1.5625rem;   /* 25    h4                              */
  --ik-fs-xl:   1.953rem;    /* 31.25 h3                              */
  --ik-fs-2xl:  2.441rem;    /* 39    h2 / section titles             */
  --ik-fs-3xl:  3.052rem;    /* 49    h1 / hero                       */
  --ik-fs-4xl:  3.815rem;    /* 61    display / slide titles          */
  --ik-fs-5xl:  4.768rem;    /* 76    big numbers                     */

  --ik-lh-tight: 1.12;
  --ik-lh-snug:  1.3;
  --ik-lh-body:  1.6;

  /* Spacing scale (4px base) */
  --ik-sp-1:  0.25rem;
  --ik-sp-2:  0.5rem;
  --ik-sp-3:  0.75rem;
  --ik-sp-4:  1rem;
  --ik-sp-5:  1.5rem;
  --ik-sp-6:  2rem;
  --ik-sp-7:  2.5rem;
  --ik-sp-8:  3rem;
  --ik-sp-9:  4rem;
  --ik-sp-10: 5rem;
  --ik-sp-11: 6.5rem;
  --ik-sp-12: 8rem;

  /* Radii */
  --ik-r-sm:   6px;
  --ik-r-md:   10px;
  --ik-r-lg:   16px;
  --ik-r-xl:   24px;
  --ik-r-full: 999px;

  /* Shadows — layered, cool-tinted */
  --ik-shadow-sm: 0 1px 2px rgba(14, 16, 35, 0.05),
                  0 1px 1px rgba(14, 16, 35, 0.03);
  --ik-shadow-md: 0 1px 2px rgba(14, 16, 35, 0.05),
                  0 4px 12px rgba(14, 16, 35, 0.07);
  --ik-shadow-lg: 0 2px 4px rgba(14, 16, 35, 0.04),
                  0 12px 32px rgba(30, 24, 120, 0.12);
  --ik-shadow-brand: 0 2px 6px rgba(70, 52, 224, 0.24),
                     0 8px 24px rgba(70, 52, 224, 0.18);

  /* Containers */
  --ik-container:        1120px;
  --ik-container-narrow: 760px;
  --ik-container-wide:   1280px;

  /* Focus ring */
  --ik-ring: 0 0 0 3px rgba(70, 52, 224, 0.28);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ik-font-sans);
  font-size: var(--ik-fs-base);
  line-height: var(--ik-lh-body);
  color: var(--ik-body);
  background: var(--ik-surface);
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--ik-border);
  margin: var(--ik-sp-8) 0;
}

::selection { background: var(--ik-primary-tint); color: var(--ik-primary-deep); }

:focus-visible {
  outline: none;
  box-shadow: var(--ik-ring);
  border-radius: var(--ik-r-sm);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--ik-sp-4);
  color: var(--ik-ink);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: var(--ik-lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--ik-fs-3xl); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--ik-fs-2xl); letter-spacing: -0.026em; }
h3 { font-size: var(--ik-fs-xl); }
h4 { font-size: var(--ik-fs-lg); }
h5 { font-size: var(--ik-fs-md); }
h6 {
  font-size: var(--ik-fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ik-muted);
}

p { margin: 0 0 var(--ik-sp-4); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--ik-fs-lead);
  line-height: 1.55;
  color: var(--ik-muted);
  max-width: 46em;
}

small, .small { font-size: var(--ik-fs-xs); color: var(--ik-muted); }

strong, b { font-weight: 700; color: var(--ik-ink); }

a {
  color: var(--ik-primary);
  text-decoration: none;
  font-weight: 500;
}
a:hover { color: var(--ik-primary-strong); text-decoration: underline; text-underline-offset: 3px; }

ul, ol { margin: 0 0 var(--ik-sp-4); padding-left: 1.25em; }
li { margin-bottom: var(--ik-sp-2); }
li::marker { color: var(--ik-primary); }

blockquote { margin: 0; }

code, kbd {
  font-family: var(--ik-font-mono);
  font-size: 0.88em;
  background: var(--ik-surface-2);
  border: 1px solid var(--ik-border);
  border-radius: var(--ik-r-sm);
  padding: 0.12em 0.4em;
  color: var(--ik-ink);
}

/* Eyebrow — small caps label above a heading */
.eyebrow {
  display: block;
  font-size: var(--ik-fs-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ik-primary);
  margin-bottom: var(--ik-sp-3);
}

/* Kicker — short bold intro line, sentence case */
.kicker {
  font-size: var(--ik-fs-md);
  font-weight: 600;
  color: var(--ik-ink);
  letter-spacing: -0.01em;
  margin-bottom: var(--ik-sp-3);
}

/* Gradient headline treatment */
.text-gradient {
  background: var(--ik-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Wordmark — text-based logo */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ik-ink);
  line-height: 1;
  font-size: var(--ik-fs-lg);
}
.wordmark::after {
  content: "";
  width: 0.22em;
  height: 0.22em;
  margin-left: 0.1em;
  border-radius: 2px;
  background: var(--ik-gradient);
  transform: translateY(-0.02em);
}
.wordmark--inverse { color: #FFFFFF; }
.wordmark--lg { font-size: var(--ik-fs-2xl); }

/* --------------------------------------------------------------------------
   4. LAYOUT — container / section / grid
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--ik-container);
  margin-inline: auto;
  padding-inline: var(--ik-sp-5);
}
.container--narrow { max-width: var(--ik-container-narrow); }
.container--wide   { max-width: var(--ik-container-wide); }

.section { padding-block: var(--ik-sp-10); }
.section--tight { padding-block: var(--ik-sp-8); }
.section--wash  { background: var(--ik-surface-2); }
.section--tint  { background: var(--ik-primary-ghost); }

.section-head {
  max-width: 46em;
  margin-bottom: var(--ik-sp-8);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.grid {
  display: grid;
  gap: var(--ik-sp-5);
  grid-template-columns: 1fr;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ik-sp-2);
  padding: 0.65rem 1.25rem;
  font-family: inherit;
  font-size: var(--ik-fs-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  border-radius: var(--ik-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.1s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  color: #FFFFFF;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 45%),
    var(--ik-primary);
  border-color: var(--ik-primary-strong);
  box-shadow: var(--ik-shadow-brand);
}
.btn--primary:hover { background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 45%),
    var(--ik-primary-strong);
  color: #FFFFFF;
}

.btn--ghost {
  color: var(--ik-ink);
  background: var(--ik-surface);
  border-color: var(--ik-border-strong);
  box-shadow: var(--ik-shadow-sm);
}
.btn--ghost:hover {
  border-color: var(--ik-primary);
  color: var(--ik-primary-strong);
  background: var(--ik-primary-ghost);
}

.btn--inverse {
  color: var(--ik-primary-deep);
  background: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(10, 8, 40, 0.35);
}
.btn--inverse:hover { background: var(--ik-primary-ghost); color: var(--ik-primary-deep); }

.btn--lg {
  padding: 0.95rem 1.9rem;
  font-size: var(--ik-fs-base);
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   6. PILLS / BADGES
   -------------------------------------------------------------------------- */
.pill, .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.85em;
  font-size: var(--ik-fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  border-radius: var(--ik-r-full);
  border: 1px solid var(--ik-border);
  background: var(--ik-surface);
  color: var(--ik-muted);
  white-space: nowrap;
}
.pill--brand, .badge--brand {
  background: var(--ik-primary-tint);
  border-color: rgba(70, 52, 224, 0.25);
  color: var(--ik-primary-strong);
}
.pill--accent, .badge--accent {
  background: var(--ik-accent-tint);
  border-color: rgba(180, 83, 9, 0.28);
  color: var(--ik-accent);
}
.pill--success, .badge--success {
  background: var(--ik-success-tint);
  border-color: rgba(14, 127, 91, 0.28);
  color: var(--ik-success);
}
.pill--dot::before, .badge--dot::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   7. CARDS / FEATURES
   -------------------------------------------------------------------------- */
.card {
  background: var(--ik-surface);
  border: 1px solid var(--ik-border);
  border-radius: var(--ik-r-lg);
  padding: var(--ik-sp-6);
  box-shadow: var(--ik-shadow-sm);
  break-inside: avoid;
}
.card--raised { box-shadow: var(--ik-shadow-md); }
.card--wash   { background: var(--ik-surface-2); box-shadow: none; }
.card--brand  {
  background: var(--ik-gradient-deep);
  border-color: var(--ik-primary-deep);
  color: rgba(255, 255, 255, 0.85);
}
.card--brand h3, .card--brand h4, .card--brand h5, .card--brand strong { color: #FFFFFF; }
.card--brand .eyebrow { color: #B9AEFF; }

.card > h3:first-child, .card > h4:first-child, .card > h5:first-child { margin-top: 0; }

.feature { display: flex; flex-direction: column; gap: var(--ik-sp-3); }
.feature__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--ik-primary);
  background: var(--ik-primary-tint);
  border: 1px solid rgba(70, 52, 224, 0.18);
  border-radius: var(--ik-r-md);
}
.feature h4, .feature h5 { margin-bottom: 0; }
.feature p { color: var(--ik-muted); font-size: var(--ik-fs-sm); line-height: 1.6; }

/* Checklist — brand check markers */
.checklist { list-style: none; padding-left: 0; }
.checklist li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: var(--ik-sp-3);
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.2em;
  height: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: 800;
  color: var(--ik-success);
  background: var(--ik-success-tint);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   8. STATS
   -------------------------------------------------------------------------- */
.stat { break-inside: avoid; }
.stat__value {
  font-size: var(--ik-fs-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ik-ink);
  font-variant-numeric: tabular-nums;
}
.stat__value--brand { color: var(--ik-primary); }
.stat__value--accent { color: var(--ik-accent); }
.stat__label {
  margin-top: var(--ik-sp-2);
  font-size: var(--ik-fs-sm);
  color: var(--ik-muted);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   9. PRICING
   -------------------------------------------------------------------------- */
.pricing {
  display: grid;
  gap: var(--ik-sp-5);
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
.pricing__tier {
  display: flex;
  flex-direction: column;
  background: var(--ik-surface);
  border: 1px solid var(--ik-border);
  border-radius: var(--ik-r-lg);
  padding: var(--ik-sp-6);
  box-shadow: var(--ik-shadow-sm);
  break-inside: avoid;
}
.pricing__tier--featured {
  border-color: var(--ik-primary);
  box-shadow: var(--ik-shadow-lg);
  position: relative;
}
.pricing__flag {
  position: absolute;
  top: calc(-1 * var(--ik-sp-3));
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25em 1em;
  font-size: var(--ik-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--ik-gradient);
  border-radius: var(--ik-r-full);
  box-shadow: var(--ik-shadow-brand);
  white-space: nowrap;
}
.pricing__name {
  font-size: var(--ik-fs-md);
  font-weight: 700;
  color: var(--ik-ink);
  margin-bottom: var(--ik-sp-1);
}
.pricing__desc { font-size: var(--ik-fs-sm); color: var(--ik-muted); min-height: 2.6em; }
.pricing__price {
  margin: var(--ik-sp-4) 0 var(--ik-sp-1);
  font-size: var(--ik-fs-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ik-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pricing__price small {
  font-size: var(--ik-fs-sm);
  font-weight: 500;
  color: var(--ik-muted);
  letter-spacing: 0;
}
.pricing__meta { font-size: var(--ik-fs-xs); color: var(--ik-muted); margin-bottom: var(--ik-sp-4); }
.pricing__tier .checklist { flex: 1; font-size: var(--ik-fs-sm); }
.pricing__tier .btn { width: 100%; margin-top: var(--ik-sp-4); }

/* --------------------------------------------------------------------------
   10. QUOTE / TESTIMONIAL
   -------------------------------------------------------------------------- */
.quote {
  position: relative;
  background: var(--ik-surface);
  border: 1px solid var(--ik-border);
  border-radius: var(--ik-r-lg);
  padding: var(--ik-sp-6) var(--ik-sp-6) var(--ik-sp-5);
  box-shadow: var(--ik-shadow-sm);
  break-inside: avoid;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: 0.1em;
  left: 0.35em;
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ik-primary-tint);
  pointer-events: none;
}
.quote__text {
  position: relative;
  font-size: var(--ik-fs-md);
  line-height: 1.5;
  color: var(--ik-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--ik-sp-4);
}
.quote__author {
  display: flex;
  align-items: center;
  gap: var(--ik-sp-3);
  font-size: var(--ik-fs-sm);
}
.quote__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ik-gradient);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: none;
}
.quote__name { font-weight: 700; color: var(--ik-ink); }
.quote__role { color: var(--ik-muted); }

/* --------------------------------------------------------------------------
   11. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ik-gradient-soft);
  border-bottom: 1px solid var(--ik-border);
  padding-block: var(--ik-sp-11) var(--ik-sp-10);
}
.hero::before {
  /* soft brand glow, top-right */
  content: "";
  position: absolute;
  top: -240px;
  right: -160px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(123, 92, 255, 0.16), rgba(123, 92, 255, 0));
  pointer-events: none;
}
.hero::after {
  /* second glow, bottom-left */
  content: "";
  position: absolute;
  bottom: -300px;
  left: -200px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(70, 52, 224, 0.1), rgba(70, 52, 224, 0));
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero__title {
  font-size: clamp(2.2rem, 5.4vw, var(--ik-fs-4xl));
  max-width: 15em;
  margin-bottom: var(--ik-sp-5);
}
.hero__sub {
  font-size: var(--ik-fs-lead);
  color: var(--ik-muted);
  max-width: 38em;
  margin-bottom: var(--ik-sp-6);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ik-sp-3);
  align-items: center;
}
.hero__note { margin-top: var(--ik-sp-4); font-size: var(--ik-fs-xs); color: var(--ik-muted); }
.hero--center { text-align: center; }
.hero--center .hero__title, .hero--center .hero__sub { margin-inline: auto; }
.hero--center .hero__actions { justify-content: center; }

/* --------------------------------------------------------------------------
   12. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ik-gradient-deep);
  border-radius: var(--ik-r-xl);
  padding: var(--ik-sp-9) var(--ik-sp-8);
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  break-inside: avoid;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(123, 92, 255, 0.35), rgba(123, 92, 255, 0));
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2, .cta-band h3 { color: #FFFFFF; }
.cta-band p { max-width: 40em; margin-inline: auto; }
.cta-band .hero__actions { justify-content: center; margin-top: var(--ik-sp-6); }
.cta-band--flush { border-radius: 0; }

/* --------------------------------------------------------------------------
   13. SITE HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--ik-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--ik-sp-6);
  min-height: 64px;
}
.site-header .wordmark { font-size: var(--ik-fs-md); }
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--ik-sp-5);
  margin-left: auto;
}
.site-nav a {
  font-size: var(--ik-fs-sm);
  font-weight: 500;
  color: var(--ik-body);
}
.site-nav a:hover { color: var(--ik-primary); text-decoration: none; }
.site-nav a.is-active { color: var(--ik-primary); font-weight: 600; }
/* Buttons inside nav keep their own colors (specificity guard) */
.site-nav a.btn--primary, .site-nav a.btn--primary:hover { color: #FFFFFF; }
.site-nav a.btn--ghost { color: var(--ik-ink); }
.site-nav a.btn--ghost:hover { color: var(--ik-primary-strong); }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ik-ink);
  color: rgba(255, 255, 255, 0.66);
  padding-block: var(--ik-sp-9) var(--ik-sp-6);
  font-size: var(--ik-fs-sm);
}
.footer a { color: rgba(255, 255, 255, 0.82); font-weight: 500; }
.footer a:hover { color: #FFFFFF; }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--ik-sp-6);
  margin-bottom: var(--ik-sp-8);
}
.footer__col h6 { color: rgba(255, 255, 255, 0.45); margin-bottom: var(--ik-sp-4); }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: var(--ik-sp-3); }
.footer__tagline { max-width: 24em; margin-top: var(--ik-sp-3); }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ik-sp-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--ik-sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--ik-fs-xs);
  color: rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------------
   15. DECK — 16:9 slide layer (1280 x 720 logical)
   -------------------------------------------------------------------------- */
.deck {
  background: #23253A; /* screen-only backdrop between slides */
  padding: var(--ik-sp-6) 0;
}

.slide {
  position: relative;
  width: 1280px;
  height: 720px;
  margin: 0 auto var(--ik-sp-6);
  background: var(--ik-surface);
  color: var(--ik-body);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 64px 80px;
  box-shadow: var(--ik-shadow-lg);
  page: deck;
  page-break-after: always;
  break-after: page;
  break-inside: avoid;
}
.deck .slide:last-child { page-break-after: auto; break-after: auto; }

/* Slide chrome */
.slide__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  flex: none;
}
.slide__header .wordmark { font-size: 22px; }
.slide__header .pill { font-size: 13px; }

.slide__body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }

.slide__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  flex: none;
  font-size: 13px;
  color: var(--ik-muted);
  letter-spacing: 0.02em;
}
.slide__footer .slide__num { font-variant-numeric: tabular-nums; }

/* Slide accent rule — thin gradient bar at top edge */
.slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--ik-gradient);
}

/* Title slide */
.slide--title {
  background: var(--ik-gradient-deep);
  color: rgba(255, 255, 255, 0.82);
  justify-content: center;
}
.slide--title::before { background: var(--ik-accent-bright); }
.slide--title::after {
  content: "";
  position: absolute;
  top: -260px;
  right: -180px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(123, 92, 255, 0.4), rgba(123, 92, 255, 0));
  pointer-events: none;
}
.slide--title .slide__body { position: relative; z-index: 1; justify-content: center; }
.slide--title .slide__footer { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.5); }
.slide--title h1 {
  color: #FFFFFF;
  font-size: 64px;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin-bottom: 24px;
}
.slide--title .slide__subtitle {
  font-size: 24px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  max-width: 40ch;
}
.slide--title .wordmark { color: #FFFFFF; }

/* Section divider slide */
.slide--section {
  background: var(--ik-primary-ghost);
  justify-content: center;
}
.slide--section .slide__body { justify-content: center; }
.slide--section h2 {
  font-size: 56px;
  max-width: 20ch;
  margin-bottom: 16px;
}
.slide--section .slide__subtitle {
  font-size: 22px;
  color: var(--ik-muted);
  max-width: 48ch;
}
.slide--section .eyebrow { font-size: 15px; }

/* Content slide */
.slide--content .slide__title {
  font-size: 40px;
  letter-spacing: -0.026em;
  margin-bottom: 8px;
}
.slide--content .slide__subtitle {
  font-size: 19px;
  color: var(--ik-muted);
  margin-bottom: 36px;
}
.slide--content .slide__body { justify-content: flex-start; }

/* Closing slide */
.slide--closing {
  background: var(--ik-gradient-deep);
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}
.slide--closing::before { background: var(--ik-accent-bright); }
.slide--closing .slide__body { align-items: center; justify-content: center; }
.slide--closing h2 { color: #FFFFFF; font-size: 52px; max-width: 22ch; margin-bottom: 20px; }
.slide--closing .slide__subtitle { font-size: 22px; color: rgba(255, 255, 255, 0.72); max-width: 44ch; margin-bottom: 36px; }
.slide--closing .slide__footer { color: rgba(255, 255, 255, 0.5); }

/* Big number */
.big-number {
  font-size: 128px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--ik-primary);
  font-variant-numeric: tabular-nums;
}
.big-number--accent { color: var(--ik-accent-bright); }
.big-number__label {
  margin-top: 12px;
  font-size: 20px;
  color: var(--ik-muted);
  max-width: 22ch;
  line-height: 1.4;
}

/* Slide bullets */
.slide-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 22px;
  line-height: 1.45;
}
.slide-bullets li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 24px;
  color: var(--ik-ink);
}
.slide-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 20px;
  height: 6px;
  border-radius: 3px;
  background: var(--ik-gradient);
}
.slide-bullets li strong { color: var(--ik-ink); }
.slide-bullets .sub {
  display: block;
  font-size: 17px;
  color: var(--ik-muted);
  margin-top: 4px;
}

/* Two-column slide layout */
.slide-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  flex: 1;
  min-height: 0;
}

/* Stat row inside slides */
.slide-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.slide-stats .stat__value { font-size: 56px; }
.slide-stats .stat__label { font-size: 16px; }

/* --------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-muted  { color: var(--ik-muted); }
.text-brand  { color: var(--ik-primary); }
.text-accent { color: var(--ik-accent); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--ik-sp-4); }
.mt-6 { margin-top: var(--ik-sp-6); }
.mb-4 { margin-bottom: var(--ik-sp-4); }
.mb-6 { margin-bottom: var(--ik-sp-6); }
.avoid-break { break-inside: avoid; page-break-inside: avoid; }

/* --------------------------------------------------------------------------
   17. PRINT
   -------------------------------------------------------------------------- */
/* Documents default to A4 portrait */
@page {
  size: A4;
  margin: 18mm 16mm;
}
/* Deck slides print on their own landscape 16:9 pages (1280x720 @ 96dpi) */
@page deck {
  size: 13.333in 7.5in;
  margin: 0;
}

@media print {
  html, body { background: #FFFFFF; }

  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .site-header { position: static; background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Gradient text -> solid brand color in PDF (background-clip:text is unreliable in print) */
  .text-gradient {
    background: none;
    color: var(--ik-primary);
    -webkit-text-fill-color: var(--ik-primary);
  }

  a { color: var(--ik-primary); }

  .card, .quote, .pricing__tier, .stat, .cta-band { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }

  /* Deck: strip screen chrome, one slide per page at exact size */
  .deck { background: none; padding: 0; }
  .slide {
    margin: 0;
    box-shadow: none;
    width: 13.333in;
    height: 7.5in;
  }
}

/* --------------------------------------------------------------------------
   18. RESPONSIVE (mobile-first down to 360px)
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  /* Deck slides keep their fixed 1280x720 design on screen; the deck scrolls
     horizontally on narrow screens so content is never clipped (the fixed layout
     is built for that size). PDF export is unaffected. */
  .deck { overflow-x: auto; }
  .slide { margin-inline: 0; }
}

@media (max-width: 700px) {
  :root {
    --ik-fs-3xl: 2.3rem;
    --ik-fs-2xl: 1.9rem;
    --ik-fs-xl: 1.55rem;
  }
  .section { padding-block: var(--ik-sp-9); }
  .hero { padding-block: var(--ik-sp-9) var(--ik-sp-8); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .site-nav { display: none; } /* JS-free: nav hidden on small screens; header keeps wordmark + CTA */
  .site-nav--persist { display: flex; }
  .cta-band { padding: var(--ik-sp-8) var(--ik-sp-5); border-radius: var(--ik-r-lg); }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .slide { padding: 6vw; }
  .slide--title h1 { font-size: 8vw; }
  .slide--content .slide__title { font-size: 5.5vw; }
  .slide-cols { grid-template-columns: 1fr; gap: 5vw; }
  .slide-bullets { font-size: 4vw; }
  .big-number { font-size: 14vw; }
}