/* 
=========================================
  Pawra Style Sheet (Vanilla CSS)
  Inspired by Fouressbath.com Luxury Dark Aesthetics
=========================================
*/

/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Outfit:wght@100..900&family=Nunito:wght@700;800;900&display=swap');

/* CSS Variables */
:root {
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-accent: 'Outfit', sans-serif;

  /* Colors - Fouressbath Inspired Luxury Dark Mode */
  --color-bg-dark: #0A0807;         /* Luxury very dark stone/black */
  --color-bg-card: #141211;         /* Slightly lighter stone card background */
  --color-bg-card-hover: #1C1917;   /* Hover card background */
  
  --color-gold: #C5A880;            /* Premium champagne gold */
  --color-gold-hover: #B59870;      /* Darker gold for active states */
  --color-gold-light: #E5CBA8;      /* Light gold for badges/accents */
  
  --color-white: #FFFFFF;
  --color-white-muted: #B4ADA6;     /* 9.0:1 on bg, hue-matched to the warm base */
  --color-white-dark: #8A827B;      /* 5.3:1 — the old 0.45 alpha was 4.2:1, below AA */

  /* Semantic colors, tuned into the brand's saturation band (was S84% Tailwind defaults) */
  --sem-red: #D2685C;               /* 5.2:1 on card */
  --sem-green: #6FAE8C;             /* 7.2:1 on card */
  --color-gray-200: rgba(255, 255, 255, 0.08);
  
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-gold: rgba(197, 168, 128, 0.2);
  --color-border-gold-hover: rgba(197, 168, 128, 0.4);

  /* Brand Theme Adaptations */
  --color-logo: var(--color-white);
  --color-logo-tagline: var(--color-white-muted);
  --color-heart: #7C3AED;
  --color-header-bg: rgba(20, 18, 17, 0.7);
  --color-header-bg-scrolled: rgba(10, 8, 7, 0.92);
  
  --color-clipboard-bg: #0E0D0C;
  --color-clipboard-border: #1C1917;
  --color-flyer-bg: #141211;
  --color-flyer-text: var(--color-white);
  --color-flyer-text-muted: var(--color-white-muted);

  --color-reviews-bg: linear-gradient(135deg, #0C0A09 0%, #1A1614 50%, #0C0A09 100%);
  --color-overlay-bg: linear-gradient(180deg, rgba(10, 8, 7, 0.4) 0%, rgba(10, 8, 7, 0.95) 100%);
  --color-footer-bg: #060505;
  --color-gold-text: var(--color-gold);
  --video-opacity: 0.25;

  /* Grid pattern backdrop */
  --grid-pattern: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);

  /* Hero Stack Cards */
  --color-stack-card-bg: rgba(20, 18, 17, 0.85);
  --color-stack-card-hover: #1C1917;

  /* Simulator Color Palettes (WhatsApp themed) */
  --sim-phone-bg: #0C0A09;
  --sim-header-bg: #141211;
  --sim-header-text: var(--color-white);
  --sim-status-text: var(--color-gold);
  --sim-bubble-received-bg: #141211;
  --sim-bubble-received-text: var(--color-white-muted);
  --sim-bubble-sent-bg: rgba(197, 168, 128, 0.15);
  --sim-bubble-sent-text: var(--color-white);
  --sim-input-bg: rgba(255, 255, 255, 0.05);
  --sim-input-text: var(--color-white);
  --sim-footer-bg: #141211;
  
  --sim-sidebar-bg: #141211;
  --sim-sidebar-text: var(--color-white-muted);
  --sim-sidebar-header-bg: rgba(255, 255, 255, 0.02);

  /* Shadows & Radius */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.8);
  --radius-pill: 9999px;
  --radius-lg: 16px;                 /* Slightly sharper corners for luxury feel */
  --radius-md: 12px;
  --radius-sm: 8px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.5s ease;
}

/* Warm Beige Light Mode Overrides */
[data-theme="light"] {
  --color-bg-dark: #F5EFEB;         /* Rich warm beige background */
  --color-bg-card: #EAE2D8;         /* Darker beige card background */
  --color-bg-card-hover: #DFD5C8;   /* Hover beige background */
  
  --color-white: #211C17;           /* Warm near-black, 14.8:1. Was navy #12102E — H244,
                                       220° off every other hue on the page, which is why
                                       light mode read as a different brand than dark. */
  --color-white-muted: #5A5049;     /* 6.9:1 */
  --color-white-dark: #6E6259;      /* 4.6:1 on card */

  --sem-red: #A34436;               /* 4.8:1 on card */
  --sem-green: #33654B;             /* 5.3:1 on card */
  --color-gray-200: rgba(33, 28, 23, 0.10);
  
  --color-border: rgba(18, 16, 46, 0.08);
  --color-border-gold: rgba(197, 168, 128, 0.3);
  --color-border-gold-hover: rgba(197, 168, 128, 0.6);
  
  --color-gold-light: #6F5836;      /* 5.2:1 on card. Was #8E7450 = 3.4:1, failed AA on
                                       form labels and section eyebrows. */

  --color-logo: #1E1A64;            /* Brand navy color */
  --color-logo-tagline: rgba(30, 26, 100, 0.88); /* Increased tagline opacity */
  --color-heart: #6366F1;           /* Vivid purple/indigo heart */
  --color-header-bg: rgba(245, 239, 235, 0.82);
  --color-header-bg-scrolled: rgba(234, 226, 216, 0.95);
  
  --color-clipboard-bg: #EAE2D8;
  --color-clipboard-border: #C5A880;
  --color-flyer-bg: #EFEAE2;
  --color-flyer-text: #2C2418;
  --color-flyer-text-muted: rgba(44, 36, 24, 0.88); /* Increased flyer text opacity */

  --color-reviews-bg: linear-gradient(135deg, #F5EFEB 0%, #EAE2D8 50%, #F5EFEB 100%);
  --color-overlay-bg: linear-gradient(180deg, rgba(245, 239, 235, 0.22) 0%, rgba(245, 239, 235, 0.75) 100%);
  --color-footer-bg: #EAE2D8;
  --color-gold-text: #6F5836;       /* 5.9:1 on bg, 5.2:1 on card. Was #8E7450 = 3.4:1.
                                       --color-gold stays #C5A880 as the *fill* for buttons
                                       and borders; this token is gold-as-text only. */
  --video-opacity: 0.52;            /* Highly visible background video in light mode */

  /* Grid pattern backdrop */
  --grid-pattern: linear-gradient(rgba(18, 16, 46, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 16, 46, 0.015) 1px, transparent 1px);

  /* Hero Stack Cards */
  --color-stack-card-bg: rgba(234, 226, 216, 0.92);
  --color-stack-card-hover: #DFD5C8;

  /* Simulator Color Palettes (WhatsApp themed) */
  --sim-phone-bg: #EAE2D8;
  --sim-header-bg: #DFD5C8;
  --sim-header-text: #12102E;
  --sim-status-text: #8E7450;
  --sim-bubble-received-bg: #FFFFFF;
  --sim-bubble-received-text: #12102E;
  --sim-bubble-sent-bg: #D4EBC4;    /* Whatsapp light green bubble */
  --sim-bubble-sent-text: #12102E;
  --sim-input-bg: #FFFFFF;
  --sim-input-text: #12102E;
  --sim-footer-bg: #DFD5C8;
  
  --sim-sidebar-bg: #EAE2D8;
  --sim-sidebar-text: #12102E;
  --sim-sidebar-header-bg: rgba(0, 0, 0, 0.04);

  --shadow-sm: 0 4px 12px rgba(44, 36, 24, 0.06);
  --shadow-md: 0 12px 30px rgba(44, 36, 24, 0.1);
  --shadow-lg: 0 24px 60px rgba(44, 36, 24, 0.15);
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-dark);
  color: var(--color-white-muted);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-white);
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

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

