html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; background: #FAF7F2; color: #1A1A1A; -webkit-font-smoothing: antialiased; }

/* Display serif tweak */
.display { font-family: 'Fraunces', Georgia, serif; font-variation-settings: "SOFT" 30, "opsz" 144; letter-spacing: -0.02em; line-height: 1.05; }
.display em { font-style: italic; font-variation-settings: "SOFT" 100, "opsz" 144; }

/* Lettrine (drop cap) */
.dropcap::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 4.5rem;
  line-height: 0.85;
  float: left;
  margin: 0.4rem 0.6rem 0 0;
  color: #00A86F;
}

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

/* Bowl animation */
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.breathe { animation: breathe 6s ease-in-out infinite; }

@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(3deg); } }
.floaty { animation: float 7s ease-in-out infinite; }

/* Yin-Yang orb */
@keyframes spin { to { transform: rotate(360deg); } }
.orb-stage { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 1; }
.orb-rings { position: absolute; inset: -8%; border-radius: 50%; border: 1px solid #E6E0D5; pointer-events: none; }
.orb-rings::before, .orb-rings::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid #E6E0D5; }
.orb-rings::before { inset: -8%; opacity: 0.6; }
.orb-rings::after { inset: -16%; opacity: 0.3; }
.orb { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  box-shadow: 0 50px 100px -30px rgba(0, 121, 79, 0.35), 0 0 0 1px rgba(0,0,0,0.05);
  animation: spin 48s linear infinite; }
.orb-half-dark, .orb-half-light { position: absolute; width: 50%; height: 100%; }
.orb-half-dark { left: 0;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15), transparent 55%), linear-gradient(180deg, #00C785, #00A86F);
  border-radius: 100% 0 0 100% / 50% 0 0 50%; }
.orb-half-light { right: 0;
  background: radial-gradient(circle at 70% 60%, rgba(0,0,0,0.04), transparent 50%), linear-gradient(180deg, #FBF8EF, #FAF7F2);
  border-radius: 0 100% 100% 0 / 0 50% 50% 0; }
.orb-bulb { position: absolute; width: 50%; height: 50%; border-radius: 50%; }
.orb-bulb--top { top: 0; left: 25%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.18), transparent 55%), linear-gradient(180deg, #00C785, #00A86F); }
.orb-bulb--bot { bottom: 0; left: 25%;
  background: radial-gradient(circle at 60% 65%, rgba(0,0,0,0.04), transparent 55%), linear-gradient(180deg, #FBF8EF, #FAF7F2); }
.orb-dot { position: absolute; width: 14%; height: 14%; border-radius: 50%; z-index: 3; }
.orb-dot--on-dark { top: 18%; left: 43%; background: #FAF7F2; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.orb-dot--on-light { bottom: 18%; left: 43%; background: #00A86F; }
.orb-label { position: absolute; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 0.9rem; letter-spacing: 0.2em; color: #6B6B6B; text-transform: lowercase; }
.orb-label--yin { top: 8%; right: -50px; }
.orb-label--yang { bottom: 8%; left: -50px; }

/* Orb fruits — exact v1 */
.orb-fruit {
  position: absolute; font-size: 2.4rem; line-height: 1; z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.18));
  animation: orbFloat 7s ease-in-out infinite;
  will-change: transform;
}
.orb-fruit--1 { top: 4%;  left: 8%;   animation-delay: 0s;    font-size: 2.6rem; }
.orb-fruit--2 { top: -4%; left: 52%;  animation-delay: -1.2s; font-size: 2.2rem; }
.orb-fruit--3 { top: 18%; right: -2%; animation-delay: -2.4s; font-size: 2.5rem; }
.orb-fruit--4 { top: 60%; right: -6%; animation-delay: -3.6s; font-size: 2.3rem; }
.orb-fruit--5 { bottom: 2%; right: 18%; animation-delay: -4.8s; font-size: 2.7rem; }
.orb-fruit--6 { bottom: -4%; left: 38%; animation-delay: -1.8s; font-size: 2.4rem; }
.orb-fruit--7 { bottom: 14%; left: -4%; animation-delay: -3s;   font-size: 2.5rem; }
.orb-fruit--8 { top: 44%; left: -8%;  animation-delay: -5.4s; font-size: 2.4rem; }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  50%      { transform: translate(0, -14px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) { .orb-fruit { animation: none; } }
@media (max-width: 720px) { .orb-fruit { font-size: 1.7rem !important; } }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Backdrop for sticky nav */
.nav-blur { backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); background-color: rgba(250, 247, 242, 0.78); }

/* Smooth toggle pill */
.toggle-pill { transition: transform 0.3s cubic-bezier(.4,0,.2,1); }

/* FAQ accordion */
.faq-item[data-open="true"] .faq-content { grid-template-rows: 1fr; }
.faq-item[data-open="true"] .faq-icon { transform: rotate(45deg); }
.faq-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.faq-content > div { overflow: hidden; }

/* Yin-Yang gauge */
.gauge-track { background: conic-gradient(from 180deg at 50% 50%, #5B6CE8 0deg, #00C785 180deg, #E89B5C 360deg); }

/* Bento card hover */
.bento-card { transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease; }
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -25px rgba(0,0,0,0.15); }

/* Marquee */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track { animation: marquee 40s linear infinite; }

/* Image placeholder pattern */
.img-placeholder { background:
    linear-gradient(135deg, rgba(0,167,111,.18), rgba(232,155,92,.18)),
    repeating-linear-gradient(45deg, rgba(26,26,26,0.04) 0 2px, transparent 2px 14px);
}

/* iPhone frame */
.iphone {
  width: 280px; height: 580px; border-radius: 48px;
  background: linear-gradient(180deg, #1A1A1A 0%, #2a2a2a 100%);
  padding: 14px;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.06);
  position: relative;
}
.iphone::before { content:''; position:absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 110px; height: 30px; background: #000; border-radius: 999px; z-index: 2; }
.iphone-screen { background: #FAF7F2; height: 100%; border-radius: 36px; overflow: hidden; }

/* Pricing highlight */
.pricing-glow { box-shadow: 0 0 0 1px #7C3AED, 0 30px 80px -30px rgba(124,58,237,0.45); }

/* Selectable accent for Yin/Yang levels */
.lvl-tres-yin { background: #4150C2; color: white; }
.lvl-yin { background: #5B6CE8; color: white; }
.lvl-equilibre { background: #00C785; color: white; }
.lvl-yang { background: #E89B5C; color: white; }
.lvl-tres-yang { background: #C97834; color: white; }