:root {
  --background: 218 82% 12%;
  --foreground: 43 72% 91%;
  --primary: 42 95% 67%;
  --secondary: 145 45% 58%;
  --muted: 43 35% 78%;
  --destructive: 0 72% 58%;
  --border: 42 50% 82% / 0.16;
  --card: 219 70% 17%;
  --shadow-sm: 0 8px 22px hsl(220 80% 5% / 0.25);
  --shadow-md: 0 18px 55px hsl(220 80% 5% / 0.38), 0 0 28px hsl(42 95% 67% / 0.08);
  --shadow-lg: 0 30px 90px hsl(220 80% 4% / 0.55), 0 0 58px hsl(42 95% 67% / 0.16);
  --transition-fast: 160ms ease;
  --transition-smooth: 420ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.85rem;
  --radius-md: 1.35rem;
  --radius-lg: 2rem;
}
.dark {
  --background: 218 82% 10%;
  --foreground: 43 75% 94%;
  --primary: 42 100% 70%;
  --secondary: 145 52% 62%;
  --muted: 43 32% 80%;
  --destructive: 0 72% 60%;
  --border: 42 55% 84% / 0.18;
  --card: 220 70% 15%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: hsl(var(--background)); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(circle at 15% 10%, hsl(42 95% 67% / .18), transparent 30%), radial-gradient(circle at 80% 20%, hsl(145 45% 58% / .15), transparent 28%), linear-gradient(135deg, hsl(218 82% 12%), hsl(224 78% 8%) 70%); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; opacity: .18; background-image: linear-gradient(hsl(43 72% 91% / .05) 1px, transparent 1px), linear-gradient(90deg, hsl(43 72% 91% / .05) 1px, transparent 1px); background-size: 42px 42px; }
