/* BellyCalm — Premium Apple-like landing
   - Mobile (360–900px): content centered
   - Desktop: content aligned left
   - No overflow-x on 360px
*/
:root{
  --bg:#f6f9ff;
  --bg2:#eef6ff;
  --surface: rgba(255,255,255,.72);
  --surface2: rgba(255,255,255,.88);
  --text:#0b1020;
  --muted: rgba(11,16,32,.72);
  --border: rgba(11,16,32,.14);

  --a1:#3b82f6;
  --a2:#a78bfa;
  --a3:#fb7185;

  --p1:#c7f9cc;
  --p2:#ffd6e8;
  --p3:#cfe8ff;

  --g1: radial-gradient(1000px 700px at 18% 12%, rgba(59,130,246,.26), transparent 60%),
        radial-gradient(900px 700px at 86% 10%, rgba(167,139,250,.24), transparent 55%),
        radial-gradient(900px 700px at 72% 88%, rgba(251,113,133,.20), transparent 58%),
        linear-gradient(180deg, var(--bg), var(--bg2));
  --g2: linear-gradient(135deg, rgba(59,130,246,.95), rgba(167,139,250,.95), rgba(251,113,133,.92));
  --ctaGrad: linear-gradient(135deg, rgba(59,130,246,.98), rgba(167,139,250,.98), rgba(251,113,133,.98));

  --shadow: 0 18px 50px rgba(11,16,32,.10);
  --shadow2: 0 12px 32px rgba(11,16,32,.14);
  --radius: 20px;
  --radius2: 28px;

  --container: 1120px;
  --pad: 20px;

  --dur: 420ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}

html[data-theme="dark"]{
  --bg:#070a12;
  --bg2:#0a0f1e;
  --surface: rgba(14,20,38,.72);
  --surface2: rgba(14,20,38,.88);
  --text:#eef3ff;
  --muted: rgba(238,243,255,.72);
  --border: rgba(238,243,255,.14);
  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --shadow2: 0 14px 36px rgba(0,0,0,.52);

  --g1: radial-gradient(900px 700px at 16% 10%, rgba(59,130,246,.22), transparent 58%),
        radial-gradient(900px 700px at 86% 10%, rgba(167,139,250,.20), transparent 55%),
        radial-gradient(900px 700px at 72% 88%, rgba(251,113,133,.18), transparent 58%),
        linear-gradient(180deg, var(--bg), var(--bg2));
}

*{ box-sizing:border-box; }
html, body { height:100%; }
html, body { overflow-x:hidden; overflow-x:clip; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: var(--g1);
  line-height:1.45;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }
p{ margin:0 0 10px; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; letter-spacing:-.02em; }
h1{ font-size: clamp(34px, 3.6vw, 56px); line-height:1.05; }
h2{ font-size: clamp(24px, 2.4vw, 34px); line-height:1.12; }
h3{ font-size: 18px; line-height:1.2; }

.small{ font-size: 13px; }
.muted{ color: var(--muted); }
.lead{ font-size: clamp(16px, 1.15vw, 18px); color: var(--muted); }
.kicker{ display:inline-flex; gap:10px; align-items:center; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background: rgba(255,255,255,.38); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
html[data-theme="dark"] .kicker{ background: rgba(14,20,38,.55); }

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

/* Accessibility */
.skip-link{
  position:absolute; left:-999px; top:0;
  background: var(--text); color: var(--bg);
  padding:10px 14px; border-radius:12px; z-index:9999;
}
.skip-link:focus{ left: 12px; top: 12px; }

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

/* Language hint bar (root only) */
.lang-suggest{
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,.65);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .lang-suggest{ background: rgba(14,20,38,.68); }
.lang-suggest__inner{
  display:flex; align-items:center; gap: 12px;
  padding: 10px 0;
}
.lang-suggest__text{ font-weight: 650; }
.lang-suggest__links{ margin-left:auto; display:flex; gap: 10px; flex-wrap:wrap; }
.lang-suggest__links a{
  padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 999px; background: rgba(255,255,255,.40);
}
html[data-theme="dark"] .lang-suggest__links a{ background: rgba(14,20,38,.5); }
.lang-suggest__close{
  border: 0; background: transparent; color: var(--muted);
  width: 36px; height: 36px; border-radius: 12px;
}
.lang-suggest__close:hover{ background: rgba(0,0,0,.06); }
html[data-theme="dark"] .lang-suggest__close:hover{ background: rgba(255,255,255,.06); }

/* Header */
.site-header{
  position: sticky; top:0; z-index: 90;
  background: rgba(255,255,255,.55);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
html[data-theme="dark"] .site-header{ background: rgba(14,20,38,.62); }

.progress{ position:absolute; left:0; right:0; top:0; height:2px; background: transparent; }
.progress__bar{
  display:block; height:2px; width:0%;
  background: var(--g2);
}

.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px;
  padding: 12px 0;
}

.brand{ display:flex; align-items:center; gap: 10px; min-width: 140px; }
.brand__text{ font-weight: 800; letter-spacing:-.03em; }
.brand--footer .brand__text{ font-weight: 750; }
.nav--desktop{ display:flex; gap: 14px; align-items:center; }
.nav__link{
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--muted);
}
.nav__link:hover{ background: rgba(0,0,0,.06); color: var(--text); }
html[data-theme="dark"] .nav__link:hover{ background: rgba(255,255,255,.06); }

