/* ==========================================================================
   EngPulse — Вариант B. Яркий молодёжный лендинг (энергия школ-продавцов курсов)
   Бренд сохранён: navy #1B2A49 / coral #FF5B4A — но подан крупно и сочно.
   Mobile-first, BEM-ish, CSS custom properties. Файл 1/2 (база + верх страницы).
   ========================================================================== */

:root {
  --navy:        #1B2A49;
  --navy-800:    #131F36;
  --navy-700:    #243757;
  --navy-600:    #33486B;
  --coral:       #FF5B4A;
  --coral-600:   #F0473A;
  --coral-700:   #DA382B;
  --coral-soft:  #FFE7E2;
  --coral-tint:  #FFF1EE;
  --cream:       #F7F3EC;
  --cream-2:     #FCF9F3;
  --paper:       #FFFFFF;
  --ink:         #1B2A49;
  --ink-70:      #45556C;
  --ink-50:      #6B7A8D;
  --line:        rgba(27, 42, 73, .12);
  --line-soft:   rgba(27, 42, 73, .07);

  --shadow-sm: 0 2px 10px rgba(27, 42, 73, .06);
  --shadow:    0 18px 44px rgba(27, 42, 73, .10);
  --shadow-lg: 0 36px 90px rgba(27, 42, 73, .20);
  --shadow-coral: 0 16px 34px rgba(255, 91, 74, .34);
  --shadow-hard: 6px 6px 0 var(--navy);
  --shadow-hard-coral: 6px 6px 0 var(--coral);

  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px;

  --container: 1180px;
  --header-h: 76px;

  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px; line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--coral); color: #fff; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* --- Типографика -------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }
h1 { font-size: clamp(40px, 6.6vw, 82px); }
h2 { font-size: clamp(30px, 4.4vw, 56px); }
h3 { font-size: clamp(21px, 2.2vw, 27px); letter-spacing: -0.02em; line-height: 1.12; }
p  { margin: 0; text-wrap: pretty; }

.display { font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; }

.eyebrow {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--coral-600);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--coral); border-radius: 3px; }
.eyebrow--light { color: #fff; }
.eyebrow--light::before { background: var(--coral); }
.eyebrow--center { justify-content: center; }

.lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-70); line-height: 1.58; }

/* highlighter — коралловый маркер за словами (молодёжная фишка) */
.mark {
  position: relative; white-space: nowrap; z-index: 0;
}
.mark::before {
  content: ""; position: absolute; z-index: -1;
  left: -.08em; right: -.08em; bottom: .04em; height: .42em;
  background: var(--coral); border-radius: 4px;
  transform: rotate(-1.2deg);
}
.mark--soft::before { background: var(--coral-soft); height: .46em; }
.ink-coral { color: var(--coral); }

/* squiggle underline (простой штрих, не сложный SVG) */
.squiggle { display: inline-block; }
.squiggle svg { width: 100%; height: 14px; color: var(--coral); }

/* --- Контейнеры / секции ------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.section { padding: clamp(56px, 8vw, 108px) 0; position: relative; }
.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }
.section--navy  { background: var(--navy); color: #fff; }
.section--coral { background: var(--coral); color: #fff; }
.section--tint  { background: var(--coral-tint); }

.section__head { max-width: 760px; margin: 0 0 clamp(34px, 5vw, 56px); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__title { margin: 16px 0 0; }
.section__sub { margin: 18px 0 0; }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* --- Кнопки ------------------------------------------------------------- */
.btn {
  --h: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 28px;
  border: 2px solid transparent; border-radius: var(--r-pill);
  font-weight: 800; font-size: 16px; letter-spacing: -0.01em;
  transition: transform .16s var(--spring), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap; text-align: center;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--coral); color: #fff; box-shadow: var(--shadow-coral); }
.btn--primary:hover { background: var(--coral-600); transform: translateY(-3px); box-shadow: 0 22px 40px rgba(255,91,74,.40); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-700); transform: translateY(-3px); box-shadow: var(--shadow); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; transform: translateY(-3px); }
.btn--white { background: #fff; color: var(--navy); }
.btn--white:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.btn--ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.34); }
.btn--ghost-light:hover { background: rgba(255,255,255,.22); transform: translateY(-3px); }
.btn--block { width: 100%; }
.btn--lg { --h: 62px; font-size: 17.5px; padding: 0 34px; }

