:root{
  --bg:#0b0f14;
  --card:#101720;
  --muted:#a9b4c0;
  --text:#ffffff; /* pure white */
  --brand:#6be675;
  --brand-2:#3cc2f2;
  --radius-xl:20px;
  --shadow:0 10px 25px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25);
  --shadow-soft:0 8px 18px rgba(0,0,0,.25);
}

/* Prevent layout shift on scrollbar show/hide */
html { scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

/* Themed scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(107,230,117,.7) transparent; } /* Firefox */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(60,194,242,.55), rgba(107,230,117,.55));
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.25);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(60,194,242,.8), rgba(107,230,117,.8));
}

/* Reset & base */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(1200px 800px at 20% -10%, #11202c, transparent),
    radial-gradient(1200px 800px at 120% 10%, #1a2230, transparent),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  scroll-behavior:smooth;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(1100px,92%);margin:auto}
.muted{color:var(--muted)}

/* Links with underline effect (not used on 'Browse Exercises') */
.link{position:relative;display:inline-block}
.link::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.link:hover::after{transform:scaleX(1)}

.btn{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.9rem 1.15rem;border-radius:999px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:var(--text);cursor:pointer;transition:.25s ease transform,.25s ease box-shadow,.25s ease border-color;
  box-shadow:var(--shadow-soft);
  will-change: transform;
}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.25)}
.btn.primary{background:linear-gradient(180deg,rgba(107,230,117,.18),rgba(60,194,242,.15));border-color:rgba(107,230,117,.45)}

/* Topbar: keep it in flow at all times to avoid layout jump */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(10,16,22,.75);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:opacity .35s ease;
}
body.is-home .topbar{ opacity:0; pointer-events:none; } /* fades out on Home but reserves height */
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800}
.logo-mark{
  width:28px;height:28px;border-radius:8px;
  background:
    radial-gradient(80% 80% at 70% 25%, var(--brand-2), transparent),
    radial-gradient(80% 80% at 30% 75%, var(--brand), transparent);
  border:1px solid rgba(255,255,255,.18)
}

/* Pages */
.page{display:none; will-change: transform, opacity; backface-visibility: hidden;}
.page.active{display:block}

/* Hero */
.hero{min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden}
.hero .content{text-align:center;padding-top:6rem;padding-bottom:5rem}
.hero-ctas{margin-top:1.2rem;display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}
.title{font-size:clamp(2rem,3.6vw + .5rem,4rem);line-height:1.15;margin:.25rem 0 .75rem;font-weight:800}
.subtitle{font-size:clamp(1rem,1.2vw + .4rem,1.35rem);color:var(--muted);max-width:55ch;margin-inline:auto}

/* Up-arrow floating button */
.cta-bottom{position:fixed;inset-inline:0;bottom:22px;display:flex;justify-content:center;pointer-events:none}
.arrow-btn{
  pointer-events:auto;width:64px;height:64px;border-radius:999px;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);
  cursor:pointer;transition:.25s ease transform,.25s ease box-shadow,.25s ease border-color;
  background:linear-gradient(180deg,rgba(60,194,242,.18),rgba(107,230,117,.18));
}
.arrow-btn:hover{transform:translateY(-4px) scale(1.03);border-color:rgba(255,255,255,.35);box-shadow:var(--shadow)}
.arrow-btn[hidden]{display:none}

/* Long-read styling */
.long-read{padding:2.5rem 0 4rem}
.long-read h2{margin-bottom:1rem}
.long-read p{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:1rem 1.2rem;margin:0 0 .9rem 0;box-shadow:var(--shadow-soft);
}

/* Categories grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;padding:1.2rem 0 2.4rem}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:18px;box-shadow:var(--shadow-soft);
  transition:.22s ease transform,.22s ease border-color,.22s ease box-shadow;
  display:flex;flex-direction:column;gap:.65rem;min-height:160px;position:relative;overflow:hidden;
  will-change: transform;
}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.25);box-shadow:var(--shadow)}
.card .icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#0f1a22;border:1px solid rgba(255,255,255,.08)}
.card h3{margin:.2rem 0 0;font-size:1.15rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}

/* “Open →” underline + arrow motion on whole-card hover */
.card .go{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;opacity:.9}
.card .go svg{transition:transform .22s ease;transform:translateX(-6px)}
.card:hover .go svg{transform:translateX(6px)}
.card:hover .go.link::after{transform:scaleX(1)}

