/* ============================================
   THEME: Bil
   Billy-inspired — vivid coral hero, warm linen body,
   playful multi-colour accents, bold grotesque type
   Coral-red primary · blue · yellow · sage · tan
   Fonts: Plus Jakarta Sans
   ============================================ */

:root[data-theme="bil"] {
  /* Fonts — Plus Jakarta Sans: warm, bold grotesque */
  --font-serif: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans:  'Plus Jakarta Sans', system-ui, sans-serif;

  /* Core palette — Billy-inspired */
  --color-primary:       #FF4B2B;
  --color-primary-dark:  #E63A1A;
  --color-primary-light: #FFD5CC;

  /* Warm linen body backgrounds */
  --color-bg:            #EDEBE5;
  --color-bg-alt:        #E3DFD8;
  --color-bg-light:      #D9D4CB;
  --color-bg-card:       #EAE6DF;

  /* Near-black text */
  --color-text:          #1A1A18;
  --color-text-secondary: #3A3835;
  --color-text-muted:    rgba(26, 26, 24, 0.52);
  --color-text-subtle:   rgba(26, 26, 24, 0.32);

  --color-accent:        #FF4B2B;
  --color-accent-hover:  #E63A1A;
  --color-highlight:     #FF4B2B;

  --color-border:        rgba(26, 26, 24, 0.1);
  --color-border-strong: rgba(26, 26, 24, 0.22);
  --color-divider:       rgba(26, 26, 24, 0.06);

  /* Nav — near-black like Billy */
  --nav-bg: rgba(26, 26, 24, 0.98);
  --nav-height: 4.25rem;

  /* Footer */
  --footer-bg: #1A1A18;
  --footer-text: rgba(237, 235, 229, 0.5);
  --footer-text-strong: rgba(237, 235, 229, 0.85);
  --footer-border: rgba(237, 235, 229, 0.08);

  /* Buttons — pill-shaped, dark pill like Billy's "Get started" */
  --btn-primary-bg:      #1A1A18;
  --btn-primary-text:    #FFFFFF;
  --btn-secondary-border: rgba(26, 26, 24, 0.25);

  /* Layout */
  --site-margin: clamp(1.5rem, 5vw, 5rem);
  --max-width: 1280px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --transition-fast: 170ms ease;
  --transition-med:  270ms ease;
  --transition-slow: 380ms ease;

  --logo-filter: invert(1) brightness(2);
  --holly-bg: #1A1A18;

  /* Billy accent palette — used throughout for cards / highlights */
  --bil-coral:  #FF4B2B;
  --bil-blue:   #4D91C4;
  --bil-yellow: #ECC94B;
  --bil-sage:   #80AF65;
  --bil-tan:    #C4B49E;
  --bil-cream:  #EAE6DF;
  --bil-dark:   #1A1A18;
}

/* ---- Nav: dark bar, light text ---- */
:root[data-theme="bil"] nav {
  border-bottom-color: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
}

:root[data-theme="bil"] .nav-links a {
  color: rgba(237, 235, 229, 0.78);
  font-weight: 500;
  font-size: 0.875rem;
}
:root[data-theme="bil"] .nav-links a:hover {
  color: #ffffff;
  opacity: 1;
}

:root[data-theme="bil"] nav .btn-secondary {
  color: rgba(237, 235, 229, 0.75);
  border-color: rgba(237, 235, 229, 0.25);
  background: transparent;
  font-size: 0.875rem;
  border-radius: 999px;
}
:root[data-theme="bil"] nav .btn-secondary:hover {
  color: #ffffff;
  border-color: rgba(237, 235, 229, 0.65);
  opacity: 1;
}

:root[data-theme="bil"] nav .btn-primary {
  background: #FF4B2B;
  color: #ffffff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.875rem;
}
:root[data-theme="bil"] nav .btn-primary:hover {
  background: #E63A1A;
  opacity: 1;
}