.header__actions{ display:flex; align-items:center; gap: 10px; }

.lang{ position: relative; }
.lang__btn{ display:flex; align-items:center; gap: 8px; }
.lang__value{ font-weight: 750; }
.lang__menu{
  position:absolute; right:0; top: calc(100% + 8px);
  min-width: 220px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow2);
  padding: 8px;
  display:none;
}
.lang__item{
  display:flex; padding: 10px 10px;
  border-radius: 12px;
  color: var(--text);
}
.lang__item:hover{ background: rgba(0,0,0,.06); }
html[data-theme="dark"] .lang__item:hover{ background: rgba(255,255,255,.06); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: 10px;
  font-weight: 750;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  user-select:none;
}
.btn:focus-visible{
  outline: 3px solid rgba(59,130,246,.55);
  outline-offset: 2px;
}
.btn--block{ width: 100%; }
.btn--primary{
  color: #0b1020;
  background: var(--ctaGrad);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 32px rgba(59,130,246,.18);
}
.btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 18px 44px rgba(59,130,246,.24); }
.btn--ghost{
  background: rgba(255,255,255,.35);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .btn--ghost{ background: rgba(14,20,38,.55); }
.btn--ghost:hover{ transform: translateY(-1px); }

.header__cta{ }
.theme__btn{ padding: 12px 12px; }
.icon{ display:block; }

.burger{
  display:none;
  width: 44px; height: 44px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.35);
}
html[data-theme="dark"] .burger{ background: rgba(14,20,38,.55); }
.burger__bar{
  display:block; height: 2px; width: 18px; margin: 4px auto;
  background: var(--text);
  border-radius: 2px;
  opacity: .92;
}

/* Drawer (mobile menu) */
.drawer{
  border: none;
  padding: 0;
  background: transparent;
  width: 100%;
  max-width: none;
  height: 100%;
}
.drawer::backdrop{
  background: rgba(0,0,0,.36);
  backdrop-filter: blur(4px);
}
.drawer__panel{
  position: fixed;
  right: 10px;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  width: min(380px, calc(100vw - 20px));
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--surface2);
  box-shadow: var(--shadow2);
  padding: 12px;
  overflow:auto;
}
.drawer__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 6px 6px 10px; }
.drawer__title{ font-weight: 800; }
.drawer__nav{ display:flex; flex-direction:column; gap: 6px; padding: 6px; }
.drawer__nav .nav__link{ padding: 12px 12px; border: 1px solid transparent; border-radius: 16px; }
.drawer__nav .nav__link:hover{ border-color: var(--border); }
.nav__link--cta{ color: var(--text); background: rgba(0,0,0,.04); }
html[data-theme="dark"] .nav__link--cta{ background: rgba(255,255,255,.06); }
.drawer__meta{ padding: 10px 6px 4px; }

.drawer__close{ padding: 10px 12px; }

/* Sections */
section{ padding: 30px 0; }
.section__title{ margin-bottom: 14px; }

