/* StaminaUp — Apple-like landing (Cloudflare Pages) */
:root{
  --bg-0:#f7f7fa;
  --bg-1:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --card:rgba(255,255,255,.75);
  --stroke:rgba(15,23,42,.12);
  --shadow:0 16px 40px rgba(2,6,23,.10);
  --accent-1:#d88c36; /* gold */
  --accent-2:#922714; /* deep red */
  --accent-3:#ff6b3d; /* warm coral */
  --cta:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  --radius:20px;
  --pad:30px;
  --container:1120px;
  --logo-1:#b9772c;
  --logo-2:#7a1f12;
}

html[data-theme="dark"]{
  --bg-0:#0b0f19;
  --bg-1:#0f172a;
  --text:#e5e7eb;
  --muted:#a7b0c0;
  --card:rgba(17,24,39,.65);
  --stroke:rgba(148,163,184,.18);
  --shadow:0 18px 48px rgba(0,0,0,.55);
  --logo-1:#f0a24a;
  --logo-2:#ff4a3d;
}

*{box-sizing:border-box}
html,body{height:100%; overflow-x:clip}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(800px 500px at 16% 6%, color-mix(in oklab, var(--accent-1) 22%, transparent), transparent 60%),
    radial-gradient(900px 650px at 92% 12%, color-mix(in oklab, var(--accent-2) 18%, transparent), transparent 62%),
    radial-gradient(900px 650px at 60% 92%, color-mix(in oklab, var(--accent-3) 14%, transparent), transparent 64%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1));
  line-height:1.55;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
strong{font-weight:700}

.container{
  width:min(var(--container), 100% - 36px);
  margin-inline:auto;
}

.section{padding:var(--pad) 0}
.section--hero{padding-top:0}
.section--full{min-height:100svh; display:flex; flex-direction:column; justify-content:center}

/* Keep section titles aligned with the same container gutter */
.section > .h2{
  width:min(var(--container), 100% - 36px);
  margin-inline:auto;
}

.h1{
  font-size:clamp(2rem, 3.6vw, 3.1rem);
  letter-spacing:-.03em;
  line-height:1.06;
  margin:0 0 14px;
}
.h2{
  font-size:clamp(1.3rem, 2.1vw, 1.8rem);
  letter-spacing:-.02em;
  margin:0 0 18px;
}
.h3{font-size:1.05rem; letter-spacing:-.01em; margin:0 0 8px}
.lead{font-size:1.05rem; color:var(--muted); margin:0 0 16px}
.muted{color:var(--muted)}
.small{font-size:.95rem}
.tiny{font-size:.85rem}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background:color-mix(in oklab, var(--card) 70%, transparent);
  backdrop-filter: blur(10px);
  font-weight:600;
  margin:0 0 14px;
}
.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:-60px;
  padding:10px 12px;
  background:var(--bg-1);
  border:1px solid var(--stroke);
  border-radius:12px;
  box-shadow:var(--shadow);
  z-index:9999;
}
.skip-link:focus{top:12px}

.header{
  position:sticky;
  top:0;
  z-index:220;
  backdrop-filter: blur(14px);
  background:color-mix(in oklab, var(--bg-1) 70%, transparent);
  border-bottom:1px solid var(--stroke);
}
.header--simple{position:relative}
.header__inner{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand__mark{flex:none}
.brand__text{font-weight:800; letter-spacing:-.02em}

.nav{display:flex; align-items:center; gap:16px}
.nav__link{
  font-weight:600;
  color:color-mix(in oklab, var(--text) 88%, var(--muted));
  padding:10px 10px;
  border-radius:12px;
}
.nav__link:hover{background:color-mix(in oklab, var(--card) 70%, transparent)}
.header__actions{display:flex; align-items:center; gap:10px}

.select{
  appearance:none;
  font:inherit;
  padding:10px 38px 10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 70%, transparent);
  color:var(--text);
  backdrop-filter: blur(10px);
  position:relative;
}
.select:focus{outline:2px solid color-mix(in oklab, var(--accent-1) 55%, transparent); outline-offset:2px}

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 70%, transparent);
  color:var(--text);
  cursor:pointer;
  backdrop-filter: blur(10px);
}
.icon-btn:focus{outline:2px solid color-mix(in oklab, var(--accent-2) 50%, transparent); outline-offset:2px}

.progress{height:2px; background:transparent}
.progress__bar{
  display:block; height:2px; width:0%;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  font-weight:800;
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 70%, transparent);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-1px)}
.btn--primary{
  background:var(--cta);
  border-color:transparent;
  color:white;
  box-shadow:0 14px 34px rgba(146,39,20,.22);
}
.btn--ghost{background:color-mix(in oklab, var(--card) 70%, transparent)}
.btn--block{width:100%}