/* Utilities */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.text-center {
  text-align: center;
}

.gold-text {
  color: var(--color-gold-text);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(197, 168, 128, 0.1);
  color: var(--color-gold-text);
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
  border: 1px solid var(--color-border-gold);
}

.badge-blue {
  background-color: rgba(197, 168, 128, 0.18);
  color: var(--color-gold-light);
  border: 1px solid var(--color-border-gold-hover);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}

.btn-primary {
  background-color: var(--color-gold);
  color: #0A0807;
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.15);
}

.btn-primary:hover {
  background-color: var(--color-gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(197, 168, 128, 0.25);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--color-white);
  transform: translateY(-2px);
}

.btn-teal {
  background-color: var(--color-gold);
  color: #0A0807;
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.15);
}

.btn-teal:hover {
  background-color: var(--color-gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(197, 168, 128, 0.25);
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.75rem;
}

.nav-cta .btn {
  border-radius: var(--radius-pill) !important;
}

/* Theme Toggle Button */
.theme-toggle {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-white-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.theme-toggle:hover {
  color: var(--color-gold-text);
  border-color: var(--color-gold-hover);
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .theme-toggle:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .sun-icon {
  display: block;
}
[data-theme="light"] .moon-icon {
  display: none;
}
[data-theme="dark"] .sun-icon {
  display: none;
}
[data-theme="dark"] .moon-icon {
  display: block;
}

/* Header & Navbar - Dynamic Island Style */
/* --nav is the scroll progress, 0 at the hero and 1 once condensed. JS writes it every
   frame, so geometry tracks the scroll 1:1 — it must NOT be transitioned, or each update
   would restart a 400ms tween and the bar would lag the scroll. Only the colour/shadow
   swap is transitioned. */
.header {
  --nav: 0;
  position: fixed;
  top: calc(22px - 12px * var(--nav));
  left: 50%;
  transform: translateX(-50%);
  width: calc(94% - 16% * var(--nav));
  max-width: calc(1180px - 240px * var(--nav));
  background-color: var(--color-header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.header.scrolled {
  background-color: var(--color-header-bg-scrolled);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  border-color: var(--color-border-gold);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(84px - 22px * var(--nav));
  padding: 0 calc(30px - 4px * var(--nav));
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: var(--transition-fast);
}

.logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.logo-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  color: var(--color-logo);
  fill: none;
  transition: color var(--transition-fast);
}

.logo-text {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--color-logo);
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.logo-heart {
  color: var(--color-heart);
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.logo-tagline {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-logo-tagline);
  margin-top: 3px;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-white-muted);
  transition: color var(--transition-fast);
}

.nav-links a:hover {
  color: var(--color-gold-text);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-cta-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Hamburger — hidden until the pill runs out of room */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 0 auto;
  background-color: currentColor;
  color: var(--color-white-muted);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

.nav-links-cta { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .logo-tagline { display: none; }

  /* The drawer hangs off the header pill rather than covering the page — the header is
     already a floating element, so a full-screen overlay would read as a different surface. */
  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    background-color: var(--color-header-bg-scrolled);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
  }

  .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links a {
    display: block;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
  }

  .nav-links a:hover { background-color: var(--color-bg-card-hover); }

  .nav-links-cta {
    display: block;
    margin-top: 4px;
    border-top: 1px solid var(--color-border);
    padding-top: 4px;
  }

  .nav-links-cta a { color: var(--color-gold-text); font-weight: 600; }
}

/* Video Background styles */
.video-bg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.video-bg-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--video-opacity);
}

.video-bg-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-bg);
  z-index: 1;
}

/* Hero Section */
.hero {
  padding: 180px 0 100px;
  background-color: var(--color-bg-dark);
  position: relative;
  overflow: hidden;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.hero-content {
  text-align: left;
}

.hero-content h1 {
  font-size: 4rem;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--color-white);
  letter-spacing: -0.01em;
}

.hero-content h1 span {
  color: var(--color-gold-text);
  font-style: italic;
  font-family: var(--font-heading);
}

.hero-content p {
  font-size: 1.1rem;
  color: var(--color-white-muted);
  margin-bottom: 36px;
  max-width: 540px;
  line-height: 1.7;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Logo Ticker / Ratings */
.ticker-section {
  background-color: var(--color-bg-card);
  padding: 40px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: 2;
}

.ticker-title {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-white-dark);   /* was a hardcoded 40% white — ~1.1:1 on the beige card */
  margin-bottom: 24px;
  text-align: center;
}

.ticker-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
}

