/* =========================================================
   Startups DNA — homepage v3 (conversion-focused brief)
   ========================================================= */

/* Cross-document view transition — smooth fade on EN↔RU navigation.
   Browsers without support (older Firefox/Safari) just do a normal navigation. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

:root {
  /* Brand */
  --accent:        #FF5A1F;
  --accent-deep:   #D9461A;
  --accent-soft:   #FFE4D7;

  /* Affirmative green — used for "yes/closed" signals (area chips, controlling-stake
     badge, "what happens with Startups DNA" column). Hue-matched to the compare-table
     forest green (#3F5239) so the page reads with one consistent positive accent.
     A brighter sage variant carries the same hue onto dark-bg surfaces where
     #3F5239 would be too dark to read. */
  --green-accent:        #3F5239;
  --green-accent-bright: #94B57A;
  --green-accent-soft:   rgba(148, 181, 122, 0.14);
  --green-accent-border: rgba(148, 181, 122, 0.4);
  --green-accent-tint:   rgba(63, 82, 57, 0.12);

  /* Neutrals */
  --bg:            #F6F4EE;
  --bg-warm:       #EFEBE0;
  --bg-dark:       #0B0B0C;
  --surface:       #FFFFFF;
  --surface-dark:  #141416;
  --surface-dark-2:#1C1C1F;

  --text:            #0A0A0A;
  --text-muted:      #5B5B58;
  --text-on-dark:    #F6F4EE;
  --text-muted-dark: #9A9A95;

  --border:        #E3DFD4;
  --border-strong: #C9C4B6;
  --border-dark:   #26262A;

  --container: 1240px;

  /* Layout (2-col sections) */
  --ratio-text-image: 1.35fr 1fr;   /* standard text+visual split */
  --grid-gap:    64px;              /* default 2-col gap */
  --grid-gap-lg: 72px;              /* hero — extra breathing room */

  /* Spacing */
  --section-pad-y:    clamp(64px, 9vw, 128px);   /* default section block padding */
  --section-pad-y-lg: clamp(72px, 9vw, 128px);   /* slightly more for final CTA */
  --card-pad-y: 32px;
  --card-pad-x: 28px;
  --header-cta-min-width: 100px;   /* keeps header CTA same width across EN/RU so the lang-switch (which sits LEFT of CTA) stops shifting */

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;

  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-med:  320ms;
  --t-slow: 600ms;

  --serif: "Lora", Georgia, serif;   /* Lora — modern oldstyle serif, full Cyrillic, optimised for screen, readable at 16-30px (Cormorant/Instrument Serif were too thin/condensed at small sizes) */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Typography scale — 8 tokens, modular ratio ~1.25.
     Display = Lora (editorial). Body/Label = Inter. Italic only on serif. */
  --t-display-xl:    clamp(40px, 5.5vw, 64px);   /* Hero h1 */
  --t-display-l:     clamp(28px, 4vw,   48px);   /* section h2, positioning, emotion-bridge, modal h2, cta h2 */
  --t-display-m:     clamp(20px, 2.2vw, 28px);   /* h3, segment-quote, FAQ summary, feature-card titles */
  --t-display-italic:clamp(22px, 2.8vw, 36px);   /* fears-bridge, emotion-reason — emotional emphasis */
  --t-body-l:        clamp(17px, 1.3vw, 19px);   /* lede, intro paragraphs */
  --t-body-m:        16px;                       /* default body, descriptions */
  --t-body-s:        14px;                       /* captions, table cells, meta */
  --t-label:         12px;                       /* eyebrows, form labels (always UPPERCASE + tracking) */
}

/* ---------- Reset & base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(255,90,31,0.18);  /* warm orange tap feedback on touch devices */
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-body-l);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

button { font: inherit; cursor: pointer; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  z-index: 1000;
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ---------- Container ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: 24px;
}
@media (min-width: 1024px) {
  .container { padding-inline: 48px; }
}

/* ---------- Sections ---------- */
.section {
  padding-block: var(--section-pad-y);
}
.section--warm   { background: var(--bg-warm); }
.section--dark   { background: var(--bg-dark); color: var(--text-on-dark); }
.section--dark .lede { color: var(--text-muted-dark); }

/* Subtle divider when two same-bg sections meet — keeps tone consistent
   without flipping the bg rhythm across the page */
.section--warm + .section--warm { border-top: 1px solid var(--border); }
.section:not(.section--warm):not(.section--dark) + .section:not(.section--warm):not(.section--dark) { border-top: 1px solid var(--border); }

/* ---------- Typography ---------- */
/* Letter-spacing tuned for Lora — neutral by default; previous negative values were for Instrument Serif/Cormorant */
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: 0; }

