/* ============================================================
   Sport Club — marketing.css
   Standalone stylesheet for the public marketing page (/marketing).
   Consumes design tokens from tokens.css only (colors/type/spacing/
   radius/shadow) — no hardcoded brand values, no dependency on
   app.css (the mobile app-frame shell is not used on this page).
   All selectors are namespaced with "mkt-" to avoid any collision
   with the app shell's class names.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.mkt{
  font-family:var(--font-ar);
  font-size:var(--fs-16);
  line-height:var(--lh-body);
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.mkt h1,.mkt h2,.mkt h3,.mkt h4{line-height:var(--lh-tight);font-weight:var(--fw-bold);text-wrap:balance}
.mkt img{display:block;max-width:100%}
.mkt a{color:inherit;text-decoration:none}
.mkt ul{list-style:none}
.mkt button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mkt :focus-visible{outline:3px solid color-mix(in srgb, var(--c-primary) 55%, white);outline-offset:2px;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mkt *,.mkt *::before,.mkt *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
.mkt ::selection{background:var(--c-cyan);color:var(--c-navy)}

.mkt-skiplink{
  position:absolute;inset-inline-start:var(--s-4);top:-60px;z-index:100;
  background:var(--c-navy);color:var(--c-primary-ink);padding:var(--s-3) var(--s-5);border-radius:var(--r-sm);
  transition:top var(--dur-fast) var(--ease);
}
.mkt-skiplink:focus{top:var(--s-4)}

.mkt-container{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--s-6)}
.mkt-section{padding-block:clamp(56px,9vw,112px)}
.mkt-section__head{max-width:640px;margin-inline:auto;text-align:center;margin-block-end:var(--s-10)}
.mkt-kicker{color:var(--c-primary);font-weight:var(--fw-bold);font-size:var(--fs-14);margin-block-end:var(--s-2)}
.mkt-section__title{font-size:clamp(26px,3.4vw,40px);margin-block-end:var(--s-3)}
.mkt-section__sub{color:var(--c-text-3);font-size:17px;line-height:1.75}

/* ---------- buttons (same shape language as the app: pill, 56px) ---------- */
.mkt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:56px;padding-inline:var(--s-8);
  border-radius:var(--r-pill);font-size:var(--fs-16);font-weight:var(--fw-semibold);
  transition:transform var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease);
  cursor:pointer;white-space:nowrap;
}
.mkt-btn:active{transform:scale(.97)}
.mkt-btn--primary{background:var(--c-primary);color:var(--c-primary-ink);box-shadow:0 10px 24px color-mix(in srgb, var(--c-primary) 28%, transparent)}
.mkt-btn--primary:hover{filter:brightness(1.06)}
.mkt-btn--white{background:var(--c-primary-ink);color:var(--c-navy)}
.mkt-btn--white:hover{filter:brightness(.96)}
.mkt-btn--outline{background:transparent;border:1.5px solid currentColor}
.mkt-btn--sm{min-height:44px;padding-inline:var(--s-5);font-size:var(--fs-14)}

.mkt-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 18px;border-radius:var(--r-pill);
  background:var(--c-surface-2);color:var(--c-navy);
  font-size:13px;font-weight:var(--fw-bold);letter-spacing:.02em;
}
.mkt-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-cyan)}

/* ================= NAV ================= */
.mkt-nav{
  position:sticky;top:0;z-index:var(--z-nav);
  background:color-mix(in srgb, var(--c-bg) 85%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-block-end:1px solid var(--c-border-2);
}
.mkt-nav__row{display:flex;align-items:center;justify-content:space-between;padding-block:14px;gap:var(--s-4)}
.mkt-nav__brand{display:flex;align-items:center;gap:10px;font-weight:var(--fw-bold);font-size:17px}
.mkt-nav__brand img{height:34px;width:auto;flex-shrink:0;object-fit:contain}
.mkt-nav__links{display:flex;align-items:center;gap:var(--s-6);font-size:15px;font-weight:var(--fw-medium);color:var(--c-text-2)}
.mkt-nav__links a{transition:color var(--dur-fast) var(--ease)}
.mkt-nav__links a:hover{color:var(--c-primary)}
.mkt-nav__actions{display:flex;align-items:center;gap:var(--s-3)}
.mkt-nav__burger{display:none}
@media (max-width:860px){
  .mkt-nav__links{display:none}
  .mkt-nav__burger{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-round)}
  .mkt-nav__burger svg{width:24px;height:24px}
}
.mkt-nav__mobile{display:none;padding-block-end:16px}
.mkt-nav__mobile ul{display:flex;flex-direction:column;gap:14px;font-weight:var(--fw-semibold)}
@media (max-width:860px){
  .mkt-nav__mobile.is-open{display:block}
}