.rating-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-bg-dark);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.stars {
  color: var(--color-gold-text);
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.rating-text {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Interactive Simulator */
.simulator-container {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px;
  margin-top: -40px;
  position: relative;
  z-index: 10;
  border: 1px solid var(--color-border);
}

.simulator-header {
  margin-bottom: 32px;
  text-align: center;
}

.simulator-header h2 {
  font-size: 2.2rem;
  font-weight: 300;
  margin-bottom: 8px;
  color: var(--color-white);
}

.simulator-header p {
  color: var(--color-white-muted);
  font-size: 0.95rem;
}

.simulator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: flex-start;
}

@media (max-width: 992px) {
  .simulator-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Mock Phone Styles */
.phone {
  background-color: #0A0807;
  border: 10px solid #1C1917;
  border-radius: 36px;
  height: 520px;
  position: relative;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.phone-screen {
  flex: 1;
  min-height: 0;
  background-color: var(--sim-phone-bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.phone-header {
  background-color: var(--sim-header-bg);
  color: var(--sim-header-text);
  padding: 24px 16px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

.phone-header::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 12px;
  background-color: #000000;
  border-radius: 6px;
}

.phone-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(197, 168, 128, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-gold-text);
  border: 1px solid var(--color-border-gold);
}

.phone-user-info {
  display: flex;
  flex-direction: column;
}

.phone-username {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--sim-header-text);
}

.phone-status {
  font-size: 0.65rem;
  color: var(--sim-status-text);
  opacity: 0.9;
}

.phone-messages {
  flex: 1;
  min-height: 0;
  padding: 16px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.message-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  position: relative;
  word-wrap: break-word;
  animation: popIn var(--transition-fast) forwards;
  opacity: 0;
  transform: scale(0.9);
}

@keyframes popIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.msg-sent {
  align-self: flex-end;
  background-color: var(--sim-bubble-sent-bg);
  color: var(--sim-bubble-sent-text);
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-top-right-radius: 2px;
}

.msg-received {
  align-self: flex-start;
  background-color: var(--sim-bubble-received-bg);
  color: var(--sim-bubble-received-text);
  border: 1px solid var(--color-border);
  border-top-left-radius: 2px;
}

.voice-note-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
}

.play-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0A0807;
  cursor: pointer;
}

.waveform {
  height: 14px;
  width: 100px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.waveform-bar {
  flex: 1;
  height: 40%;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 1px;
}

.waveform-bar.active {
  background-color: var(--color-gold);
}

.phone-footer {
  background-color: var(--sim-footer-bg);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--color-border);
}

.phone-input {
  flex: 1;
  background-color: var(--sim-input-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 0.8rem;
  outline: none;
  color: var(--sim-input-text);
}

.phone-mic-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-gold);
  color: #0A0807;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}

/* Mid Processing Screen */
.sim-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.sim-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(197, 168, 128, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-text);
  font-size: 1.2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-gold);
  position: relative;
}

.pulse-ring {
  position: absolute;
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: pulse 1.5s infinite;
  opacity: 0.5;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Interactive Demo Slider Layout */
.demo-section {
  padding: 100px 0;
  background-color: var(--color-bg-dark);
  background-image: 
    radial-gradient(circle at 15% 25%, rgba(197, 168, 128, 0.07) 0%, transparent 60%),
    radial-gradient(circle at 85% 75%, rgba(124, 58, 237, 0.04) 0%, transparent 60%),
    var(--grid-pattern);
  background-size: 100% 100%, 100% 100%, 40px 40px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}

.sim-slider-nav {
  display: flex;
  justify-content: center;
  align-self: center;
  background-color: rgba(35, 32, 31, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 30px;
  padding: 6px;
  position: relative;
  list-style: none;
  gap: 0;
  border: 1px solid var(--color-border);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.2), var(--shadow-sm);
  width: max-content;
  margin: 0 auto 28px;
  overflow-x: visible;
}

[data-theme="light"] .sim-slider-nav {
  background-color: rgba(234, 226, 216, 0.65);
}

.sim-slider-nav li {
  position: relative;
  z-index: 2;
  list-style: none;
}

.sim-tab {
  background-color: transparent;
  border: none;
  padding: 12px 24px;
  border-radius: 24px;
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-white-muted);
  cursor: pointer;
  transition: color 0.3s ease;
}

.sim-tab:hover {
  color: var(--color-white);
  background: none;
  border: none;
}

.sim-tab.active {
  color: #0A0807 !important;
  background: none;
  border: none;
}

.sim-tab-indicator {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  width: 0;
  background-color: var(--color-gold);
  border-radius: 24px;
  z-index: 1;
  transition: all 0.38s cubic-bezier(0.25, 1, 0.5, 1);
}

.phone-frame-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.sim-records-sidebar {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-parsed {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  text-align: left;
  display: block;
}

.card-parsed-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gold-text);
}

.card-parsed-header h4 {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: inherit;
}

.empty-state-records {
  font-size: 0.8rem;
  color: var(--color-white-muted);
  text-align: center;
  padding: 40px 20px;
  font-style: italic;
}

.parsed-field-group {
  margin-bottom: 14px;
  animation: slideUp var(--transition-fast) forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.parsed-field-label {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gold-text);
  margin-bottom: 4px;
}

.parsed-field-value {
  font-size: 0.85rem;
  color: var(--color-white);
  font-weight: 500;
}

.sim-btn-container {
  margin-top: 16px;
  text-align: center;
}

/* Vaccine Badge visual inside parent message */
.parent-vaccine-card {
  background-color: rgba(197, 168, 128, 0.08);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pvc-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(197, 168, 128, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-gold-text);
}

.pvc-details {
  display: flex;
  flex-direction: column;
}

.pvc-title {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--color-white);
}

.pvc-sub {
  font-size: 0.65rem;
  color: var(--color-white-muted);
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: typing 1s infinite alternate;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5px);
  }
}

/* Benefit Pillars - The Leave Behind Hook */
.pillars {
  padding: 100px 0;
  background-color: var(--color-bg-dark);
}

.pillars-headline {
  max-width: 700px;
  margin: 0 auto 60px;
  text-align: center;
}

.pillars-headline h2 {
  font-size: 2.8rem;
  font-weight: 300;
  margin-bottom: 16px;
  color: var(--color-white);
}

.pillars-headline p {
  color: var(--color-white-muted);
  font-size: 1.05rem;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.pillar-card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid var(--color-border);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.pillar-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-gold);
}

