/* ==========================================================================
   Forte marketing site — v2 "Editorial / Midnight Garnet"
   --------------------------------------------------------------------------
   A confident editorial marketing site with:
   - tri-mode theming (system / light / dark) via data-theme attribute
   - film-grain overlay for premium feel
   - animated mesh-gradient hero
   - sticky-rail scroll narrative
   - custom SVG illustrations (inline in templates)
   Fonts: Fraunces (display serif) + Inter (body) + JetBrains Mono (accents).
   ========================================================================== */

/* ---- Tokens / color system ---- */
:root {
  /* Brand core */
  --aub:          #2B1B3D;
  --aub-deep:     #1D1229;
  --aub-soft:     #F0EAF5;
  --aub-ink:      #3F2853;   /* mid stop for gradients */
  --accent:       #F5A524;
  --accent-deep:  #C27E14;
  --accent-soft:  #FBEFD7;
  --plum:         #7C5BA0;
  --success:      #3F7D58;
  --success-soft: #E4F0E9;
  --danger:       #B5383A;
  --danger-soft:  #F8E4E4;

  /* Surface / ink (light defaults) */
  --bg:         #FAF6EF;
  --surface:    #FFFFFF;
  --surface-2:  #F5EFE4;
  --ink:        #1A1423;
  --ink-2:      #3A2F48;
  --mute:       #5C5464;
  --line:       #E8E0D4;
  --line-strong:#D3C9B8;

  /* Elevation */
  --shadow-sm:  0 1px 2px rgba(43,27,61,.06);
  --shadow:     0 12px 36px -14px rgba(43,27,61,.22),
                0 2px 6px rgba(43,27,61,.05);
  --shadow-lg:  0 40px 80px -28px rgba(43,27,61,.34),
                0 6px 16px rgba(43,27,61,.08);

  /* Rhythm */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius:    20px;
  --radius-lg: 32px;
  --radius-xl: 48px;

  /* Motion */
  --ease:       cubic-bezier(.2,.7,.2,1);
  --ease-out:   cubic-bezier(0, .55, .45, 1);
  --dur-fast:   .16s;
  --dur:        .32s;
  --dur-slow:   .68s;

  /* Type scale */
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Dark theme — explicit */
[data-theme="dark"] {
  --bg:         #0E0816;
  --surface:    #150F20;
  --surface-2:  #1C1530;
  --ink:        #F5ECE0;
  --ink-2:      #D9CBE6;
  --mute:       #9A8FAB;
  --line:       #2A2041;
  --line-strong:#3E2F5A;
  --aub:        #F0EAF5;
  --aub-deep:   #FFFFFF;
  --aub-soft:   #251A3A;
  --aub-ink:    #C9B8E0;
  --accent-soft:#3E2E11;
  --success-soft:#1F3A2A;
  --danger-soft:#3A1F20;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --shadow:     0 12px 36px -14px rgba(0,0,0,.7),
                0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:  0 40px 80px -28px rgba(0,0,0,.8);
}

/* System (auto) — fall back to dark if user prefers it */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #0E0816;
    --surface:    #150F20;
    --surface-2:  #1C1530;
    --ink:        #F5ECE0;
    --ink-2:      #D9CBE6;
    --mute:       #9A8FAB;
    --line:       #2A2041;
    --line-strong:#3E2F5A;
    --aub:        #F0EAF5;
    --aub-deep:   #FFFFFF;
    --aub-soft:   #251A3A;
    --aub-ink:    #C9B8E0;
    --accent-soft:#3E2E11;
    --success-soft:#1F3A2A;
    --danger-soft:#3A1F20;
    --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
    --shadow:     0 12px 36px -14px rgba(0,0,0,.7),
                  0 2px 6px rgba(0,0,0,.3);
    --shadow-lg:  0 40px 80px -28px rgba(0,0,0,.8);
  }
}

/* View transitions — smooth navigation where supported */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .28s;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p  { margin: 0 0 1em; }
::selection { background: var(--accent); color: var(--aub); }

/* Hide the grain behind everything else */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
  background-size: 220px 220px;
}
[data-theme="dark"] .grain,
:root:not([data-theme="light"]) .grain {
  /* subtle */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .grain { opacity: .08; mix-blend-mode: screen; }
}
[data-theme="dark"] .grain { opacity: .08; mix-blend-mode: screen; }

