/* ============================================================
   CoachMate — Marketing landing page (index.html only)
   Self-contained premium light design system.
   All classes are prefixed `lp-` / `cm-` to avoid collisions.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Surfaces */
  --paper:#ffffff;
  --canvas:#f5f8f6;
  --canvas-2:#eef3f0;
  --surface:#ffffff;
  --surface-tint:#f8fbf9;

  /* Ink */
  --ink:#0c1a14;
  --ink-2:#33443c;
  --muted:#5a6b63;
  --muted-2:#82938b;

  /* Brand — CoachMate mint/forest, tuned for contrast on white */
  --mint:#58c79a;          /* identity accent (glows, gradients, tints) */
  --mint-rgb:88,199,154;
  --brand:#0a7d54;         /* AA-accessible green for text & CTA labels on white */
  --brand-rgb:10,125,84;
  --brand-strong:#075c3f;
  --forest:#0c2a20;
  --gold:#e8a53c;
  --gold-rgb:232,165,60;
  --sky:#3b82c4;           /* neutral secondary for data */
  --violet:#7c6cf0;
  --coral:#ef6b6b;

  /* Borders / lines */
  --line:rgba(12,26,20,.09);
  --line-2:rgba(12,26,20,.14);
  --ring:rgba(var(--brand-rgb),.5);

  /* Radii */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  /* Shadows — restrained */
  --sh-1:0 1px 2px rgba(12,26,20,.05), 0 1px 3px rgba(12,26,20,.04);
  --sh-2:0 2px 6px rgba(12,40,30,.06), 0 12px 28px rgba(12,40,30,.07);
  --sh-3:0 8px 20px rgba(12,40,30,.08), 0 30px 60px rgba(12,40,30,.10);
  --sh-brand:0 12px 30px rgba(var(--brand-rgb),.28);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.16s;
  --t:.28s;
  --t-slow:.5s;

  --maxw:1200px;
  --cm-modal-z:25000;
  --cm-modal-pad:20px;
  --cm-modal-width:520px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit}
button{font-family:inherit}
h1,h2,h3,h4{margin:0; line-height:1.1; letter-spacing:-.025em; font-weight:800; color:var(--ink)}
p{margin:0}
ul{margin:0}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}

.lp-container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}
@media (max-width:640px){ .lp-container{padding:0 16px} }

.skip-link{
  position:fixed; left:16px; top:-60px; z-index:60000;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px;
  font-weight:700; text-decoration:none; transition:top var(--t);
}
.skip-link:focus{top:16px}

.lp-progress{position:fixed; inset:0 0 auto 0; height:3px; z-index:5000; background:transparent; pointer-events:none}
.lp-progress__bar{height:100%; width:0; background:linear-gradient(90deg,var(--brand),var(--mint)); transition:width .05s linear}

/* ---------- Buttons ---------- */
.lpb{
  --_h:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--_h); padding:0 22px; border-radius:var(--r-md);
  font-weight:700; font-size:15px; line-height:1; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; cursor:pointer; background:none; color:var(--ink);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
             background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.lpb i{font-size:18px; transition:transform var(--t) var(--ease)}
.lpb--sm{--_h:40px; padding:0 16px; font-size:14px}
.lpb--lg{--_h:54px; padding:0 28px; font-size:16px}
.lpb--block{display:flex; width:100%}

.lpb--primary{
  color:#fff;
  background:linear-gradient(135deg,#0a8459 0%,var(--brand) 55%,var(--brand-strong) 100%);
  box-shadow:var(--sh-brand);
}
.lpb--primary:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(var(--brand-rgb),.38); filter:brightness(1.03)}
.lpb--primary:hover i{transform:translateX(3px)}
.lpb--primary:active{transform:translateY(0)}

.lpb--secondary{
  color:var(--ink); background:var(--surface);
  border-color:var(--line-2); box-shadow:var(--sh-1);
}
.lpb--secondary:hover{transform:translateY(-2px); border-color:rgba(var(--brand-rgb),.4); box-shadow:var(--sh-2)}

.lpb--ghost{color:var(--ink-2); background:transparent; border-color:transparent}
.lpb--ghost:hover{background:var(--canvas-2); color:var(--ink)}

/* ---------- Nav ---------- */
.lp-nav{
  position:sticky; top:0; z-index:4000;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:background var(--t), border-color var(--t), box-shadow var(--t);
}
.lp-nav.is-scrolled{background:rgba(255,255,255,.92); border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(12,26,20,.03), 0 10px 30px -20px rgba(12,40,30,.5)}
.lp-nav__inner{display:flex; align-items:center; gap:20px; height:70px}
.lp-brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.lp-brand__logo{height:34px; width:auto; border-radius:8px}
.lp-brand__name{font-size:20px; font-weight:900; letter-spacing:-.03em; color:var(--ink)}
.lp-brand__lockup{height:40px; width:auto; display:block}
@media (max-width:640px){ .lp-brand__lockup{height:34px} }

