/* =========================================================================
   ATTUNE — Design System & Homepage Styles
   Brand architecture: Corporate · AI · Career Lab · Tea
   Philosophy: Prepare before you perform. AI prepares. Humans decide.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Color tokens */
  --color-plum-900: #241238;
  --color-plum:      #331C52; /* Midnight Plum — authority color */
  --color-plum-700:  #402568;
  --color-plum-600:  #4d2d7d;
  --color-violet:    #9727F4; /* Attune Violet — digital intelligence accent */
  --color-violet-soft: #C79BFA;
  --color-gold:      #C9A15A; /* warm gold — emphasis, trust, milestones (backgrounds/icons/borders) */
  --color-gold-light:#E4C489; /* gold for text on dark backgrounds (AA-safe on Plum) */
  --color-gold-deep: #8A6423; /* gold for text on light backgrounds (AA-safe on White/Cream) */
  --color-peach:     #F5DFCE; /* soft peach background */
  --color-peach-soft:#FBEFE4;
  --color-cream:     #FBF7F1; /* cream / warm off-white */
  --color-ink:       #241B2E; /* deep neutral text */
  --color-ink-soft:  #564C63;
  --color-white:     #FFFFFF;
  --color-line:      rgba(36, 27, 46, 0.12);
  --color-line-light: rgba(255, 255, 255, 0.18);

  /* Typography */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-eyebrow: 0.78rem;
  --fs-caption: 0.82rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.15rem;
  --fs-h3: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem);
  --fs-h2: clamp(1.9rem, 1.5rem + 1.6vw, 2.9rem);
  --fs-h1: clamp(2.4rem, 1.7rem + 3.2vw, 4.6rem);

  /* Spacing scale (base 8) */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;
  --space-9: 9rem;

  /* Grid / layout */
  --container-max: 1220px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadow / depth */
  --shadow-sm: 0 2px 8px rgba(36, 18, 56, 0.06);
  --shadow-md: 0 12px 32px rgba(36, 18, 56, 0.10);
  --shadow-lg: 0 24px 60px rgba(36, 18, 56, 0.18);
  --shadow-gold: 0 10px 30px rgba(201, 161, 90, 0.35);

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; }
}

/* -------------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 var(--space-3);
  color: var(--color-plum);
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--space-3); }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
svg { display: block; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-plum);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--color-violet);
  outline-offset: 3px;
}

section { position: relative; }
section[id], main[id], div[id] { scroll-margin-top: 88px; }

/* Reveal-on-scroll (progressive enhancement, JS toggles .is-visible) */
.reveal {
  opacity: 1;
  transform: none;
}
.js-anim .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
}
.js-anim .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   ------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-violet);
  margin: 0 0 var(--space-3);
  display: inline-block;
}
.eyebrow-light { color: var(--color-gold-light); }

.pill-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-plum);
  background: var(--color-peach);
  border: 1px solid rgba(51, 28, 82, 0.14);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  margin: 0 0 var(--space-4);
}

.section-head { max-width: 720px; margin-bottom: var(--space-7); }
.section-head h2 { font-size: var(--fs-h2); }
.section-intro { font-size: var(--fs-body-lg); color: var(--color-ink-soft); }
.section-intro-light { color: rgba(255,255,255,0.78); }

