/* BloodBalance Promo — premium Apple-like landing (WCAG AA-minded) */
:root{
  --radius-xl: 28px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --shadow: 0 18px 55px rgba(0,0,0,.14);

  /* accents (from label vibe) */
  --a1: #D67A2B;
  --a2: #F2A44B;
  --a3: #B85A1F;

  /* pastels (complements) */
  --p1: #B4ECDD;
  --p2: #D0C4F5;
  --p3: #F5C4A0;

  --focus: rgba(214,122,43,.85);
}

html,body{ height:100%; overflow-x: clip; }
html{ scroll-behavior:smooth; }
html:focus-within{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.5;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
}

/* themes */
html[data-theme="light"]{
  --bg: #fbfaf7;
  --surface: rgba(255,255,255,.72);
  --surface2: rgba(255,255,255,.52);
  --text: #121826;
  --muted: rgba(18,24,38,.72);
  --border: rgba(18,24,38,.14);
  --shadow2: 0 10px 40px rgba(12,18,28,.14);
  --g1: radial-gradient(1200px 600px at 20% 10%, rgba(245,196,160,.65), transparent 60%),
        radial-gradient(900px 520px at 88% 12%, rgba(208,196,245,.55), transparent 55%),
        radial-gradient(1000px 620px at 85% 92%, rgba(180,236,221,.55), transparent 60%),
        linear-gradient(160deg, rgba(214,122,43,.10), transparent 50%);
  --ctaGrad: linear-gradient(135deg, var(--a2), var(--a1));
}
html[data-theme="dark"]{
  --bg: #0b0f19;
  --surface: rgba(16,22,36,.72);
  --surface2: rgba(16,22,36,.50);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --border: rgba(255,255,255,.14);
  --shadow2: 0 12px 45px rgba(0,0,0,.45);
  --g1: radial-gradient(1100px 560px at 20% 10%, rgba(245,196,160,.20), transparent 60%),
        radial-gradient(900px 520px at 90% 10%, rgba(208,196,245,.22), transparent 55%),
        radial-gradient(1000px 620px at 85% 92%, rgba(180,236,221,.18), transparent 60%),
        linear-gradient(160deg, rgba(214,122,43,.14), transparent 55%);
  --ctaGrad: linear-gradient(135deg, rgba(242,164,75,.95), rgba(214,122,43,.95));
}

/* background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background: var(--g1);
  pointer-events:none;
  z-index:-2;
}
body::after{
  content:"";
  position:fixed;
  inset:-2px;
  opacity:.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:-1;
}

.container{
  width:min(1120px, calc(100% - 48px));
  margin-inline:auto;
}

.section{
  padding: 30px 0;
}

.section--hero{ padding-top: 18px; }
.section--pricing{ }
.section--experience{ }

.vh{
  min-height: 100svh;
  display:flex;
  align-items:center;
}

.section__title{
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing:-.02em;
  margin:0 0 10px;
}
.section__sub{ margin:0 0 18px; max-width: 70ch; }

.muted{ color: var(--muted); }
.tiny{ font-size: 12.5px; }
.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;
}
.skip-link{
  position:absolute; left:12px; top:12px;
  padding:10px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
  transform: translateY(-200%);
}
.skip-link:focus{ transform: translateY(0); outline: 3px solid var(--focus); }

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.list{ margin:0; padding-left: 18px; }
.hero__bullets{ margin: 14px 0 0; padding-left: 18px; }
.hero__bullets li{ margin: 6px 0; }

/* header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-bottom: 1px solid var(--border);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 150px;
}
.brand__text{
  font-weight: 750;
  letter-spacing: -.02em;
}
.brand__mark{ display:inline-flex; }
.nav{ display:flex; align-items:center; gap: 18px; }
.nav a{ font-size: 14px; color: var(--muted); }
.nav a:hover{ color: var(--text); text-decoration:none; }

.header__actions{ display:flex; align-items:center; gap: 10px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.icon-btn:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  border:1px solid transparent;
  box-shadow: var(--shadow2);
}
.btn:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }
.btn--primary{
  background: var(--ctaGrad);
  color: #fff;
}
.btn--primary:hover{ filter: brightness(1.02); text-decoration:none; }
.btn--ghost{
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}
.btn--ghost:hover{ text-decoration:none; background: color-mix(in srgb, var(--surface) 75%, transparent); }
.btn--header{ display:inline-flex; }

.hamburger{
  display:none;
  width:40px; height:40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.hamburger:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }
.hamburger__lines{
  display:block; width:18px; height:12px; margin:auto;
  background: linear-gradient(var(--text), var(--text)) 0 0/18px 2px no-repeat,
              linear-gradient(var(--text), var(--text)) 0 5px/18px 2px no-repeat,
              linear-gradient(var(--text), var(--text)) 0 10px/18px 2px no-repeat;
  opacity:.85;
}

/* language popover */
.lang{ position:relative; }
.lang__pop{
  position:absolute;
  right:0;
  top: 46px;
  width: 220px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  display:none;
}
.lang__item{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--muted);
}
.lang__item[aria-current="page"]{ color: var(--text); background: color-mix(in srgb, var(--surface2) 80%, transparent); }
.lang__item:hover{ background: color-mix(in srgb, var(--surface2) 80%, transparent); text-decoration:none; color: var(--text); }

