@import url('../assets/fonts/inter.css');
@import url('../assets/fonts/unbounded.css');

/* ============================================================
   Тренинг «Управление проектами на конструкторе» — лендинг
   Тёмная тема. Акцент бренда — лайм #B4F23C. Без курсивов.
   ============================================================ */

:root{
  color-scheme: dark;

  --bg:      #07090C;
  --bg-2:    #0C1016;
  --card:    rgba(255,255,255,.035);
  --card-2:  rgba(255,255,255,.06);
  --line:    rgba(255,255,255,.08);
  --line-2:  rgba(255,255,255,.16);

  --ink:     #F1F4F7;
  --ink-2:   #A4AEBB;
  --ink-3:   #6A7584;

  --accent:  #B4F23C;
  --accent-2:#D6FF7A;
  --blue:    #6E9BFF;
  --warn:    #FF6B4A;

  --display: 'Unbounded', 'Inter', system-ui, sans-serif;
  --text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --r:   16px;
  --r-lg:24px;
  --r-xl:32px;

  --maxw: 1240px;
  --pad:  24px;
  --sec:  128px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; background:var(--bg); }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--text); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
i,em,cite,dfn,address,var{ font-style:normal; }
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
::selection{ background:var(--accent); color:#0B0E12; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

main, .hdr, .ftr{ position:relative; z-index:2; }
[hidden]{ display:none !important; }

/* ---------- фон: частицы + зерно ---------- */
#fx{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}
}
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:80; }
.progress i{ display:block; height:100%; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--accent),var(--blue)); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec); position:relative; }
.section--tight{ padding-block:40px; }

/* ---------- typography ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
}
.eyebrow::before{ content:''; width:24px; height:2px; background:var(--accent); border-radius:2px; box-shadow:0 0 12px var(--accent); }

h2, .h2{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,4vw,56px); line-height:1.04; letter-spacing:-.02em;
}
.h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(22px,2.6vw,34px); line-height:1.1; letter-spacing:-.01em; }
h3{ font-weight:750; letter-spacing:-.02em; line-height:1.2; }

.outline{
  color:transparent;
  -webkit-text-stroke:1.4px var(--sk,rgba(241,244,247,.85));
  background:linear-gradient(90deg,var(--accent) 0 var(--fill,0%),transparent var(--fill,0%));
  -webkit-background-clip:text; background-clip:text;
  transition:--fill .2s;
}

.s-head{ max-width:820px; margin-bottom:64px; }
.s-head h2{ margin-top:20px; }
.s-head .lead{ margin-top:24px; }
.lead{ font-size:clamp(16px,1.4vw,18.5px); color:var(--ink-2); line-height:1.65; max-width:680px; }
.s-head--center{ margin-inline:auto; text-align:center; }
.s-head--center .eyebrow{ justify-content:center; }
.s-head--center .lead{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:16px 26px; border-radius:999px; border:1.5px solid transparent;
  font-size:15px; font-weight:650; line-height:1; white-space:nowrap; letter-spacing:-.01em;
  transition:transform .2s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .25s;
  will-change:transform;
}
.btn--accent{ background:var(--accent); color:#0B0E12; box-shadow:0 0 0 0 rgba(180,242,60,0); }
.btn--accent:hover{ background:var(--accent-2); box-shadow:0 12px 40px rgba(180,242,60,.38), 0 0 0 6px rgba(180,242,60,.12); }
.btn--ghost{ color:var(--ink); border-color:var(--line-2); background:rgba(255,255,255,.02); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.btn--ghost:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06); }
.btn--sm{ padding:11px 18px; font-size:14px; }
.btn--lg{ padding:19px 30px; font-size:16px; }
.btn--xl{ padding:24px 38px; font-size:18px; }
.btn .play{ width:28px; height:28px; margin:-6px 0 -6px -8px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--bg); }
.btn .play svg{ margin-left:2px; }

/* ---------- glass ---------- */
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid var(--line-2);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-radius:var(--r-lg);
}

/* ---------- header ---------- */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:60; transition:background .3s, border-color .3s; border-bottom:1px solid transparent; }
.hdr.is-stuck{ background:rgba(7,9,12,.72); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border-bottom-color:var(--line); }
.hdr__in{ display:flex; align-items:center; gap:28px; height:76px; }
.logo{ display:flex; align-items:center; gap:11px; flex:none; }
.logo__mark{ width:36px; height:36px; border-radius:10px; background:var(--accent); color:#0B0E12; display:grid; place-items:center; font-weight:800; font-size:15px; letter-spacing:-.04em; }
.logo__txt{ display:flex; flex-direction:column; line-height:1.15; }
.logo__name{ font-size:14.5px; font-weight:750; letter-spacing:-.02em; }
.logo__sub{ font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.nav{ display:flex; gap:2px; margin-left:auto; }
.nav a{ padding:9px 13px; border-radius:9px; font-size:14.5px; font-weight:550; color:var(--ink-2); transition:color .15s, background .15s; }
.nav a:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2); margin-left:auto; position:relative; }
.burger span,.burger span::before,.burger span::after{ position:absolute; left:50%; width:18px; height:2px; margin-left:-9px; background:var(--ink); border-radius:2px; transition:transform .25s, top .25s, opacity .2s; content:''; }
.burger span{ top:50%; margin-top:-1px; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
.mnav{ display:none; }

/* ---------- tag ---------- */
.tag{
  display:inline-flex; align-items:center; gap:10px; padding:8px 15px 8px 12px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04);
  font-size:13px; font-weight:600; color:var(--ink-2); letter-spacing:.01em;
}
.tag i{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(180,242,60,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(180,242,60,.6)} 70%{box-shadow:0 0 0 10px rgba(180,242,60,0)} 100%{box-shadow:0 0 0 0 rgba(180,242,60,0)} }

