:root { color-scheme: dark; --arena:#09090b; --surface:#18181b; --raised:#27272a; --line:#3f3f46; --text:#fafafa; --muted:#a1a1aa; --lime:#84cc16; --lime-light:#a3e635; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; background:var(--arena); color:var(--text); font:400 16px/1.65 Inter,system-ui,sans-serif; }
::selection { background:var(--lime-light); color:var(--arena); }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--arena); }
::-webkit-scrollbar-thumb { background:var(--line); border:2px solid var(--arena); border-radius:8px; }
a { color:inherit; text-decoration:none; text-underline-offset:5px; }
a:hover { color:var(--lime-light); }
button,input { font:inherit; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--lime-light); outline-offset:5px; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
h1,h2,h3,p { margin:0; }
h1,h2 { font-family:Rajdhani,system-ui,sans-serif; font-weight:700; letter-spacing:-.025em; line-height:1.02; text-wrap:balance; }
h2 { font-size:clamp(36px,4.4vw,56px); }
h3 { font-size:19px; line-height:1.4; font-weight:700; }
p { color:var(--muted); }
[hidden] { display:none!important; }
.wrap { max-width:1240px; padding-inline:44px; margin-inline:auto; }
.skip-link { position:absolute; top:8px; left:12px; padding:10px 16px; background:var(--lime); color:var(--arena); z-index:10; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.site-header { min-height:108px; display:flex; justify-content:space-between; align-items:center; gap:30px; }
.brand { display:flex; align-items:center; flex-shrink:0; }
.brand img { display:block; max-width:100%; height:auto; }
.site-header nav { display:flex; align-items:center; gap:28px; font-size:13px; font-weight:600; }
.site-header nav a { display:flex; align-items:center; min-height:44px; }
.portal-link { border:1px solid var(--line); border-radius:12px; padding:0 18px; gap:14px; }
.hero { display:grid; grid-template-columns:1.08fr 1fr; gap:52px; align-items:center; padding-top:58px; padding-bottom:100px; }
h1 { font-size:clamp(52px,5.6vw,76px); }
h1 span { color:var(--lime-light); }
.hero-description { max-width:455px; margin-top:26px; font-size:17px; line-height:1.8; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:32px; min-height:56px; padding:16px 22px; border-radius:12px; font-weight:700; line-height:1.5; }
.primary { background:var(--lime); color:var(--arena); }
.primary:hover { background:var(--lime-light); color:var(--arena); }
.primary:active { background:#65a30d; }
.hero .button { margin-top:32px; min-width:254px; }
.cta-note { margin-top:12px; font-size:12px; }
.quiet-link { display:inline-flex; min-height:44px; align-items:center; gap:14px; font-size:13px; font-weight:600; }
.hero .quiet-link { margin-top:17px; color:var(--muted); }
.hero .quiet-link:hover { color:var(--lime-light); }
.squad-preview { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); }
.preview-cover { position:relative; height:208px; overflow:hidden; }
.preview-cover img { width:100%; height:100%; object-fit:cover; object-position:70% center; opacity:.8; }
.cover-caption { position:absolute; inset:0; padding:26px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(transparent 15%, rgba(9,9,11,.92)); }
.cover-caption h2 { font-size:38px; }
.cover-caption p { color:#d4d4d8; font-size:12px; margin-top:6px; }
.pass-label { align-self:flex-start; margin-top:12px; font-size:11px; font-weight:600; padding:3px 9px; border:1px solid #a1a1aa; border-radius:6px; color:var(--text); }
.site-header nav svg,.quiet-link svg,.app-note svg { width:16px; height:16px; }
.preview-body { padding:22px 24px 0; }
.preview-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px; font-weight:600; }
.demo-label { font-size:11px; color:var(--muted); font-weight:400; }
.preview-tabs { display:flex; gap:24px; margin-top:12px; border-bottom:1px solid var(--line); }
.preview-tabs button { background:none; border:0; border-bottom:2px solid transparent; padding:12px 0; min-height:44px; color:var(--muted); cursor:pointer; font-size:12px; font-weight:600; }
.preview-tabs button[aria-selected=true] { color:var(--lime-light); border-bottom-color:var(--lime); }
.preview-tabs button:hover { color:var(--text); }
.preview-panel { min-height:217px; animation:panel-in .3s cubic-bezier(.16,1,.3,1); }
@keyframes panel-in { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0); } }
.workout-row,.student-row,.rank-row { display:flex; gap:13px; align-items:center; min-height:72px; border-bottom:1px solid #2c2c30; }
.workout-row:last-child,.student-row:last-child,.rank-row:last-child { border-bottom:0; }
.day { font-size:11px; font-weight:700; color:#d4d4d8; padding:10px 0; width:39px; background:var(--raised); text-align:center; border-radius:7px; flex-shrink:0; }
.workout-row div,.student-row div { flex:1; min-width:0; }
.workout-row strong,.student-row strong { display:block; font-size:11px; font-weight:600; }
.workout-row div span,.student-row div span { display:block; margin-top:3px; font-size:11px; color:var(--muted); }
.workout-row svg { width:16px; height:16px; color:var(--muted); }
.avatar { width:34px; height:34px; display:grid; place-items:center; background:var(--raised); border-radius:50%; font-size:11px; }
.status,.neutral-status { font-size:11px; color:var(--lime-light); }
.neutral-status { color:var(--muted); }
.rank-position { width:25px; font-size:20px; font-family:Rajdhani,sans-serif; color:var(--muted); }
.rank-row strong { flex:1; font-size:12px; }
.rank-row>span:last-child { font-weight:600; color:var(--lime-light); font-variant-numeric:tabular-nums; }
.rank-row small { color:var(--muted); font-size:11px; }
.preview-foot { border-top:1px solid var(--line); padding:14px 0; font-size:11px; }
.product-section { padding-top:28px; padding-bottom:95px; }
.section-intro { display:grid; grid-template-columns:1.15fr 1fr; gap:70px; align-items:end; }
.section-intro p { font-size:15px; max-width:450px; }
.feature-list { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:46px; }
.feature-list article { border-top:1px solid var(--line); padding-top:22px; }
.feature-list p { margin-top:14px; font-size:14px; }
.feature-list article>span { display:block; margin-top:24px; font-size:11px; font-weight:600; color:#d4d4d8; }
.steps-section { padding-block:80px; background:#121214; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:36px; padding:0; margin:45px 0 38px; list-style:none; }
.step-number { display:block; width:32px; height:32px; text-align:center; line-height:32px; font-size:13px; border:1px solid #52525b; border-radius:50%; color:var(--text); margin-bottom:20px; }
.steps h3 { font-size:16px; }
.steps p { margin-top:12px; font-size:13px; }
.steps .quiet-link { font-size:12px; margin-top:8px; }
.app-note { border-top:1px solid var(--line); display:flex; align-items:center; gap:44px; justify-content:space-between; padding-top:26px; }
.app-note p { font-size:12px; max-width:530px; }
.app-note strong { color:var(--text); }
.app-note>div { display:flex; gap:20px; flex-shrink:0; }
.app-note a { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; min-height:44px; }
.money-section { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; padding-top:100px; padding-bottom:100px; }
.money-copy p { margin-top:24px; max-width:450px; font-size:15px; }
.money-copy p+p { font-size:13px; }
.money-copy strong { color:var(--text); font-weight:600; }
.money-copy .quiet-link { margin-top:18px; }
.calculator { padding:30px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.calculator h3 { font-size:17px; }
.calculator-description { font-size:12px; margin-top:5px; }
.calculator-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:25px; }
.calculator label { font-size:11px; font-weight:600; }
.calculator input { display:block; width:100%; min-width:0; margin-top:9px; padding:12px; min-height:48px; border:1px solid #52525b; border-radius:8px; background:var(--arena); color:var(--text); font-size:18px; font-variant-numeric:tabular-nums; caret-color:var(--lime-light); }
.calculator input[aria-invalid=true] { border-color:#f87171; }
.input-error { color:#fca5a5; font-size:12px; margin-top:14px; }
.calculation-results { margin-top:22px; }
.calculation-results>div { display:flex; justify-content:space-between; align-items:center; gap:18px; font-size:12px; padding-block:10px; }
.calculation-results>div>span { color:var(--muted); }
output { font-variant-numeric:tabular-nums; white-space:nowrap; }
.calculation-results .result-total { border-top:1px solid var(--line); margin-top:10px; padding-top:20px; }
.result-total>span { color:var(--text)!important; font-weight:600; }
.result-total small { font-size:11px; color:var(--muted); font-weight:400; }
.result-total output { font-family:Rajdhani,sans-serif; font-size:36px; font-weight:700; color:var(--lime-light); line-height:1.2; }
.calculation-note { font-size:11px; line-height:1.7; margin-top:22px; }
.faq-section { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; padding-bottom:100px; }
.faq-section h2 { font-size:44px; }
details { border-top:1px solid var(--line); }
details:last-child { border-bottom:1px solid var(--line); }
summary { cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:22px; font-size:14px; font-weight:600; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary svg { width:18px; height:18px; }
details[open] summary svg { transform:rotate(45deg); }
details p { padding:0 35px 24px 0; font-size:13px; }
.closing { display:flex; align-items:center; justify-content:space-between; gap:40px; padding-top:55px; padding-bottom:55px; border-top:1px solid var(--line); }
.closing h2 { font-size:52px; }
.closing p { margin-top:18px; font-size:13px; }
.closing-action { display:flex; flex-direction:column; gap:12px; }
.closing-action>a:last-child { min-height:44px; display:flex; justify-content:center; align-items:center; font-size:11px; color:var(--muted); }
.closing-action>a:last-child:hover { color:var(--lime-light); }
.site-footer { display:flex; align-items:center; gap:24px; padding-top:25px; padding-bottom:30px; font-size:11px; color:var(--muted); border-top:1px solid #27272a; }
.site-footer nav { display:flex; gap:24px; margin-left:auto; }
.site-footer nav a { display:flex; align-items:center; min-height:44px; }
@media(min-width:1440px) { .hero { padding-top:80px; padding-bottom:120px; } }
@media(max-width:1000px) { .wrap { padding-inline:28px; } .hero { gap:28px; } h1 { font-size:58px; } .hero-description { font-size:15px; } .section-intro { gap:35px; } .money-section { gap:45px; } .steps { gap:22px; } .app-note { gap:20px; flex-wrap:wrap; } .faq-section { gap:40px; } }
@media(max-width:760px) {
  .wrap { padding-inline:22px; } .site-header { min-height:84px; gap:16px; } .site-header .brand img { width:145px; } .site-header nav { gap:0; font-size:11px; } .site-header nav>a:not(.portal-link) { display:none; } .portal-link { padding-inline:12px; gap:8px; }
  .hero { grid-template-columns:1fr; gap:40px; padding-top:36px; padding-bottom:65px; } h1 { font-size:clamp(48px,9.8vw,66px); } .hero-description { font-size:15px; max-width:480px; margin-top:22px; } .hero .button { margin-top:26px; } .hero .quiet-link { margin-top:8px; }
  .squad-preview { width:100%; max-width:500px; } .preview-cover { height:185px; } .preview-body { padding:20px 20px 0; } .preview-heading { gap:8px; } .cover-caption { padding:22px; }
  .section-intro { grid-template-columns:1fr; gap:20px; } h2 { font-size:42px; } .section-intro p { font-size:14px; } .product-section { padding-top:0; padding-bottom:65px; } .feature-list { grid-template-columns:1fr; gap:28px; margin-top:32px; } .feature-list p { margin-top:8px; } .feature-list article>span { margin-top:12px; } .feature-list article { padding-top:20px; }
  .steps-section { padding-block:58px; } .steps { grid-template-columns:1fr 1fr; gap:32px 24px; margin-top:34px; } .step-number { margin-bottom:14px; } .app-note { gap:10px; } .app-note>div { flex-wrap:wrap; gap:6px 20px; }
  .money-section { grid-template-columns:1fr; gap:30px; padding-block:65px; } .calculator { padding:24px; } .money-copy p { margin-top:18px; } .result-total output { font-size:34px; }
  .faq-section { grid-template-columns:1fr; gap:26px; padding-bottom:60px; } .faq-section h2 { font-size:40px; } summary { font-size:13px; }
  .closing { flex-direction:column; align-items:flex-start; gap:26px; padding-block:40px; } .closing h2 { font-size:44px; } .closing-action { width:100%; max-width:330px; } .site-footer { flex-wrap:wrap; gap:14px 20px; padding-block:24px; } .site-footer .brand img { width:125px; } .site-footer nav { width:100%; margin-left:0; gap:22px; }
}
@media(max-width:360px) { .wrap { padding-inline:16px; } h1 { font-size:44px; } .site-header .brand img { width:130px; } .portal-link { font-size:11px; padding-inline:8px; } .demo-label { font-size:11px; } .preview-heading { font-size:11px; } .calculator { padding:18px; } .calculator-fields { gap:10px; } .result-total output { font-size:30px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .preview-panel { animation:none; } }