/* Breadcrumbs & titles */
.breadcrumbs{font-size:.9rem;color:var(--muted);margin:1rem 0 .2rem}
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.page-title h2{font-size:clamp(1.4rem,2vw + .6rem,2.1rem);margin:.2rem 0}
.page-title .toolbar{align-self:flex-start;margin-top:-.35rem}

/* Accordion (exercise list) */
.acc{
  border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft)
}
.acc-item + .acc-item{border-top:1px solid rgba(255,255,255,.1)}
.acc-hd{display:flex;align-items:start;justify-content:space-between;gap:1rem;width:100%;text-align:left;background:transparent;border:0;padding:1rem 1.1rem;cursor:pointer;color:var(--text)}
.acc-hd:hover{background:rgba(255,255,255,.03)}
.acc-title{font-weight:700;font-size:1.05rem;color:var(--text)}
.acc-desc{color:var(--muted);font-size:.95rem}
.acc-icon{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#0f1a22;border:1px solid rgba(255,255,255,.08);transition:transform .22s ease}
.acc-item[aria-expanded="true"] .acc-icon{transform:rotate(180deg)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.acc-item[aria-expanded="true"] .acc-panel{grid-template-rows:1fr}
.acc-inner{overflow:hidden}
.acc-body{padding:0 1.1rem 1.1rem}
.acc-more{margin:.7rem 0 0 0;color:var(--muted);font-size:.95rem}
.acc-more-2{margin-top:.4rem;font-size:1rem;line-height:1.7}

/* Video */
.video-wrap{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#050a0f}
.video-wrap video,.video-wrap iframe{width:100%;height:100%;display:block}

/* Footer */
.footer{margin-top:3rem;padding:2rem 0;color:var(--muted);border-top:1px dashed rgba(255,255,255,.15)}

/* Categories bottom meta panel */
.meta-panel{
  margin:1rem 0 3rem;
  padding:1rem 1.2rem;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
}
.meta-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem;color:var(--muted)}
.team-title{margin:.2rem 0 .6rem;font-size:1rem;color:var(--text);opacity:.9}
.meta-icons{display:flex;gap:.6rem}
.social-li{
  width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background:#0f1a22; transition:.22s ease transform,.22s ease box-shadow,.22s ease border-color;
  color:#fff; /* icons white via currentColor */
}
.social-li:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.25);box-shadow:var(--shadow)}
.social-li svg{width:18px;height:18px}

/* ------- Page Transition Animation (Home -> Categories) ------- */

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  .page { animation: none !important; transition: none !important; }
}

/* Isolate layout while animating to avoid “settle” */
body.transitioning .page { contain: layout paint; }

/* Freeze topbar visibility during transition to avoid pop-in */
body.transitioning .topbar { opacity: 1 !important; pointer-events: none; }

/* Calmer travel + easing */
@keyframes pageOutDown { to { transform: translateY(8%); opacity:.0; } }
@keyframes pageInUp   { from { transform: translateY(8%); opacity:.0; } to { transform: translateY(0); opacity:1; } }

#view-home.anim-out       { animation: pageOutDown 700ms cubic-bezier(.2,.7,.2,1) forwards; }
#view-categories.anim-in  { animation: pageInUp     750ms cubic-bezier(.2,.7,.2,1) forwards; }

.ai-drawer{
  position:fixed; right:18px; bottom:84px; width:min(420px,92vw);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12); border-radius:16px; box-shadow:var(--shadow);
  padding:12px; z-index:50; backdrop-filter: blur(6px);
}
.ai-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.ai-log{
  height:280px; overflow:auto; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:.75rem; background:rgba(0,0,0,.25);
}
.ai-msg{margin:.4rem 0; line-height:1.5}
.ai-msg .who{display:block; font-size:.8rem; color:var(--muted)}
.ai-msg.user{ text-align:right }
.ai-form{display:flex; gap:.5rem; margin-top:.6rem}
.ai-form input{
  flex:1; border-radius:999px; border:1px solid rgba(255,255,255,.15);
  padding:.8rem 1rem; background:rgba(255,255,255,.06); color:var(--text);
}