/* ============================================================
   RAW ENGLISH — new landing (Figma "Главная RAW english")
   Scoped under .raw2 to avoid clobbering global styles.
   Typography values taken 1:1 from the Figma design (all Inter).
   ============================================================ */
.raw2 *,
.raw2 *::before,
.raw2 *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* smooth scroll для якорных ссылок в навбаре (#system, #founder, #price, #contact) */
html:has(.raw2) { scroll-behavior: smooth; scroll-padding-top: 120px; }

.raw2 {
  --red: #CC3A3A;          /* brand red — buttons, accents */
  --red-hi: #CC3A3A;       /* brighter red — section backgrounds */
  --red-accent: #CC3A3A;   /* text accent red (Figma) */
  --red-hover: #A83030;
  --lime: #DFED8C;         /* brand lime (Figma #dfed8c) */
  --lime-deep: #cfe06a;
  --lime-dark: #aeb96c;    /* darker lime for "Level up" */
  --cream: #FAFAF8;
  --ink: #1E1E1E;          /* near-black text */
  --ink-2: #4a4a48;
  --white: #ffffff;
  --radius-card: 30px;
  --radius-pill: 999px;
  --shadow-card: 0 24px 60px rgba(0,0,0,.10);
  --maxw: 1240px;

  font-family: var(--font-sans), 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.4;
  letter-spacing: -0.02em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* пропорциональный масштаб на экранах >1441 (см. useEffect в LandingRaw2) */
  zoom: var(--raw2-zoom, 1);
}

.raw2 img { max-width: 100%; display: block; }
.raw2 a { text-decoration: none; color: inherit; }
.raw2 .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* display headings: Inter Bold 700 (Figma) */
.raw2 h1, .raw2 h2, .raw2 h3 {
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.02;
  text-transform: uppercase;
}
.raw2 .gluten { font-family: var(--font-gluten), 'Gluten', cursive; text-transform: none; }
.raw2 .c-red  { color: var(--red-accent); }
.raw2 .c-lime { color: var(--lime); }

/* ---------- buttons / pills ---------- */
.raw2 .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: none; cursor: pointer; font-family: inherit; font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.05em; border-radius: var(--radius-pill);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  white-space: nowrap; line-height: 0.9;
}
.raw2 .btn:hover { transform: translateY(-2px); }
.raw2 .btn-red  { background: var(--red);  color: #fff; padding: 18px 34px; font-size: clamp(1.25rem, 2.2vw, 32px); box-shadow: 0 10px 24px rgba(204,58,58,.28); }
.raw2 .btn-red:hover  { background: var(--red-hover); }
.raw2 .btn-lime { background: var(--lime); color: var(--ink); padding: 18px 30px; font-size: clamp(1.25rem, 2.2vw, 32px); }
.raw2 .btn-lime:hover { background: var(--lime-deep); }
.raw2 .btn-arrow { width: 67px; height: 68px; border-radius: 50%; background: var(--lime); color: var(--ink); flex-shrink: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.raw2 .btn-arrow svg { width: 32px; height: auto; }
/* pressed state — все кнопки чернеют, шрифт/иконка становятся белыми */
.raw2 .btn:active,
.raw2 .btn-red:active,
.raw2 .btn-lime:active,
.raw2 .btn-arrow:active,
.raw2-hero .cta-red:active {
  background: #1E1E1E !important;
  color: #fff !important;
  transform: translateY(0);
}
.raw2 .btn:active svg,
.raw2 .btn-arrow:active svg { color: #fff; fill: currentColor; }
/* состояние отправки (.busy): кнопка чёрная, текст лаймовый (как активный таб), подпись не меняется; opacity .7 от :disabled не применяем */
.raw2 .btn.busy, .raw2 .btn.busy:disabled, .raw2 .btn.busy:hover { background: #1E1E1E !important; color: var(--lime) !important; opacity: 1 !important; transform: none; cursor: progress; }

/* section-title badge — Figma: Inter 700, 40px, letter-spacing -5%, line-height 117% */
/* section-title badge — Figma (2522:785 / 885 / 832 / 840): h 83, обводка 4px, r 41.5, Inter 700 40px / -2px / 117%,
   ширина у каждого заголовка своя (фикс. прямоугольник в макете) — задаётся inline в разметке */
.raw2 .badge-title {
  box-sizing: border-box; display: inline-block; height: 83px; text-align: center; line-height: 75px; /* 83 − 2×4 border; inline-block, чтобы не терять пробелы вокруг <span> */
  font-weight: 700; text-transform: uppercase; letter-spacing: -2px;
  font-size: clamp(1.5rem, 3.2vw, 40px);
  padding: 0 40px; border-radius: 41.5px;
}
.raw2 .badge-title--lime   { background: var(--lime); color: var(--ink); }
.raw2 .badge-title--outline { background: transparent; border: 4px solid var(--ink); color: var(--ink); }
.raw2 .badge-title--outline-lime { background: transparent; border: 4px solid var(--lime); color: #fff; }

/* ============================================================
   NAV
   ============================================================ */
/* Figma 4003:167 (1441×171): лого 171×98 at (73,63); тексты пунктов top 100, x 300/444/635/791/953 (между текстами 56);
   «Личный кабинет» 183×48 r29.5 at (1153,87), текст x=1176 top 100 */
.raw2-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: flex-start; justify-content: flex-start;
  gap: 0; padding: 63px 105px 0 73px; height: 171px; box-sizing: border-box;
}
.raw2-nav::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 260px;
  background: linear-gradient(180deg, #EDE6DF 0%, rgba(212, 193, 176, 0.00) 100%);
  z-index: -1; pointer-events: none;
}
.raw2-nav .brand { display: flex; flex-direction: column; line-height: 1; }
/* Figma: 171×98 */
.raw2-nav .brand .logo-img { width: 171px; height: 98px; display: block; }
/* Figma: расстояние между текстами пунктов = 56px (замерил) → gap 16 + padding 20×2 */
/* box первого пункта = 300 − padding 20 = 280 → margin-left 280 − 244 (правый край лого) = 36; top 100 − 11 = 89 → margin-top 26 */
.raw2-nav .nav-links { display: flex; align-items: center; gap: 16px; list-style: none; margin: 28px 0 0 36px; }
/* ширины пунктов = ширина текста в Figma + 2×20 padding, чтобы x текстов совпали (300/444/635/791/953) независимо от метрик шрифта */
.raw2-nav .nav-links a { display: inline-block; box-sizing: border-box; text-align: left; }
.raw2-nav .nav-links li:nth-child(1) a { width: 127.87px; }
.raw2-nav .nav-links li:nth-child(2) a { width: 175.11px; }
.raw2-nav .nav-links li:nth-child(3) a { width: 140px; }
.raw2-nav .nav-links li:nth-child(4) a { width: 146.77px; }
.raw2-nav .nav-links li:nth-child(5) a { width: 216.68px; }
/* hover/active state (Figma «при нажатии»): lime pill + dark text */
.raw2-nav .nav-links a { color: var(--ink); font-size: 18px; font-weight: 500; letter-spacing: -0.9px; line-height: 0.975; padding: 11px 20px; border-radius: var(--radius-pill); transition: background .2s, color .2s; }
.raw2-nav .nav-links a:hover { background: var(--lime); color: var(--ink); }
.raw2-nav .nav-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; margin-top: 24px; }
.raw2-nav .pill {
  box-sizing: border-box; display: inline-flex; align-items: flex-start; width: 183px; height: 48px; padding: 15px 0 0 23px; text-align: left; border-radius: 29.5px;
  font-weight: 500; font-size: 18px; letter-spacing: -0.9px; line-height: 0.975;
  transition: transform .18s ease, background .18s ease;
}
.raw2-nav .pill { transition: transform .18s ease, background .2s ease, color .2s ease; }
.raw2-nav .pill:hover { transform: translateY(-2px); }
.raw2-nav .pill-lime { background: var(--lime); color: var(--ink); }
.raw2-nav .pill-lime:hover { background: var(--lime-deep); }
.raw2-nav .pill-red  { background: var(--red);  color: #fff; }
/* Figma «при нажатии»: Личный кабинет становится лаймовым */
.raw2-nav .pill-red:hover { background: var(--lime); color: var(--ink); }
.raw2-nav .burger { display: none; background: none; border: none; cursor: pointer; }

/* ============================================================
   HERO
   ============================================================ */
/* Figma frame: 1441×1121 → держим точный aspect на всех широких экранах,
   не даём растянуться по высоте при wide viewport (иначе фото режется по бокам) */
/* Figma 4003:172: карточка 677×753 at (107, 223) в hero 1441×1121 */
.raw2-hero {
  position: relative; aspect-ratio: 1441 / 1121; min-height: 600px; display: flex; align-items: flex-start;
  /* Figma 2522:734: фото 2017×1237 (ширина 139.97% от 1441) at (−274, −37) — срез 274 слева, 302 справа, 37 сверху */
  background-size: 139.97% auto; background-position: -274px -37px;
  padding: 223px 0 0;
}
.raw2-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%); z-index: 1; }
.raw2-hero .wrap { position: relative; z-index: 2; max-width: 1441px; padding: 0 107px; }
/* Figma: 677×753, border-radius 29.5 */
/* Figma 2522:745: rgba(30,30,30,.45), без обводки и блюра; текст от углов 87 / 74; низ 976 − 897 = 79 */
/* Glass как у карточек преподавателя (Figma Glass-эффект): blur+saturate, светлая рамка, диагональный блик */
.raw2-hero .glass {
  position: relative; overflow: hidden;
  box-sizing: border-box; width: 677px; max-width: 100%; min-height: 753px; padding: 74px 80px 79px 87px; border-radius: 29.5px;
  background: rgba(30,30,30,.45);
  backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.25);
}
.raw2-hero .glass::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.10) 100%);
  mix-blend-mode: overlay;
}
.raw2-hero .glass > * { position: relative; z-index: 1; }
/* Figma: 48px, 700, -2.4px, 96.96% */
/* Figma: 48px / 700 / -2.4px (-0.05em) / uppercase.
   Внутренняя leading 96.96%, но baseline-to-baseline между <p> ≈ 1.115
   (214px контейнер / 4 строки / 48px) — воспроизводим через line-height. */