/* sticker / tag */
.sticker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: #fff; color: var(--navy); border: 2px solid var(--navy);
  box-shadow: 3px 3px 0 var(--navy);
}
.sticker--coral { background: var(--coral); color: #fff; border-color: var(--navy); }
.sticker--navy  { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 3px 3px 0 var(--coral); }
.sticker__emoji { font-size: 14px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: #fff; border: 1.5px solid var(--line);
  font-weight: 600; font-size: 14.5px; color: var(--navy);
}
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }

/* --- Marquee (бегущая строка) ------------------------------------------ */
.marquee {
  background: var(--navy); color: #fff; overflow: hidden;
  border-top: 3px solid var(--coral); border-bottom: 3px solid var(--coral);
  padding: 13px 0;
}
.marquee--coral { background: var(--coral); border-color: var(--navy); }
.marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: .04em;
  text-transform: uppercase; padding: 0 26px; display: inline-flex; align-items: center; gap: 26px;
}
.marquee__item::after { content: "✶"; color: var(--coral); font-size: 16px; }
.marquee--coral .marquee__item::after { color: var(--navy); }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Бегущая строка — брендовый элемент, по требованию анимируется ВСЕГДА, в т.ч.
   при системном «уменьшить движение» (reduced-motion guard снят намеренно). */

/* --- Header ------------------------------------------------------------- */
.topbar {
  background: var(--navy); color: #fff; font-size: 13.5px; font-weight: 600;
  text-align: center; padding: 8px 22px; letter-spacing: .01em;
}
.topbar b { color: var(--coral); }
.topbar #tbDays { font-family: var(--mono); }

.header {
  position: sticky; top: 0; z-index: 120;
  background: rgba(247, 243, 236, .82); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.header--scrolled { background: rgba(252, 249, 243, .92); box-shadow: var(--shadow-sm); border-color: var(--line-soft); }
.header--hidden { transform: translateY(-100%); }
.header__inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.header__logo { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.header__logo img { width: 34px; height: 34px; }
.nav { display: none; gap: 4px; margin-left: 8px; }
.nav__link { padding: 9px 14px; border-radius: var(--r-pill); font-weight: 600; font-size: 15.5px; color: var(--ink-70); transition: background .16s var(--ease), color .16s var(--ease); }
.nav__link:hover { background: #fff; color: var(--navy); }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header__cta { display: none; }

.cart-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; transition: transform .16s var(--spring), box-shadow .18s var(--ease); }
.cart-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cart-btn img { width: 21px; height: 21px; }
.cart-btn__count { position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: var(--r-pill); background: var(--coral); color: #fff; font-size: 12px; font-weight: 800; display: none; align-items: center; justify-content: center; border: 2px solid var(--cream); }
.cart-btn__count.is-visible { display: inline-flex; }
.burger { width: 46px; height: 46px; border-radius: 50%; background: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
.burger img { width: 22px; height: 22px; filter: invert(1); }

@media (min-width: 980px) {
  .nav { display: inline-flex; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
}

/* --- Mobile menu -------------------------------------------------------- */
.mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--navy); color: #fff; padding: 22px; transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; }
.mobile-menu.is-open { transform: none; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.mobile-menu__close { font-size: 34px; color: #fff; line-height: 1; width: 46px; height: 46px; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu__link { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.mobile-menu__cta { margin-top: auto; display: grid; gap: 12px; padding-top: 22px; }

/* --- HERO --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--cream); padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 6vw, 86px); }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .5; pointer-events: none; }
.hero__blob--1 { width: 460px; height: 460px; right: -160px; top: -120px; background: radial-gradient(circle, var(--coral-soft), transparent 68%); opacity: .9; }
.hero__blob--2 { width: 360px; height: 360px; left: -150px; bottom: -120px; background: radial-gradient(circle, #E7EEF7, transparent 68%); }
.hero .container { position: relative; z-index: 1; }

.hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 5vw, 56px); align-items: center; }
.hero__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.hero__title { margin: 0 0 20px; }
.hero__sub { max-width: 540px; margin-bottom: 28px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero__note { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink-50); font-weight: 600; }
.hero__note .dot { width: 9px; height: 9px; border-radius: 50%; background: #28b463; box-shadow: 0 0 0 4px rgba(40,180,99,.16); }

/* hero stat strip */
.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; padding-top: 30px; border-top: 2px dashed var(--line); }
.hstat__num { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.03em; color: var(--navy); line-height: 1; }
.hstat__num span { color: var(--coral); }
.hstat__label { margin-top: 7px; font-size: 13.5px; color: var(--ink-50); font-weight: 600; line-height: 1.3; }

/* hero media card */
.hero__media { position: relative; }
.hero-card { position: relative; background: #fff; border: 2px solid var(--navy); border-radius: var(--r-xl); box-shadow: var(--shadow-hard); padding: 22px; }
.hero-card__bar { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; }
.hero-card__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.hero-card__dot:nth-child(1) { background: var(--coral); }
.hero-card__tag { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-50); letter-spacing: .04em; }
.hero-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hero-card__title { font-size: 19px; font-weight: 800; }
.hero-card__badge { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--coral-600); background: var(--coral-tint); padding: 5px 10px; border-radius: var(--r-pill); }

.score-ring { display: flex; align-items: center; gap: 18px; padding: 16px; background: var(--cream-2); border-radius: var(--r-lg); margin-bottom: 16px; }
.ring { --val: 78; width: 92px; height: 92px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--coral) calc(var(--val) * 1%), var(--coral-soft) 0); position: relative; }
.ring::before { content: ""; position: absolute; inset: 9px; background: #fff; border-radius: 50%; }
.ring__val { position: relative; font-weight: 800; font-size: 23px; letter-spacing: -0.03em; }
.ring__val small { font-size: 13px; color: var(--ink-50); }
.score-meta__k { font-family: var(--mono); font-size: 12px; color: var(--ink-50); letter-spacing: .04em; }
.score-meta__v { font-size: 17px; font-weight: 800; margin-top: 3px; }
.score-meta__hint { font-size: 13.5px; color: var(--ink-50); margin-top: 4px; }

.weak { display: grid; gap: 11px; }
.weak__title { font-family: var(--mono); font-size: 12px; color: var(--ink-50); letter-spacing: .04em; margin-bottom: 2px; }
.bar { display: grid; grid-template-columns: 92px 1fr 42px; align-items: center; gap: 11px; }
.bar__name { font-size: 14px; font-weight: 600; }
.bar__track { height: 9px; border-radius: var(--r-pill); background: var(--coral-soft); overflow: hidden; }
.bar__fill { height: 100%; width: 0; background: var(--coral); border-radius: var(--r-pill); transition: width 1s var(--ease); }
.bar__fill--ok { background: #28b463; }
.bar__pct { font-size: 13px; font-weight: 700; color: var(--ink-50); text-align: right; }

/* floating sticker on hero card */
.hero-card__float { position: absolute; z-index: 3; }
.hero-card__float--1 { top: -18px; right: -14px; transform: rotate(7deg); }
.hero-card__float--2 { bottom: -16px; left: -16px; transform: rotate(-6deg); }

@media (min-width: 880px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
}
@media (max-width: 520px) {
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .hero__stats .hstat:last-child { grid-column: span 2; }
}

/* --- Social-proof band -------------------------------------------------- */
.proof { background: var(--navy); color: #fff; }
.proof__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
.pstat { text-align: center; }
.pstat__num { font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #fff; }
.pstat__num span { color: var(--coral); }
.pstat__label { margin-top: 10px; font-size: 14.5px; color: rgba(255,255,255,.66); font-weight: 600; }
.proof__note { margin-top: 30px; text-align: center; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: rgba(255,255,255,.5); }
@media (min-width: 760px) { .proof__grid { grid-template-columns: repeat(4, 1fr); } }