/* ═══════════════════════════════════════════════════════════════
   CARDINAL AI — REFERENCE DESIGN MATCH
   Exact color/type/component system from 7 reference screenshots
   ═══════════════════════════════════════════════════════════════ */

/* ── PLAYFAIR DISPLAY FONT ── */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/playfair-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/playfair-900.ttf') format('truetype');
}

/* ── REFERENCE TOKENS ── */
:root,
[data-theme='light'],
[data-theme='dark'],
body {
  /* Backgrounds — dark charcoal, NOT pure black */
  --color-bg:              #0D1117;
  --color-surface:         #13181F;
  --color-surface-2:       #181E27;
  --color-surface-offset:  #1E2630;
  --color-border:          #252E3A;
  --color-divider:         #1C242E;

  /* Text */
  --color-text:            #F2EFE8;
  --color-text-muted:      #8A9BAA;
  --color-text-faint:      #4A5668;
  --color-text-inverse:    #0D1117;

  /* Primary: Deep Forest Emerald */
  --color-primary:         #1A7A58;
  --color-primary-hover:   #1D8A63;
  --color-primary-active:  #15664A;
  --color-primary-light:   #0A1F18;

  /* Accent: Warm Gold */
  --color-accent:          #C8A84B;
  --color-accent-hover:    #B8962A;
  --color-accent-active:   #A07F20;
  --color-accent-light:    #1C1600;

  /* Semantic */
  --color-success:         #2AB57D;
  --color-success-light:   #0A2018;
  --color-error:           #7A1F1F;
  --color-error-light:     #1A0808;

  /* Display font — serif for headlines */
  --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Satoshi', 'Inter', sans-serif;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.7), 0 6px 16px rgba(0,0,0,0.5);
  --shadow-xl: 0 32px 80px rgba(0,0,0,0.8), 0 12px 32px rgba(0,0,0,0.6);
}

/* ── BODY ── */
body {
  background: #0D1117 !important;
  color: var(--color-text) !important;
}

/* ── NAV — dark charcoal, clean ── */
.site-nav {
  background: rgba(13, 17, 23, 0.95) !important;
  border-bottom: 1px solid rgba(200, 168, 75, 0.1) !important;
  backdrop-filter: blur(20px) !important;
}

.nav-logo-wordmark {
  color: #F2EFE8 !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.nav-links a {
  color: rgba(242, 239, 232, 0.55) !important;
  font-size: 0.875rem !important;
}

.nav-links a:hover {
  color: #C8A84B !important;
}

.nav-hamburger span {
  background: #F2EFE8 !important;
}

/* Nav CTA pill — like reference: warm gold-cream bg */
.nav-cta-desktop .btn,
.site-nav .btn--primary {
  background: #C8A84B !important;
  color: #0D1117 !important;
  border: none !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  font-size: 0.875rem !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  animation: none !important;
  letter-spacing: 0 !important;
}

.nav-cta-desktop .btn:hover,
.site-nav .btn--primary:hover {
  background: #B8962A !important;
}

/* ── HERO — reference exact ── */
.hero {
  background: #0D1117 !important;
  min-height: 95vh !important;
}

