/* === Local Rubik font faces === */
@font-face{
  font-family:"Rubik";
  src:url("/fonts/Rubik-Light.ttf") format("truetype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Rubik";
  src:url("/fonts/Rubik-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Rubik";
  src:url("/fonts/Rubik-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Rubik";
  src:url("/fonts/Rubik-Bold.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Rubik";
  src:url("/fonts/Rubik-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Rubik";
  src:url("/fonts/Rubik-Bold.ttf") format("truetype");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

/* Reset & theme */

/* Global smooth scroll & font inheritance */
html{ scroll-padding-top: var(--header-h); scroll-behavior:smooth; }
body, button, input, select, textarea{ font-family:"Rubik", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

* { box-sizing: border-box; }
html, body { height: 100%;  padding-top:40px;}
body { margin: 0; font-family: 'Rubik', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background:#fff; }
:root{ --header-h: 50px; --brand:#e53935; --accent:#6f6bd5; --accent-2:#8a84f2; --text:#1b1b1b; --muted:#6c6c6c; --white:#fff; --cta:#5a62ea; --shadow: 0 10px 30px rgba(0,0,0,.08); --radius-hero: 40px; --ok:#2e7d32; --err:#c62828; }
.container{ width:min(1200px,92vw); margin-inline:auto; }
/* Header */
.site-header{ position:fixed; top:0; left:0; right:0; top:0; z-index: 1100; background:#fff; border-bottom:1px solid rgba(0,0,0,.05); }
.header-inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; padding:14px 0; }
.logo{ font-weight:800; font-size:36px; color:var(--brand); text-decoration:none; letter-spacing:.5px; line-height:1; display:flex; align-items:center;  line-height:0.9; display:inline-block;}
.logo img{height:36px; width:auto; display:block;}
@media(max-width:840px){.logo img{height:32px;}}
/* Nav */
.nav{ display:flex; font-family:'Rubik', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; align-items:center; gap:28px; }
.nav-link{ text-decoration:none; color:#222; font-weight:600; position:relative; font-size:20px}
.header-cta{ display:flex; align-items:center; gap:17px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:10px 18px; font-weight:700; text-decoration:none; }
.btn-primary{ background:#eef0ff; color:#2e3ae4; }
.phone{ text-decoration:none; color:#ff7a45; font-weight:700; white-space:nowrap; }
.vk{ text-decoration:none; font-weight:700; color:#26a7e0; }
/* Burger */
.burger{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid rgba(0,0,0,.1); background:#fff; align-items:center; justify-content:center; }
.burger svg{ width:22px; height:22px; }
.burger line{ stroke:#222; stroke-linecap:round; stroke-width:2.5; }
.nav-close{ display:none; }
.nav-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); border:0; padding:0; margin:0; }
@media (max-width: 840px){
  .burger{ display:inline-flex; }
  .header-cta .btn{ display:none; }
  .site-header .nav{ position: fixed; inset: 0 0 0 auto; width: min(82vw, 320px); background: #fff; border-left: 1px solid rgba(0,0,0,.06); flex-direction: column; align-items: flex-start; padding: 24px; gap: 18px; translate: 100% 0; transition: translate .28s ease; z-index: 31; }
  .site-header .nav.open{ translate: 0 0; font-size:30px}
  .nav-close{ display:inline-block; align-self:flex-end; font-size:30px; background:transparent; border:0; padding:6px; margin:-6px -6px 6px; cursor:pointer; }
  .nav-backdrop.show{ display:block; z-index:30; }
  body.no-scroll{ overflow:hidden; }
}
/* Hero */
.hero{ padding:12px 0 28px; }
.hero-card{ position: relative; background: linear-gradient(140deg, var(--accent) 0%, var(--accent-2) 100%); border-radius: var(--radius-hero); box-shadow: var(--shadow); overflow: hidden; padding: min(5vw, 40px); display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; }
.hero-left{ color:#fff; display:flex; flex-direction:column; gap:22px; padding-block:min(2vw,8px); }
.hero-title{ font-size:clamp(32px,3.4vw,56px); line-height:1.05; margin:0; font-weight:800; }
.price-row{ display:flex; align-items:flex-end; gap:16px; }
.price{ font-size:clamp(48px,7.8vw,116px); font-weight:800; line-height:.9; letter-spacing:.5px; }
.price-badge{ transform:rotate(18deg); background:#ff7a45; color:#fff; font-weight:800; padding:10px 16px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.15); white-space:nowrap; }
.cta-pill{ display:inline-flex; align-items:center; gap:14px; width:fit-content; background:rgba(255,255,255,.18); padding:14px 18px 14px 20px; border-radius:999px; color:#fff; text-decoration:none; font-weight:700; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.35); }
.pill-dot{ width:48px; height:48px; border-radius:50%; background:#fff; display:inline-block; }
.hero-right{ position:relative; min-height:380px; display:grid; }
.hero-right img{ width:100%; height:100%; object-fit:cover; border-radius:20px; filter:saturate(1.05); }
@media (max-width: 860px){
  .hero-card{ grid-template-columns:1fr; padding:24px; border-radius:28px; }
  .hero-left{ order:1; }
  .hero-right{ order:2; min-height:320px; }
}
/* Plans */
.plans{ padding:24px 0 24px; }
.plans-head h2{ font-size:clamp(28px,4vw,44px); color:#ff7a45; margin:0 0 14px; font-weight:800; }
.plan-card{ background:#fff; border-radius:20px; box-shadow: var(--shadow); padding:18px; }
.plan-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:14px; }
.plan-top h3{ margin:0; font-size:22px; color:#2b2b2b; }
.plan-ico{ width:84px; height:64px; border-radius:12px; display:grid; place-items:center; }
.plan-ico svg{ width:100%; height:100%; display:block; }
.plan-list{ list-style:none; margin:6px 0 16px; padding:0; }
.plan-list li{ position:relative; padding-left:28px; margin:12px 0; color:#4a4a4a; line-height:1.35; }
.plan-list li::before{ content:''; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%; background: radial-gradient(circle at 50% 50%, #ffb88a 40%, #ff7a45 40%); box-shadow:0 2px 6px rgba(0,0,0,.15); }
.plan-btn{ display:block; width:100%; background:#5b46c6; color:#fff; text-align:center; text-decoration:none; font-weight:800; font-size:17px; padding:18px 16px; border-radius:999px; box-shadow:0 8px 20px rgba(91,70,198,.25); }
.plans-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.plans-dots{ display:none; }
@media (max-width: 959px){
  .plans-list{ display:flex; gap:12px; overflow-x:auto; padding:4px 2px 8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .plans-list > .plan-card{ scroll-snap-align:center; min-width:86vw; }
  .plans-list::-webkit-scrollbar{ height:0; }
  .plans-dots{ display:flex; justify-content:center; gap:8px; margin-top:10px; }
  .plans-dots button{ width:8px; height:8px; border-radius:50%; border:0; background:#d9d9e9; padding:0; }
  .plans-dots button.active{ background:#5b46c6; transform:scale(1.2); }
}
/* Trial */
.trial{ padding:24px 0 24px; }
.trial-card{ background: var(--accent-2); border-radius: var(--radius-hero); padding: clamp(20px,3vw,36px); display:grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items:center; color:#fff; }
.trial-left h2{ margin:0; font-size:clamp(28px,4vw,40px); font-weight:800; color:#f9f9ff; }
.trial-left p{ margin:4px 0 14px; font-size:18px; color:#f0f0f9; }
.trial-form{ display:flex; flex-direction:column; gap:12px; }
.trial-inputs{ display:flex; gap:12px; flex-wrap:wrap; }
.trial-inputs input{ flex:1; min-width:160px; padding:12px 14px; border-radius:999px; border:0; font-size:16px; }
.trial-inputs input.error{ outline:3px solid rgba(198,40,40,.7); }
.trial-btn{ border:0; cursor:pointer; background:#5b46c6; color:#fff; border-radius:999px; padding:12px 18px; font-weight:700; font-size:16px; margin-top:2px; }
.trial-check{ display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.3; }
.trial-check input{ margin-top:2px; accent-color:#ff7a45; }
.trial-check a{ color:#fff; text-decoration:underline; }
.trial-right img{ width:100%; border-radius:20px; object-fit:cover; }
@media (max-width:860px){
  .trial-card{ grid-template-columns:1fr; text-align:center; }
  .trial-left{ order:1; }
  .trial-right{ order:2; }
  .trial-inputs{ flex-direction:column; }
  .trial-check{ text-align:left; }
}
/* Gym */
.gym{ padding:24px 0 24px; }
.gym-head h2{ margin:0 0 6px; font-size:clamp(28px,4vw,40px); color:#ff7a45; font-weight:800; }
.gym-sub{ margin:0 0 10px; color:#222; font-weight:700; line-height:1.25; }
.gym-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 12px; }
.gym-tab{ padding:10px 16px; border-radius:999px; border:1px solid rgba(0,0,0,.15); background:#fff; cursor:pointer; font-weight:700; }
.gym-tab.active{ background:#1d1d1f; color:#fff; }
.gym-slider{ position:relative; background:#b9a9e9; border-radius:28px; padding: 16px; overflow:hidden; box-shadow:var(--shadow); }
.gym-viewport{ contain: layout paint size; overflow:hidden; border-radius:18px; position:relative; z-index:1; display:block; width:100%; }
.gym-track{ will-change: transform; display:flex; transition:transform .35s ease; }
.gym-slide{ flex: 0 0 100%; min-width:100%; height:clamp(200px,45vw,340px); display:grid; }
.gym-slide img{ pointer-events:none; width:100%; height:100%; object-fit:cover; border-radius:18px; }
.gym-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid rgba(0,0,0,.08); background:#fff; box-shadow:var(--shadow); font-size:26px; font-weight:800; cursor:pointer; line-height:0; display:grid; place-items:center; color:#333; z-index:2; }
.gym-prev{ left:10px; } .gym-next{ right:10px; }
@media (max-width:860px){ .gym-arrow{ display:none; } }
.gym-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:14px 0 6px; }
.gym-thumb{ background:#eee; border-radius:12px; overflow:hidden; height:150px; border:0; padding:0; cursor:pointer; }
.gym-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:860px){ .gym-thumbs{ grid-template-columns:1fr 1fr; gap:12px; } .gym-thumb{ height:120px; } }
/* Modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:50; }
.modal.show{ display:flex; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.modal__content{ position:relative; z-index:1; width:min(520px,92vw); background:#fff; border-radius:20px; box-shadow:var(--shadow); padding:22px 20px;  text-align:center;}

.modal__close{ position:absolute; top:10px; right:10px; background:transparent; border:0; font-size:20px; cursor:pointer; }
.modal__title{ margin:2px 0 10px; font-size:22px; font-weight:800; color:#202020; }
.modal__text{ margin:0 0 16px; color:#333; }
.modal__btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:999px; background:#5b46c6; color:#fff; text-decoration:none; font-weight:800; }
.modal.success .modal__title{ color: var(--ok); }
.modal.error .modal__title{ color: var(--err); }

/* Center modal actions */
.modal__btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:999px; background:#5b46c6; color:#fff; text-decoration:none; font-weight:800; margin: 0 auto; }

@media (max-width: 840px){
  .header-cta{ gap:12px; }
}
/* Gym 16:9 aspect ratio */
.gym-viewport{ aspect-ratio: 16 / 9; }
.gym-slide{ min-width:100%; height:auto; }
.gym-slide img{ width:100%; height:100%; object-fit:cover; }


/* Desktop: slim down gym slider */
@media (min-width: 961px){
  .gym .container{ max-width: 1100px; }
  .gym-slider{ max-width: 960px; margin-left:auto; margin-right:auto; padding: 16px; }
  .gym-viewport{ aspect-ratio: 16 / 9; max-height: 520px; }
}

/* Mobile: header-cta pinned to right edge */
@media (max-width: 840px){
  .header-cta{ margin-left:auto; justify-self:end; justify-content:flex-end; width:auto; }
}


/* Mobile: stick header-cta to right edge tightly */
@media (max-width: 840px){
  .header-inner{ grid-template-columns: 1fr auto; }
  .header-cta{ margin-left:auto; justify-self:end; justify-content:flex-end; }
  .burger{ margin-left: 0px; }
}

/* Ensure nav overlay above content */
.site-header .nav{ z-index: 1001; }
.nav-backdrop.show{ z-index: 1000; }

/* Gym desktop compact */
@media (min-width: 961px){
  .gym-slider{ max-width: 920px; margin: 0 auto; padding: 16px; }
  .gym-viewport{ aspect-ratio: 16 / 9; max-height: 480px; }
}

.nav-link{ font-family:'Rubik', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }


/* === Reveal on scroll === */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in{ transition:none; transform:none; opacity:1; }
}

/* Micro-interactions */
.btn, .plan-btn, .cta-pill{ transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.btn:hover, .plan-btn:hover, .cta-pill:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }

.nav-link{ position:relative; }
.nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px; background: black; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; opacity:.8; }
.nav-link:hover::after{ transform: scaleX(1); }

.logo{ transition: transform .2s ease; }

/* Hero badge subtle float */
.price-badge{ animation: floaty 4s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform: rotate(18deg) translateY(0); } 50%{ transform: rotate(18deg) translateY(-3px); } }

/* Gym typography larger */
.gym-head h2{ font-size:clamp(34px,5vw,56px); }
.gym-sub{ font-size:clamp(18px,2.2vw,22px); }
.gym-tab{ font-size:clamp(15px,1.8vw,18px); }

/* Crisper inputs */
.trial-inputs input{ transition: box-shadow .2s ease; }
.trial-inputs input:focus{ outline:none; box-shadow:0 0 0 3px rgba(91,70,198,.25); }

/* Modal center button already done; ensure modal animations */
.modal.show .modal__content{ animation: pop .2s ease; }
@keyframes pop { from{ transform: translateY(6px) scale(.98); opacity:.7; } to{ transform:none; opacity:1; } }