:root[data-theme="bil"] .theme-switcher-btn {
  color: rgba(237, 235, 229, 0.72);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(237, 235, 229, 0.16);
  font-size: 0.8rem;
}
:root[data-theme="bil"] .theme-switcher-btn:hover {
  color: #ffffff;
  border-color: rgba(237, 235, 229, 0.38);
}

/* ---- Typography — bold, tight, confident ---- */
:root[data-theme="bil"] h1,
:root[data-theme="bil"] h2,
:root[data-theme="bil"] h3 {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1A1A18;
}

:root[data-theme="bil"] h1 {
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  line-height: 1.06;
  font-weight: 800;
}

:root[data-theme="bil"] h2 {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.1;
}

:root[data-theme="bil"] h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

:root[data-theme="bil"] h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26, 26, 24, 0.45);
}

:root[data-theme="bil"] p {
  color: #3A3835;
  font-size: 0.9375rem;
  line-height: 1.7;
  font-weight: 400;
}

/* em in headings → coral */
:root[data-theme="bil"] em {
  font-style: normal;
  color: #FF4B2B;
}

/* Section eyebrows */
:root[data-theme="bil"] .section-eyebrow {
  color: #FF4B2B;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ---- Hero: vivid coral background — the signature Billy move ---- */
:root[data-theme="bil"] .hero {
  background: #FF4B2B;
  position: relative;
  overflow: hidden;
}

/* Subtle warm texture / noise on hero */
:root[data-theme="bil"] .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 200, 100, 0.12) 0%, transparent 50%);
  pointer-events: none;
}

/* Override hero text to dark (near-black) on coral, like Billy */
:root[data-theme="bil"] .hero h1,
:root[data-theme="bil"] .hero h2,
:root[data-theme="bil"] .hero h3 {
  color: #1A1A18;
}

:root[data-theme="bil"] .hero p {
  color: rgba(26, 26, 24, 0.72);
}

:root[data-theme="bil"] .hero em {
  color: #ECC94B;
  font-style: normal;
  text-decoration: none;
}

/* Hero kicker/badge — dark pill on coral */
:root[data-theme="bil"] .hero-kicker {
  background: rgba(26, 26, 24, 0.12);
  border: 1px solid rgba(26, 26, 24, 0.2);
  color: #1A1A18;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
}

:root[data-theme="bil"] .hero-kicker-dot {
  background: #1A1A18;
}

/* Stat cards on coral hero — white/cream */
:root[data-theme="bil"] .hero-stat-card {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  backdrop-filter: blur(8px);
}

/* ACC-ready card — default sage, JS cycles through palette */
:root[data-theme="bil"] .hero-stat-card.accent-card {
  background: #80AF65;
  border-color: transparent;
}
:root[data-theme="bil"] .hero-stat-card.accent-card .hero-stat-value,
:root[data-theme="bil"] .hero-stat-card.accent-card .hero-stat-label { color: #ffffff; }

:root[data-theme="bil"] .hero-stat-value {
  color: #1A1A18;
  font-weight: 800;
  letter-spacing: -0.03em;
}

:root[data-theme="bil"] .hero-stat-label {
  color: rgba(26, 26, 24, 0.62);
  font-size: 0.8rem;
}

:root[data-theme="bil"] .hero-stat-card.accent-card .hero-stat-value,
:root[data-theme="bil"] .hero-stat-card.accent-card .hero-stat-label {
  color: #ffffff;
}

/* ---- Trusted strip — warm cream, feels at home after coral ---- */
:root[data-theme="bil"] .trusted-strip {
  background: #EAE6DF;
  border-top: none;
  border-bottom: 1px solid rgba(26, 26, 24, 0.07);
}

:root[data-theme="bil"] .trusted-label {
  color: rgba(26, 26, 24, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Buttons — bold, pill-shaped ---- */
:root[data-theme="bil"] .btn {
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

:root[data-theme="bil"] .btn-primary {
  background: #1A1A18;
  color: #ffffff;
  border-radius: 999px;
  box-shadow: none;
  transition: background 160ms ease, transform 120ms ease;
}
:root[data-theme="bil"] .btn-primary:hover {
  background: #FF4B2B;
  transform: translateY(-1px);
  opacity: 1;
}

/* On the coral hero, primary button should be dark */
:root[data-theme="bil"] .hero .btn-primary {
  background: #1A1A18;
  color: #ffffff;
}
:root[data-theme="bil"] .hero .btn-primary:hover {
  background: #333330;
}

:root[data-theme="bil"] .btn-secondary {
  color: #1A1A18;
  border-color: rgba(26, 26, 24, 0.3);
  border-radius: 999px;
  background: transparent;
}
:root[data-theme="bil"] .btn-secondary:hover {
  border-color: #1A1A18;
  color: #1A1A18;
  opacity: 1;
}

/* ---- Section alt — slightly darker linen ---- */
:root[data-theme="bil"] section.alt {
  background: #E3DFD8;
}

/* ---- Feature cards — rotate through Billy accent colours ---- */
:root[data-theme="bil"] .feature-item {
  background: #EAE6DF;
  border: 1.5px solid rgba(26, 26, 24, 0.08);
  border-radius: 16px;
  box-shadow: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
:root[data-theme="bil"] .feature-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26, 26, 24, 0.1);
  border-color: rgba(26, 26, 24, 0.14);
}

:root[data-theme="bil"] .feature-item h3 {
  color: #1A1A18;
}
:root[data-theme="bil"] .feature-item p {
  color: #5A5752;
}

/* Feature icons — coral accent */
:root[data-theme="bil"] .feature-item-icon {
  color: #FF4B2B;
  background: rgba(255, 75, 43, 0.1);
  border-radius: 10px;
  padding: 0.5rem;
  display: inline-flex;
}

/* ---- ACC / benefit cards ---- */
:root[data-theme="bil"] .acc-card {
  background: #EAE6DF;
  border: 1.5px solid rgba(26, 26, 24, 0.08);
  border-radius: 16px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
:root[data-theme="bil"] .acc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 26, 24, 0.09);
}

:root[data-theme="bil"] .acc-card h4 {
  color: #1A1A18;
}
:root[data-theme="bil"] .acc-card p {
  color: #5A5752;
}

:root[data-theme="bil"] .acc-card-icon {
  color: #4D91C4;
  background: rgba(77, 145, 196, 0.12);
  border-radius: 10px;
  padding: 0.5rem;
  display: inline-flex;
}

:root[data-theme="bil"] .acc-list li::before {
  color: #FF4B2B;
}

/* ---- Audience cards — Billy blue accent ---- */
:root[data-theme="bil"] .audience-card {
  background: #EAE6DF;
  border: 1.5px solid rgba(26, 26, 24, 0.08);
  border-radius: 16px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
:root[data-theme="bil"] .audience-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26, 26, 24, 0.1);
}

:root[data-theme="bil"] .audience-card h3 {
  color: #1A1A18;
}
:root[data-theme="bil"] .audience-card p {
  color: #5A5752;
}

:root[data-theme="bil"] .audience-card-icon {
  color: #80AF65;
  background: rgba(128, 175, 101, 0.14);
  border-radius: 10px;
  padding: 0.5rem;
  display: inline-flex;
}

:root[data-theme="bil"] .audience-tag {
  background: rgba(77, 145, 196, 0.12);
  color: #2E6E9E;
  border: 1px solid rgba(77, 145, 196, 0.25);
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
}

/* ---- Problem section — tan/khaki cards like Billy FAQ ---- */
:root[data-theme="bil"] .problem-card,
:root[data-theme="bil"] .problem-item {
  background: #C4B49E;
  border: none;
  border-radius: 16px;
}

:root[data-theme="bil"] .problem-card h3,
:root[data-theme="bil"] .problem-item h3 {
  color: #1A1A18;
}

:root[data-theme="bil"] .problem-card p,
:root[data-theme="bil"] .problem-item p {
  color: rgba(26, 26, 24, 0.68);
}

:root[data-theme="bil"] .problem-num {
  color: #1A1A18;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.04em;
  opacity: 0.2;
}

/* ---- Integration pills — linen with dark border ---- */
:root[data-theme="bil"] .integration-pill {
  background: #EAE6DF;
  border: 1.5px solid rgba(26, 26, 24, 0.12);
  color: #3A3835;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: border-color 150ms ease, background 150ms ease;
}
:root[data-theme="bil"] .integration-pill:hover {
  border-color: #FF4B2B;
  background: rgba(255, 75, 43, 0.06);
}

:root[data-theme="bil"] .integration-group-label {
  color: rgba(26, 26, 24, 0.4);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Pricing card ---- */
:root[data-theme="bil"] .pricing-card {
  background: #EAE6DF;
  border: 1.5px solid rgba(26, 26, 24, 0.1);
  border-radius: 20px;
  box-shadow: none;
}

:root[data-theme="bil"] .pricing-amount {
  color: #1A1A18;
  font-weight: 800;
  letter-spacing: -0.04em;
}

:root[data-theme="bil"] .pricing-amount sup {
  color: #FF4B2B;
}

:root[data-theme="bil"] .pricing-period {
  color: rgba(26, 26, 24, 0.5);
  font-size: 0.85rem;
}

:root[data-theme="bil"] .pricing-divider {
  border-color: rgba(26, 26, 24, 0.1);
}

:root[data-theme="bil"] .pricing-referral {
  color: #1A1A18;
}

:root[data-theme="bil"] .pricing-note {
  color: rgba(26, 26, 24, 0.5);
}

:root[data-theme="bil"] .pricing-includes li::before {
  color: #80AF65;
}

:root[data-theme="bil"] .pricing-enterprise {
  color: rgba(26, 26, 24, 0.42);
  font-size: 0.8rem;
}

/* ---- Stat cards ---- */
:root[data-theme="bil"] .stat-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

:root[data-theme="bil"] .stat-value {
  color: #FF4B2B;
}

:root[data-theme="bil"] .stat-label {
  color: rgba(237, 235, 229, 0.55);
}

/* ---- Holly / CTA section: dark near-black, coral button ---- */
:root[data-theme="bil"] .holly-section {
  background: #1A1A18;
  position: relative;
  overflow: hidden;
}

/* Warm coral glow in CTA */
:root[data-theme="bil"] .holly-section::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(ellipse at 50% 65%, rgba(255, 75, 43, 0.13) 0%, transparent 65%);
  pointer-events: none;
}

:root[data-theme="bil"] .holly-section h2 {
  color: #EDEBE5;
  position: relative;
  z-index: 1;
}

:root[data-theme="bil"] .holly-section .lead {
  color: rgba(237, 235, 229, 0.65);
  position: relative;
  z-index: 1;
}

:root[data-theme="bil"] .holly-badge {
  background: rgba(255, 75, 43, 0.18);
  border: 1px solid rgba(255, 75, 43, 0.35);
  color: #FF9070;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  position: relative;
  z-index: 1;
}

:root[data-theme="bil"] .holly-form {
  position: relative;
  z-index: 1;
}

:root[data-theme="bil"] .holly-form input {
  background: rgba(237, 235, 229, 0.06);
  border-color: rgba(237, 235, 229, 0.14);
  color: #EDEBE5;
  border-radius: 999px;
}

:root[data-theme="bil"] .holly-form input::placeholder {
  color: rgba(237, 235, 229, 0.38);
}

:root[data-theme="bil"] .holly-form input:focus {
  border-color: #FF4B2B;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 75, 43, 0.18);
}

:root[data-theme="bil"] .holly-form button {
  background: #FF4B2B;
  color: #ffffff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
}

:root[data-theme="bil"] .holly-form button:hover {
  background: #E63A1A;
  opacity: 1;
}

/* ---- Logo marquee ---- */
:root[data-theme="bil"] .logo-marquee-item img {
  filter: grayscale(1) opacity(0.45);
  transition: filter 250ms ease;
}
:root[data-theme="bil"] .logo-marquee-item:hover img {
  filter: grayscale(0.2) opacity(0.8);
}
:root[data-theme="bil"] .logo-marquee-item:hover img.logo-hemisphere {
  filter: none;
}