/* ==================== HERO ==================== */
.hero{ min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:120px 0 80px; position:relative; }
.hero__in{ display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:center; }
.hero__body{ position:relative; z-index:2; min-width:0; }
.hero__vis{ min-width:0; }
.hero__title{
  margin:28px 0 28px; font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,64px); line-height:1.02; letter-spacing:-.03em;
}
.split .w{ display:inline-block; white-space:nowrap; }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .outline{ -webkit-text-stroke:1.6px var(--accent); background:none; color:transparent; }
.hero__title .outline .ch{ color:transparent; }
.is-ready .hero__title .outline .ch{ animation:chFill .45s ease forwards; animation-delay:calc(var(--d) * 45ms + 300ms); }
@keyframes chFill{ to{ color:var(--accent); text-shadow:0 0 30px rgba(180,242,60,.3); } }
.split{ display:inline-block; }
.split .ch{ display:inline-block; transform:translateY(110%) rotate(6deg); opacity:0; transition:transform .9s var(--ease), opacity .9s var(--ease); transition-delay:calc(var(--d) * 28ms + 150ms); }
.is-ready .split .ch{ transform:none; opacity:1; }
.hero__lead{ font-size:clamp(16px,1.45vw,19px); color:var(--ink-2); max-width:560px; line-height:1.62; }
.hero__lead b{ color:var(--ink); font-weight:650; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.hero__price{ margin-top:16px; font-size:14px; color:var(--ink-3); }
.hero__price b{ color:var(--ink); }
.hero__price a{ color:var(--accent); border-bottom:1px solid rgba(180,242,60,.4); }
.hero__facts{ display:flex; gap:40px; margin-top:52px; padding-top:28px; border-top:1px solid var(--line); max-width:560px; }
.hero__facts li{ display:flex; align-items:center; gap:12px; }
.hero__facts b{ font-family:var(--display); font-weight:800; font-size:40px; line-height:1; color:var(--accent); }
.hero__facts span{ font-size:13px; line-height:1.35; color:var(--ink-2); }

.hero__vis{ position:relative; height:min(78vh,760px); display:flex; justify-content:center; align-items:flex-end; }
.hero__glow{ position:absolute; left:50%; bottom:6%; width:120%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(180,242,60,.28), rgba(110,155,255,.12) 55%, transparent 75%); filter:blur(10px); animation:breathe 6s ease-in-out infinite; }
@keyframes breathe{ 50%{ transform:translateX(-50%) scale(1.08); opacity:.85; } }
.hero__ph{ position:relative; z-index:1; height:100%; width:auto; max-width:none; object-fit:contain; object-position:bottom;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 99%); mask-image:linear-gradient(180deg,#000 72%,transparent 99%);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.hero__card{ position:absolute; z-index:2; padding:14px 18px; display:flex; flex-direction:column; gap:2px; animation:float 7s ease-in-out infinite; }
.hero__card .k{ font-size:11px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.hero__card .v{ font-family:var(--display); font-weight:700; font-size:22px; color:var(--ink); }
.hero__card .v.sm{ font-size:15px; font-family:var(--text); font-weight:700; }
.hero__card--a{ left:-4%; top:20%; }
.hero__card--b{ right:-6%; top:42%; animation-delay:-2.5s; }
.hero__card--b .v{ color:var(--accent); }
.hero__card--c{ left:2%; bottom:14%; animation-delay:-4.5s; padding-left:34px; border-color:rgba(255,107,74,.4); }
.hero__card--c .dot{ position:absolute; left:15px; top:19px; width:9px; height:9px; border-radius:50%; background:var(--warn); box-shadow:0 0 12px var(--warn); animation:blink 1.4s infinite; }
@keyframes float{ 50%{ transform:translateY(-12px); } }
@keyframes blink{ 50%{ opacity:.3; } }

.scrollhint{ position:absolute; left:50%; bottom:28px; width:26px; height:42px; margin-left:-13px; border:1.5px solid var(--line-2); border-radius:14px; z-index:3; }
.scrollhint span{ position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--accent); animation:wheel 1.8s infinite; }
@keyframes wheel{ 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 100%{opacity:0;transform:translateY(14px)} }

/* ==================== TICKER ==================== */
.ticker{ position:relative; overflow:hidden; padding:22px 0; border-block:1px solid var(--line); background:rgba(7,9,12,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transform:rotate(-1.2deg) scale(1.02); }
.ticker__track{ display:flex; align-items:center; gap:28px; width:max-content; animation:marquee 46s linear infinite; }
.ticker span{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(18px,2.2vw,28px); white-space:nowrap; letter-spacing:-.01em; }
.ticker span:nth-of-type(even){ color:var(--accent); }
.ticker i{ color:var(--accent); font-size:16px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ==================== PAINS ==================== */
.pains{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pain{ position:relative; padding:30px 26px 32px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); overflow:hidden; transition:border-color .3s, background .3s; }
.pain::after{ content:''; position:absolute; inset:auto -40% -60% auto; width:200px; height:200px; border-radius:50%; background:radial-gradient(closest-side,rgba(255,107,74,.22),transparent); opacity:0; transition:opacity .4s; }
.pain:hover{ border-color:rgba(255,107,74,.35); }
.pain:hover::after{ opacity:1; }
.pain__n{ font-family:var(--display); font-weight:800; font-size:44px; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,107,74,.75); }
.pain h3{ font-size:19px; margin:26px 0 12px; }
.pain p{ font-size:14.5px; color:var(--ink-2); line-height:1.6; }

/* ==================== QUIZ ==================== */
.quiz{ padding:44px; display:grid; grid-template-columns:.9fr 1.1fr; gap:28px 48px; }
.quiz__head h2{ margin:16px 0 14px; }
.quiz__head p{ color:var(--ink-2); font-size:15px; }
.quiz__list{ display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start; counter-reset:q; grid-row:span 2; }
.quiz__list li{ counter-increment:q; }
.quiz__list button{
  display:inline-flex; align-items:center; gap:10px; padding:11px 16px 11px 12px; border-radius:12px; text-align:left;
  border:1px solid var(--line-2); background:rgba(255,255,255,.03); font-size:14.5px; font-weight:550; color:var(--ink);
  transition:background .2s, border-color .2s, transform .2s, color .2s;
}
.quiz__list button::before{ content:counter(q); width:24px; height:24px; flex:none; border-radius:7px; display:grid; place-items:center; font-size:12px; font-weight:700; background:rgba(255,255,255,.07); color:var(--ink-2); transition:inherit; }
.quiz__list button:hover{ border-color:rgba(255,255,255,.35); transform:translateY(-2px); }
.quiz__list li.is-sel button{ border-color:var(--accent); background:rgba(180,242,60,.1); }
.quiz__list li.is-sel button::before{ content:'✓'; background:var(--accent); color:#0B0E12; }
.quiz__list li.ok button{ border-color:rgba(180,242,60,.7); background:rgba(180,242,60,.12); }
.quiz__list li.bad button{ border-color:rgba(255,107,74,.8); background:rgba(255,107,74,.14); animation:shake .4s; }
.quiz__list li.ok button::before{ content:'✓'; background:var(--accent); color:#0B0E12; }
.quiz__list li.bad button::before{ content:'✕'; background:var(--warn); color:#0B0E12; }
@keyframes shake{ 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.quiz__foot{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; align-self:end; }
.quiz__res{ font-weight:650; font-size:15px; }
.quiz__res b{ color:var(--accent); font-family:var(--display); font-size:22px; }
.quiz__hint{ grid-column:1/-1; padding:18px 20px; border-radius:var(--r); background:rgba(180,242,60,.07); border:1px solid rgba(180,242,60,.25); font-size:15px; color:var(--ink-2); }
.quiz__hint b{ color:var(--ink); }

/* ==================== TRACKS ==================== */
.tracks{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.track{ padding:36px 30px; border-radius:var(--r-xl); background:var(--card); border:1px solid var(--line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:border-color .3s; }
.track:hover{ border-color:var(--line-2); }
.track--hl{ background:linear-gradient(160deg,rgba(180,242,60,.16),rgba(180,242,60,.02) 60%); border-color:rgba(180,242,60,.35); }
.track__ic{ width:58px; height:58px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.06); color:var(--accent); margin-bottom:28px; }
.track__ic svg{ width:30px; height:30px; }
.track--hl .track__ic{ background:var(--accent); color:#0B0E12; box-shadow:0 10px 30px rgba(180,242,60,.35); }
.track__k{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.track--hl .track__k{ color:var(--accent); }
.track h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:22px; letter-spacing:-.01em; margin:10px 0 14px; }
.track p{ color:var(--ink-2); font-size:15px; }

/* ==================== CYCLE (sticky) ==================== */
.cycle{ position:relative; padding-top:var(--sec); }
.cycle .s-head{ margin-bottom:0; }
.cycle__in{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.cycle__side{ position:relative; order:2; }
.cycle__sticky{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:34px; }
.cycle__nav{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.cycle__nav li{ display:flex; align-items:center; gap:8px; padding:7px 13px 7px 7px; border-radius:999px; border:1px solid var(--line); background:rgba(7,9,12,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:13px; font-weight:600; color:var(--ink-3); transition:color .3s, border-color .3s, background .3s; }
.cycle__nav li span{ font-family:var(--display); font-size:10px; font-weight:700; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-2); transition:inherit; }
.cycle__nav li.is-on{ color:var(--ink); border-color:rgba(180,242,60,.5); background:rgba(180,242,60,.08); }
.cycle__nav li.is-on span{ background:var(--accent); color:#0B0E12; border-color:var(--accent); box-shadow:0 0 18px rgba(180,242,60,.5); }
.cycle__nav li.is-done span{ border-color:rgba(180,242,60,.5); color:var(--accent); }
.cycle__bar{ margin:16px auto 0; height:2px; width:100%; max-width:420px; background:var(--line); border-radius:2px; overflow:hidden; }
.cycle__bar i{ display:block; height:100%; width:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(.2); transition:transform .5s var(--ease); }

.cycle__steps{ display:flex; flex-direction:column; order:1; padding-bottom:10vh; }
.step{ min-height:88vh; display:flex; flex-direction:column; justify-content:center; padding:40px 0; opacity:.25; transition:opacity .5s; }
.step.is-on{ opacity:1; }
.step__n{ font-family:var(--display); font-weight:800; font-size:clamp(72px,10vw,140px); line-height:.9; color:transparent; -webkit-text-stroke:1.4px rgba(180,242,60,.8); }
.step h3{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(28px,3.2vw,44px); margin:18px 0 18px; letter-spacing:-.02em; }
.step__lead{ font-size:17px; color:var(--ink-2); line-height:1.65; }
.step__game{ margin-top:22px; padding:18px 20px; border-radius:var(--r); border:1px solid rgba(180,242,60,.25); background:rgba(180,242,60,.06); font-size:15px; color:var(--ink-2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.step__game b{ color:var(--accent); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.chips li{ padding:7px 13px; border-radius:999px; border:1px solid var(--line-2); font-size:13px; font-weight:600; color:var(--ink); background:rgba(7,9,12,.5); }
.chips li::before{ content:''; display:inline-block; width:10px; height:12px; margin-right:7px; vertical-align:-1px; border:1.5px solid var(--accent); border-radius:2px; }

/* ==================== GAME ==================== */
.game__grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:24px; align-items:start; }
.player__screen{ position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line-2); aspect-ratio:16/9; background:#000; box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(180,242,60,.08); }
.player__screen video{ width:100%; height:100%; object-fit:cover; transition:opacity .4s, transform 1.2s var(--ease); }
.player__screen.is-switching video{ opacity:0; transform:scale(1.04); }
.player__screen::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 25%,transparent 70%,rgba(0,0,0,.5)); }
.player__hud{ position:absolute; left:18px; right:18px; top:16px; display:flex; justify-content:space-between; z-index:2; font-size:13px; font-weight:650; }
.rec{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.rec i{ width:8px; height:8px; border-radius:50%; background:var(--warn); animation:blink 1.2s infinite; }
.clock{ padding:7px 12px; border-radius:999px; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-variant-numeric:tabular-nums; color:var(--accent); }
.player__btn{ position:absolute; left:50%; top:50%; width:84px; height:84px; margin:-42px 0 0 -42px; z-index:3; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#0B0E12; box-shadow:0 0 0 12px rgba(180,242,60,.18), 0 20px 50px rgba(0,0,0,.5); transition:transform .3s var(--ease), opacity .3s; }
.player__btn svg{ margin-left:5px; }
.player__btn:hover{ transform:scale(1.08); }
.player__screen.is-playing .player__btn{ opacity:0; transform:scale(.7); pointer-events:none; }
.variants{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.variants button{ text-align:left; padding:14px 16px; border-radius:var(--r); border:1px solid var(--line); background:var(--card); transition:border-color .2s, background .2s; position:relative; overflow:hidden; }
.variants button b{ display:block; font-size:14px; }
.variants button span{ font-size:12.5px; color:var(--ink-3); }
.variants button:hover{ border-color:var(--line-2); }
.variants button.is-on{ border-color:var(--accent); background:rgba(180,242,60,.08); }
.variants button.is-on::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:var(--p,0%); background:var(--accent); }

.legend{ display:flex; flex-direction:column; gap:14px; }
.legend__card{ padding:28px; }
.legend__k{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.legend__q{ font-size:18px; font-weight:600; line-height:1.5; margin:14px 0 22px; }
.legend__dl{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:0; border-radius:14px; overflow:hidden; background:var(--line); }
.legend__dl div{ background:rgba(10,13,18,.85); padding:13px 15px; }
.legend__dl dt{ font-size:12px; color:var(--ink-3); }
.legend__dl dd{ margin:3px 0 0; font-weight:700; font-size:15px; }
.legend__twist{ padding:20px 22px; display:flex; gap:16px; border-color:rgba(255,107,74,.4); background:linear-gradient(160deg,rgba(255,107,74,.14),rgba(255,107,74,.03)); }
.alert{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-family:var(--display); font-weight:800; background:var(--warn); color:#0B0E12; animation:blink 2s infinite; }
.legend__twist b{ display:block; margin-bottom:4px; }
.legend__twist p{ font-size:14.5px; color:var(--ink-2); }
.legend__market{ padding:20px 22px; display:flex; gap:16px; }
.mk{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:18px; background:var(--accent); color:#0B0E12; }
.legend__market b{ display:block; margin-bottom:4px; }
.legend__market p{ font-size:14.5px; color:var(--ink-2); }
.legend__alt{ padding:16px 20px; border-radius:var(--r); border:1px dashed var(--line-2); font-size:14px; color:var(--ink-2); display:flex; flex-direction:column; }
.legend__alt b{ color:var(--ink); }

.time{ margin-top:100px; display:grid; grid-template-columns:.7fr 1.3fr; gap:40px; align-items:center; position:relative; padding:0 40px; border-radius:var(--r-xl); background:linear-gradient(120deg,rgba(180,242,60,.10),rgba(110,155,255,.06) 60%,rgba(255,255,255,.02)); border:1px solid var(--line); overflow:hidden; }
.time__ph{ align-self:end; height:440px; display:flex; justify-content:center; }
.time__ph img{ height:115%; width:auto; max-width:none; margin-top:20px; -webkit-mask-image:linear-gradient(180deg,#000 75%,transparent); mask-image:linear-gradient(180deg,#000 75%,transparent); }
.time__body{ padding:48px 0; position:relative; }
.time__big{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(30px,4.2vw,58px); line-height:1.05; margin:18px 0 18px; letter-spacing:-.02em; }
.time__big .n{ color:var(--accent); }
.time__big .eq{ color:var(--ink-3); }
.time__body p{ color:var(--ink-2); max-width:520px; }
.ring{ position:absolute; right:0; top:44px; width:120px; height:120px; }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring circle{ fill:none; stroke-width:6; }
.ring__bg{ stroke:rgba(255,255,255,.08); }
.ring__fg{ stroke:var(--accent); stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:326.7; filter:drop-shadow(0 0 6px rgba(180,242,60,.6)); }
.ring__txt{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.ring__txt b{ font-family:var(--display); font-size:30px; }
.ring__txt span{ font-size:11px; color:var(--ink-3); margin-top:4px; text-transform:uppercase; letter-spacing:.1em; }

/* ==================== PROGRAM ==================== */
.prog{ border-radius:var(--r-xl); border:1px solid var(--line); background:rgba(10,13,18,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); overflow:hidden; }
.prog__tabs{ display:flex; overflow-x:auto; border-bottom:1px solid var(--line); scrollbar-width:none; }
.prog__tabs::-webkit-scrollbar{ display:none; }
.prog__tabs button{ flex:1 0 auto; padding:20px 22px; font-weight:650; font-size:15px; color:var(--ink-3); position:relative; transition:color .2s; white-space:nowrap; display:flex; align-items:center; gap:10px; }
.prog__tabs button span{ font-family:var(--display); font-size:12px; }
.prog__tabs button::after{ content:''; position:absolute; left:16px; right:16px; bottom:-1px; height:2px; background:var(--accent); transform:scaleX(0); transition:transform .35s var(--ease); box-shadow:0 0 12px var(--accent); }
.prog__tabs button:hover{ color:var(--ink); }
.prog__tabs button.is-on{ color:var(--ink); }
.prog__tabs button.is-on span{ color:var(--accent); }
.prog__tabs button.is-on::after{ transform:none; }
.prog__panes{ position:relative; }
.pane{ display:none; grid-template-columns:1.5fr 1fr; gap:40px; padding:44px; }
.pane.is-on{ display:grid; animation:paneIn .55s var(--ease); }
@keyframes paneIn{ from{ opacity:0; transform:translateY(14px); } }
.pane h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(20px,2.2vw,28px); margin-bottom:24px; }
.ticks{ display:flex; flex-direction:column; gap:12px; }
.ticks li{ position:relative; padding-left:30px; color:var(--ink-2); font-size:15.5px; line-height:1.55; }
.ticks li::before{ content:''; position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:6px; background:rgba(180,242,60,.14); }
.ticks li::after{ content:''; position:absolute; left:6px; top:8px; width:6px; height:9px; border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(45deg); }
.pane__practice{ padding:26px; border-radius:var(--r-lg); background:linear-gradient(160deg,rgba(180,242,60,.14),rgba(180,242,60,.03)); border:1px solid rgba(180,242,60,.3); display:flex; flex-direction:column; gap:8px; align-self:start; }
.pane__practice span{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.pane__practice b{ font-family:var(--display); font-weight:700; font-size:16px; text-transform:uppercase; }
.pane__practice p{ margin-top:8px; font-size:14.5px; color:var(--ink-2); }

/* ==================== TOOLS ==================== */
.tools__tabs{ display:flex; justify-content:center; gap:8px; margin-bottom:22px; flex-wrap:wrap; }
.tools__tabs button{ padding:12px 20px; border-radius:999px; border:1px solid var(--line-2); font-size:14.5px; font-weight:650; color:var(--ink-2); transition:all .2s; background:rgba(7,9,12,.5); }
.tools__tabs button:hover{ color:var(--ink); border-color:rgba(255,255,255,.35); }
.tools__tabs button.is-on{ background:var(--accent); border-color:var(--accent); color:#0B0E12; }
.tool{ display:grid; grid-template-columns:1fr 1.2fr; gap:48px; padding:44px; align-items:center; }
.tool[hidden]{ display:none; }
.tool.is-on{ animation:paneIn .5s var(--ease); }
.tool__desc h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(20px,2.2vw,28px); margin-bottom:16px; }
.tool__desc p{ color:var(--ink-2); font-size:15.5px; }
.formula{ display:inline-block; margin-top:22px; padding:12px 16px; border-radius:12px; background:rgba(0,0,0,.35); border:1px solid var(--line-2); font-family:ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size:16px; color:var(--accent); }

.pert{ display:flex; flex-direction:column; gap:20px; }
.pert label{ display:flex; flex-direction:column; gap:10px; }
.pert label span{ display:flex; justify-content:space-between; font-size:14px; color:var(--ink-2); font-weight:550; }
.pert label b{ color:var(--ink); font-variant-numeric:tabular-nums; font-size:15px; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; background:linear-gradient(90deg,var(--accent) 0 var(--v,30%),rgba(255,255,255,.1) var(--v,30%)); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--ink); border:4px solid var(--accent); box-shadow:0 0 0 6px rgba(180,242,60,.15); cursor:grab; }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--ink); border:4px solid var(--accent); cursor:grab; }
.pert__out{ display:grid; grid-template-columns:1.2fr 1fr; gap:12px; margin-top:6px; }
.pert__out > div{ padding:18px 20px; border-radius:var(--r); background:rgba(0,0,0,.3); border:1px solid var(--line); display:flex; flex-direction:column; }
.pert__out span{ font-size:12.5px; color:var(--ink-3); }
.pert__out b{ font-family:var(--display); font-weight:800; font-size:44px; line-height:1.1; color:var(--accent); font-variant-numeric:tabular-nums; }
.pert__out em{ font-size:13px; color:var(--ink-2); }
.pert__gap b{ font-size:28px; color:var(--ink); margin-top:auto; }
.pert__bar{ position:relative; height:10px; border-radius:6px; background:rgba(255,255,255,.06); }
.pert__bar i{ position:absolute; top:-5px; width:4px; height:20px; border-radius:3px; transition:left .35s var(--ease); }
#barO{ background:var(--blue); } #barP{ background:var(--warn); } #barT{ background:var(--accent); width:6px; box-shadow:0 0 12px var(--accent); }

.tradeoff{ display:grid; grid-template-columns:auto repeat(3,1fr); gap:8px; }
.tradeoff__h{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); text-align:center; padding-bottom:4px; align-self:end; }
.tradeoff__r{ font-weight:650; display:flex; align-items:center; padding-right:10px; font-size:15px; }
.tradeoff button{ height:64px; border-radius:14px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); transition:all .2s; position:relative; }
.tradeoff button:hover{ border-color:rgba(255,255,255,.4); }
.tradeoff button.is-on{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 30px rgba(180,242,60,.35); }
.tradeoff button.is-on::after{ content:''; position:absolute; left:50%; top:50%; width:10px; height:18px; margin:-12px 0 0 -5px; border:solid #0B0E12; border-width:0 3px 3px 0; transform:rotate(45deg); }
.tradeoff button.is-off{ opacity:.35; }
.tradeoff__sent{ margin-top:22px; padding:16px 18px; border-radius:var(--r); background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--ink); font-weight:550; min-height:58px; }
.tradeoff__sent b{ color:var(--accent); }

.risk{ width:100%; max-width:440px; justify-self:center; display:grid; grid-template-columns:auto 1fr; grid-template-rows:1fr auto; gap:10px; }
.risk__y{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:12px; color:var(--ink-3); text-align:center; letter-spacing:.06em; text-transform:uppercase; }
.risk__x{ grid-column:2; font-size:12px; color:var(--ink-3); text-align:center; letter-spacing:.06em; text-transform:uppercase; }
.risk__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.risk__grid button{ aspect-ratio:1; border-radius:10px; font-family:var(--display); font-weight:800; font-size:clamp(14px,1.6vw,20px); transition:transform .2s var(--ease), box-shadow .2s, filter .2s; }
.risk__grid button:hover, .risk__grid button.is-on{ transform:scale(1.08); z-index:1; box-shadow:0 10px 30px rgba(0,0,0,.5); filter:brightness(1.15); }
.risk__grid .z-A{ background:rgba(255,255,255,.07); color:var(--ink-2); }
.risk__grid .z-R{ background:rgba(110,155,255,.35); color:#DDE7FF; }
.risk__grid .z-U{ background:rgba(255,186,74,.55); color:#1A1206; }
.risk__grid .z-I{ background:var(--warn); color:#1A0A05; }
.riskinfo{ margin-top:22px; padding:18px 20px; border-radius:var(--r); background:rgba(0,0,0,.3); border:1px solid var(--line); min-height:110px; }
.riskinfo b{ display:block; font-family:var(--display); font-size:18px; text-transform:uppercase; margin-bottom:6px; }
.riskinfo p{ font-size:14.5px; color:var(--ink-2); }

/* ==================== KIT ==================== */
.kit{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.kit__body h2{ margin:20px 0 22px; }
.kit__groups{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
.kit__k{ display:block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.kit__groups li{ padding:10px 0; border-bottom:1px solid var(--line); font-size:15px; font-weight:550; display:flex; gap:10px; align-items:center; }
.kit__groups li::before{ content:''; width:6px; height:6px; border-radius:2px; background:var(--accent); flex:none; }

.fan{ position:relative; height:520px; perspective:1400px; }
.doc{
  position:absolute; left:50%; top:50%; width:260px; height:360px; margin:-180px 0 0 -130px; border-radius:16px; padding:22px;
  background:linear-gradient(170deg,#F3F6F9,#DCE2E9); color:#0B0E12; box-shadow:0 30px 60px rgba(0,0,0,.55);
  transform:translateX(calc((var(--i) - 2) * 18px)) rotate(calc((var(--i) - 2) * 3deg)) translateY(calc(var(--i) * -4px));
  transition:transform 1s var(--ease); transition-delay:calc(var(--i) * 70ms);
  display:flex; flex-direction:column; gap:10px; overflow:hidden;
}
.fan.is-in .doc{ transform:translateX(calc((var(--i) - 2) * 100px)) translateY(calc(((var(--i) - 2) * (var(--i) - 2)) * 9px)) rotate(calc((var(--i) - 2) * 9deg)); }
.fan.is-in .doc:hover{ transform:translateX(calc((var(--i) - 2) * 100px)) translateY(-40px) rotate(calc((var(--i) - 2) * 4deg)) scale(1.04); z-index:9; transition-delay:0s; }
.doc__h{ font-family:var(--display); font-weight:800; font-size:13px; text-transform:uppercase; padding-bottom:10px; border-bottom:2px solid #0B0E12; margin-bottom:6px; }
.doc i{ display:block; height:8px; border-radius:4px; background:rgba(11,14,18,.14); }
.doc i.s{ width:60%; }
.doc .stamp{ margin-top:auto; align-self:flex-end; padding:6px 10px; border:2.5px solid #4E8A00; color:#4E8A00; border-radius:8px; font-weight:800; font-size:12px; text-transform:uppercase; transform:rotate(-8deg); letter-spacing:.05em; }
.doc .stamp--warn{ border-color:#D9472A; color:#D9472A; }
.doc .sum{ margin-top:auto; font-family:var(--display); font-weight:800; font-size:24px; }
.mini-grid{ flex:1; display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:1fr; gap:4px; }
.mini-gantt{ display:flex; flex-direction:column; gap:14px; margin-top:10px; }
.mini-gantt b{ display:block; height:16px; border-radius:4px; margin-left:var(--l); width:var(--w); background:#0B0E12; }
.mini-gantt b:nth-child(3){ background:#7FB50E; }
.doc:nth-child(2){ background:linear-gradient(170deg,#E9F1FF,#CBD8EF); }
.doc:nth-child(3){ background:linear-gradient(170deg,#F2FFDC,#D6EDA8); }

/* ==================== RESULTS ==================== */
.res{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; }
.res__item{ padding:38px 32px; background:rgba(8,11,15,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .3s; position:relative; }
.res__item:hover{ background:rgba(20,26,20,.9); }
.res__item::before{ content:''; display:block; width:36px; height:3px; border-radius:2px; background:var(--accent); margin-bottom:24px; transition:width .4s var(--ease); }
.res__item:hover::before{ width:72px; }
.res__item b{ display:block; font-size:19px; letter-spacing:-.02em; margin-bottom:10px; }
.res__item p{ color:var(--ink-2); font-size:15px; }

/* ==================== TRAINER ==================== */
.trainer__in{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
.trainer__vis{ position:relative; height:640px; display:flex; justify-content:center; align-items:flex-end; }
.trainer__vis img{ position:relative; z-index:1; height:100%; width:auto; max-width:none; -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent); mask-image:linear-gradient(180deg,#000 78%,transparent); }
.trainer__glow{ position:absolute; left:50%; top:40%; width:520px; height:520px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(closest-side,rgba(110,155,255,.3),rgba(180,242,60,.12) 60%,transparent); filter:blur(4px); }
.trainer__vis::before{ content:'PM'; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-family:var(--display); font-weight:900; font-size:300px; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.12); z-index:0; }
.trainer__badge{ position:absolute; z-index:2; right:2%; bottom:18%; padding:16px 20px; max-width:200px; animation:float 7s ease-in-out infinite; }
.trainer__badge b{ font-family:var(--display); font-size:34px; color:var(--accent); display:block; line-height:1; }
.trainer__badge span{ font-size:13px; color:var(--ink-2); }
.trainer__body h2{ margin:20px 0 24px; }
.trainer__body > p:not(.lead){ color:var(--ink-2); margin-top:18px; }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:36px 0 28px; }
.stats li{ padding:20px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); }
.stats b{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(22px,2.4vw,30px); color:var(--accent); white-space:nowrap; }
.stats span{ font-size:13px; color:var(--ink-2); line-height:1.4; display:block; margin-top:6px; }
.link{ display:inline-flex; align-items:center; gap:8px; font-weight:650; border-bottom:1px solid var(--line-2); padding-bottom:4px; transition:color .2s, border-color .2s; }
.link:hover{ color:var(--accent); border-color:var(--accent); }

/* ==================== FORMATS ==================== */
.prices{ display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:18px; align-items:center; }
.price{ position:relative; padding:36px 30px 30px; border-radius:var(--r-xl); background:rgba(10,13,18,.78); border:1px solid var(--line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:flex; flex-direction:column; }
.price__k{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.price h3{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:22px; margin:12px 0 8px; letter-spacing:-.01em; }
.price__d{ font-size:14px; color:var(--ink-2); min-height:42px; }
.price__v{ display:flex; align-items:baseline; gap:8px; margin:24px 0 4px; }
.price__v b{ font-family:var(--display); font-weight:800; font-size:clamp(30px,3vw,40px); line-height:1; letter-spacing:-.03em; white-space:nowrap; }
.price__v span{ font-size:22px; font-weight:700; color:var(--ink-2); }
.price__t{ font-size:13.5px; color:var(--accent); font-weight:600; margin-bottom:24px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.price .ticks{ margin-bottom:28px; }
.price .ticks li{ font-size:14.5px; }
.price .ticks b{ color:var(--ink); font-weight:650; }
.price .btn{ margin-top:auto; width:100%; }

/* хит продаж */
.price--hit{ padding:46px 34px 34px; border:0; background:linear-gradient(170deg,rgba(28,38,16,.96),rgba(10,13,18,.96) 55%); box-shadow:0 40px 100px rgba(180,242,60,.14); z-index:1; }
.price--hit::before{
  content:''; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.5px; z-index:-1;
  background:conic-gradient(from var(--ang,0deg), rgba(180,242,60,.15), var(--accent) 12%, rgba(180,242,60,.15) 30%, rgba(110,155,255,.6) 50%, rgba(180,242,60,.15) 70%, var(--accent) 88%, rgba(180,242,60,.15));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spinBorder 6s linear infinite;
}
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes spinBorder{ to{ --ang:360deg; } }
.price__glow{ position:absolute; left:50%; top:-120px; width:340px; height:240px; transform:translateX(-50%); background:radial-gradient(closest-side,rgba(180,242,60,.28),transparent); pointer-events:none; animation:breathe2 5s ease-in-out infinite; }
@keyframes breathe2{ 50%{ opacity:.55; } }
.price--hit .price__k{ color:var(--accent); }
.price--hit h3{ font-size:26px; }
.price--hit .price__v b{ font-size:clamp(40px,4vw,56px); color:var(--accent); text-shadow:0 0 40px rgba(180,242,60,.35); }
.price--hit .ticks li::before{ background:var(--accent); }
.price--hit .ticks li::after{ border-color:#0B0E12; }
.price__badge{ position:absolute; top:-16px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:var(--accent); color:#0B0E12; font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; box-shadow:0 8px 30px rgba(180,242,60,.45); }
.price__badge i{ width:7px; height:7px; border-radius:50%; background:#0B0E12; animation:blink 1.4s infinite; }
.price__note{ margin:-8px 0 24px; padding:14px 16px; border-radius:var(--r); background:rgba(180,242,60,.08); border:1px dashed rgba(180,242,60,.35); font-size:13.5px; color:var(--ink-2); }

/* VIP */
.price--vip{ background:linear-gradient(170deg,rgba(110,155,255,.10),rgba(10,13,18,.82) 50%); border-color:rgba(110,155,255,.3); }
.price--vip .price__k{ color:var(--blue); }
.price--vip .ticks li::before{ background:rgba(110,155,255,.18); }
.price--vip .ticks li::after{ border-color:var(--blue); }

.calc{ margin-top:28px; padding:36px 40px; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
.calc h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(20px,2vw,26px); margin:14px 0 12px; }
.calc__l > p{ color:var(--ink-2); font-size:14.5px; }
.calc__in{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.calc__in span{ font-size:14px; color:var(--ink-2); font-weight:550; }
.calc__in b{ font-family:var(--display); font-size:22px; color:var(--ink); margin-left:4px; }
.calc__teams{ display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; min-height:22px; }
.calc__teams .t{ display:flex; gap:3px; padding:4px; border-radius:7px; background:rgba(255,255,255,.05); animation:popIn .35s var(--ease); }
.calc__teams .t i{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
.calc__teams .t.g2 i{ background:var(--blue); } .calc__teams .t.g3 i{ background:#FFC266; } .calc__teams .t.g4 i{ background:var(--warn); }
@keyframes popIn{ from{ transform:scale(.6); opacity:0; } }
.calc__meta{ margin-top:12px; font-size:13.5px; color:var(--accent); font-weight:600; }
.calc__row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:18px 20px; border-radius:var(--r); background:rgba(0,0,0,.3); border:1px solid var(--line); margin-bottom:10px; }
.calc__row span{ font-size:14.5px; color:var(--ink-2); }
.calc__row i{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:var(--accent); color:#0B0E12; font-size:11px; font-weight:800; text-transform:uppercase; vertical-align:2px; }
.calc__row b{ font-family:var(--display); font-weight:800; font-size:clamp(20px,2vw,28px); white-space:nowrap; font-variant-numeric:tabular-nums; }
.calc__row--hit{ border-color:rgba(180,242,60,.45); background:rgba(180,242,60,.07); }
.calc__row--hit b{ color:var(--accent); }
.calc__note{ margin-top:6px; font-size:13px; color:var(--ink-3); }

.bring{ margin-top:24px; padding:28px 30px; border-radius:var(--r-xl); border:1px dashed var(--line-2); display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center; background:rgba(7,9,12,.5); }
.bring__h b{ display:block; font-size:18px; }
.bring__h span{ font-size:14px; color:var(--ink-2); }
.bring ul{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.bring li{ display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:12px; background:var(--card-2); font-size:14px; font-weight:600; }
.bring li svg{ width:18px; height:18px; color:var(--accent); flex:none; }

/* ==================== FAQ ==================== */
.faq{ display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start; }
.faq .s-head{ position:sticky; top:120px; margin:0; }
.faq__list{ display:flex; flex-direction:column; gap:10px; }
.faq details{ border-radius:var(--r-lg); border:1px solid var(--line); background:rgba(10,13,18,.75); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:border-color .3s, background .3s; }
.faq details[open]{ border-color:rgba(180,242,60,.35); background:rgba(14,19,14,.85); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 64px 22px 24px; font-weight:650; font-size:16.5px; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:''; position:absolute; right:22px; top:50%; width:28px; height:28px; margin-top:-14px; border-radius:50%; border:1px solid var(--line-2);
  background:linear-gradient(var(--ink),var(--ink)) center/10px 1.5px no-repeat, linear-gradient(var(--ink),var(--ink)) center/1.5px 10px no-repeat; transition:transform .3s var(--ease), background-color .3s; }
.faq details[open] summary::after{ transform:rotate(45deg); background-color:var(--accent); border-color:var(--accent);
  background-image:linear-gradient(#0B0E12,#0B0E12), linear-gradient(#0B0E12,#0B0E12); }
.faq details p{ padding:0 24px 22px; color:var(--ink-2); font-size:15.5px; }

/* ==================== FINAL ==================== */
.final{ min-height:92vh; display:flex; align-items:center; text-align:center; padding:var(--sec) 0; position:relative; }
.final::before{ content:''; position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 55%,rgba(7,9,12,.15),rgba(7,9,12,.75)); pointer-events:none; }
.final__in{ position:relative; display:flex; flex-direction:column; align-items:center; }
.final__title{ font-size:clamp(40px,7.6vw,112px); margin:28px 0 26px; line-height:.98; }
.final__in > p{ color:var(--ink-2); font-size:18px; max-width:560px; margin-bottom:40px; }
.final__alt{ display:flex; gap:28px; margin-top:28px; color:var(--ink-2); font-weight:550; flex-wrap:wrap; justify-content:center; }
.final__alt a:hover{ color:var(--accent); }

/* ---------- footer ---------- */
.ftr{ border-top:1px solid var(--line); padding:32px 0; background:rgba(7,9,12,.85); }
.ftr__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:14px; color:var(--ink-3); }
.ftr__in > a:last-child:hover{ color:var(--accent); }

/* ---------- reveal ---------- */
.js .rv{ opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--rd,0s); }
.js .rv.is-in{ opacity:1; transform:none; }
.tilt{ transform-style:preserve-3d; }
.js .tilt.rv.is-in{ transition:opacity .9s var(--ease), transform .25s ease-out; }

/* ==================== RESPONSIVE ==================== */
@media (max-width:1100px){
  .nav{ display:none; }
  .burger{ display:block; }
  .hdr__cta{ display:none; }
  .mnav{ display:flex; flex-direction:column; gap:4px; position:fixed; inset:76px 0 auto 0; padding:16px var(--pad) 24px; background:rgba(7,9,12,.96); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); transform:translateY(-12px); opacity:0; visibility:hidden; transition:all .25s var(--ease); }
  .mnav.is-open{ transform:none; opacity:1; visibility:visible; }
  .mnav a:not(.btn){ padding:13px 4px; font-size:17px; font-weight:600; border-bottom:1px solid var(--line); }
  .mnav .btn{ margin-top:14px; }
  .pains{ grid-template-columns:1fr 1fr; }
  .game__grid{ grid-template-columns:1fr; }
  .kit{ grid-template-columns:1fr; }
  .fan{ height:440px; }
  .bring{ grid-template-columns:1fr; }
  .bring ul{ justify-content:flex-start; }
}
@media (max-width:900px){
  :root{ --sec:88px; }
  .hero{ padding-top:110px; }
  .hero__in{ grid-template-columns:1fr; }
  .hero__vis{ height:500px; margin-top:24px; }
  .hero__card--a{ left:0; } .hero__card--b{ right:0; } .hero__card--c{ left:0; bottom:10%; }
  .quiz{ grid-template-columns:1fr; padding:28px; }
  .quiz__list{ grid-row:auto; }
  .tracks{ grid-template-columns:1fr; }
  .cycle__in{ grid-template-columns:1fr; gap:0; }
  .cycle__side{ display:none; }
  .step{ min-height:auto; opacity:1; padding:48px 0 0; }
  .time{ grid-template-columns:1fr; padding:0 24px; }
  .time__ph{ height:340px; order:2; }
  .time__body{ padding:36px 0 0; }
  .ring{ position:relative; top:0; margin-top:24px; }
  .pane{ grid-template-columns:1fr; padding:28px; }
  .tool{ grid-template-columns:1fr; padding:28px; gap:28px; }
  .res{ grid-template-columns:1fr 1fr; }
  .trainer__in{ grid-template-columns:1fr; gap:24px; }
  .trainer__vis{ height:480px; }
  .trainer__vis::before{ font-size:200px; }
  .calc{ grid-template-columns:1fr; padding:26px; gap:24px; }
  .prices{ grid-template-columns:1fr; gap:30px; max-width:520px; margin-inline:auto; }
  .price--hit{ order:-1; }
  .faq{ grid-template-columns:1fr; gap:0; }
  .faq .s-head{ position:relative; top:0; margin-bottom:32px; }
}
@media (max-width:600px){
  :root{ --pad:16px; --sec:72px; }
  .hero__title{ font-size:clamp(24px,8vw,46px); }
  .hero__card .v{ font-size:18px; }
  .hero__facts{ gap:18px; }
  .hero__facts b{ font-size:30px; }
  .hero__facts span{ font-size:12px; }
  .hero__cta .btn{ width:100%; }
  .pains{ grid-template-columns:1fr; }
  .variants span{ display:none; }
  .legend__dl{ grid-template-columns:1fr; }
  .res{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .kit__groups{ grid-template-columns:1fr; }
  .fan{ height:380px; transform:scale(.72); margin:-40px 0; }
  .doc{ width:230px; }
  .btn--xl{ padding:20px 24px; font-size:16px; white-space:normal; }
  .tradeoff__r{ font-size:13px; padding-right:4px; }
  .tradeoff button{ height:52px; }
  .tradeoff__h{ font-size:10px; letter-spacing:0; }
  .faq summary{ font-size:15.5px; }
  .ftr__in{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .js .rv{ opacity:1; transform:none; }
  .split .ch{ transform:none; opacity:1; }
  .hero__title .outline .ch{ color:var(--accent); }
}

.ftr__legal a{ border-bottom:1px solid currentColor; }
.ftr__legal a:hover{ color:var(--accent); }