/* -------------------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--color-plum);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-plum-700); box-shadow: var(--shadow-md); }

.btn-outline-light {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.55);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.btn-outline-dark {
  background: transparent;
  color: var(--color-plum);
  border-color: var(--color-plum);
}
.btn-outline-dark:hover { background: var(--color-plum); color: var(--color-white); }

.btn-sm { padding: 0.65rem 1.4rem; font-size: 0.9rem; }
.btn-block { width: 100%; }

/* -------------------------------------------------------------------------
   5. NAVIGATION
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(251, 247, 241, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard);
}
.site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(36, 18, 56, 0.08);
  border-bottom-color: var(--color-line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-plum);
}
.brand-mark { width: 42px; height: 42px; object-fit: contain; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
}

.primary-nav ul { display: flex; gap: var(--space-5); }
.primary-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
  position: relative;
  padding-block: 0.3rem;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-violet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.4rem;
  color: var(--color-plum);
}
.nav-toggle svg { width: 26px; height: 26px; }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--color-plum);
  color: var(--color-white);
  z-index: 999;
  padding: var(--space-4) var(--container-pad) var(--space-6);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-standard);
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-7); }
.mobile-menu .brand { color: var(--color-white); }
.mobile-menu .nav-toggle { display: inline-flex; color: var(--color-white); }
.mobile-menu-list { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-7); flex: 1; }
.mobile-menu-list a { font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; }

/* -------------------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(175deg, var(--color-plum-900) 0%, var(--color-plum) 62%, var(--color-plum-700) 100%);
  color: var(--color-white);
  overflow: hidden;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-7);
  align-items: center;
}

.hero-copy .eyebrow { color: var(--color-gold-light); }
.hero-headline {
  font-size: var(--fs-h1);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}
.hero-sub {
  font-size: var(--fs-body-lg);
  color: rgba(255,255,255,0.82);
  max-width: 46ch;
  margin-bottom: var(--space-5);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.hero-note { font-size: 0.9rem; color: rgba(255,255,255,0.6); }
.hero-note strong { color: var(--color-gold-light); font-weight: 600; }

/* Hero visual — readiness diagram: scattered nodes converging to a human-approval core */
.hero-visual { position: relative; }
.readiness-diagram {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.readiness-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 1; }
.ring-mid { stroke: rgba(151, 39, 244, 0.35); stroke-dasharray: 4 6; }
.ring-inner { stroke: rgba(201, 161, 90, 0.4); }

.readiness-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, rgba(201,161,90,0.55), rgba(151,39,244,0.28) 60%, transparent 75%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 0 60px rgba(201, 161, 90, 0.35);
}
.core-lotus { width: 60%; object-fit: contain; margin-bottom: 0.4rem; }
.core-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-white); line-height: 1.3; }

.scatter-node {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-gold-light);
  box-shadow: 0 0 14px rgba(201,161,90,0.6);
  animation: drift 7s ease-in-out infinite;
}
.scatter-node.n1 { top: 6%; left: 20%; background: var(--color-violet-soft); animation-delay: 0s; }
.scatter-node.n2 { top: 12%; right: 10%; animation-delay: 1.1s; }
.scatter-node.n3 { top: 46%; left: 2%; background: var(--color-violet-soft); animation-delay: 2s; }
.scatter-node.n4 { bottom: 18%; left: 14%; animation-delay: 0.6s; }
.scatter-node.n5 { bottom: 6%; right: 22%; background: var(--color-violet-soft); animation-delay: 1.6s; }
.scatter-node.n6 { top: 30%; right: 0%; animation-delay: 2.4s; }

@keyframes drift {
  0%, 100% { transform: translate(0,0) scale(1); opacity: 0.85; }
  50% { transform: translate(6px, -8px) scale(1.15); opacity: 1; }
}

.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 36px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-pill);
}
.hero-scroll-cue span {
  display: block;
  width: 4px; height: 8px;
  background: var(--color-gold-light);
  border-radius: 2px;
  margin: 6px auto 0;
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0; }
  100% { opacity: 0; }
}

/* -------------------------------------------------------------------------
   7. CREDIBILITY STATEMENT
   ------------------------------------------------------------------------- */
.credibility { background: var(--color-cream); padding-block: var(--space-7); }
.credibility-inner { max-width: 760px; text-align: center; margin-inline: auto; }
.credibility-statement {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
  color: var(--color-plum);
  font-weight: 500;
  line-height: 1.4;
}

/* -------------------------------------------------------------------------
   8. TRANSFORMATION
   ------------------------------------------------------------------------- */
.transformation {
  background: var(--color-plum);
  color: var(--color-white);
  padding-block: var(--space-8);
}
.transformation h2 { color: var(--color-white); }
.transformation .section-intro { color: rgba(255,255,255,0.75); }

.transform-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  counter-reset: step;
  position: relative;
}
.transform-track::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 4%;
  right: 4%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(201,161,90,0.55), rgba(255,255,255,0.05));
  z-index: 0;
}
.transform-step { position: relative; z-index: 1; padding-top: var(--space-1); }
.transform-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-plum-700);
  border: 1px solid rgba(201,161,90,0.4);
  color: var(--color-gold-light);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.transform-step-final .transform-index {
  background: var(--color-gold);
  color: var(--color-plum-900);
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}
.transform-step h3 { color: var(--color-white); font-size: var(--fs-h3); }
.transform-step p { color: rgba(255,255,255,0.68); font-size: 0.95rem; }