.skip-link {
  position: absolute; left: -9999px; top: 12px;
  background: var(--aub); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-weight: 600; z-index: 1000;
}
.skip-link:focus { left: 12px; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
.container-narrow { max-width: 960px; }
.container-wide   { max-width: 1400px; }

/* ---- Type ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 580;
  color: var(--ink);
  margin: 0 0 .4em;
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-feature-settings: "ss01", "ss02";
}
h1 {
  font-size: clamp(2.8rem, 7.5vw, 6rem);
  font-weight: 540;
  letter-spacing: -0.045em;
  line-height: 1.0;
}
h2 { font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -0.032em; }
h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; }
h4 { font-size: 1rem;    font-weight: 600; letter-spacing: 0; }

.display-serif em,
.display-serif .italic {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 440;
  color: var(--aub);
}
[data-theme="dark"] .display-serif em,
[data-theme="dark"] .display-serif .italic {
  color: var(--aub-ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .display-serif em,
  :root:not([data-theme="light"]) .display-serif .italic {
    color: var(--aub-ink);
  }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: .16em;
  margin: 0 0 20px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eyebrow { color: var(--accent); } }
[data-theme="dark"] .eyebrow { color: var(--accent); }
.eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: currentColor;
  flex: 0 0 28px;
}

.lead {
  font-size: clamp(1.1rem, 1.25vw, 1.25rem);
  line-height: 1.55;
  color: var(--mute);
  max-width: 60ch;
  font-weight: 420;
}

.mono {
  font-family: var(--font-mono);
  font-size: .88em;
  letter-spacing: -0.01em;
}

/* ---- Buttons ---- */
.btn {
  --bg: var(--aub);
  --fg: #FFF;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bg);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast);
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--font-body);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn-primary { --bg: var(--aub); --fg: #FFF; }
.btn-primary:hover { background: var(--aub-deep); }
[data-theme="dark"] .btn-primary,
:root:not([data-theme="light"]) .btn-primary {
  --bg: var(--aub); --fg: #1A1423;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary {
    --bg: var(--aub); --fg: #1A1423;
  }
}

.btn-accent  { --bg: var(--accent); --fg: var(--aub); }
.btn-accent:hover { background: var(--accent-deep); color: #fff; }

.btn-ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--aub); }

.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-lg { padding: 18px 30px; font-size: 16px; }
.btn-block { width: 100%; }

.btn-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast);
}
.btn-arrow::after {
  content: "→"; transition: transform var(--dur-fast) var(--ease);
}
.btn-arrow:hover { border-bottom-color: currentColor; }
.btn-arrow:hover::after { transform: translateX(4px); }

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(1.6) blur(22px);
  -webkit-backdrop-filter: saturate(1.6) blur(22px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.nav.scrolled { border-color: var(--line); }
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; gap: 28px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700;
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--aub) 0%, var(--plum) 55%, var(--accent) 100%);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,.14);
  display: grid; place-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.brand-mark::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.3), transparent 60%);
  pointer-events: none;
}
.brand-f {
  font-family: var(--font-display);
  font-style: italic; font-weight: 700;
  font-size: 23px; line-height: 1; letter-spacing: -0.02em;
  transform: translateY(-1px);
  position: relative;
  z-index: 1;
}
.brand-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.022em;
}
.brand-lg .brand-mark { width: 44px; height: 44px; border-radius: 13px; }
.brand-lg .brand-f    { font-size: 28px; }
.brand-lg .brand-word { font-size: 27px; }

.nav-links {
  display: flex; align-items: center; gap: 28px;
  margin-left: auto;
  font-size: 15px;
}
.nav-links a { color: var(--mute); font-weight: 500; transition: color var(--dur-fast); position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -22px; height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}
.nav-cta { margin-left: 4px; display: flex; align-items: center; gap: 10px; }

/* Theme toggle */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.theme-toggle:hover { background: var(--surface-2); border-color: var(--aub); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-light,
.theme-toggle .icon-dark,
.theme-toggle .icon-auto { display: none; }
:root:not([data-theme]) .theme-toggle .icon-auto,
[data-theme="auto"] .theme-toggle .icon-auto { display: block; }
[data-theme="light"] .theme-toggle .icon-light { display: block; }
[data-theme="dark"]  .theme-toggle .icon-dark  { display: block; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 0; padding: 8px; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--ink);
  border-radius: 2px; margin: 4px 0; transition: transform .2s, opacity .2s;
}
.nav-mobile {
  display: none;
  padding: 12px 28px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.nav-mobile a {
  display: block; padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink); font-weight: 500;
}
.nav-mobile .btn { margin-top: 16px; }

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .nav-mobile.open { display: block; }
}

