/* ============================================================
   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;
}

.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; }

/* section-title badge — Figma: Inter 700, 40px, letter-spacing -5%, line-height 117% */
.raw2 .badge-title {
  display: inline-block; text-align: center; line-height: 1.17;
  font-weight: 700; text-transform: uppercase; letter-spacing: -0.05em;
  font-size: clamp(1.5rem, 3.2vw, 40px);
  padding: 16px 40px; border-radius: var(--radius-pill);
}
.raw2 .badge-title--lime   { background: var(--lime); color: var(--ink); }
.raw2 .badge-title--outline { background: transparent; border: 2px solid var(--ink); color: var(--ink); }
.raw2 .badge-title--outline-lime { background: transparent; border: 2px solid var(--lime); color: #fff; }

/* ============================================================
   NAV
   ============================================================ */
.raw2-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 26px 40px;
}
.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 */
.raw2-nav .nav-links { display: flex; align-items: center; gap: 16px; list-style: none; }
/* 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; }
.raw2-nav .pill {
  padding: 13px 26px; border-radius: var(--radius-pill);
  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 (иначе фото режется по бокам) */
.raw2-hero {
  position: relative; aspect-ratio: 1441 / 1121; min-height: 600px; display: flex; align-items: center;
  background-size: cover; background-position: center;
  padding: 140px 0 90px;
}
.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; }
/* Figma: 677×753, border-radius 29.5 */
.raw2-hero .glass {
  width: 677px; max-width: 100%; min-height: 753px; padding: 74px 80px 74px 87px; border-radius: 29.5px;
  background: rgba(20,16,14,.34); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14);
}
/* 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% */
.raw2-hero .lede { margin: 26px 0 34px; 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;
  font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem,2.9vw,40px); line-height: 1.06282;
  letter-spacing: -2px; padding: 22px 30px; border-radius: 22px;
  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 {
  position: absolute; top: -18px; right: 20px; background: var(--lime); color: var(--ink);
  font-size: 20px; font-weight: 500; letter-spacing: -1px; text-transform: none;
  width: 135.56px; height: 35.856px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; transform: rotate(5.203deg);
}
.raw2-hero .cta-row { display: flex; align-items: center; gap: 0; margin-top: 22px; }
/* "пройти тест" Figma: 32px, 700, -1.6px, lowercase */
.raw2-hero .cta-row .btn-lime { text-transform: none; font-weight: 700; font-size: clamp(1.3rem,2.3vw,32px); letter-spacing: -0.05em; }

/* speech bubble Figma: 20px, 700, -1px, 97.46%, #DFED8C, 327.401×108.396, rotate -3.237 */
.raw2-hero .bubble {
  position: absolute; right: 3%; bottom: 26%; z-index: 2;
  width: 327.401px; height: 108.396px;
  background: rgba(30,30,30,.42); backdrop-filter: blur(8px); color: #DFED8C;
  padding: 16px 22px; border-radius: 29.5px;
  display: flex; align-items: center;
  font-size: 20px; font-weight: 700; line-height: 97.46%; letter-spacing: -1px;
  transform: rotate(-3.237deg);
}

/* ============================================================
   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: 90px 0; }
.raw2-quiz .card {
  background: #fff; border-radius: var(--radius-card); padding: 48px 54px;
  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% */