/* -------------------------------------------------------------------------
   9. SERVICES (What ATTUNE Does)
   ------------------------------------------------------------------------- */
.services { background: var(--color-cream); padding-block: var(--space-8); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: transform var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(151,39,244,0.25);
}
.service-index {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-2);
}
.service-card h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.service-card p { color: var(--color-ink-soft); margin-bottom: 0; font-size: 0.96rem; }

/* -------------------------------------------------------------------------
   10. HUMAN EXECUTION INTELLIGENCE
   ------------------------------------------------------------------------- */
.hei {
  background: linear-gradient(180deg, var(--color-peach-soft), var(--color-peach));
  padding-block: var(--space-8);
}
.hei .eyebrow-light { color: var(--color-plum); }

.hei-workflow {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.hei-step {
  flex: 1;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  text-align: left;
}
.hei-step h3 { font-size: 1.15rem; margin-bottom: var(--space-1); display: flex; flex-direction: column; gap: 2px;}
.hei-step h3 span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-gold); font-family: var(--font-body); font-weight: 700; }
.hei-step p { color: var(--color-ink-soft); font-size: 0.92rem; margin-bottom: 0; }
.hei-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-peach);
  color: var(--color-plum);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.hei-icon-gold {
  background: var(--color-gold);
  color: var(--color-plum-900);
  box-shadow: var(--shadow-gold);
}
.hei-step-gate {
  background: var(--color-plum);
  border-color: var(--color-plum);
}
.hei-step-gate h3, .hei-step-gate p { color: var(--color-white); }
.hei-step-gate p { color: rgba(255,255,255,0.78); }

.hei-connector { display: flex; align-items: center; justify-content: center; color: var(--color-violet); flex: 0 0 auto; }
.hei-connector svg { width: 22px; height: 22px; }

.hei-mandate {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-plum);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}
.hei-mandate-icon { width: 76px; height: 76px; object-fit: contain; flex-shrink: 0; }
.hei-mandate p { margin: 0; font-size: 1.1rem; line-height: 1.5; }
.hei-mandate strong { color: var(--color-gold-light); }

.hei-disclosure {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  max-width: 70ch;
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   11. PRIMARY OFFER
   ------------------------------------------------------------------------- */
.offer { background: var(--color-cream); padding-block: var(--space-8); }
.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.offer-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.offer-card h3 { font-size: 1.05rem; margin-bottom: var(--space-2); }
.offer-card p { font-size: 0.92rem; color: var(--color-ink-soft); margin-bottom: 0; }
.offer-card ul { display: flex; flex-direction: column; gap: 0.4rem; }
.offer-card li {
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  padding-left: 1.3rem;
  position: relative;
}
.offer-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-violet);
}
.offer-card-highlight { border-color: var(--color-violet); background: #FAF4FF; }

.offer-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.offer-price p { margin: 0; color: var(--color-ink-soft); max-width: 60ch; }
.offer-price strong { color: var(--color-plum); }

/* -------------------------------------------------------------------------
   12. ECOSYSTEM
   ------------------------------------------------------------------------- */
.ecosystem { background: var(--color-plum-900); color: var(--color-white); padding-block: var(--space-8); }
.ecosystem h2 { color: var(--color-white); }
.ecosystem .section-intro { color: rgba(255,255,255,0.72); }

.ecosystem-diagram {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: var(--space-4);
  position: relative;
  margin-bottom: var(--space-5);
}
.eco-center {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-5);
  margin-bottom: var(--space-2);
}
.eco-center-lotus { width: 88px; height: 88px; object-fit: contain; }
.eco-center span { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-white); }

.eco-node {
  border-radius: var(--radius-md);
  padding: var(--space-5);
  border: 1px solid rgba(255,255,255,0.14);
}
.eco-node h3 { font-size: 1.2rem; }
.eco-node p { color: rgba(255,255,255,0.72); font-size: 0.92rem; margin-bottom: 0; }
.eco-tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: var(--space-2) !important;
  color: var(--color-gold-light);
}