.raw2-hero h1 { font-size: clamp(2rem, 4.2vw, 48px); color: #fff; font-weight: 700; letter-spacing: -0.05em; line-height: 1.12; text-transform: uppercase; }
.raw2-hero h1 .c-lime { color: var(--lime); }
/* subtitle Figma: 30px, 500, -1.5px, 97.5% */
/* Figma: h1 297…511, lede top 552 → 41; cta top 680, lede bottom 639.75 → 40.25 */
.raw2-hero .lede { margin: 41px 0 40.25px; color: #fff; font-size: clamp(1.2rem,2.2vw,30px); font-weight: 500; line-height: 0.975; letter-spacing: -1.5px; text-transform: none; }
/* CTA "узнай свой уровень" Figma: Inter 40px/700, line-height 106.282%, letter-spacing -2px, uppercase */
.raw2-hero .cta-red {
  position: relative; display: inline-flex; align-items: center; justify-content: flex-start; text-align: left;
  background: var(--red); color: #fff;
  /* Figma 2522:754: текст at (227, 701) в кнопке (194, 680) → padding 21 / 33; box 86 на 2 строки → line-height 1.075 */
  align-items: flex-start; font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem,2.9vw,40px); line-height: 1.075;
  letter-spacing: -2px; padding: 21px 38px 0 33px; border-radius: 34px;
  width: 486px; height: 129px; max-width: 100%; white-space: nowrap;
}
/* «бесплатно» Figma: 20px / 500 / -1px + плашка 135.56×35.856 / rotate(5.203deg) */
.raw2-hero .cta-red .free {
  /* Figma 2522:755: bbox 138.25×48 at (512.25, 666) → в координатах кнопки (194, 680): центр (387.4, 10) → left 319.6, top −7.93 */
  position: absolute; top: -7.93px; left: 319.6px; background: var(--lime); color: var(--ink);
  font-size: 20px; font-weight: 500; letter-spacing: -1px; line-height: 0.8782; text-transform: none;
  width: 135.56px; height: 35.856px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 20.5px; transform: rotate(5.2deg); transform-origin: center;
}
/* Figma: «пройти тест» 240×68 at (194, 829): 20px под CTA; круг 67×68 вплотную */
.raw2-hero .cta-row { display: flex; align-items: center; gap: 0; margin-top: 20px; }
/* "пройти тест" Figma: 32px, 700, -1.6px, lowercase */
.raw2-hero .cta-row .btn-lime { box-sizing: border-box; width: 240px; height: 68px; padding: 0; text-transform: none; font-weight: 700; font-size: clamp(1.3rem,2.3vw,32px); letter-spacing: -0.05em; line-height: 0.8053; }
/* стрелка — экспорт Figma 2522:760 (ic-arrow.svg 37×36.82), по центру круга */
.raw2-hero .cta-row .btn-arrow img { width: 37px; height: 36.82px; display: block; }

/* speech bubble — Figma 4003:168: прямоугольник 327.401×108.396 r29.5 rgba(30,30,30,.39), rotate −7.5°,
   bbox после поворота 338.75×150.22 at (997, 830.76) от верха hero (1441×1121) → центр (1166.4, 905.9),
   неповёрнутый top-left (1002.7, 851.7) = 69.58% / 75.98%. Текст Inter 700 20px / −1px / 97.5%, #DFED8C,
   отступ текста от угла 31.7×29.2, три строки как в макете. */
.raw2-hero .bubble {
  position: absolute; left: 69.58%; top: 75.98%; z-index: 2; box-sizing: border-box;
  width: 327.401px; height: 108.396px;
  background: rgba(30,30,30,.39); backdrop-filter: blur(8px); color: #DFED8C;
  padding: 29.2px 20.6px 20.7px 31.7px; border-radius: 29.5px;
  white-space: nowrap;
  font-size: 20px; font-weight: 700; line-height: 0.975; letter-spacing: -1px;
  transform: rotate(-7.5deg); transform-origin: center;
}

/* ============================================================
   SECTION: система (white)
   ============================================================ */
.raw2-system { background: var(--white); padding: 96px 0; }
.raw2-system .badge-wrap { display: flex; justify-content: center; margin-bottom: 60px; }

/* horizontal gallery / carousel */
.raw2-carousel-outer {
  position: relative;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 24px;
}
.raw2-carousel-clip {
  position: relative;
  max-width: 1096.075px;
  margin: 0 auto;
  overflow-x: clip;
  overflow-y: visible;
}
.raw2-carousel {
  display: flex; gap: 26px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 140px 0 40px;
  scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.raw2-carousel::-webkit-scrollbar { display: none; }
.raw2-carousel.dragging { cursor: grabbing; scroll-snap-type: none; }
.raw2-carousel img { -webkit-user-drag: none; }
/* Стрелки карусели — лайм-круг сидит ровно на ребре активной карточки: центр круга = ребро */
.raw2-car-nav {
  position: absolute; top: calc(50% + 50px); transform: translateY(-50%); z-index: 5;
  width: 71px; height: 71px;
  background: transparent; border: none; padding: 0; cursor: pointer;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.raw2-car-nav .notch { display: none; }
.raw2-car-nav .disc {
  position: relative; z-index: 2;
  width: 71px; height: 71px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 10px #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, transform .18s;
}
.raw2-car-nav:hover .disc { background: var(--lime-deep); }
.raw2-car-nav svg { width: 32px; height: auto; display: block; }
/* стрелки у крайних карточек: центр диска ровно на внешнем ребре клипа (1096.075/2 = 548.0375 от центра) */
.raw2-car-nav.prev { left: calc(50% - 583.54px); }
.raw2-car-nav.prev svg { transform: scaleX(-1); }
.raw2-car-nav.next { right: calc(50% - 583.54px); }

.raw2-fcard {
  position: relative; background: var(--lime); border-radius: var(--radius-card);
  padding: 74px 34px 40px;
  width: 348.025px; height: 328.623px; min-height: 0;
  flex: 0 0 348.025px; scroll-snap-align: center;
  transform: scale(0.88); transform-origin: center bottom;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
/* active (nearest centre) card — заметно больше + красная иконка */
.raw2-fcard.active { transform: scale(1.08); }
.raw2-fcard .ficon {
  position: absolute; top: -95px; left: 50%; transform: translateX(-50%); height: 160px;
  display: flex; align-items: flex-end;
}
.raw2-fcard .ficon img { width: auto; height: 160px; display: block; }
.raw2-fcard .ficon .ic-act { display: none; }
.raw2-fcard.active .ficon .ic-def { display: none; }
.raw2-fcard.active .ficon .ic-act { display: block; }
/* card title Figma: ~36px, 700, -1.8px, 97.5%
   (замерил: «Разговорные клубы» 2 строки h=70 → font ~35, «Индивидуальные уроки» h=78 → ~39) */
.raw2-fcard h3 { font-size: clamp(1.4rem,2.5vw,36px); font-weight: 700; margin-bottom: 16px; text-transform: none; letter-spacing: -0.05em; line-height: 0.975; }
/* card body Figma: 24px, 500, -1.4px, 96% */
.raw2-fcard p { font-size: clamp(1.05rem,1.7vw,24px); font-weight: 500; color: var(--ink); line-height: 0.96; letter-spacing: -0.058em; }
.raw2-fcard p b { color: var(--ink); font-weight: 700; }

/* ============================================================
   SECTION: quiz CTA (red)
   ============================================================ */
.raw2-quiz { background: var(--red-hi); padding: 106px 0; }
.raw2-quiz .wrap { max-width: 1292px; }
.raw2-quiz .card {
  background: #fff; border-radius: 29.5px; padding: 48px 54px; height: 351px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  max-width: 1228px; margin: 0 auto;
}
/* title Figma: 40px, 700, -2px, 117.3% */
/* «Проверь свою прожарку» Figma: 48px / 700 / -2px / 117.3% */
.raw2-quiz h2 { font-size: clamp(1.6rem,2.9vw,40px); letter-spacing: -0.05em; line-height: 1.173; }
/* "Level up или stay raw?" Figma: 28px, 700, -1.4px, 111.3% */
.raw2-quiz .lvlup { font-size: clamp(1.4rem,2.4vw,28px); font-weight: 700; letter-spacing: -0.05em; line-height: 1.113; margin: 33px 0; text-transform: none; }
.raw2-quiz .lvlup .up { color: var(--lime-dark); }
.raw2-quiz .lvlup .raw { color: var(--red-accent); }
/* body Figma: 24px, 500, -1.2px */
/* Figma: 24px / 500 / -1.2px / 80.53% */
.raw2-quiz .desc { font-size: clamp(1.05rem,1.7vw,24px); font-weight: 500; color: var(--ink); text-transform: none; line-height: .8053; letter-spacing: -0.05em; }
.raw2-quiz .desc b { color: var(--red-accent); font-weight: 700; }
.raw2-quiz .right { display: flex; flex-direction: column; align-self: stretch; align-items: flex-end; padding-top: 15px; }
.raw2-quiz .metrics { display: flex; gap: 34px; align-items: center; margin-bottom: 49px; }
.raw2-quiz .metric { display: flex; align-items: center; gap: 20px; }
.raw2-quiz .metric .mi { width: 70px; height: 63px; display: inline-flex; align-items: center; justify-content: center; color: var(--red-accent); flex: 0 0 auto; }
.raw2-quiz .metric .mi svg,
.raw2-quiz .metric .mi img { width: auto; height: 100%; max-width: 100%; display: block; }
/* number Figma: 40px, 700, -2px */
.raw2-quiz .metric b { font-size: clamp(2rem,3.2vw,40px); font-weight: 700; letter-spacing: -0.05em; line-height: .8053; }
/* label Figma: 15px, 500, -0.75px */
.raw2-quiz .metric span { font-size: 15px; font-weight: 500; letter-spacing: -0.75px; color: var(--ink); display: block; line-height: .9197; }
/* subnote Figma: 15px, 500, -0.75px, rgba(0,0,0,.7) */
.raw2-quiz .subnote { font-size: 15px; font-weight: 500; letter-spacing: -0.75px; color: rgba(0,0,0,.7); text-transform: none; text-align: right; line-height: .9197; max-width: 326px; margin-bottom: 19px; }
/* "НАЧАТЬ ИГРУ!" Figma: 35px, 700, -1.75px, 97.5% */
.raw2-quiz .btn-red { align-self: flex-end; width: 327px; height: 76px; font-size: clamp(1.4rem,2.5vw,35px); padding: 0; }

/* ============================================================
   SECTION: founder (dark photo)
   ============================================================ */
/* Figma frame: 1441×1069 → aspect-ratio 1441/1069 ≈ 74.2vw
   Держим пропорцию до 1441px, потом капим на 1069.
   padding-bottom 129px — расстояние от bio-карточек до низа секции (замер Figma). */
/* Figma 4003:173 (1441×1073): заголовок 722×156 at (107,77); карточки 348 at (107,260) / (481,260) / (481,447); низ 1073 − 944 = 129 */
.raw2-founder { position: relative; background: #1a1714 center/cover; padding: 77px 0 129px; color: #fff; min-height: clamp(600px, 74.5vw, 1073px); }
.raw2-founder::before { content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(15,13,11,.9) 0%, rgba(15,13,11,.55) 45%, rgba(15,13,11,.05) 75%); }
.raw2-founder .wrap { position: relative; z-index: 2; max-width: 1441px; padding: 0 107px; }
/* Figma 2522:888/889: 722×156, обводка 4, текст at (160,108) → padding 27/49 + border 4; Inter 700 40px / −2px / 117.3% */
.raw2-founder .badge-title { box-sizing: border-box; width: 722px; height: 156px; margin-bottom: 27px; border-radius: 29.5px; text-align: left; padding: 27px 16px 0 49px; line-height: 1.173; display: inline-block; border-width: 4px; letter-spacing: -2px; white-space: nowrap; }
/* Figma: левая колонка 348×684, padding 45 43 45 53 */
.raw2-founder .bio { display: grid; grid-template-columns: 348px 348px; gap: 26px; max-width: 722px; align-items: stretch; }
.raw2-founder .bio-col { display: flex; flex-direction: column; gap: 23px; }
/* bio Figma Glass: Fill 929D4F 39% + Refraction 100 / Depth 81 / Dispersion 58 / Splay 100 / Light -45° 80%
   CSS-приближение: сильный blur+saturate, светлая внутренняя рамка (highlight от -45°), диагональный gradient sheen */
.raw2-founder .bio-card {
  position: relative; width: 348px; border-radius: 29.5px; overflow: hidden;
  backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.25);
  /* Figma: Inter 500 28px / −1.4px / 96% */
  font-size: clamp(1.05rem,1.95vw,28px); font-weight: 500; line-height: 0.96; letter-spacing: -1.4px; text-transform: none;
}
/* glass sheen — диагональный highlight (Figma Light -45°) */
.raw2-founder .bio-card::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.10) 100%);
  mix-blend-mode: overlay;
}
.raw2-founder .bio-card > * { position: relative; z-index: 1; }
/* Figma Fill 929D4F 39% — зелёная тонировка; тёмная для второй карточки */
.raw2-founder .bio-green { background: rgba(146, 157, 79, 0.39); }
.raw2-founder .bio-dark  { background: rgba(30, 30, 30, 0.58); }
/* Figma-паддинги bio-cards (top / right / bottom / left) */
/* левая большая (Rectangle 174 «Два высших…») — 45 / 43 / 45 / 53 */
.raw2-founder .bio > .bio-card { min-height: 684px; padding: 45px 43px 45px 53px; }
/* правая верхняя (Rectangle 175 «Бабушка») — 41 / 48 / 42 / 48 */
.raw2-founder .bio-col .bio-green { min-height: 164px; padding: 41px 48px 42px 48px; }
/* правая нижняя (Rectangle 176 «Решила создать…») — 51 / 13 / 95 / 45 */
.raw2-founder .bio-col .bio-dark { min-height: 497px; padding: 51px 13px 95px 45px; }
/* абзацы разделены пустой строкой (26.88px); буллит — Figma Ellipse 25 (11.5px, белый) на 9px левее текста, первая строка с отступом «  » */
.raw2-founder .bio-card ul { list-style: none; display: flex; flex-direction: column; gap: 26.88px; }
.raw2-founder .bio-card li { position: relative; text-indent: 14px; }
.raw2-founder .bio-card li::before { content: ''; position: absolute; left: -9px; top: 10px; width: 11.5px; height: 11.5px; background: url(/landing/raw2/ic-bullet.svg) no-repeat center / contain; }
.raw2-founder .bio-card b.lime { color: var(--lime); font-weight: 700; }
.raw2-founder .bio-card b.red  { color: var(--red-accent); font-weight: 700; }
/* tags Figma: 24px, 700, -1.2px — «Валерия» слева, «учить языку» справа-ниже
   (не в одной колонке справа, а раскиданы по нижней части фото) */
