/* ============================================================
   Акселератор Клуба менторов — концепты лендинга
   Палитра снята с mentorclub.ru (по скриншотам):
   бирюза #35BDB5 (основной акцент/CTA) + коралловый акцент,
   near-black заголовки, белый фон, прохладный светло-серый
   для секций, кнопки-пилюли, чистый гротеск Inter.
   ============================================================ */

:root {
  /* Teal brand scale (primary) */
  --teal-900: #0E3A36;   /* deep teal — dark sections */
  --teal-800: #12514A;
  --teal-700: #197F76;
  --teal-600: #1E9E94;   /* hover */
  --teal-500: #2BB6AC;   /* primary accent / CTA */
  --teal-400: #57C7BF;
  --teal-300: #8ED9D3;
  --teal-200: #BDE8E4;
  --teal-100: #E0F4F2;
  --teal-50:  #EFF8F7;

  /* Coral accent (used sparingly, like the site) */
  --coral:     #F26A4F;
  --coral-600: #E2503A;
  --coral-50:  #FDEDE9;

  /* Ink / paper / neutrals (cool) */
  --ink:     #15191C;   /* headings, near-black */
  --ink-2:   #4F575E;   /* body */
  --ink-3:   #828A92;   /* muted */
  --paper:   #FBFBF9;   /* light surface (near-white) */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --paper-2: #E3EEEB;   /* tinted surface — deliberately deeper for strong block alternation */
  --paper-3: #EAF0F1;   /* sunken */
  --line:    #E6ECEC;
  --line-2:  #D8E1E1;

  --shadow-soft: 0 2px 10px rgba(20,40,38,.05), 0 16px 44px -16px rgba(20,40,38,.14);
  --shadow-card: 0 1px 3px rgba(20,40,38,.05), 0 10px 30px -14px rgba(20,40,38,.12);
  --shadow-lift: 0 30px 60px -22px rgba(14,58,54,.30);

  /* ===== 2026 system: one rhythm, soft geometry ===== */
  --r-chip:  12px;   /* small chips / plates */
  --r-card:  20px;   /* default card radius (was a boxy 6px) */
  --r-panel: 26px;   /* large dark accent panels */
  --pad-section: clamp(84px, 9vw, 150px);  /* single vertical rhythm — more air to breathe */
  --maxw: 1200px;
}

/* All concepts use Inter to match the club site */
.cA, .cB, .cC { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

.concept * { box-sizing: border-box; }
.concept {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow: hidden;
}
.concept p { margin: 0; }
.concept h1, .concept h2, .concept h3, .concept h4 { margin: 0; font-weight: 700; color: var(--ink); letter-spacing: -0.025em; line-height: 1.08; }

/* kicker — monospace utilitarian eyebrow (editorial 2026) */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-700);
}
.kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); }

/* kinetic marquee (sphere ticker) */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Buttons — pill shaped, like the site */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-weight: 600; cursor: pointer; border: none; white-space: nowrap;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, filter .2s ease; }
/* primary = solid teal (matches "Записаться на разбор") */
.btn-amber, .btn-teal { background: var(--teal-500); color: #fff; padding: 15px 30px; font-size: 16px;
  box-shadow: 0 10px 24px -8px rgba(43,182,172,.55); }
.btn-amber:hover, .btn-teal:hover { background: var(--teal-600); transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(43,182,172,.6); }
/* secondary = teal outline pill */
.btn-ghost { background: #fff; color: var(--teal-600); padding: 15px 28px; font-size: 16px;
  border: 1.5px solid var(--teal-300); }
.btn-ghost:hover { background: var(--teal-50); border-color: var(--teal-500); }
/* coral outline (sparing accent, like "Стать ментором") */
.btn-coral { background: #fff; color: var(--coral-600); padding: 15px 28px; font-size: 16px; border: 1.5px solid var(--coral); }
.btn-coral:hover { background: var(--coral-50); }
.btn-violet { background: var(--teal-500); color:#fff; padding:15px 30px; font-size:16px; border-radius:999px; }

/* avatar */
.avatar { border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--teal-400), var(--teal-600)); flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tnum { font-variant-numeric: tabular-nums; }

/* ===== Voicee-style craft (in Club teal) ===== */
/* expressive display headline */
.display { font-size: clamp(44px, 5.4vw, 74px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
.word-grad { background: linear-gradient(95deg, var(--teal-700), var(--teal-500) 48%, var(--coral-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* liquid-glass panels */
.glass {
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 24px 60px -24px rgba(14,58,54,.30), inset 0 0 0 1px rgba(255,255,255,.4);
}
.glass-chip {
  background: rgba(255,255,255,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.8); box-shadow: 0 14px 34px -14px rgba(14,58,54,.28);
}

/* organic morphing blobs */
@keyframes blobMorph {
  0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%     { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.blob-morph { animation: blobMorph 24s ease-in-out infinite; }
.float-anim { animation: floatY 7s ease-in-out infinite; }

/* hover lift on any card using the shared shadow tokens */
.concept [style*="shadow-card"], .concept [style*="shadow-soft"] { transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease; }
.concept [style*="shadow-card"]:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }

/* ============================================================
   2026 SYSTEM — one type scale, one rhythm, soft geometry.
   Hierarchy comes from weight + scale, never font variety.
   Mono (kicker) is the ONE deliberate non-Inter accent.
   ============================================================ */

/* section rhythm — every section uses the same vertical cadence + width */
.sec { padding: var(--pad-section) 40px; }
.sec-in { max-width: var(--maxw); margin: 0 auto; }
.sec-narrow { max-width: 920px; margin: 0 auto; }
@media (max-width: 720px){ .sec { padding: var(--pad-section) 22px; } }

/* the standard header stack: eyebrow → title → lead, fixed gaps */
.sec-head { margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .kicker { margin-bottom: 18px; }

/* ONE headline size for every section — big & bold (дерзко) */
.h2 { font-size: clamp(40px, 5vw, 68px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; color: var(--ink); max-width: 17ch; text-wrap: balance; }
.h2.wide { max-width: 20ch; }
.lead { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; color: var(--ink-2); max-width: 58ch; margin-top: 22px; }
.h3 { font-size: clamp(22px, 1.9vw, 27px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
.body { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.meta { font-size: 13px; line-height: 1.55; color: var(--ink-3); }

/* ===== surfaces — strong block alternation ===== */
.surf-light { background: var(--paper); }
.surf-tint  { background: var(--paper-2); }
.surf-dark  { background: linear-gradient(167deg, #0B1A22 0%, #0C2A2C 55%, #0E3A36 100%); color: #fff; }
.surf-dark .h2, .surf-dark h2, .surf-dark h3 { color: #fff; }
.surf-dark .kicker { color: var(--teal-300); }
.surf-dark .kicker .dot { background: var(--teal-300); }
.surf-dark .lead { color: rgba(255,255,255,.72); }

/* open hairline divider — used instead of boxes to group, keeps things airy */
.rule { height: 1px; background: var(--line-2); border: 0; margin: 0; }
.surf-dark .rule { background: rgba(255,255,255,.16); }

/* oversized display number (prices, steps) */
.bignum { font-weight: 800; letter-spacing: -0.05em; line-height: 0.82; font-variant-numeric: tabular-nums; }

/* soft card — replaces the boxy radius-6 + hard 2px-top-rule pattern */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease, border-color .24s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--line-2); }

/* airy index column — replaces hard top-rules: a quiet number + hairline, calm not table-like */
.idx-num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--teal-600); }

/* large dark accent panel — soft, modern, used sparingly for emphasis blocks */
.panel-dark { background: linear-gradient(160deg, var(--teal-900), #0c2a2c); border-radius: var(--r-panel); color: #fff; }

/* small pill chips with soft radius (kills the angular feel) */
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; border-radius: 999px; padding: 9px 16px; }

/* unify any radius-6 boxes authored inline in the section files */
.concept [style*="borderRadius:6"] { border-radius: var(--r-card) !important; }

/* hairline section seam — softer than a hard 1px line; many seams now rely on bg change alone */
.seam-top { border-top: 1px solid var(--line); }

/* scroll reveal (JS adds .reveal then .in; without JS content stays visible) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } .blob-morph, .float-anim { animation: none; } }

.concept ::-webkit-scrollbar { width: 8px; height: 8px; }
.concept ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }

/* ============================================================
   MOBILE — collapse multi-column grids, tighten rhythm.
   Inline-styled grids are tagged .m1 (→1 col) / .m2 (→2 col);
   !important beats React inline styles.
   ============================================================ */
@media (max-width: 860px) {
  :root { --pad-section: clamp(58px, 12vw, 92px); }

  /* section gutters */
  .sec { padding: var(--pad-section) 22px; }
  .sec-head { margin-bottom: clamp(28px, 7vw, 40px); }

  /* TABLET grids: keep 2-col layouts (.m1) as 2 columns; 3-col→2, 4-col→2 */
  .m1 { column-gap: 44px !important; }
  .m3 { grid-template-columns: 1fr 1fr !important; column-gap: 40px !important; row-gap: 44px !important; }
  .m2 { grid-template-columns: 1fr 1fr !important; column-gap: 24px !important; row-gap: 36px !important; }

  /* headline ceilings so big clamps don't overflow narrow screens */
  .h2, .h2.wide { max-width: 100%; }
}

/* ===== Header + hamburger menu (mobile) ===== */
.l-header-in { padding: 14px 40px; }
.l-header-cta { padding: 11px 22px; font-size: 14.5px; }
.l-burger { display: none; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #fff; place-items: center; cursor: pointer; flex: none; padding: 0; }
.l-burger:active { background: rgba(255,255,255,.16); }
.l-menu { display: none; }
@media (max-width: 860px) {
  .l-header-nav { display: none !important; }
  .l-header-cta { display: none !important; }
  .l-burger { display: inline-grid; }
  .l-header-in { padding: 11px 16px; }
  .l-menu {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(11,26,34,.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 6px 16px 22px;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    box-shadow: 0 26px 50px -20px rgba(0,0,0,.55);
  }
  .l-menu[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
}

/* ===== Hero (mobile) ===== */
@media (max-width: 860px) {
  .l-hero-in { padding: 56px 16px 36px !important; }
  .l-hero-in .l-hero-cta { width: 100%; flex-direction: column; align-items: stretch; gap: 10px !important; }
  .l-hero-in .l-hero-cta .btn { width: 100%; justify-content: center; padding: 16px 24px !important; }
}

/* ===== Hero — fit-the-fold on short laptop screens (e.g. 13" MacBook) =====
   Vertical padding/gaps already scale with vh inline; here we also cap the
   oversized display headline by viewport HEIGHT so the hero fits without
   scrolling on short-but-wide screens, while staying spacious on tall ones. */
@media (min-width: 861px) and (max-height: 900px) {
  .l-hero-h1 { font-size: clamp(40px, 6vw, 76px) !important; }
  .l-hero-sub { font-size: clamp(16px, 1.4vw, 19px) !important; }
  .l-hero-in { padding-bottom: clamp(18px, 2.4vh, 36px) !important; }
  .l-hero-marquee { padding: 12px 0 !important; }
}
@media (min-width: 861px) and (max-height: 740px) {
  .l-hero-h1 { font-size: clamp(36px, 5vw, 60px) !important; }
  .l-hero-marquee { padding: 9px 0 !important; }
}

/* ============================================================
   PHONE — a real mobile type scale (floors drop, not just clamp).
   !important overrides inline React font sizes.
   ============================================================ */
@media (max-width: 600px) {
  :root { --pad-section: clamp(50px, 12vw, 72px); }
  .sec { padding: var(--pad-section) 18px; }
  .sec-head { margin-bottom: 24px !important; }
  .sec-head .kicker { margin-bottom: 13px !important; }

  /* phone grids: single column; the two 4-col grids stay 2-col */
  .m1 { grid-template-columns: 1fr !important; column-gap: 28px !important; row-gap: clamp(34px, 8vw, 48px) !important; }
  .m3 { grid-template-columns: 1fr !important; row-gap: 30px !important; }
  .m2 { grid-template-columns: 1fr 1fr !important; column-gap: 18px !important; row-gap: 30px !important; }

  .concept .h2, .concept .h2.wide { font-size: 30px !important; line-height: 1.07 !important; letter-spacing: -0.022em !important; max-width: 100% !important; }
  .concept .h3 { font-size: 19px !important; line-height: 1.2 !important; }
  .concept .lead { font-size: 16.5px !important; margin-top: 16px !important; }
  .concept .kicker { font-size: 11px !important; }
  .concept .body { font-size: 15.5px !important; }

  /* inline-styled display texts — tagged classes */
  .l-hero-h1 { font-size: clamp(30px, 9.6vw, 46px) !important; line-height: 1.07 !important; letter-spacing: -0.02em !important; }
  .l-hero-sub { font-size: 16.5px !important; margin-top: 18px !important; }
  .l-manifesto-h { font-size: 33px !important; line-height: 1.06 !important; }
  .l-final-h { font-size: 33px !important; line-height: 1.06 !important; }
  .l-inaction { font-size: 23px !important; line-height: 1.32 !important; }
  .l-price-num { font-size: 74px !important; }
  .l-path-h { font-size: 26px !important; }

  /* ---- compress tall list/grid sections on phones ---- */
  /* «Чем отличаемся» — tighter rows, smaller icons */
  .l-diff { row-gap: 30px !important; }
  .l-diff svg { width: 30px !important; height: 30px !important; }
  .l-diff h3 { margin: 12px 0 7px !important; }

  /* «Путь за 12 недель» accordion — shorter rows */
  .l-steps > div { padding: 14px 0 !important; }
  .l-step-t { font-size: 17px !important; }
  .l-steps p { font-size: 14.5px !important; padding-left: 44px !important; margin-top: 8px !important; }

  /* Mentors — keep 2-up even on small phones, smaller avatars */
  .l-mentors { grid-template-columns: 1fr 1fr !important; column-gap: 18px !important; row-gap: 26px !important; }
  .l-mentors .avatar { width: 70px !important; height: 70px !important; font-size: 24px !important; }
  .l-mentors > div > div:nth-child(2) { font-size: 15px !important; margin-top: 11px !important; }
  .l-mentors > div > div:nth-child(3) { font-size: 12.5px !important; margin-top: 4px !important; }

  /* FAQ — shorter question rows */
  .l-faq button { padding: 16px 0 !important; }
  .l-faq button > span:nth-child(2) { font-size: 16.5px !important; }
  .l-faq p { font-size: 15px !important; padding: 0 0 18px 34px !important; }

  .br-desk { display: none !important; }
}

/* ===== Segmented stage toggles — keep on one line, shrink to fit ===== */
@media (max-width: 860px) {
  .stage-toggle { width: 100%; }
  .stage-toggle button { flex: 1 1 0; padding: 11px 10px !important; font-size: 13px !important; white-space: nowrap; }
}

/* ===== Sticky CTA (mobile) ===== */
@media (max-width: 860px) {
  .l-sticky-in { padding: 10px 16px !important; gap: 12px !important; }
  .l-sticky-text { display: none !important; }
  .l-sticky-in .btn { width: 100%; }
}

/* ===== Footer (mobile) ===== */
@media (max-width: 860px) {
  footer { padding: 48px 22px 110px !important; }
  .l-foot-cols { gap: 32px !important; }
  .l-foot-docs { width: 100% !important; }
}

/* ============================================================
   APPLICATION FORM — screening anketa in the #apply section.
   Matches the design system: soft card, teal focus, mono labels.
   ============================================================ */
.l-form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: clamp(24px, 3vw, 44px); margin-top: 36px;
}
.l-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.l-form .full { grid-column: 1 / -1; }
.l-flabel {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 8px; letter-spacing: -0.01em;
}
.l-flabel .req { color: var(--coral-600); margin-left: 3px; }
.l-flabel .opt { color: var(--ink-3); font-weight: 500; margin-left: 6px; font-size: 12.5px; }
.l-input, .l-select, .l-textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.l-textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.l-input::placeholder, .l-textarea::placeholder { color: var(--ink-3); }
.l-input:focus, .l-select:focus, .l-textarea:focus {
  outline: none; border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(43,182,172,.16);
}
.l-input[aria-invalid="true"], .l-select[aria-invalid="true"], .l-textarea[aria-invalid="true"] {
  border-color: var(--coral); box-shadow: 0 0 0 3px rgba(242,106,79,.14);
}
.l-select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231E9E94' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; }
/* segmented stage control inside the form */
.l-seg { display: flex; gap: 4px; border: 1px solid var(--line-2); border-radius: 14px; padding: 4px; background: var(--paper-3); }
.l-seg button { flex: 1 1 0; padding: 12px 12px; border-radius: 10px; border: none; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-2); background: transparent;
  transition: all .15s ease; line-height: 1.25; }
.l-seg button[data-on="true"] { background: var(--teal-500); color: #fff; box-shadow: 0 6px 16px -8px rgba(43,182,172,.6); }
.l-fhint { font-size: 12.5px; color: var(--ink-3); margin-top: 7px; line-height: 1.45; }
.l-ferror { font-size: 12.5px; color: var(--coral-600); margin-top: 7px; font-weight: 500; }
.l-consent { display: flex; gap: 12px; align-items: flex-start; }
.l-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--teal-500); flex: none; cursor: pointer; }
.l-consent label { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.l-consent a { color: var(--teal-700); }
.l-honeypot { position: absolute !important; left: -9999px !important; top: auto;
  width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.l-form-submit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.l-form-note { font-size: 13px; color: var(--ink-3); line-height: 1.5; max-width: 42ch; }
.l-form-success { text-align: center; padding: clamp(28px, 5vw, 64px) 20px; }
.l-form-success .ok { width: 64px; height: 64px; border-radius: 50%; background: var(--teal-50);
  color: var(--teal-600); display: grid; place-items: center; margin: 0 auto 22px; }
@media (max-width: 720px) {
  .l-form { grid-template-columns: 1fr; gap: 18px; }
}