:root {
  --background: 60 9% 98%;
  --foreground: 11 6% 11%;
  --primary: 11 6% 11%;
  --muted: 0 0% 45%;
  --border: 0 0% 90%;
  --accent-blue: #84a9fa;
  --accent-teal: #7ad3c2;
  --accent-peach: #fba69e;
  --accent-green: #2FA37C;
  --radius: 9999px;

  /* ---- Tweakable brand signature (driven by the Tweaks panel) ----
     --brand-1 / --brand-2 = the teal→blue duotone (logo, pills, orbs)
     --brand-accent        = the “trust” accent (live dots, ticks, CTAs)
     The per-category tints (peach/dusk/etc) stay fixed as supporting color. */
  --brand-1: #0FA39A;
  --brand-2: #2F5FD6;
  --brand-accent: #1F9D6B;

  /* ---- Tweakable type ---- */
  --font-body: 'Inter';
  --font-display: 'Newsreader';
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body), 'Inter', sans-serif;
  background: #FAFAF8;
  color: hsl(var(--foreground));
  overflow-x: hidden;
}

/* Display font drives large headings; falls back to the body font.
   h3 stays on the body sans for dense UI labels (portal section heads).
   Serif display reads best at medium weight, and weight 500 loads reliably
   (Newsreader 600 subsets lazy-load) — so we pin 500 + a touch of negative
   tracking for an editorial, premium headline. */
#root h1, #root h2 {
  font-family: var(--font-display), var(--font-body), 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.015em;
}

::selection { background: color-mix(in srgb, var(--brand-1) 35%, transparent); }

/* Balanced wrapping for headings + safe anchor offset under the sticky nav */
#root h1, #root h2 { text-wrap: balance; }
#top, #conditions, #science, #care, #pricing { scroll-margin-top: 88px; }

/* ---- Brand accent overrides (let the Tweaks palette recolor key marks) ---- */
.text-accentgreen { color: var(--brand-accent) !important; }
.bg-accentgreen { background-color: var(--brand-accent) !important; }
.bg-accentgreen\/12 { background-color: color-mix(in srgb, var(--brand-accent) 12%, transparent) !important; }
.text-accentteal { color: var(--brand-1) !important; }

/* ---- Gradient pill (animated border) ---- */
.grad-pill {
  background-image: linear-gradient(90deg, var(--brand-2), var(--brand-1), var(--accent-peach), var(--brand-2));
  background-size: 200% 100%;
  background-position: 0% 0%;
  transition: background-position 0.8s ease;
}
.grad-pill:hover { background-position: 200% 0%; }

/* ---- Scroll reveal (framer whileInView replacement) ----
   Base state is VISIBLE so content can never get stuck hidden if the
   trigger misfires. The entrance plays as a one-shot keyframe animation
   added by JS when the element scrolls into view. ---- */
.reveal { opacity: 1; transform: none; }
.reveal.anim-in {
  animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Marquee ---- */
@keyframes marquee {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes marquee-reverse {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}
.marq      { animation: marquee 38s linear infinite; }
.marq-rev  { animation: marquee-reverse 44s linear infinite; }
.marq-wrap:hover .marq,
.marq-wrap:hover .marq-rev { animation-play-state: paused; }

/* ---- Accordion height-auto reveal ---- */
.acc-grid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.acc-grid.open { grid-template-rows: 1fr; }
.acc-inner { overflow: hidden; }

/* ---- Spotlight base treatment ---- */
.spot-base { filter: grayscale(1) brightness(1.04) contrast(0.96); }

/* Soft floating animation for accent orbs */
@keyframes float-slow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, -18px); }
}
.float-slow { animation: float-slow 9s ease-in-out infinite; }

/* Subtle grain overlay helper */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.04; mix-blend-mode: multiply; pointer-events: none;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   PREMIUM MOTION + INTERACTION LAYER
   ============================================================ */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* ---- Focus ring (keyboard only) ---- */
.btn-focus:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 60%, transparent);
}

