/* Finvica — shared design tokens + primitives */

:root, [data-theme="light"] {
  --oxford-900:#060B1C; --oxford-800:#0A1028; --oxford-700:#0C1430;
  --oxford-600:#12204A; --oxford-500:#1A2A5C; --oxford-400:#2A3A6E;
  --oxford-300:#4A5A8A; --oxford-200:#8A95B3;
  --ivory-50:#FBFAF5; --ivory-100:#F7F4EC; --ivory-200:#F0EBE0; --ivory-300:#E6DFD0;
  --ink-900:#0A0D14; --ink-700:#1A1D28; --ink-500:#4A4D58; --ink-300:#8A8D98; --ink-100:#D8DAE0;
  --gold-700:#8A6A2A; --gold-500:#C8A870; --gold-300:#D8C09A; --gold-100:#ECE0C8;

  --surface-page:#F7F4EC; --surface-raised:#FFFFFF; --surface-deep:#F0EBE0; --surface-inverse:#0C1430;
  --text-primary:#0A0D14; --text-secondary:#4A4D58; --text-muted:#8A8D98; --text-on-inverse:#F7F4EC;
  --accent:#C8A870; --accent-strong:#8A6A2A; --accent-soft:#ECE0C8;
  --rule:rgba(12,20,48,.10); --rule-strong:rgba(12,20,48,.25);
  --success:#4A7A5C; --warning:#A87A2A; --danger:#A04040; --info:#4A6A8A;
  --chart-primary:#0C1430; --chart-secondary:#C8A870; --chart-grid:rgba(12,20,48,.06); --chart-axis:#8A8D98;

  --font-serif:"Cardo", Georgia, "Times New Roman", serif;
  --font-sans:"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="dark"] {
  --surface-page:#0C1430; --surface-raised:#1A2A5C; --surface-deep:#060B1C; --surface-inverse:#F7F4EC;
  --text-primary:#F7F4EC; --text-secondary:#8A95B3; --text-muted:#4A5A8A; --text-on-inverse:#0A0D14;
  --accent:#C8A870; --accent-strong:#D8C09A; --accent-soft:#8A6A2A;
  --rule:rgba(244,241,234,.12); --rule-strong:rgba(244,241,234,.28);
  --success:#6A9A7C; --warning:#C89A4A; --danger:#C06060; --info:#6A8AAA;
  --chart-primary:#F7F4EC; --chart-secondary:#C8A870; --chart-grid:rgba(244,241,234,.08); --chart-axis:#8A95B3;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: light dark; -webkit-tap-highlight-color: transparent; overflow-x: clip; }
body { overflow-x: clip; }
body {
  font-family: var(--font-sans);
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Visually hidden (screen-reader only) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--oxford-700); color: var(--ivory-100);
  padding: 12px 20px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase;
}
.skip-link:focus { left: 16px; top: 16px; }

/* Unified focus-visible */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.surface-inverse :focus-visible,
.hero :focus-visible,
.nav :focus-visible,
.footer :focus-visible {
  outline-color: var(--gold-500);
}

/* Respect motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Typography */
.serif { font-family: var(--font-serif); font-weight: 400; }
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--text-secondary);
}
.eyebrow--gold { color: var(--accent); letter-spacing: .30em; }
.h-display { font-family: var(--font-serif); font-weight: 400; font-size: 96px; line-height: .95; letter-spacing: -.01em; }
.h1 { font-family: var(--font-serif); font-weight: 400; font-size: 64px; line-height: 1.0; letter-spacing: .005em; }
.h2 { font-family: var(--font-serif); font-weight: 400; font-size: 44px; line-height: 1.05; letter-spacing: .005em; }
.h3 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.15; }
.italic-gold { font-style: italic; color: var(--accent); }
.body { font-size: 17px; line-height: 1.55; }
.body-sm { font-size: 14px; line-height: 1.5; }
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1025px) { .container { padding: 0 48px; } }
.section { padding: 96px 0; }
@media (max-width: 640px) { .section { padding: 64px 0; } }

