/* Выжимка используемых правил из легаси styles.css (86KB) — автогенерация 27.07.2026 */
/* =========================================================================
   eurogarant — ВНЖ Испании под ключ. Лендинг. styles.css
   Дизайн-токены: concept.md §1 (все перенесены в :root).
   ========================================================================= */

/* ---------- :root — ВСЕ дизайн-токены ---------- */
:root{
  /* 1.1 Palette — Primary */
  --primary-900:#0A2A43; --primary-800:#0E3A5C; --primary-700:#13507E;
  --primary-600:#1A6AA6; --primary-500:#2E86C1; --primary-300:#8FC4E3;
  --primary-100:#DCEBF5;
  /* Accent */
  --accent-700:#B5471F; --accent-600:#D2622A; --accent-500:#E27A3F;
  --accent-400:#F0A368; --accent-200:#FAD9BF;
  /* Neutrals */
  --ink-900:#0F1B26; --ink-700:#33424F; --ink-500:#5B6B78; --ink-300:#A7B4BE;
  --surface-50:#F6FAFD; --surface-0:#FFFFFF; --text-on-dark:#EAF3FA;
  /* Glass */
  --glass-light:rgba(255,255,255,0.55);
  --glass-light-soft:rgba(255,255,255,0.38);
  --glass-dark:rgba(12,40,60,0.42);
  --glass-border:rgba(255,255,255,0.55);
  --glass-border-dark:rgba(255,255,255,0.16);
  --glass-tint-primary:rgba(46,134,193,0.10);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,0.66) 0%,rgba(255,255,255,0.5) 100%);
  /* Semantic */
  --success-600:#1E8E5A; --success-bg:rgba(30,142,90,0.12);
  --danger-600:#C0392B; --danger-bg:rgba(192,57,43,0.10);
  --warning-600:#C98A12;

  /* 1.2 Gradients / blobs */
  --grad-page:linear-gradient(180deg,#F6FAFD 0%,#EEF5FB 60%,#F6FAFD 100%);
  --grad-hero:radial-gradient(120% 120% at 80% 10%,#1A6AA6 0%,#0E3A5C 55%,#0A2A43 100%);
  --grad-cta:linear-gradient(135deg,#A8411C 0%,#C0541F 100%);
  --grad-dark:linear-gradient(160deg,#0E3A5C 0%,#0A2A43 100%);
  --blob-sea:radial-gradient(circle,rgba(46,134,193,0.6) 0%,rgba(46,134,193,0) 68%);
  --blob-sun:radial-gradient(circle,rgba(240,163,104,0.55) 0%,rgba(240,163,104,0) 68%);

  /* 1.3 Typography */
  --font-head:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-h1:clamp(1.4rem,1.05rem + 1.5vw,1.95rem);
  --fs-h2:clamp(1.2rem,1.0rem + 0.9vw,1.55rem);
  --fs-h3:clamp(1.05rem,0.98rem + 0.4vw,1.25rem);
  --fs-lead:clamp(1.05rem,0.98rem + 0.5vw,1.3rem);
  --fs-body:clamp(1.0rem,0.97rem + 0.15vw,1.125rem);
  --fs-small:0.875rem;
  --fs-overline:0.75rem;

  /* 1.4 Radii */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* 1.5 Shadows — contact + cool-tinted ambient (audit v4) */
  --sh-1:0 1px 2px rgba(10,42,67,0.07);
  --sh-2:0 2px 4px rgba(10,42,67,0.05),0 8px 20px rgba(10,42,67,0.07);
  --sh-3:0 4px 8px rgba(10,42,67,0.06),0 18px 48px rgba(13,80,126,0.12);
  --sh-4:0 8px 16px rgba(10,42,67,0.08),0 32px 64px rgba(13,80,126,0.16);
  --sh-cta:0 10px 24px rgba(210,98,42,0.35);
  --sh-inset-glass:inset 0 1px 0 rgba(255,255,255,0.6);

  /* 1.6 Spacing (8pt) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --space-section:clamp(48px,7vw,128px);
  --container:1200px; --container-narrow:760px; --gutter:clamp(16px,4vw,40px);

  /* 1.7 Blur */
  --blur-sm:blur(8px); --blur-md:blur(16px); --blur-lg:blur(24px);

  /* 1.8 Animation */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:600ms; --dur-blob:18s;

  /* 1.9 Z-index */
  --z-blob:0; --z-base:1; --z-glass:2; --z-sticky-header:40;
  --z-popup-overlay:90; --z-popup:100; --z-toast:120; --z-cta-bar:80;
}
/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%; scroll-padding-top:72px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0; font-family:var(--font-body); font-size:var(--fs-body);
  line-height:1.6; color:var(--ink-900); background:var(--surface-50);
  background-image:var(--grad-page);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Unbounded',sans-serif; margin:0 0 var(--space-4); color:inherit;}
h1{font-size:var(--fs-h1); line-height:1.14; font-weight:600; letter-spacing:-0.02em;}
h2{font-size:var(--fs-h2); line-height:1.2; font-weight:600; letter-spacing:-0.01em;}
h3{font-size:var(--fs-h3); line-height:1.25; font-weight:600; letter-spacing:-0.005em;}
p{margin:0 0 var(--space-4);}
a{color:var(--primary-600); text-decoration:none; transition:color var(--dur-2) var(--ease-in-out);}
a:hover{color:var(--primary-500);}
img,svg{max-width:100%; height:auto; display:block;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}
/* Accessibility: visible focus ring */
:focus-visible{outline:3px solid var(--primary-500); outline-offset:2px; border-radius:4px;}
/* фокус-кольцо белым на тёмных поверхностях (hero/final-cta/footer) для видимости */
.hero :focus-visible,.final-cta :focus-visible,.site-footer :focus-visible{outline-color:#FFFFFF;}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200; background:var(--primary-700);
  color:#fff; padding:var(--space-3) var(--space-4); border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0;}
/* ---------- Layout helpers ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);}
.section{padding-block:var(--space-section); position:relative;}
.lead{font-size:var(--fs-lead); line-height:1.5; font-weight:450; color:var(--ink-700); max-width:62ch;}
.overline{
  display:inline-block; font-size:var(--fs-overline); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-700);
}
/* ---------- Glass surface ---------- */
.glass{
  background:var(--glass-sheen),var(--glass-tint-primary);
  -webkit-backdrop-filter:var(--blur-md); backdrop-filter:var(--blur-md);
  border:1px solid rgba(255,255,255,0.72);
  border-radius:var(--r-lg); box-shadow:var(--sh-3),var(--sh-inset-glass),inset 0 -1px 0 rgba(10,42,67,0.04);
}
.glass-soft{
  background:var(--glass-sheen),var(--glass-tint-primary);
  -webkit-backdrop-filter:var(--blur-md); backdrop-filter:var(--blur-md);
  border:1px solid var(--glass-border); border-radius:var(--r-lg);
  box-shadow:var(--sh-2),var(--sh-inset-glass);
}
/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:48px; padding:var(--space-3) var(--space-6);
  font-family:var(--font-head); font-weight:700; font-size:1rem; line-height:1.2;
  border:none; border-radius:var(--r-pill); text-align:center;
  transition:transform var(--dur-2) var(--ease-in-out),
             background var(--dur-2) var(--ease-in-out),
             box-shadow var(--dur-2) var(--ease-in-out);
}
.btn--cta{background:var(--grad-cta); color:#fff; box-shadow:var(--sh-cta);}
.btn--cta:hover{background:var(--accent-700); color:#fff; transform:translateY(-2px);}
.btn--cta:active{transform:scale(0.98);}
.btn--lg{min-height:54px; font-size:1.0625rem; padding-inline:var(--space-7);}
/* =========================================================================
   B01 — Hero
   ========================================================================= */
.hero{
  position:relative; color:var(--text-on-dark); background:var(--grad-hero);
  padding-block:clamp(96px,10vw,150px) var(--space-section); overflow:hidden;
}
/* скрим: гарантирует тёмную подложку под текстом поверх светлых зон фото */
.hero::before{content:""; position:absolute; inset:0; z-index:var(--z-base); pointer-events:none;
  background:linear-gradient(180deg,rgba(10,42,67,0.55),rgba(10,42,67,0.35));}
.hero h1{color:var(--text-on-dark); line-height:1.05;}
.hero h1 .accent{background:linear-gradient(120deg,#F0A368,#E27A3F); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--accent-400);}
.hero .overline{color:#F8C79B; text-shadow:0 1px 2px rgba(10,42,67,.6);}
/* В одноколоночной раскладке (≤1023) форма идёт под кнопкой «Получить консультацию» — увеличиваем отступ сверху */
@media (max-width:1023px){.hero-form{margin-top:var(--space-6);}}
.consent{display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--fs-small); color:var(--ink-700); margin-bottom:var(--space-4);}
.consent input{flex:0 0 auto; width:22px; height:22px; margin-top:2px; accent-color:var(--accent-600);}
/* =========================================================================
   B06 — Этапы (timeline)
   ========================================================================= */
.timeline{display:grid; gap:var(--space-5); position:relative;}
.stage-card{padding:var(--space-5); display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-3); align-items:center; position:relative;}
.stage-card .node{grid-row:1; grid-column:1; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--grad-cta); color:#fff; font-family:var(--font-head); font-weight:800; box-shadow:0 4px 12px rgba(210,98,42,0.3),var(--sh-inset-glass);}
.stage-card h3{grid-row:1; grid-column:2; margin:0;}
.stage-card p{grid-column:1 / -1; margin:0;}
.price-card{padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); transition:transform var(--dur-2),box-shadow var(--dur-2);}
.price-card:hover{transform:translateY(-4px); box-shadow:var(--sh-3);}
.price-card h3{font-size:1.6rem; line-height:1.1; color:var(--primary-700);}
.price-card ul{display:grid; gap:var(--space-2); margin-block:var(--space-3);}
.price-card li{display:flex; gap:var(--space-2); align-items:flex-start; font-size:0.95rem; color:var(--ink-700);}
.price-card li::before{content:"✓"; color:var(--success-600); font-weight:700; flex:0 0 auto;}
.price-card .btn{margin-top:auto;}
.faq-item{border-radius:var(--r-lg); overflow:hidden; background:var(--glass-sheen),var(--glass-tint-primary); border:1px solid rgba(255,255,255,0.6); box-shadow:var(--sh-1); -webkit-backdrop-filter:var(--blur-md); backdrop-filter:var(--blur-md); transition:box-shadow var(--dur-2);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.faq-item{background:rgba(255,255,255,0.85);}}
.faq-q{width:100%; display:flex; gap:var(--space-4); align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-5); background:transparent; border:none; text-align:left; font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:var(--primary-700); min-height:56px; transition:background var(--dur-2);}
.faq-q:hover{background:var(--glass-tint-primary);}
/* =========================================================================
   B15 — Финальный CTA + форма (dark)
   ========================================================================= */
.final-cta{position:relative; background:var(--grad-dark); color:var(--text-on-dark); overflow:hidden;}
.final-cta__inner{position:relative; z-index:var(--z-glass); max-width:760px; margin-inline:auto; text-align:center;}
.final-cta h2{color:var(--text-on-dark);}
.final-cta .lead{color:var(--text-on-dark); opacity:0.92;}
.final-microtrust{margin-top:var(--space-4); font-size:var(--fs-small); color:var(--primary-300);}
/* Success message (hidden, structure only) */
.form-success{display:none; padding:var(--space-5); border-radius:var(--r-md); background:var(--success-bg); color:var(--success-600); border:1px solid rgba(30,142,90,0.3);}
/* «Каналы связи» — сине-голубой градиент, только крупные белые иконки по центру */
.contacts-grid .contacts-panel.contacts-panel--channels{
  background:linear-gradient(135deg,var(--primary-700) 0%,var(--primary-500) 65%,var(--primary-300) 125%);
  border:none; color:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:var(--space-5);
}
.modal{
  position:relative; z-index:var(--z-popup); width:100%; max-width:540px;
  max-height:90vh; overflow-y:auto; padding:var(--space-6);
  background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid var(--glass-border); border-radius:var(--r-lg); box-shadow:var(--sh-3);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.modal{background:rgba(255,255,255,0.96);}}
/* =========================================================================
   Responsive — mobile-first breakpoints 360 / 768 / 1024 / 1440
   ========================================================================= */

/* ≤768: burger + sticky CTA bar */
@media (max-width:768px){
  .main-nav,.header__cta{display:none;}
  .burger{display:flex;}
  /* Бургер и иконки мессенджеров — в правый угол, не по центру */
  .header__actions{margin-left:auto;}
  .header__inner{gap:var(--space-3);}
  /* 4 мессенджера + бургер должны умещаться: компактные иконки и зазоры */
  .header__actions{gap:6px;}
  .header__msg{gap:6px;}
  .header__msg .icon-btn{width:38px; height:38px;}
  .header__msg .icon-btn svg{width:20px; height:20px;}
  .burger{width:40px; height:40px;}
  .mobile-menu{display:flex;}
}
/* Узкие телефоны: ужимаем иконки ещё, чтобы 4 мессенджера + бургер не давали оверфлоу */
@media (max-width:400px){
  .header__actions{gap:4px;}
  .header__msg{gap:4px;}
  .header__msg .icon-btn{width:32px; height:32px;}
  .header__msg .icon-btn svg{width:18px; height:18px;}
  .burger{width:38px; height:38px;}
}
/* Очень узкие экраны (<360): минимальные иконки, чтобы влезли логотип + 4 мессенджера + бургер */
@media (max-width:359px){
  .header__msg .icon-btn{width:30px; height:30px;}
  .header__msg .icon-btn svg{width:17px; height:17px;}
  .burger{width:34px; height:34px;}
  .sticky-cta{display:flex;}
  body{padding-bottom:76px;}
  .refusal{grid-template-columns:1fr; gap:var(--space-2); text-align:left;}
  .refusal .arr{justify-self:start; transform:rotate(90deg);}
  .refusal:hover .arr{transform:rotate(90deg) translateX(4px);}

  /* ---- Perf: backdrop-filter крайне дорог на мобильных GPU (десятки стеклянных
     слоёв → долгая отрисовка/джанк). Заменяем блюр на полупрозрачный фон без блюра. ---- */
  .glass,.glass-soft,.glass-dark,.faq-item{-webkit-backdrop-filter:none; backdrop-filter:none;}
  .glass:not(.price-card--featured),.glass-soft,.faq-item{background:rgba(255,255,255,0.9);}
  .glass-dark{background:rgba(12,40,60,0.9);}
  .site-header{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(246,250,253,0.96);}
  .site-header.scrolled{background:rgba(246,250,253,0.98);}
  .mobile-menu{-webkit-backdrop-filter:none; backdrop-filter:none; background:#F6FAFD;}
  .sticky-cta{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(246,250,253,0.97);}
  .modal{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(255,255,255,0.97);}
  .modal-overlay{-webkit-backdrop-filter:none; backdrop-filter:none;}
  .btn-msg,.chip--glass,.contact-channel,.icon-btn{-webkit-backdrop-filter:none; backdrop-filter:none;}
  /* Perf: убираем непрерывную анимацию блобов и тёплое свечение-источник за hero-формой */
  .blob{animation:none !important;}
  .hero__grid::after{display:none;}
}
/* ≥769: 2-column card grids (769, not 768, чтобы не конфликтовать с max-width:768) */
@media (min-width:769px){
  .hero__grid{grid-template-columns:7fr 5fr; gap:var(--space-7);}
  .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pains-grid{grid-template-columns:repeat(2,1fr);}
  .steps-row{grid-template-columns:repeat(2,1fr);}
  .guarantee-grid{grid-template-columns:repeat(2,1fr);}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .socproof-slots{grid-template-columns:repeat(3,1fr);}
  .reviews{grid-template-columns:repeat(3,1fr);}
  .objections{grid-template-columns:repeat(2,1fr);}
  .footer__grid{grid-template-columns:1.4fr 1fr;}
}
/* 769–1023px: прячем CTA в шапке — нав + 4 иконки мессенджеров умещаются без бургера, оверфлоу = 0 */
@media (min-width:769px) and (max-width:1023px){
  .header__cta{display:none;}
  .header__msg .icon-btn{width:40px; height:40px;}
}
/* ≥1024: hero 2 columns, 3-col grids, horizontal contacts */
@media (min-width:1024px){
  .hero__grid{grid-template-columns:7fr 5fr; gap:var(--space-8);}
  .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .steps-row{grid-template-columns:repeat(4,1fr);}
  .guarantee-grid{grid-template-columns:repeat(3,1fr);}
  .trust-grid{grid-template-columns:repeat(3,1fr);}
  .timeline{grid-template-columns:repeat(5,1fr);}
  /* В узких 5-колоночных карточках номер ставим НАД заголовком: иначе длинные слова
     («диагностика», «документов», «переводы») не помещаются рядом с номером и вылезают за блок */
  .stage-card{grid-template-columns:1fr;}
  .stage-card .node{grid-area:auto;}
  .stage-card h3{grid-area:auto; min-width:0; overflow-wrap:anywhere;}
  .stage-card p{grid-area:auto; min-width:0; overflow-wrap:anywhere;}
  .stage-card .term{grid-area:auto; justify-self:start;}
  .pricing-grid{grid-template-columns:repeat(3,1fr);}
  .pains-grid{grid-template-columns:repeat(3,1fr);}
  .vnj-grid{grid-template-columns:1.1fr 0.9fr;}
  .contacts-grid{grid-template-columns:1fr 1fr;}
  .price-card--featured{transform:translateY(-12px);}
  .price-card--featured:hover{transform:translateY(-16px);}
}
/* ≥1440: max air */
@media (min-width:1440px){
  .blob--sea{width:640px; height:640px;}
  .blob--sun{width:560px; height:560px;}
}
/* parallax helper toggled via JS; disabled on reduced-motion */
@media (prefers-reduced-motion:reduce){
  .blob{animation:none !important;}
  *{scroll-behavior:auto;}
}
@keyframes float-a{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-24px,20px) scale(1.06);}}
@keyframes float-b{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(20px,-18px) scale(1.05);}}
/* =========================================================================
   Формы: inline-ошибки + квиз-шаги (Шаг 11a, backend)
   ========================================================================= */
.field--error input,.field--error textarea{border-color:var(--danger-600); box-shadow:0 0 0 3px var(--danger-bg);}
button[aria-busy="true"]{opacity:.75; cursor:progress;}
/* ---------- QA-фикс: устранение горизонтального оверфлоу (Шаг 12, браузерный) ---------- */
/* грид-треки и их контент должны уметь сжиматься ниже min-content (длинные слова в заголовках) */
.cards-grid > *, .pains-grid > *, .timeline > *, .pricing-grid > *,
.guarantee-grid > *, .trust-grid > *, .objections > *, .reviews > *{min-width:0;}
.osn-card h3, .osn-card dd, .price-card h3{overflow-wrap:anywhere; word-break:break-word;}
img{max-width:100%;}
/* =========================================================================
   UI/UX-аудит v2 (skill ui-ux-pro-max, 2026-06-07) — точечные улучшения
   ========================================================================= */
/* tap-delay: убрать 300ms задержку тача на интерактиве (web) */
.btn,.btn-msg,.icon-btn,.burger,.faq-q,.quiz-opt,.contact-channel,.modal__close,
.main-nav a,.mobile-menu a,.arrow-link,a[href]{touch-action:manipulation;}
/* no-emoji-icons + color-not-only: маркер предупреждения через CSS (не эмодзи), символ+цвет */
.warn-note{position:relative; padding-left:26px;}
.warn-note::before{
  content:"!"; position:absolute; left:0; top:1px;
  width:18px; height:18px; border-radius:50%;
  background:rgba(201,138,18,0.16); color:var(--warning-600);
  font-weight:800; font-size:12px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
/* =========================================================================
   Audit v4 — «Refined depth glassmorphism» + Editorial Trust + ритм
   (skill ui-ux-pro-max, многоагентный аудит, 2026-06-07)
   ========================================================================= */
/* #7 — ритм: лёгкое тонирование чётных секций + хайрлайн-разделители (тёмные секции исключены) */
.section:nth-of-type(even):not(.final-cta){background:linear-gradient(180deg,rgba(206,226,242,0.55),rgba(206,226,242,0.10));}
.section + .section{border-top:1px solid rgba(13,80,126,0.10);}
/* #12/#2 — единый card-rise: подъём + sh-4 (бордеры карточек сохраняются из их правил) */
.osn-card,.step-card,.guarantee-card,.trust-card,.review-card,.price-card{transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2);}
.osn-card:hover,.osn-card:focus-within,.step-card:hover,.guarantee-card:hover,.trust-card:hover,.review-card:hover,.price-card:hover{transform:translateY(-6px); box-shadow:var(--sh-4);}
.section__head--center .lead,.final-cta .lead{margin-inline:auto;}
/* #9 — крупные панели/формы на r-xl для согласованного вложения */
.hero-form,.dark-form,.modal{border-radius:var(--r-xl);}
/* reduced-motion: убрать увеличенный подъём карточек */
@media (prefers-reduced-motion:reduce){
  .osn-card:hover,.step-card:hover,.guarantee-card:hover,.trust-card:hover,.review-card:hover,.price-card:hover{transform:none;}
}
.faq-item:hover{box-shadow:var(--sh-2);}
/* ===== Responsive cleanups (QA) ===== */
@media (min-width:769px){
  .guarantee-grid{grid-template-columns:repeat(3,1fr);}
  .objections{grid-template-columns:1fr;}
  .header__msg .icon-btn{width:42px; height:42px;}
}
@media (max-width:768px){body{padding-bottom:74px;}}
/* ============================================================
   PREMIUM POLISH (perfection pass) — премиум-визуал, движение,
   адаптив и доступность. Намеренно в конце для приоритета каскада.
   ============================================================ */

/* --- Глобальный видимый фокус (a11y, контрастное кольцо) --- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible,.faq-q:focus-visible,.quiz-opt:focus-visible{
  outline:3px solid var(--accent-400); outline-offset:2px; border-radius:6px;
}
/* --- Микро-нажатие на кнопках (тактильная отдача) --- */
.btn{transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background var(--dur-2),color var(--dur-2);}
.btn:active{transform:translateY(1px) scale(0.985);}
@keyframes eg-success-in{from{opacity:0; transform:translateY(8px) scale(0.97);} to{opacity:1; transform:none;}}
@keyframes eg-overlay-in{from{opacity:0;} to{opacity:1;}}
@keyframes eg-modal-in{from{opacity:0; transform:translateY(16px) scale(0.975);} to{opacity:1; transform:none;}}
/* --- Sticky CTA: выезд снизу при первом показе --- */
@media (max-width:768px){
  .sticky-cta{animation:eg-sticky-up .45s var(--ease-out) both;}
}
@keyframes eg-sticky-up{from{transform:translateY(110%);} to{transform:translateY(0);}}
/* --- Тач-цель точек карусели (визуал 9px, кликабельно 32px) --- */
.rc-dot{position:relative;}
/* --- «Причины отказов» на мобиле: стрелка вниз вместо скрытия --- */
@media (max-width:768px){
  .refusal{grid-template-columns:1fr; row-gap:var(--space-2); text-align:left;}
  .refusal .arr{display:inline-block; transform:rotate(90deg); justify-self:start;}
}
/* --- Hero-фото на узких экранах: выше, чтобы было узнаваемо --- */
@media (max-width:480px){ .hero__photo{aspect-ratio:16/10;} }
/* --- Hero на планшете (769–1023): форма во всю ширину, не сжата --- */
@media (min-width:769px) and (max-width:1023px){
  .hero__grid{grid-template-columns:1fr; gap:var(--space-6);}
  .hero-form{max-width:560px;}
}
/* --- Hero CTA-кнопки на мобиле: в столбец, во всю ширину --- */
@media (max-width:560px){
  .hero__cta-row{flex-direction:column; align-items:stretch;}
  .hero__cta-row .btn{width:100%;}
}
/* --- Ультраширокие экраны: шире контейнер, меньше пустых полей --- */
@media (min-width:1600px){ :root{--container:1320px;} }
/* --- Reduced-motion: контент виден сразу, новые анимации выключены --- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important;}
  .form-success.show,.modal-overlay.open,.modal-overlay.open .modal,.sticky-cta{animation:none !important;}
  .btn:active,.icon-btn:active,.contact-channel:active{transform:none;}
}
@keyframes nodePulse{0%{transform:scale(0.85); opacity:0.65;} 70%{transform:scale(1.55); opacity:0;} 100%{opacity:0;}}
/* Когда JS активно ведёт блик (desktop + pointer:fine) — CSS-анимация не нужна,
   позицию двигают переменные через rAF-lerp. */
.hero__light.is-driven{animation:none;}
@keyframes heroSunDrift{
  /* амплитуда <=5% вьюпорта по X, лёгкий ход по Y — «солнце в зените», без выхода за hero */
  0%{   --sun-x:80%; --sun-y:18%; }
  50%{  --sun-x:75%; --sun-y:21%; }
  100%{ --sun-x:80%; --sun-y:16%; }
}
/* Старые браузеры без анимации кастом-свойств просто получат статичный блик
   в дефолтной точке — это валидный premium-fallback, не баг. */

/* ≤768px: производительность — святое. Блик фиксирован, без follow и без дрейфа.
   mix-blend-mode:screen дёшев (нет blur/canvas), оставляем как тонкое статичное свечение. */
@media (max-width:768px){
  .hero__light{
    animation:none;
    --sun-x:82%;
    --sun-y:14%;
    will-change:auto;
    /* чуть слабее на мобиле, чтобы наверняка не влиять на читаемость h1/формы */
    background:radial-gradient(
      300px 300px at var(--sun-x, 82%) var(--sun-y, 14%),
      rgba(240,163,104,0.16) 0%,
      rgba(240,163,104,0.05) 52%,
      rgba(240,163,104,0) 70%
    );
  }
}
/* reduced-motion: полностью гасим любое движение — остаётся статичный блик */
@media (prefers-reduced-motion:reduce){
  .hero__light{
    animation:none !important;
    will-change:auto;
  }
}
/* =========================================================================
   [34] Hero depth scroll-out — кинематографичный уход слоёв «к свету»
   Только композитные свойства (transform/opacity), переменные пишет JS.
   Блобы (.blob--sun/.blob--sea) НЕ трогаем здесь: их transform на десктопе
   ведёт существующий parallax-IIFE + float-keyframes — не клобберим.
   ========================================================================= */
[data-hero-depth]{ --eg-bg-y:0px; --eg-bg-scale:1; --eg-content-y:0px; --eg-content-op:1; }
/* will-change включаем ТОЛЬКО когда секция в зоне видимости (класс от JS),
   чтобы не держать слой-композит постоянно. */
[data-hero-depth].is-depth-active .hero__bg{ will-change: transform; }
/* Мобайл ≤768px: блобы и тяжёлые эффекты уже выключены проектом.
   Оставляем только лёгкий подъём контента, фон/scale не двигаем
   (фоновое фото на мобиле не должно «вскрывать» градиент). */
@media (max-width:768px){
  [data-hero-depth] .hero__bg{ transform:none; }
  [data-hero-depth].is-depth-active .hero__bg{ will-change:auto; }
  /* hero__grid продолжает получать мягкий translateY от JS (амплитуда там урезана). */
}
/* prefers-reduced-motion: полностью гасим движение — слои статичны,
   JS-модуль сам не запускается, но дублируем CSS-гард на случай гонок. */
@media (prefers-reduced-motion:reduce){
  [data-hero-depth] .hero__bg,
  [data-hero-depth].is-depth-active .hero__bg,
  [data-hero-depth].is-depth-active .hero__grid{
    transform:none !important; opacity:1 !important; will-change:auto !important;
  }
}
/* =========================================================================
   [34] Под ключ — восход-горизонт + одноразовый тёплый sheen на УТП
   Единственный акцент-момент на слогане-якоре «под ключ».
   Хук — существующий .reveal.is-visible на #hero-h1 (ноль нового JS).
   Аддитивно поверх правила .hero h1 .accent (styles.css:292).
   ========================================================================= */

/* Готовим существующий .accent к псевдоэлементу-горизонту и к sheen.
   position:relative — база для ::after; inline-block безопасен: текст с &nbsp;.
   Третий СВЕТЛЫЙ стоп (accent-300-ish #F6C089) вставлен по центру градиента,
   ширина 220% + начальная background-position справа => блик «спрятан». */
.hero h1 .accent{
  position:relative;
  display:inline-block;
  /* перекрываем фон из :292 расширенным градиентом с тёплым светлым стопом */
  background:linear-gradient(
    120deg,
    #F0A368 0%,
    #E27A3F 38%,
    #F6C089 50%,
    #E27A3F 62%,
    #F0A368 100%
  );
  background-size:220% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
          background-clip:text;
}
/* Линия-горизонт под словом: 1.5px, scaleX от центра (overflow-safe),
   терракота -> accent-400, без неон-свечения. Стартует невидимой. */
.hero h1 .accent::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-0.12em;
  height:1.5px;
  border-radius:1px;
  background:linear-gradient(90deg,var(--accent-700),var(--accent-400));
  transform:scaleX(0);
  transform-origin:50% 50%;
  opacity:0;
  pointer-events:none;
}
/* Реакция на reveal: один проход sheen + восход линии. Одноразово (forwards),
   will-change НЕ ставим. Класс is-visible приходит от существующего reveal-IO. */
.hero h1.reveal.is-visible .accent{
  animation:podkluchSheen 1100ms cubic-bezier(.22,.61,.36,1) 220ms 1 both;
}
@keyframes podkluchSheen{
  from{ background-position:100% 0; }
  to  { background-position:0% 0; }
}
@keyframes podkluchHorizon{
  0%  { transform:scaleX(0); opacity:0; }
  18% { opacity:1; }
  100%{ transform:scaleX(1); opacity:1; }
}
/* Мобильная деградация ≤768px: фолбэк-безопасность.
   Эффект лёгкий (только background-position + scaleX, без canvas/filter),
   но оставляем линию мгновенной без длинного прохода, чтобы не конкурировать
   с прочими reveal на узком экране. Sheen остаётся (дёшево, GPU-композит). */
@media (max-width:768px){
  .hero h1.reveal.is-visible .accent::after{
    animation-duration:520ms;
  }
}
/* prefers-reduced-motion: полностью гасим движение —
   текст и линия сразу в финальном состоянии, без анимаций. */
@media (prefers-reduced-motion:reduce){
  .hero h1 .accent,
  .hero h1.reveal.is-visible .accent{
    animation:none;
    background-position:0% 0;
  }
  .hero h1 .accent::after,
  .hero h1.reveal.is-visible .accent::after{
    animation:none;
    transform:scaleX(1);
    opacity:1;
  }
}
/* ============================================================
   [34] hero-form-glow-breath — дыхание тёплого ореола за формой
   Анимирует уже существующий источник свечения .hero__grid::after
   (объявлен в [#10], styles.css:782). На <=768px ::after уже
   display:none (styles.css:658) — модуль автоматически бесплатен.
   ============================================================ */

/* Интенсивность ореола через переменную, чтобы :focus-within
   усиливал её единым касанием каскада. Дышим opacity + scale
   (composited, без репейнта градиента). */
.hero__grid{ --glow-strength:1; }
/* Пауза, когда hero вне вьюпорта (класс ставит JS через IO) */
.hero__grid.glow-paused::after{ animation-play-state:paused; }
/* Точечно по форме (надёжнее, где поддержан :has()) */
.hero__grid:has(.hero-form:focus-within)::after,
.hero__grid:has(.hero-form:hover)::after{
  --glow-strength:1.32;
  transition:opacity .6s var(--ease-out);
}
@keyframes hero-glow-breath{
  0%,100%{ opacity:calc(var(--glow-strength) * 0.78); transform:scale(0.96); }
  50%    { opacity:calc(var(--glow-strength) * 1.11); transform:scale(1.05); }
}
/* <=768px: источник свечения уже скрыт — глушим анимацию на всякий
   случай (нулевая стоимость, защита от будущих правок). */
@media (max-width:768px){
  .hero__grid::after{ animation:none; will-change:auto; }
}
/* reduced-motion: дыхание ВЫКЛ полностью. Остаётся статичное свечение
   и мгновенное усиление по focus-within (без transition). */
@media (prefers-reduced-motion:reduce){
  .hero__grid::after{
    animation:none !important;
    will-change:auto;
    opacity:var(--glow-strength);
  }
  .hero__grid:focus-within::after,
  .hero__grid:has(.hero-form:focus-within)::after,
  .hero__grid:has(.hero-form:hover)::after{
    transition:none;
  }
}
/* =========================================================================
   [34] Сигнатура: консульский штамп RESIDENCIA / APROBADO в финальном CTA
   Единственная печать сайта. Впечатывается один раз при входе секции (JS даёт
   .is-stamped). Декоративна (aria-hidden, pointer-events:none), лежит над
   блобами, но не перекрывает фокусируемые поля формы.
   ========================================================================= */
.cta-stamp{
  position:absolute;
  top:-18px;
  right:-6px;
  z-index:var(--z-base);            /* над блобами (z-blob:0), под формой/потоком */
  width:148px;
  height:148px;
  pointer-events:none;
  color:var(--accent-400);          /* терракота-янтарь, читается на тёмном фоне */
  opacity:0;                        /* до впечатывания невидим, без CLS (absolute) */
  transform:scale(1.6) rotate(-12deg);
  transform-origin:center;
  filter:drop-shadow(0 1px 1px rgba(10,42,67,0.35));
  /* лёгкая неравномерность чернил — части оттиска чуть прозрачнее */
  will-change:transform, opacity;
}
@keyframes cta-stamp-press{
  0%  {opacity:0;    transform:scale(1.6) rotate(-12deg);}
  60% {opacity:0.92; transform:scale(0.97) rotate(-6deg);}
  100%{opacity:0.9;  transform:scale(1)    rotate(-7deg);}
}
/* Деградация на узких экранах: печать меньше и НЕ перекрывает заголовок/форму;
   статична (без анимации) — мобильная производительность святое. */
@media (max-width:768px){
  .cta-stamp{
    width:92px;
    height:92px;
    top:-30px;
    right:-2px;
    filter:none;
    opacity:0.9;
    transform:scale(1) rotate(-7deg);
    animation:none;
    will-change:auto;
  }
  .cta-stamp.is-stamped{animation:none;}
}
/* Доступность движения: печать показана статично «уже впечатанной», без удара */
@media (prefers-reduced-motion:reduce){
  .cta-stamp,
  .cta-stamp.is-stamped{
    opacity:0.9;
    transform:scale(1) rotate(-7deg);
    animation:none;
    will-change:auto;
  }
}
/* ============================================================
   [34] Count-up финансовых порогов ВНЖ (IPREM/NLV/DNV)
   Премиальный финтех count-up: счётчик отображения, в DOM лежит
   точный финал (SEO/noscript-safe). 0 CLS: tabular-nums + резерв ширины.
   ============================================================ */
.cnt{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  display:inline-block;            /* для резерва ширины под финал */
  min-width:var(--cnt-w,0);
  text-align:right;
  white-space:nowrap;              /* число не рвётся по строке */
}
/* пока счётчик «крутится» — лёгкий денежный акцент, без сдвига раскладки */
.cnt.is-counting{
  color:var(--accent-700);
  transition:color var(--dur-2) var(--ease-out);
}
/* Мобайл ≤768px: count-up лёгкий (rAF на 5 числах) — оставляем,
   но без цветовой подсветки, чтобы не отвлекать на маленьком экране. */
@media (max-width:768px){
  .cnt.is-counting{color:inherit; transition:none;}
}
/* prefers-reduced-motion: никакого счёта/подсветки/резерва — сразу финал */
@media (prefers-reduced-motion:reduce){
  .cnt{min-width:0;}
  .cnt.is-counting,.cnt.is-done{color:inherit; transition:none;}
}