/* ---- Reading progress (blog) ---- */
.read-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--aub), var(--accent));
  z-index: 60;
  transition: width .08s linear;
  pointer-events: none;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: clamp(70px, 11vw, 140px) 0 clamp(48px, 8vw, 120px);
  overflow: hidden;
  isolation: isolate;
}
.hero-mesh {
  position: absolute; inset: -20% -10% -10% -10%;
  z-index: -1;
  pointer-events: none;
  filter: blur(80px);
  animation: meshDrift 30s ease-in-out infinite alternate;
}
.hero-mesh::before,
.hero-mesh::after,
.hero-mesh .blob-3 {
  content: ""; position: absolute; border-radius: 50%;
}
.hero-mesh::before {
  width: 720px; height: 720px;
  top: -120px; left: -140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 52%, transparent) 0%, transparent 60%);
}
.hero-mesh::after {
  width: 640px; height: 640px;
  top: 80px; right: -80px;
  background: radial-gradient(circle, color-mix(in srgb, var(--aub) 42%, transparent) 0%, transparent 60%);
}
.hero-mesh .blob-3 {
  width: 460px; height: 460px;
  bottom: -120px; left: 40%;
  background: radial-gradient(circle, color-mix(in srgb, var(--plum) 36%, transparent) 0%, transparent 60%);
}
[data-theme="dark"] .hero-mesh,
:root:not([data-theme="light"]) .hero-mesh { opacity: .55; }

@keyframes meshDrift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-2%, 1%) rotate(.4deg); }
  100% { transform: translate(2%, -1%) rotate(-.4deg); }
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px;
  align-items: center;
}
.hero-copy h1 { margin-bottom: 28px; }
.hero-copy .lead { margin-bottom: 36px; font-size: clamp(1.15rem, 1.3vw, 1.3rem); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

.hero-trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 560px;
}
.hero-trust-item .n {
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
  font-feature-settings: "tnum", "lnum";
}
.hero-trust-item .label {
  font-size: 12.5px; color: var(--mute);
  line-height: 1.3;
}

/* Visual: stacked phone + floating cards */
.hero-visual { position: relative; perspective: 1200px; }

.hero-phone {
  width: 100%; max-width: 340px;
  aspect-ratio: 9 / 19.5;
  margin: 0 auto;
  background: linear-gradient(145deg, #15101f, #2a2138);
  border-radius: 52px;
  padding: 10px;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.06);
  position: relative;
  transform: rotate(-4deg) rotateY(-8deg);
  transition: transform var(--dur-slow) var(--ease);
  will-change: transform;
}
.hero-phone:hover { transform: rotate(-2deg) rotateY(-4deg) translateY(-8px); }

.phone-screen {
  position: relative;
  height: 100%; border-radius: 42px;
  background: var(--bg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.phone-notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px; border-radius: 16px;
  background: #0a0714;
  z-index: 5;
}
.phone-statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 28px 0;
  font-size: 13px; font-weight: 600; color: var(--ink);
  position: relative; z-index: 6;
}
.phone-content {
  padding: 48px 18px 20px;
  overflow: hidden;
  flex: 1;
}
.phone-h {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: var(--ink);
}
.phone-sub {
  font-size: 11.5px; color: var(--mute); margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.phone-sub .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--success) 70%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}