/* Surfaces */
.surface-page { background: var(--surface-page); color: var(--text-primary); }
.surface-deep { background: var(--surface-deep); color: var(--text-primary); }
.surface-raised { background: var(--surface-raised); color: var(--text-primary); }
.surface-inverse { background: var(--surface-inverse); color: var(--text-on-inverse); }
[data-theme="light"] .surface-inverse { background: #0C1430; color: #F7F4EC; }
[data-theme="dark"] .surface-inverse { background: #F7F4EC; color: #0A0D14; }

/* Hairline */
.rule { height: 1px; background: var(--rule); border: 0; }
.rule-strong { height: 1px; background: var(--rule-strong); border: 0; }
.seal { width: 120px; height: 1px; background: rgba(244,241,234,.28); border: 0; margin: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 24px; border-radius: 2px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: .04em; border: 0; cursor: pointer;
  transition: background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  text-decoration: none;
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--text-primary); color: var(--surface-page); }
.btn-primary:hover { background: var(--oxford-800); }
[data-theme="dark"] .btn-primary { background: var(--ivory-100); color: var(--oxford-700); }
[data-theme="dark"] .btn-primary:hover { background: var(--ivory-200); }
.btn-ghost {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--text-primary);
}
.btn-ghost:hover { background: var(--ivory-200); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(244,241,234,.08); }

/* on inverse surfaces */
.surface-inverse .btn-primary, .hero .btn-primary, .plat-hero .btn-primary, .sec-hero .btn-primary, .about-hero .btn-primary, .tour-hero .btn-primary, .sm-hero .btn-primary, .final-cta .btn-primary, .pricing-teaser .btn-primary { background: var(--ivory-100); color: var(--oxford-700); }
.surface-inverse .btn-primary:hover, .hero .btn-primary:hover, .plat-hero .btn-primary:hover, .sec-hero .btn-primary:hover, .about-hero .btn-primary:hover, .tour-hero .btn-primary:hover, .sm-hero .btn-primary:hover, .final-cta .btn-primary:hover, .pricing-teaser .btn-primary:hover { background: var(--ivory-200); }
.surface-inverse .btn-ghost, .plat-hero .btn-ghost, .sec-hero .btn-ghost, .about-hero .btn-ghost, .tour-hero .btn-ghost, .sm-hero .btn-ghost, .final-cta .btn-ghost, .pricing-teaser .btn-ghost, .hero .btn-ghost { color: var(--ivory-100); border-color: var(--ivory-100); background: transparent; }
.surface-inverse .btn-ghost:hover, .plat-hero .btn-ghost:hover, .sec-hero .btn-ghost:hover, .about-hero .btn-ghost:hover, .tour-hero .btn-ghost:hover, .sm-hero .btn-ghost:hover, .final-cta .btn-ghost:hover, .pricing-teaser .btn-ghost:hover, .hero .btn-ghost:hover { background: rgba(244,241,234,.08); }
[data-theme="dark"] .surface-inverse .btn-primary { background: var(--oxford-700); color: var(--ivory-100); }
[data-theme="dark"] .surface-inverse .btn-ghost { color: var(--oxford-700); border-color: var(--oxford-700); }

.btn-sm { height: 36px; padding: 0 16px; font-size: 12px; }

.link-mono {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 8px;
}
.link-mono:hover { color: var(--accent-strong); }
.surface-inverse .link-mono { color: var(--accent); }
.surface-inverse .link-mono:hover { color: var(--ivory-100); }