.eco-node-primary {
  background: linear-gradient(155deg, rgba(151,39,244,0.22), rgba(51,28,82,0.6));
  border-color: rgba(151,39,244,0.4);
}
.eco-node-primary h3 { color: var(--color-white); }
.eco-node-secondary {
  background: rgba(255,255,255,0.04);
}
.eco-node-secondary h3 { color: rgba(255,255,255,0.92); }
.eco-node-secondary .eco-tag { color: var(--color-violet-soft); }

.ecosystem-line {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-gold-light);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   13. FOUNDER
   ------------------------------------------------------------------------- */
.founder { background: var(--color-cream); padding-block: var(--space-8); }
.founder-grid {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: var(--space-7);
  align-items: center;
}
.founder-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  background: linear-gradient(155deg, var(--color-peach), var(--color-peach-soft));
  border-radius: var(--radius-lg);
}
.founder-lotus { width: 58%; object-fit: contain; opacity: 1; }
.founder-role {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-violet);
  margin-bottom: var(--space-4);
}
.founder-copy p { color: var(--color-ink-soft); font-size: var(--fs-body-lg); }

/* -------------------------------------------------------------------------
   14. INSIGHTS
   ------------------------------------------------------------------------- */
.insights { background: var(--color-white); padding-block: var(--space-8); }
.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.insight-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: box-shadow var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard);
  text-decoration: none;
  color: inherit;
}
.insight-card:focus-visible { outline: 2px solid var(--color-violet); outline-offset: 3px; }
.insight-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.insight-category {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-violet);
  margin-bottom: 0;
}
.insight-card h3 { font-size: 1.2rem; margin-bottom: 0; }
.insight-card p { color: var(--color-ink-soft); font-size: 0.92rem; margin-bottom: 0; flex-grow: 1; }
.insight-tag {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-peach);
  color: var(--color-plum);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
}

/* -------------------------------------------------------------------------
   15. FINAL CTA + CONTACT FORM
   ------------------------------------------------------------------------- */
.final-cta {
  background: radial-gradient(circle at 20% 20%, rgba(151,39,244,0.35), transparent 55%), var(--color-plum);
  color: var(--color-white);
  padding-block: var(--space-9) var(--space-8);
}
.final-cta-inner { max-width: 780px; margin-inline: auto; text-align: center; }
.final-cta h2 { color: var(--color-white); font-size: var(--fs-h2); }
.cta-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-7); }

.contact-form {
  text-align: left;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.form-row-full { grid-column: 1 / -1; }
.form-row label { font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.form-row label span { font-weight: 400; color: rgba(255,255,255,0.5); }
.form-row input, .form-row select, .form-row textarea {
  background: rgba(255,255,255,0.92);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  border-color: var(--color-violet);
  outline: none;
}
.form-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.form-status { margin: 0; font-size: 0.9rem; color: var(--color-gold-light); }
.form-status.is-error { color: #FFB4A6; }

.required-flag { color: var(--color-gold-light); font-weight: 700; }
.form-hint { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: -0.15rem; }
.field-error {
  font-size: 0.82rem;
  color: #FFB4A6;
  margin: 0.2rem 0 0;
  min-height: 1.1em;
}
.form-row input:invalid.touched, .form-row textarea:invalid.touched {
  border-color: #E4574B;
}

.consent-row { flex-direction: row; align-items: flex-start; gap: 0.6rem; }
.consent-row input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 18px; height: 18px;
  accent-color: var(--color-violet);
  flex-shrink: 0;
}
.consent-row label { font-size: 0.85rem; font-weight: 400; color: rgba(255,255,255,0.85); line-height: 1.5; }
.consent-row a { color: var(--color-gold-light); text-decoration: underline; }

/* Honeypot anti-spam field — hidden from sighted users and keyboard tab order,
   but left in the DOM (not display:none) so basic bots that fill every field get caught. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   16. FOOTER
   ------------------------------------------------------------------------- */
.site-footer { background: var(--color-plum-900); color: rgba(255,255,255,0.82); padding-top: var(--space-7); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand .brand { color: var(--color-white); margin-bottom: var(--space-2); }
.footer-brand p { font-size: 0.9rem; color: rgba(255,255,255,0.68); }
.footer-nav h4, .footer-contact h4, .footer-legal h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.62);
  margin-bottom: var(--space-3);
}
.footer-nav ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-nav a { font-size: 0.92rem; color: rgba(255,255,255,0.88); }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--color-gold-light); text-decoration: underline; }
.placeholder-note { font-size: 0.85rem; color: rgba(255,255,255,0.65); font-style: italic; }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.social-link {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  cursor: not-allowed;
}
.social-link svg { width: 16px; height: 16px; }
.footer-legal ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-legal a { font-size: 0.92rem; color: rgba(255,255,255,0.88); }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--color-gold-light); text-decoration: underline; }
.footer-bottom { padding-block: var(--space-4); font-size: 0.82rem; color: rgba(255,255,255,0.6); }