/* «Level up или stay raw?» Figma: ~32px (h=33 на 1 строке → font ~32) */
.raw2-quiz .lvlup { font-size: clamp(1.4rem,2.4vw,32px); 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 / 96% */
.raw2-quiz .desc { font-size: clamp(1.05rem,1.7vw,24px); font-weight: 500; color: var(--ink); text-transform: none; line-height: 0.96; letter-spacing: -0.05em; }
.raw2-quiz .desc b { color: var(--red-accent); font-weight: 700; }
.raw2-quiz .right { display: flex; flex-direction: column; gap: 40px; align-items: flex-end; }
.raw2-quiz .metrics { display: flex; gap: 30px; align-items: center; }
.raw2-quiz .metric { display: flex; align-items: center; gap: 14px; }
.raw2-quiz .metric .mi { width: 82px; height: 74px; 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 */
/* metric numbers 12/3/2 Figma: ~45px (h=45 на 1 строке) */
.raw2-quiz .metric b { font-size: clamp(2rem,3.2vw,45px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
/* 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; }
/* 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: 1.2; max-width: 326px; }
/* "НАЧАТЬ ИГРУ!" Figma: 35px, 700, -1.75px, 97.5% */
.raw2-quiz .btn-red { align-self: flex-end; font-size: clamp(1.4rem,2.5vw,35px); padding: 20px 46px; }

/* ============================================================
   SECTION: founder (dark photo)
   ============================================================ */
/* Figma frame: 1441×1069 → aspect-ratio 1441/1069 ≈ 74.2vw
   Держим пропорцию до 1441px, потом капим на 1069.
   padding-bottom 129px — расстояние от bio-карточек до низа секции (замер Figma). */
.raw2-founder { position: relative; background: #1a1714 center/cover; padding: 90px 0 129px; color: #fff; min-height: clamp(600px, 74.2vw, 1069px); }
.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; }
.raw2-founder .badge-title { margin-bottom: 46px; border-radius: 29.5px; text-align: left; padding: 31px 40px; }
/* 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: 26px; }
/* 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);
  font-size: clamp(1.05rem,1.7vw,24px); font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; 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; }
.raw2-founder .bio-card ul { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.raw2-founder .bio-card li { padding-left: 20px; position: relative; }
.raw2-founder .bio-card li::before { content:'•'; position:absolute; left: 0; color:#fff; }
.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; right: 26%; bottom: 22%; 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: clamp(1.1rem,1.6vw,24px); letter-spacing: -0.05em; padding: 0; border-radius: 999px; transform: rotate(-3.079deg); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.raw2-founder .tag-mission { position: absolute; right: 5%; bottom: 10%; 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: clamp(1.1rem,1.6vw,24px); letter-spacing: -0.05em; padding: 0; border-radius: 999px; transform: rotate(6.381deg); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
/* "миссия" Figma: 20px, 500, -1px — на верхнем-правом углу лаймовой плашки */
.raw2-founder .tag-mission .mi { position: absolute; top: -22px; right: -8px; 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(15.311deg); 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: 0.92; margin-bottom: 22px; }
.raw2-prc ul { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
/* item Figma: 24px, 500, -1.2px */
.raw2-prc li { position: relative; padding-left: 22px; font-size: clamp(1rem,1.6vw,24px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; text-transform: none; }
.raw2-prc li::before { content:'•'; position:absolute; left: 2px; }
.raw2-prc li b { font-weight: 700; }
/* 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); 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: 90px 0 0;
}
.raw2-faq .mascot { position: absolute; right: -80px; top: 110px; width: 601px; height: 719.737px; transform: rotate(8.163deg); z-index: 1; pointer-events: none; }
.raw2-faq .wrap { position: relative; z-index: 2; }
.raw2-faq .badge-wrap { display: flex; justify-content: center; margin-bottom: 50px; }
.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;
  font-size: clamp(1rem, 2.4vw, 36px); font-weight: 600; letter-spacing: -0.05em; line-height: 1.0; color: var(--ink);
  padding: 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: 38px 38px 29.5px 29.5px;
  color: #fff; padding: 106px 100px 33px 33px;
  /* Figma: 24px medium, tracking -1.2 (=-0.05em), line-height ~93% */
  font-size: clamp(1rem,1.66vw,24px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.93;
  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: стрелка ▼ в правом верхнем углу body (y offset 43px от body top, right offset 39px) */
.raw2-faq-a .chev-down {
  position: absolute; right: 40px; top: 43px; transform: none;
  width: 40px; height: 14px; color: #CC3A3A; flex-shrink: 0;
}

/* ============================================================
   SECTION: contact (lime) + footer
   ============================================================ */
.raw2-contact { position: relative; background: var(--lime); padding: 90px 0 70px; overflow: hidden; }
.raw2-contact .watermark { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); width: min(1040px, 88vw); height: auto; aspect-ratio: 1100 / 540; opacity: .5; z-index: 0; pointer-events: none; }
.raw2-contact .wrap { position: relative; z-index: 1; }
/* heading Figma: 32px, 500, -1.6px, 97.5% */
.raw2-contact h2 { text-align: center; font-size: clamp(1.4rem,2.4vw,32px); margin: 0 auto 40px; max-width: 620px; text-transform: none; font-weight: 500; letter-spacing: -0.05em; line-height: 0.975; }
.raw2-form { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
/* inputs Figma: 24px, 500, -1.2px */
.raw2-form input {
  width: 100%; padding: 18px 28px; border-radius: 999px; border: 2px solid transparent; font-family: inherit;
  font-size: clamp(1.05rem,1.6vw,24px); font-weight: 500; letter-spacing: -1.2px; 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); }
.raw2-form .submit-row { display: flex; justify-content: center; margin-top: 6px; }
.raw2-form .submit-row .btn-red { text-transform: none; }
/* consent Figma: 20px, Regular 400 italic, -1px, 97.5% */
.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 «Контакты отправлены») */
.raw2-sent-modal {
  position: relative; width: 100%; max-width: 570px; background: var(--lime); border-radius: 34px;
  padding: 48px 44px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: raw2-pop .22s cubic-bezier(.16,1,.3,1);
}
.raw2-sent-msg { font-size: clamp(1.2rem, 2vw, 28px); font-weight: 500; letter-spacing: -0.04em; color: var(--ink); line-height: 1.2; }
.raw2-sent-msg b { font-weight: 700; }
.raw2-sent-modal .btn-red { min-width: 200px; text-transform: none; font-size: clamp(1.1rem,1.8vw,26px); padding: 14px 44px; }

/* ============================================================
   ROAST QUIZ POPUP (Figma 2173:2630 / 2642 / 2083)
   ============================================================ */
.raw2-quiz-pop {
  position: relative; width: 100%; max-width: 686px; min-height: 585px; background: #1c1c1c; border-radius: 34px;
  padding: 52px 44px 40px; 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); }
.raw2-quiz-close { position: absolute; top: 16px; right: 22px; background: none; border: none; font-size: 2rem; line-height: 1; color: #fff; cursor: pointer; opacity: .55; }
.raw2-quiz-pop.result .raw2-quiz-close { color: var(--ink); }
.raw2-quiz-close:hover { opacity: 1; }
.rq-bar { display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.rq-lives { display: flex; gap: 10px; }
.rq-lives svg { width: 29px; height: 23px; }
.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; }
.rq-q { text-align: center; color: var(--lime); font-weight: 700; font-size: clamp(1.3rem,2.4vw,28px); letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 26px; }
.rq-options { display: flex; flex-direction: column; gap: 16px; }
.rq-opt {
  width: 100%; padding: 18px; border: none; border-radius: 999px; cursor: pointer; font-family: inherit;
  background: #fff; color: var(--ink); font-weight: 500; font-size: clamp(1.1rem,1.9vw,24px); letter-spacing: -0.04em;
  transition: background .2s, color .2s;
}
.rq-opt:hover:not(:disabled) { background: var(--lime); }
.rq-opt:disabled { cursor: default; }
.rq-opt.correct { background: var(--lime); color: var(--ink); }
.rq-opt.wrong { background: #5f2b28; color: #9a8f8e; }
.rq-counter { text-align: center; color: var(--lime); font-weight: 700; font-size: clamp(1.1rem,1.8vw,24px); letter-spacing: -0.04em; margin-top: 26px; }
/* result */
.raw2-quiz-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: 10px 0 6px; }
.rq-top { color: var(--ink); font-weight: 500; font-size: clamp(1.2rem,2vw,26px); letter-spacing: -0.04em; }
.rq-logo { width: min(260px, 70%); height: auto; }
.rq-bot { color: var(--ink); font-weight: 500; font-size: clamp(1.2rem,2vw,26px); letter-spacing: -0.04em; line-height: 1.2; }
.rq-cta { text-transform: uppercase; padding: 15px 40px; font-size: clamp(1.05rem,1.7vw,22px); }

/* Figma frame: 1441×328 — фон растянут на viewport, контентный блок
   центрирован по горизонтали, вертикально колонки — по центру. */
.raw2-footer { background: #fff; font-family: 'Inter', sans-serif; color: #1E1E1E; }
.raw2-footer .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 1441px;
  min-height: 328px;
  margin: 0 auto;
  padding: 34px clamp(24px, 4vw, 60px) 46px;
  box-sizing: border-box;
}
.raw2-footer .fcol-links { display: flex; flex-direction: column; gap: 8px; font-size: 20px; font-weight: 500; letter-spacing: -1px; line-height: 1.13; }
.raw2-footer .fcol-links a { color: #1E1E1E; text-decoration: none; }
.raw2-footer .fcol-links .fmut { color: rgba(30, 30, 30, 0.70); }
.raw2-footer .fcol-links a:hover { opacity: .7; }
.raw2-footer .fcol-links .tg { display: inline-flex; align-items: center; gap: 8px; }
.raw2-footer .fcol-links .tg svg { width: 22px; height: 22px; color: var(--ink); }
.raw2-footer .fcol-center { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 4px; }
.raw2-footer .fcol-center .btn-red { font-size: clamp(1.05rem,1.7vw,26px); padding: 15px 40px; box-shadow: none; }
.raw2-footer .copy { font-family: 'Gluten', 'Inter', sans-serif; font-size: clamp(14px, 1.2vw, 18px); font-weight: 500; letter-spacing: -0.02em; color: #1E1E1E; }
.raw2-footer .legal { display: flex; flex-direction: column; gap: 8px; 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.13; }

/* ============================================================
   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; } }
.raw2-login {
  position: relative; width: 100%; max-width: 640px; background: var(--lime);
  border-radius: 34px; padding: 54px 54px 44px; 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; } }
.raw2-login-close { position: absolute; top: 18px; right: 24px; background: none; border: none; font-size: 2rem; line-height: 1; color: var(--ink); cursor: pointer; opacity: .7; }
.raw2-login-close:hover { opacity: 1; }
.raw2-login-tabs { display: flex; gap: 20px; margin-bottom: 34px; }
/* Figma: Ученик/Учитель — Inter Medium 500, 32px, -1.6px */
.raw2-login-tabs button {
  flex: 1; padding: 15px; border-radius: 999px; border: 2px solid var(--ink); background: transparent;
  color: var(--ink); font-family: inherit; font-weight: 500; font-size: clamp(1.15rem,2.2vw,28px);
  letter-spacing: -1.4px; 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 */
.raw2-login-title {
  border: 2px solid var(--ink); border-radius: 999px; text-align: center; color: var(--ink);
  font-weight: 500; font-size: clamp(1.2rem,2.3vw,30px); letter-spacing: -1.6px; padding: 16px 24px; margin-bottom: 30px;
}
.raw2-login-form { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.raw2-login-form > * { align-self: center; }
.raw2-login-form input { width: 100%; max-width: 480px; }
.raw2-login-form .raw2-check { width: auto; justify-content: center; }
.raw2-login-form input {
  padding: 18px 28px; border-radius: 999px; border: none; background: #fff; text-align: center;
  font-family: inherit; font-size: clamp(1rem,1.6vw,20px); font-weight: 500; letter-spacing: -1px; color: var(--ink); outline: none;
}
.raw2-login-form input::placeholder { color: rgba(30,30,30,.6); }
.raw2-login-form .btn-red { align-self: center; margin-top: 16px; min-width: 220px; font-size: clamp(1.1rem,1.8vw,26px); padding: 15px 44px; text-transform: 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; }
/* «Регистрация» / «Уже есть аккаунт? Войти» — Figma: Inter Medium 500, 24px, -1.2px, 97.46% */
.raw2-login-reg { align-self: center; margin-top: 14px; background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 500; font-size: clamp(1.1rem,1.7vw,24px); line-height: 0.9746; 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); }
.raw2-form .raw2-check { margin-top: 8px; justify-content: center; }
/* Figma: между чекбоксами 6px (не общий form gap 18) */
.raw2-form .raw2-check + .raw2-check { margin-top: -12px; }
/* Figma: Inter 20px / 400 italic / -1px / 97.46% / rgba(30,30,30,.7) */
.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.9746; letter-spacing: -1px; margin-top: 12px; }
.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; }
}

/* ============================================================
   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-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 { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
  .raw2-footer .fcol-links { align-items: center; }
  .raw2-footer .legal { text-align: center; }
}