.raw2-founder .tags { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.raw2-founder .tags > * { pointer-events: auto; }
.raw2-founder .tag-name { position: absolute; left: 866.3px; top: 798.6px; /* Figma bbox (865, 792.75) 221.4×65.4, rotate −3.08° */ width: 218.819px; height: 53.713px; display: inline-flex; align-items: center; justify-content: center; background: var(--red-accent); color: #fff; font-weight: 700; font-size: 24px; letter-spacing: -1.2px; line-height: 0.8782; padding: 0; border-radius: 29.5px; transform: rotate(-3.08deg); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.raw2-founder .tag-mission { position: absolute; left: 1033.3px; top: 874.5px; /* Figma bbox (1031, 859) 347.3×84.8, rotate 5.24° */ width: 342.708px; height: 53.774px; display: inline-flex; align-items: center; justify-content: center; background: var(--lime); color: var(--ink); font-weight: 700; font-size: 24px; letter-spacing: -1.2px; line-height: 0.8782; padding: 0; border-radius: 29.5px; transform: rotate(5.24deg); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
/* "миссия" Figma: 20px, 500, -1px — на верхнем-правом углу лаймовой плашки */
.raw2-founder .tag-mission .mi { position: absolute; top: -24.2px; left: 248.6px; /* Figma bbox (1281.5, 849) 111.2×62.4, абсолютный поворот 15.31° = 5.24° родителя + 10.07° */ width: 105.498px; height: 35.856px; display: inline-flex; align-items: center; justify-content: center; background: var(--red-accent); color: #fff; font-size: 20px; font-weight: 500; letter-spacing: -1px; padding: 0; border-radius: 999px; transform: rotate(10.07deg); box-shadow: 0 4px 4px rgba(0,0,0,.25); }

/* ============================================================
   SECTION: первое бесплатное занятие (lime)
   ============================================================ */
.raw2-free { background: var(--lime); padding: 90px 0 100px; }
.raw2-free .badge-wrap { display: flex; justify-content: center; margin-bottom: 56px; }
.raw2-free .bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 26px; }
.raw2-pcard { position: relative; border-radius: var(--radius-card); overflow: hidden; background: #333 center/cover; }
.raw2-pcard--tall { grid-row: span 2; }
.raw2-pcard--wide { grid-column: span 2; }
/* card text Figma: 32px, 500, -1.6px, 100% */
.raw2-pcard .overlay {
  position: absolute; top: 22px; left: 22px; right: 22px; max-width: 360px;
  background: rgba(24,22,20,.5); backdrop-filter: blur(6px); color: #fff;
  padding: 18px 22px; border-radius: 18px; font-size: clamp(1.2rem,2vw,32px); font-weight: 500; letter-spacing: -0.05em; line-height: 1.0; text-transform: none;
}
.raw2-pcard .overlay b { color: var(--lime); font-weight: 700; }

/* ============================================================
   SECTION: цены (red-overlay photo)
   ============================================================ */
.raw2-price { position: relative; background: #333 center/cover; padding: 90px 0 100px; }
.raw2-price::before { content:''; position:absolute; inset:0; background: rgba(0,0,0,.12); }
.raw2-price .wrap { position: relative; z-index: 2; }
.raw2-price .badge-wrap { display: flex; justify-content: center; margin-bottom: 56px; }
.raw2-price .badge-title--outline { border-color: var(--lime); color: #fff; }
/* Figma: 2 обычные 312 + hot 404, gap 58, всё центрировано */
.raw2-price .cards { display: grid; grid-template-columns: 312px 312px 404px; gap: 58px; justify-content: center; align-items: stretch; }
.raw2-prc { position: relative; width: 312px; min-height: 612px; border-radius: var(--radius-card); padding: 40px 34px; background: rgba(223,237,140,0.69); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--ink); display: flex; flex-direction: column; }
/* Figma: hot-карточка шире — 404 (обычная 312) */
.raw2-prc--hot { width: 404px; background: rgba(204,58,58,0.69); color: #fff; }
/* title Figma: 32px, 700, -1.6px, uppercase */
.raw2-prc h3 { font-size: clamp(1.35rem,2.2vw,32px); letter-spacing: -0.05em; line-height: .9001; margin-bottom: 30px; }
.raw2-prc ul { list-style: none; display: flex; flex-direction: column; gap: 34px; margin-bottom: 28px; }
/* item Figma: 24px, 500, -1.2px */
.raw2-prc li { position: relative; padding-left: 15px; font-size: clamp(1rem,1.6vw,24px); font-weight: 500; letter-spacing: -0.04em; line-height: .8063; text-transform: none; }
.raw2-prc li::before { content:'•'; position:absolute; left: 2px; }
.raw2-prc li b { font-weight: 700; }
.raw2-prc--hot li { padding-left: 12px; line-height: .975; }
.raw2-prc--hot ul { gap: 30px; }
/* price Figma: 36px, Medium 500, -1.8px */
.raw2-prc .price-wrap { margin-top: auto; align-self: center; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.raw2-prc .price {
  display: inline-flex; align-items: center; white-space: nowrap;
  background: #fff; color: var(--ink); font-weight: 500; font-size: clamp(1.5rem,2.5vw,36px); letter-spacing: -0.05em; padding: 12px 30px; border-radius: 999px;
}
/* «горячая» цена крупнее и жирнее (Figma: Bold 700, 48px, плашка больше) */
.raw2-prc--hot .price { background: var(--lime); font-weight: 700; font-size: clamp(1.7rem,2.9vw,48px); line-height: .975; padding: 14px 36px; }
/* лаймовые огни снаружи пилюли (на красном фоне), слегка повёрнуты */
.raw2-prc .price-wrap .fire { height: 50px; width: auto; display: block; flex-shrink: 0; transform: rotate(-16deg); }
.raw2-prc .price-wrap .fire-r { transform: scaleX(-1) rotate(-16deg); }
.raw2-price .cta-wrap { display: flex; justify-content: center; margin-top: 48px; }

/* ============================================================
   SECTION: FAQ (red)
   ============================================================ */
.raw2-faq {
  position: relative; background: var(--red-hi); overflow: hidden;
  /* Секция full-width, чтобы фон растягивался на весь viewport. Контент
     центрируется через .wrap (max-width: --maxw). Раньше был `width:1441px
     margin:auto` — на экранах >1441 (Windows FullHD 1920) слева/справа
     появлялись «дыры» соседних секций. min-height вместо height — иначе
     контент обрезается когда шрифт на Windows другой. */
  width: 100%;
  min-height: 1051px;
  padding: 82px 0 0; /* Figma 4003:165: заголовок top 82 */
}
.raw2-faq .mascot { position: absolute; right: -80px; top: 110px; width: 601px; height: 719.737px; transform: rotate(8.163deg); z-index: 1; pointer-events: none; }
/* Figma: вопросы от x=106 при 1441 */
.raw2-faq .wrap { position: relative; z-index: 2; max-width: 1441px; padding: 0 106px; }
/* заголовок 82…165, первый вопрос top 238 → 73 */
.raw2-faq .badge-wrap { display: flex; justify-content: center; margin-bottom: 73px; }
.raw2-faq .badge-title--outline-lime { border-color: var(--lime); color: #fff; }
/* фикс-раскладка: item = 883×76, gap 66px, ответ раскрывается в потоке и толкает соседей вниз */
.raw2-faq-list { display: flex; flex-direction: column; gap: 66px; align-items: flex-start; }
.raw2-faq-item {
  background: transparent; position: relative;
  display: inline-flex; flex-direction: column; align-items: stretch;
  width: min-content; max-width: 1100px; box-sizing: border-box;
}
.raw2-faq-q {
  text-align: left; background: #fff; border: none; cursor: pointer; font-family: inherit;
  /* Figma: Inter 600 36px / -1.8px; текст x=139 (33 от края), справа 36 */
  font-size: clamp(1rem, 2.5vw, 36px); font-weight: 600; letter-spacing: -0.05em; line-height: 1.0; color: var(--ink);
  padding: 0 36px 0 33px; border-radius: 69px;
  height: 76px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 16px;
  white-space: nowrap;
  position: relative; z-index: 2;
}
.raw2-faq-q > span:first-child { flex: 0 1 auto; }
.raw2-faq-q .chev { display: none; }
.raw2-faq-item.open .raw2-faq-q {
  background: var(--lime);
}
.raw2-faq-a {
  position: relative;
  background: rgba(223, 237, 140, 0.29);
  /* верхний radius = радиус капсулы пилюли (76/2 = 38) — кривые совпадают,
     плашка полностью «задвинута» под пилюлю и её угол не выступает */
  border-radius: 41px 39px 29.5px 29.5px; /* Figma 2522:881 */
  min-height: 247px; /* Figma: блок ответа 663…910 */
  color: #fff; padding: 106px 104px 33px 33px;
  /* Figma: 24px medium, tracking -1.2 (=-0.05em), line-height ~93% */
  font-size: clamp(1rem,1.7vw,24px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.9333;
  box-sizing: border-box;
  width: 100%;
  margin-top: -76px; /* полное перекрытие пилюли; текст сдвинут вниз padding-top */
  z-index: 1;
  overflow-wrap: break-word;
}
.raw2-faq-a-text { display: block; }
/* Figma 2522:884: стрелка ▼ 40×14 (svg 48×22 со штрихом 8) at x=874 y=782 в блоке 106..953 × 663..910
   → top 782−663−4 = 115, right 953−914−4 = 35. Раньше стояла на 43px и пряталась под пилюлей. */
.raw2-faq-a .chev-down {
  position: absolute; right: 35px; top: 115px; transform: none;
  width: 48px; height: 22px; display: block; flex-shrink: 0;
}

/* ============================================================
   SECTION: contact (lime) + footer
   ============================================================ */
/* Figma 4001:159 — frame 1441×782, bg #DFED8C. Все числа — из макета, десктоп 1441. */
.raw2-contact { position: relative; background: var(--lime); padding: 73px 0 87px; overflow: hidden; }
/* watermark: Group 96 1100×540.169, left 171px (11.87%), top 95px, fill #CC3A3A @ 20% (svg .28 × .714) */
.raw2-contact .watermark { position: absolute; left: 50%; top: 95px; transform: translateX(-50%); width: min(1100px, 88vw); height: auto; aspect-ratio: 1100 / 540.169; opacity: .714; z-index: 0; pointer-events: none; }
.raw2-contact .wrap { position: relative; z-index: 1; }
/* heading: top 73, w 1036, Inter 500 32px / -1.6px / 97.5%, две строки (перенос после запятой) */
.raw2-contact h2 { text-align: center; font-size: clamp(1.4rem,2.4vw,32px); margin: 0 auto 61px; max-width: 1036px; text-transform: none; font-weight: 500; letter-spacing: -0.05em; line-height: 0.975; }
/* form column: inputs 578×68, gap 25 */
.raw2-form { max-width: 578px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; }
/* inputs: h 68, r 34, placeholder Inter 500 24px / -1.2px / rgba(30,30,30,.7), по центру */
.raw2-form input:not([type=checkbox]) {
  box-sizing: border-box; width: 100%; height: 68px; padding: 0 28px; border-radius: 34px; border: 2px solid transparent; font-family: inherit;
  font-size: clamp(1.05rem,1.7vw,24px); font-weight: 500; letter-spacing: -1.2px; line-height: 0.975; text-align: center;
  background: #fff; color: var(--ink); outline: none; transition: border-color .18s;
}
.raw2-form input::placeholder { color: rgba(30,30,30,.7); }
.raw2-form input:user-invalid { border-color: var(--red); }
.raw2-form input.invalid { border-color: var(--red); }
/* телефон: селект страны (флаг + код) + инпут — общий PhoneInput, вид как у соседних полей */
.raw2-form .phone-input, .raw2-cta-form .phone-input { width: 100%; }
.raw2-form .raw2-phone-select, .raw2-cta-form .raw2-phone-select {
  font-family: inherit; font-size: clamp(1rem,1.5vw,22px); font-weight: 500; letter-spacing: -1.1px; color: var(--ink);
}
.raw2-form .phone-input input, .raw2-cta-form .phone-input input { text-align: left; }
/* «Отправить»: 240×68, r 34, top 566 (39px под чекбоксами), Inter 700 32px / -1.6px, без тени */
.raw2-form .submit-row { display: flex; justify-content: center; margin-top: 14px; }
.raw2-form .submit-row .btn-red { text-transform: none; width: 240px; height: 68px; padding: 0; font-size: 32px; letter-spacing: -1.6px; box-shadow: none; }
/* consent (старый класс, не используется в разметке — см. .raw2-form-consent) */
.raw2-form .consent { text-align: center; font-size: clamp(.85rem,1.3vw,20px); font-weight: 400; font-style: italic; letter-spacing: -1px; line-height: 0.975; color: rgba(30,30,30,.7); max-width: 460px; margin: 12px auto 0; }
.raw2-form .ok { text-align: center; font-weight: 700; color: var(--red); }

/* success state — Figma 2522:2446 «Контакты отправлены»: 570×286, r 29.5, #DFED8C, без тени.
   Текст: top 53, w 473, Inter 500 24px / -1.2px / 97.5%, 3 строки (70.2px). Кнопка 208×57 r34 at top 176. */
.raw2-sent-modal {
  position: relative; width: 100%; max-width: 570px; background: var(--lime); border-radius: 29.5px;
  padding: 53px 48px 53px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 52.8px;
  animation: raw2-pop .22s cubic-bezier(.16,1,.3,1);
}
.raw2-sent-msg { max-width: 473px; font-size: 24px; font-weight: 500; letter-spacing: -1.2px; color: var(--ink); line-height: 0.975; }
.raw2-sent-msg b { font-weight: 700; }
/* «Ок»: Inter 700 24px / -1.2px, белый */
.raw2-sent-modal .btn-red { width: 208px; height: 57px; padding: 0; border-radius: 34px; text-transform: none; font-size: 24px; letter-spacing: -1.2px; line-height: 0.975; box-shadow: none; }

/* ============================================================
   CTA POPUP — Figma 2522:2375 «Форма для связи»: 686×808, r 29.5, #DFED8C.
   Заголовок top 79 (Inter 500 32px / -1.6px / 97.5%, w 492 → 2 строки), инпуты 578×68 x=54
   top 202/295/388/481 (gap 25), «Отправить» 240×68 top 623, подпись top 713 (Inter 400 20px / -1px, w 429).
   ============================================================ */
.raw2-cta {
  position: relative; width: 100%; max-width: 686px; background: var(--lime); border-radius: 29.5px;
  padding: 77px 54px 56px; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: raw2-pop .22s cubic-bezier(.16,1,.3,1);
}
.raw2 .raw2-cta-title { max-width: 492px; margin: 0 auto 62.6px; text-align: center; color: var(--ink); font-weight: 500; font-size: 32px; line-height: 0.975; letter-spacing: -1.6px; text-transform: none; }
.raw2-cta-form { display: flex; flex-direction: column; align-items: center; gap: 25px; }
.raw2-cta-form input {
  box-sizing: border-box; width: 100%; height: 68px; padding: 0 28px; border-radius: 34px; border: 2px solid transparent; background: #fff; text-align: center;
  font-family: inherit; font-size: 24px; font-weight: 500; letter-spacing: -1.2px; line-height: 0.975; color: var(--ink); outline: none; transition: border-color .18s;
}
.raw2-cta-form input::placeholder { color: rgba(30,30,30,.7); }
.raw2-cta-form input.invalid { border-color: var(--red); }
/* кнопка 74px под инпутами (gap 25 + 49) */
.raw2-cta-form .btn-red { margin-top: 49px; width: 240px; height: 68px; padding: 0; border-radius: 34px; font-size: 32px; letter-spacing: -1.6px; line-height: 0.975; text-transform: none; box-shadow: none; }
/* подпись 22px под кнопкой (gap 25 − 3) */
.raw2-cta-consent { max-width: 429px; margin: -3px auto 0; text-align: center; color: rgba(30,30,30,.7); font-size: 20px; font-weight: 400; letter-spacing: -1px; line-height: 0.975; }

/* ============================================================
   ROAST QUIZ POPUP — вопрос: Figma 2535:148 «Вопрос до ответа» 530×716, r 29.5, #1E1E1E.
   Сердца 29×23 top 69 (gap 17); вопрос top 122 (Inter 700 32px / -1.6px / 97.5%, #DFED8C, w 509);
   варианты 447×68 x=42 top 227/320/413/506 (gap 25), Inter 500 32px / -1.6px; счётчик top 620 (Inter 500 32px).
   Результат: Figma 2173:2630 / 2642 / 2083.
   ============================================================ */
.raw2-quiz-pop {
  position: relative; width: 100%; max-width: 530px; min-height: 716px; background: #1E1E1E; border-radius: 29.5px;
  padding: 69px 41px 64.8px 42px; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: raw2-pop .22s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column;
}
.raw2-quiz-pop.result { background: var(--lime); }
.rq-bar { display: flex; align-items: center; justify-content: center; margin-bottom: 30px; }
.rq-lives { display: flex; gap: 17px; }
.rq-lives img { width: 29px; height: 23px; display: block; }
.rq-timer { display: inline-flex; align-items: center; gap: 7px; color: var(--lime); font-weight: 700; font-size: clamp(1.05rem,1.7vw,22px); letter-spacing: -0.04em; }
.rq-timer svg { width: 22px; height: 22px; }
/* блок вопроса — всегда высота двух строк (62.4), чтобы варианты стояли на top 227 при любой длине вопроса */
.rq-q { max-width: 509px; min-height: 62.4px; display: flex; align-items: center; justify-content: center; margin: 0 auto 42.6px; text-align: center; color: var(--lime); font-weight: 700; font-size: 32px; letter-spacing: -1.6px; line-height: 0.975; }
.rq-options { display: flex; flex-direction: column; gap: 25px; }
.rq-opt {
  box-sizing: border-box; width: 100%; height: 68px; padding: 0 20px; border: none; border-radius: 34px; cursor: pointer; font-family: inherit;
  background: #fff; color: var(--ink); font-weight: 500; font-size: 32px; letter-spacing: -1.6px; line-height: 0.975;
  transition: background .2s, color .2s;
}
.rq-opt:hover:not(:disabled) { background: var(--lime); }
.rq-opt:disabled { cursor: default; }
/* после ответа — Figma 2535:163: верный #DFED8C / #1E1E1E, остальные rgba(204,58,58,.5) / rgba(255,255,255,.5) */
.rq-opt.correct { background: var(--lime); color: var(--ink); }
.rq-opt.wrong { background: rgba(204,58,58,.5); color: rgba(255,255,255,.5); }
.rq-counter { text-align: center; color: var(--lime); font-weight: 500; font-size: 32px; letter-spacing: -1.6px; line-height: 0.975; margin-top: 46px; }
/* result */
/* результат — Figma 2522:2409: 686×585, r 29.5, #DFED8C. Заголовок top 79 (Inter 500 32px / -1.6px / 97.5%),
   лого 266.6×116.3 top 156 (medium-rare; остальные лого в том же масштабе ×1.73), текст top 312 (2 строки). */
.raw2-quiz-pop.result { max-width: 686px; min-height: 585px; padding: 77.4px 97px 78px; }
.raw2-quiz-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 0; }
.rq-top { color: var(--ink); font-weight: 500; font-size: 32px; letter-spacing: -1.6px; line-height: 0.975; margin-bottom: 47.4px; }
.rq-logo { width: auto; max-width: 100%; display: block; }
.rq-bot { color: var(--ink); font-weight: 500; font-size: 32px; letter-spacing: -1.6px; line-height: 0.975; margin-top: 38.1px; }
/* CTA — Figma 4003:162: 472×76 r50 at x=107 top 431 (56.6 под текстом), Inter 700 35px / -1.75px / 97.5%, белый */
.raw2 .rq-cta { margin-top: 56.6px; width: 472px; max-width: 100%; height: 76px; padding: 0; box-sizing: border-box; border-radius: 50px; text-transform: none; font-size: 35px; letter-spacing: -1.75px; line-height: 0.975; box-shadow: none; }

/* Figma 4002:161 — footer frame 1441×271, белый фон. Три колонки: grid 1fr auto 1fr,
   контент прижат к верху; левый край 107px (иконка TG), правый 1337px (1441-104). */
.raw2-footer { background: #fff; font-family: 'Inter', sans-serif; color: #1E1E1E; }
/* .wrap здесь не ограничивает (в макете контент от 107 до 1337 при 1441) */
.raw2-footer .wrap { max-width: none; padding: 0; }
.raw2-footer .inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  width: 100%; max-width: 1441px; min-height: 271px; margin: 0 auto;
  padding: 73px 104px 84px 107px; box-sizing: border-box;
}
/* links: Inter 500 20px / -1px / 112.9%; Telegram #1E1E1E, остальные rgba(30,30,30,.7).
   Figma y: Telegram 79, Связаться 106, Договор 133, Политика 162 (шаг 27/27/29). */
/* текстовая колонка выровнена по x=143 (Figma), иконка TG вынесена левее на 107: padding 36 = 29 + 7 */
.raw2-footer .fcol-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding-left: 36px; font-size: 20px; font-weight: 500; letter-spacing: -1px; line-height: 1.129; }
.raw2-footer .fcol-links a { color: #1E1E1E; text-decoration: none; white-space: nowrap; }
.raw2-footer .fcol-links .fmut { color: rgba(30, 30, 30, 0.70); }
.raw2-footer .fcol-links a:hover { opacity: .7; }
.raw2-footer .fcol-links .fmut:nth-of-type(2) { margin-top: 2.2px; }
.raw2-footer .fcol-links .fmut:nth-of-type(3) { margin-top: 4.4px; }
.raw2-footer .fcol-links .fmut:nth-of-type(4) { margin-top: 6.4px; }
/* иконка TG: 29×29 at (107,73), зазор до текста 7px */
.raw2-footer .fcol-links .tg { display: inline-flex; align-items: center; gap: 7px; height: 29px; margin-left: -36px; }
.raw2-footer .fcol-links .tg img { width: 29px; height: 29px; display: block; }
/* центр: кнопка 442×64 r50 at y=79, Inter 700 32px / -1.6px / 97.5%; копирайт Gluten 500 20px / -1px, y=164 */
.raw2-footer .fcol-center { display: flex; flex-direction: column; align-items: center; gap: 21px; padding-top: 6px; }
.raw2-footer .fcol-center .btn-red { width: 442px; height: 64px; padding: 0; border-radius: 50px; font-size: 32px; letter-spacing: -1.6px; line-height: 0.975; box-shadow: none; }
.raw2-footer .copy { font-family: var(--font-gluten), 'Gluten', 'Inter', sans-serif; font-size: 20px; font-weight: 500; letter-spacing: -1px; line-height: 1.129; color: #1E1E1E; text-align: center; }
/* реквизиты: Inter 500 20px / -1px / 138%, справа, rgba(30,30,30,.7); первая строка y≈79 */
.raw2-footer .legal { display: flex; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; color: rgba(30, 30, 30, 0.70); font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 500; letter-spacing: -1px; line-height: 1.38; margin-top: 3.5px; white-space: nowrap; }

/* ============================================================
   LOGIN POPUP (Figma «Личный кабинет»: Ученик / Учитель)
   ============================================================ */
.raw2-modal-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: safe center; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
  animation: raw2-fade .18s ease;
}
@keyframes raw2-fade { from { opacity: 0; } to { opacity: 1; } }
/* Figma 2522:2340 «Личный кабинет»: 686×606, r 29.5, #DFED8C; поля 54px от краёв, табы top 61,
   инпуты top 202/295 (578×68, gap 25), «Войти» 240×68 top 436, «Регистрация» top 526. */
.raw2-login {
  position: relative; width: 100%; max-width: 686px; background: var(--lime);
  border-radius: 29.5px; padding: 61px 54px 56.6px; box-shadow: 0 30px 80px rgba(0,0,0,.35);
  animation: raw2-pop .22s cubic-bezier(.16,1,.3,1);
}
@keyframes raw2-pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* табы 240×68 ×2, зазор 98, до инпутов 73 */
.raw2-login-tabs { display: flex; gap: 98px; margin-bottom: 73px; }
/* Figma: Ученик/Учитель — Inter Medium 500, 32px, -1.6px */
.raw2-login-tabs button {
  flex: 1; box-sizing: border-box; height: 68px; padding: 0; border-radius: 34px; border: 2px solid var(--ink); background: transparent;
  color: var(--ink); font-family: inherit; font-weight: 500; font-size: 32px; line-height: 0.975;
  letter-spacing: -1.6px; cursor: pointer; transition: background .2s, color .2s;
}
.raw2-login-tabs button.active { background: var(--ink); color: var(--lime); }
/* registration title — Figma: outlined pill, Inter Medium 500, 32px, -1.6px */
/* Figma 2522:3001 «Регистрация в личный кабинет»: 686×926; заголовок-пилюля 578×68 top 61, обводка 2px,
   Inter 500 32px / -1.6px; инпуты top 202…574 (gap 25); кнопка 386×68 top 714; чекбоксы x=131, top 814/848. */
.raw2-login-title {
  box-sizing: border-box; height: 68px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 34px; text-align: center; color: var(--ink);
  font-weight: 500; font-size: 32px; line-height: 0.975; letter-spacing: -1.6px; padding: 0 24px; margin-bottom: 73px;
}
.raw2-login-form { display: flex; flex-direction: column; align-items: center; gap: 25px; }
.raw2-login-form > * { align-self: center; }
.raw2-login-form input { width: 100%; max-width: none; }
/* регистрация: кнопка 72px под инпутами (gap 25 + 47) */
.raw2-login-title + .raw2-login-form .btn-red { margin-top: 47px; width: 386px; }
/* чекбоксы: блок 424px (131→555) по центру, ряды выровнены влево; круг 21 белый без обводки, зазор 11;
   Inter 400 20px / -1px / 97.5%; первый ряд 32px под кнопкой (gap 25 + 7), шаг рядов 34 (21 + 13) */
.raw2-login-form .raw2-check { width: 424px; max-width: 100%; white-space: nowrap; justify-content: flex-start; margin-top: 7px; gap: 11px; font-size: 20px; font-weight: 400; letter-spacing: -1px; line-height: 0.975; }
.raw2-login-form .raw2-check + .raw2-check { margin-top: -12px; }
.raw2-login-form .raw2-check--long { white-space: normal; align-items: flex-start; line-height: 1.05; }
.raw2-login-form .raw2-check--long input { margin-top: 2px; }
.raw2-login-form .raw2-check--long a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.raw2-login-form .raw2-check input { flex-basis: 21px; width: 21px; height: 21px; border: none; }
.raw2-login-form .raw2-check input:checked::after { left: 50%; top: 50%; width: 5px; height: 9px; transform: translate(-50%, -60%) rotate(45deg); }
/* инпуты 578×68 r34, плейсхолдер Inter 500 24px / -1.2px / rgba(30,30,30,.7) */
.raw2-login-form input {
  box-sizing: border-box; height: 68px; padding: 0 28px; border-radius: 34px; border: none; background: #fff; text-align: center;
  font-family: inherit; font-size: 24px; font-weight: 500; letter-spacing: -1.2px; line-height: 0.975; color: var(--ink); outline: none;
}
.raw2-login-form input::placeholder { color: rgba(30,30,30,.7); }
/* «Войти» 240×68 r34, 73px под инпутами (gap 25 + 48), Inter 700 32px / -1.6px */
/* «Войти» 240 (min-width), «Зарегистрироваться» 386 = текст 316 + 2×35 */
.raw2-login-form .btn-red { align-self: center; margin-top: 48px; min-width: 240px; height: 68px; padding: 0 35px; box-sizing: border-box; border-radius: 34px; font-size: 32px; letter-spacing: -1.6px; line-height: 0.975; text-transform: none; box-shadow: none; }
.raw2-login-form .btn-red:disabled { opacity: .7; cursor: default; transform: none; }
.raw2-login-err { text-align: center; color: var(--red); font-weight: 600; font-size: .95rem; margin-top: -4px; }
.raw2-login-check-msg {
  text-align: center; margin: 8px 0 20px;
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 20px); line-height: 1.35; letter-spacing: -0.03em;
  color: var(--ink);
}
.raw2-login-check-msg b { font-weight: 700; }
/* «Проверьте почту»: кнопка «Ок» стоит вне .raw2-login-form, поэтому центрирование и размер
   из правил формы её не достают — задаём отдельно, как у кнопок формы (240×68). */
.raw2-login-check-msg + .btn-red {
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
  min-width: 240px; height: 68px; padding: 0 35px 7px; box-sizing: border-box; border-radius: 34px;
  font-size: 32px; letter-spacing: -1.6px; line-height: 0.975; text-transform: none; box-shadow: none;
}
/* «Регистрация» / «Уже есть аккаунт? Войти» — Figma: Inter Medium 500, 24px, -1.2px, 97.46% */
/* «Регистрация»: 22px под кнопкой (gap 25 − 3), Inter 500 24px / -1.2px / 97.5% */
.raw2-login-reg { align-self: center; margin-top: -3px; padding: 0; background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 500; font-size: 24px; line-height: 0.975; letter-spacing: -1.2px; color: var(--ink); }
.raw2-login-reg:hover { color: var(--red); }
/* registration checkboxes (Figma: circle) */
.raw2-check { display: flex; align-items: center; gap: 12px; font-size: clamp(.95rem,1.4vw,18px); font-weight: 500; letter-spacing: -0.03em; color: var(--ink); cursor: pointer; }
.raw2-check:first-of-type { margin-top: 8px; }
.raw2-check input {
  appearance: none; -webkit-appearance: none; flex: 0 0 22px; width: 22px; height: 22px;
  padding: 0; margin: 0; background: #fff; border: 2px solid var(--ink); border-radius: 50%;
  cursor: pointer; position: relative; transition: background .15s;
}
.raw2-check input:checked { background: var(--ink); }
.raw2-check input:checked::after { content: ''; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid var(--lime); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* чекбоксы формы: круг 21px белый без обводки, зазор 11px, Inter 400 20px / -1px / 97.5%; первый ряд на 22px под инпутами, шаг рядов 34px */
.raw2-form .raw2-check { margin-top: -3px; justify-content: center; gap: 11px; font-size: 20px; font-weight: 400; letter-spacing: -1px; line-height: 0.975; }
.raw2-form .raw2-check input { flex-basis: 21px; width: 21px; height: 21px; border: none; }
.raw2-form .raw2-check input:checked::after { left: 50%; top: 50%; width: 5px; height: 9px; transform: translate(-50%, -60%) rotate(45deg); }
/* Figma: шаг рядов 34px = 21 + 13; при form gap 25 → -12 */
.raw2-form .raw2-check + .raw2-check { margin-top: -12px; }
/* Figma: Inter 20px / 400 italic / -1px / 97.46% / rgba(30,30,30,.7) */
/* consent: top 656 (22px под кнопкой), w 785, Inter 400 italic 20px / -1px / 97.5% */
.raw2-form-consent { text-align: center; color: rgba(30,30,30,0.7); font-size: 20px; font-style: italic; font-weight: 400; line-height: 0.975; letter-spacing: -1px; max-width: 785px; margin: -3px auto 0; }
.raw2-form-err { text-align: center; color: var(--red); font-weight: 600; font-size: 15px; margin: -6px 0 0; }
.raw2-form .raw2-check a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.raw2-form .raw2-check a:hover { color: var(--red); }
@media (max-width: 560px) {
  .raw2-login { padding: 44px 26px 34px; }
  .raw2-login-tabs { gap: 12px; margin-bottom: 34px; }
  .raw2-login-tabs button { font-size: 24px; letter-spacing: -1.2px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .raw2-nav .nav-links { display: none; }
  .raw2-quiz .card, .raw2-founder .bio, .raw2-free .bento, .raw2-price .cards { grid-template-columns: 1fr; }
  .raw2-quiz .card { height: auto; }
  .raw2-quiz .right { align-self: auto; padding-top: 0; gap: 28px; }
  .raw2-quiz .metrics, .raw2-quiz .subnote { margin-bottom: 0; }
  .raw2-free .bento { grid-auto-rows: auto; }
  .raw2-pcard { min-height: 260px; }
  .raw2-pcard--tall, .raw2-pcard--wide { grid-row: auto; grid-column: auto; }
  .raw2-quiz .subnote, .raw2-quiz .btn-red { text-align: left; align-self: flex-start; }
  .raw2-founder .tags { position: static; align-items: flex-start; margin-top: 30px; flex-direction: row; flex-wrap: wrap; }
  .raw2-faq .mascot { display: none; }
  .raw2-hero .bubble { display: none; }
  .raw2-hero .glass { max-width: 100%; }
}
@media (max-width: 560px) {
  .raw2 .wrap { padding: 0 20px; }
  .raw2-nav { padding: 18px 20px; }
  .raw2-carousel { padding: 70px 20px 20px; gap: 18px; }
  .raw2-fcard { flex-basis: 80vw; }
  .raw2-car-nav { display: none; }
  .raw2-quiz .card { padding: 32px 26px; }
  .raw2-quiz .metrics { flex-direction: column; gap: 16px; }
  .raw2-hero .glass { padding: 32px 26px; }
  .raw2-footer .inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 24px; padding: 40px 24px; }
  .raw2-footer .fcol-center .btn-red { width: min(442px, 100%); }
  .raw2-footer .fcol-links { align-items: center; }
  .raw2-footer .legal { text-align: center; }
}

/* ============================================================
   MOBILE HERO — Figma 4003:179 (холст 768×994)
   1 px макета = --u = 1px: каждый мобильный блок — холст 768px, уменьшенный целиком через scale(--m-k = ширина / 768),
   как десктоп через zoom. Не vw: iOS Safari округляет дробные размеры, и масштаб на разных ширинах расходится.
   Координаты — от левого верхнего угла холста, как в Figma.
   ============================================================ */
.raw2-m-hero { display: none; }
@media (max-width: 1023px) {
  .raw2-nav, .raw2-hero { display: none; }
  .raw2-m-hero {
    --u: 1px;
    display: block; position: relative; width: 768px; height: calc(994 * var(--u)); scale: var(--m-k, 1); transform-origin: 0 0; margin: 0 calc(768px * (var(--m-k, 1) - 1)) calc(994px * (var(--m-k, 1) - 1)) 0;
    color: #fff; letter-spacing: normal; text-transform: none;
  }
  .raw2-m-hero > * { position: absolute; }
  .raw2-m-hero { overflow: hidden; }
  /* magnific_79APyBWJAL 1: слой 1799×1847 at (0,−853), картинка 1799×2400 at (0,−874.8);
     hero-m.webp — ровно видимый в кадре 768×994 участок исходника */
  .raw2-m-hero .m-photo { left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
  /* Rectangle 382: 768×415, #EDE6DF → rgba(255,248,242,.49) 59.615% → rgba(212,193,176,0) */
  .raw2-m-hero .m-grad { left: 0; top: 0; width: 100%; height: calc(415 * var(--u));
    background: linear-gradient(180deg, #EDE6DF 0%, rgba(255, 248, 242, 0.49) 59.615%, rgba(212, 193, 176, 0) 100%); }
  /* Ресурс 2 1: 250×143 at (73,63) */
  .raw2-m-hero .m-logo { left: calc(73 * var(--u)); top: calc(63 * var(--u)); width: calc(250 * var(--u)); height: calc(143 * var(--u)); }
  .raw2-m-hero .m-logo img { width: 100%; height: 100%; max-width: none; }
  /* Vector 58: 49.5×34.5 at (642,117), обводка 2px выходит за рамку → svg 53.5×38.5 at (640,115) */
  .raw2-m-hero .m-burger { left: calc(640 * var(--u)); top: calc(115 * var(--u)); width: calc(53.5 * var(--u)); height: calc(38.5 * var(--u));
    border: 0; background: none; padding: 0; cursor: pointer; z-index: 3; }
  .raw2-m-hero .m-burger::before { content: ''; position: absolute; inset: calc(-24 * var(--u)); }
  .raw2-m-hero .m-burger img { width: 100%; height: 100%; max-width: none; }
  /* Меню бургера — Figma 2522:8327 «Меню» 431×515, r29.5, rgba(30,30,30,.45). Места на экране макет не задаёт:
     под бургером, правый край по карточке (684) → left 253, top 175. Стекло как у карточки. */
  .raw2-m-hero .m-menu-backdrop { position: fixed; inset: 0; z-index: 3; border: 0; padding: 0; background: transparent; cursor: default; }
  .raw2-m-hero .m-menu { left: calc(253 * var(--u)); top: calc(175 * var(--u)); width: calc(431 * var(--u)); height: calc(515 * var(--u)); z-index: 4;
    list-style: none; margin: 0; padding: 0; border-radius: calc(29.5 * var(--u)); background: rgba(30, 30, 30, 0.45);
    -webkit-backdrop-filter: blur(calc(24 * var(--u))); backdrop-filter: blur(calc(24 * var(--u)));
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 calc(8 * var(--u)) calc(32 * var(--u)) rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.25); }
  /* Пункты: Inter 500 32 / 80.53% / −1.6px, белые, правый край текста x 365; «Личный кабинет» по центру x 242.
     Координаты считаются от внутреннего края рамки 1px и подогнаны по рендеру Figma построчно (верх букв ±0.5px). */
  .raw2-m-hero .m-mi { position: absolute; right: calc(67 * var(--u)); display: block; white-space: nowrap; text-align: right;
    color: #fff; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font-family: inherit;
    font-weight: 500; font-size: calc(32 * var(--u)); line-height: 0.8053; letter-spacing: calc(-1.6 * var(--u)); text-transform: none;
    -webkit-tap-highlight-color: transparent; }
  .raw2-m-hero .m-mi::before { content: ''; position: absolute; inset: calc(-22 * var(--u)) calc(-24 * var(--u)); }
  .raw2-m-hero .m-mi-1 { top: calc(56.5 * var(--u)); }
  .raw2-m-hero .m-mi-2 { top: calc(128.5 * var(--u)); }
  .raw2-m-hero .m-mi-3 { top: calc(201.5 * var(--u)); }
  .raw2-m-hero .m-mi-4 { top: calc(276.5 * var(--u)); }
  .raw2-m-hero .m-mi-5 { top: calc(354.5 * var(--u)); }
  .raw2-m-hero .m-mi-6 { top: calc(432.5 * var(--u)); right: auto; left: calc(239 * var(--u)); transform: translateX(-50%); text-align: center; }
  /* «Меню при нажатии» 2522:8335: нажатый пункт Inter 800 36 / 80.53% / −1.8px. .is-pressed ставит React на касание:
     в Safari на iPhone :active без touch-обработчика не срабатывает, а меню закрывается сразу */
  .raw2-m-hero .m-mi.is-pressed, .raw2-m-hero .m-mi:active, .raw2-m-hero .m-mi:focus-visible { font-weight: 800; font-size: calc(36 * var(--u)); letter-spacing: calc(-1.8 * var(--u)); outline: none; }
  /* Rectangle 84: 601×669 at (83,253), r 29.5, rgba(30,30,30,.45) */
  /* Стекло: в рендере Figma фото под карточкой размыто, края светлые. Подобрано сравнением с рендером 4003:179
     (средний цвет и разница по пикселям): blur 24 без saturate и без бликового слоя десктопной .glass */
  .raw2-m-hero .m-card { left: calc(83 * var(--u)); top: calc(253 * var(--u)); width: calc(601 * var(--u)); height: calc(669 * var(--u));
    border-radius: calc(29.5 * var(--u)); background: rgba(30, 30, 30, 0.45); overflow: hidden;
    -webkit-backdrop-filter: blur(calc(24 * var(--u))); backdrop-filter: blur(calc(24 * var(--u)));
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 calc(8 * var(--u)) calc(32 * var(--u)) rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.25); }
  /* Заголовок: (160,319) w453, Inter 700 40 / -2px, uppercase. В макете указано 96.96%, но рендер Figma
     даёт шаг строк 47px (верх заглавных 328/375/422/469) — берём шаг по рендеру. */
  .raw2-m-hero .m-title { left: calc(160 * var(--u)); top: calc(319 * var(--u)); width: calc(453 * var(--u)); margin: 0;
    color: #fff; font-weight: 700; font-size: calc(40 * var(--u)); line-height: calc(47 * var(--u)); letter-spacing: calc(-2 * var(--u)); text-transform: uppercase; }
  .raw2-m-hero .m-title .c-lime { color: var(--lime); }
  /* Подзаголовок: (160,539) w382, Inter 500 24 / 0.975 / -1.2px */
  .raw2-m-hero .m-lede { left: calc(160 * var(--u)); top: calc(539 * var(--u)); width: calc(382 * var(--u)); margin: 0;
    color: #fff; font-weight: 500; font-size: calc(24 * var(--u)); line-height: 0.975; letter-spacing: calc(-1.2 * var(--u)); }
  /* Rectangle 14: 432×115 at (160,659) r34 #CC3A3A; текст x 189, Inter 700 32 / -1.6px uppercase.
     Рендер Figma: верх заглавных 687 и 721 → шаг 34px; слой текста абсолютный, иначе кнопка центрирует его. */
  .raw2-m-hero .m-cta-red { left: calc(160 * var(--u)); top: calc(659 * var(--u)); width: calc(432 * var(--u)); height: calc(115 * var(--u));
    border: 0; border-radius: calc(34 * var(--u)); background: var(--red); color: #fff; cursor: pointer; text-align: left;
    padding: 0; font-family: inherit; font-weight: 700; font-size: calc(32 * var(--u));
    letter-spacing: calc(-1.6 * var(--u)); text-transform: uppercase; transition: background .2s; }
  .raw2-m-hero .m-cta-red > span { position: absolute; left: calc(29 * var(--u)); top: calc(22.64 * var(--u)); width: calc(369 * var(--u)); line-height: calc(34 * var(--u)); }
  .raw2-m-hero .m-cta-red:hover { background: var(--red-hover); }
  /* Rectangle 20: 120.438×31.856 r20.5, поворот 5.2°, центр (501.33, 667.90) */
  .raw2-m-hero .m-free-pill { left: calc(441.111 * var(--u)); top: calc(651.975 * var(--u)); width: calc(120.438 * var(--u)); height: calc(31.856 * var(--u));
    border-radius: calc(20.5 * var(--u)); background: var(--lime); transform: rotate(5.2deg); pointer-events: none; }
  /* «бесплатно»: 88.741×15.928, поворот 5.27°, центр (503.25, 665.33), Inter 500 18 / 1.063 / -0.9px */
  .raw2-m-hero .m-free-text { left: calc(458.884 * var(--u)); top: calc(657.361 * var(--u)); width: calc(88.741 * var(--u)); height: calc(15.928 * var(--u));
    transform: rotate(5.27deg); pointer-events: none; white-space: nowrap; color: var(--ink);
    font-weight: 500; font-size: calc(18 * var(--u)); line-height: 1.063; letter-spacing: calc(-0.9 * var(--u)); }
  /* Rectangle 12: 213×61 at (160,791) r34 lime; «пройти тест» центр x 266.5, Inter 700 28 / 0.975 / -1.4px.
     Рендер Figma: верх строчных букв 815 → слой текста на 16.46 от верха кнопки. */
  .raw2-m-hero .m-test { left: calc(160 * var(--u)); top: calc(791 * var(--u)); width: calc(213 * var(--u)); height: calc(61 * var(--u));
    border: 0; border-radius: calc(34 * var(--u)); background: var(--lime); color: var(--ink); cursor: pointer; text-align: center;
    padding: 0; font-family: inherit; font-weight: 700; font-size: calc(28 * var(--u));
    letter-spacing: calc(-1.4 * var(--u)); text-transform: lowercase; transition: background .2s; }
  .raw2-m-hero .m-test > span { position: absolute; left: 0; right: 0; top: calc(16.46 * var(--u)); line-height: 0.975; white-space: nowrap; }
  /* Ellipse 3: 61×61 at (373,791); стрелка Vector 3 (390,822) w28 → svg 33×36.82 at (387.5, 803.59) */
  .raw2-m-hero .m-arrow { left: calc(373 * var(--u)); top: calc(791 * var(--u)); width: calc(61 * var(--u)); height: calc(61 * var(--u));
    border: 0; border-radius: 50%; background: var(--lime); padding: 0; cursor: pointer; transition: background .2s; }
  .raw2-m-hero .m-arrow img { position: absolute; left: calc(14.5 * var(--u)); top: calc(12.59 * var(--u)); width: calc(33 * var(--u)); height: calc(36.82 * var(--u)); max-width: none; }
  .raw2-m-hero .m-test:hover, .raw2-m-hero .m-arrow:hover { background: var(--lime-deep); }
}

/* ============================================================
   MOBILE SYSTEM — Figma 4005:180 (холст 768×882), те же холст 768px, --u = 1px
   Бейдж 597×138 at (86,77), рамка 4 лайм, r41.5; заголовок Inter 700 40 / 1.173 / −2px, по центру.
   Карточки 348.025×329.835 r29.5, шаг 402.5 (зазор 54.475), верх 384.41; центр активной x 384.5.
   Активная — scale(371/348.025 = 1.066016) с опорой над карточкой (−8.93), чтобы верх стал 385, как в макете;
   её шрифты 35/30 получаются из базовых 32/28 через дополнительный множитель внутри.
   Координаты текста и иконок — от левого верхнего угла карточки в неактивном состоянии.
   «Психолог», «Лекции», «Клубы» — по отдельным рендерам групп 4005:181, 4005:182, 2522:8165 (рамка повёрнутых
   и отражённых слоёв в координатах Figma неверна, иконки выставлены по пикселям рендера).
   ============================================================ */
.raw2-m-system { display: none; }
@media (max-width: 1023px) {
  .raw2-system { display: none; }
  .raw2-m-system { --u: 1px; display: block; position: relative; width: 768px; height: calc(882 * var(--u)); scale: var(--m-k, 1); transform-origin: 0 0; margin: 0 calc(768px * (var(--m-k, 1) - 1)) calc(882px * (var(--m-k, 1) - 1)) 0; background: var(--white); overflow: hidden; }
  .raw2-m-system .m-sys-badge { position: absolute; left: calc(86 * var(--u)); top: calc(77 * var(--u)); width: calc(597 * var(--u)); height: calc(138 * var(--u)); box-sizing: border-box;
    border: calc(4 * var(--u)) solid var(--lime); border-radius: calc(41.5 * var(--u)); }
  .raw2-m-system .m-sys-title { position: absolute; left: calc(132 * var(--u)); top: calc(100 * var(--u)); width: calc(506 * var(--u)); margin: 0; text-align: center;
    color: var(--ink); font-weight: 700; font-size: calc(40 * var(--u)); line-height: 1.173; letter-spacing: calc(-2 * var(--u)); text-transform: uppercase; }
  .raw2-m-system .m-sys-title .c-red { color: var(--red); }
  /* Контейнер прокрутки: от y 270 до 752, чтобы иконки над карточками и увеличенная активная не обрезались */
  .raw2-m-system .m-car { position: absolute; left: 0; top: calc(270 * var(--u)); width: 100%; box-sizing: border-box;
    display: flex; gap: calc(54.475 * var(--u)); padding: calc(114.41 * var(--u)) 0 calc(37.755 * var(--u));
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: calc(1 * var(--u));
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .raw2-m-system .m-car::-webkit-scrollbar { display: none; }
  .raw2-m-system .m-fcard { position: relative; flex: 0 0 calc(348.025 * var(--u)); height: calc(329.835 * var(--u)); border-radius: calc(29.5 * var(--u)); background: var(--lime);
    scroll-snap-align: center; transform-origin: 50% calc(-8.93 * var(--u)); transition: transform .35s cubic-bezier(.16,1,.3,1); }
  .raw2-m-system .m-fcard.active { transform: scale(1.066016); }
  .raw2-m-system .m-ficon { position: absolute; max-width: none; pointer-events: none; user-select: none; }
  .raw2-m-system .m-ficon.ic-act { display: none; }
  .raw2-m-system .m-fcard.active .m-ficon.ic-def { display: none; }
  .raw2-m-system .m-fcard.active .m-ficon.ic-act { display: block; }
  .raw2-m-system .m-fcard h3 { position: absolute; margin: 0; white-space: nowrap; color: var(--ink); text-transform: none;
    font-weight: 700; font-size: calc(32 * var(--u)); line-height: 0.975; letter-spacing: calc(-1.6 * var(--u)); transition: font-size .35s cubic-bezier(.16,1,.3,1), letter-spacing .35s; }
  .raw2-m-system .m-fcard p { position: absolute; margin: 0; white-space: nowrap; color: var(--ink);
    font-weight: 500; font-size: calc(28 * var(--u)); line-height: 0.96; letter-spacing: calc(-1.4 * var(--u)); transition: font-size .35s cubic-bezier(.16,1,.3,1), letter-spacing .35s; }
  .raw2-m-system .m-fcard p b { font-weight: 700; }
  /* Активная: 35/−1.75 и 30/−1.5 после scale → 32.831/−1.6416 и 28.14/−1.40711 до него */
  .raw2-m-system .m-fcard.active h3 { font-size: calc(32.831 * var(--u)); letter-spacing: calc(-1.6416 * var(--u)); }
  .raw2-m-system .m-fcard.active p { font-size: calc(28.14 * var(--u)); letter-spacing: calc(-1.40711 * var(--u)); }
  .raw2-m-system .m-fcard--club h3 { left: calc(34.05 * var(--u)); top: calc(117.72 * var(--u)); }
  .raw2-m-system .m-fcard--club p { left: calc(34.05 * var(--u)); top: calc(213.95 * var(--u)); }
  .raw2-m-system .m-fcard--club .m-ficon { left: calc(87.769 * var(--u)); top: calc(-43.657 * var(--u)); width: calc(169.743 * var(--u)); height: calc(154.274 * var(--u)); }
  .raw2-m-system .m-fcard--cv h3 { left: calc(29.559 * var(--u)); top: calc(120.54 * var(--u)); }
  .raw2-m-system .m-fcard--cv p { left: calc(29.559 * var(--u)); top: calc(173.543 * var(--u)); }
  .raw2-m-system .m-fcard--cv .m-ficon { left: calc(82.991 * var(--u)); top: calc(-95.243 * var(--u)); width: calc(169.135 * var(--u)); height: calc(201.744 * var(--u)); }
  .raw2-m-system .m-fcard--cap h3 { left: calc(33.77 * var(--u)); top: calc(116.22 * var(--u)); }
  .raw2-m-system .m-fcard--cap p { left: calc(33.77 * var(--u)); top: calc(208.56 * var(--u)); }
  .raw2-m-system .m-fcard--cap .m-ficon { left: calc(77.742 * var(--u)); top: calc(-69.231 * var(--u)); width: calc(193.158 * var(--u)); height: calc(155.561 * var(--u)); }
  .raw2-m-system .m-fcard--psy h3 { left: calc(41.33 * var(--u)); top: calc(63.47 * var(--u)); }
  .raw2-m-system .m-fcard--psy p { left: calc(41.08 * var(--u)); top: calc(152.82 * var(--u)); }
  .raw2-m-system .m-fcard--psy .m-ficon { left: calc(73.860 * var(--u)); top: calc(-93.759 * var(--u)); width: calc(184.28 * var(--u)); height: calc(172.519 * var(--u)); }
  .raw2-m-system .m-fcard--lect h3 { left: calc(40.75 * var(--u)); top: calc(124.47 * var(--u)); }
  .raw2-m-system .m-fcard--lect p { left: calc(40.75 * var(--u)); top: calc(185.54 * var(--u)); }
  .raw2-m-system .m-fcard--lect .m-ficon { left: calc(78.989 * var(--u)); top: calc(-65.4 * var(--u)); width: calc(191.101 * var(--u)); height: calc(184.54 * var(--u)); }
}

/* ============================================================
   MOBILE QUIZ CTA — Figma 4006:184 (холст 768×1019, красный фон), холст 768px, --u = 1px
   Карточка 620×791 at (74,114) r29.5; заголовок Inter 700 40 / 1.173 / −2px по центру (top 177);
   «Level up или stay raw?» Inter 28 / 1.113 / −1.4px (top 305); текст слева Inter 500 24 / −1.2px (185, 393);
   показатели: иконки Figma 57.6×52 / 62×52 / 48.17×55, числа Inter 700 40, подписи Inter 500 15 / −0.75px;
   Шаг строк по рендеру Figma: текст слева 23px, подписи и нижняя подпись 17px, числа ниже на 4 (указанные проценты он рисует крупнее).
   подпись Inter 500 15 rgba(0,0,0,.7) по центру (top 695); кнопка 327×76 r50 at (221,752), текст Inter 700 35 / −1.75px.
   ============================================================ */
.raw2-m-quiz { display: none; }
@media (max-width: 1023px) {
  .raw2-quiz { display: none; }
  .raw2-m-quiz { --u: 1px; display: block; position: relative; width: 768px; height: calc(1019 * var(--u)); scale: var(--m-k, 1); transform-origin: 0 0; margin: 0 calc(768px * (var(--m-k, 1) - 1)) calc(1019px * (var(--m-k, 1) - 1)) 0; background: var(--red); overflow: hidden; }
  .raw2-m-quiz > * { position: absolute; margin: 0; }
  .raw2-m-quiz .m-q-card { left: calc(74 * var(--u)); top: calc(114 * var(--u)); width: calc(620 * var(--u)); height: calc(791 * var(--u)); border-radius: calc(29.5 * var(--u)); background: var(--white); }
  .raw2-m-quiz .m-q-title { left: calc(200 * var(--u)); top: calc(177 * var(--u)); width: calc(369 * var(--u)); text-align: center; color: var(--ink);
    font-weight: 700; font-size: calc(40 * var(--u)); line-height: 1.173; letter-spacing: calc(-2 * var(--u)); text-transform: uppercase; }
  .raw2-m-quiz .m-q-title .c-red { color: var(--red); }
  /* Строки — блоки с явной высотой: iOS Safari округляет дробный line-height вниз (11.7 → 11), и многострочный текст сжимается */
  .raw2-m-quiz .ln { display: block; }
  .raw2-m-quiz .m-q-title .ln { height: calc(46.92 * var(--u)); }
  .raw2-m-quiz .m-q-desc .ln { height: calc(23 * var(--u)); }
  .raw2-m-quiz .m-q-lbl .ln, .raw2-m-quiz .m-q-sub .ln { height: calc(17 * var(--u)); }
  .raw2-m-quiz .m-q-lvl { left: calc(223 * var(--u)); top: calc(305 * var(--u)); width: calc(323 * var(--u)); text-align: center; color: var(--ink); white-space: nowrap;
    font-weight: 500; font-size: calc(28 * var(--u)); line-height: 1.113; letter-spacing: calc(-1.4 * var(--u)); text-transform: none; }
  .raw2-m-quiz .m-q-lvl b { font-weight: 700; }
  .raw2-m-quiz .m-q-lvl .up { color: var(--lime-dark); }
  .raw2-m-quiz .m-q-lvl .raw { color: var(--red); }
  .raw2-m-quiz .m-q-desc { left: calc(185 * var(--u)); top: calc(392.6 * var(--u)); white-space: nowrap; color: var(--ink);
    font-weight: 500; font-size: calc(24 * var(--u)); line-height: calc(23 * var(--u)); letter-spacing: calc(-1.2 * var(--u)); text-transform: none; }
  .raw2-m-quiz .m-q-desc b { color: var(--red); font-weight: 700; }
  .raw2-m-quiz .m-q-ic { max-width: none; }
  /* Vector 49.6×44 at (427.977, 399) + inset −9.09% −8.07% → svg 57.6×52 at (423.977, 395) */
  .raw2-m-quiz .m-q-ic--q { left: calc(423.977 * var(--u)); top: calc(395 * var(--u)); width: calc(57.6016 * var(--u)); height: calc(51.9987 * var(--u)); }
  .raw2-m-quiz .m-q-qmark { left: calc(444.67 * var(--u)); top: calc(402.69 * var(--u)); color: var(--red); font-weight: 500; font-size: calc(36 * var(--u)); line-height: calc(29 * var(--u)); letter-spacing: calc(-1.8 * var(--u)); }
  /* Vector 54×44 at (426, 485.715) + inset −9.1% −7.41% → svg 62×52 at (422, 481.711) */
  .raw2-m-quiz .m-q-ic--heart { left: calc(422 * var(--u)); top: calc(481.711 * var(--u)); width: calc(61.9996 * var(--u)); height: calc(52.0038 * var(--u)); }
  .raw2-m-quiz .m-q-ic--timer { left: calc(428.713 * var(--u)); top: calc(564.715 * var(--u)); width: calc(48.1706 * var(--u)); height: calc(55 * var(--u)); }
  .raw2-m-quiz .m-q-num { left: calc(505 * var(--u)); color: var(--ink); font-weight: 700; font-size: calc(40 * var(--u)); line-height: 0.8053; letter-spacing: calc(-2 * var(--u)); }
  .raw2-m-quiz .m-q-num--1 { top: calc(393 * var(--u)); }
  .raw2-m-quiz .m-q-num--2 { top: calc(480 * var(--u)); }
  .raw2-m-quiz .m-q-num--3 { top: calc(564 * var(--u)); }
  .raw2-m-quiz .m-q-lbl { left: calc(507 * var(--u)); color: var(--ink); white-space: nowrap; font-weight: 500; font-size: calc(15 * var(--u)); line-height: calc(17 * var(--u)); letter-spacing: calc(-0.75 * var(--u)); }
  .raw2-m-quiz .m-q-lbl--1 { top: calc(435.4 * var(--u)); }
  .raw2-m-quiz .m-q-lbl--2 { top: calc(522.4 * var(--u)); }
  .raw2-m-quiz .m-q-lbl--3 { top: calc(606.4 * var(--u)); }
  .raw2-m-quiz .m-q-sub { left: calc(221 * var(--u)); top: calc(695.4 * var(--u)); width: calc(326 * var(--u)); text-align: center; white-space: nowrap; color: rgba(0, 0, 0, 0.7);
    font-weight: 500; font-size: calc(15 * var(--u)); line-height: calc(17 * var(--u)); letter-spacing: calc(-0.75 * var(--u)); text-transform: none; }
  .raw2-m-quiz .m-q-btn { left: calc(221 * var(--u)); top: calc(752 * var(--u)); width: calc(327 * var(--u)); height: calc(76 * var(--u)); padding: 0; border: 0; border-radius: calc(50 * var(--u));
    background: var(--red); color: #fff; cursor: pointer; font-family: inherit; font-weight: 700; font-size: calc(35 * var(--u)); letter-spacing: calc(-1.75 * var(--u));
    text-transform: uppercase; transition: background .2s; }
  .raw2-m-quiz .m-q-btn:hover { background: var(--red-hover); }
  .raw2-m-quiz .m-q-btn > span { position: absolute; left: 0; right: 0; top: calc(21 * var(--u)); line-height: 0.975; text-align: center; white-space: nowrap; }
}

/* ============================================================
   MOBILE FOUNDER — Figma 4009:185 (холст 768×1266), холст 768px, --u = 1px
   Фото: слой 1559×1321 at (−507,−55) → founder-m.webp (видимые 768×1266, ×2). Blur слоя в рендере Figma не виден: фон размыт в самой фотографии.
   Затемнение 1171×1307 at (−395,−41): к левому краю rgba(0,0,0,.53).
   Рамка заголовка 420×251 at (90,79), 4 лайм, r29.5; заголовок Inter 700 40 / 1.173 / −2px (127,110 — по рендеру).
   Карточки 420 шириной at x 90: зелёные rgba(146,157,79,.39) 372 (y354) и 98 (y750), тёмная rgba(30,30,30,.58) 278 (y882), r29.5.
   Текст Inter 500 24 / −1.2px; маркеры — белые круги 8×8 at x 121. Ярлыки — центры и углы из Figma,
   текст в плашках доведён по центру масс букв в рендере Figma.
   ============================================================ */
.raw2-m-founder { display: none; }
@media (max-width: 1023px) {
  .raw2-founder { display: none; }
  .raw2-m-founder { --u: 1px; display: block; position: relative; width: 768px; height: calc(1266 * var(--u)); scale: var(--m-k, 1); transform-origin: 0 0; margin: 0 calc(768px * (var(--m-k, 1) - 1)) calc(1266px * (var(--m-k, 1) - 1)) 0; background: #1a1714; overflow: hidden; color: #fff; }
  .raw2-m-founder > * { position: absolute; margin: 0; }
  .raw2-m-founder .m-f-photo { left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
  /* Затемнение 1171 шириной at x −395 обрезано до холста 0…768 с тем же наклоном: слой за краем блока ломает размытие карточек в iOS Safari */
  .raw2-m-founder .m-f-shade { left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to left, rgba(0, 0, 0, 0.0036) 0%, rgba(0, 0, 0, 0.3512) 100%); pointer-events: none; }
  .raw2-m-founder .m-f-badge { left: calc(90 * var(--u)); top: calc(79 * var(--u)); width: calc(420 * var(--u)); height: calc(251 * var(--u)); box-sizing: border-box; border: calc(4 * var(--u)) solid var(--lime); border-radius: calc(29.5 * var(--u)); }
  .raw2-m-founder .m-f-title { left: calc(127 * var(--u)); top: calc(110 * var(--u)); white-space: nowrap; color: #fff; font-weight: 700; font-size: calc(40 * var(--u)); line-height: 1.173; letter-spacing: calc(-2 * var(--u)); text-transform: uppercase; }
  .raw2-m-founder .m-f-title .c-lime { color: var(--lime); }
  /* Строки — блоки с явной высотой: iOS Safari округляет дробный line-height вниз, и текст уезжает от маркеров */
  .raw2-m-founder .ln { display: block; }
  .raw2-m-founder .m-f-title .ln { height: calc(46.92 * var(--u)); }
  .raw2-m-founder .m-f-text .ln { height: calc(23.04 * var(--u)); }
  /* В рендере Figma фото под карточками размыто (эффект не выгружается в код): blur 10 — лучшее совпадение фона; рамке заголовка размытия нет */
  .raw2-m-founder .m-f-card { left: calc(90 * var(--u)); width: calc(420 * var(--u)); border-radius: calc(29.5 * var(--u)); -webkit-backdrop-filter: blur(calc(10 * var(--u))); backdrop-filter: blur(calc(10 * var(--u))); }
  .raw2-m-founder .m-f-card--1 { top: calc(354 * var(--u)); height: calc(372 * var(--u)); background: rgba(146, 157, 79, 0.39); }
  .raw2-m-founder .m-f-card--2 { top: calc(750 * var(--u)); height: calc(98 * var(--u)); background: rgba(146, 157, 79, 0.39); }
  .raw2-m-founder .m-f-card--3 { top: calc(882 * var(--u)); height: calc(278 * var(--u)); background: rgba(30, 30, 30, 0.58); }
  .raw2-m-founder .m-f-text { white-space: nowrap; color: #fff; font-weight: 500; font-size: calc(24 * var(--u)); line-height: 0.96; letter-spacing: calc(-1.2 * var(--u)); text-transform: none; }
  .raw2-m-founder .m-f-text b { font-weight: 700; }
  .raw2-m-founder .m-f-text b.lime { color: var(--lime); }
  .raw2-m-founder .m-f-text b.red { color: var(--red); }
  .raw2-m-founder .m-f-text--1 { left: calc(127 * var(--u)); top: calc(391 * var(--u)); }
  .raw2-m-founder .m-f-text--2 { left: calc(129 * var(--u)); top: calc(776 * var(--u)); }
  .raw2-m-founder .m-f-text--3 { left: calc(129 * var(--u)); top: calc(918 * var(--u)); }
  .raw2-m-founder .m-f-dot { left: calc(121 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #fff; }
  .raw2-m-founder .m-f-dot--1 { top: calc(400 * var(--u)); }
  .raw2-m-founder .m-f-dot--2 { top: calc(605 * var(--u)); }
  .raw2-m-founder .m-f-dot--3 { top: calc(785 * var(--u)); }
  .raw2-m-founder .m-f-dot--4 { top: calc(927 * var(--u)); }
  .raw2-m-founder .m-f-dot--5 { top: calc(1042 * var(--u)); }
  .raw2-m-founder .m-f-tag-name { left: calc(476.2845 * var(--u)); top: calc(572.8375 * var(--u)); width: calc(218.819 * var(--u)); height: calc(53.713 * var(--u)); transform: rotate(-3.08deg); border-radius: calc(29.5 * var(--u)); background: var(--red); }
  .raw2-m-founder .m-f-tag-name-text { left: calc(497.642 * var(--u)); top: calc(588.873 * var(--u)); width: calc(178.608 * var(--u)); height: calc(26.857 * var(--u)); transform: rotate(-3.01deg); color: #fff; font-weight: 700; font-size: calc(24 * var(--u)); line-height: 0.8782; letter-spacing: calc(-1.2 * var(--u)); white-space: nowrap; }
  .raw2-m-founder .m-f-tag-mission { left: calc(417.385 * var(--u)); top: calc(718.146 * var(--u)); width: calc(291.351 * var(--u)); height: calc(53.774 * var(--u)); transform: rotate(5.24deg) skewX(-1.15deg); border-radius: calc(29.5 * var(--u)); background: var(--lime); }
  .raw2-m-founder .m-f-tag-mission-text { left: calc(441.173 * var(--u)); top: calc(737.254 * var(--u)); width: calc(290.329 * var(--u)); height: calc(26.888 * var(--u)); transform: rotate(5.3deg) skewX(-1.16deg); color: var(--ink); font-weight: 700; font-size: calc(20 * var(--u)); line-height: 1.063; letter-spacing: calc(-1 * var(--u)); white-space: nowrap; }
  .raw2-m-founder .m-f-tag-mi { left: calc(621.6495 * var(--u)); top: calc(705.0405 * var(--u)); width: calc(95.619 * var(--u)); height: calc(32.919 * var(--u)); transform: rotate(15.31deg); border-radius: calc(20.5 * var(--u)); background: var(--red); box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25); }
  .raw2-m-founder .m-f-tag-mi-text { left: calc(639.472 * var(--u)); top: calc(712.049 * var(--u)); width: calc(71.2 * var(--u)); height: calc(17.928 * var(--u)); transform: rotate(15.38deg); color: #fff; font-weight: 500; font-size: calc(18 * var(--u)); line-height: 1.063; letter-spacing: calc(-0.9 * var(--u)); white-space: nowrap; }
}

/* ============================================================
   MOBILE FREE FIRST LESSON — Figma 4009:188 (холст 768×1832, лаймовый фон), холст 768px, --u = 1px
   Рамка заголовка 520.684×138 at (124.598, 88), 4 чёрная, r41.5; заголовок Inter 700 40 / −2px по центру (115, 110, w539).
   Карточки 620×344 at x 74, r29.5: y 275 / 656 / 1037 / 1418; фото free-m-N.webp — видимая часть из макета (×2).
   Плашка rgba(30,30,30,.51) 553×95/97 at (27, 34) внутри карточки, r29.5. Текст Inter 500 24 / 0.96 / −1.2px, белый, по центру;
   заголовок и тексты плашек сдвинуты по центру масс букв в рендере Figma.
   ============================================================ */
.raw2-m-free { display: none; }
@media (max-width: 1023px) {
  .raw2-free { display: none; }
  .raw2-m-free { --u: 1px; display: block; position: relative; width: 768px; height: calc(1832 * var(--u)); scale: var(--m-k, 1); transform-origin: 0 0; margin: 0 calc(768px * (var(--m-k, 1) - 1)) calc(1832px * (var(--m-k, 1) - 1)) 0; background: var(--lime); overflow: hidden; }
  .raw2-m-free > * { position: absolute; margin: 0; }
  .raw2-m-free .m-fr-badge { left: calc(124.598 * var(--u)); top: calc(88 * var(--u)); width: calc(520.684 * var(--u)); height: calc(138 * var(--u)); box-sizing: border-box; border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(41.5 * var(--u)); }
  .raw2-m-free .m-fr-title { left: calc(111.7 * var(--u)); top: calc(110 * var(--u)); width: calc(539 * var(--u)); text-align: center; white-space: nowrap; color: var(--ink);
    font-weight: 700; font-size: calc(40 * var(--u)); line-height: 1.173; letter-spacing: calc(-2 * var(--u)); text-transform: uppercase; }
  .raw2-m-free .m-fr-title .c-red { color: var(--red); }
  .raw2-m-free .m-fr-card { left: calc(74 * var(--u)); width: calc(620 * var(--u)); height: calc(344 * var(--u)); border-radius: calc(29.5 * var(--u)); overflow: hidden; background: #fff; }
  .raw2-m-free .m-fr-card > * { position: absolute; margin: 0; }
  .raw2-m-free .m-fr-photo { left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
  /* В рендере Figma фото под плашками размыто (в код не выгружается): blur 10 — лучшее совпадение фона без букв */
  .raw2-m-free .m-fr-plate { left: calc(27 * var(--u)); top: calc(34 * var(--u)); width: calc(553 * var(--u)); border-radius: calc(29.5 * var(--u)); background: rgba(30, 30, 30, 0.51); -webkit-backdrop-filter: blur(calc(10 * var(--u))); backdrop-filter: blur(calc(10 * var(--u))); }
  .raw2-m-free .m-fr-text { text-align: center; white-space: nowrap; color: #fff; font-weight: 500; font-size: calc(24 * var(--u)); line-height: 0.96; letter-spacing: calc(-1.2 * var(--u)); text-transform: none; }
  .raw2-m-free .m-fr-text b { color: var(--lime); font-weight: 700; }
  .raw2-m-free .m-fr-card--1 { top: calc(275 * var(--u)); }
  .raw2-m-free .m-fr-card--1 .m-fr-plate { height: calc(95 * var(--u)); }
  .raw2-m-free .m-fr-card--1 .m-fr-text { left: calc(179 * var(--u)); width: calc(260 * var(--u)); top: calc(60 * var(--u)); }
  .raw2-m-free .m-fr-card--2 { top: calc(656 * var(--u)); }
  .raw2-m-free .m-fr-card--2 .m-fr-plate { height: calc(97 * var(--u)); }
  .raw2-m-free .m-fr-card--2 .m-fr-text { left: calc(124.7 * var(--u)); width: calc(365 * var(--u)); top: calc(61 * var(--u)); }
  .raw2-m-free .m-fr-card--3 { top: calc(1037 * var(--u)); }
  .raw2-m-free .m-fr-card--3 .m-fr-plate { height: calc(97 * var(--u)); }
  .raw2-m-free .m-fr-card--3 .m-fr-text { left: calc(149.9 * var(--u)); width: calc(314 * var(--u)); top: calc(59 * var(--u)); }
  .raw2-m-free .m-fr-card--4 { top: calc(1418 * var(--u)); }
  .raw2-m-free .m-fr-card--4 .m-fr-plate { height: calc(97 * var(--u)); }
  .raw2-m-free .m-fr-card--4 .m-fr-text { left: calc(33.4 * var(--u)); width: calc(531 * var(--u)); top: calc(60 * var(--u)); }
}

/* ============================================================
   MOBILE PRICING — Figma 4012:190 (холст 768×2235), холст 768px, --u = 1px
   Фон price-bg-m.webp — видимая часть слоя 795×2273 at (−15, 1). Рамка «Цены» 280×83 at (244, 98), 4 лайм, r41.5.
   Карточки 620 шириной at x 74, r29.5: лаймовые rgba(223,237,140,.69) 535 (y252, y832), красная rgba(204,58,58,.69) 604 (y1412).
   Названия Inter 700 32 / −1.6px uppercase; тексты Inter 500 32 / −1.6px по центру (135, w498); маркеры 11.5.
   Шаг строк по рендеру Figma 31px (указанные 80.6% он рисует крупнее); хвостовые пробелы строк из макета повторены неразрывными — от них зависит центровка.
   Белые плашки цен 274×74 r55 at (247, 672/1252), текст Inter 500 36 / −1.8px; «1.500 ₽» — лаймовая плашка с огнями из Figma и Inter 700 48.
   Кнопка 342×119 r59.433 at (225, 2071), текст Inter 700 35 / 0.975 / −1.75px.
   ============================================================ */
.raw2-m-price { display: none; }
@media (max-width: 1023px) {
  .raw2-price { display: none; }
  .raw2-m-price { --u: 1px; display: block; position: relative; width: 768px; height: calc(2235 * var(--u)); scale: var(--m-k, 1); transform-origin: 0 0; margin: 0 calc(768px * (var(--m-k, 1) - 1)) calc(2235px * (var(--m-k, 1) - 1)) 0; background: #3a332c; overflow: hidden; }
  .raw2-m-price > * { position: absolute; margin: 0; }
  .raw2-m-price .m-p-photo { left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
  .raw2-m-price .m-p-badge { left: calc(244 * var(--u)); top: calc(98 * var(--u)); width: calc(280 * var(--u)); height: calc(83 * var(--u)); box-sizing: border-box; border: calc(4 * var(--u)) solid var(--lime); border-radius: calc(41.5 * var(--u)); }
  .raw2-m-price .m-p-title { left: calc(318.1 * var(--u)); top: calc(116.708 * var(--u)); width: calc(129.018 * var(--u)); text-align: center; white-space: nowrap; color: #fff;
    font-weight: 700; font-size: calc(40 * var(--u)); line-height: 1.173; letter-spacing: calc(-2 * var(--u)); text-transform: uppercase; }
  /* Размытие под карточками подобрано по фону без букв: 6 (фон и так размыт, эффект слабый) */
  .raw2-m-price .m-p-card { left: calc(74 * var(--u)); width: calc(620 * var(--u)); border-radius: calc(29.5 * var(--u)); -webkit-backdrop-filter: blur(calc(6 * var(--u))); backdrop-filter: blur(calc(6 * var(--u))); }
  .raw2-m-price .m-p-card--1 { top: calc(252 * var(--u)); height: calc(535 * var(--u)); background: rgba(223, 237, 140, 0.69); }
  .raw2-m-price .m-p-card--2 { top: calc(832 * var(--u)); height: calc(535 * var(--u)); background: rgba(223, 237, 140, 0.69); }
  .raw2-m-price .m-p-card--3 { top: calc(1412 * var(--u)); height: calc(604 * var(--u)); background: rgba(204, 58, 58, 0.69); }
  .raw2-m-price .m-p-name { text-align: center; white-space: nowrap; color: var(--ink); font-weight: 700; font-size: calc(32 * var(--u)); line-height: calc(30.77 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); text-transform: uppercase; }
  .raw2-m-price .m-p-name--1 { left: calc(236 * var(--u)); top: calc(293.6 * var(--u)); width: calc(296.09 * var(--u)); }
  .raw2-m-price .m-p-name--2 { left: calc(233.4 * var(--u)); top: calc(873.6 * var(--u)); width: calc(296.09 * var(--u)); }
  .raw2-m-price .m-p-name--3 { left: calc(129 * var(--u)); top: calc(1453.6 * var(--u)); width: calc(505 * var(--u)); color: #f5f6f7; }
  .raw2-m-price .m-p-body { left: calc(135 * var(--u)); width: calc(498 * var(--u)); text-align: center; white-space: nowrap; color: var(--ink); font-weight: 500; font-size: calc(32 * var(--u)); line-height: calc(31 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); text-transform: none; }
  .raw2-m-price .m-p-body b { font-weight: 700; }
  /* Строки — блоки с явной высотой: iOS Safari округляет дробный line-height вниз, и текст уезжает от маркеров */
  .raw2-m-price .m-p-l { display: block; height: calc(31 * var(--u)); }
  .raw2-m-price .ln { display: block; }
  .raw2-m-price .m-p-name .ln { height: calc(30.77 * var(--u)); }
  .raw2-m-price .m-p-cta .ln { height: calc(34.125 * var(--u)); }
  /* Сдвиг строк по центру букв в рендере Figma: там в строках хвостовые пробелы, которые смещают центровку */
  .raw2-m-price .m-p-l--1-1 { transform: translateX(calc(-6.50 * var(--u))); }
  .raw2-m-price .m-p-l--1-2 { transform: translateX(calc(-0.50 * var(--u))); }
  .raw2-m-price .m-p-l--1-3 { transform: translateX(calc(-4.00 * var(--u))); }
  .raw2-m-price .m-p-l--1-4 { transform: translateX(calc(-1.00 * var(--u))); }
  .raw2-m-price .m-p-l--1-5 { transform: translateX(calc(-4.00 * var(--u))); }
  .raw2-m-price .m-p-l--1-6 { transform: translateX(calc(-0.50 * var(--u))); }
  .raw2-m-price .m-p-l--2-1 { transform: translateX(calc(-8.00 * var(--u))); }
  .raw2-m-price .m-p-l--2-2 { transform: translateX(calc(-4.00 * var(--u))); }
  .raw2-m-price .m-p-l--2-3 { transform: translateX(calc(-8.00 * var(--u))); }
  .raw2-m-price .m-p-l--2-4 { transform: translateX(calc(-4.50 * var(--u))); }
  .raw2-m-price .m-p-l--2-5 { transform: translateX(calc(-7.50 * var(--u))); }
  .raw2-m-price .m-p-l--2-6 { transform: translateX(calc(-0.50 * var(--u))); }
  .raw2-m-price .m-p-l--3-1 { transform: translateX(calc(-8.00 * var(--u))); }
  .raw2-m-price .m-p-l--3-2 { transform: translateX(calc(-4.50 * var(--u))); }
  .raw2-m-price .m-p-l--3-3 { transform: translateX(calc(-4.00 * var(--u))); }
  .raw2-m-price .m-p-l--3-4 { transform: translateX(calc(-7.50 * var(--u))); }
  .raw2-m-price .m-p-l--3-5 { transform: translateX(calc(-4.00 * var(--u))); }
  .raw2-m-price .m-p-l--3-6 { transform: translateX(calc(-7.50 * var(--u))); }
  .raw2-m-price .m-p-l--3-7 { transform: translateX(calc(-0.50 * var(--u))); }
  .raw2-m-price .m-p-body--1 { top: calc(369.3 * var(--u)); }
  .raw2-m-price .m-p-body--2 { top: calc(949.3 * var(--u)); }
  .raw2-m-price .m-p-body--3 { top: calc(1560.3 * var(--u)); color: #f5f6f7; }
  .raw2-m-price .m-p-dot { width: calc(11.5 * var(--u)); height: calc(11.5 * var(--u)); border-radius: 50%; background: var(--ink); }
  .raw2-m-price .m-p-dot--light { background: #fff; }
  .raw2-m-price .m-p-dot--1 { left: calc(200 * var(--u)); top: calc(379 * var(--u)); }
  .raw2-m-price .m-p-dot--2 { left: calc(230 * var(--u)); top: calc(473 * var(--u)); }
  .raw2-m-price .m-p-dot--3 { left: calc(200 * var(--u)); top: calc(564 * var(--u)); }
  .raw2-m-price .m-p-dot--4 { left: calc(144 * var(--u)); top: calc(959 * var(--u)); }
  .raw2-m-price .m-p-dot--5 { left: calc(158 * var(--u)); top: calc(1052 * var(--u)); }
  .raw2-m-price .m-p-dot--6 { left: calc(154 * var(--u)); top: calc(1146 * var(--u)); }
  .raw2-m-price .m-p-dot--7 { left: calc(232 * var(--u)); top: calc(1572 * var(--u)); }
  .raw2-m-price .m-p-dot--8 { left: calc(164 * var(--u)); top: calc(1663 * var(--u)); }
  .raw2-m-price .m-p-dot--9 { left: calc(187 * var(--u)); top: calc(1787 * var(--u)); }
  .raw2-m-price .m-p-pill { left: calc(247 * var(--u)); width: calc(274 * var(--u)); height: calc(74 * var(--u)); border-radius: calc(55 * var(--u)); background: #fff; }
  .raw2-m-price .m-p-pill--1 { top: calc(672 * var(--u)); }
  .raw2-m-price .m-p-pill--2 { top: calc(1252 * var(--u)); }
  .raw2-m-price .m-p-pill-text { left: calc(264 * var(--u)); width: calc(239 * var(--u)); text-align: center; white-space: nowrap; color: var(--ink); font-weight: 500; font-size: calc(36 * var(--u)); line-height: 1.173; letter-spacing: calc(-1.8 * var(--u)); }
  .raw2-m-price .m-p-pill-text--1 { top: calc(689 * var(--u)); }
  .raw2-m-price .m-p-pill-text--2 { top: calc(1269 * var(--u)); }
  .raw2-m-price .m-p-hot { left: calc(201 * var(--u)); top: calc(1890 * var(--u)); width: calc(366.192 * var(--u)); height: calc(85 * var(--u)); max-width: none; }
  .raw2-m-price .m-p-hot-text { left: calc(300.1 * var(--u)); top: calc(1905.647 * var(--u)); width: calc(166.965 * var(--u)); text-align: center; white-space: nowrap; color: var(--ink);
    font-weight: 700; font-size: calc(48 * var(--u)); line-height: 1.173; letter-spacing: calc(-2.4 * var(--u)); text-transform: uppercase; }
  /* в макете кнопка на 12px правее центра (x 225) — ставим по центру, как карточки */
  .raw2-m-price .m-p-cta { left: calc(213 * var(--u)); top: calc(2071 * var(--u)); width: calc(342 * var(--u)); height: calc(119 * var(--u)); padding: 0; border: 0; border-radius: calc(59.433 * var(--u));
    background: var(--red); color: #fff; cursor: pointer; font-family: inherit; font-weight: 700; font-size: calc(35 * var(--u)); letter-spacing: calc(-1.75 * var(--u)); transition: background .2s; }
  .raw2-m-price .m-p-cta:hover { background: var(--red-hover); }
  .raw2-m-price .m-p-cta > span { position: absolute; left: calc(31 * var(--u)); top: calc(25 * var(--u)); width: calc(279 * var(--u)); line-height: 0.975; text-align: center; white-space: nowrap; }
}

/* ============================================================
   MOBILE FAQ — Figma 4012:191 (холст 768, в макете открыт 4-й вопрос, высота 1011), холст 768px, --u = 1px
   Рамка 597×83 at (86, 49), 4 лайм, r41.5; заголовок Inter 700 40 / 1.173 / −2px по центру (132, 67, w506).
   Маскот 601×719.737, поворот 8.16°, центр (689, 582) — по пикселям рендера (рамка повёрнутого слоя в Figma неверна). Карточки вопросов h116 r29.5 at x 74: y 181 / 322 / 466 / 605,
   ширины 496 / 515 / 588 / 494; вопрос Inter 600 36 / −1.8px at x +33. Открытая: лайм, плашка ответа rgba(223,237,140,.29)
   на 1px ниже верха карточки, текст Inter 500 24 / −1.2px белый at (+33, +130), стрелка 48×22 at (+421, +139), низ +23.
   Шаг строк по рендеру Figma: вопросы 35px, ответ 27px (указанные проценты он рисует крупнее).
   ============================================================ */
.raw2-m-faq { display: none; }
@media (max-width: 1023px) {
  .raw2-faq { display: none; }
  .raw2-m-faq { --u: 1px; display: block; position: relative; width: 768px; box-sizing: border-box; scale: var(--m-k, 1); transform-origin: 0 0; margin: 0 calc(768px * (var(--m-k, 1) - 1)) calc(1011px * (var(--m-k, 1) - 1)) 0; padding: calc(181 * var(--u)) 0 calc(90 * var(--u)); background: var(--red); overflow: hidden; }
  .raw2-m-faq .m-faq-mascot { position: absolute; left: calc(388.5 * var(--u)); top: calc(222.13 * var(--u)); width: calc(601 * var(--u)); height: calc(719.737 * var(--u)); max-width: none; transform: rotate(8.16deg); pointer-events: none; }
  .raw2-m-faq .m-faq-badge { position: absolute; left: calc(86 * var(--u)); top: calc(49 * var(--u)); width: calc(597 * var(--u)); height: calc(83 * var(--u)); box-sizing: border-box; border: calc(4 * var(--u)) solid var(--lime); border-radius: calc(41.5 * var(--u)); }
  .raw2-m-faq .m-faq-title { position: absolute; left: calc(132 * var(--u)); top: calc(67 * var(--u)); width: calc(506 * var(--u)); margin: 0; text-align: center; white-space: nowrap; color: #fff;
    font-weight: 700; font-size: calc(40 * var(--u)); line-height: 1.173; letter-spacing: calc(-2 * var(--u)); text-transform: uppercase; }
  .raw2-m-faq .m-faq-list { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding-left: calc(74 * var(--u)); }
  .raw2-m-faq .m-faq-item { position: relative; }
  .raw2-m-faq .m-faq-q { position: relative; z-index: 2; display: block; width: 100%; height: calc(116 * var(--u)); padding: 0; border: 0; border-radius: calc(29.5 * var(--u));
    background: #fff; color: var(--ink); cursor: pointer; text-align: left; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: background .2s; }
  .raw2-m-faq .m-faq-item.open .m-faq-q { background: var(--lime); }
  .raw2-m-faq .m-faq-q > span { position: absolute; left: calc(33 * var(--u)); white-space: nowrap; font-weight: 600; font-size: calc(36 * var(--u)); line-height: calc(35 * var(--u)); letter-spacing: calc(-1.8 * var(--u)); }
  .raw2-m-faq .m-faq-a { position: relative; z-index: 1; margin-top: calc(-115 * var(--u)); box-sizing: border-box; width: 100%; padding: calc(129.7 * var(--u)) calc(20 * var(--u)) calc(23.3 * var(--u)) calc(33 * var(--u));
    border-radius: calc(29.5 * var(--u)); background: rgba(223, 237, 140, 0.29); }
  .raw2-m-faq .m-faq-a-text { margin: 0; max-width: calc(441 * var(--u)); color: #fff; font-weight: 500; font-size: calc(24 * var(--u)); line-height: calc(27 * var(--u)); letter-spacing: calc(-1.2 * var(--u)); text-transform: none; }
  /* Место под стрелку: она на 388…436 по x и 9…31 по y от начала текста; автоматические ответы обтекают её, строки макета короче и не сдвигаются */
  .raw2-m-faq .m-faq-a-gap { float: right; width: calc(61 * var(--u)); height: calc(32 * var(--u)); }
  .raw2-m-faq .m-faq-chev { position: absolute; left: calc(421 * var(--u)); top: calc(139 * var(--u)); width: calc(48.0007 * var(--u)); height: calc(22.0003 * var(--u)); max-width: none; }
  .raw2-m-faq .m-faq-item--1 { width: calc(496 * var(--u)); }
  .raw2-m-faq .m-faq-item--1 .m-faq-q > span { top: calc(23 * var(--u)); }
  .raw2-m-faq .m-faq-item--2 { width: calc(515 * var(--u)); margin-top: calc(25 * var(--u)); }
  .raw2-m-faq .m-faq-item--2 .m-faq-q > span { top: calc(26 * var(--u)); }
  .raw2-m-faq .m-faq-item--3 { width: calc(588 * var(--u)); margin-top: calc(28 * var(--u)); }
  .raw2-m-faq .m-faq-item--3 .m-faq-q > span { top: calc(25 * var(--u)); }
  .raw2-m-faq .m-faq-item--4 { width: calc(494 * var(--u)); margin-top: calc(23 * var(--u)); }
  .raw2-m-faq .m-faq-item--4 .m-faq-q > span { top: calc(24 * var(--u)); }
}

/* ============================================================
   MOBILE CONTACT — Figma 4014:193 (холст 768×815, лаймовый фон), холст 768px, --u = 1px
   Заголовок Inter 500 36 / 0.975 / −1.8px по центру (138, 68, w492). Поля 578×68 r34 белые at x 95: y 200 / 293 / 386 / 479 (последнее x 96),
   подсказки Inter 500 30 / −1.5px rgba(30,30,30,.7) по центру. Кнопка 240×68 r34 at (264, 621), Inter 700 32 / −1.6px.
   Подпись Inter italic 400 20 / 0.975 / −1px rgba(30,30,30,.7) по центру (170, 711, w429). Телефон — общий PhoneInput с выбором страны.
   ============================================================ */
.raw2-m-contact { display: none; }
@media (max-width: 1023px) {
  .raw2-contact { display: none; }
  .raw2-m-contact { --u: 1px; display: block; position: relative; width: 768px; height: calc(815 * var(--u)); scale: var(--m-k, 1); transform-origin: 0 0; margin: 0 calc(768px * (var(--m-k, 1) - 1)) calc(815px * (var(--m-k, 1) - 1)) 0; background: var(--lime); overflow: hidden; }
  .raw2-m-contact .m-c-title { position: absolute; left: calc(138 * var(--u)); top: calc(68.9 * var(--u)); width: calc(492 * var(--u)); margin: 0; text-align: center; white-space: nowrap; color: var(--ink);
    font-weight: 500; font-size: calc(36 * var(--u)); line-height: 0.975; letter-spacing: calc(-1.8 * var(--u)); text-transform: none; }
  .raw2-m-contact .m-c-form { position: static; margin: 0; }
  .raw2-m-contact .m-c-form > * { position: absolute; margin: 0; }
  .raw2-m-contact .m-c-field { box-sizing: border-box; height: calc(68 * var(--u)); border: calc(2 * var(--u)) solid transparent; border-radius: calc(34 * var(--u)); background: #fff; color: var(--ink); outline: none;
    padding: 0 calc(28 * var(--u)) calc(2 * var(--u)); font-family: inherit; font-weight: 500; font-size: calc(30 * var(--u)); line-height: 0.975; letter-spacing: calc(-1.5 * var(--u)); text-align: center; transition: border-color .18s; }
  .raw2-m-contact .m-c-field::placeholder { color: rgba(30, 30, 30, 0.7); opacity: 1; }
  .raw2-m-contact .m-c-field:focus { border-color: rgba(30, 30, 30, 0.25); }
  .raw2-m-contact .m-c-field.invalid, .raw2-m-contact .m-c-field:user-invalid { border-color: var(--red); }
  .raw2-m-contact .m-c-form > .m-c-field { left: calc(95 * var(--u)); width: calc(578 * var(--u)); }
  .raw2-m-contact .m-c-field--name { top: calc(200 * var(--u)); }
  .raw2-m-contact .m-c-field--email { top: calc(293 * var(--u)); }
  .raw2-m-contact .m-c-form > .m-c-field--comment { top: calc(479 * var(--u)); left: calc(96 * var(--u)); }
  .raw2-m-contact .m-c-phone { left: calc(95 * var(--u)); top: calc(386 * var(--u)); width: calc(578 * var(--u)); height: calc(68 * var(--u)); }
  .raw2-m-contact .m-c-field--phone { width: 100%; height: 100%; }
  /* Пока номер не введён — подсказка по центру всей капсулы, как в макете; компонент ставит инлайн-отступ под выбор страны, поэтому !important.
     Введённый номер остаётся слева у кода страны. */
  .raw2-m-contact .m-c-field--phone:placeholder-shown { padding-left: calc(28 * var(--u)) !important; padding-right: calc(28 * var(--u)) !important; text-align: center !important; }
  .raw2-m-contact .m-c-phone-select { color: var(--ink); font-family: inherit; font-weight: 500; font-size: calc(26 * var(--u)); letter-spacing: calc(-1.3 * var(--u)); }
  .raw2-m-contact .m-c-err { left: calc(95 * var(--u)); top: calc(565 * var(--u)); width: calc(578 * var(--u)); text-align: center; color: var(--red); font-weight: 600; font-size: calc(20 * var(--u)); line-height: 1.1; }
  .raw2-m-contact .m-c-submit { left: calc(264 * var(--u)); top: calc(621 * var(--u)); width: calc(240 * var(--u)); height: calc(68 * var(--u)); padding: 0; border: 0; border-radius: calc(34 * var(--u)); background: var(--red); color: #fff;
    cursor: pointer; font-family: inherit; font-weight: 700; font-size: calc(32 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); transition: background .2s; }
  /* Форма помечена form-no-auto-disable: глобальное правило из globals.css не приглушает кнопку, проверка при отправке */
  .raw2-m-contact .m-c-submit:hover { background: var(--red-hover); }
  .raw2-m-contact .m-c-submit.busy { background: var(--ink); color: var(--lime); cursor: progress; }
  .raw2-m-contact .m-c-submit > span { position: absolute; left: 0; right: 0; top: calc(19.1 * var(--u)); line-height: 0.8053; text-align: center; white-space: nowrap; }
  .raw2-m-contact .m-c-cl { display: block; }
  /* Сдвиг строк подписи по центру букв рендера Figma (в макете у строки хвостовой пробел) */
  .raw2-m-contact .m-c-cl--1 { transform: translateX(calc(-4.50 * var(--u))); }
  .raw2-m-contact .m-c-cl--2 { transform: translateX(calc(-1.00 * var(--u))); }
  .raw2-m-contact .m-c-consent { left: calc(170 * var(--u)); top: calc(712 * var(--u)); width: calc(429 * var(--u)); text-align: center; white-space: nowrap; color: rgba(30, 30, 30, 0.7);
    font-style: italic; font-weight: 400; font-size: calc(20 * var(--u)); line-height: 0.975; letter-spacing: calc(-1 * var(--u)); }
}

/* ============================================================
   MOBILE FOOTER — Figma 4014:195 (холст 768×661, белый фон), холст 768px, --u = 1px
   Ссылки Inter 500 24 / 1.129 / −1.2px, правый край текста: Telegram 436 (иконка 29×29 at 300,53), Связаться 445, Договор-оферта 480,
   Политика 562; сверху 54 / 90 / 126 / 162. Кнопка 342×119 r59.433 at (214, 248), текст Inter 700 35 / 0.975 / −1.75px (246, 275, w279).
   Копирайт Gluten 500 24 / 1.129 / −1.2px по центру (top 380). Реквизиты Inter 500 24, шаг 33.12, по центру x 376.5 (первая строка 478).
   ============================================================ */
.raw2-m-footer { display: none; }
@media (max-width: 1023px) {
  .raw2-footer { display: none; }
  .raw2-m-footer { --u: 1px; display: block; position: relative; width: 768px; height: calc(661 * var(--u)); scale: var(--m-k, 1); transform-origin: 0 0; margin: 0 calc(768px * (var(--m-k, 1) - 1)) calc(661px * (var(--m-k, 1) - 1)) 0; background: #fff; overflow: hidden; font-family: var(--font-sans), 'Inter', sans-serif; }
  /* Кадр подвала в Figma стоит на x −1 относительно остальных блоков — сдвигаем всё на 1px влево, как в макете страницы */
  .raw2-m-footer > * { position: absolute; margin: 0; translate: calc(-1 * var(--u)) 0; }
  .raw2-m-footer .m-f-tg { left: calc(300 * var(--u)); top: calc(53 * var(--u)); width: calc(136 * var(--u)); height: calc(29 * var(--u)); }
  .raw2-m-footer .m-f-tg-ic { position: absolute; left: 0; top: 0; width: calc(29 * var(--u)); height: calc(29 * var(--u)); max-width: none; }
  .raw2-m-footer .m-f-link { position: absolute; text-align: right; white-space: nowrap; color: rgba(30, 30, 30, 0.7); text-decoration: none;
    font-weight: 500; font-size: calc(24 * var(--u)); line-height: 1.129; letter-spacing: calc(-1.2 * var(--u)); }
  .raw2-m-footer .m-f-link:hover { opacity: .7; }
  .raw2-m-footer .m-f-tg .m-f-link--tg { left: calc(35 * var(--u)); top: calc(1 * var(--u)); width: calc(101 * var(--u)); color: var(--ink); }
  .raw2-m-footer .m-f-link--contact { left: calc(327 * var(--u)); top: calc(90 * var(--u)); width: calc(118 * var(--u)); }
  .raw2-m-footer .m-f-link--oferta { left: calc(291 * var(--u)); top: calc(126 * var(--u)); width: calc(189 * var(--u)); }
  .raw2-m-footer .m-f-link--privacy { left: calc(209 * var(--u)); top: calc(162 * var(--u)); width: calc(353 * var(--u)); }
  .raw2-m-footer .m-f-cta { left: calc(214 * var(--u)); top: calc(248 * var(--u)); width: calc(342 * var(--u)); height: calc(119 * var(--u)); padding: 0; border: 0; border-radius: calc(59.433 * var(--u));
    background: var(--red); color: #fff; cursor: pointer; font-family: inherit; font-weight: 700; font-size: calc(35 * var(--u)); letter-spacing: calc(-1.75 * var(--u)); transition: background .2s; }
  .raw2-m-footer .m-f-cta:hover { background: var(--red-hover); }
  .raw2-m-footer .m-f-cta > span { position: absolute; left: calc(32 * var(--u)); top: calc(27 * var(--u)); width: calc(279 * var(--u)); line-height: 0.975; text-align: center; white-space: nowrap; }
  .raw2-m-footer .m-f-copy { left: 0; right: 0; top: calc(380 * var(--u)); text-align: center; white-space: nowrap; color: var(--ink);
    font-family: var(--font-gluten), 'Gluten', cursive; font-weight: 500; font-size: calc(24 * var(--u)); line-height: 1.129; letter-spacing: calc(-1.2 * var(--u)); }
  .raw2-m-footer .m-f-legal { left: calc(176.5 * var(--u)); top: calc(474.5 * var(--u)); width: calc(400 * var(--u)); text-align: center; white-space: nowrap; color: rgba(30, 30, 30, 0.7);
    font-weight: 500; font-size: calc(24 * var(--u)); line-height: calc(33.12 * var(--u)); letter-spacing: calc(-1.2 * var(--u)); }
}

/* ============================================================
   MOBILE SUCCESS MODAL — Figma 2522:2451 «Контакты отправлены» (570×286, r29.5, лайм), холст 768px, --u = 1px
   Текст (49, 53, w473) Inter 500 30 / 0.975 / −1.5px по центру, вторая строка жирная. Кнопка 208×57 r34 at (181, 176), «ОК» Inter 700 24 / −1.2px.
   ============================================================ */
/* MOBILE QUIZ POPUP — Figma 2522:3494 «до ответа» / 2522:3506 «после ответа», 530×716 на холсте 768.
   Сердца рендерятся 39×33 вместе с обводкой 5 (рамка слоя 29×23 её не включает), поэтому top 64 и gap 7. */
@media (max-width: 1023px) {
  .raw2-quiz-pop:not(.result) { --u: 1px; scale: var(--m-k, 1); transform-origin: 0 0; box-sizing: border-box; width: calc(530 * var(--u)); max-width: none; min-height: calc(716 * var(--u)); border-radius: calc(29.5 * var(--u)); padding: calc(64 * var(--u)) calc(41 * var(--u)) calc(64.8 * var(--u)) calc(42 * var(--u)); }
  .raw2-quiz-pop:not(.result) .rq-bar { margin-bottom: calc(25 * var(--u)); }
  /* Результат — Figma 2522:3413 (те же 686×585 и координаты, что у десктопа 2522:2409) на холсте 768; кнопка — из десктопного 4003:162 */
  .raw2-quiz-pop.result { --u: 1px; scale: var(--m-k, 1); transform-origin: 0 0; box-sizing: border-box; width: 686px; max-width: none; height: 585px; min-height: 0; padding: 0; flex-shrink: 0; }
  /* Координаты из макета: в потоке текст уезжал за высотой лого (у уровней она разная), в Figma он всегда на 312 */
  .raw2-quiz-pop.result .raw2-quiz-result { position: absolute; inset: 0; }
  /* Поля под масштаб по размерам макета — чтобы попап стоял по центру и без JS (JS уточняет их по фактической высоте) */
  .raw2-quiz-pop:not(.result) { margin: 0 calc(530px * (var(--m-k, 1) - 1)) calc(716px * (var(--m-k, 1) - 1)) 0; }
  .raw2-quiz-pop.result { margin: 0 calc(686px * (var(--m-k, 1) - 1)) calc(585px * (var(--m-k, 1) - 1)) 0; }
  .raw2-login--signin { margin: 0 calc(686px * (var(--m-k, 1) - 1)) calc(606px * (var(--m-k, 1) - 1)) 0; }
  .raw2-login--signup { margin: 0 calc(686px * (var(--m-k, 1) - 1)) calc(926px * (var(--m-k, 1) - 1)) 0; }
  .raw2-cta { margin: 0 calc(686px * (var(--m-k, 1) - 1)) calc(808px * (var(--m-k, 1) - 1)) 0; }
  .raw2-sent-modal { margin: 0 calc(570px * (var(--m-k, 1) - 1)) calc(286px * (var(--m-k, 1) - 1)) 0; }
  .raw2-quiz-pop.result .rq-top, .raw2-quiz-pop.result .rq-bot { position: absolute; left: 97px; width: 492px; margin: 0; }
  .raw2-quiz-pop.result .rq-top { top: 79px; }
  .raw2-quiz-pop.result .rq-bot { top: 312px; }
  /* лого любой высоты — по центру слота 266.6×116.3 at top 156 */
  .raw2-quiz-pop.result .rq-logo { position: absolute; left: 0; right: 0; top: 156px; bottom: calc(585px - 156px - 116.3px); margin: auto; max-width: none; }
  .raw2-quiz-pop.result .rq-cta { position: absolute; left: 107px; top: 431px; margin: 0; }
  .raw2-quiz-pop:not(.result) .rq-lives { gap: calc(7 * var(--u)); }
  .raw2-quiz-pop:not(.result) .rq-lives img { width: calc(39 * var(--u)); height: calc(33 * var(--u)); }
  .raw2-quiz-pop:not(.result) .rq-q { max-width: calc(509 * var(--u)); min-height: calc(62.4 * var(--u)); margin: 0 auto calc(42.6 * var(--u)); font-size: calc(32 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); position: relative; top: calc(1.6 * var(--u)); left: calc(-1 * var(--u)); }
  .raw2-quiz-pop:not(.result) .rq-options { gap: calc(25 * var(--u)); }
  .raw2-quiz-pop:not(.result) .rq-opt { height: calc(68 * var(--u)); padding: calc(2 * var(--u)) calc(22 * var(--u)) 0 calc(20 * var(--u)); border-radius: calc(34 * var(--u)); font-size: calc(32 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); }
  .raw2-quiz-pop:not(.result) .rq-counter { margin-top: calc(46 * var(--u)); font-size: calc(32 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); position: relative; left: calc(-1 * var(--u)); }
}
/* MOBILE LOGIN POPUP — Figma 2522:3375 «Личный кабинет»: те же 686×606 и координаты, что у десктопа 2522:2340, на холсте 768. */
@media (max-width: 1023px) {
  .raw2-login--signin { --u: 1px; scale: var(--m-k, 1); transform-origin: 0 0; box-sizing: border-box; width: calc(686 * var(--u)); max-width: none; flex-shrink: 0; border-radius: calc(29.5 * var(--u)); padding: calc(61 * var(--u)) calc(54 * var(--u)) calc(56.6 * var(--u)); }
  .raw2-login--signin .raw2-login-tabs { gap: calc(98 * var(--u)); margin-bottom: calc(73 * var(--u)); }
  .raw2-login--signin .raw2-login-tabs button { flex: none; width: calc(240 * var(--u)); height: calc(68 * var(--u)); border-width: calc(2 * var(--u)); border-radius: calc(34 * var(--u)); font-size: calc(32 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); }
  /* подписи табов в Figma стоят левее центра пилюли: Ученик на 3.5, Учитель на 1.5 */
  .raw2-login--signin .raw2-login-tabs button:first-child { padding-right: calc(7 * var(--u)); }
  .raw2-login--signin .raw2-login-tabs button:nth-child(2) { padding-right: calc(3 * var(--u)); }
  .raw2-login--signin .raw2-login-form { gap: calc(25 * var(--u)); }
  .raw2-login--signin .raw2-login-form input { height: calc(68 * var(--u)); padding: 0 calc(28 * var(--u)) calc(1.1 * var(--u)); border-radius: calc(34 * var(--u)); font-size: calc(24 * var(--u)); letter-spacing: calc(-1.2 * var(--u)); }
  .raw2-login--signin .raw2-login-form .btn-red { margin-top: calc(48 * var(--u)); min-width: calc(240 * var(--u)); height: calc(68 * var(--u)); padding: 0 calc(35 * var(--u)) calc(4 * var(--u)); border-radius: calc(34 * var(--u)); font-size: calc(32 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); }
  .raw2-login--signin .raw2-login-reg { margin-top: calc(-3 * var(--u)); font-size: calc(24 * var(--u)); letter-spacing: calc(-1.2 * var(--u)); }
  .raw2-login--signin .raw2-login-err { font-size: calc(18 * var(--u)); }
}
/* MOBILE SIGNUP POPUP — Figma 2522:3450 «Регистрация в личный кабинет»: те же 686×926 и координаты, что у десктопа 2522:3001, на холсте 768. */
@media (max-width: 1023px) {
  .raw2-login--signup { --u: 1px; scale: var(--m-k, 1); transform-origin: 0 0; box-sizing: border-box; width: calc(686 * var(--u)); max-width: none; flex-shrink: 0; border-radius: calc(29.5 * var(--u)); padding: calc(61 * var(--u)) calc(54 * var(--u)) calc(58 * var(--u)); }
  .raw2-login--signup .raw2-login-title { height: calc(68 * var(--u)); border-width: calc(2 * var(--u)); border-radius: calc(34 * var(--u)); padding: 0 calc(24 * var(--u)) calc(2 * var(--u)); margin-bottom: calc(73 * var(--u)); font-size: calc(32 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); }
  .raw2-login--signup .raw2-login-form { gap: calc(25 * var(--u)); }
  .raw2-login--signup .raw2-login-form input:not([type=checkbox]) { height: calc(68 * var(--u)); padding: 0 calc(27 * var(--u)) calc(1.1 * var(--u)) calc(29 * var(--u)); border-radius: calc(34 * var(--u)); font-size: calc(24 * var(--u)); letter-spacing: calc(-1.2 * var(--u)); }
  .raw2-login--signup .raw2-login-form .btn-red { margin-top: calc(47 * var(--u)); width: calc(386 * var(--u)); min-width: 0; height: calc(68 * var(--u)); padding: 0 0 calc(7 * var(--u)); border-radius: calc(34 * var(--u)); font-size: calc(32 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); }
  .raw2-login--signup .raw2-login-form .raw2-check { width: calc(424 * var(--u)); margin-top: calc(6 * var(--u)); gap: calc(11 * var(--u)); font-size: calc(20 * var(--u)); letter-spacing: calc(-1 * var(--u)); }
  .raw2-login--signup .raw2-login-form .raw2-check span { position: relative; top: calc(1 * var(--u)); }
  .raw2-login--signup .raw2-login-form .raw2-check + .raw2-check { margin-top: calc(-12 * var(--u)); }
  .raw2-login--signup .raw2-login-form .raw2-check input { flex-basis: calc(21 * var(--u)); width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
  .raw2-login--signup .raw2-login-form .raw2-check input:checked::after { width: calc(5 * var(--u)); height: calc(9 * var(--u)); border-width: 0 calc(2.5 * var(--u)) calc(2.5 * var(--u)) 0; }
  .raw2-login--signup .raw2-login-err { font-size: calc(18 * var(--u)); }
}
/* MOBILE CTA POPUP — Figma 2522:3388 «Форма для связи»: те же 686×808 и координаты, что у десктопа 2522:2375, на холсте 768. */
@media (max-width: 1023px) {
  .raw2-cta { --u: 1px; scale: var(--m-k, 1); transform-origin: 0 0; box-sizing: border-box; width: calc(686 * var(--u)); max-width: none; flex-shrink: 0; border-radius: calc(29.5 * var(--u)); padding: calc(77 * var(--u)) calc(54 * var(--u)) calc(56 * var(--u)); }
  .raw2 .raw2-cta-title { position: relative; top: calc(1 * var(--u)); max-width: calc(492 * var(--u)); margin-bottom: calc(62.6 * var(--u)); font-size: calc(32 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); }
  .raw2-cta-form { gap: calc(25 * var(--u)); }
  .raw2-cta-form input { height: calc(68 * var(--u)); padding: 0 calc(28 * var(--u)) calc(1.1 * var(--u)); border-width: calc(2 * var(--u)); border-radius: calc(34 * var(--u)); font-size: calc(24 * var(--u)); letter-spacing: calc(-1.2 * var(--u)); }
  /* подсказка телефона по центру капсулы, как в макете; компонент ставит инлайн-отступ под выбор страны */
  .raw2-cta-form .phone-input input:placeholder-shown { padding-left: calc(28 * var(--u)) !important; padding-right: calc(28 * var(--u)) !important; text-align: center !important; }
  .raw2-cta-form .raw2-phone-select { font-size: calc(26 * var(--u)); letter-spacing: calc(-1.3 * var(--u)); }
  .raw2-cta-form .btn-red { margin-top: calc(49 * var(--u)); width: calc(240 * var(--u)); min-width: 0; height: calc(68 * var(--u)); padding: 0 0 calc(7 * var(--u)); border-radius: calc(34 * var(--u)); font-size: calc(32 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); }
  .raw2-cta-consent { max-width: calc(429 * var(--u)); margin-top: calc(-3 * var(--u)); font-size: calc(20 * var(--u)); letter-spacing: calc(-1 * var(--u)); }
  .raw2-cta .raw2-form-err { font-size: calc(18 * var(--u)); }
}
.raw2-sent-msg--m { display: none; }
@media (max-width: 1023px) {
  .raw2-sent-msg--d { display: none; }
  .raw2-sent-modal { --u: 1px; scale: var(--m-k, 1); transform-origin: 0 0; display: block; box-sizing: border-box; width: calc(570 * var(--u)); max-width: none; height: calc(286 * var(--u)); padding: 0; border-radius: calc(29.5 * var(--u)); }
  .raw2-sent-modal .raw2-sent-msg--m { display: block; position: absolute; left: calc(49 * var(--u)); top: calc(53 * var(--u)); width: calc(473 * var(--u)); max-width: none; margin: 0; text-align: center; white-space: nowrap;
    color: var(--ink); font-weight: 500; font-size: calc(30 * var(--u)); line-height: 0.975; letter-spacing: calc(-1.5 * var(--u)); }
  .raw2-sent-modal .raw2-sent-msg--m b { font-weight: 700; }
  .raw2-sent-modal .raw2-sent-msg--m > * { display: block; }
  .raw2-sent-modal .raw2-sent-msg--m .l1 { transform: translateX(calc(-3.5 * var(--u))); }
  .raw2-sent-modal .raw2-sent-msg--m .l2 { transform: translateX(calc(-3 * var(--u))); }
  .raw2-sent-modal .raw2-sent-msg--m .l3 { transform: translateY(calc(-1 * var(--u))); }
  .raw2-sent-modal .btn-red { position: absolute; left: calc(181 * var(--u)); top: calc(176 * var(--u)); width: calc(208 * var(--u)); height: calc(57 * var(--u)); padding: 0; border-radius: calc(34 * var(--u)); font-size: calc(24 * var(--u)); letter-spacing: calc(-1.2 * var(--u)); text-transform: uppercase; }
  .raw2-sent-modal .btn-red > span { position: absolute; left: 0; right: 0; top: calc(17.9 * var(--u)); line-height: 0.8053; text-align: center; }
}

/* Пояснение вместо формы (вкладка «Учитель» на регистрации, первый вход преподавателя) */
.raw2-login-sub { margin: 0 0 32px; font-size: 1.1rem; line-height: 1.35; color: var(--ink); max-width: 52ch; }
.raw2-login-note { display: flex; flex-direction: column; align-items: flex-start; }
.raw2-login-note .btn-red { width: 240px; }