/* Nav */
.nav {
  background: var(--oxford-700); color: var(--ivory-100);
  border-bottom: 1px solid rgba(244,241,234,.08);
  position: sticky; top: 0; z-index: 100;
}
[data-theme="dark"] .nav { background: var(--oxford-800); }
.nav-inner {
  max-width: 1400px; margin: 0 auto;
  height: 68px; padding: 0 48px;
  display: flex; align-items: center; gap: 40px;
}
@media (max-width: 1024px) { .nav-inner { padding: 0 24px; height: 56px; gap: 16px; } }
.nav-brand { display: flex; align-items: center; gap: 10px; color: var(--ivory-100); }
.nav-brand .wordmark {
  font-family: var(--font-serif); font-size: 20px; letter-spacing: .22em;
}
.nav-links { display: flex; gap: 28px; flex: 1; justify-content: center; }
@media (max-width: 1024px) { .nav-links { display: none; } }
.nav-link {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: rgba(244,241,234,.7); padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav-link:hover { color: var(--ivory-100); }
.nav-link.active {
  color: var(--ivory-100);
  border-bottom-color: var(--gold-500);
  padding-bottom: 3px;
}
.nav-ctas { display: flex; align-items: center; gap: 12px; }
.nav-ctas .link-login { color: rgba(244,241,234,.7); font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.nav-ctas .link-login:hover { color: var(--ivory-100); }
.nav .btn-primary { background: var(--ivory-100); color: var(--oxford-700); }
.nav .btn-primary:hover { background: var(--ivory-200); }
.nav .btn-ghost { color: var(--ivory-100); border-color: rgba(244,241,234,.5); }
.nav .btn-ghost:hover { background: rgba(244,241,234,.08); }
@media (max-width: 1024px) {
  .nav-ctas .btn.hide-md { display: none; }
}

/* Diamond crest */
.crest { width: 32px; height: 32px; position: relative; flex-shrink: 0; }
.crest svg { width: 100%; height: 100%; display: block; }

/* Footer */
.footer { background: var(--oxford-900); color: var(--ivory-100); padding: 96px 0 48px; }
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 1024px) { .footer-inner { padding: 0 24px; } }
.footer-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
  padding-bottom: 64px; border-bottom: 1px solid rgba(244,241,234,.12);
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
.footer-col h4 {
  margin: 0 0 24px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(244,241,234,.5);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  font-family: var(--font-sans); font-size: 14px; color: rgba(244,241,234,.8);
}
.footer-col a:hover { color: var(--ivory-100); }
.footer-regulatory {
  padding: 32px 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; line-height: 1.8;
  color: rgba(244,241,234,.5); text-transform: uppercase;
  border-bottom: 1px solid rgba(244,241,234,.12);
}
.footer-utility {
  padding-top: 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(244,241,234,.5);
}
.footer-utility a { color: rgba(244,241,234,.7); }
.footer-utility a:hover { color: var(--ivory-100); }
.footer-utility .theme-toggle a { margin: 0 4px; }
.footer-utility .theme-toggle a.active { color: var(--gold-500); border-bottom: 1.5px solid var(--gold-500); padding-bottom: 2px; }

/* Card */
.card {
  background: var(--surface-raised); border: 1px solid var(--rule);
  padding: 28px;
}
.card-hover:hover { border-color: var(--text-primary); }
[data-theme="dark"] .card { background: var(--surface-raised); }

/* utilities */
.grid { display: grid; gap: 24px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-4 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}
.flex { display: flex; }
.flex-gap-16 { gap: 16px; }
.mt-24 { margin-top: 24px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.mb-12 { margin-bottom: 12px; } .mb-24 { margin-bottom: 24px; } .mb-48 { margin-bottom: 48px; }

/* Hero */
.hero {
  min-height: 92vh; display: flex; align-items: center;
  padding: 96px 0;
}
.hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 48px; width: 100%; }
@media (max-width: 1024px) { .hero { min-height: 80vh; padding: 64px 0; } .hero-inner { padding: 0 24px; } }
.hero .h-display { color: var(--ivory-100); }
@media (max-width: 768px) { .h-display { font-size: 52px; } .h1 { font-size: 44px; } .h2 { font-size: 32px; } .h3 { font-size: 22px; } }

/* Product tile */
.product-tile {
  background: var(--surface-raised); border: 1px solid var(--rule);
  padding: 24px; min-height: 160px; position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color 200ms ease-out;
}
.product-tile:hover { border-color: var(--text-primary); }
.product-tile .name { font-family: var(--font-serif); font-size: 20px; line-height: 1.15; }
.product-tile .cap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-secondary); margin-top: 8px; }
.product-tile .underline { width: 40px; height: 1px; background: var(--rule); margin-top: 16px; }
.product-tile .new-pill {
  position: absolute; top: 16px; right: 16px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; color: var(--accent); text-transform: uppercase;
}
.product-tile .new-pill::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Pricing card */
.price-card {
  background: var(--surface-raised); border: 1px solid var(--rule);
  padding: 40px; display: flex; flex-direction: column; min-height: 520px;
}
.surface-inverse .price-card { background: var(--oxford-600); border-color: rgba(244,241,234,.12); color: var(--ivory-100); }
.price-card.featured { border-top: 2px solid var(--accent); }
.surface-inverse .price-card.featured { border-top-color: var(--accent); }
.price-card .price {
  font-family: var(--font-serif); font-size: 56px; line-height: 1; margin: 16px 0 12px;
  font-variant-numeric: tabular-nums;
}
.price-card .per { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; color: var(--text-secondary); text-transform: uppercase; }
.surface-inverse .price-card .per { color: rgba(244,241,234,.6); }
.price-card .tagline { font-family: var(--font-serif); font-style: italic; font-size: 17px; margin: 8px 0 24px; color: var(--text-secondary); }
.surface-inverse .price-card .tagline { color: rgba(244,241,234,.75); }
.price-card ul { list-style: none; padding: 0; margin: 0 0 32px; font-size: 14px; }
.price-card li { padding: 12px 0; border-top: 1px solid var(--rule); }
.surface-inverse .price-card li { border-color: rgba(244,241,234,.12); }
.price-card li:first-child { border-top: 0; }
.price-card .cta-wrap { margin-top: auto; }
.price-card .btn { width: 100%; }