.h1 {
  font-size: var(--t-display-xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.nowrap { white-space: nowrap; }
/* On narrow viewports the hero-h1 ".nowrap" unit ("масштабирования —") is wider than the column and leaks past the viewport, causing the bottom horizontal-scroll stripe in mobile Safari (overflow-x:clip on <html> hides the drag but the indicator still flashes). Let the unit wrap normally on mobile — the worst case is an em-dash starting a line, which we accept over the horizontal stripe. Regression of fix in 9a33059. */
@media (max-width: 720px) {
  .nowrap { white-space: normal; }
}
.h2 {
  font-size: var(--t-display-l);
  line-height: 1.1;
}
.h3 {
  font-size: var(--t-display-m);
  line-height: 1.2;
}
.h4 {
  font-size: var(--t-display-m);
  line-height: 1.3;
}

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);    /* ~4.7:1 on cream, passes WCAG AA (vs --accent which is ~3.5:1) */
}

.lede {
  font-size: var(--t-body-l);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 60ch;
}

.accent-word {
  font-style: italic;
  color: var(--accent);
}

/* Animated underline mark */
.underline-mark {
  position: relative;
  white-space: nowrap;
}
.underline-mark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.05em;
  height: 0.12em;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  animation: underlineIn 1s var(--ease) 0.5s forwards;
}
@keyframes underlineIn { to { transform: scaleX(1); } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
}
.btn > * { position: relative; z-index: 1; }
/* Arrows removed from buttons per design decision — keep markup, hide visually */
.btn .arrow { display: none; }

.btn-primary {
  background: var(--text);
  color: var(--bg);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform var(--t-med) var(--ease);
  z-index: 0;
}
.btn-primary:hover::after { transform: translateY(0); }

.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.btn-ghost:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }

/* Header CTA: stable width across languages — prevents lang-switch position shift on language toggle */
.site-header .btn-primary.btn-sm { min-width: var(--header-cta-min-width); }

/* Allow buttons with long labels to wrap on narrow viewports */
.btn--wrap {
  white-space: normal;
  line-height: 1.3;
  min-height: 56px;
  padding-block: 12px;
  text-align: center;
}

/* ---------- Header ---------- */
.site-header {
  z-index: 50;
  background: rgba(246, 244, 238, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
/* Sticky only on tablet+ — frees ~72px of viewport on mobile, removes the
   translucent-edge artifact when dark sections scroll under the header. */
@media (min-width: 720px) {
  .site-header {
    position: sticky;
    top: 0;
  }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 24px;
}
.brand img {
  width: auto;
  height: 44px;
}
.nav {
  display: none;
  gap: 28px;
  font-size: 15px;
}
.nav a {
  position: relative;
  padding: 6px 0;
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  background: rgba(255,255,255,0.4);
}
.lang-switch a {
  padding: 10px 14px;       /* WCAG-friendly tap target ~40px tall */
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1;
}
.lang-switch a.is-active {
  background: var(--text);
  color: var(--bg);
}

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
}
.hamburger svg { width: 18px; height: 18px; }

@media (min-width: 900px) { .nav { display: inline-flex; } }

/* Narrow viewports (Galaxy Fold etc.): drop the header lang switcher; users get it in the drawer */
@media (max-width: 479.98px) {
  .header-actions .lang-switch { display: none; }
}

/* ---------- Mobile drawer (CSS-only via :target) ---------- */
.mobile-drawer {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  display: flex;
  flex-direction: column;
  padding: 16px 24px 32px;
  overflow-y: auto;
}
.mobile-drawer:target {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--t-med) var(--ease), visibility 0s linear 0s;
}
/* Scroll lock while drawer or modal is open. <html> needs it too — in standards
   mode document scroll lives on the documentElement, so body:overflow:hidden alone
   leaves the page scrollable behind the modal (you can wheel-scroll outside the card
   and the hero will move). Locking <html> blocks that; body keeps its rule for
   browsers/legacy behaviours that treat body as the scroll container. */
html:has(.mobile-drawer:target),
html:has(.apply-modal:target),
body:has(.mobile-drawer:target),
body:has(.apply-modal:target) { overflow: hidden; }
.mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}
.mobile-drawer-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-drawer-nav {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--serif);
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1.2;
  letter-spacing: 0;
}
.mobile-drawer-nav a {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.mobile-drawer-nav a:last-child { border-bottom: 0; }
.mobile-drawer-cta {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Hero (Block 1) ---------- */
.hero {
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 48px;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: var(--ratio-text-image);
    gap: var(--grid-gap-lg);
  }
}
.hero h1 { margin-bottom: 24px; min-width: 0; }
/* Mobile font for hero h1: shrink so "масштабирования" (15 Cyrillic chars) fits on one line and the browser doesn't break it mid-word — e.g. without this, on iPhone 14 the global 40px min produces a 346px word in a 330px column and the "я" tail drops to the next line. clamp(30, 9vw, 38) keeps the word intact across 320px-720px viewports while still being a substantial hero heading. */
@media (max-width: 720px) {
  .hero .h1 { font-size: clamp(30px, 9vw, 38px); }
}
.hero-text { min-width: 0; padding-right: 8px; }
.hero .lede { margin-bottom: 32px; max-width: 56ch; }
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
}
.hero-visual { display: flex; justify-content: center; }
.hero-visual img {
  max-width: 320px;          /* mobile — landscape photo, can be a touch wider than the old portrait */
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.25);
}
@media (min-width: 720px)  { .hero-visual img { max-width: 420px; } }
@media (min-width: 1024px) { .hero-visual img { max-width: 560px; } }

/* ---------- Section header ---------- */
.section-head {
  max-width: 760px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
/* Generic spacing for eyebrow + heading regardless of parent (used by section-head, positioning, emotion-block) */
.eyebrow + .h2,
.eyebrow + .positioning-quote { margin-top: 14px; }
.section-head .h2 + .lede { margin-top: 18px; }
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head.center .lede { margin-left: auto; margin-right: auto; }

/* ---------- Block 2: Segments ("Это для вас, если…") ---------- */
.segments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px)  { .segments-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .segments-grid { grid-template-columns: repeat(3, 1fr); } }

.segment-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--card-pad-y) var(--card-pad-x);
  display: flex;
  flex-direction: column;
  gap: 48px;
  transition: transform var(--t-med) var(--ease), border-color var(--t-fast) var(--ease);
}
.segment-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

/* Block 2 — 6th card: dark CTA variant (was inline-styled) */
.segment-card.is-cta {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--text-on-dark);
  justify-content: center;
  gap: 20px;          /* CTA card has 3 children (quote/answer/button) vs 2 in other cards — tighter gap keeps card height matched to the row */
}
.segment-card.is-cta .segment-quote {
  color: var(--text-on-dark);
  font-size: var(--t-display-m);
}
.segment-card.is-cta .segment-answer { color: var(--text-muted-dark); }
.segment-card.is-cta .btn {
  align-self: flex-start;
  margin-top: 8px;
}
.segment-quote {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-display-m);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text);
}
.segment-quote::before { content: "«"; color: var(--accent); margin-right: 0.05em; }
.segment-quote::after  { content: "»"; color: var(--accent); margin-left: 0.05em; }
.segment-card[data-quote="en"] .segment-quote::before,
.segment-card[data-quote="en"] .segment-quote::after { content: ""; }
/* CTA card — no quotes (it's brand-voice question, not a customer quote) */
.segment-card.is-cta .segment-quote::before,
.segment-card.is-cta .segment-quote::after { content: ""; }
.segment-answer {
  margin: 0;
  font-size: var(--t-body-m);
  color: var(--text-muted);
  line-height: 1.55;
}
/* Reserve 3 lines of height for the quote so .segment-answer starts at the same Y in every card.
   Only on multi-column layouts — on mobile cards stack and alignment isn't an issue. */
@media (min-width: 720px) {
  .segment-card:not(.is-cta) .segment-quote { min-height: 3lh; }
}

.segment-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ---------- Block 3: Fears (dark) ---------- */
.fears-block { text-align: center; }
.fears-block .h2 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.fears-block .lede {
  margin: 24px auto 36px;
  color: var(--text-muted-dark);
}

.fears-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 auto 48px;
  max-width: 760px;
  list-style: none;
  padding: 0;
}
@media (min-width: 720px) { .fears-list { grid-template-columns: 1fr 1fr; } }

.fear-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--surface-dark-2);
  border: 1px solid var(--border-dark);
  border-radius: 999px;
  font-size: var(--t-body-m);
  color: var(--text-on-dark);
  text-align: left;
}
/* Tablet 2-col: tighten font so long phrases stay on one line inside the pill */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .fear-item { font-size: var(--t-body-s); padding-inline: 18px; }
}
.fear-item .icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--text-muted-dark);
}
/* On narrow viewports pills look awkward when text wraps — switch to rounded rectangle. */
@media (max-width: 479.98px) {
  .fear-item { border-radius: var(--radius); align-items: flex-start; }
  /* Nudge the 18px icon down so its center aligns with the first-line glyph center
     (~4px = half the line-height leading at 16px/1.55). Without this, on multi-line
     items the icon looks visually "lifted" above the text. */
  .fear-item .icon { margin-top: 4px; }
}

.fears-bridge {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-display-italic);
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 auto 32px;
  max-width: 22ch;
  color: var(--text-on-dark);
}
.fears-bridge .accent-word { font-style: italic; color: var(--accent); }

.areas-intro {
  font-size: var(--t-body-m);
  color: var(--text-on-dark);
  margin: 0 auto 24px;
  max-width: 50ch;
}

.areas-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;          /* slightly more breathing room — chips are bigger now */
  max-width: 820px;
  margin: 0 auto;
}
/* Sized to visually match .fear-item — green (positive) and dark (negative)
   should carry equal weight; colour does the signalling, not size. Green here
   complements the brand orange on the same page (CTAs, eyebrows) so the two
   signals coexist without fighting each other. */
.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--green-accent-soft);
  color: var(--green-accent-bright);
  border: 1px solid var(--green-accent-border);
  border-radius: 999px;
  font-size: var(--t-body-m);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.area-chip svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Block 4: Positioning + narrative compare ---------- */
.positioning {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.positioning-quote {
  font-family: var(--serif);
  font-size: var(--t-display-xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin: 0 auto 24px;
}
.positioning-quote .accent-word { font-style: italic; color: var(--accent); }
.positioning-sub {
  font-size: var(--t-body-l);
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 auto;
}
.positioning-note {
  display: inline-block;
  margin: 20px auto 0;
  padding: 10px 20px;
  background: var(--green-accent-tint);
  border-radius: 999px;
  font-size: var(--t-body-m);
  font-weight: 500;
  color: var(--green-accent);
}

.narrative-compare {
  max-width: 960px;
  margin: 0 auto;
  /* Mobile: stack pairs as separate cards with breathing room between transformations */
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.narrative-pair {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

@media (min-width: 720px) {
  /* Tablet+: collapse pairs back into one continuous 2-column table */
  .narrative-compare {
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .narrative-pair {
    grid-template-columns: 1fr 1fr;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
  }
  .narrative-compare > .narrative-pair:last-child { border-bottom: 0; }
}

@media (max-width: 719.98px) {
  /* Mobile: column headers are redundant once each pair is a self-contained card */
  .narrative-pair--head { display: none; }
}

.narrative-head {
  padding: 18px 24px;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.narrative-head.is-bad  {
  background: var(--surface);
  color: var(--text-muted);
}
.narrative-head.is-good {
  background: var(--bg-dark);
  color: var(--green-accent-bright);
}

.narrative-cell {
  padding: 18px 24px;
  font-size: var(--t-body-m);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}
.narrative-cell.is-bad {
  background: var(--surface);
  color: var(--text-muted);
}
.narrative-cell.is-good {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}
@media (min-width: 720px) {
  /* Restore the vertical column divider that the old single-grid layout got for free */
  .narrative-pair > .is-good { border-left: 1px solid var(--border); }
}
.narrative-cell svg { width: 18px; height: 18px; flex-shrink: 0; }
.narrative-cell.is-bad svg  { color: var(--text-muted); }
.narrative-cell.is-good svg { color: var(--green-accent-bright); }

/* ---------- Block 5: Simple step path ---------- */
.simple-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 800px) {
  .simple-steps { grid-template-columns: repeat(5, 1fr); gap: 16px; }
}
.simple-step {
  position: relative;
  padding: 24px 16px 0;
  border-top: 2px solid var(--accent);
}
.simple-step .num {
  display: block;
  font-family: var(--serif);
  font-size: var(--t-display-m);
  color: var(--accent);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  line-height: 1;
}
.simple-step p {
  margin: 0;
  font-size: var(--t-body-m);
  line-height: 1.45;
  color: var(--text);
}

/* ---------- Block 6: Outcomes ---------- */
/* Block 6 — text+cards left, portfolio mockups right (desktop) */
.outcomes-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px) {
  .outcomes-layout {
    grid-template-columns: var(--ratio-text-image);
    gap: var(--grid-gap);
  }
}
#outcomes .section-head { margin-bottom: clamp(24px, 3vw, 40px); }
.outcomes-visual {
  display: flex;
  justify-content: center;
  order: 2;
}
.outcomes-visual img {
  max-width: 380px;
  width: 100%;
}
@media (min-width: 720px)  { .outcomes-visual img { max-width: 480px; } }
@media (min-width: 1024px) {
  .outcomes-visual img { max-width: 560px; }
  .outcomes-visual { margin-top: -120px; }   /* lift mockup montage so it visually overlaps with section-head area */
}

.outcomes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) { .outcomes-grid { grid-template-columns: repeat(2, 1fr); } }

.outcome-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--card-pad-y) var(--card-pad-x);
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: transform var(--t-med) var(--ease), border-color var(--t-fast) var(--ease);
}
.outcome-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}
.outcome-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.outcome-icon svg { width: 22px; height: 22px; }
.outcome-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-display-m);
  letter-spacing: 0;
  margin: 0 0 6px;
}
.outcome-card p {
  margin: 0;
  font-size: var(--t-body-m);
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---------- Block 7: Comparison table ---------- */
/* Scope a softer, warmer dark just to #compare so the light card
   doesn't feel like a punch-through. Other dark sections (#fears, footer)
   keep the original --bg-dark for brand consistency. */
#compare { background: #1A1612; }

.compare-wrap {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-warm);
  box-shadow:
    0 40px 80px -40px rgba(0,0,0,0.45),
    0 2px 8px -2px rgba(0,0,0,0.2);
}
.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  /* Table-scoped accent — overrides the global brand orange just for this comparison
     widget. Deep forest green: classic "approved" semantic for comparison checkmarks,
     complementary to the brand orange so both still coexist on the page (e.g. the
     "Take the first step" CTA below the table stays orange). Keep this scoped to
     .compare-table so the brand color elsewhere on the site is unaffected. */
  --compare-accent:      #3F5239;
  --compare-accent-tint: rgba(63, 82, 57, 0.06);
  --compare-accent-soft: rgba(63, 82, 57, 0.14);

  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  color: var(--text);
  table-layout: fixed;
}
.compare-table colgroup col.col-feature { width: 26%; }
.compare-table colgroup col.col-self    { width: 18%; }
.compare-table colgroup col.col-other   { width: 14%; }
.compare-table th,
.compare-table td {
  padding: 18px;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: var(--t-body-s);
}
.compare-table thead th {
  background: var(--border);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block: 22px;
}
.compare-table tbody th {
  text-align: left;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--text);
  font-size: var(--t-body-m);
  background: transparent;
}
.compare-table .col-self { background: var(--compare-accent-tint); color: var(--compare-accent); }
.compare-table tbody td.col-self { background: var(--compare-accent-tint); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }

.cell-yes,
.cell-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: var(--t-body-s);
  font-weight: 500;
  line-height: 1;
}
.cell-yes { background: var(--compare-accent-soft); color: var(--compare-accent); }
.cell-no  { background: transparent; color: var(--text-muted); }
.cell-note {
  display: block;
  margin-top: 4px;
  font-size: var(--t-body-s);
  color: var(--text-muted);
  font-weight: 400;
}

.compare-hint {
  display: none;
  margin-top: 12px;
  font-size: var(--t-body-s);
  color: var(--text-muted-dark);
}
@media (max-width: 719px) {
  .compare-hint { display: block; }
}

/* ---------- Block 8: Emotional regret-aversion ---------- */
.emotion-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .emotion-layout {
    grid-template-columns: var(--ratio-text-image);
    gap: var(--grid-gap);
  }
}
.emotion-visual {
  display: flex;
  justify-content: center;
  order: 2;
}
.emotion-visual img {
  max-width: 320px;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.22);
}
@media (min-width: 720px)  { .emotion-visual img { max-width: 380px; } }
@media (min-width: 900px)  { .emotion-visual img { max-width: 420px; } }

/* When inside .emotion-layout the text block left-aligns on desktop */
@media (min-width: 900px) {
  .emotion-layout .emotion-block { text-align: left; margin: 0; max-width: none; }
  .emotion-layout .emotion-block .h2,
  .emotion-layout .emotion-block .emotion-bridge { margin-left: 0; max-width: none; }
  .emotion-layout .emotion-block .emotion-intro,
  .emotion-layout .emotion-block .emotion-reasons { margin-left: 0; }
  .emotion-layout .emotion-block .emotion-reasons { justify-content: flex-start; }
}

.emotion-block {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.emotion-block .h2 { margin-bottom: 28px; }
.emotion-intro {
  font-size: var(--t-body-l);
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto 28px;
}
.emotion-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin: 0 auto 36px;
  max-width: 720px;          /* wide enough for "не хватает команды · нет системы рядом" to fit on one line */
}
.emotion-reason {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);    /* restored original size — slightly smaller than --t-display-italic to feel less heavy */
  letter-spacing: 0;
  color: var(--text);
  position: relative;
  padding-right: 14px;
}
.emotion-reason::after {
  content: "·";
  color: var(--accent);
  position: absolute;
  right: 0;
}
.emotion-reason:last-child { padding-right: 0; }
.emotion-reason:last-child::after { content: ""; }

.emotion-bridge {
  font-family: var(--serif);
  font-size: var(--t-display-l);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--text);
  max-width: 28ch;
  margin: 0 auto;
}
.emotion-bridge .accent-word { font-style: italic; color: var(--accent); }
.emotion-cta { margin-top: 32px; }
@media (min-width: 900px) { .emotion-cta { margin-top: 36px; } }

/* ---------- Block 9: FAQ ---------- */
.faq {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}
.faq details {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--serif);
  font-size: var(--t-display-m);
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform var(--t-med) var(--ease);
}
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .answer {
  padding: 0 0 24px;
  color: var(--text-muted);
  font-size: var(--t-body-m);
  line-height: 1.6;
  max-width: 60ch;
}

.faq-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ---------- Block 10: Final CTA card ---------- */
.cta-final {
  padding-block: var(--section-pad-y-lg);
  background: var(--bg-warm);
}
.cta-card {
  position: relative;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  overflow: hidden;
}
@media (min-width: 900px) {
  .cta-card {
    grid-template-columns: var(--ratio-text-image);
    gap: var(--grid-gap);
    align-items: center;
  }
}
.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,90,31,0.18), transparent 55%);
  pointer-events: none;
}
.cta-card > * { position: relative; }

.cta-card .h2 {
  color: var(--text-on-dark);
  margin-bottom: 16px;
  max-width: 18ch;
}
.cta-card .lede { color: var(--text-muted-dark); margin-bottom: 28px; max-width: 48ch; }

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.cta-actions .btn { font-size: 17px; min-height: 60px; padding: 0 30px; }
.cta-meta {
  font-size: var(--t-body-s);
  letter-spacing: 0.04em;
  color: var(--text-muted-dark);
}

/* ---------- Apply modal (CSS-only via :target) ---------- */
.apply-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;  /* top-pin on every viewport: keeps the toggle row anchored when idea-mode swaps the fields below it. Centering would slide the card up/down by half the height delta on each toggle, displacing the buttons under the user's finger/cursor. Previously this was scoped mobile-only with a min-height hack on desktop — see commit-log for the rationale switch. */
  justify-content: center;
  padding: clamp(16px, 4vh, 48px) 0;
  visibility: hidden;
  transition: visibility 0s linear 480ms;  /* matches the slowest child (card) so the modal stays interactive until its exit animation finishes */
}
.apply-modal:target {
  visibility: visible;
  transition: visibility 0s linear 0s;
}
/* Backdrop fades in over 280ms — gives the dark blur a clear arrival of its own,
   so when the modal is opened from the mobile drawer the user sees: drawer slides
   up → dim layer washes in → card emerges. Without this stagger the three motions
   collide and read as a snap. */
.apply-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 280ms var(--ease);
}
.apply-modal:target .apply-modal-backdrop {
  opacity: 1;
}
.apply-modal-card {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  max-height: 100%;  /* flex parent provides the viewport-based bounds via its padding */
  padding: clamp(20px, 3.5vw, 32px);
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.7);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(20px) scale(0.96);  /* more pronounced "rise + grow in" — translateY:8 was too subtle to register as motion at 320ms */
  transition:
    opacity 380ms var(--ease) 120ms,        /* 120ms delay lets the drawer get out of the way first when opening from the mobile menu */
    transform 420ms var(--ease) 120ms;
}
.apply-modal:target .apply-modal-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.apply-modal-card h2 {
  font-size: var(--t-display-m);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  padding-right: 48px;
  color: var(--text-on-dark);
}
.apply-modal-card .lede {
  color: var(--text-muted-dark);
  margin: 0 0 18px;
  font-size: var(--t-body-s);
}
.apply-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-dark);
  background: var(--surface-dark-2);
  border-radius: 999px;
  color: var(--text-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  text-decoration: none;
}
.apply-modal-close:hover { color: var(--accent); border-color: var(--accent); }
.apply-modal-close svg { width: 16px; height: 16px; }

/* Contact modal — narrower card, no form */
.apply-modal-card--contact { width: min(440px, calc(100vw - 32px)); }
.apply-modal-card--contact .lede { margin-bottom: 20px; }
/* Center vertically — the apply-modal top-pin guard against idea-mode height swaps
   doesn't apply here (contact modal has no toggles, constant height). */
.apply-modal--contact { align-items: center; }

/* ---------- Apply modal: warmer dark theme + welcoming touches ----------
   Keep the cinematic dark backdrop, shift undertone from cold-grey to warm-espresso,
   replace harsh focus rings with a soft accent-soft halo, give inputs more breathing room.
   Scoped to #apply-modal so the contact-modal pill list stays as-is. */
#apply-modal .apply-modal-card {
  background: #1B1812;        /* warm espresso, vs cold #141416 */
  border-color: #2A2520;
}
#apply-modal .field input,
#apply-modal .field textarea {
  background: #221E16;        /* slightly warmer than the card */
  border-color: #2E2820;
  padding: 14px 18px;         /* comfortable breathing room inside inputs */
  border-radius: var(--radius-sm); /* tighter corners for compact form */
}
/* Placeholder text — slightly dimmer than the browser default (#757575) and warm-tinted to
   match the espresso card, so the hints sit visibly subordinate to the user's own input. */
#apply-modal .field input::placeholder,
#apply-modal .field textarea::placeholder {
  color: #5F5851;
  opacity: 1;  /* Firefox defaults to ~0.54 on top of color — explicit 1 keeps the chosen tone honest */
}
#apply-modal .field input:focus,
#apply-modal .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.12);   /* gentle peach halo */
}
#apply-modal .idea-mode-toggle {
  background: #221E16;
  border-color: #2E2820;
}
#apply-modal .apply-modal-close {
  background: #221E16;
  border-color: #2E2820;
}
#apply-modal .field input[type="file"]::file-selector-button {
  background: #2A2520;
  border-color: #3A332A;
}
/* Spacing inside apply-modal — comfortable breathing room */
#apply-modal .form { gap: 18px; }
#apply-modal .field { gap: 8px; }                 /* between label and its input */
#apply-modal .idea-mode-toggle { margin: 8px 0 4px; }
#apply-modal .idea-mode-option span { padding: 10px 14px; }
#apply-modal .form-submit { margin-top: 8px; }

/* Mobile (<720px): tighten everything so the whole form fits in iPhone-14-class viewport (~390×690 with Safari chrome). Without these overrides the now-mode card needs 734px and the "Поехали" submit button gets pushed below the fold. Measured: this set saves ~105px and brings submit fully into view. */
@media (max-width: 720px) {
  #apply-modal .form { gap: 14px; }
  #apply-modal .field { gap: 6px; }
  #apply-modal .apply-modal-card h2 { margin-bottom: 4px; }
  #apply-modal .apply-modal-card .lede { margin-bottom: 12px; }
  #apply-modal .field input,
  #apply-modal .field textarea { padding: 12px 14px; }
  #apply-modal .idea-mode-toggle { margin: 4px 0 2px; }
  #apply-modal .idea-mode-option span { padding: 8px 12px; }
  #apply-modal #f-idea { min-height: 76px; }
  #apply-modal .form-submit { margin-top: 4px; }
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface-dark-2);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  color: var(--text-on-dark);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.contact-row:hover {
  border-color: var(--accent);
  background: var(--surface-dark);
}
.contact-row:hover .contact-arrow { color: var(--accent); transform: translate(2px, -2px); }
.contact-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.contact-icon svg { width: 20px; height: 20px; }
.contact-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.contact-label {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
}
.contact-value {
  font-size: var(--t-body-m);
  color: var(--text-on-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-muted-dark);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

/* Form */
.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Visually hidden — keep for screen readers, hide visually */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* (optional) tag next to label */
.field-optional {
  margin-left: 6px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted-dark);
  opacity: 0.7;
}

/* Idea-mode toggle: pill-tabs that flip which fieldset shows below */
.idea-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 8px 0 4px;
  padding: 4px;
  border: 1px solid var(--border-dark);
  border-radius: 999px;
  background: var(--surface-dark-2);
}
.idea-mode-option {
  position: relative;
  text-align: center;
  cursor: pointer;
}
.idea-mode-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.idea-mode-option span {
  display: block;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: var(--t-body-s);
  color: var(--text-muted-dark);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.idea-mode-option input:checked + span {
  background: var(--accent);
  color: #fff;
}
.idea-mode-option:hover input:not(:checked) + span { color: var(--text-on-dark); }
.idea-mode-option input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Conditional sections — use :has() to read which radio is checked, swap blocks.
   display: contents keeps inner .field rows participating in the form's flex gap. */
.idea-now-fields,
.idea-meeting-fields {
  display: none;
}
.form:has(#idea-now:checked) .idea-now-fields { display: contents; }
.form:has(#idea-meeting:checked) .idea-meeting-fields { display: contents; }

/* File input — minimal native styling tune-up so it doesn't look broken on dark surface */
.field input[type="file"] {
  padding: 12px 14px;
  font-size: var(--t-body-s);
  color: var(--text-muted-dark);
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid var(--border-dark);
  border-radius: 999px;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.field input[type="file"]::file-selector-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
}
.field input,
.field textarea {
  background: var(--surface-dark-2);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: var(--t-body-m);
  color: var(--text-on-dark);
  transition: border-color var(--t-fast) var(--ease);
  min-height: 50px;
  font: inherit;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
/* Tighter focus ring offset for form fields (they have generous inner padding already) */
.field input:focus-visible,
.field textarea:focus-visible {
  outline-offset: 1px;
}
.field textarea {
  resize: none;
  min-height: 96px;
  line-height: 1.5;
  /* Auto-grow with content so users never need to scroll inside the textarea.
     Browser support: Chrome 123+, Safari 17.4+, Firefox 129+ (mid-2024). Older
     browsers degrade gracefully to a fixed-height textarea with internal scroll. */
  field-sizing: content;
}
/* Focus / niche field starts compact (looks like a one-line input), grows when the user
   writes longer phrasing thanks to field-sizing above. */
#f-niche {
  min-height: 50px;
}
.field-error {
  display: none;
  color: var(--accent);
  font-size: var(--t-body-s);
}
.field.is-invalid .field-error { display: block; }
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--accent); }

.form-submit {
  margin-top: 8px;
  min-height: 60px;
  font-size: 17px;
  width: 100%;
}

.form-status {
  display: none;
  color: var(--text-muted-dark);
  font-size: var(--t-body-s);
  text-align: center;
  margin-top: 6px;
}
.form-status.is-visible { display: block; }
/* Error keeps the heavy bordered treatment — failed submits deserve visual attention. */
.form-status.is-error {
  background: rgba(220,50,50,0.12);
  border: 1px solid rgba(220,50,50,0.45);
  color: #FF6E6E;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--t-body-m);
  text-align: left;
  margin-top: 8px;
}

/* Honeypot: visually hidden (display:none gets detected by bots, off-screen positioning doesn't). */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

/* ---------- Thank-you page (/thank-you, /ru/thank-you) ----------
   Dedicated post-submit URL so Google Ads conversion event can fire from <head>
   on page load (standard gtag pattern). The card carries the warm-dark
   apply-modal aesthetic so the user's visual context stays continuous across
   the modal -> /thank-you handoff. */
.thank-you-page {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
}
.thank-you-card {
  width: min(520px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 40px);
  background: #1B1812;                       /* warm espresso — matches #apply-modal .apply-modal-card */
  color: var(--text-on-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.7);
}
/* /thank-you replicates the apply-modal experience: the homepage renders behind
   the card (via sandboxed iframe — scripts disabled, decoration only), blurred
   and dimmed. Visually identical to opening the apply modal, except the modal
   never closes — user lands on it directly. */
.thank-you-body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow: hidden;  /* iframe is scaled up for full-edge blur — clip overflow */
}
.thank-you-backdrop-iframe {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
  /* Filter:blur fades edges to transparent — scale up so the blurred halo doesn't
     produce a visible cream rim around the viewport edge. */
  transform: scale(1.05);
  transform-origin: center;
}
/* Dim layer over the blurred homepage — same tone as .apply-modal-backdrop. */
.thank-you-body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 10, 0.72);
  z-index: 1;
  pointer-events: none;
}
.thank-you-body .thank-you-page {
  position: relative;
  z-index: 2;
  min-height: 100vh;  /* no header above; main fills the viewport */
}
.thank-you-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,90,31,0.18);
  color: var(--accent);
}
.thank-you-icon svg { width: 32px; height: 32px; }
.thank-you-page h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-display-l);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
}
.thank-you-page p {
  margin: 0;
  max-width: 34ch;
  color: var(--text-muted-dark);
  font-size: var(--t-body-l);
  line-height: 1.5;
}
.thank-you-card .btn { margin-top: 6px; min-width: 200px; }

/* Sidebar "What's next" — sits inside the dark cta-card, so it gets a subtle
   divider instead of a full card-on-card look */
.next-steps {
  border-top: 1px solid var(--border-dark);
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
@media (min-width: 900px) {
  .next-steps {
    border-top: 0;
    border-left: 1px solid var(--border-dark);
    padding-top: 0;
    padding-left: var(--card-pad-x);
  }
}
.next-steps h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.next-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.next-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,90,31,0.18);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-body-s);
  font-weight: 500;
  flex-shrink: 0;
}
.next-step-text {
  font-size: var(--t-body-m);
  line-height: 1.5;
  color: var(--text-on-dark);
}
.next-step-text small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-body-s);
  color: var(--text-muted-dark);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding-block: 56px 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 800px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
  }
}
.footer-logo { width: auto; height: 24px; }
.footer-tag {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-dark);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.3;
  color: var(--text-muted-dark);
  max-width: 32ch;
}
.footer-col h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  margin: 0 0 16px;
}
.footer-col a {
  display: block;
  padding: 4px 0;
  color: var(--text-on-dark);
  font-size: 15px;
}
.footer-col a:hover { color: var(--accent); }
.footer-contact {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  font-size: 15px;
  color: var(--text-muted-dark);
}
.footer-contact a {
  display: inline;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-dark);
  transition: color 0.15s, text-decoration-color 0.15s;
}
.footer-contact a:hover { text-decoration-color: var(--accent); }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted-dark);
}
.footer-bottom a {
  color: var(--text-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-dark);
  transition: color 0.15s, text-decoration-color 0.15s;
}
.footer-bottom a:hover { color: var(--accent); text-decoration-color: var(--accent); }
@media (min-width: 720px) {
  .footer-bottom { flex-direction: row; align-items: center; }
}

/* ---------- Visibility utilities ---------- */
@media (max-width: 719.98px) { .no-mobile  { display: none !important; } }
@media (min-width: 720px)    { .no-desktop { display: none !important; } }

/* ---------- Visually hidden (a11y) ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .underline-mark::after { animation: none; transform: scaleX(1); }
}