/* -------------------------------------------------------------------------
   17. RESPONSIVE — TABLET
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; text-align: left; }
  .hero-visual { order: -1; max-width: 360px; margin-inline: auto; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .insights-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-6); }
  .founder-grid { grid-template-columns: 0.5fr 0.5fr; }
  .transform-track { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-5); }
  .transform-track::before { display: none; }
}

/* -------------------------------------------------------------------------
   18. RESPONSIVE — MOBILE
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }

  .hero { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .hero-headline { font-size: clamp(2.1rem, 1.6rem + 4vw, 2.8rem); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }

  .services-grid, .offer-grid, .insights-grid { grid-template-columns: 1fr; }
  .transform-track { grid-template-columns: 1fr; gap: var(--space-5); }

  .hei-workflow { flex-direction: column; }
  .hei-connector { transform: rotate(90deg); margin-block: -0.5rem; }
  .hei-mandate { flex-direction: column; text-align: center; }

  .ecosystem-diagram { grid-template-columns: 1fr; }

  .founder-grid { grid-template-columns: 1fr; }
  .founder-mark { max-width: 220px; margin-inline: auto; }

  .contact-form { grid-template-columns: 1fr; padding: var(--space-4); }

  .offer-price { flex-direction: column; align-items: flex-start; text-align: left; }
  .offer-price .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; }
  .cta-buttons { flex-direction: column; align-items: stretch; }
  .cta-buttons .btn { width: 100%; }
}

/* -------------------------------------------------------------------------
   19. ACCESSIBILITY HELPERS
   ------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root { --color-line: rgba(36,27,46,0.35); }
}

.noscript-banner {
  background: var(--color-gold-light);
  color: var(--color-plum-900);
  text-align: center;
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   20. BACK TO TOP
   ------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 400;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-plum);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard), visibility var(--dur-med);
  border: none;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top svg { width: 20px; height: 20px; transform: rotate(-90deg); }
.back-to-top:hover { background: var(--color-plum-700); }

/* -------------------------------------------------------------------------
   21. FALLBACK: browsers without backdrop-filter support
   ------------------------------------------------------------------------- */
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(251, 247, 241, 0.98); }
}

/* -------------------------------------------------------------------------
   22. HOMEPAGE RESTRUCTURE — founder-up-top, condensed sections, demo peek
   ------------------------------------------------------------------------- */

/* Founder photo (was missing an explicit rule) */
.founder-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
.founder-top { padding-block: var(--space-7); }
.founder-top .founder-grid { align-items: center; }
.founder-ctas { margin-top: var(--space-4); }

/* Compact 3-step problem track (reuses .transform-track base rules) */
.transform-track-short { max-width: 900px; margin-inline: auto; }

/* Compact services grid wraps 4 cards, 2 rows on desktop */
.services-grid-compact { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .services-grid-compact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services-grid-compact { grid-template-columns: 1fr; }
}

/* Demo sneak-peek section */
.demo-peek { background: var(--color-white); padding-block: var(--space-8); }
.demo-peek-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-6);
}
.demo-peek-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-line);
  background: var(--color-plum-900);
}
.demo-peek-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.02);
}
.demo-peek-frame-secondary { align-self: stretch; }
.demo-peek-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: linear-gradient(to top, rgba(36,18,56,0.92) 10%, rgba(36,18,56,0.55) 55%, transparent 100%);
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.demo-peek-lock {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-light);
}
.demo-peek-overlay p { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--color-white); }
.demo-peek-cta { text-align: center; }

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