/* ================= HERO =================
   Solid brand gradient (token-derived only) — no background photo, so no
   upscale-blur risk and no third-party logo/trademark risk from stock imagery. */
.mkt-hero{
  position:relative;overflow:hidden;color:var(--c-primary-ink);
  background:linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-2) 55%, var(--c-primary) 145%);
  background-image: url(/img/back1.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}
.mkt-hero::before{
  content:"";position:absolute;inset-inline-end:-12%;top:-25%;width:65%;aspect-ratio:1;
  background:radial-gradient(circle, color-mix(in srgb, var(--c-cyan) 18%, transparent), transparent 70%);
  pointer-events:none;
}
.mkt-hero__grid{
  position:relative;padding-block:clamp(72px,12vw,120px) clamp(64px,10vw,96px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,72px);align-items:center;
}
@media (max-width:900px){.mkt-hero__grid{grid-template-columns:1fr;text-align:center}}
.mkt-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-5)}
@media (max-width:900px){.mkt-hero__copy{align-items:center}}
.mkt-hero__eyebrow{background:color-mix(in srgb, var(--c-text) 55%, transparent);color:var(--c-primary-ink);backdrop-filter:blur(6px);border:1px solid color-mix(in srgb, var(--c-primary-ink) 22%, transparent)}
.mkt-hero__eyebrow::before{background:var(--c-cyan)}
.mkt-hero h1{font-size:clamp(2.1rem,3vw + 1.2rem,3.6rem);max-width:16ch}
.mkt-hero__accent{color:var(--c-cyan)}
.mkt-hero__sub{font-size:clamp(16px,1.6vw,19px);max-width:52ch;color:color-mix(in srgb, var(--c-primary-ink) 92%, transparent);line-height:1.8}
.mkt-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-block-start:var(--s-2)}
.mkt-hero__login{font-size:14px;color:color-mix(in srgb, var(--c-primary-ink) 85%, transparent);text-decoration:underline;text-underline-offset:3px}

/* ---- hero visual: a real recreation of the app's own UI, not a stock photo ---- */
.mkt-frame{
  width:min(280px,78vw);margin-inline:auto;border-radius:40px;
  background:var(--c-bg);box-shadow:var(--sh-frame);
  border:8px solid var(--c-navy);overflow:hidden;position:relative;
}
.mkt-frame__notch{position:absolute;top:8px;inset-inline:50%;transform:translateX(-50%);width:84px;height:20px;border-radius:14px;background:var(--c-navy);z-index:5}
.mkt-frame__screen{padding-block:34px 18px}
.mkt-frame__topbar{display:flex;align-items:center;justify-content:space-between;padding-inline:16px;margin-block-end:12px}
.mkt-frame__topbar-title{font-weight:var(--fw-bold);font-size:14px;color:var(--c-text)}
.mkt-frame__avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--c-cyan),var(--c-navy))}
.mkt-frame__search{
  margin-inline:16px;margin-block-end:14px;height:42px;border-radius:var(--r-pill);
  background:var(--c-surface-2);display:flex;align-items:center;gap:8px;padding-inline:14px;
  color:var(--c-muted);font-size:12px;
}
.mkt-frame__search svg{width:15px;height:15px;flex-shrink:0}
.mkt-frame__promo{
  margin-inline:16px;border-radius:var(--r-lg);overflow:hidden;position:relative;height:96px;
  background:linear-gradient(120deg,var(--c-navy),var(--c-navy-2));display:flex;flex-direction:column;justify-content:flex-end;padding:12px;
}
.mkt-frame__promo *{position:relative;color:var(--c-primary-ink)}
.mkt-frame__promo-title{font-weight:var(--fw-bold);font-size:13px}
.mkt-frame__promo-sub{font-size:9.5px;opacity:.9;max-width:80%;line-height:1.4}
.mkt-frame__section-title{margin:16px 16px 8px;font-size:12px;font-weight:var(--fw-bold);color:var(--c-text)}
.mkt-frame__card{
  margin-inline:16px;margin-block-end:9px;background:var(--c-surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-card);padding:9px;display:flex;align-items:center;gap:9px;
}
.mkt-frame__card-icon{width:38px;height:38px;border-radius:var(--r-md);flex-shrink:0;background:var(--c-surface-2);display:grid;place-items:center;color:var(--c-navy)}
.mkt-frame__card-icon svg{width:19px;height:19px}
.mkt-frame__card-body{flex:1;min-width:0}
.mkt-frame__card-name{font-size:11.5px;font-weight:var(--fw-bold);color:var(--c-text)}
.mkt-frame__card-desc{font-size:9.5px;color:var(--c-muted);margin-block:2px 5px}
.mkt-frame__card-cta{display:inline-block;background:var(--c-navy);color:var(--c-primary-ink);font-size:8.5px;font-weight:var(--fw-bold);padding:3px 10px;border-radius:var(--r-pill)}
.mkt-frame__bottomnav{margin-block-start:6px;height:56px;background:var(--c-surface);box-shadow:0 -2px 15px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:space-around;position:relative}
.mkt-frame__nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--c-muted);font-size:8px;font-weight:var(--fw-semibold)}
.mkt-frame__nav-item svg{width:16px;height:16px}
.mkt-frame__nav-item.is-active{color:var(--c-primary)}
.mkt-frame__nav-center{width:44px;height:44px;border-radius:50%;background:var(--c-navy);color:var(--c-primary-ink);display:grid;place-items:center;margin-block-start:-22px;border:4px solid var(--c-bg)}
.mkt-frame__nav-center svg{width:19px;height:19px}