.pillar-bg-icon {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 160px;
  height: 160px;
  color: var(--color-gold-text);
  opacity: 0.18;
  transition: all var(--transition-normal);
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pillar-bg-icon svg {
  width: 100%;
  height: 100%;
}

.pillar-card:hover .pillar-bg-icon {
  opacity: 0.32;
  transform: scale(1.1) rotate(-8deg);
}

.pillar-card h3 {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 12px;
  color: var(--color-white);
  position: relative;
  z-index: 2;
}

.pillar-card p {
  color: var(--color-white-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

/* PIMS Tabs Section - 90% Digitail */
.pims {
  padding: 100px 0;
  background-color: var(--color-bg-dark);
  background-image: 
    radial-gradient(circle at 80% 20%, rgba(197, 168, 128, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(124, 58, 237, 0.04) 0%, transparent 50%),
    var(--grid-pattern);
  background-size: 100% 100%, 100% 100%, 40px 40px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.tabs-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.tabs-nav {
  display: inline-flex;
  align-self: center;
  background-color: rgba(35, 32, 31, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 30px;
  padding: 6px;
  position: relative;
  list-style: none;
  gap: 0;
  border: 1px solid var(--color-border);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.2), var(--shadow-sm);
}

[data-theme="light"] .tabs-nav {
  background-color: rgba(234, 226, 216, 0.65);
}

.tab-indicator {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  width: 0;
  background-color: var(--color-gold);
  border-radius: 24px;
  z-index: 1;
  transition: all 0.38s cubic-bezier(0.25, 1, 0.5, 1);
}

.tabs-nav li {
  position: relative;
  z-index: 2;
}

.tab-btn {
  background-color: transparent;
  border: none;
  padding: 12px 24px;
  border-radius: 24px;
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-white-muted);
  cursor: pointer;
  transition: color 0.3s ease;
}

.tab-btn:hover {
  color: var(--color-white);
  background: none;
}

.tab-btn.active {
  color: #0A0807 !important;
  background: none;
  border: none;
}

.tab-content {
  display: none;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  animation: fadeIn var(--transition-slow) forwards;
}

.tab-content.active {
  display: grid;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-text h3 {
  font-size: 2.5rem;
  font-weight: 300;
  margin-bottom: 18px;
  color: var(--color-white);
}

.tab-text p {
  color: var(--color-white-muted);
  font-size: 1rem;
  margin-bottom: 24px;
  line-height: 1.7;
}

.tab-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tab-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-white-muted);
}

.tab-features-list li svg {
  color: var(--color-gold-text);
  flex-shrink: 0;
  margin-top: 3px;
}

.tab-visual {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pims-mock-ui {
  background-color: var(--color-bg-dark);
  border-radius: var(--radius-md);
  padding: 20px;
  border: 1px solid var(--color-border);
}

.ui-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.ui-title {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.ui-badge {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  padding: 2px 8px;
  background-color: rgba(197, 168, 128, 0.15);
  color: var(--color-gold-text);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-pill);
}

.ui-body-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  margin-bottom: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  color: var(--color-white-muted);
}

/* FAQ / Objection Accordion Section - 10% Playbook */
.faq {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-card) 100%);
  position: relative;
  overflow: hidden;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-title {
  margin-bottom: 48px;
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background-color: var(--color-bg-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.faq-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(197, 168, 128, 0.25);
}

.faq-item.active {
  border-color: var(--color-gold);
  background-color: var(--color-bg-card-hover);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.faq-trigger {
  width: 100%;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--color-white);
  text-align: left;
}

.faq-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: var(--color-gold-text);
}

.faq-icon svg {
  width: 10px;
  height: 10px;
  display: block;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
  background-color: var(--color-gold);
  color: #0A0807;
  border-color: var(--color-gold);
}

.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
}

.faq-panel-content {
  padding: 0 24px 24px;
  font-size: 0.92rem;
  color: var(--color-white-muted);
  line-height: 1.65;
}

/* Concierge Pilot Form Section */
.pilot {
  padding: 100px 0;
  background-color: var(--color-bg-dark);
  position: relative;
  overflow: hidden;
}

.pilot-card {
  background: var(--color-stack-card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: 60px;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.pilot-info h2 {
  font-size: 2.6rem;
  font-weight: 300;
  margin-bottom: 16px;
  color: var(--color-white);
  line-height: 1.2;
}

.pilot-info p {
  color: var(--color-white-muted);
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.pilot-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.form-input {
  width: 100%;
  padding: 12px 18px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--color-white);
}

.form-input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.15);
  transform: translateY(-1px);
}

.pilot-form .btn-teal {
  width: 100%;
  margin-top: 10px;
}

.pilot-form .btn-teal:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Off-screen rather than display:none — bots skip hidden fields, but fill positioned ones. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: 4px;
  min-height: 1em;          /* reserve the line so success/error doesn't shift the card */
}

.form-status.is-success { color: var(--sem-green); }
.form-status.is-error   { color: var(--sem-red); }

/* Footer */
.footer {
  background-color: var(--color-footer-bg);
  color: var(--color-white-muted);
  padding: 80px 0 30px;
  font-size: 0.85rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 40px;
  margin-bottom: 30px;
}

.footer-logo {
  color: var(--color-white);
  margin-bottom: 16px;
  font-size: 1.8rem;
  font-weight: 400;
}

.footer-col h4 {
  font-family: var(--font-accent);
  color: var(--color-gold-text);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
  color: var(--color-white-muted);
}

.footer-links a:hover {
  color: var(--color-gold-text);
  transform: translateX(4px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  z-index: 1;
}

/* Responsive CSS */
@media (max-width: 992px) {
  .hero-grid, .tab-content, .pilot-card {
    grid-template-columns: 1fr;
  }
  .hero-content {
    text-align: center;
  }
  .hero-content p {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-ctas {
    justify-content: center;
  }
  .simulator-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sim-flow {
    flex-direction: row;
    justify-content: space-around;
  }
  .sim-arrow {
    transform: rotate(90deg);
  }
  .pillars-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }
  .simulator-container {
    padding: 20px;
  }
  .phone {
    height: 480px;
  }
  .pilot-card {
    padding: 30px;
  }
}

/* ========================================================
   PIMS Dynamic Tab Visuals & Animation Styles
   ======================================================== */

/* 1. Client Communication Chat Simulation */
.chat-sim-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 280px;
  overflow-y: auto;
  padding: 10px;
  background-color: var(--color-bg-dark);   /* was a hardcoded #efeae2 cream that stayed
                                               light in dark mode */
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
}

.chat-sim-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(15px);
  animation: slideInBubble 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideInBubble {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-sim-sent {
  align-self: flex-end;
  background-color: var(--color-gold);
  color: #0A0807;
  border-top-right-radius: 2px;
}

.chat-sim-received {
  align-self: flex-start;
  background-color: var(--color-bg-card);
  color: var(--color-white-muted);
  border: 1px solid var(--color-border);
  border-top-left-radius: 2px;
}

/* 2. Calendar Booking Simulation */
.calendar-sim-container {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: 16px;
  height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--color-border);
}

.cal-sim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.cal-sim-grid {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  align-items: center;
}

.cal-sim-time {
  font-family: var(--font-accent);
  font-size: 0.72rem;
  color: var(--color-white-muted);
  font-weight: 500;
}

.cal-sim-slot {
  background-color: var(--color-bg-dark);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;
  overflow: hidden;
}

.cal-sim-event {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  bottom: 6px;
  background-color: rgba(197, 168, 128, 0.15);
  border-left: 4px solid var(--color-gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gold-text);
  transform: scaleX(0);
  transform-origin: left;
  animation: loadEvent 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.cal-sim-event.event-blue {
  background-color: rgba(255, 255, 255, 0.05);
  border-left-color: rgba(255, 255, 255, 0.3);
  color: var(--color-white-muted);
}

@keyframes loadEvent {
  to {
    transform: scaleX(1);
  }
}

/* 3. Medical Records Simulation */
.records-sim-container {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: 16px;
  height: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
}

.rec-soap-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-dark);
  padding: 12px;
  opacity: 0;
  transform: translateY(10px);
  animation: popIn 0.5s ease forwards;
}

.rec-soap-title {
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gold-text);
  margin-bottom: 4px;
}

.rec-soap-body {
  font-size: 0.75rem;
  color: var(--color-white-muted);
}

.rec-soap-progress {
  width: 100%;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}

.rec-soap-bar {
  height: 100%;
  background-color: var(--color-gold);
  width: 0%;
  animation: fillBar 1.5s ease forwards;
}

@keyframes fillBar {
  to { width: 100%; }
}

/* 4. AI Workflows (Dictation) */
.ai-sim-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  height: 300px;
}

.ai-mic-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-mic-pulse {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--sem-red);
  color: #FFFFFF;                   /* fixed fg on a fixed fill — same in both themes */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ai-mic-pulse::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--sem-red);
  animation: pulseMic 1.2s infinite;
}

@keyframes pulseMic {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

.ai-audio-wave {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 40px;
}

.ai-wave-bar {
  width: 4px;
  height: 15%;
  background-color: var(--sem-red);
  border-radius: 2px;
  animation: wavePulse 0.5s ease-in-out infinite alternate;
}

@keyframes wavePulse {
  to { height: 100%; }
}

.ai-transcript-box {
  background-color: var(--color-bg-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 0.75rem;
  font-style: italic;
  min-height: 60px;
  color: var(--color-white-muted);
}

.ai-tags-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-workflow-tag {
  background-color: rgba(197, 168, 128, 0.15);
  color: var(--color-gold-text);
  border: 1px solid var(--color-border-gold);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 500;
  font-family: var(--font-accent);
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: scale(0.8);
  animation: popIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

/* 5. Flowboard (Kanban Patient Flow) */
.flowboard-sim-container {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: 12px;
  height: 300px;
  border: 1px solid var(--color-border);
}

.flowboard-title {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 6px;
  display: flex;
  justify-content: space-between;
  color: var(--color-white);
}

.flowboard-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  height: 220px;
}

.flowboard-col {
  background-color: var(--color-bg-dark);
  border-radius: var(--radius-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--color-border);
}

.flowboard-col-title {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white-muted);
  text-align: center;
  border-bottom: 1px dashed var(--color-border);
  padding-bottom: 4px;
}

.flow-card-element {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: transform var(--transition-normal);
}

.flow-card-badge {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  background-color: rgba(197, 168, 128, 0.15);
  color: var(--color-gold-text);
  border: 1px solid var(--color-border-gold);
  padding: 1px 4px;
  border-radius: 2px;
  width: fit-content;
}

/* 6. Reports (Sales Reports / digitail-sales-reports) */
.reports-sim-container {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: 16px;
  height: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--color-border);
}

.reports-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reports-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.reports-stat-box {
  background-color: var(--color-bg-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
}

.reports-stat-label {
  font-family: var(--font-accent);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white-muted);
  margin-bottom: 4px;
}

.reports-stat-value {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-white);
  font-family: var(--font-heading);
}

.reports-charts-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  align-items: flex-end;
}

.reports-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 100px;
  border-bottom: 2px solid var(--color-border);
  padding: 0 10px;
}

.reports-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.reports-bar {
  width: 16px;
  background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-hover) 100%);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  height: 0%;
  transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.reports-bar-label {
  font-size: 0.55rem;
  color: var(--color-white-muted);
}

.reports-line-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-bg-dark);
}

.reports-line-title {
  font-family: var(--font-accent);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.reports-svg-wrap {
  width: 100%;
  height: 60px;
}

.reports-line-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLine 2s linear forwards;
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* ========================================================
   Interactive Scroll Reveal, Blobs & Hover Effects
   ======================================================== */

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Background animated gradient blobs */
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: -2;
  opacity: 0.04; /* Extremely subtle luxury background glow */
  pointer-events: none;
}

.blob-1 {
  width: 500px;
  height: 500px;
  background-color: var(--color-gold);
  top: -10%;
  left: -10%;
  animation: floatBlob1 25s infinite alternate ease-in-out;
}

.blob-2 {
  width: 600px;
  height: 600px;
  background-color: var(--color-gold-hover);
  bottom: 20%;
  right: -10%;
  animation: floatBlob2 30s infinite alternate ease-in-out;
}

.blob-3 {
  width: 450px;
  height: 450px;
  background-color: #E2E6FF; /* Soft blue */
  top: 40%;
  left: 30%;
  animation: floatBlob3 28s infinite alternate ease-in-out;
}

@keyframes floatBlob1 {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(80px, 50px) scale(1.1) rotate(90deg); }
  100% { transform: translate(-40px, 100px) scale(0.9) rotate(180deg); }
}

@keyframes floatBlob2 {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(-100px, -80px) scale(1.15) rotate(-120deg); }
  100% { transform: translate(50px, 60px) scale(0.9) rotate(240deg); }
}

@keyframes floatBlob3 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(120px, -60px) scale(0.85); }
  100% { transform: translate(-60px, 40px) scale(1.05); }
}

/* Hover effects */
.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.pillar-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--color-gold);
}

.reports-stat-box:hover {
  transform: translateY(-4px) scale(1.03);
}

.flow-card-element:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}

/* ========================================================
   Cursor Follower, Testimonial Slider, SVG Hero & Flyer Builder Styles
   ======================================================== */

/* Walking Paw Steps Cursor Trail — removed, using standard cursor */

/* Section Floating Orbs */
.section-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.08; /* Extremely faint ambient gold glow */
  pointer-events: none;
  z-index: 0;
}

/* Flyer Builder Section */

.orb-mint-1 {
  width: 400px;
  height: 400px;
  background-color: var(--color-gold);
  top: -15%;
  right: -8%;
  animation: floatOrbA 18s infinite alternate ease-in-out;
}

.orb-mint-2 {
  width: 300px;
  height: 300px;
  background-color: var(--color-gold-hover);
  bottom: -10%;
  left: -5%;
  animation: floatOrbB 22s infinite alternate ease-in-out;
}

/* FAQ Section Orbs */
.orb-faq-1 {
  width: 350px;
  height: 350px;
  background-color: var(--color-gold);
  top: 10%;
  left: -8%;
  animation: floatOrbA 20s infinite alternate ease-in-out;
}

.orb-faq-2 {
  width: 250px;
  height: 250px;
  background-color: var(--color-gold-hover);
  bottom: 5%;
  right: -5%;
  animation: floatOrbB 16s infinite alternate ease-in-out;
}

.orb-faq-3 {
  width: 200px;
  height: 200px;
  background-color: var(--color-gold-light);
  top: 50%;
  right: 15%;
  animation: floatOrbC 24s infinite alternate ease-in-out;
}

/* Pilot Section Orbs */
.orb-pilot-1 {
  width: 450px;
  height: 450px;
  background-color: var(--color-gold);
  top: -20%;
  left: 20%;
  animation: floatOrbB 20s infinite alternate ease-in-out;
}

.orb-pilot-2 {
  width: 350px;
  height: 350px;
  background-color: var(--color-gold-hover);
  bottom: -15%;
  right: -10%;
  animation: floatOrbA 25s infinite alternate ease-in-out;
}

/* Footer Glow */
.footer-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 160px;
  background: radial-gradient(ellipse, rgba(197, 168, 128, 0.08) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

@keyframes floatOrbA {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.1); }
  100% { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes floatOrbB {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 25px) scale(1.08); }
  100% { transform: translate(30px, -40px) scale(0.92); }
}

@keyframes floatOrbC {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 40px) scale(1.12); }
  100% { transform: translate(-40px, -20px) scale(0.9); }
}

/* Testimonials Deck Section */
.testimonials-deck {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  background: var(--color-reviews-bg);
  background-size: 200% 200%;
  animation: luxuryShift 12s ease infinite;
}

@keyframes luxuryShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Testimonials Deck Carousel */
.carousel-perspective {
  perspective: 1000px;
  width: 100%;
  margin-top: 40px;
}

.carousel-container {
  display: flex;
  justify-content: center;
  position: relative;
  height: 280px;
  width: 100%;
}

.testimonial-card {
  position: absolute;
  width: 100%;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(197, 168, 128, 0.35);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 30px 60px rgba(197, 168, 128, 0.12), 0 12px 25px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: scale(0.92) translateZ(-80px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
  backface-visibility: hidden;
}

.testimonial-card.active {
  opacity: 1;
  transform: scale(1) translateZ(0);
  pointer-events: auto;
  z-index: 3;
  box-shadow: 0 40px 80px rgba(197, 168, 128, 0.18), 0 15px 30px rgba(0, 0, 0, 0.06);
}

.test-quote {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-style: italic;
  color: #2C2623;
  margin: 16px 0;
  line-height: 1.6;
}

.test-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  border-top: 1px solid rgba(197, 168, 128, 0.2);
  padding-top: 16px;
  position: relative;
}

.test-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(197, 168, 128, 0.15);
  color: #8C7355;
  border: 1px solid rgba(197, 168, 128, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.95rem;
}

.test-info h4 {
  font-size: 0.95rem;
  color: #1C1917;
}

.test-info span {
  font-size: 0.75rem;
  color: #6C5F57;
}

.test-pet-tag {
  position: absolute;
  right: 0;
  background-color: rgba(197, 168, 128, 0.1);
  color: #8C7355;
  border: 1px solid rgba(197, 168, 128, 0.25);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--font-accent);
}

.carousel-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.carousel-dot.active {
  background-color: var(--color-gold);
  width: 24px;
  border-radius: 5px;
}

/* Founding-clinic cards (replaced the testimonial carousel pre-launch) */
.founding-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.founding-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.founding-card:hover {
  border-color: var(--color-border-gold-hover);
  box-shadow: var(--shadow-md);
}

.founding-card h3 {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--color-white);
}

.founding-card p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-white-muted);
}

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

/* SVG Hero Animations */
.svg-heartbeat-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawHeartbeat 3.2s infinite linear;
}

@keyframes drawHeartbeat {
  0% { stroke-dashoffset: 200; }
  45% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -200; }
}

.svg-bubble {
  animation: floatBubbleUp 2s infinite linear;
  transform-origin: center;
}

.b-top-1 { animation-delay: 0s; }
.b-top-2 { animation-delay: 0.5s; }
.b-top-3 { animation-delay: 1.1s; }
.b-top-4 { animation-delay: 1.6s; }

@keyframes floatBubbleUp {
  0% { transform: translateY(15px) scale(0.6); opacity: 0; }
  25% { opacity: 0.8; }
  85% { opacity: 0.3; }
  100% { transform: translateY(-35px) scale(1.2); opacity: 0; }
}

.svg-progress-ring {
  stroke-dasharray: 188.4;
  stroke-dashoffset: 188.4;
  animation: fillProgressRing 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fillProgressRing {
  to { stroke-dashoffset: 47.1; }
}

/* Leave Behind Flyer Builder Styles */













/* ========================================================
   Hero Glassmorphism Mockup Card Stack
   ======================================================== */

.hero-dashboard-stack {
  position: relative;
  width: 100%;
  height: 470px;   /* fits the cascade: chat card starts at 250px and is ~197px tall */
  display: flex;
  align-items: center;
  justify-content: center;
}

.stack-card {
  position: absolute;
  background: var(--color-stack-card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  padding: 16px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* A running CSS animation beats a normal declaration in the cascade, so the old hover
   transform here never applied — the card changed colour but never moved. Pausing the float
   and marking the transform !important lets the lift through, and freezing the drift while
   you're reading the card is the better behaviour anyway. */
.stack-card:hover {
  animation-play-state: paused;
  transform: translateY(-8px) scale(1.025) !important;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.6);
  background: var(--color-stack-card-hover);
  border-color: var(--color-gold);
  z-index: 10 !important;
}

/* Base Card Positions
   Cascading down-right with z-index increasing in the same direction, so every card's header
   sits above the card behind it. The previous layout centred .card-vitals over .card-chat and
   covered its title ("Pawra AI Voice Parser") completely — 100% occluded until hovered. */
.card-calendar {
  width: 260px;
  top: 0;
  left: 0;
  z-index: 1;
  animation: floatCard1 8s infinite ease-in-out;
}

.card-vitals {
  width: 240px;
  top: 130px;
  left: 80px;
  z-index: 2;
  animation: floatCard3 7s infinite ease-in-out;
}

.card-chat {
  width: 280px;
  top: 250px;
  left: 160px;
  z-index: 3;
  animation: floatCard2 9s infinite ease-in-out;
}

/* Float amplitude (14px) stays well inside the 120px header offsets, so drift can never
   re-cover a title. */
@keyframes floatCard1 {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-10px) rotate(-0.5deg); }
}

@keyframes floatCard2 {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(-12px) rotate(0deg); }
}

@keyframes floatCard3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* Inner elements styling */
.sc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
  margin-bottom: 12px;
  font-size: 0.75rem;
  font-family: var(--font-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

/* macOS traffic-light dots removed: three fully saturated hues (S68–100%) acting as
   window controls on a card that has no window behaviour. */

/* Calendar grid */
.calendar-mini-grid {
  font-size: 0.7rem;
}
.cal-mini-header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
  font-weight: 700;
  color: var(--color-white-dark);
  margin-bottom: 6px;
}
.cal-mini-days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.cal-mini-day {
  background-color: var(--color-bg-dark);
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  border: 1px solid var(--color-border);
}
.day-num {
  font-weight: 700;
  color: var(--color-white);
}
.cal-badge {
  font-size: 0.5rem;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: var(--radius-pill);
  transform: scale(0.9);
}
.badge-primary {
  background-color: rgba(197, 168, 128, 0.15);
  color: var(--color-gold-text);
  border: 1px solid var(--color-border-gold);
}
.badge-mint {
  background-color: rgba(197, 168, 128, 0.15);
  color: var(--color-gold-text);
  border: 1px solid var(--color-border-gold);
}
.badge-cream {
  background-color: rgba(197, 168, 128, 0.15);
  color: var(--color-gold-text);
  border: 1px solid var(--color-border-gold);
}

/* Chat mini body */
.chat-mini-body {
  font-size: 0.7rem;
}

.chat-trans-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-mini-bubble {
  background-color: var(--color-bg-dark);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.chat-mini-bubble.sent {
  border-left: 3px solid var(--color-gold);
}
.chat-mini-bubble.received {
  border-left: 3px solid rgba(255, 255, 255, 0.3);
}
.voice-wave-mini {
  font-weight: 700;
  color: var(--color-white);
}
.voice-trans {
  display: block;
  font-style: italic;
  color: var(--color-white-muted);
  margin-top: 4px;
}
.trans-success {
  display: block;
  color: var(--color-white);
}
.trans-action {
  display: block;
  color: var(--color-gold-text);
  font-weight: 700;
  margin-top: 2px;
}

/* CSS wins over the SVG stroke="" presentation attribute, so the semantic tokens
   reach the inline icons without touching every svg in the markup. */
.trans-success > svg,
.trans-action > svg { stroke: var(--sem-green); }

.svg-heartbeat-line { stroke: var(--sem-red); }

.vitals-label {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--sem-red);
}

/* Vitals mini body */
.vitals-pet-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pet-emoji {
  font-size: 1.3rem;
  background-color: rgba(197, 168, 128, 0.15);
  padding: 6px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vitals-pet-meta h4 {
  font-size: 0.8rem;
  color: var(--color-white);
}
.vitals-pet-meta span {
  font-size: 0.65rem;
  color: var(--color-white-muted);
}
.vitals-val {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-white);
}

@media (max-width: 992px) {
  .hero-dashboard-stack {
    height: 480px;
    margin-top: 40px;
  }
}

@media (max-width: 576px) {
  .hero-dashboard-stack {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .stack-card {
    position: static;
    transform: none !important;
    animation: none !important;
    width: 100% !important;
  }
}


/* ========================================================
   Dynamic Interactivity & Polish
   ======================================================== */

/* FAQ Stagger Animation — each item delays a bit more */
.faq-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.faq-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.faq-item:nth-child(1) { transition-delay: 0s; }
.faq-item:nth-child(2) { transition-delay: 0.08s; }
.faq-item:nth-child(3) { transition-delay: 0.16s; }
.faq-item:nth-child(4) { transition-delay: 0.24s; }
.faq-item:nth-child(5) { transition-delay: 0.32s; }

/* Badge Shimmer Effect */
.badge {
  position: relative;
  overflow: hidden;
}

.badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: badgeShimmer 4s infinite ease-in-out;
}

@keyframes badgeShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* Animated Gradient CTA Button for Pilot */
.pilot-form .btn-teal {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 50%, var(--color-gold) 100%);
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
  border: none;
  color: #0A0807;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 24px rgba(197, 168, 128, 0.25);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.pilot-form .btn-teal:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 40px rgba(197, 168, 128, 0.45);
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Section Divider Gradient Lines */
.faq::before,
.pilot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 168, 128, 0.15), rgba(197, 168, 128, 0.4), rgba(197, 168, 128, 0.15), transparent);
  z-index: 1;
}

/* Footer Grid Enhanced */
.footer-grid {
  position: relative;
  z-index: 1;
}

.footer-col p {
  position: relative;
  z-index: 1;
}

/* Pilot Card Hover Lift */
.pilot-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.pilot-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 60px 120px rgba(0, 0, 0, 0.3);
}

/* Smooth Floating Particles for FAQ Background */
.faq::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 168, 128, 0.12), transparent);
  z-index: 1;
}