.hero{ padding-top: 26px; padding-bottom: 30px; min-height: 100svh; display:flex; align-items:center; }
.hero__inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items:center;
}
.hero__copy{ max-width: 620px; }
.hero__ctas{ display:flex; gap: 12px; flex-wrap:wrap; margin-top: 16px; }
.trust{ margin-top: 12px; }

.bullets{ margin-top: 14px; display:grid; gap: 10px; }
.bullets li{
  padding-left: 28px;
  position:relative;
  color: var(--muted);
}
.bullets li::before{
  content:"";
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--g2);
  position:absolute; left: 6px; top: 8px;
}

.hero__media{ position: relative; }
.hero__frame{
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 18px;
  overflow:hidden;
}
.hero__frame picture{ display:block; }
.hero__frame img{ width: 100%; object-fit: contain; }
.hero__glow{
  position:absolute;
  inset: -40px;
  background: radial-gradient(380px 320px at 50% 40%, rgba(59,130,246,.28), transparent 62%),
              radial-gradient(380px 320px at 70% 70%, rgba(251,113,133,.22), transparent 62%);
  filter: blur(12px);
  pointer-events:none;
  z-index:-1;
}

/* Experience */
.experience{ min-height: 100svh; display:block; }
.exp{ display:grid; grid-template-columns: .95fr 1.05fr; gap: 22px; align-items:start; }
.exp__media{ position: sticky; top: 88px; align-self:start; }
.exp-media{
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px;
  overflow:hidden;
}
.exp-media__item{ display:none; }
.exp-media__item.is-active{ display:block; animation: fadeIn var(--dur) var(--ease); }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none; } }

.step{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.35);
  padding: 14px 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
html[data-theme="dark"] .step{ background: rgba(14,20,38,.52); }
.step__title{ margin-bottom: 6px; }
.step.is-active{
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 16px 38px rgba(59,130,246,.12);
}

/* Grid + cards */
.grid{ display:grid; gap: 14px; }
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.38);
  padding: 16px 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
html[data-theme="dark"] .card{ background: rgba(14,20,38,.55); }
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
  border-color: rgba(59,130,246,.28);
}
.card--ingredient h3{ font-size: 16px; }
.ingredient__icon{
  width: 84px; height: 84px;
  display:grid; place-items:center;
  border-radius: 20px;
  background: transparent;
  border: 0;
  margin-bottom: 10px;
}
.ingredient__icon img{ width: 100%; height: 100%; object-fit: contain; display:block; }

/* How panel */
.how__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel{
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  background: var(--surface);
  padding: 18px;
  box-shadow: var(--shadow);
}
.panel--alt{
  background: rgba(255,255,255,.34);
}
html[data-theme="dark"] .panel--alt{ background: rgba(14,20,38,.5); }

.checklist{ display:grid; gap: 10px; margin-top: 10px; }
.checklist li{
  position:relative;
  padding-left: 28px;
  color: var(--muted);
}
.checklist li::before{
  content:"✓";
  position:absolute; left: 6px; top: 0;
  color: rgba(59,130,246,.9);
  font-weight: 800;
}
.mini-proof{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px; }
.pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.30);
  color: var(--muted);
  font-size: 13px;
}
html[data-theme="dark"] .pill{ background: rgba(14,20,38,.42); }

/* Plans */
.grid--plans{ align-items: stretch; }
.plan{
  display:flex; flex-direction:column; align-items:stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.plan:hover{ transform: translateY(-2px); box-shadow: 0 22px 60px rgba(0,0,0,.12); border-color: rgba(59,130,246,.30); }
.plan__head{ padding: 16px 16px 0; }
.plan__media{ padding: 14px 16px 0; }
.plan__media img{ width:100%; object-fit: contain; }
.plan__price{ padding: 10px 16px 0; }
.plan__total{ font-size: 28px; font-weight: 900; letter-spacing:-.03em; }
.plan__cta{ margin-top:auto; padding: 14px 16px 16px; display:flex; flex-direction:column; gap: 8px; }

.badge{
  display:inline-flex; align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(59,130,246,.16);
  border: 1px solid rgba(59,130,246,.25);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
}
.badge--best{
  background: rgba(251,113,133,.16);
  border-color: rgba(251,113,133,.25);
}

.pricing__note{ margin-top: 10px; }

/* Guarantee */
.guarantee__box{
  display:flex; align-items:center; gap: 16px; flex-wrap:wrap;
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 18px;
}
.guarantee__badge{
  width: 84px; height: 84px;
  border-radius: 24px;
  background: var(--g2);
  display:grid; place-items:center;
  color: #0b1020;
  font-weight: 950;
  letter-spacing:-.03em;
}
.guarantee__badge span{ font-size: 30px; line-height: 1; }
.guarantee__badge small{ font-size: 12px; opacity: .9; }

/* Bonuses */
.bonus-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.bonus{
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.34);
  box-shadow: 0 10px 28px rgba(0,0,0,.07);
  overflow:hidden;
  display:flex; flex-direction:column;
}
html[data-theme="dark"] .bonus{ background: rgba(14,20,38,.5); }
.bonus__media{ padding: 14px 14px 0; }
.bonus__body{ padding: 12px 14px 16px; }