/* progress bar */
.progress{
  height: 2px;
  background: transparent;
}
.progress__bar{
  display:block;
  height:2px;
  width: var(--scroll, 0%);
  background: linear-gradient(90deg, var(--a2), var(--p2));
  border-radius: 999px;
}

/* drawer */
.drawer{
  position:fixed;
  inset:0;
  z-index: 200; /* above everything */
}
.drawer[hidden]{ display:none; }
.drawer__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
}
.drawer__panel{
  position:absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: min(420px, 92vw);
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-left: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.drawer__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.drawer__title{ font-weight: 800; letter-spacing:-.02em; }
.drawer__meta{ margin-top: 6px; display:flex; flex-direction:column; gap: 10px; }
.drawer__row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
.drawer__langs{ display:flex; flex-direction:column; gap: 6px; }
.drawer__langs a{ padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); text-decoration:none; }
.drawer__langs a:hover{ background: color-mix(in srgb, var(--surface) 70%, transparent); }
.drawer__cta{ margin-top:auto; }
.nav--mobile{ flex-direction:column; align-items:stretch; gap: 8px; }
.nav--mobile a{
  padding: 12px 12px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  text-decoration:none;
  color: var(--text);
}
.nav--mobile a:hover{ background: color-mix(in srgb, var(--surface) 75%, transparent); }

/* hero */
.hero-grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 26px;
  align-items:center;
}
.hero__title{
  font-size: clamp(30px, 3.4vw, 52px);
  letter-spacing: -.03em;
  line-height:1.05;
  margin: 0 0 12px;
}
.hero__sub{ font-size: 16px; max-width: 60ch; margin: 0 0 10px; }
.hero__cta{ display:flex; gap: 12px; flex-wrap:wrap; margin-top: 18px; }
.hero-media__frame{
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  padding: 18px;
  box-shadow: var(--shadow);
}
.hero-media img{ display:block; margin-inline:auto; max-width: 100%; height:auto; object-fit:contain; }

/* proof */
.proof{ margin-top: 18px; display:grid; gap: 12px; }
.proof img{ max-width: 100%; height:auto; display:block; margin-inline:auto; }

/* experience */
.experience{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  align-items:start;
}
.exp-media{
  position:sticky;
  top: 92px;
  align-self:start;
}
.exp-media__stack{
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: var(--shadow);
  padding: 14px;
}
.exp-media__item{ display:none; }
.exp-media__item.is-active{ display:block; }
.exp-media img{ width: 100%; height:auto; object-fit:contain; display:block; margin-inline:auto; }