/* Reveal overrides handled by existing .reveal / .reveal.in-view rules above */


/* ========================================================
   Analytics consent
   ======================================================== */

.consent {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: calc(100% - 36px);
  max-width: 760px;
  z-index: 1200;
  background-color: var(--color-header-bg-scrolled);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px 24px 16px;
}

.consent[hidden] { display: none; }

.consent-inner {
  display: flex;
  align-items: center;
  gap: 28px;
}

.consent-copy h2 {
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 4px;
}

.consent-copy p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-white-muted);
}

/* Equal footing: same size, same row, both obviously clickable. */
.consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.consent-actions .btn { white-space: nowrap; }

.consent-fine {
  font-size: 0.72rem;
  color: var(--color-white-dark);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.consent-fine a {
  color: var(--color-gold-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 640px) {
  .consent-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .consent-actions .btn { flex: 1; }
}

/* ========================================================
   Mobile layout fixes
   ======================================================== */

/* Fixed-size circles inside flex rows were being compressed horizontally into ellipses
   on narrow screens. flex-shrink:0 at the source is one rule instead of a media query
   per component. */
.nav-toggle,
.theme-toggle,
.phone-avatar,
.play-icon,
.phone-mic-btn,
.sim-arrow,
.pvc-icon,
.typing-dot,
.faq-icon,
.ai-mic-pulse,
.test-avatar,
.carousel-dot,
.pet-emoji {
  flex-shrink: 0;
}

/* Both pill tab bars sized to their content (max-content / inline-flex) and ran off the
   side of the viewport. Horizontal scrolling fixed the overflow but hid options behind an
   invisible affordance, so below the breakpoint they wrap instead — every tab visible, no
   swiping to discover what exists. The indicator measures both axes, so it still tracks
   the active tab across rows. */
@media (max-width: 760px) {
  .sim-slider-nav,
  .tabs-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    gap: 4px;
    border-radius: var(--radius-lg);
  }

  .sim-tab,
  .tab-btn {
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }

  /* Across rows the pill would slide diagonally over unrelated tabs, which reads as a
     glitch rather than a transition. On mobile the active tab is simply filled. */
  .sim-tab-indicator,
  .tab-indicator { display: none; }

  .sim-tab.active,
  .tab-btn.active {
    background-color: var(--color-gold);
    border-radius: var(--radius-pill);
  }
}

/* Nothing should be able to push the page sideways. */
@media (max-width: 760px) {
  .hero-visual > div[style*="position: absolute"] { display: none; }
  .container { padding-left: 18px; padding-right: 18px; }
}

/* ========================================================
   Document pages (legal.html, about.html)
   ======================================================== */

.doc {
  padding: 200px 0 100px;   /* clears the fixed header at its tallest */
  background-color: var(--color-bg-dark);
}

.doc-inner {
  max-width: 760px;         /* ~70 characters at this size — a comfortable measure */
}

.doc h1 {
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.doc-lede {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-white-muted);
  margin-bottom: 32px;
}

.doc h2 {
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.doc h3 {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold-text);
  margin: 28px 0 8px;
}

.doc section {
  padding-top: 48px;
  margin-top: 24px;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 140px;   /* so anchor jumps clear the fixed header */
}

.doc p,
.doc li {
  color: var(--color-white-muted);
  line-height: 1.7;
  margin-bottom: 14px;
}

.doc ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.doc li { margin-bottom: 10px; }

.doc strong { color: var(--color-white); }

.doc a {
  color: var(--color-gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-draft {
  background-color: rgba(197, 168, 128, 0.08);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 0.92rem;
}

.doc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 8px;
}

.doc-nav a {
  font-family: var(--font-accent);
  font-size: 0.78rem;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-white-muted);
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.doc-nav a:hover {
  color: var(--color-gold-text);
  border-color: var(--color-border-gold-hover);
}

/* Unfilled placeholders — deliberately loud so none of them ship unnoticed. */
.doc-todo {
  background-color: rgba(210, 104, 92, 0.16);
  color: var(--sem-red);
  border: 1px dashed var(--sem-red);
  border-radius: 4px;
  padding: 0 6px;
  font-family: var(--font-accent);
  font-size: 0.85em;
  font-weight: 600;
}

/* ========================================================
   Accessibility preferences
   ======================================================== */

/* Nearly all motion here is CSS-driven, so collapsing durations covers it. Animations that
   reveal content use `forwards`, so they land on their end state (visible) rather than
   disappearing. The exceptions below end on an invisible frame and need explicit handling. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  html,
  .phone-messages { scroll-behavior: auto !important; }

  /* Ends at stroke-dashoffset:-200 — the whole trace would vanish. Show it drawn. */
  .svg-heartbeat-line {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }

  /* Purely decorative and ending on opacity:0 — remove rather than freeze mid-fade. */
  .badge::after,
  .svg-bubble,
  .pulse-ring,
  .ai-mic-pulse::after { display: none !important; }

  .typing-dot { transform: none !important; }

  /* Ambient drift, parallax and hover lift all resolve to the resting position. */
  .stack-card,
  .bg-blob,
  .reviews-orb,
  .section-orb {
    animation: none !important;
    transform: none !important;
  }

  .stack-card:hover { transform: none !important; }

  /* Moving gradients across large surfaces. */
  .testimonials-deck,
  .pilot-form .btn-teal {
    animation: none !important;
    background-size: auto !important;
  }
}

/* Translucent chrome becomes opaque. Overriding the tokens is enough for most surfaces;
   the light-mode block must stay inside this query so it still wins over the base
   [data-theme="light"] rule earlier in the file. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --color-header-bg: #141211;
    --color-header-bg-scrolled: #0A0807;
    --color-stack-card-bg: #141211;
  }

  [data-theme="light"] {
    --color-header-bg: #F5EFEB;
    --color-header-bg-scrolled: #EAE2D8;
    --color-stack-card-bg: #EAE2D8;
  }

  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .sim-slider-nav { background-color: var(--color-bg-card) !important; }
  .testimonial-card { background: #FFFFFF !important; }
}

@media (prefers-contrast: more) {
  :root { --color-border: rgba(255, 255, 255, 0.30); }
  [data-theme="light"] { --color-border: rgba(33, 28, 23, 0.38); }

  .btn-secondary,
  .form-input,
  .faq-item,
  .stack-card { border-color: currentColor; }
}