/* FAQ */
.faq__grid{ display:grid; gap: 10px; margin-top: 6px; }
details.faq{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.36);
  padding: 12px 12px;
}
html[data-theme="dark"] details.faq{ background: rgba(14,20,38,.52); }
details.faq summary{
  cursor:pointer;
  font-weight: 800;
  list-style:none;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq[open]{ border-color: rgba(59,130,246,.30); box-shadow: 0 18px 44px rgba(59,130,246,.10); }
.faq__a{ padding-top: 10px; }
.faq__cta{ margin-top: 14px; display:flex; flex-direction:column; gap: 8px; align-items:flex-start; }

/* Footer */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 20px 0 24px;
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(8px);
}
html[data-theme="dark"] .site-footer{ background: rgba(14,20,38,.58); }
.footer__top{ display:flex; gap: 18px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.footer__brand{ max-width: 520px; }
.footer__cols{ display:flex; gap: 24px; flex-wrap:wrap; }
.footer__col{ min-width: 180px; display:flex; flex-direction:column; gap: 8px; }
.footer__title{ font-weight: 900; margin-bottom: 4px; }
.footer__col a{ color: var(--muted); }
.footer__col a:hover{ color: var(--text); text-decoration: underline; }
.footer__bottom{ margin-top: 14px; }

/* Floating CTA (mobile only) */
.float-cta{
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 70;
  display:none;
  pointer-events:auto;
}
.float-cta .btn{ box-shadow: 0 18px 44px rgba(0,0,0,.14); }

/* Legal */
.legal h1{ margin-bottom: 12px; }
.legal h2{ margin-top: 18px; margin-bottom: 8px; }
.legal__cta{ margin-top: 18px; display:flex; flex-direction:column; gap: 10px; align-items:flex-start; }

/* Motion (reveal) */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in{
  opacity: 1;
  transform: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* Responsive: mobile 360–900px */
@media (max-width: 900px){
  :root{ --pad: 16px; }
  .nav--desktop{ display:none; }
  .header__cta{ display:none; } /* No CTA in header on mobile */
  .burger{ display:inline-grid; place-items:center; }
  .hero__inner{ grid-template-columns: 1fr; text-align:center; }
  .hero__copy{ max-width: none; margin-inline:auto; }
  .hero__ctas{ justify-content:center; }
  .bullets li{ text-align:left; max-width: 520px; margin-inline:auto; }
  .exp{ grid-template-columns: 1fr; }
  .exp__media{ position:relative; top:auto; }
  .how__grid{ grid-template-columns: 1fr; }
  .grid--3{ grid-template-columns: 1fr; }
  .grid--4{ grid-template-columns: 1fr; }
  .bonus-grid{ grid-template-columns: 1fr; }
  .faq__cta{ align-items:center; text-align:center; }
  .float-cta{ display:block; }
  .drawer__panel{ right: 10px; left: auto; }
}

/* Responsive: mid */
@media (min-width: 901px){
  /* Desktop alignment left inside container */
  .hero__copy, .faq__cta{ align-items:flex-start; }
}


/* Guarantee seal (official) */
.guarantee__seal{ width: 110px; height: auto; display:block; }
@media (max-width: 900px){ .guarantee__seal{ margin-inline:auto; } }


/* Ensure section padding */
.pricing{ padding: 30px 0; }