.job-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 13px;
  margin-bottom: 9px;
  display: flex; gap: 11px; align-items: flex-start;
  box-shadow: var(--shadow-sm);
}
.job-score {
  flex: 0 0 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700;
  color: #fff;
  font-feature-settings: "tnum";
}
.job-score.s-strong { background: var(--success); }
.job-score.s-worth  { background: var(--accent); color: var(--aub); }
.job-score.s-skip   { background: #5C5464; }
.job-body { flex: 1; min-width: 0; }
.job-title { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 2px; letter-spacing: -0.005em; }
.job-meta  { font-size: 10.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-chip  {
  display: inline-block;
  font-size: 9.5px; font-weight: 600; padding: 2px 7px;
  border-radius: 999px;
  margin-top: 6px;
}
.job-chip.strong { background: var(--success-soft); color: var(--success); }
.job-chip.worth  { background: var(--accent-soft); color: var(--accent-deep); }
.job-chip.skip   { background: var(--aub-soft); color: var(--mute); }

/* Floating cards */
.hero-float {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  transition: transform var(--dur-slow) var(--ease);
}
.hero-float.float-a {
  top: 14%; right: -6%;
  display: flex; align-items: center; gap: 12px;
  animation: floatY 6s ease-in-out infinite;
}
.hero-float.float-b {
  bottom: 12%; left: -8%;
  max-width: 220px;
  animation: floatY 7s ease-in-out infinite -2s;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hero-float .mini-ring {
  width: 48px; height: 48px; border-radius: 50%;
  background: conic-gradient(var(--success) 0 88%, var(--line) 88% 100%);
  display: grid; place-items: center;
  position: relative;
}
.hero-float .mini-ring::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: var(--surface);
}
.hero-float .mini-ring span {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700;
  color: var(--success);
  z-index: 1;
  font-feature-settings: "tnum";
}
.hero-float .float-kicker {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute); font-weight: 700;
  margin-bottom: 4px;
}
.hero-float strong { color: var(--ink); font-weight: 600; }

.hero-float.float-b .flag-row {
  display: flex; align-items: center; gap: 8px;
  color: var(--danger);
  font-weight: 600;
  margin-top: 8px;
}
.hero-float .flag-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  flex: 0 0 8px;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-visual { order: -1; max-width: 380px; margin: 0 auto; }
  .hero-float.float-a { right: -4%; }
  .hero-float.float-b { left: -4%; }
  .hero-trust { max-width: none; }
}
@media (max-width: 560px) {
  .hero-trust { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hero-trust-item:nth-child(3) { grid-column: span 2; }
}

/* ==========================================================================
   SOURCES STRIP
   ========================================================================== */
.sources-strip {
  padding: clamp(44px, 6vw, 72px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.sources-strip .label {
  text-align: center;
  font-size: 12.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 28px;
}
.sources-list {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  gap: 28px;
}
.sources-list .src {
  display: grid; place-items: center;
  color: var(--ink-2);
  opacity: .7;
  transition: opacity var(--dur-fast);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 14.5px;
  text-align: center;
}
.sources-list .src:hover { opacity: 1; }
.sources-list .src svg { height: 22px; width: auto; fill: currentColor; }

@media (max-width: 900px) { .sources-list { grid-template-columns: repeat(4, 1fr); gap: 24px 32px; } }
@media (max-width: 500px) { .sources-list { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.stats-band {
  padding: clamp(70px, 9vw, 120px) 0;
  background: var(--bg);
}
.stats-head {
  max-width: 760px; margin: 0 auto 64px; text-align: center;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line);
}
.stat-cell {
  padding: 36px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.stat-cell:nth-child(4n) { border-right: 0; }
.stat-cell .num {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 4.5vw, 4rem);
  font-weight: 540;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 12px;
  font-feature-settings: "tnum", "lnum";
}
.stat-cell .num .accent-ink { color: var(--accent-deep); font-style: italic; font-weight: 440; }
[data-theme="dark"] .stat-cell .num .accent-ink,
:root:not([data-theme="light"]) .stat-cell .num .accent-ink { color: var(--accent); }
.stat-cell .label {
  color: var(--mute);
  font-size: 14px;
  line-height: 1.4;
  max-width: 26ch;
}
@media (max-width: 820px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2n) { border-right: 0; }
}
@media (max-width: 460px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-cell { border-right: 0 !important; }
}

/* ==========================================================================
   GENERIC SECTION
   ========================================================================== */
section.band { padding: clamp(80px, 11vw, 140px) 0; }
section.band.alt { background: var(--surface); }
section.band.dark {
  background: linear-gradient(180deg, var(--aub) 0%, #3F2853 100%);
  color: #fff;
}
section.band.dark h2,
section.band.dark h3 { color: #fff; }
section.band.dark .lead,
section.band.dark p { color: #D8CBEF; }

.section-head {
  max-width: 780px;
  margin: 0 auto clamp(52px, 7vw, 88px);
}
.section-head.center { text-align: center; }
.section-head.center .lead,
.section-head.center .eyebrow { margin-left: auto; margin-right: auto; }
.section-head.center .eyebrow { justify-content: center; }
.section-head .lead { margin: 20px 0 0; }

/* ==========================================================================
   PROBLEM STRIP
   ========================================================================== */
.problem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.problem-card {
  padding: 36px 32px 36px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.problem-card .num {
  font-family: var(--font-display);
  font-size: 2.3rem; font-weight: 540; font-style: italic;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 18px;
}
.problem-card h3 { margin-bottom: 12px; }
.problem-card p { color: var(--mute); margin: 0; font-size: 15px; line-height: 1.55; }

@media (max-width: 820px) { .problem-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   PRODUCT SHOWCASE — sticky rail + scenes
   ========================================================================== */
.showcase-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  align-items: start;
}
.showcase-rail {
  position: sticky; top: 120px;
  align-self: start;
  display: flex; flex-direction: column; gap: 10px;
}
.showcase-rail-item {
  padding: 14px 18px;
  border-left: 2px solid var(--line);
  color: var(--mute);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.showcase-rail-item:hover { color: var(--ink); }
.showcase-rail-item.active {
  color: var(--ink);
  border-left-color: var(--accent);
  font-weight: 600;
}
.showcase-rail-item .n {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--mute);
  display: block;
  margin-bottom: 3px;
}

.showcase-scenes { display: grid; gap: clamp(80px, 10vw, 140px); }
.scene { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.scene.reverse { direction: rtl; }
.scene.reverse > * { direction: ltr; }
.scene-copy .eyebrow { margin-bottom: 16px; }
.scene-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 20px; }
.scene-copy p { color: var(--mute); font-size: 17px; line-height: 1.6; max-width: 48ch; }
.scene-copy ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.scene-copy li {
  padding-left: 22px;
  position: relative;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.scene-copy li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 10px; height: 2px; background: var(--accent);
}
.scene-visual {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow);
  min-height: 340px;
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
}
.scene-visual::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at top left, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--aub) 8%, transparent), transparent 60%);
  pointer-events: none;
}
.scene-visual > * { position: relative; z-index: 1; }

@media (max-width: 960px) {
  .showcase-wrap { grid-template-columns: 1fr; gap: 40px; }
  .showcase-rail { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .showcase-rail-item { border-left: 0; border-bottom: 2px solid var(--line); flex: 0 0 auto; }
  .showcase-rail-item.active { border-left: 0; border-bottom-color: var(--accent); }
  .scene { grid-template-columns: 1fr; gap: 32px; }
  .scene.reverse { direction: ltr; }
  .scene-visual { order: -1; }
}

/* ==========================================================================
   FEATURES BENTO
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.bento-card {
  grid-column: span 3;
  padding: 38px 34px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex; flex-direction: column; gap: 20px;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.bento-card.size-lg { grid-column: span 4; min-height: 380px; }
.bento-card.size-md { grid-column: span 2; min-height: 300px; }
.bento-card.size-sm { grid-column: span 2; min-height: 240px; }
.bento-card.size-xl { grid-column: span 6; min-height: 320px; }

.bento-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
[data-theme="dark"] .bento-kicker,
:root:not([data-theme="light"]) .bento-kicker { color: var(--accent); }

.bento-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.bento-card p { color: var(--mute); margin: 0; font-size: 15px; line-height: 1.55; }
.bento-card .visual { margin-top: auto; }

/* Score visual */
.v-score { display: flex; align-items: center; gap: 18px; }
.score-ring {
  width: 108px; height: 108px;
  border-radius: 50%;
  background: conic-gradient(var(--success) 0 82%, var(--line) 82% 100%);
  display: grid; place-items: center;
  position: relative;
  flex: 0 0 108px;
}
.score-ring::before {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: var(--surface);
}
.score-ring span {
  position: relative;
  font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  color: var(--success);
  font-feature-settings: "tnum";
}
.score-list { display: grid; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.score-list .row { display: flex; align-items: center; gap: 9px; }
.score-list .row::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--success);
  flex: 0 0 10px;
}
.score-list .row.gap::before  { background: var(--accent); }
.score-list .row.flag::before { background: var(--danger); }

/* Resume diff visual */
.v-resume {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  font-size: 12.5px;
  font-family: var(--font-mono);
  box-shadow: var(--shadow-sm);
  color: var(--ink-2);
  line-height: 1.6;
}
.v-resume .line { display: flex; gap: 10px; padding: 2px 0; }
.v-resume .line .marker { color: var(--mute); flex: 0 0 14px; font-weight: 700; }
.v-resume .line.add    { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); margin: 0 -16px; padding: 2px 16px; }
.v-resume .line.del    { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); margin: 0 -16px; padding: 2px 16px; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.v-resume .line.add .marker { color: var(--success); }
.v-resume .line.del .marker { color: var(--danger); }

/* Cover letter visual */
.v-letter {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  font-family: var(--font-display);
  font-size: 13.5px; line-height: 1.65;
  color: var(--ink-2);
  font-weight: 420;
}
.v-letter b { color: var(--ink); font-weight: 600; }
.v-letter .sig {
  margin-top: 14px;
  font-style: italic;
  color: var(--accent-deep);
  font-size: 15px;
}

/* Sources visual */
.v-sources { display: flex; flex-wrap: wrap; gap: 8px; }
.source-pill {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--aub-soft);
  color: var(--aub);
  font-weight: 600; font-size: 13px;
  font-family: var(--font-body);
}
[data-theme="dark"] .source-pill,
:root:not([data-theme="light"]) .source-pill { color: var(--aub-ink); }