/* ---- Button sheen sweep ---- */
.btn-shell { position: relative; overflow: hidden; }
.btn-shell::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: translateX(-180%) skewX(-12deg);
  transition: transform 0.75s var(--ease-out);
  pointer-events: none;
}
.btn-shell:hover::after { transform: translateX(320%) skewX(-12deg); }

/* ---- Logo mark ---- */
@keyframes logo-pop {
  0%   { opacity: 0; transform: scale(0.55) rotate(-14deg); }
  60%  { transform: scale(1.07) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.logo-pop { animation: logo-pop 0.7s var(--ease-spring) both; }
@keyframes logo-draw {
  from { stroke-dashoffset: 52; }
  to   { stroke-dashoffset: 0; }
}
.logo-stroke { stroke-dasharray: 52; animation: logo-draw 0.95s var(--ease-out) 0.18s both; }
.logo-sheen { position: absolute; inset: 0; border-radius: 9999px; overflow: hidden; pointer-events: none; }
.logo-sheen::after {
  content: "";
  position: absolute; top: -50%; left: -70%; width: 55%; height: 200%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.75), transparent);
  transform: translateX(-30px) rotate(10deg);
  transition: transform 0.65s var(--ease-out);
}
.group:hover .logo-sheen::after { transform: translateX(170px) rotate(10deg); }

/* ---- Hero headline: word-by-word rise on load ---- */
@keyframes word-rise {
  from { opacity: 0; transform: translateY(0.7em); }
  to   { opacity: 1; transform: translateY(0); }
}
.word { display: inline-block; white-space: pre; }
.word > span { display: inline-block; }
.word > span.is-anim {
  animation: word-rise 0.72s var(--ease-out) both;
  animation-delay: var(--d, 0s);
}

/* ---- Generic load entrance (nav, etc.) — rests visible ---- */
@keyframes enter-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.enter-down.is-anim { animation: enter-down 0.6s var(--ease-out) both; }

/* ---- Nav link underline grow ---- */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.34s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }

/* ---- Scroll-progress bar (under the navbar) ---- */
.scroll-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: var(--sp, 0%);
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  transition: width 0.12s linear;
}

/* ---- Reveal: scale variant for cards/imagery ---- */
.reveal.anim-in.rv-scale { animation: rise-scale 0.82s var(--ease-out) both; }
@keyframes rise-scale {
  from { opacity: 0; transform: translateY(26px) scale(0.975); }
  to   { opacity: 1; transform: none; }
}

/* ---- Card lift helper (consistent premium hover) ---- */
.lift { transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.lift:hover { transform: translateY(-4px); }

/* ---- Ambient drifting gradient orbs (dark bands) ---- */
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(5%, -4%) scale(1.12); }
  100% { transform: translate(0, 0) scale(1); }
}
.ambient-orb { animation: drift 16s ease-in-out infinite; }

/* ---- Tilt (JS-driven pointer rotate, rests flat) ---- */
.tilt { transition: transform 0.3s var(--ease-out); will-change: transform; }

/* ---- Chat bubble pop + typing dots (phone mockup) ---- */
@keyframes bubble-in {
  from { transform: translateY(10px) scale(0.96); }
  to   { transform: none; }
}
.bubble-in { animation: bubble-in 0.42s var(--ease-out) both; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}
.typing-dot { animation: typing-dot 1.2s infinite; }

/* ---- Phone float ---- */
@keyframes phone-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-0.6deg); }
}
.phone-float { animation: phone-float 7s ease-in-out infinite; }

/* ---- How-it-works: connector draw + step reveal + pulse (rest visible) ---- */
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.connector-line { transform-origin: left; }
.connector-line.is-anim { animation: grow-x 1s var(--ease-out) 0.1s both; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.step-card.is-anim { animation: step-in 0.7s var(--ease-out) both; animation-delay: var(--sd, 0s); }
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.5; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { opacity: 0; }
}
.pulse-ring { animation: pulse-ring 2.8s ease-out infinite; }