/* ================= STATS STRIP ================= */
.mkt-stats{background:var(--c-surface);border-block-end:1px solid var(--c-border-2)}
.mkt-stats__row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-8);padding-block:var(--s-10)}
.mkt-stats__title{
  grid-column:1/-1;text-align:center;font-size:15px;font-weight:var(--fw-bold);color:var(--c-text-3);
  text-transform:uppercase;letter-spacing:.04em;margin-block-end:var(--s-2);
}
.mkt-stats__item{text-align:center}
.mkt-stats__num{font-size:clamp(24px,3vw,34px);font-weight:var(--fw-black);color:var(--c-navy);font-variant-numeric:tabular-nums}
.mkt-stats__label{color:var(--c-text-3);font-size:14px;margin-block-start:6px;max-width:32ch;margin-inline:auto;line-height:1.6}
.mkt-stats__source{grid-column:1/-1;text-align:center;font-size:12px;color:var(--c-text-3);margin-block-start:var(--s-4)}
@media (max-width:760px){.mkt-stats__row{grid-template-columns:1fr}}

/* ================= ROLE / HOW-IT-WORKS CARDS ================= */
.mkt-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
@media (max-width:860px){.mkt-roles{grid-template-columns:1fr}}
.mkt-role{
  border-radius:var(--r-lg);padding:var(--s-8) var(--s-6);
  background:var(--c-surface);box-shadow:var(--sh-card);
  border-top:4px solid var(--role-color, var(--c-primary));
}
.mkt-role__icon{
  width:56px;height:56px;border-radius:var(--r-round);display:grid;place-items:center;
  background:color-mix(in srgb, var(--role-color, var(--c-primary)) 14%, transparent);
  color:var(--role-color, var(--c-primary));margin-block-end:var(--s-5);
}
.mkt-role__icon svg{width:26px;height:26px}
.mkt-role h3{font-size:20px;margin-block-end:var(--s-4)}
.mkt-role ul{display:flex;flex-direction:column;gap:12px}
.mkt-role li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--c-text-2);line-height:1.65}
.mkt-role li svg{width:18px;height:18px;color:var(--role-color, var(--c-primary));flex-shrink:0;margin-block-start:3px}