/* Tests visual */
.v-tests { display: grid; gap: 8px; }
.test-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-2);
}
.test-lvl {
  font-weight: 700; padding: 3px 10px; border-radius: 6px; font-size: 10.5px;
  background: var(--success); color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.test-lvl.mid { background: var(--accent); color: var(--aub); }

/* Privacy visual */
.v-privacy {
  display: flex; align-items: center; gap: 16px;
  padding: 20px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--aub), #3F2853);
  color: #fff;
}
.v-privacy svg { flex: 0 0 48px; width: 48px; height: 48px; color: var(--accent); }
.v-privacy strong { display: block; font-size: 1.1rem; font-family: var(--font-display); margin-bottom: 3px; }
.v-privacy span { color: #D8CBEF; font-size: 13px; line-height: 1.4; }

@media (max-width: 920px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card, .bento-card.size-lg, .bento-card.size-md,
  .bento-card.size-sm, .bento-card.size-xl {
    grid-column: span 2; min-height: 0;
  }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card, .bento-card.size-lg, .bento-card.size-md,
  .bento-card.size-sm, .bento-card.size-xl { grid-column: span 1; }
}

/* ==========================================================================
   HOW IT WORKS — vertical scroll narrative
   ========================================================================== */
.how-wrap {
  display: grid; grid-template-columns: 220px 1fr; gap: 80px;
  align-items: start;
}
.how-rail {
  position: sticky; top: 140px;
}
.how-rail-title {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .14em;
  color: var(--mute);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.how-progress {
  height: 240px;
  width: 2px;
  background: var(--line);
  position: relative;
  margin-left: 8px;
}
.how-progress .bar {
  position: absolute; top: 0; left: 0; width: 100%;
  background: var(--accent);
  height: 0;
  transition: height var(--dur) var(--ease);
}
.how-steps { display: grid; gap: clamp(56px, 7vw, 88px); }
.how-step {
  display: grid; grid-template-columns: 80px 1fr; gap: 24px;
  align-items: start;
}
.how-step-n {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4.4rem);
  font-weight: 540; font-style: italic;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: right;
  font-feature-settings: "tnum";
}
.how-step h3 { font-size: 1.55rem; margin-bottom: 12px; }
.how-step p { color: var(--mute); font-size: 16px; line-height: 1.6; max-width: 52ch; }

@media (max-width: 880px) {
  .how-wrap { grid-template-columns: 1fr; gap: 40px; }
  .how-rail { position: static; display: none; }
  .how-step { grid-template-columns: 60px 1fr; gap: 16px; }
}

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */
.compare {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.compare thead th {
  padding: 28px 24px;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  color: var(--mute);
  font-size: 14px;
  letter-spacing: -0.005em;
}
.compare thead th.us {
  color: var(--aub);
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 600;
  letter-spacing: -0.02em;
  position: relative;
}
[data-theme="dark"] .compare thead th.us,
:root:not([data-theme="light"]) .compare thead th.us { color: var(--aub-ink); }
.compare thead th.us::before {
  content: "Forte";
  position: absolute; top: 10px; left: 24px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
[data-theme="dark"] .compare thead th.us::before,
:root:not([data-theme="light"]) .compare thead th.us::before { color: var(--accent); }
.compare thead th:first-child { width: 38%; }
.compare tbody th {
  text-align: left; font-weight: 500;
  padding: 22px 24px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.compare tbody td {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  color: var(--mute);
  font-size: 14.5px;
  line-height: 1.45;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td.us {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  font-weight: 500;
}
.compare td.us strong { font-weight: 600; color: var(--ink); }
.compare td .y { color: var(--success); font-weight: 700; }
.compare td .n { color: var(--danger); font-weight: 700; }
.compare td .dash { color: var(--mute); opacity: .5; }

@media (max-width: 720px) {
  .compare table { font-size: 13.5px; }
  .compare thead th, .compare tbody th, .compare tbody td { padding: 16px 14px; }
  .compare thead th:first-child { width: auto; }
}

/* ==========================================================================
   FOUNDER NOTE
   ========================================================================== */
.founder {
  display: grid; grid-template-columns: 260px 1fr; gap: 64px;
  align-items: start;
}
.founder-card {
  padding: 32px 28px;
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--aub), #3F2853);
  color: #fff;
  box-shadow: var(--shadow-lg);
  text-align: center;
  position: sticky; top: 140px;
}
.founder-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--accent), #F07C3B);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 2.2rem; font-weight: 700;
  color: var(--aub);
  box-shadow: var(--shadow-sm), inset 0 0 0 3px rgba(255,255,255,.18);
}
.founder-name {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 600;
  margin-bottom: 4px;
  color: #fff;
}
.founder-role {
  font-size: 13px;
  color: #D8CBEF;
  margin-bottom: 18px;
}
.founder-socials {
  display: flex; justify-content: center; gap: 10px;
}
.founder-socials a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  transition: background var(--dur-fast);
}
.founder-socials a:hover { background: rgba(255,255,255,.12); }
.founder-socials svg { width: 16px; height: 16px; }

.founder-body {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 62ch;
}
.founder-body p { margin: 0 0 1.3em; }
.founder-body .pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--aub);
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--accent);
  margin: 1.8em 0;
  font-weight: 420;
}
[data-theme="dark"] .founder-body .pull,
:root:not([data-theme="light"]) .founder-body .pull { color: var(--aub-ink); }
.founder-signoff {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-deep);
  font-size: 1.3rem;
}
[data-theme="dark"] .founder-signoff,
:root:not([data-theme="light"]) .founder-signoff { color: var(--accent); }