.font-serif { font-family: Georgia, Cambria, "Times New Roman", serif; }
.page-shell { min-height: 70vh; }
.section-pad { max-width: 80rem; margin: 0 auto; padding: 4.5rem 1rem; }
@media (min-width: 640px) { .section-pad { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .section-pad { padding: 6rem 2rem; } }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))); color: hsl(218 82% 10%); font-weight: 900; box-shadow: 0 0 24px hsl(var(--primary) / .35); }
.nav-link { min-height: 44px; display: inline-flex; align-items: center; padding: .65rem .85rem; border-radius: 999px; color: hsl(var(--muted)); transition: var(--transition-fast); font-size: .92rem; }
.nav-link:hover, .nav-link.active { color: hsl(var(--foreground)); background: hsl(var(--primary) / .12); }
.bottom-link { min-height: 54px; border-radius: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; font-size: .72rem; color: hsl(var(--muted)); }
.bottom-link.active { background: hsl(var(--primary) / .14); color: hsl(var(--primary)); }
.glow-btn, .soft-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: .8rem 1.2rem; font-weight: 800; transition: var(--transition-smooth); }
.glow-btn { background: linear-gradient(135deg, hsl(var(--primary)), hsl(34 92% 54%)); color: hsl(218 82% 9%); box-shadow: 0 0 30px hsl(var(--primary) / .28); }
.soft-btn { border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .68); color: hsl(var(--foreground)); backdrop-filter: blur(14px); }
.glow-btn:hover, .soft-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1fr .9fr; } }
.premium-pill, .ingredient-pill { display: inline-flex; align-items: center; min-height: 36px; border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--primary) / .12); color: hsl(var(--primary)); padding: .45rem .85rem; font-weight: 800; font-size: .86rem; }
.section-title { text-align: center; max-width: 48rem; margin: 0 auto 2.2rem; }
.section-title span { color: hsl(var(--primary)); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
.section-title h1, .section-title h2 { margin-top: .7rem; font-family: Georgia, serif; font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 900; line-height: 1.02; }
.glow-card, .product-card, .nutrition-card, .contact-card, .thank-card, .banner-card { border: 1px solid hsl(var(--border)); background: linear-gradient(145deg, hsl(var(--card) / .84), hsl(218 72% 14% / .58)); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); backdrop-filter: blur(18px); }
.glow-card, .product-card, .nutrition-card, .contact-card { padding: 1.35rem; transition: var(--transition-smooth); }
@media (min-width: 640px) { .glow-card, .product-card, .nutrition-card, .contact-card { padding: 1.7rem; } }
.glow-card:hover, .product-card:hover, .nutrition-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: hsl(var(--primary) / .38); }
.feature-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 1.1rem; background: hsl(var(--primary) / .14); color: hsl(var(--primary)); font-size: 1.5rem; }
.banner-card { padding: 1.5rem; display: grid; gap: 2rem; overflow: hidden; }
@media (min-width: 768px) { .banner-card { grid-template-columns: 1fr auto; padding: 2.2rem; } }
.banner-orbit { display: flex; gap: .8rem; font-size: 2.4rem; align-items: center; justify-content: center; }
.banner-orbit span { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--primary) / .11); box-shadow: inset 0 0 28px hsl(var(--primary) / .18); }
.product-art { position: relative; width: min(82vw, 380px); height: 420px; margin: 0 auto; filter: drop-shadow(0 30px 50px hsl(220 80% 3% / .5)); }
.product-art.small { width: 220px; height: 240px; }
.jar-lid { position: absolute; left: 30%; right: 30%; top: 4%; height: 12%; border-radius: 1rem 1rem .35rem .35rem; background: linear-gradient(135deg, hsl(var(--primary)), hsl(34 90% 52%)); }
.jar-body { position: absolute; left: 14%; right: 14%; top: 14%; bottom: 14%; border-radius: 2rem 2rem 3rem 3rem; background: linear-gradient(160deg, hsl(39 72% 74%), hsl(31 62% 45%)); border: 5px solid hsl(43 72% 91% / .35); overflow: hidden; }
.jar-label { position: absolute; left: 12%; right: 12%; top: 34%; min-height: 34%; border-radius: 1.4rem; background: hsl(218 82% 12% / .88); display: grid; place-items: center; text-align: center; padding: 1rem; }
.jar-label strong { color: hsl(var(--primary)); font-size: 2.6rem; line-height: 1; }
.jar-label span { color: hsl(var(--foreground)); font-weight: 900; }
.grain { position: absolute; border-radius: 999px; background: hsl(42 95% 80% / .8); }
.grain-a { width: 34px; height: 12px; left: 14%; top: 18%; transform: rotate(25deg); }
.grain-b { width: 30px; height: 11px; right: 16%; top: 22%; transform: rotate(-18deg); }
.grain-c { width: 38px; height: 13px; left: 42%; bottom: 16%; transform: rotate(8deg); }
.bowl { position: absolute; left: 22%; right: 22%; bottom: 2%; height: 15%; border-radius: 0 0 999px 999px; background: linear-gradient(180deg, hsl(var(--secondary)), hsl(145 42% 34%)); }
.ingredient-cloud { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.metric-line { margin-top: .9rem; padding: .8rem 1rem; border-radius: 1rem; background: hsl(var(--primary) / .09); color: hsl(var(--foreground)); }
.bar { height: 12px; overflow: hidden; border-radius: 999px; background: hsl(218 35% 30% / .62); margin-top: .45rem; }
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, hsl(var(--secondary)), hsl(var(--primary))); animation: grow 1.15s ease both; box-shadow: 0 0 18px hsl(var(--primary) / .3); }
.mini-label { border: 1px solid hsl(var(--border)); border-radius: 1.2rem; padding: 1rem; background: hsl(var(--primary) / .07); }
.mini-label h3 { color: hsl(var(--primary)); font-weight: 900; margin-bottom: .45rem; }
.mini-label p { color: hsl(var(--muted)); font-size: .94rem; margin-top: .25rem; }
.form-label { display: grid; gap: .45rem; color: hsl(var(--muted)); font-weight: 800; margin-bottom: 1rem; }
.form-input { width: 100%; min-height: 48px; border-radius: 1rem; border: 1px solid hsl(var(--border)); background: hsl(218 70% 10% / .58); color: hsl(var(--foreground)); padding: .9rem 1rem; font-size: max(16px, 1rem); outline: none; }
.form-input:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 4px hsl(var(--primary) / .12); }
.thank-card { padding: 2rem 1rem; text-align: center; }
@media (min-width: 640px) { .thank-card { padding: 4rem 2rem; } }
.animate-rise { animation: rise .8s ease both; }
.animate-float { animation: float 5s ease-in-out infinite; }
.stagger { animation: rise .7s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes grow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }