/* ===================================================================
   GymBro — shared design system
   Theming: [data-theme="dark"] (default) / [data-theme="light"]
=================================================================== */

:root{
  --accent-1:#E8453C;
  --accent-2:#F5A623;
  --accent-gradient: linear-gradient(100deg, var(--accent-1), var(--accent-2));
  --btn-gradient: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-1) 55%, var(--accent-2) 100%);
  --max: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 10px;

  /* dark (default) */
  --bg:#0F0F12;
  --bg-raised:#18181C;
  --bg-raised-2:#1E1E22;
  --line:#2A2A2E;
  --line-soft:#212124;
  --text:#F3F1ED;
  --text-muted:#98969C;
  --shadow: 0 20px 50px -25px rgba(0,0,0,0.6);
}

html[data-theme="light"]{
  --bg:#FAF8F4;
  --bg-raised:#FFFFFF;
  --bg-raised-2:#F2F0EA;
  --line:#E4E1D9;
  --line-soft:#ECEAE3;
  --text:#17161A;
  --text-muted:#6C6A70;
  --shadow: 0 20px 50px -30px rgba(20,15,5,0.18);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition: background .2s ease, color .2s ease;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:'Oswald', sans-serif;
  margin:0;
  line-height:1.08;
  font-weight:600;
}
p{ margin:0; }
.mono{ font-family:'DM Mono', monospace; }
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:0.85rem 1.6rem;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:600; font-size:0.95rem;
  border-radius:6px; border:1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--btn-gradient); color:#FFFFFF; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,0.18); }
.btn-primary:hover{ filter:brightness(1.1); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent-2); }
.btn-sm{ padding:0.6rem 1.1rem; font-size:0.85rem; }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition: transform .28s ease;
}
header.nav-hidden{ transform: translateY(-100%); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:1.05rem 0; gap:1rem; }
.logo{ display:flex; align-items:center; gap:.55rem; font-family:'Oswald',sans-serif; font-weight:700; font-size:1.2rem; }
.logo-img{ height:24px; width:auto; }
.logo-fallback{ display:none; align-items:center; gap:.55rem; }
.logo-fallback .mark{ width:22px; height:22px; }

.nav-links{ display:flex; align-items:center; gap:1.65rem; }
.nav-links a{ font-size:0.92rem; color:var(--text-muted); transition:color .15s ease; white-space:nowrap; }
.nav-links a:hover, .nav-links a.active{ color:var(--text); }
.nav-links a.btn{ color:#FFFFFF; }
.nav-links a.btn-ghost{ color:var(--text); }

.nav-actions{ display:flex; align-items:center; gap:.75rem; }
.theme-toggle{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line);
  background:var(--bg-raised);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text); flex-shrink:0;
}
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .icon-sun{ display:none; }
html[data-theme="light"] .theme-toggle .icon-moon{ display:none; }
html[data-theme="light"] .theme-toggle .icon-sun{ display:block; }

.nav-toggle{ display:none; background:none; border:none; color:var(--text); width:38px; height:38px; cursor:pointer; }
.nav-cta-mobile{ display:none; }

@media (max-width: 980px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start;
    background:var(--bg-raised);
    border-bottom:1px solid var(--line);
    padding:1.25rem var(--gutter) 1.75rem;
    gap:1.05rem;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav-cta-desktop{ display:none; }
  .nav-cta-mobile{ display:inline-flex; margin-top:.25rem; }
}

/* ---------- Page hero shell (used on inner pages) ---------- */
.page-hero{ padding: clamp(2.75rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line-soft); }
.page-kicker{ font-family:'DM Mono',monospace; font-size:0.8rem; color:var(--accent-2); margin-bottom:0.9rem; display:block; }
.page-hero h1{ font-size:clamp(2.3rem,5vw,3.4rem); max-width:24ch; }
.page-hero p{ margin-top:1.1rem; color:var(--text-muted); font-size:1.05rem; max-width:56ch; }
.crumb{ font-size:0.85rem; color:var(--text-muted); margin-bottom:1rem; }
.crumb a:hover{ color:var(--text); }

/* ---------- Sections ---------- */
section{ padding: clamp(3.25rem,7vw,5.5rem) 0; }
.section-head{ max-width:62ch; margin-bottom:clamp(2.25rem,5vw,3.25rem); }
.section-head h2{ font-size:clamp(1.85rem,3.6vw,2.4rem); }
.section-head p{ margin-top:0.9rem; color:var(--text-muted); font-size:1.03rem; max-width:56ch; }

/* ---------- Product reveal video ---------- */
.video-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--bg-raised);
}
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Hero photo ---------- */
.hero-photo-grid{
  display:grid; grid-template-columns: 1.1fr 0.9fr;
  gap:clamp(2rem,5vw,3.5rem); align-items:center;
}
.hero-photo{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:4/5; background:var(--bg-raised);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:860px){
  .hero-photo-grid{ grid-template-columns:1fr; }
  .hero-photo{ aspect-ratio:16/10; order:-1; }
}

/* ---------- Dual platform CTA ---------- */
.platform-cta{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; max-width:640px; margin:0 auto; }
.platform-btn{
  background:var(--btn-gradient); color:#FFFFFF; border-radius:12px;
  padding:1.5rem 1.4rem; text-align:left; display:flex; flex-direction:column; gap:0.3rem;
  transition:transform .15s ease, filter .15s ease;
}
.platform-btn:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.platform-btn .icon{ width:22px; height:22px; margin-bottom:0.35rem; }
.platform-btn .big{ font-family:'Oswald',sans-serif; font-size:1.1rem; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,0.18); }
.platform-btn .small{ font-size:0.8rem; opacity:0.95; }
@media (max-width:560px){ .platform-cta{ grid-template-columns:1fr; } }