/* ================= FEATURE GRID ================= */
.mkt-features{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
@media (max-width:980px){.mkt-features{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mkt-features{grid-template-columns:1fr}}
.mkt-feature{
  background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--sh-card);
  padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);
  transition:transform var(--dur) var(--ease);
}
.mkt-feature:hover{transform:translateY(-4px)}
.mkt-feature__icon{
  width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--c-surface-2);color:var(--c-primary);
}
.mkt-feature__icon svg{width:26px;height:26px}
.mkt-feature h3{font-size:18px}
.mkt-feature p{color:var(--c-text-3);font-size:14.5px;line-height:1.75}

/* ================= JOURNEY (reuses real onboarding illustrations) ================= */
.mkt-journey{background:var(--c-bg)}
.mkt-journey__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
@media (max-width:860px){.mkt-journey__grid{grid-template-columns:1fr}}
.mkt-journey__item{
  background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--sh-card);
  padding:var(--s-6);text-align:center;
}
.mkt-journey__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:var(--c-surface-2);color:var(--c-primary);
  font-size:13px;font-weight:var(--fw-bold);margin-block-end:var(--s-4);font-variant-numeric:tabular-nums;
}
.mkt-journey__art{width:100%;max-width:180px;aspect-ratio:1;object-fit:contain;margin-inline:auto;margin-block-end:var(--s-4)}
.mkt-journey__item h3{font-size:17px;margin-block-end:8px}
.mkt-journey__item p{color:var(--c-text-3);font-size:14.5px;line-height:1.7}

/* ================= FINAL CTA ================= */
.mkt-cta{
  position:relative;overflow:hidden;color:var(--c-primary-ink);
  background:linear-gradient(135deg, var(--c-navy-2) 0%, var(--c-navy) 60%, var(--c-text) 130%);
}
.mkt-cta::before{
  content:"";position:absolute;inset-inline-start:-10%;bottom:-30%;width:55%;aspect-ratio:1;
  background:radial-gradient(circle, color-mix(in srgb, var(--c-green) 16%, transparent), transparent 70%);
  pointer-events:none;
}
.mkt-cta__inner{position:relative;text-align:center;max-width:640px;margin-inline:auto;padding-block:clamp(70px,10vw,120px)}
.mkt-cta h2{font-size:clamp(28px,3.4vw,42px);margin-block-end:var(--s-4)}
.mkt-cta p{color:color-mix(in srgb, var(--c-primary-ink) 85%, transparent);font-size:17px;margin-block-end:var(--s-8);line-height:1.75}
.mkt-cta__actions{display:flex;justify-content:center;gap:var(--s-4);flex-wrap:wrap}

/* ================= FOOTER ================= */
.mkt-footer{background:var(--c-navy);color:color-mix(in srgb, var(--c-primary-ink) 82%, transparent);padding-block:var(--s-10) var(--s-8)}
.mkt-footer__top{display:flex;justify-content:space-between;gap:var(--s-8);flex-wrap:wrap;padding-block-end:var(--s-8);border-block-end:1px solid color-mix(in srgb, var(--c-primary-ink) 12%, transparent)}
.mkt-footer__brand{display:flex;align-items:center;gap:10px;font-weight:var(--fw-bold);font-size:17px;color:var(--c-primary-ink)}
.mkt-footer__brand img{height:44px;width:auto;object-fit:contain}
.mkt-footer__tagline{color:color-mix(in srgb, var(--c-primary-ink) 60%, transparent);font-size:14px;margin-block-start:var(--s-3);max-width:32ch;line-height:1.7}
.mkt-footer__links h4{font-size:13px;color:color-mix(in srgb, var(--c-primary-ink) 50%, transparent);text-transform:uppercase;letter-spacing:.04em;margin-block-end:var(--s-3)}
.mkt-footer__links a{display:block;font-size:14.5px;margin-block-end:10px;color:color-mix(in srgb, var(--c-primary-ink) 85%, transparent);transition:color var(--dur-fast) var(--ease)}
.mkt-footer__links a:hover{color:var(--c-cyan)}
.mkt-footer__bottom{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;padding-block-start:var(--s-6);font-size:12.5px;color:color-mix(in srgb, var(--c-primary-ink) 50%, transparent);line-height:1.7}
.mkt-footer__bottom p{max-width:64ch}

/* reveal-on-scroll (progressive enhancement only; content is visible without JS) */
.mkt [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.mkt [data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.mkt [data-reveal]{opacity:1;transform:none}}
.mkt-noscript [data-reveal]{opacity:1;transform:none}