/* Condensed ecosystem strip (replaces the full diagram on the homepage) */
.ecosystem-strip { padding-block: var(--space-6); }
.ecosystem-strip-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.ecosystem-strip-mark { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.ecosystem-strip-text {
  color: rgba(255,255,255,0.82);
  font-size: 0.98rem;
  max-width: 640px;
  margin: 0;
}
.ecosystem-strip-text strong { color: var(--color-white); }

/* ---------- Branded 404 page ---------- */
.error-page {
  display: flex;
  align-items: center;
  min-height: 70vh;
  padding: 6rem 0;
}
.error-page-inner {
  max-width: 640px;
  text-align: center;
}
.error-page-inner h1 {
  margin: 0.5rem 0 0;
}
.error-page-copy {
  margin-top: 1rem;
  font-size: 1.05rem;
}
.error-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}

/* -------------------------------------------------------------------------
   PRICING (ATTUNE AI plans)
   ------------------------------------------------------------------------- */
.pricing { padding: var(--space-8) 0; background: var(--color-cream); }
.pricing-toggle {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  justify-content: center; margin-bottom: var(--space-5);
}
.pricing-toggle-btn {
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  padding: 0.5rem 1.1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-line); background: var(--color-white); color: var(--color-ink);
}
.pricing-toggle-btn.is-active { background: var(--color-plum); border-color: var(--color-plum); color: var(--color-white); }
.pricing-toggle-note { flex-basis: 100%; text-align: center; font-size: var(--fs-caption); color: var(--color-ink-soft); margin: var(--space-1) 0 0; }
.pricing-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; }
.plan-card {
  display: flex; flex-direction: column; background: var(--color-white);
  border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4);
}
.plan-card-lead { border: 1px solid var(--color-gold); box-shadow: 0 18px 40px rgba(51, 28, 82, 0.10); }
.plan-card-quiet { background: transparent; }
.plan-card h3 { font-family: var(--font-display); margin: 0 0 var(--space-2); }
.plan-price { margin: 0 0 var(--space-2); display: flex; align-items: baseline; gap: 0.3rem; }
.plan-amount { font-family: var(--font-display); font-size: 2rem; color: var(--color-plum); }
.plan-period { font-size: var(--fs-caption); color: var(--color-ink-soft); }
.plan-summary { font-size: 0.95rem; color: var(--color-ink-soft); margin: 0 0 var(--space-3); }
.plan-features { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: 0.4rem; font-size: 0.92rem; }
.plan-features li { padding-left: 1.1rem; position: relative; }
.plan-features li::before { content: "—"; position: absolute; left: 0; color: var(--color-gold-deep); }
.plan-card .btn { margin-top: auto; }
.pricing-disclosure { margin-top: var(--space-4); text-align: center; font-size: var(--fs-caption); color: var(--color-ink-soft); }
.sprint-fields { display: grid; gap: var(--space-2); }