/* Form */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-secondary); font-weight: 500;
}
.field input, .field select, .field textarea {
  height: 44px; padding: 0 16px; background: var(--ivory-50);
  border: 1px solid var(--rule-strong); border-radius: 2px;
  font-family: var(--font-sans); font-size: 15px; color: var(--text-primary);
  width: 100%;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea {
  background: var(--oxford-600); color: var(--ivory-100);
}
.field textarea { height: auto; padding: 12px 16px; min-height: 96px; resize: vertical; font-family: var(--font-sans); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--text-primary); outline-offset: 0;
  border-color: var(--text-primary);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.field .hint { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.field .error {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--danger); margin-top: 6px; display: none;
}
.field[data-error="true"] .error { display: block; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }

/* Nav mobile drawer simplified */
.nav-mobile-toggle { display: none; background: transparent; border: 0; color: inherit; cursor: pointer; }
@media (max-width: 1024px) { .nav-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; } }

/* Placeholder */
.ph {
  background: repeating-linear-gradient(135deg, #EBE6D7 0, #EBE6D7 2px, #E3DDCC 2px, #E3DDCC 4px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-500); font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--rule);
}
.surface-inverse .ph {
  background: repeating-linear-gradient(135deg, #12204A 0, #12204A 2px, #1A2A5C 2px, #1A2A5C 4px);
  color: rgba(244,241,234,.6); border-color: rgba(244,241,234,.12);
}

/* Framed screenshot (on dark) */
.frame-dark {
  border: 1px solid var(--accent); background: var(--oxford-800);
  padding: 16px;
}
.frame-dark .frame-body { background: #0A1028; min-height: 360px; }

/* Mobile: let the fake-screen scroll horizontally instead of breaking the page */
@media (max-width: 640px) {
  .frame-dark {
    padding: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .frame-dark .frame-body {
    min-height: 0;
    width: max-content;
    min-width: 100%;
  }
}

/* Reveal — no-op (kept as a hook) */
.reveal { opacity: 1; }

/* Section eyebrow row */
.section-head { margin-bottom: 48px; }
.section-head .eyebrow { display: block; margin-bottom: 16px; }

/* Comparison columns text */
.cmp-col h3 { margin: 16px 0 12px; }
.cmp-col .conclude { font-family: var(--font-serif); font-style: italic; color: var(--accent-strong); margin-top: 16px; }
.surface-inverse .cmp-col .conclude { color: var(--accent); }

/* Tabs (module sampler) */
.tabs { display: flex; gap: 32px; border-bottom: 1px solid rgba(244,241,234,.12); padding-bottom: 12px; margin-bottom: 48px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(244,241,234,.6); background: transparent; border: 0; padding: 4px 0;
  position: relative; cursor: pointer; white-space: nowrap;
  touch-action: manipulation; font-weight: 500;
}
.tab:hover { color: rgba(244,241,234,.85); }
.tab[aria-selected="true"], .tab.active { color: var(--ivory-100); }
.tab[aria-selected="true"]::after, .tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -13px;
  height: 1.5px; background: var(--gold-500);
}
.tab-panel[hidden] { display: none; }

/* Theme-toggle in footer (button pattern) */
.footer-utility .theme-toggle button {
  background: transparent; border: 0; color: inherit;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; padding: 2px 4px; margin: 0 2px; cursor: pointer;
  touch-action: manipulation;
}
.footer-utility .theme-toggle button:hover { color: var(--ivory-100); }
.footer-utility .theme-toggle button[aria-pressed="true"] {
  color: var(--gold-500); border-bottom: 1.5px solid var(--gold-500); padding-bottom: 2px;
}