.hero-bg-gradient {
  background:
    radial-gradient(ellipse 55% 65% at 85% 10%, rgba(26, 122, 88, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 15% 85%, rgba(26, 122, 88, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #0D1117 0%, #0D1117 100%) !important;
}

/* Teal grid — like reference: subtle teal lines */
.hero-bg-grid {
  opacity: 0.12 !important;
  background-image:
    linear-gradient(rgba(26, 122, 88, 0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 122, 88, 0.7) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
}

/* Hero eyebrow pill */
.hero-eyebrow {
  color: #C8A84B !important;
  background: rgba(200, 168, 75, 0.08) !important;
  border-color: rgba(200, 168, 75, 0.2) !important;
  font-family: var(--font-body) !important;
}

.hero-eyebrow-dot {
  background: #C8A84B !important;
}

/* Hero headline — SERIF font like reference */
.hero-headline {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  color: #F2EFE8 !important;
  font-size: clamp(3rem, 7vw, 6.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}

/* "By numbers." — warm gold serif */
.hero-headline-accent {
  color: #C8A84B !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
}

/* Subheadline */
.hero-subheadline {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  color: #F2EFE8 !important;
  font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
  opacity: 1 !important;
  margin-bottom: var(--space-4) !important;
}

.hero-body {
  color: rgba(242, 239, 232, 0.6) !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
}

.hero-trust {
  color: rgba(242, 239, 232, 0.35) !important;
}

/* ── HERO BUTTONS — reference style ── */
/* Primary: Emerald pill, white text, gold glow border */
.hero .btn--primary {
  background: #1A7A58 !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(200, 168, 75, 0.3) !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  padding: 14px 36px !important;
  border-radius: 999px !important;
  letter-spacing: 0.01em !important;
  box-shadow:
    0 0 20px rgba(26, 122, 88, 0.3),
    0 4px 16px rgba(0,0,0,0.4) !important;
  animation: emerald-pulse 3s ease-in-out infinite !important;
}

.hero .btn--primary:hover {
  background: #1D8A63 !important;
  animation: none !important;
  box-shadow: 0 0 30px rgba(26, 122, 88, 0.5) !important;
}

@keyframes emerald-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(26, 122, 88, 0.3), 0 4px 16px rgba(0,0,0,0.4); }
  50%       { box-shadow: 0 0 35px rgba(26, 122, 88, 0.5), 0 4px 20px rgba(0,0,0,0.4); }
}

/* Secondary: "Learn More" — gold text link style */
.hero .btn--outline {
  background: transparent !important;
  color: #C8A84B !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
}

.hero .btn--outline:hover {
  color: #E8C840 !important;
  background: transparent !important;
  transform: none !important;
}

/* ── DASHBOARD CARD ── */
.dashboard-card {
  background: rgba(19, 24, 31, 0.85) !important;
  border: 1px solid rgba(200, 168, 75, 0.12) !important;
  box-shadow:
    0 0 0 1px rgba(200, 168, 75, 0.06),
    0 32px 80px rgba(0,0,0,0.6) !important;
}

.dashboard-title {
  color: rgba(242, 239, 232, 0.5) !important;
}

.dashboard-badge {
  background: rgba(42, 181, 125, 0.15) !important;
  color: #2AB57D !important;
}

/* Score ring — thick, glowing, emerald→gold */
.score-ring-container {
  filter: drop-shadow(0 0 16px rgba(26, 122, 88, 0.5)) drop-shadow(0 0 8px rgba(200, 168, 75, 0.2)) !important;
}

.score-ring-bg {
  stroke: rgba(255, 255, 255, 0.07) !important;
  stroke-width: 10 !important;
}

.score-ring-fill {
  stroke-width: 10 !important;
}

.score-number {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 2.2rem !important;
  color: #ffffff !important;
}

.score-label {
  color: rgba(242, 239, 232, 0.45) !important;
  font-size: 0.6rem !important;
  text-transform: lowercase !important;
  letter-spacing: 0.02em !important;
}

/* Metric values in dashboard — gold */
.score-detail-val {
  color: #C8A84B !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
}

.score-detail-val.positive { color: #2AB57D !important; }
.score-detail-val.negative { color: #C05050 !important; }
.score-detail-label { color: rgba(242, 239, 232, 0.45) !important; }

/* Dash stat values in card — gold */
.dash-stat-val {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #C8A84B !important;
  font-weight: 700 !important;
}

.dash-stat-key {
  color: #2AB57D !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.07em !important;
}

/* AVOID badge — dark wine/maroon, gold text + icon */
.dash-signal--avoid {
  background: rgba(100, 20, 20, 0.55) !important;
  color: #C8A84B !important;
  border: 1px solid rgba(122, 31, 31, 0.5) !important;
  font-weight: 700 !important;
  border-radius: var(--radius-lg) !important;
}

/* BUY badge */
.dash-signal--buy {
  background: rgba(26, 122, 88, 0.2) !important;
  color: #2AB57D !important;
  border: 1px solid rgba(26, 122, 88, 0.3) !important;
}

/* Mini chart */
.mini-bar { background: rgba(255,255,255,0.05) !important; }
.mini-bar.active { background: #C8A84B !important; }

/* Float badges */
.hero-float-badge {
  background: #13181F !important;
  border-color: rgba(200, 168, 75, 0.15) !important;
}
.float-badge-val { color: #C8A84B !important; }
.float-badge-sub { color: rgba(242, 239, 232, 0.4) !important; }

/* ── STATS BAR — dark surface, gold numbers, emerald labels ── */
.stats-bar {
  background: #13181F !important;
  border-top: 1px solid rgba(200, 168, 75, 0.08) !important;
  border-bottom: 1px solid rgba(200, 168, 75, 0.08) !important;
}

.stat-number {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  color: #C8A84B !important;
  font-size: clamp(2rem, 3.5vw, 3.2rem) !important;
}

.stat-number span { color: #C8A84B !important; }

.stat-label {
  color: #2AB57D !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── HOW IT WORKS — reference: dark cards with teal grid bg ── */
.how-it-works {
  background: #0D1117 !important;
  position: relative !important;
}

/* Subtle teal grid behind steps section */
.how-it-works::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(26, 122, 88, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 122, 88, 0.06) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  pointer-events: none !important;
}

.step-card {
  background: #13181F !important;
  border-color: rgba(242, 239, 232, 0.06) !important;
  position: relative !important;
  z-index: 1 !important;
}

.step-card:hover {
  border-color: rgba(200, 168, 75, 0.2) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}

/* Step titles — gold serif like reference */
.step-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #C8A84B !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
}

.step-desc {
  color: rgba(242, 239, 232, 0.6) !important;
  font-size: 0.95rem !important;
  line-height: 1.75 !important;
}

/* Step circles — reference uses check icon (step 1 = emerald), gold icon (steps 2-3) */
.step-number--1 {
  background: #2AB57D !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(42, 181, 125, 0.35) !important;
}

.step-number--2 {
  background: transparent !important;
  color: #C8A84B !important;
  border: 2px solid rgba(200, 168, 75, 0.3) !important;
}

.step-number--3 {
  background: transparent !important;
  color: #C8A84B !important;
  border: 2px solid rgba(200, 168, 75, 0.3) !important;
}

.steps-grid::before {
  background: linear-gradient(90deg, #2AB57D, #C8A84B) !important;
  opacity: 0.3 !important;
}

/* ── SECTION TYPOGRAPHY ── */
.section-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #C8A84B !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.section-eyebrow {
  color: #C8A84B !important;
}

.section-subtitle {
  color: rgba(242, 239, 232, 0.55) !important;
}

/* ── AUDIENCE / TEAM SECTION ── */
.audience-section {
  background: #0D1117 !important;
}

/* Dealer card: emerald gradient like reference */
.audience-card--dealer {
  background: linear-gradient(145deg, #1A7A58 0%, #0F4A36 60%, #0A2A20 100%) !important;
  border: 1px solid rgba(42, 181, 125, 0.2) !important;
}

/* Manager card: dark charcoal */
.audience-card--manager {
  background: #13181F !important;
  border-color: rgba(242, 239, 232, 0.06) !important;
}

.audience-card--manager .audience-title { color: #C8A84B !important; font-family: 'Playfair Display', Georgia, serif !important; }
.audience-card--manager .audience-desc  { color: rgba(242, 239, 232, 0.55) !important; }
.audience-card--manager .audience-feature { color: rgba(242, 239, 232, 0.65) !important; }

/* Gold checkmark circles like reference */
.feature-check,
.audience-card--manager .feature-check {
  background: rgba(200, 168, 75, 0.15) !important;
  color: #C8A84B !important;
  border: 1px solid rgba(200, 168, 75, 0.3) !important;
}

.audience-card--dealer .feature-check {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: none !important;
}

.audience-tag--manager {
  background: rgba(200, 168, 75, 0.1) !important;
  color: #C8A84B !important;
  border: 1px solid rgba(200, 168, 75, 0.2) !important;
}

/* ── PARTNERS ── */
.partners-section {
  background: #13181F !important;
  border-top: 1px solid rgba(200, 168, 75, 0.06) !important;
  border-bottom: 1px solid rgba(200, 168, 75, 0.06) !important;
}

.partners-label { color: rgba(200, 168, 75, 0.4) !important; }
.partner-logo-text { color: rgba(242, 239, 232, 0.65) !important; }
.partner-dot { background: #C8A84B !important; }

/* ── PRICING — exact reference ── */
.pricing-section {
  background: #0D1117 !important;
}

/* Pricing section title — gold serif */
.pricing-section .section-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #C8A84B !important;
}

.pricing-card {
  background: #13181F !important;
  border-color: rgba(242, 239, 232, 0.06) !important;
}

.pricing-card:hover {
  border-color: rgba(200, 168, 75, 0.18) !important;
}

/* Featured: emerald green like reference */
.pricing-card--featured {
  background: #1A7A58 !important;
  border-color: transparent !important;
  box-shadow: 0 0 40px rgba(26, 122, 88, 0.25) !important;
}

/* Most Popular badge — warm gold pill */
.pricing-popular-badge {
  background: #C8A84B !important;
  color: #0D1117 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(200, 168, 75, 0.3) !important;
}

.pricing-card:not(.pricing-card--featured) .pricing-price { color: #F2EFE8 !important; }
.pricing-card:not(.pricing-card--featured) .pricing-tier  { color: #C8A84B !important; }
.pricing-card:not(.pricing-card--featured) .pricing-desc  { color: rgba(242, 239, 232, 0.5) !important; }
.pricing-card:not(.pricing-card--featured) .pricing-feature { color: rgba(242, 239, 232, 0.65) !important; }

/* Gold check circles in pricing — like reference */
.pricing-card:not(.pricing-card--featured) .pricing-check {
  background: rgba(200, 168, 75, 0.15) !important;
  color: #C8A84B !important;
  border: 1px solid rgba(200, 168, 75, 0.25) !important;
}

.pricing-card--featured .pricing-check {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.pricing-note { color: rgba(242, 239, 232, 0.4) !important; }
.pricing-note strong { color: #C8A84B !important; }

/* ── CTA SECTION — emerald radial glow like IMG_3816 ── */
.cta-section {
  background: #0D1117 !important;
  position: relative !important;
  overflow: hidden !important;
}

.cta-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 80% 100% at 50% 60%, rgba(26, 122, 88, 0.55) 0%, rgba(26, 122, 88, 0.15) 40%, transparent 70%) !important;
  pointer-events: none !important;
}

.cta-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #F2EFE8 !important;
  font-weight: 700 !important;
}

/* "conviction?" portion in gold — apply via accent span if present */
.cta-title span { color: #C8A84B !important; }
.cta-subtitle { color: rgba(242, 239, 232, 0.6) !important; }

/* CTA button — big emerald like reference */
.cta-section .btn--white,
.cta-section .btn {
  background: #1A7A58 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  padding: 16px 48px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(42, 181, 125, 0.35) !important;
  box-shadow: 0 0 30px rgba(26, 122, 88, 0.4) !important;
  animation: emerald-pulse 3s ease-in-out infinite !important;
}

.cta-section .btn--white:hover,
.cta-section .btn:hover {
  background: #1D8A63 !important;
  animation: none !important;
}

/* ── FOOTER ── */
.site-footer {
  background: #0A0E14 !important;
  border-top: 1px solid rgba(200, 168, 75, 0.08) !important;
}

.footer-col-title {
  color: #C8A84B !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
}

.footer-brand-desc { color: rgba(242, 239, 232, 0.4) !important; }
.footer-links a { color: rgba(242, 239, 232, 0.45) !important; }
.footer-links a:hover { color: #C8A84B !important; }
.footer-legal { color: rgba(242, 239, 232, 0.3) !important; }
.footer-contact { color: rgba(242, 239, 232, 0.3) !important; }
.footer-contact a { color: rgba(242, 239, 232, 0.45) !important; }
.footer-contact a:hover { color: #C8A84B !important; }
.footer-bottom { border-top-color: rgba(200, 168, 75, 0.06) !important; }

/* ── GLOBAL BUTTONS (non-hero) ── */
.btn--primary {
  background: #C8A84B !important;
  color: #0D1117 !important;
  font-weight: 700 !important;
  animation: gold-pulse 3s ease-in-out infinite !important;
}

.btn--primary:hover {
  background: #B8962A !important;
  animation: none !important;
}

@keyframes gold-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(200, 168, 75, 0.3); }
  50%       { box-shadow: 0 4px 32px rgba(200, 168, 75, 0.5), 0 0 16px rgba(200, 168, 75, 0.15); }
}

.btn--white {
  background: #C8A84B !important;
  color: #0D1117 !important;
  font-weight: 700 !important;
}

/* ── MODAL ── */
.modal-sheet { background: #13181F !important; }
.modal-header { background: #13181F !important; border-bottom-color: rgba(200, 168, 75, 0.08) !important; }
.modal-title { color: #F2EFE8 !important; }
.modal-subtitle { color: rgba(242, 239, 232, 0.5) !important; }
.modal-handle { background: rgba(200, 168, 75, 0.15) !important; }
.modal-close { background: rgba(255,255,255,0.04) !important; color: rgba(242, 239, 232, 0.5) !important; }
.modal-close:hover { background: rgba(200, 168, 75, 0.08) !important; color: #C8A84B !important; }

.form-label { color: rgba(242, 239, 232, 0.6) !important; }
.form-input, .form-select, .form-textarea {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(200, 168, 75, 0.1) !important;
  color: #F2EFE8 !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: #C8A84B !important;
  box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.1) !important;
}
.form-input::placeholder, .form-textarea::placeholder {
  color: rgba(242, 239, 232, 0.2) !important;
}

/* ── LOGO ── */
.nav-logo img {
  border-radius: 0 !important;
}

/* ═══════════════ END REFERENCE MATCH ═══════════════ */