.lp-nav__links{display:flex; align-items:center; gap:2px; margin:0 auto}
.lp-nav__item{position:relative}
.lp-nav__link{
  display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:10px;
  font-size:14.5px; font-weight:600; color:var(--ink-2); text-decoration:none; cursor:pointer;
  background:none; border:0; transition:background var(--t-fast), color var(--t-fast);
}
.lp-nav__link:hover{background:var(--canvas-2); color:var(--ink)}
.lp-nav__link i{font-size:16px; transition:transform var(--t)}
.lp-nav__item.is-open .lp-nav__link{background:var(--canvas-2); color:var(--ink)}
.lp-nav__item.is-open .lp-nav__link i.ti-chevron-down{transform:rotate(180deg)}

.lp-mega{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  width:max-content; max-width:min(680px,90vw);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); padding:14px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--t), transform var(--t), visibility var(--t);
  z-index:10;
}
.lp-mega--wide{max-width:min(760px,92vw)}
.lp-nav__item.is-open .lp-mega{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0)}
.lp-mega__grid{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.lp-mega__link{
  display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:12px;
  text-decoration:none; transition:background var(--t-fast);
}
.lp-mega__link:hover{background:var(--canvas)}
.lp-mega__ic{
  width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center; font-size:19px;
  background:rgba(var(--brand-rgb),.1); color:var(--brand);
}
.lp-mega__link strong{display:block; font-size:14px; color:var(--ink); margin-bottom:1px}
.lp-mega__link span{font-size:12.5px; color:var(--muted); line-height:1.45}

.lp-nav__actions{display:flex; align-items:center; gap:8px; flex:none}
.lp-nav__burger{
  display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); align-items:center; justify-content:center; cursor:pointer;
}
.lp-nav__burger i{font-size:22px}

/* mobile nav panel */
.lp-mnav{
  position:fixed; inset:70px 0 0 0; z-index:3900;
  background:var(--paper); padding:16px; overflow:auto;
  transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--t), transform var(--t), visibility var(--t);
}
.lp-mnav.is-open{opacity:1; visibility:visible; pointer-events:auto; transform:none}
.lp-mnav__group{border-bottom:1px solid var(--line); padding:6px 0}
.lp-mnav__group > a, .lp-mnav__gtitle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:14px 8px; font-size:16px; font-weight:700; color:var(--ink); text-decoration:none;
  background:none; border:0; cursor:pointer; text-align:left;
}
.lp-mnav__sub{display:grid; gap:2px; padding:0 8px 8px}
.lp-mnav__sub a{padding:10px 8px; border-radius:10px; color:var(--muted); text-decoration:none; font-weight:500; font-size:14.5px}
.lp-mnav__sub a:hover{background:var(--canvas-2); color:var(--ink)}
.lp-mnav__ctas{display:grid; gap:10px; padding:18px 4px 40px}

/* ---------- Section scaffolding ---------- */
.lp-section{padding:clamp(56px,7vw,104px) 0; position:relative}
.lp-section--tint{background:var(--canvas)}
.lp-section--forest{background:radial-gradient(1000px 500px at 50% -10%,#123c2d,#0a2019); color:#eaf5ef}
.lp-head{max-width:720px; margin:0 auto clamp(32px,4vw,56px); text-align:center}
.lp-head--left{margin-left:0; text-align:left}
.lp-kicker{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand);
}
.lp-kicker::before{content:""; width:20px; height:2px; border-radius:2px; background:var(--brand)}
.lp-section--forest .lp-kicker{color:var(--mint)}
.lp-h2{font-size:clamp(28px,3.6vw,44px); font-weight:900; letter-spacing:-.03em}
.lp-sub{margin-top:16px; font-size:clamp(16px,1.5vw,18.5px); color:var(--muted); line-height:1.65}
.lp-section--forest .lp-sub{color:rgba(234,245,239,.72)}
.lp-grad{background:linear-gradient(100deg,var(--brand),#1f9e6e 85%); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- Hero ---------- */
.lp-hero{position:relative; overflow:hidden; padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,64px)}
.lp-hero__bg{position:absolute; inset:0; pointer-events:none; z-index:0}
.lp-hero__bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(760px 420px at 12% -6%, rgba(var(--mint-rgb),.22), transparent 60%),
    radial-gradient(680px 460px at 92% 4%, rgba(var(--brand-rgb),.12), transparent 62%),
    radial-gradient(600px 400px at 60% 108%, rgba(var(--gold-rgb),.07), transparent 60%);
}
.lp-hero__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px; opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 78% 60% at 50% 0%,#000 25%,transparent 72%);
  mask-image:radial-gradient(ellipse 78% 60% at 50% 0%,#000 25%,transparent 72%);
}
.lp-hero__inner{position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center}
.lp-hero__copy{max-width:600px}

.lp-eyebrow{
  display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--sh-1);
  color:var(--ink-2); font-weight:700; font-size:13px;
}
.lp-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.16)}

.lp-h1{font-size:clamp(36px,4.8vw,62px); line-height:1.03; letter-spacing:-.04em; font-weight:900; margin:20px 0 18px}
.lp-hero__lead{color:var(--muted); font-size:clamp(16.5px,1.6vw,19px); line-height:1.65; max-width:54ch; margin-bottom:26px}
.lp-hero__lead strong{color:var(--ink); font-weight:600}
.lp-hero__cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.lp-hero__note{margin-top:18px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13.5px}
.lp-hero__note i{color:var(--brand); font-size:16px}

/* Product mock (browser dashboard) */
.lp-hero__visual{position:relative; z-index:1}
.lp-window{
  border-radius:16px; background:var(--surface); border:1px solid var(--line-2);
  box-shadow:var(--sh-3); overflow:hidden; will-change:transform;
}
.lp-window__bar{
  display:flex; align-items:center; gap:8px; padding:12px 14px;
  background:var(--surface-tint); border-bottom:1px solid var(--line);
}
.lp-window__dots{display:flex; gap:6px}
.lp-window__dots i{width:11px; height:11px; border-radius:50%; background:var(--line-2)}
.lp-window__url{
  margin-left:8px; flex:1; height:26px; border-radius:8px; background:var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; gap:7px; padding:0 12px; font-size:11.5px; color:var(--muted); font-weight:600;
}
.lp-window__url i{font-size:13px; color:var(--brand)}
.lp-app{display:grid; grid-template-columns:64px 1fr; min-height:340px}
.lp-app__rail{background:var(--surface-tint); border-right:1px solid var(--line); padding:14px 0; display:flex; flex-direction:column; align-items:center; gap:10px}
.lp-app__railio{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--muted); font-size:17px}
.lp-app__railio.is-on{background:rgba(var(--brand-rgb),.12); color:var(--brand)}
.lp-app__main{padding:16px}
.lp-app__crumb{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.lp-app__crumb strong{font-size:14px}
.lp-app__crumb .lp-pill{font-size:10.5px; padding:4px 9px; border-radius:var(--r-pill); background:rgba(var(--brand-rgb),.1); color:var(--brand); font-weight:700}
.lp-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:12px}
.lp-kpi{border:1px solid var(--line); border-radius:12px; padding:11px 12px; background:var(--paper)}
.lp-kpi__l{font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
.lp-kpi__v{font-size:19px; font-weight:900; letter-spacing:-.02em; margin-top:3px}
.lp-kpi__d{font-size:10.5px; font-weight:700; color:var(--brand); margin-top:2px; display:flex; align-items:center; gap:3px}
.lp-kpi__d.is-warn{color:var(--gold)}
.lp-mockchart{
  border:1px solid var(--line); border-radius:12px; padding:12px 13px; background:var(--paper);
}
.lp-mockchart__top{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; font-weight:800; margin-bottom:10px}
.lp-mockchart__top span:last-child{color:var(--muted); font-weight:600}
.lp-bars{display:flex; align-items:flex-end; gap:8px; height:88px}
.lp-bars > span{flex:1; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--mint),var(--brand)); transform-origin:bottom; transform:scaleY(.15); transition:transform .7s var(--ease-out)}
.is-revealed .lp-bars > span{transform:scaleY(1)}

/* floating cards */
.lp-float{
  position:absolute; z-index:2; display:flex; align-items:center; gap:11px; padding:12px 15px;
  border-radius:14px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-3);
  font-size:12.5px; min-width:184px;
}
.lp-float strong{display:block; font-size:12.5px; color:var(--ink)}
.lp-float span{font-size:11px; color:var(--muted)}
.lp-float__ic{width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; font-size:17px}
.lp-float__ic--pay{background:rgba(var(--brand-rgb),.12); color:var(--brand)}
.lp-float__ic--msg{background:rgba(124,108,240,.14); color:var(--violet)}
.lp-float__ic--live{background:rgba(239,107,107,.13); color:var(--coral)}
.lp-float--a{top:-20px; right:-16px; animation:lp-bob 5.5s var(--ease) infinite}
.lp-float--b{bottom:24px; left:-26px; animation:lp-bob 6.5s var(--ease) infinite .6s}
@keyframes lp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Workflow band ---------- */
.lp-flow{
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap; justify-content:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-2); padding:14px; overflow:hidden;
}
.lp-flow__step{
  flex:1 1 0; min-width:120px; display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:8px; padding:18px 12px; position:relative;
}
.lp-flow__step i{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:22px;
  background:rgba(var(--brand-rgb),.1); color:var(--brand);
}
.lp-flow__step strong{font-size:14px; font-weight:700}
.lp-flow__step span{font-size:12px; color:var(--muted)}
.lp-flow__step:not(:last-child)::after{
  content:"\ea61"; font-family:"tabler-icons" !important; position:absolute; right:-9px; top:34px;
  color:var(--line-2); font-size:18px;
}
@media (max-width:820px){
  .lp-flow__step{flex-basis:33.33%}
  .lp-flow__step:not(:last-child)::after{display:none}
}
@media (max-width:480px){ .lp-flow__step{flex-basis:50%} }

/* ---------- Client logo carousel ---------- */
.lp-clients{padding:clamp(36px,5vw,60px) 0; border-bottom:1px solid var(--line)}
.lp-clients[hidden]{display:none}
.lp-clients__label{
  text-align:center; color:var(--muted); font-size:13px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:26px;
}
.lp-clients__viewport{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.lp-clients__track{display:flex; align-items:center; gap:28px; width:max-content; animation:lp-marquee 40s linear infinite}
.lp-clients__viewport:hover .lp-clients__track{animation-play-state:paused}
@keyframes lp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lp-clientchip{
  flex:none; display:flex; align-items:center; gap:12px; padding:14px 22px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1);
}
.lp-clientchip img{
  height:38px; width:auto; max-width:130px; object-fit:contain;
  filter:grayscale(1); opacity:.72; transition:filter var(--t), opacity var(--t);
}
.lp-clientchip:hover img{filter:none; opacity:1}
.lp-clientchip__name{font-size:14.5px; font-weight:800; color:var(--ink-2); white-space:nowrap}
.lp-clientchip--text{padding:14px 24px}
.lp-clientchip--text .lp-clientchip__name{color:var(--ink)}

/* ---------- Roles ---------- */
.lp-roles{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-2); overflow:hidden}
.lp-roles__tabs{display:flex; gap:4px; padding:12px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.lp-roles__tabs::-webkit-scrollbar{display:none}
.lp-roletab{
  flex:1 1 auto; min-width:max-content; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; border-radius:12px; border:1px solid transparent; background:none; cursor:pointer;
  font-size:14px; font-weight:700; color:var(--muted); transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.lp-roletab i{font-size:18px}
.lp-roletab:hover{background:var(--canvas)}
.lp-roletab.is-active{background:rgba(var(--brand-rgb),.1); color:var(--brand-strong); border-color:rgba(var(--brand-rgb),.2)}
.lp-roles__body{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,3.5vw,48px); padding:clamp(24px,3.5vw,44px)}
.lp-roles__copy h3{font-size:clamp(22px,2.4vw,30px); font-weight:900; margin-bottom:12px}
.lp-roles__copy p{color:var(--muted); font-size:16px; margin-bottom:20px}
.lp-roles__list{list-style:none; padding:0; display:grid; gap:11px}
.lp-roles__list li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink-2)}
.lp-roles__list li i{flex:none; margin-top:2px; color:var(--brand); font-size:17px}
.lp-roles__panel{
  background:var(--surface-tint); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; min-height:280px;
}
.lp-roles[data-anim] .lp-roles__copy, .lp-roles[data-anim] .lp-roles__panel{animation:lp-fade .4s var(--ease) both}
@keyframes lp-fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* mini panel primitives (reused in role/mock panels) */
.lp-panel__title{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:800; margin-bottom:10px}
.lp-panel__title span:last-child{color:var(--muted); font-weight:600; font-size:11px}
.lp-row{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; background:var(--paper); border:1px solid var(--line); font-size:12.5px}
.lp-row + .lp-row{margin-top:7px}
.lp-row__ic{width:28px; height:28px; border-radius:8px; flex:none; display:grid; place-items:center; font-size:15px; background:rgba(var(--brand-rgb),.1); color:var(--brand)}
.lp-row__main{flex:1; min-width:0}
.lp-row__main strong{display:block; font-size:12.5px; font-weight:700}
.lp-row__main span{font-size:11px; color:var(--muted)}
.lp-tag{font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:var(--r-pill); flex:none}
.lp-tag--ok{background:rgba(var(--brand-rgb),.12); color:var(--brand-strong)}
.lp-tag--info{background:rgba(59,130,196,.14); color:var(--sky)}
.lp-tag--warn{background:rgba(var(--gold-rgb),.16); color:#b57d16}
.lp-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px}
.lp-metric{background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:10px}
.lp-metric span{font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700}
.lp-metric strong{display:block; font-size:18px; font-weight:900; margin-top:3px; letter-spacing:-.02em}

/* ---------- Story sections ---------- */
.lp-story{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.lp-story + .lp-story{margin-top:clamp(56px,7vw,110px)}
.lp-story--rev .lp-story__media{order:-1}
.lp-story__copy h3{font-size:clamp(24px,2.8vw,34px); font-weight:900; margin-bottom:16px}
.lp-story__copy > p{color:var(--muted); font-size:16.5px; line-height:1.65; margin-bottom:22px}
.lp-story__list{list-style:none; padding:0; display:grid; gap:13px}
.lp-story__list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2); line-height:1.5}
.lp-story__list li i{flex:none; margin-top:1px; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:15px; background:rgba(var(--brand-rgb),.1); color:var(--brand)}
.lp-story__list li strong{color:var(--ink); font-weight:700}
.lp-story__media{position:relative}
.lp-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); padding:18px; position:relative; overflow:hidden;
}
.lp-card__glow{position:absolute; width:220px; height:220px; border-radius:50%; top:-90px; right:-70px; filter:blur(50px); opacity:.16; pointer-events:none; background:var(--brand)}

/* line chart svg */
.lp-linechart svg{width:100%; height:auto; display:block}
.lp-linechart path.line{stroke:var(--brand); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s var(--ease-out)}
.is-revealed .lp-linechart path.line{stroke-dashoffset:0}
.lp-linechart path.area{fill:url(#lpArea); opacity:0; transition:opacity .8s ease .3s}
.is-revealed .lp-linechart path.area{opacity:1}
.lp-donut circle.val{stroke-dasharray:var(--dash); stroke-dashoffset:var(--dash); transition:stroke-dashoffset 1.2s var(--ease-out)}
.is-revealed .lp-donut circle.val{stroke-dashoffset:var(--off)}

/* donut legend */
.lp-legend{display:grid; gap:7px; margin-top:2px}
.lp-legend li{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); list-style:none}
.lp-legend i{width:9px; height:9px; border-radius:3px; flex:none}

/* bracket */
.lp-bracket{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:center}
.lp-bracket__col{display:grid; gap:12px}
.lp-bracket__m{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:11.5px}
.lp-bracket__m div{display:flex; justify-content:space-between; padding:3px 0}
.lp-bracket__m div.win{font-weight:800; color:var(--brand-strong)}
.lp-bracket__m div + div{border-top:1px solid var(--line)}
.lp-bracket__col--f .lp-bracket__m{border-color:rgba(var(--gold-rgb),.5); background:rgba(var(--gold-rgb),.06)}

/* scoreboard */
.lp-score{background:var(--forest); color:#eaf5ef; border-radius:14px; padding:14px 16px; margin-bottom:12px}
.lp-score__top{display:flex; justify-content:space-between; font-size:11px; font-weight:800; margin-bottom:10px; color:rgba(234,245,239,.7)}
.lp-score__live{display:inline-flex; align-items:center; gap:6px; color:#ff8f8f; text-transform:uppercase; letter-spacing:.06em}
.lp-score__live .d{width:7px; height:7px; border-radius:50%; background:var(--coral); animation:lp-pulse 1.6s infinite}
@keyframes lp-pulse{0%,100%{box-shadow:0 0 0 3px rgba(239,107,107,.25)}50%{box-shadow:0 0 0 7px rgba(239,107,107,.05)}}
.lp-score__row{display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-weight:800; font-size:15px}
.lp-score__row + .lp-score__row{border-top:1px solid rgba(255,255,255,.1)}
.lp-score__row .t{display:flex; align-items:center; gap:9px}
.lp-score__row .t .d{width:9px; height:9px; border-radius:50%}
.lp-score__pts{font-size:20px}
.lp-score__meta{margin-top:10px; display:flex; justify-content:space-between; font-size:11px; color:rgba(234,245,239,.6); font-weight:700}

/* ---------- Ecosystem grid ---------- */
.lp-eco{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.lp-eco__card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px;
  transition:transform var(--t), border-color var(--t), box-shadow var(--t);
}
.lp-eco__card:hover{transform:translateY(-4px); border-color:rgba(var(--brand-rgb),.3); box-shadow:var(--sh-2)}
.lp-eco__ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:21px; margin-bottom:13px; background:rgba(var(--brand-rgb),.1); color:var(--brand)}
.lp-eco__card:nth-child(4n+2) .lp-eco__ic{background:rgba(59,130,196,.12); color:var(--sky)}
.lp-eco__card:nth-child(4n+3) .lp-eco__ic{background:rgba(124,108,240,.13); color:var(--violet)}
.lp-eco__card:nth-child(4n+4) .lp-eco__ic{background:rgba(var(--gold-rgb),.14); color:#b57d16}
.lp-eco__card h3{font-size:15px; font-weight:800; margin-bottom:5px}
.lp-eco__card p{font-size:13px; color:var(--muted); line-height:1.5}

/* ---------- Sport selector ---------- */
.lp-sportpicker{display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-bottom:34px}
.lp-sportbtn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--sh-1); cursor:pointer;
  font-size:14px; font-weight:700; color:var(--ink-2); transition:all var(--t-fast);
}
.lp-sportbtn i{font-size:17px; color:var(--muted)}
.lp-sportbtn:hover{transform:translateY(-2px); border-color:rgba(var(--brand-rgb),.3)}
.lp-sportbtn.is-active{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:var(--sh-brand)}
.lp-sportbtn.is-active i{color:#fff}
.lp-sportshow{
  max-width:760px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-2); padding:clamp(22px,3vw,36px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,40px); align-items:center;
}
.lp-sportshow__head{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.lp-sportshow__ic{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:28px; background:rgba(var(--brand-rgb),.1); color:var(--brand); flex:none}
.lp-sportshow h3{font-size:26px; font-weight:900}
.lp-sportshow__head span{font-size:13px; color:var(--muted)}
.lp-sportshow__terms{display:flex; gap:8px; flex-wrap:wrap}
.lp-sportshow__terms span{font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:var(--r-pill); background:var(--canvas-2); color:var(--ink-2)}
.lp-sportshow[data-anim] > *{animation:lp-fade .4s var(--ease) both}

/* ---------- Multi-sport org ---------- */
.lp-orgtree{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:20px}
.lp-orgtree__root{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:linear-gradient(135deg,rgba(var(--brand-rgb),.12),rgba(var(--mint-rgb),.08)); border:1px solid rgba(var(--brand-rgb),.2); font-weight:800; margin-bottom:14px}
.lp-orgtree__root i{font-size:22px; color:var(--brand)}
.lp-orgtree__sports{display:grid; gap:9px}
.lp-orgtree__sport{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:11px; border:1px solid var(--line); background:var(--paper)}
.lp-orgtree__sport i{font-size:18px; color:var(--muted); flex:none}
.lp-orgtree__sport strong{font-size:14px}
.lp-orgtree__sport span{margin-left:auto; font-size:11.5px; font-weight:700; color:var(--brand); background:rgba(var(--brand-rgb),.1); padding:4px 9px; border-radius:var(--r-pill)}

/* ---------- White label ---------- */
.lp-wl{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center}
.lp-wl__devices{position:relative; display:flex; align-items:flex-end; justify-content:center; gap:0}
.lp-wl__desktop{
  width:100%; max-width:440px; background:var(--surface); border:1px solid var(--line-2);
  border-radius:14px; box-shadow:var(--sh-3); overflow:hidden;
}
.lp-wl__hero{padding:24px 20px; color:#fff; text-align:center}
.lp-wl__hero small{font-size:11px; opacity:.8; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.lp-wl__hero strong{display:block; font-size:20px; font-weight:900; margin-top:5px}
.lp-wl__hero em{font-size:12.5px; opacity:.85; font-style:normal}
.lp-wl__body{padding:14px}
.lp-wl__phone{
  position:absolute; right:-6px; bottom:-16px; width:120px; height:236px; background:var(--ink);
  border-radius:24px; padding:7px; box-shadow:var(--sh-3);
}
.lp-wl__phscreen{width:100%; height:100%; border-radius:18px; overflow:hidden; background:#fff}
.lp-wl__phhero{padding:14px 10px; color:#fff; text-align:center}
.lp-wl__phhero strong{display:block; font-size:11px; font-weight:900; margin-top:4px}
.lp-wl__swatches{display:flex; gap:8px; margin-top:20px}
.lp-wl__swatch{width:30px; height:30px; border-radius:9px; border:2px solid #fff; box-shadow:var(--sh-1); cursor:pointer; transition:transform var(--t)}
.lp-wl__swatch:hover{transform:scale(1.12)}
.lp-wl__swatch.is-active{box-shadow:0 0 0 2px var(--ink)}

/* ---------- Mobile section ---------- */
.lp-phones{display:flex; gap:18px; justify-content:center; flex-wrap:wrap}
.lp-phone{
  width:210px; flex:none; background:var(--ink); border-radius:30px; padding:8px; box-shadow:var(--sh-3);
}
.lp-phone__notch{width:44%; height:5px; background:rgba(255,255,255,.3); border-radius:99px; margin:3px auto 6px}
.lp-phone__screen{background:var(--surface); border-radius:24px; overflow:hidden; min-height:390px}
.lp-phone__top{padding:16px 14px 12px; color:#fff}
.lp-phone__top small{font-size:10.5px; opacity:.8; font-weight:700}
.lp-phone__top strong{display:block; font-size:16px; margin-top:3px}
.lp-phone__body{padding:12px}
/* On mobile, swipe the phones horizontally instead of cramming 3 into a column */
@media (max-width:640px){
  .lp-phones{
    flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    gap:16px; padding:4px 16px 14px; margin-left:-16px; margin-right:-16px;
  }
  .lp-phones::-webkit-scrollbar{display:none}
  .lp-phone{width:min(74vw,264px); scroll-snap-align:center}
}

/* ---------- Why / positioning ---------- */
.lp-why{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,52px); align-items:center}
.lp-whylist{display:grid; gap:6px}
.lp-whyrow{display:flex; gap:14px; padding:15px 16px; border-radius:14px; transition:background var(--t)}
.lp-whyrow:hover{background:var(--surface)}
.lp-whyrow i{flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:19px; background:rgba(var(--brand-rgb),.1); color:var(--brand)}
.lp-whyrow strong{display:block; font-size:15.5px; margin-bottom:2px}
.lp-whyrow span{font-size:13.5px; color:var(--muted); line-height:1.55}
.lp-compare{display:grid; gap:14px}
.lp-comparecard{border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; background:var(--surface)}
.lp-comparecard--before{background:linear-gradient(170deg,rgba(239,107,107,.05),var(--surface))}
.lp-comparecard--after{background:linear-gradient(170deg,rgba(var(--brand-rgb),.07),var(--surface)); border-color:rgba(var(--brand-rgb),.24)}
.lp-comparecard__head{display:flex; align-items:center; gap:9px; font-weight:900; font-size:15px; margin-bottom:14px}
.lp-comparecard--before .lp-comparecard__head i{color:var(--coral)}
.lp-comparecard--after .lp-comparecard__head i{color:var(--brand)}
.lp-comparecard ul{list-style:none; padding:0; display:grid; gap:10px}
.lp-comparecard li{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2); line-height:1.5}
.lp-comparecard li i{flex:none; margin-top:2px; font-size:16px}
.lp-comparecard--before li i{color:rgba(239,107,107,.8)}
.lp-comparecard--after li i{color:var(--brand)}

/* ---------- Pricing ---------- */
.lp-price{max-width:600px; margin:0 auto; position:relative}
.lp-pricecard{
  background:var(--surface); border:1px solid rgba(var(--brand-rgb),.25); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); padding:clamp(28px,4vw,44px); position:relative; overflow:hidden;
}
.lp-pricecard::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--brand),var(--mint))}
.lp-pricecard__badge{position:absolute; top:20px; right:20px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--brand-strong); background:rgba(var(--brand-rgb),.12); padding:6px 12px; border-radius:var(--r-pill)}
.lp-pricecard h3{font-size:22px; font-weight:900}
.lp-pricecard__for{color:var(--muted); font-size:14px; margin-top:4px}
.lp-price__amount{display:flex; align-items:baseline; gap:8px; margin:22px 0 4px}
.lp-price__val{font-size:clamp(48px,7vw,68px); font-weight:900; letter-spacing:-.04em; line-height:1}
.lp-price__unit{font-size:17px; color:var(--muted); font-weight:600}
.lp-price__meta{color:var(--muted); font-size:14px; margin-bottom:22px}
.lp-price__list{list-style:none; padding:0; display:grid; gap:11px; margin-bottom:26px}
.lp-price__list li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink-2)}
.lp-price__list li i{flex:none; margin-top:2px; color:var(--brand); font-size:17px}
.lp-price__ctas{display:grid; gap:10px}
.lp-note{
  max-width:600px; margin:22px auto 0; display:flex; gap:12px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px;
  font-size:13.5px; color:var(--muted); line-height:1.6;
}
.lp-note i{color:var(--brand); font-size:18px; flex:none; margin-top:1px}
.lp-note button{background:none; border:0; padding:0; font:inherit; color:var(--brand); font-weight:700; text-decoration:underline; cursor:pointer}

/* ---------- FAQ ---------- */
.lp-faq{max-width:800px; margin:0 auto; display:grid; gap:12px}
.lp-faqitem{border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); overflow:hidden; transition:border-color var(--t), box-shadow var(--t)}
.lp-faqitem.is-open{border-color:rgba(var(--brand-rgb),.3); box-shadow:var(--sh-1)}
.lp-faqq{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; background:none; border:0; cursor:pointer; text-align:left;
  font-size:16px; font-weight:700; color:var(--ink);
}
.lp-faqq i{flex:none; font-size:20px; color:var(--brand); transition:transform var(--t)}
.lp-faqitem.is-open .lp-faqq i{transform:rotate(45deg)}
.lp-faqa{max-height:0; overflow:hidden; transition:max-height var(--t) var(--ease)}
.lp-faqa__inner{padding:0 20px 20px; color:var(--muted); font-size:14.5px; line-height:1.65}

/* ---------- Final CTA ---------- */
.lp-finalcta{padding:clamp(64px,8vw,110px) 0}
.lp-finalcta__box{
  position:relative; overflow:hidden; border-radius:var(--r-xl); text-align:center;
  padding:clamp(40px,6vw,80px) 24px; color:#eaf5ef;
  background:radial-gradient(700px 380px at 50% -20%,#1a5a41,#0b241b);
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--sh-3);
}
.lp-finalcta__box::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000,transparent 75%); mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000,transparent 75%)}
.lp-finalcta__box > *{position:relative}
.lp-finalcta h2{font-size:clamp(28px,3.8vw,46px); font-weight:900; letter-spacing:-.03em; color:#fff}
.lp-finalcta p{margin:16px auto 30px; max-width:56ch; font-size:17px; color:rgba(234,245,239,.8); line-height:1.6}
.lp-finalcta__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.lp-finalcta .lpb--secondary{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#fff}
.lp-finalcta .lpb--secondary:hover{background:rgba(255,255,255,.16)}

/* ---------- Footer ---------- */
.lp-footer{background:var(--canvas); border-top:1px solid var(--line)}
.lp-footgrid{display:grid; grid-template-columns:minmax(260px,1fr) 2fr; gap:56px; padding:64px 0 44px}
.lp-footbrand__mark{display:flex; align-items:center; gap:11px; margin-bottom:16px}
.lp-footbrand__mark img{height:34px; width:auto; border-radius:8px}
.lp-footbrand__mark span{font-size:19px; font-weight:900; letter-spacing:-.03em}
.lp-footbrand p{color:var(--muted); font-size:14px; line-height:1.7; margin-bottom:20px; max-width:40ch}
.lp-footcols{display:grid; grid-template-columns:repeat(4,1fr); gap:32px}
.lp-footcol h3{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.lp-footcol a, .lp-footcol button{
  display:block; color:var(--ink-2); text-decoration:none; font-size:14px; padding:6px 0;
  background:none; border:0; cursor:pointer; font:inherit; text-align:left; transition:color var(--t-fast);
}
.lp-footcol a:hover, .lp-footcol button:hover{color:var(--brand)}
.lp-footbottom{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:22px 0 30px; border-top:1px solid var(--line)}
.lp-footbottom__copy{color:var(--muted); font-size:13px}
.lp-footbottom__legal{display:flex; gap:22px; flex-wrap:wrap}
.lp-footbottom__legal a{color:var(--muted); text-decoration:none; font-size:13px; font-weight:600}
.lp-footbottom__legal a:hover{color:var(--ink)}

/* ---------- Modal (canonical cm-modal contract) ---------- */
.cm-modal{
  position:fixed; inset:0; z-index:var(--cm-modal-z); display:none;
  align-items:center; justify-content:center; padding:var(--cm-modal-pad); overflow:auto;
  background:radial-gradient(130% 130% at 50% -10%,rgba(6,20,14,.55),rgba(4,12,9,.7));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility .2s ease;
}
.cm-modal.cm-modal--open,.cm-modal[aria-hidden="false"]{display:flex; opacity:1; visibility:visible; pointer-events:auto}
.cm-modal__backdrop{position:absolute; inset:0}
.cm-modal__dialog{
  position:relative; width:min(var(--cm-modal-width),100%); max-height:calc(100dvh - 40px); overflow:auto;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  padding:26px; transform:translateY(10px) scale(.98); opacity:0; transition:transform .22s var(--ease), opacity .2s ease;
}
.cm-modal.cm-modal--open .cm-modal__dialog,.cm-modal[aria-hidden="false"] .cm-modal__dialog{transform:none; opacity:1}
.cm-modal__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.cm-modal__top strong{font-size:19px; font-weight:900}
.cm-modal__x{width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center; font-size:18px}
.cm-modal__x:hover{background:var(--canvas-2)}
.cm-modal p.cm-modal__desc{color:var(--muted); font-size:14px; margin-bottom:18px}
.cm-form{display:grid; gap:14px}
.cm-form label{display:grid; gap:6px; font-size:13px; font-weight:700; color:var(--ink-2)}
.cm-form input,.cm-form textarea{
  font:inherit; font-weight:500; padding:12px 14px; border-radius:11px; border:1px solid var(--line-2);
  background:var(--paper); color:var(--ink); transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.cm-form input:focus,.cm-form textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.15)}
.cm-form textarea{resize:vertical; min-height:74px}

/* ---------- Toast ---------- */
.lp-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px);
  z-index:60000; display:flex; align-items:center; gap:10px; padding:13px 18px; border-radius:var(--r-pill);
  background:var(--ink); color:#fff; font-size:14px; font-weight:600; box-shadow:var(--sh-3);
  opacity:0; visibility:hidden; transition:opacity var(--t), transform var(--t), visibility var(--t);
}
.lp-toast.is-shown{opacity:1; visibility:visible; transform:translateX(-50%)}
.lp-toast i{color:var(--mint); font-size:18px}

/* ---------- Reveal system ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.reveal.is-revealed{opacity:1; transform:none}
.reveal[data-reveal-delay="1"]{transition-delay:.08s}
.reveal[data-reveal-delay="2"]{transition-delay:.16s}
.reveal[data-reveal-delay="3"]{transition-delay:.24s}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .lp-float--a,.lp-float--b{animation:none}
  .lp-score__live .d,.lp-bars>span,.lp-linechart path,.lp-donut circle.val{transition:none; animation:none}
  .lp-clients__track{animation:none; flex-wrap:wrap; justify-content:center; width:auto}
  .lp-bars>span{transform:scaleY(1)}
  .lp-linechart path.line{stroke-dashoffset:0}
  .lp-linechart path.area{opacity:1}
  .lp-donut circle.val{stroke-dashoffset:var(--off)}
  /* Panel/tab swap fades and accordion easing: show instantly, no motion */
  .lp-roles[data-anim] .lp-roles__copy,.lp-roles[data-anim] .lp-roles__panel,
  .lp-sportshow[data-anim] > *{animation:none !important}
  .lp-faqa{transition:none}
  .lp-hero__visual{transform:none !important}
  *{scroll-behavior:auto !important}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .lp-hero__inner{grid-template-columns:1fr; gap:48px}
  .lp-hero__copy{max-width:640px}
  .lp-hero__visual{max-width:600px; margin:0 auto; width:100%}
  .lp-roles__body{grid-template-columns:1fr; gap:28px}
  .lp-story,.lp-story--rev{grid-template-columns:1fr; gap:32px}
  .lp-story--rev .lp-story__media{order:0}
  .lp-eco{grid-template-columns:repeat(2,1fr)}
  .lp-wl,.lp-why{grid-template-columns:1fr; gap:36px}
  .lp-sportshow{grid-template-columns:1fr; max-width:520px}
  .lp-footgrid{grid-template-columns:1fr; gap:40px}
  .lp-nav__links{display:none}
  .lp-nav__actions{margin-left:auto}
  .lp-nav__actions .lpb:not(.lp-nav__demo){display:none}
  .lp-nav__burger{display:inline-flex}
}
@media (max-width:640px){
  .lp-hero__cta .lpb{width:100%}
  .lp-kpis{grid-template-columns:repeat(2,1fr)}
  .lp-eco{grid-template-columns:1fr}
  .lp-footcols{grid-template-columns:repeat(2,1fr); gap:26px}
  .lp-footbottom{flex-direction:column; align-items:flex-start}
  .lp-nav__demo{display:none}
  .lp-float--a{top:-12px; right:0}
  .lp-float--b{bottom:8px; left:0}
}
@media (max-width:400px){
  .lp-footcols{grid-template-columns:1fr}
}