/* ============ 24. SNEAK PEEK — product preview cards + modals ============ */
.peek-grid {
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-6);
}
.peek-card { margin: 0; }
.peek-card-head { margin-bottom: var(--space-3); }
.peek-card-label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-plum-500, #6b3fa0);
}
.peek-card-head h3 { margin: 0 0 4px; font-size: 1.25rem; }
.peek-card-caption { margin: 0; color: var(--color-ink-soft, #5c5566); font-size: 0.95rem; }
.peek-frame {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.peek-frame:hover, .peek-frame:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.peek-frame img {
  width: 100%;
  height: auto;
  max-height: 520px;
  display: block;
  object-fit: contain;
  object-position: top center;
  border-radius: calc(var(--radius-lg) - 8px);
  border: 1px solid var(--color-line);
  background: var(--color-white);
}
.peek-card-feature .peek-frame { box-shadow: var(--shadow-lg); }
.peek-card-feature .peek-frame img { max-height: 620px; }
.peek-zoom {
  position: absolute;
  right: 18px; bottom: 18px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(36,18,56,0.82);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.peek-frame:hover .peek-zoom, .peek-frame:focus-visible .peek-zoom { opacity: 1; }

/* Modals */
.peek-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; }
.peek-modal[hidden] { display: none; }
.peek-modal-backdrop { position: absolute; inset: 0; background: rgba(24,12,38,0.72); backdrop-filter: blur(3px); }
.peek-modal-panel {
  position: relative;
  width: min(1080px, 100%);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  box-shadow: 0 30px 80px rgba(24,12,38,0.35);
  overflow: hidden;
}
.peek-modal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 14px 18px; border-bottom: 1px solid var(--color-line);
}
.peek-modal-title { margin: 0; font-weight: 600; font-size: 0.95rem; }
.peek-close { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; color: inherit; padding: 0 6px; }
.peek-modal-scroll { overflow: auto; padding: 18px; background: var(--color-off-white, #faf8fc); }
.peek-modal-scroll img { width: 100%; height: auto; display: block; object-fit: contain; object-position: top center; border-radius: 10px; border: 1px solid var(--color-line); background: #fff; }
.peek-guided-copy { margin: 0 0 14px; color: var(--color-ink-soft, #5c5566); }
.peek-guided-end { text-align: center; padding: var(--space-6) var(--space-4); }
.peek-guided-end h3 { margin-top: 0; }
.peek-modal-foot { display: flex; justify-content: space-between; gap: var(--space-3); padding: 14px 18px; border-top: 1px solid var(--color-line); }

@media (max-width: 900px) {
  .peek-grid { grid-template-columns: 1fr; }
  .peek-frame img, .peek-card-feature .peek-frame img { max-height: 420px; }
  .peek-zoom { opacity: 1; }
  .peek-modal { padding: 0; }
  .peek-modal-panel { max-height: 100vh; height: 100vh; border-radius: 0; width: 100%; }
}

/* ---------- 25. Early-access billing note ---------- */
.pricing-billing-note {
  max-width: 720px;
  margin: 0 auto var(--space-5);
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-ink-soft, #5c5566);
  background: var(--color-off-white, #faf8fc);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 12px 16px;
}

/* =========================================================================
   26. THEME SYSTEM — light / dark tokens
   ========================================================================= */
:root {
  color-scheme: light;
  --color-cream: #FBF8F4;
  --surface: #FFFFFF;
  --surface-2: #F5EFF8;
  --heading: var(--color-plum);
  --header-bg: rgba(251, 248, 244, 0.86);
  --btn-primary-bg: #6D2DBD;
  --btn-primary-bg-hover: #57239A;
  --btn-primary-fg: #FFFFFF;
  --btn-primary-glow: none;
  --input-bg: #FFFFFF;
  --input-fg: var(--color-ink);
  --input-border: #E5DCEA;
  --input-placeholder: #726A7E;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-plum-900: #0D0914;
  --color-plum:     #171122;
  --color-plum-700: #241A33;
  --color-plum-600: #2E2140;
  --color-violet:      #A568ED;
  --color-violet-soft: #CBA6F8;
  --color-gold:       #D2AA55;
  --color-gold-light: #E4C489;
  --color-gold-deep:  #E0B45F;
  --color-peach:      #1D152A;
  --color-peach-soft: #171122;
  --color-cream:      #0D0914;
  --color-ink:        #F7F2FA;
  --color-ink-soft:   #BDB4C7;
  --color-white:      #F7F2FA;
  --color-line:       rgba(203, 166, 248, 0.22);

  --surface: #151020;
  --surface-2: #1D152A;
  --heading: #FFF9F2;
  --header-bg: rgba(13, 9, 20, 0.88);
  --btn-primary-bg: #8A46DC;
  --btn-primary-bg-hover: #A568ED;
  --btn-primary-fg: #FFFFFF;
  --btn-primary-glow: 0 6px 22px rgba(138, 70, 220, 0.38);
  --input-bg: #1D152A;
  --input-fg: #F7F2FA;
  --input-border: #302440;
  --input-placeholder: #A79FB3;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.60);
  --shadow-gold: 0 10px 30px rgba(210, 170, 85, 0.22);
}

/* Header uses a themed translucent background */
.site-header { background: var(--header-bg); }

/* Primary buttons — ATTUNE Violet in both themes */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  box-shadow: var(--btn-primary-glow, var(--shadow-sm));
}
.btn-primary:hover { background: var(--btn-primary-bg-hover); }

/* Form fields (themed, never pure black / never blending into the page) */
.form-row input, .form-row select, .form-row textarea {
  background: var(--input-bg);
  color: var(--input-fg);
  border: 1px solid var(--input-border);
}
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--input-placeholder); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  border-color: var(--color-violet);
  box-shadow: 0 0 0 3px rgba(151, 39, 244, 0.28);
  outline: none;
}
.form-row input:-webkit-autofill,
.form-row textarea:-webkit-autofill,
.form-row select:-webkit-autofill {
  -webkit-text-fill-color: var(--input-fg);
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
}

/* Global focus ring */
:focus-visible { outline: 2px solid var(--color-violet); outline-offset: 2px; }

/* ---- Dark-mode surface + text corrections ---- */
[data-theme="dark"] :is(h1, h2, h3, h4) { color: var(--heading); }

[data-theme="dark"] :is(
  .service-card, .hei-step, .offer-card, .offer-price, .insights, .demo-peek,
  .plan-card, .peek-card, .peek-frame, .peek-modal-panel, .pricing-toggle-btn,
  .insight-card
) {
  background: var(--surface);
}
[data-theme="dark"] .peek-modal-scroll,
[data-theme="dark"] .peek-modal-scroll img { background: var(--surface-2); }
[data-theme="dark"] .pricing-toggle-btn { color: var(--color-ink); }
[data-theme="dark"] .pricing-toggle-btn.is-active {
  background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: #fff;
}
[data-theme="dark"] .pricing-billing-note { background: var(--surface-2); }

[data-theme="dark"] .eyebrow,
[data-theme="dark"] .insight-tag {
  background: var(--surface-2);
  color: var(--color-violet-soft);
  border-color: var(--color-line);
}
[data-theme="dark"] .hei .eyebrow-light,
[data-theme="dark"] .credibility-statement,
[data-theme="dark"] .offer-price strong,
[data-theme="dark"] .plan-amount,
[data-theme="dark"] .peek-card-label { color: var(--color-violet-soft); }
[data-theme="dark"] .brand,
[data-theme="dark"] .nav-toggle { color: var(--color-ink); }
[data-theme="dark"] .hei-icon { background: var(--surface-2); color: var(--color-violet-soft); }
[data-theme="dark"] .hei-icon-gold { color: #1A1423; }
[data-theme="dark"] .hei-step-gate { background: var(--surface-2); border-color: var(--color-violet); }
[data-theme="dark"] .btn-outline-dark { color: var(--color-ink); border-color: var(--color-violet); }
[data-theme="dark"] .btn-outline-dark:hover { background: var(--color-violet); color: #fff; }
[data-theme="dark"] .back-to-top { background: var(--btn-primary-bg); color: #fff; }
[data-theme="dark"] .founder-mark { background: linear-gradient(155deg, var(--surface-2), var(--surface)); }

/* Product preview frames: never recolor the screenshots, only their chrome */
.peek-frame img, .peek-modal-scroll img, .demo-peek-frame img { filter: none; }
[data-theme="dark"] .peek-frame {
  border-color: rgba(165, 104, 237, 0.35);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(165, 104, 237, 0.12);
}

/* ---- Theme toggle ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.theme-toggle-btn svg { width: 17px; height: 17px; }
.theme-toggle-btn:hover { color: var(--color-ink); background: var(--surface-2); }
.theme-toggle-btn[aria-pressed="true"] {
  background: var(--btn-primary-bg);
  color: #fff;
}
.mobile-menu .theme-toggle {
  width: 100%;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  margin-bottom: var(--space-4);
  padding: 6px;
}
.mobile-menu .theme-toggle-btn {
  flex: 1;
  width: auto;
  min-height: 48px;
  border-radius: var(--radius-pill);
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 600;
}
.mobile-menu .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.mobile-menu .theme-toggle-btn[aria-pressed="true"] { background: var(--btn-primary-bg); color: #fff; }

@media (max-width: 900px) {
  .nav-actions .theme-toggle { display: none; }
}

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

.mobile-menu .theme-toggle { margin: var(--space-4) 0 0; }