@media (max-width: 820px) {
  .founder { grid-template-columns: 1fr; gap: 40px; }
  .founder-card { position: static; max-width: 340px; margin: 0 auto; }
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch;
}
.plan {
  padding: 40px 32px 36px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan.highlight {
  background: linear-gradient(175deg, var(--aub), #3F2853);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  position: relative;
  transform: translateY(-6px);
}
.plan.highlight::before {
  content: "Most popular";
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--aub);
  padding: 6px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
}
.plan h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: inherit; margin-bottom: 4px; letter-spacing: 0; }
.plan .plan-tag { color: inherit; opacity: .8; font-size: 14px; margin-bottom: 26px; }
.plan .price {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display);
  font-size: 3rem; font-weight: 600; letter-spacing: -0.035em;
  margin-bottom: 28px;
}
.plan .price small { font: 500 14px/1 var(--font-body); opacity: .75; }
.plan ul {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; gap: 12px;
  font-size: 15px;
}
.plan li {
  display: flex; align-items: flex-start; gap: 10px;
  color: inherit; opacity: .92;
  line-height: 1.45;
}
.plan li::before {
  content: ""; flex: 0 0 18px; width: 18px; height: 18px;
  margin-top: 1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%23F5A524' d='M8.2 13.4 5 10.2l1.2-1.2 2 2 5-5L14.4 7z'/></svg>") center/contain no-repeat;
}
.plan .btn { margin-top: auto; }
.plan.highlight .btn { background: var(--accent); color: var(--aub); border-color: var(--accent); }
.plan.highlight .btn:hover { background: var(--accent-deep); color: #fff; }

@media (max-width: 920px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display);
  font-size: 1.22rem; font-weight: 600;
  letter-spacing: -0.015em;
  padding-right: 20px;
  line-height: 1.3;
  gap: 24px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.8rem; font-weight: 300;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
  line-height: 1;
  flex: 0 0 auto;
}
.faq details[open] summary::after { content: "–"; }
.faq details p {
  color: var(--mute); margin: 14px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.62;
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta {
  padding: clamp(80px, 10vw, 140px) 0;
  background: linear-gradient(180deg, var(--aub) 0%, #3F2853 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before,
.final-cta::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.final-cta::before {
  width: 500px; height: 500px;
  top: -120px; left: -120px;
  background: radial-gradient(circle, rgba(245,165,36,.28), transparent 60%);
}
.final-cta::after {
  width: 460px; height: 460px;
  bottom: -160px; right: -120px;
  background: radial-gradient(circle, rgba(124,91,160,.36), transparent 60%);
}
.final-cta > * { position: relative; z-index: 1; }
.final-cta .eyebrow { color: var(--accent); justify-content: center; display: inline-flex; }
.final-cta h2 { color: #fff; margin-bottom: 20px; }
.final-cta p { color: #D8CBEF; max-width: 54ch; margin: 0 auto 36px; font-size: 1.1rem; }
.final-cta .btn-primary {
  background: var(--accent); color: var(--aub); border-color: var(--accent);
}
.final-cta .btn-primary:hover { background: var(--accent-deep); color: #fff; }
.final-cta .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,.25);
}
.final-cta .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* ==========================================================================
   BLOG LIST / POST
   ========================================================================== */
.page-header {
  padding: clamp(70px, 9vw, 120px) 0 clamp(32px, 5vw, 64px);
}
.page-header .lead { margin-top: 20px; }

.posts-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.post-card {
  display: flex; flex-direction: column;
  padding: 32px 28px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  height: 100%;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.post-tag {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 18px;
  padding: 5px 10px;
  background: var(--accent-soft);
  border-radius: 999px;
}
[data-theme="dark"] .post-tag,
:root:not([data-theme="light"]) .post-tag { color: var(--accent); }
.post-card h3 {
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.022em;
  margin-bottom: 14px;
}
.post-card p { color: var(--mute); margin: 0 0 24px; font-size: 15px; line-height: 1.55; }
.post-meta {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  color: var(--mute); font-size: 13px;
}

@media (max-width: 920px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .posts-grid { grid-template-columns: 1fr; } }

/* Blog post article */
.post-article {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 100px) 28px clamp(72px, 9vw, 120px);
}
.post-hero {
  text-align: center;
  margin-bottom: 64px;
}
.post-hero .post-tag { display: inline-block; margin: 0 auto 18px; }
.post-hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 540;
  margin-bottom: 24px;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.post-hero .post-byline {
  color: var(--mute); font-size: 15px;
}
.post-body {
  font-size: 1.14rem;
  line-height: 1.78;
  color: var(--ink);
}
.post-body p { margin: 0 0 1.3em; }
.post-body p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4.2em;
  font-weight: 600;
  float: left;
  line-height: 0.9;
  margin: .08em .12em -0.02em 0;
  color: var(--aub);
  font-style: normal;
}
[data-theme="dark"] .post-body p:first-of-type::first-letter,
:root:not([data-theme="light"]) .post-body p:first-of-type::first-letter { color: var(--aub-ink); }
.post-body h2 {
  font-family: var(--font-display);
  font-size: 1.85rem; font-weight: 600;
  margin: 2.2em 0 .6em;
  letter-spacing: -0.025em;
}
.post-body ul, .post-body ol {
  padding-left: 1.4em; margin: 0 0 1.4em;
}
.post-body li { margin: 10px 0; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body em { font-family: var(--font-display); font-style: italic; }
.post-body a {
  color: var(--aub);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--aub) 40%, transparent);
  transition: text-decoration-color var(--dur-fast);
}
[data-theme="dark"] .post-body a,
:root:not([data-theme="light"]) .post-body a { color: var(--aub-ink); }
.post-body a:hover { text-decoration-color: currentColor; }
.post-body blockquote,
.post-body .pull {
  margin: 2em 0;
  padding: 4px 0 4px 28px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--aub);
  font-weight: 420;
}
[data-theme="dark"] .post-body blockquote,
[data-theme="dark"] .post-body .pull,
:root:not([data-theme="light"]) .post-body blockquote,
:root:not([data-theme="light"]) .post-body .pull { color: var(--aub-ink); }
.post-body hr {
  border: 0; height: 1px;
  background: var(--line);
  margin: 2.5em 0;
}

.post-nextprev {
  max-width: 1200px; margin: 0 auto;
  padding: 0 28px clamp(80px, 9vw, 120px);
}
.post-nextprev h3 {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 600;
  margin-bottom: 26px;
  text-align: center;
}
.post-nextprev-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
@media (max-width: 720px) { .post-nextprev-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   ABOUT / CONTACT
   ========================================================================== */
.about-hero { padding: clamp(90px, 10vw, 150px) 0 clamp(44px, 6vw, 84px); }
.about-story {
  max-width: 720px; margin: 0 auto;
  padding: 0 28px clamp(72px, 9vw, 110px);
  font-size: 1.12rem; line-height: 1.78;
  color: var(--ink);
}
.about-story p { margin: 0 0 1.3em; }
.about-story h2 { margin: 1.8em 0 .6em; }
.about-quote {
  padding: 32px 36px;
  margin: 32px 0;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.28rem;
  color: var(--aub);
  line-height: 1.4;
}
[data-theme="dark"] .about-quote,
:root:not([data-theme="light"]) .about-quote { color: var(--aub-ink); }

.contact-grid {
  max-width: 920px; margin: 0 auto;
  padding: 0 28px clamp(72px, 9vw, 110px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.contact-card {
  padding: 32px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.contact-card h3 { margin-bottom: 8px; }
.contact-card p { color: var(--mute); margin: 0 0 20px; font-size: 15px; line-height: 1.55; }
.contact-card a.btn { margin-top: 4px; }
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 64px 0 32px;
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 28px 44px;
  display: grid; grid-template-columns: 1.4fr 2fr; gap: 52px;
}
.footer-brand .footer-tag {
  color: var(--mute); margin: 14px 0 20px;
  max-width: 30ch; font-size: 15px; line-height: 1.5;
}
.footer-socials {
  display: flex; gap: 8px;
}
.footer-socials a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.footer-socials a:hover {
  background: var(--aub); color: #fff; border-color: var(--aub);
}
.footer-socials svg { width: 15px; height: 15px; }

.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-cols h4 {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 16px;
}
.footer-cols a {
  display: block;
  padding: 6px 0;
  color: var(--ink);
  font-size: 15px;
  transition: color var(--dur-fast);
}
.footer-cols a:hover { color: var(--accent-deep); }
[data-theme="dark"] .footer-cols a:hover,
:root:not([data-theme="light"]) .footer-cols a:hover { color: var(--accent); }

.footer-bottom {
  max-width: 1200px; margin: 0 auto;
  padding: 24px 28px 0;
  border-top: 1px solid var(--line);
  color: var(--mute); font-size: 13px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.footer-bottom .left,
.footer-bottom .right {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.footer-sep { opacity: .5; }
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 12px; font-weight: 500;
  color: var(--ink-2);
}
.status-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}

@media (max-width: 780px) {
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   SCROLL REVEAL — progressive enhancement
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .07s; }
.reveal.delay-2 { transition-delay: .14s; }
.reveal.delay-3 { transition-delay: .21s; }
.reveal.delay-4 { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .hero-mesh,
  .hero-phone,
  .hero-float { animation: none !important; transform: none !important; }
  html { scroll-behavior: auto; }
}