.hero{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:26px;
  align-items:center;
  padding-top:18px;
}
.hero__copy{max-width:640px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.bullets{margin:0; padding-left:18px; color:var(--text)}
.bullets li{margin:8px 0}
.bullets--compact li{margin:6px 0}

.hero__media{
  position:relative;
  border-radius:var(--radius);
  padding:18px;
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 65%, transparent);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero__pic img{object-fit:contain; width:100%; height:auto; margin-inline:auto}
.hero__mask{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(closest-side at 30% 35%, color-mix(in oklab, var(--accent-1) 35%, transparent), transparent 70%),
    radial-gradient(closest-side at 70% 55%, color-mix(in oklab, var(--accent-2) 28%, transparent), transparent 72%),
    radial-gradient(closest-side at 55% 85%, color-mix(in oklab, var(--accent-3) 18%, transparent), transparent 70%);
  filter: blur(34px);
  opacity:.75;
  pointer-events:none;
}
.hero__badges{
  display:flex;
  justify-content:center;
  margin-top:10px;
}
.hero__badges img{max-width:200px; margin-inline:auto}

.grid{display:grid; gap:14px}
.grid--3{grid-template-columns: repeat(3, minmax(0, 1fr))}
.grid--2{grid-template-columns: repeat(2, minmax(0, 1fr))}
.grid--plans{grid-template-columns: repeat(3, minmax(0, 1fr)); align-items:stretch}
.grid--ingredients{grid-template-columns: repeat(4, minmax(0, 1fr))}

.card{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 70%, transparent);
  box-shadow:var(--shadow);
  padding:16px;
}
.card--plan{display:flex; flex-direction:column}
.card__head{margin-bottom:12px}
.media{border-radius:16px; overflow:hidden}
.media--center{display:flex; align-items:center; justify-content:center; padding:10px}
.media--center img{object-fit:contain; margin-inline:auto}
.price{margin:12px 0}
.price__big{font-size:1.7rem; font-weight:900; letter-spacing:-.02em}
.price__unit{font-size:.95rem; font-weight:700; opacity:.8; margin-left:6px}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:800;
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 70%, transparent);
}
.pill--accent{
  border-color:transparent;
  background:linear-gradient(135deg, color-mix(in oklab, var(--accent-1) 80%, white), color-mix(in oklab, var(--accent-2) 80%, white));
  color:#0b0f19;
}

.experience{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:start;
}
.experience__steps{display:grid; gap:12px}
.step{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 70%, transparent);
  padding:16px;
}
.step.is-active{outline:2px solid color-mix(in oklab, var(--accent-1) 50%, transparent)}
.experience__media{
  position:sticky;
  top:92px;
}
.glass{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 70%, transparent);
  padding:16px;
  box-shadow:var(--shadow);
}
.glass img{margin-inline:auto; object-fit:contain}
.glass__meta{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px}

.two-col{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:start;
}
.prose{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 70%, transparent);
  padding:18px;
  box-shadow:var(--shadow);
}
.divider{height:1px; background:var(--stroke); margin:16px 0}
.media-card{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 70%, transparent);
  padding:14px;
  box-shadow:var(--shadow);
}
.media-card img{object-fit:contain; margin-inline:auto}

.ing-card{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 70%, transparent);
  padding:14px;
  text-align:left;
}
.ing-card__img{
  border-radius:16px;
  overflow:hidden;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ing-card__img img{object-fit:contain}

.faq{display:grid; gap:12px}
.faq__item{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 70%, transparent);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.faq__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px 18px;
  background:transparent;
  border:0;
  color:var(--text);
  cursor:pointer;
  text-align:left;
}
.faq__btn:focus{outline:2px solid color-mix(in oklab, var(--accent-1) 55%, transparent); outline-offset:-2px}
.faq__panel{padding:0 18px 16px}
.faq__icon{font-weight:900}

.footer{
  border-top:1px solid var(--stroke);
  background:color-mix(in oklab, var(--bg-1) 75%, transparent);
  padding:22px 0;
}
.footer__inner{display:flex; align-items:flex-start; justify-content:space-between; gap:18px}
.footer__col{max-width:560px}

.nav--mobile{
  position:fixed;
  /* sits above floating CTA and all page content */
  z-index:260;
  display:block;
  top:calc(64px + env(safe-area-inset-top));
  left:0;
  right:0;
  bottom:0;
  background:color-mix(in oklab, var(--bg-1) 92%, transparent);
  border-top:1px solid var(--stroke);
  overflow-y:auto;
  max-height:calc(100svh - 64px);
  height:calc(100vh - 64px);
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.nav--mobile[hidden]{display:none !important}
.nav__mobile-inner{padding:18px 0}
.nav__mobile-links{display:grid; gap:10px}
.nav__mobile-legal{display:flex; flex-wrap:wrap; gap:12px; padding-top:10px; border-top:1px solid var(--stroke)}
.nav__toggle{display:none}

.floating-cta{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:180;
  display:none;
}

/* Pricing cards: keep CTA aligned consistently */
.plan__cta{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.floating-cta__inner{
  max-width:620px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:22px;
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 78%, transparent);
  backdrop-filter: blur(14px);
  box-shadow:var(--shadow);
}

.center-page{display:flex; align-items:center; justify-content:center; min-height:100svh}
.lang-links{display:flex; flex-wrap:wrap; gap:10px}
.lang-links a{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--card) 70%, transparent);
}

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

@media (max-width: 900px){
  .nav--desktop{display:none}
  .nav__toggle{display:inline-flex}
  .header__cta{display:none}
  .hero{
    grid-template-columns: 1fr;
    gap:14px;
  }
  .hero__copy, .section, .container{ text-align:center }
  .bullets{ text-align:left; margin-inline:auto; max-width:520px }
  .hero__cta{ justify-content:center }
  .hero__media{ padding:14px }
  .hero__mask{opacity:.92}
  .experience{grid-template-columns:1fr}
  .experience__media{position:relative; top:auto}
  .grid--3{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
  .grid--plans{grid-template-columns:1fr}
  .grid--ingredients{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .two-col{grid-template-columns:1fr}
  .footer__inner{flex-direction:column}
  .floating-cta{display:block}
  .ing-card{text-align:center}
}

@media (min-width: 901px){
  .nav--desktop{display:flex}
}