/* ---------- Photo feature visual (spotlight rows using real photography) ---------- */
.photo-frame{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:4/3; background:var(--bg-raised); position:relative;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-frame .badge{
  position:absolute; bottom:0.9rem; left:0.9rem; right:0.9rem;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px; padding:0.7rem 0.9rem;
  display:flex; justify-content:space-between; align-items:center;
  color:#fff; font-family:'DM Mono',monospace; font-size:0.78rem;
}
.photo-frame .badge .live{ color:var(--accent-2); }

/* ---------- Lifestyle photo strip ---------- */
.lifestyle-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.lifestyle-card{ border-radius:var(--radius); overflow:hidden; position:relative; aspect-ratio:3/4; border:1px solid var(--line); }
.lifestyle-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.lifestyle-card .label{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem;
  background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  color:#fff; font-family:'Oswald',sans-serif; font-weight:600; font-size:1.05rem;
}
@media (max-width:600px){ .lifestyle-strip{ grid-template-columns:1fr 1fr; } }

/* ---------- Founder note ---------- */
.founder-note{
  max-width:62ch; margin:0 auto; text-align:left;
  font-size:clamp(1.05rem,2vw,1.25rem); line-height:1.65;
}
.founder-note p + p{ margin-top:1.1rem; }
.founder-note .lede{ color:var(--text); }
.founder-sign{ margin-top:1.5rem; font-family:'DM Mono',monospace; font-size:0.85rem; color:var(--text-muted); }

/* ---------- Readout (hero device panel) ---------- */
.readout{ background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.readout-top{ display:flex; align-items:center; justify-content:space-between; padding:0.9rem 1.1rem; border-bottom:1px solid var(--line-soft); }
.rec{ display:flex; align-items:center; gap:.5rem; font-size:0.76rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }
.rec-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-1); }
@media (prefers-reduced-motion: no-preference){ .rec-dot{ animation: pulse 1.8s ease-in-out infinite; } }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.readout-view{ padding:1.4rem 1.4rem 0.4rem; background:var(--bg); }
.readout-stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-soft); }
.readout-stat{ padding:1.05rem 1.05rem 1.25rem; border-right:1px solid var(--line-soft); }
.readout-stat:last-child{ border-right:none; }
.readout-stat .label{ font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }
.readout-stat .value{ margin-top:.3rem; font-size:1.4rem; font-weight:500; }
.value.accent{ background:var(--accent-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Overview bento (all-features scan) ---------- */
.bento{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap:1rem;
}
.bento-cell{
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.25rem 1.4rem;
  display:flex; flex-direction:column; justify-content:space-between;
  transition: border-color .15s ease, transform .15s ease;
}
.bento-cell:hover{ border-color:var(--accent-2); }
.bento-cell .emoji{ font-size:1.6rem; line-height:1; }
.bento-cell .lbl{ margin-top:.6rem; font-size:0.95rem; color:var(--text); }
.bento-cell .sub{ margin-top:.3rem; font-size:0.8rem; color:var(--text-muted); }
.bento-large{
  grid-column: span 2; grid-row: span 2;
  background: linear-gradient(160deg, var(--bg-raised), var(--bg-raised-2));
}
.bento .bento-large .num{ font-family:'DM Mono',monospace; font-size:3.2rem; background:var(--accent-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.bento-large .lbl{ margin-top:.5rem; font-size:1rem; color:var(--text); }
.bento-wide{ grid-column: span 2; }
.bento-avatars{ display:flex; }
.bento-avatars img{
  width:30px; height:30px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:2px solid var(--bg-raised);
  margin-left:-8px;
}
.bento-avatars img:first-child{ margin-left:0; }
.bento-link{
  display:flex; align-items:center; justify-content:space-between;
  font-family:'DM Mono',monospace; font-size:0.85rem; color:var(--accent-2);
}
@media (max-width:820px){
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(140px, auto); }
  .bento-large{ grid-column:span 2; grid-row:span 1; min-height:170px; }
}
@media (max-width:520px){
  .bento{ grid-template-columns:1fr; }
  .bento-large, .bento-wide{ grid-column:span 1; }
}

/* ---------- Feature rows ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; padding:clamp(2.25rem,5vw,3.5rem) 0; border-top:1px solid var(--line-soft); }
.feature:first-of-type{ border-top:none; }
.feature.reverse .feature-copy{ order:2; }
.feature.reverse .feature-visual{ order:1; }
.feature-copy h3{ font-size:clamp(1.35rem,2.6vw,1.7rem); }
.feature-copy p{ margin-top:1rem; color:var(--text-muted); max-width:44ch; }
.feature-tag{ display:inline-block; font-family:'DM Mono',monospace; font-size:0.78rem; color:var(--accent-2); margin-bottom:0.85rem; }
.visual-frame{ background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; }
.stat-row{ display:flex; justify-content:space-between; margin-top:1rem; border-top:1px solid var(--line-soft); padding-top:1rem; }
.stat-row .k{ font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }
.stat-row .v{ font-size:1.25rem; margin-top:.3rem; }
@media (max-width:760px){
  .feature,.feature.reverse{ grid-template-columns:1fr; }
  .feature.reverse .feature-copy,.feature.reverse .feature-visual{ order:initial; }
}

/* ---------- Mini mockups for social/community features ---------- */
.feed-post{ border-bottom:1px solid var(--line-soft); padding:0.8rem 0; display:flex; gap:0.75rem; }
.feed-post:last-child{ border-bottom:none; padding-bottom:0; }
.feed-post .pfp{ width:34px; height:34px; border-radius:50%; flex-shrink:0; }
.feed-post .body{ flex:1; min-width:0; }
.feed-post .name{ font-size:0.85rem; font-weight:600; }
.feed-post .cap{ font-size:0.85rem; color:var(--text-muted); margin-top:0.15rem; }
.feed-post .img{ margin-top:0.5rem; height:90px; border-radius:6px; background:linear-gradient(135deg, var(--bg-raised-2), var(--line)); }

.chat-bubble{ max-width:80%; padding:0.6rem 0.85rem; border-radius:12px; font-size:0.88rem; margin-bottom:0.6rem; }
.chat-bubble.them{ background:var(--bg-raised-2); border:1px solid var(--line); border-bottom-left-radius:3px; }
.chat-bubble.me{ background:var(--btn-gradient); color:#FFFFFF; margin-left:auto; border-bottom-right-radius:3px; }

.map-mock{ position:relative; height:180px; border-radius:8px; overflow:hidden; background:var(--bg); border:1px solid var(--line); }
.map-mock .grid-line{ position:absolute; background:var(--line-soft); }
.map-pin{ position:absolute; width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
.map-pin::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--bg); }

.wearos-badge{ display:inline-flex; align-items:center; gap:0.6rem; background:var(--bg-raised-2); border:1px solid var(--line); border-radius:99px; padding:0.5rem 1rem; font-size:0.85rem; }

/* ---------- Coach cards ---------- */
.coach-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.coach-card{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; display:flex; flex-direction:column; gap:1rem;
  transition: border-color .15s ease, transform .15s ease;
}
.coach-card:hover{ border-color:var(--accent-2); transform:translateY(-2px); }
.coach-avatar{
  width:56px; height:56px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:2px solid var(--line);
  flex-shrink:0;
  transition: transform .25s ease, border-color .15s ease;
}
.coach-card:hover .coach-avatar{ transform:rotate(-6deg) scale(1.08); border-color:var(--accent-2); }
.coach-full:hover .coach-avatar{ transform:rotate(-4deg) scale(1.04); border-color:var(--accent-2); }
.demo-pick:hover .coach-avatar{ border-color:var(--accent-2); }
.coach-name{ font-family:'Oswald',sans-serif; font-size:1.2rem; font-weight:600; }
.coach-role{ font-family:'DM Mono',monospace; font-size:0.76rem; color:var(--accent-2); }
.coach-desc{ color:var(--text-muted); font-size:0.92rem; }
@media (max-width:980px){ .coach-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .coach-grid{ grid-template-columns:1fr; } }

.coach-full{
  display:grid; grid-template-columns: 200px 1fr; gap:2.25rem; align-items:start;
  padding: clamp(2rem,4vw,3rem) 0; border-top:1px solid var(--line-soft);
}
.coach-full:first-of-type{ border-top:none; }
.coach-full .coach-avatar{ width:120px; height:120px; font-size:2.5rem; }
.coach-full h3{ font-size:clamp(1.5rem,3vw,2rem); }
.coach-tags{ display:flex; gap:.5rem; margin-top:.6rem; flex-wrap:wrap; }
.coach-tag{ font-family:'DM Mono',monospace; font-size:0.72rem; color:var(--text-muted); border:1px solid var(--line); padding:0.25rem 0.6rem; border-radius:99px; }
.coach-full p.bio{ margin-top:1rem; color:var(--text-muted); max-width:60ch; }
.coach-quote{ margin-top:1.1rem; padding:1rem 1.1rem; background:var(--bg-raised); border:1px solid var(--line); border-left:3px solid var(--accent-2); border-radius:6px; font-style:italic; color:var(--text-muted); font-size:0.95rem; max-width:56ch; }
@media (max-width:700px){ .coach-full{ grid-template-columns:1fr; } .coach-full .coach-avatar{ width:72px; height:72px; font-size:1.6rem; } }

/* ---------- Carousel / slideshow ---------- */
.carousel{ position:relative; }
.carousel-track{ overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:var(--bg-raised); }
.carousel-slides{ display:flex; transition:transform .5s cubic-bezier(.65,0,.35,1); }
.slide{ min-width:100%; padding: clamp(1.5rem,4vw,2.5rem); display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.slide-copy{ animation: slide-in .5s ease both; }
@keyframes slide-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .slide-copy{ animation:none; } }
.slide-copy .k{ font-family:'DM Mono',monospace; font-size:0.76rem; color:var(--accent-2); }
.slide-copy h3{ margin-top:.6rem; font-size:clamp(1.3rem,2.6vw,1.7rem); }
.slide-copy p{ margin-top:0.75rem; color:var(--text-muted); max-width:38ch; }
@media (max-width:700px){ .slide{ grid-template-columns:1fr; } }

.carousel-controls{ display:flex; align-items:center; justify-content:space-between; margin-top:1.1rem; }
.carousel-dots{ display:flex; gap:.5rem; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--line); border:none; cursor:pointer; padding:0; }
.dot.active{ background:var(--accent-gradient); width:22px; border-radius:99px; transition:width .2s ease; }
.carousel-arrows{ display:flex; gap:.5rem; }
.arrow-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--bg-raised);
  color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.arrow-btn:hover{ border-color:var(--accent-2); }

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.75rem,4vw,2.5rem); }
.step{ border-top:2px solid var(--line); padding-top:1.2rem; }
.step .num{ font-family:'DM Mono',monospace; font-size:0.9rem; color:var(--accent-2); }
.step h3{ margin-top:.6rem; font-size:1.25rem; }
.step p{ margin-top:.6rem; color:var(--text-muted); }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }

/* ---------- Download / CTA band ---------- */
#download-cta{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background: radial-gradient(60% 90% at 15% 20%, color-mix(in srgb, var(--accent-1) 12%, transparent), transparent 60%),
              radial-gradient(50% 80% at 90% 10%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%);
}
.download-inner{ text-align:center; max-width:44rem; margin:0 auto; }
.download-inner h2{ font-size:clamp(1.9rem,4vw,2.5rem); }
.download-inner p{ margin-top:1rem; color:var(--text-muted); font-size:1.03rem; }
.download-ctas{ margin-top:2.1rem; display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

.platform-card{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.75rem; text-align:left;
}
.platform-card .tag{ font-family:'DM Mono',monospace; font-size:0.76rem; color:var(--accent-2); }
.platform-card h3{ margin-top:.6rem; font-size:1.3rem; }
.platform-card p{ margin-top:.6rem; color:var(--text-muted); font-size:0.92rem; }
.platform-card .btn{ margin-top:1.1rem; width:100%; }
.platform-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
@media (max-width:700px){ .platform-grid{ grid-template-columns:1fr; } }

/* ---------- Store badges ---------- */
.store-badges{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.store-badge{
  display:flex; align-items:center; gap:0.65rem;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:8px;
  padding:0.65rem 1.1rem; color:var(--text-muted); cursor:default;
}
.store-badge svg{ width:22px; height:22px; flex-shrink:0; color:var(--text-muted); }
.store-badge .txt{ text-align:left; line-height:1.2; }
.store-badge .txt .small{ font-size:0.68rem; display:block; }
.store-badge .txt .big{ font-size:0.92rem; font-weight:600; color:var(--text); }

/* ---------- Blog ---------- */
.blog-grid{ display:grid; gap:1.25rem; }
.blog-card{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.75rem; transition:border-color .15s ease;
}
.blog-card:hover{ border-color:var(--accent-2); }
.blog-card .date{ font-family:'DM Mono',monospace; font-size:0.78rem; color:var(--accent-2); }
.blog-card h3{ margin-top:0.6rem; font-size:1.3rem; }
.blog-card p{ margin-top:0.6rem; color:var(--text-muted); }

/* ---------- Legal / privacy ---------- */
.legal h2{ font-size:1.4rem; margin-top:2.25rem; }
.legal h2:first-child{ margin-top:0; }
.legal p, .legal li{ color:var(--text-muted); margin-top:0.75rem; }
.legal ul{ padding-left:1.25rem; list-style:disc; }
.legal li{ margin-top:0.4rem; }

/* ---------- Footer (multi-column, matches reference layout) ---------- */
footer{ border-top:1px solid var(--line-soft); padding-top:clamp(3rem,6vw,4.5rem); overflow:hidden; }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom: clamp(2rem,4vw,2.75rem);
}
.footer-brand .logo{ margin-bottom:0.9rem; }
.footer-brand p{ color:var(--text-muted); font-size:0.92rem; max-width:30ch; }

.newsletter-form{ margin-top:1.4rem; max-width:22rem; }
.newsletter-form .row{ display:flex; gap:.5rem; }
.newsletter-form input[type="email"]{
  flex:1; min-width:0;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:6px;
  padding:0.7rem 0.85rem; color:var(--text); font-family:'Plus Jakarta Sans',sans-serif; font-size:0.88rem;
}
.newsletter-form input[type="email"]:focus{ outline:2px solid var(--accent-2); outline-offset:1px; }
.newsletter-form .fine{ margin-top:0.55rem; font-size:0.78rem; color:var(--text-muted); }
.newsletter-form .success{ display:none; margin-top:0.55rem; font-size:0.85rem; color:var(--accent-2); }
.newsletter-form.sent .row,
.newsletter-form.sent .fine{ display:none; }
.newsletter-form.sent .success{ display:block; }

.footer-social{ display:flex; gap:.6rem; margin-top:1.25rem; }
.footer-social a{
  width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--text-muted);
}
.footer-social a:hover{ color:var(--text); border-color:var(--accent-2); }
.footer-col h4{ font-family:'DM Mono',monospace; font-weight:500; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); margin-bottom:1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:0.7rem; }
.footer-col a{ font-size:0.92rem; color:var(--text-muted); }
.footer-col a:hover{ color:var(--text); }
@media (max-width:820px){
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:2.25rem; }
  .footer-brand{ grid-column:1 / -1; }
}