.steps{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 10px; }
.step{
  display:flex;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface2);
}
.step__num{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  background: color-mix(in srgb, var(--a1) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--a1) 30%, transparent);
}
.step__title{ margin:0; font-size: 16px; letter-spacing:-.01em; }
.step__body p{ margin: 6px 0 0; }
.step.is-active{
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-color: color-mix(in srgb, var(--a1) 35%, var(--border));
}

/* grids + cards */
.grid{ display:grid; gap: 14px; }
.grid--cards{ grid-template-columns: repeat(4, 1fr); }
.grid--ingredients{ grid-template-columns: repeat(4, 1fr); }
.grid--plans{ grid-template-columns: repeat(3, 1fr); align-items:stretch; }

.card{
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow2);
  padding: 16px;
}
.card h3{ margin: 0 0 8px; letter-spacing:-.01em; }
.card p{ margin: 0; }
.card--soft{ background: color-mix(in srgb, var(--surface) 70%, transparent); }
.card--ingredient{ position:relative; overflow:hidden; }
.card--ingredient::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(320px 160px at 15% 0%, rgba(214,122,43,.12), transparent 60%),
              radial-gradient(320px 160px at 85% 110%, rgba(180,236,221,.14), transparent 60%);
  pointer-events:none;
}

/* plans: strict alignment */
.plan{
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.plan__top{ }
.plan__name{ margin: 6px 0 4px; letter-spacing:-.02em; }
.badge{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--a1) 35%, var(--border));
  background: color-mix(in srgb, var(--a1) 14%, transparent);
  color: var(--text);
  width: fit-content;
}
.plan__media{ padding: 10px 4px 0; }
.plan__media img{ display:block; margin-inline:auto; object-fit:contain; }
.plan__price{ margin-top: 8px; display:flex; align-items:baseline; justify-content:space-between; gap: 10px; }
.price__total{ font-size: 26px; font-weight: 850; letter-spacing:-.03em; }
.plan__list{ margin: 12px 0 0; padding-left: 18px; }
.plan__list li{ margin: 6px 0; }
.plan__cta{
  margin-top:auto;
  padding-top: 14px;
}
.plan__cta .btn{ width: 100%; }
.plan__cta p{ margin: 10px 0 0; text-align:center; }

/* faq */
.faq{ display:flex; flex-direction:column; gap: 10px; }
.faq__item{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface2);
  padding: 0;
  overflow:hidden;
}
.faq__item summary{
  cursor:pointer;
  list-style:none;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-weight: 750;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__panel{ padding: 0 14px 14px; }
.faq__chev{ opacity:.7; }

/* footer */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 26px 0;
  background: color-mix(in srgb, var(--surface) 65%, transparent);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 18px;
}
.footer__links{
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:flex-start;
}
.footer__links a{ color: var(--muted); }
.footer__links a:hover{ color: var(--text); text-decoration:none; }
.footer__bottom{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* floating CTA - mobile only */
.floating-cta{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 80;
  display:none;
}
.floating-cta .btn{ width: 100%; }
body.nav-open .floating-cta{ display:none !important; }

/* reveal/motion */
.reveal{ opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* responsive */
@media (max-width: 900px){
  .nav--desktop{ display:none; }
  .btn--header{ display:none; } /* no CTA in header on mobile */
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }

  .container{ width: min(1120px, calc(100% - 32px)); }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero__cta{ justify-content:center; }
  .hero-copy, .section__title, .section__sub{ text-align:center; margin-inline:auto; }
  .list{ text-align:left; margin-inline:auto; max-width: 68ch; }
  .grid--cards{ grid-template-columns: 1fr; }
  .grid--ingredients{ grid-template-columns: 1fr; }
  .grid--plans{ grid-template-columns: 1fr; }
  .experience{ grid-template-columns: 1fr; }
  .exp-media{ position:relative; top:auto; }
  .steps{ }
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__links{ align-items:center; }
  /* floating CTA enabled in 360–900px via dedicated media query */
}

@media (max-width: 380px){
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width: 100%; }
}

/* reduced motion + accessibility */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

@media (max-width: 900px) and (min-width: 360px){
  .floating-cta{ display:block; }
}