.footer-stores{ padding:clamp(1.5rem,3vw,2rem) 0; border-top:1px solid var(--line-soft); display:flex; justify-content:center; }

.footer-bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  border-top:1px solid var(--line-soft);
  padding: 1.5rem 0;
  font-size:0.85rem; color:var(--text-muted);
}
.footer-bar a:hover{ color:var(--text); }
.status{ display:flex; align-items:center; gap:.5rem; }
.status-dot{ width:7px; height:7px; border-radius:50%; background:#3FC97A; }

.footer-graphic{ width:100%; opacity:0.9; }

/* ---------- 404 page ---------- */
.error-page{
  min-height:calc(100vh - 400px);
  display:flex; align-items:center; justify-content:center;
  padding: clamp(3rem,8vw,6rem) 0;
}
.error-inner{ text-align:center; max-width:32rem; margin:0 auto; }
.error-num{
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:clamp(4rem,14vw,7rem);
  background:var(--accent-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1;
}
.error-inner h1{ margin-top:1rem; font-size:clamp(1.5rem,3.4vw,2rem); }
.error-inner p{ margin-top:0.9rem; color:var(--text-muted); }
.error-ctas{ margin-top:1.75rem; display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.error-readout{ margin:0 auto 2rem; max-width:280px; }

/* ---------- Demo page ---------- */
.demo-wrap{ max-width:840px; margin:0 auto; }
.demo-picker{ display:grid; grid-template-columns:repeat(4,1fr); gap:0.85rem; margin:1.75rem 0 2rem; }
.demo-pick{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem 0.75rem; text-align:center; cursor:pointer; color:var(--text);
  font-family:'Plus Jakarta Sans',sans-serif; transition:border-color .15s ease, transform .15s ease;
}
.demo-pick:hover{ border-color:var(--accent-2); transform:translateY(-2px); }
.demo-pick.selected{ border-color:var(--accent-2); background:var(--bg-raised-2); }
.demo-pick .coach-avatar{ width:46px; height:46px; margin:0 auto 0.6rem; font-size:1.1rem; }
.demo-pick .name{ font-family:'Oswald',sans-serif; font-weight:600; }
.demo-pick .vibe{ font-family:'DM Mono',monospace; font-size:0.68rem; color:var(--text-muted); margin-top:0.2rem; }
@media (max-width:600px){ .demo-picker{ grid-template-columns:repeat(2,1fr); } }

.demo-stage{
  position:relative; width:100%; max-width:520px; margin:0 auto;
  aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  background:var(--bg-raised); border:1px solid var(--line);
}
.demo-stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.demo-stage canvas{ position:absolute; inset:0; width:100%; height:100%; transform:scaleX(-1); }
.demo-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem; gap:1rem;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(2px);
}
.demo-overlay.hidden{ display:none; }
.demo-hud{
  position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between;
  padding:0.85rem 1rem; font-family:'DM Mono',monospace; font-size:0.85rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent), transparent);
  color:#fff; z-index:2;
}
.demo-hud .reps{ font-size:1.3rem; color:var(--accent-2); }
.demo-caption{
  position:absolute; bottom:0; left:0; right:0; padding:0.9rem 1rem;
  background:linear-gradient(0deg, color-mix(in srgb, var(--bg) 80%, transparent), transparent);
  color:#fff; font-size:0.9rem; text-align:center; min-height:2.6rem; z-index:2;
}
.demo-status{ text-align:center; color:var(--text-muted); font-size:0.9rem; margin-top:1rem; }
.demo-privacy{ text-align:center; color:var(--text-muted); font-size:0.82rem; margin-top:0.75rem; }
.spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent-2);
  animation: spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }