/* EuroBrokerGroup — прототип сайта-визитки. Общие стили.
   Палитра и типографика — по брендбуку v2.0 (2026-07-16, замена золота на оранжевую палитру):
   Primary Orange #FF6A1A / Hover Orange #FF7F3A / Dark Orange #E85A12 /
   Brand Orange #EF7F1A (только логотип — отдельный оттенок, не путать с Primary Orange) /
   Neutral Gray #9D9E9E / Gray Dark #4A4A4A / Ink Black #1C1C1C / Warm Cream #FAF9F6 */

:root{
  color-scheme: light; /* сайт светлый по дизайну — без этого Android/Chrome "Force dark"
    перекрашивает страницу своим алгоритмом и заливает оранжевый (#FF6A1A) тёмно-красным */
  --bg: #FAF9F6;          /* Warm Cream */
  --bg-dark: #1C1C1C;     /* Ink Black */
  --bg-dark-2: #272727;
  --text: #1C1C1C;        /* Ink Black — заголовки */
  --body-text: #4A4A4A;   /* Gray Dark — основной текст */
  --muted: #9D9E9E;       /* Neutral Gray — второстепенный текст */
  --line: #E6E1D3;
  --accent: #FF6A1A;      /* Primary Orange */
  --accent-dark: #E85A12; /* Dark Orange — hover/pressed на сплошных элементах */
  --accent-hover: #FF7F3A;/* Hover Orange — лёгкий hover-тон на светлых поверхностях */
  --accent-tint: rgba(255,106,26,.1); /* бледная подложка для hover (было --gold-light как фон) */
  --orange: #EF7F1A;      /* Brand Orange — логотип (неизменно, см. .logo b) */
  --card: #F2EDE0;
  --radius: 4px;
  --maxw: 1180px;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--body-text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0 0 .5em;letter-spacing:.2px;color:var(--text)}
p{margin:0 0 1em}
/* #direction-paragraph (buy/rent/commercial.html, текст из админки
   "Направления") — админ печатает текст с пустыми строками между абзацами
   (например перед "Как проходит работа:"), но обычный <p> в HTML схлопывает
   все переносы строк в один сплошной блок. pre-line сохраняет переносы,
   которые реально стоят в тексте, схлопывая только повторные пробелы. */
#direction-paragraph{white-space:pre-line}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section--tight{padding:56px 0}
.section--dark{background:var(--bg-dark);color:#eceef2}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--card{background:var(--card)}
/* #directions-section now swapped to the mid-gray bg (was #lead-form's,
   swapped per client request) — var(--body-text) (#4A4A4A, "Gray Dark").
   .section--dark also turns this section's headings white via the
   ".section--dark h1..h4{color:#fff}" rule above — that rule cascades into
   the direction cards too (.card h3), which turned those white-on-white
   against the cards' own white background and made them unreadable
   (client-reported bug). Fixed below: card headings forced orange, and
   the whole card inverts to solid orange on hover with white text/icon
   so nothing goes white-on-white or dark-on-dark in either state. */
#directions-section{background:var(--body-text)}
#directions-section .eyebrow{color:var(--accent-hover)}
#directions-section .card h3{color:var(--accent)}
#directions-section .card:hover{background:var(--accent);border-color:var(--accent)}
#directions-section .card:hover .icon svg{color:#fff}
#directions-section .card:hover h3,
#directions-section .card:hover p,
#directions-section .card:hover a.more{color:#fff}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:14px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:18px}
.lede{color:var(--muted);font-size:18px;max-width:640px}
.section--dark .lede{color:#b7bcc7}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:var(--radius);
  font-size:14px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;transition:.2s ease;
}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-dark)}
.btn--ghost{border-color:currentColor}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--dark{border-color:var(--text);color:var(--text)}
.btn--dark:hover{background:var(--text);color:#fff}
.btn--block{width:100%;justify-content:center}
.btn--tg{background:var(--accent);color:#fff}
.btn--tg:hover{background:var(--accent-dark)}
.tg-icon{width:15px;height:15px;display:inline-flex;flex:none}
.tg-icon svg{width:100%;height:100%;color:currentColor}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(228,228,225,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(28,28,28,.08);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;height:76px;
}
.logo{display:flex;align-items:center;font-family:var(--serif);font-size:20px;color:var(--text);letter-spacing:.5px}
.logo b{color:var(--orange)} /* цвета логотипа (оранжевый+серый) неизменны — не перекрашивать в золото */
.logo-img{height:42px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:22px}
.nav a{color:rgba(28,28,28,.8);font-size:14px;font-weight:500;letter-spacing:.2px;position:relative;padding-bottom:6px;white-space:nowrap}
.nav a:hover, .nav a.active{color:var(--accent)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .15s ease}
.nav a:hover::after, .nav a.active::after{transform:scaleX(1)}
/* UZ/TR: пункты меню в среднем заметно длиннее русских ("Kompaniya haqida ▾",
   "Hizmet Alanları ▾" и т.п.) — на десктопной ширине (nav ещё не свёрнут в
   гамбургер, см. брейкпоint 1024px ниже) чуть уменьшаем шрифт и зазоры между
   пунктами только для этих языков, чтобы строка меню не переполнялась.
   RU/EN не затронуты. */
@media (min-width:1025px){
  html[lang="uz-Latn"] .nav, html[lang="tr"] .nav{gap:14px}
  html[lang="uz-Latn"] .nav a, html[lang="tr"] .nav a{font-size:12.5px;letter-spacing:0}
}
.nav-item{position:relative}
.nav-item > a{display:block}
.nav-drop{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;border-radius:var(--radius);box-shadow:0 12px 32px rgba(28,28,28,.14);
  min-width:200px;padding:8px;display:none;border:1px solid var(--line);
}
.nav-item:hover .nav-drop{display:block}
.nav-drop a{display:block;color:var(--text);padding:9px 12px;border-radius:3px;font-size:14px}
.nav-drop a:hover{background:var(--accent-tint);color:var(--accent-dark)}
.nav-toggle{
  display:none;background:none;border:none;color:var(--text);cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;flex:none;padding:0;
}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle-icon-close{display:none}
.nav-toggle.is-open .nav-toggle-icon-open{display:none}
.nav-toggle.is-open .nav-toggle-icon-close{display:block}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
.nav-overlay.is-open{display:block}
body.nav-lock{overflow:hidden}
.header-actions{display:flex;align-items:center;gap:14px}
.lang-switch{position:relative}
.lang-switch button{
  background:var(--accent);border:1px solid var(--accent);color:#fff;
  padding:8px 14px;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:6px;
}
.lang-switch button:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;background:#fff;color:var(--text);
  border-radius:var(--radius);box-shadow:0 12px 32px rgba(28,28,28,.14);min-width:150px;
  display:none;overflow:hidden;border:1px solid var(--line);
}
.lang-menu.open{display:block}
.lang-menu button{
  display:block;width:100%;text-align:left;padding:10px 14px;border:0;background:none;
  font-size:14px;cursor:pointer;color:var(--text);
}
.lang-menu button:hover{background:var(--accent);color:#fff}

/* ---------- Hero ---------- */
.hero{position:relative;height:86vh;min-height:560px;overflow:hidden;color:#fff}
.hero-slides{position:absolute;inset:0}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.2s ease;transform:scale(1);
}
.hero-slide.active{opacity:1;animation:heroKenBurns 7s ease-out forwards}
@keyframes heroKenBurns{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.72) 35%,rgba(0,0,0,.45) 60%,rgba(0,0,0,.2) 100%);
}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:var(--maxw);margin:0 auto;padding:120px 24px 100px}
.hero-content .eyebrow{color:var(--accent)}
.eyebrow--rule{display:block}
.eyebrow--rule::before{display:none}
.eyebrow--rule::after{content:"";display:block;width:70px;height:1px;background:var(--accent);margin-top:10px}
.hero-content h1{max-width:860px;margin-bottom:20px}
.hero-title-thin{display:block;font-weight:300;color:#fff;font-size:clamp(32px,4.2vw,60px);line-height:1.15}
.hero-title-accent{
  display:block;font-weight:600;font-size:clamp(40px,6.2vw,78px);line-height:.95;
  color:var(--accent); /* фолбэк для браузеров без background-clip:text */
  background:linear-gradient(135deg,#FF7F3A 0%,#FF6A1A 50%,#E85A12 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-content .lede{color:rgba(255,255,255,.82);font-size:20px;line-height:1.7;max-width:520px;margin-bottom:32px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
/* min-height (не height) + вертикальный паддинг вместо flex-центрирования по
   фикс. высоте — если текст кнопки (UZ/TR заметно длиннее RU) перенесётся на
   вторую строку на узких мобильных, кнопка вырастет вместе с текстом, а не
   обрежет его. font-size чуть уменьшается на узких вьюпортах (clamp), чтобы
   перенос вообще случался реже. */
.hero-cta .btn{min-height:58px;padding:14px 34px;font-size:clamp(12.5px,3.4vw,14px);animation:ctaPulse 2s ease-in-out infinite}
.hero-cta .btn:nth-child(2){animation-delay:1s}
.hero-cta .btn:hover,.hero-cta .btn:focus-visible{animation-play-state:paused}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,106,26,.65);opacity:1}
  50%{box-shadow:0 0 0 14px rgba(255,106,26,0);opacity:.65}
}
.btn--outline-gold{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.btn--outline-gold:hover{background:var(--accent);color:#111}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px;max-width:600px}
.hero-stat{
  display:flex;flex-direction:column;align-items:flex-start;padding:18px 16px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.hero-stat .stat-icon{width:24px;height:24px;color:var(--accent);margin-bottom:16px}
.hero-stat .stat-icon svg{width:100%;height:100%}
.hero-stat b{display:block;font-family:var(--serif);font-size:clamp(24px,2.6vw,32px);color:#fff;line-height:1}
.hero-stat span{font-size:13px;color:rgba(255,255,255,.72);margin-top:8px;line-height:1.3}
.hero-note{margin-top:28px;font-size:13px;color:#c7cbd4}

/* ---------- Directions cards ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 26px;transition:.2s ease;
}
.card:hover{
  box-shadow:0 16px 40px rgba(28,28,28,.08);transform:translateY(-3px);
  background:var(--accent-tint);border-color:var(--accent);
}
.card .icon{width:32px;height:32px;margin-bottom:16px}
.card .icon svg{width:100%;height:100%;color:var(--accent)}
.card h3{font-size:19px;margin-bottom:10px}
.card p{color:var(--body-text);font-size:15px;margin-bottom:18px}
.card--direction{display:flex;flex-direction:column;height:100%}
.card--direction .icon{width:32px;height:32px;margin-bottom:16px}
.card--direction .icon svg{width:100%;height:100%;color:var(--accent)}
.card--direction p{flex:1}
.card--direction a.more{margin-top:auto}
.card a.more{font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--accent-dark)}

/* ---------- Team ---------- */
/* team-card наследует .card (белый фон, border, padding) — здесь только
   свои правки: колонка на всю высоту грид-ячейки (чтобы кнопка "Написать
   в Telegram" всегда была внизу через margin-top:auto на .team-contact
   ниже), плюс всегда видимая лёгкая тень (обычно у .card тень только на
   hover) и чуть более крупное скругление для завершённости карточки. */
.team-card{
  text-align:center;display:flex;flex-direction:column;height:100%;
  border-radius:10px;box-shadow:0 6px 24px rgba(28,28,28,.07);
}
/* Раньше здесь была фикс. height:320px+object-fit:cover — при узкой
   карточке (1 колонка на мобильном) это давало контейнер сильно шире,
   чем выше, и cover обрезал по центру так, что от фото оставался только
   галстук (лица не видно). Все фото сотрудников/партнёров одного и того
   же соотношения 3:4 (проверено), так что aspect-ratio:3/4 показывает
   фото целиком без обрезки при любой ширине карточки — object-fit:cover
   оставлен только на случай, если будущее фото придёт другой пропорции. */
.team-photo{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);
  background:linear-gradient(135deg,#e2ddce,#f1eee4);margin-bottom:16px;
}
.team-card h3{font-size:17px;margin-bottom:2px}
.team-role{color:var(--accent-dark);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-bottom:10px}
/* Описание скрыто под фото и раскрывается по наведению на карточку —
   max-height 0→N + opacity вместо display:none, чтобы была плавная
   анимация. По умолчанию видно только имя и должность (Директор/Риэлтор/
   Онлайн консультант). Общее правило и для основной команды (.team-bio),
   и для партнёров (.partner-bio). */
.team-bio,.partner-bio{
  max-height:0;opacity:0;overflow:hidden;color:var(--body-text);font-size:14px;line-height:1.5;
  transition:max-height .35s ease,opacity .3s ease,margin-bottom .35s ease;
}
.team-card:hover .team-bio,.partner-card:hover .partner-bio{max-height:300px;opacity:1;margin-bottom:12px}
.team-contact{font-size:13px;font-weight:600;color:var(--accent-dark);margin-top:auto}
/* Команда сейчас показывает только 2 человек (Аваз, Малика) — вместо
   растянутых на всю ширину grid-3 (было рассчитано на 3+ карточки),
   фиксируем разумную ширину карточки и центрируем ряд. */
#team-grid,#home-team-grid{grid-template-columns:repeat(2,minmax(220px,300px));justify-content:center}

/* ---------- News ---------- */
.news-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:.2s ease;display:flex;flex-direction:column;height:100%}
.news-card:hover{border-color:var(--accent);box-shadow:0 16px 40px rgba(28,28,28,.08)}
.news-thumb{aspect-ratio:16/10;background:var(--card);display:flex;align-items:center;justify-content:center;flex:none}
.news-thumb svg{width:36px;height:36px;color:var(--accent)}
.news-body{padding:22px;display:flex;flex-direction:column;flex:1}
.news-date{font-size:12px;color:var(--muted);letter-spacing:.3px;text-transform:uppercase;margin-bottom:8px;display:block}
.news-body h3{font-size:18px;margin-bottom:10px}
.news-body p{color:var(--body-text);font-size:14px;margin-bottom:14px;flex:1}
.news-body .more{margin-top:auto}

/* ---------- Дайджест рынка (RSS-агрегатор, визуально отделён от авторских новостей) ---------- */
.digest-card{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:22px;display:flex;flex-direction:column;height:100%;transition:.2s ease;
}
.digest-card:hover{border-color:var(--accent);box-shadow:0 16px 40px rgba(28,28,28,.08)}
.digest-source{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--accent-dark)}
.digest-date{font-size:12px;color:var(--muted);margin-left:8px}
.digest-card h3{font-size:16px;margin:10px 0 8px;line-height:1.35}
.digest-card p{color:var(--body-text);font-size:14px;flex:1;margin-bottom:16px}
.digest-card a.more{margin-top:auto}
.digest-card .more,.news-body .more{font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--accent-dark);display:inline-block}
.digest-empty{color:var(--muted);font-size:14px}

/* ---------- Telegram section ---------- */
.tg-section{position:relative;overflow:hidden;z-index:0;background:#1c1916}
.tg-hero-bg{
  position:relative;min-height:420px;display:flex;align-items:center;
  background-color:#1c1916;background-repeat:no-repeat;background-size:cover;background-position:right center;
}
.tg-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(28,25,22,.92) 0%,rgba(28,25,22,.78) 45%,rgba(28,25,22,.4) 72%,rgba(28,25,22,.1) 100%);
}
.tg-hero-bg .container{position:relative;z-index:2;width:100%}
.tg-hero{display:flex;align-items:center;gap:56px}
.tg-hero-text{flex:1;min-width:320px;max-width:600px}
.tg-hero-text .eyebrow{color:var(--accent)}
.tg-hero-text h2{margin-bottom:18px}
.tg-title-white,.tg-title-gold{display:block}
.tg-title-white{color:#fff;font-weight:400}
.tg-title-gold{color:var(--accent);font-weight:700}
.tg-hero-text .lede{color:#b7bcc7;max-width:480px;margin-bottom:0}
.tg-features{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px}
.tg-feature{display:flex;align-items:center;gap:12px;font-size:14px;color:#d6d9df}
.tg-feature svg{width:22px;height:22px;color:var(--accent);flex:none}

.tg-posts-head{display:flex;align-items:center;justify-content:space-between;margin-top:64px;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.tg-posts-head h3{color:#fff;margin:0;font-size:22px}
.tg-posts-updated{display:block;color:#8b93a3;font-size:13px;margin-top:4px}
.tg-posts-link{color:var(--accent);font-size:14px;font-weight:600}
.tg-posts-link:hover{color:var(--accent-hover)}

.tg-post-card{display:block;background:var(--bg-dark-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;transition:.2s ease}
.tg-post-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.4);border-color:var(--accent)}
.tg-post-photo{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center}
.tg-post-photo--1{background:linear-gradient(135deg,#3a3226,#1C1C1C)}
.tg-post-photo--2{background:linear-gradient(135deg,#332e24,#1C1C1C)}
.tg-post-photo--3{background:linear-gradient(135deg,#413523,#1C1C1C)}
.tg-post-badge{position:absolute;top:12px;left:12px;background:var(--accent);color:#1C1C1C;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:5px 10px;border-radius:3px}
.tg-post-time{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:5px 10px;border-radius:3px}
.tg-post-body{padding:20px}
.tg-post-body h4{color:#fff;font-size:16px;margin-bottom:12px;font-weight:600}
.tg-post-meta{display:flex;gap:16px;margin-bottom:14px}
.tg-post-meta span{display:flex;align-items:center;gap:6px;font-size:12px;color:#9aa0ac}
.tg-post-meta svg{width:14px;height:14px;color:var(--accent);flex:none}
.tg-post-price{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--accent)}
.tg-post-desc{color:#9aa0ac;font-size:13px;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Forms ---------- */
.form-panel{
  background:#fff;border-radius:var(--radius);padding:36px;border:1px solid var(--line);
}
.section--dark .form-panel{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.form-panel--elevated{
  border:none;border-radius:18px;padding:40px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  font-size:15px;font-family:var(--sans);background:#fff;color:var(--text);transition:border-color .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,26,.15);
}
.section--dark .field input,.section--dark .field select,.section--dark .field textarea{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff;
}
.field textarea{resize:vertical;min-height:90px}
.field-consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted)}
.section--dark .field-consent{color:#b7bcc7}
.field-consent input{width:auto;margin-top:3px;accent-color:var(--accent)}
.honeypot{position:absolute;left:-9999px;opacity:0}

/* #lead-form now swapped to the light "card" cream bg (was gray, swapped
   with #directions-section per client request) — section--card handles the
   background, default (light-section) text colors apply automatically since
   the section--dark class was removed, no extra overrides needed here.
   Keeps a white, elevated form card regardless of section bg. */
#lead-form .form-panel{
  background:#fff;border:none;position:relative;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
#lead-form .form-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
#lead-form .field input,#lead-form .field select,#lead-form .field textarea{background:#fff;border-color:var(--line);color:var(--text)}
#lead-form .field-consent{color:var(--muted)}
.form-note{font-size:12px;color:var(--muted);margin-top:10px}
.form-success{
  display:none;background:#eef7ef;border:1px solid #bfe3c4;color:#276b32;
  padding:16px 18px;border-radius:var(--radius);font-size:14px;margin-top:16px;
}
.form-success.show{display:block}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.stats--3{grid-template-columns:repeat(3,1fr)}
.stat b{font-family:var(--serif);font-size:36px;display:block;color:var(--accent)}
.stat span{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}

/* stats section with faded photo background (e.g. "Компания в цифрах" on /about) */
.stats-photo{
  position:relative;overflow:hidden;
  background-image:url(../assets/tashkent-stats-bg.jpg);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.stats-photo::after{content:"";position:absolute;inset:0;background:rgba(250,249,246,.82)}
.stats-photo .container{position:relative;z-index:2}
.stats-photo .lede{margin-top:14px}
.stats-photo .stats{margin-top:56px;gap:0}
.stat--flat{display:flex;flex-direction:column;align-items:flex-start;padding:0 32px}
.stat--flat:first-child{padding-left:0}
.stat--flat:not(:first-child){border-left:1px solid rgba(28,28,28,.14)}
.stat--flat .stat-icon{width:32px;height:32px;color:var(--accent);margin-bottom:20px}
.stat--flat .stat-icon svg{width:100%;height:100%}
.stat--flat b{font-size:clamp(40px,4.5vw,60px)}

/* ---------- Breadcrumbs / page header ---------- */
.page-hero{background:var(--bg-dark);color:#fff;padding:70px 0 50px}
.page-hero h1{color:#fff}
.page-hero .eyebrow{color:var(--accent-hover)}
.page-hero .eyebrow::before{background:var(--orange)}
.breadcrumbs{font-size:13px;color:#c9c5b8;margin-bottom:14px}
.breadcrumbs a:hover{color:var(--accent)}

/* ---------- Social bar ---------- */
.social-bar{display:flex;gap:12px;flex-wrap:wrap}
.social-bar a{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;border:1px solid rgba(255,255,255,.25);color:#fff;font-size:16px;transition:.15s ease;
}
.social-bar a:hover{background:var(--accent);border-color:var(--accent)}
.social-bar a svg{width:18px;height:18px;flex:none}
.social-bar--light a{border-color:var(--line);color:var(--text)}
.social-bar--light a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-dark);color:#c9c5b8;padding:60px 0 28px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.footer-grid h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:16px}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:10px}
.footer-grid a:hover{color:var(--accent)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:#8b93a3;
}

/* ---------- Benefit list (icon + text, e.g. "Покупка без риска" on /buy) ---------- */
.benefit-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:20px}
.benefit-list li{display:flex;align-items:flex-start;gap:12px;color:var(--body-text)}
.benefit-list li svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--accent)}
.accent-word{color:var(--accent);font-weight:600}

/* ---------- Vacancy ---------- */
.vacancy-list{list-style:none;padding:0;margin:0 0 24px}
.vacancy-list li{padding:10px 0 10px 26px;position:relative;color:var(--body-text)}
.vacancy-list li::before{content:"—";position:absolute;left:0;color:var(--accent)}
#vacancy-hero{padding-bottom:12px}
#vacancy-hero h1{color:var(--accent);margin-bottom:0}
#vacancy-section{padding-top:16px}
#vacancy-section .grid-2{align-items:start}
#vacancy-section .grid-2 > div{margin-top:0}
#vacancy-section .grid-2 > div.form-panel{margin-top:-112px}
#vacancy-section .lede{color:#b7bcc7}
#vacancy-section .vacancy-list li{color:#d6d9df}
#vacancy-section .vacancy-list{margin:0}

/* Accordion */
.accordion{border-top:1px solid rgba(255,255,255,.12)}
.accordion-item{border-bottom:1px solid rgba(255,255,255,.12)}
.accordion-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  background:none;border:0;padding:22px 4px;text-align:left;cursor:pointer;
  font-family:var(--serif);font-size:19px;font-weight:600;color:#fff;
}
.accordion-header:hover{color:var(--accent)}
.accordion-icon{width:20px;height:20px;color:var(--accent);flex:none;transition:transform .25s ease}
.accordion-item.is-open .accordion-icon{transform:rotate(180deg)}
.accordion-panel-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.accordion-item.is-open .accordion-panel-wrap{grid-template-rows:1fr}
.accordion-panel-inner{overflow:hidden}
.accordion-panel-inner .vacancy-list{padding:0 4px 20px}

#vacancy-section .form-panel{background:#fff;border:none;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:22px 36px}
#vacancy-section .form-panel h3{color:var(--text);margin-bottom:12px}
#vacancy-section .field input,#vacancy-section .field select,#vacancy-section .field textarea{background:#fff;border-color:var(--line);color:var(--text)}
#vacancy-section .field-consent{color:var(--muted)}
#vacancy-section .form-note{color:#8b93a3}
#vacancy-section .form-row,#vacancy-section .field{margin-bottom:9px}
#vacancy-section .field textarea{min-height:52px}

/* ---------- Responsive ---------- */
/* Breakpoints: 1024px ≈ планшет (портрет/ландшафт), 640px ≈ телефон */
@media (max-width: 1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .tg-hero-bg::after{background:linear-gradient(90deg,rgba(28,25,22,.94) 0%,rgba(28,25,22,.85) 55%,rgba(28,25,22,.55) 85%,rgba(28,25,22,.25) 100%)}

  /* Гамбургер-меню: .nav из горизонтального ряда становится выезжающей справа панелью */
  .nav-toggle{display:flex}
  .header-actions .lang-switch button{padding:8px 10px;font-size:12px;gap:3px}
  .nav{
    position:fixed;top:0;right:0;height:100vh;width:min(320px,86vw);
    background:#E4E4E1;flex-direction:column;align-items:flex-start;
    padding:96px 28px 28px;gap:0;overflow-y:auto;
    transform:translateX(100%);transition:transform .3s ease;z-index:60;
  }
  .nav.is-open{display:flex;transform:translateX(0)}
  .nav a{width:100%;padding:14px 0;font-size:16px;border-bottom:1px solid rgba(28,28,28,.08)}
  .nav a::after{display:none}
  .nav-item{position:static;width:100%}
  .nav-item > a{display:flex;align-items:center;justify-content:space-between}
  .nav-drop{
    position:static;transform:none;display:none;background:none;box-shadow:none;border:none;
    padding:0 0 8px 16px;min-width:0;
  }
  .nav-item:hover .nav-drop{display:none}
  .nav-item.is-open .nav-drop{display:block}
  .nav-item.is-open > a{color:var(--accent)}
  .nav-drop a{display:block;color:rgba(28,28,28,.7);padding:12px 0;font-size:14px;border-bottom:none}
  .nav-drop a:hover{background:none;color:var(--accent)}

  /* Форма кандидата (вакансии) на планшете уже в 1 колонку — сбрасываем
     десктопный отрицательный margin, иначе форма наезжает на аккордеон выше */
  #vacancy-section .grid-2 > div.form-panel{margin-top:0}
}
@media (max-width: 640px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  #team-grid,#home-team-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stats--3{grid-template-columns:1fr}
  .stat--flat{padding:0;gap:0}
  .stat--flat:not(:first-child){border-left:none;border-top:1px solid rgba(28,28,28,.14);padding-top:24px;margin-top:24px}
  .tg-features{grid-template-columns:1fr}
  .tg-hero-bg{background-position:80% center}
  .tg-hero-bg::after{background:rgba(28,25,22,.88)}

  /* На мобильном фикс. высота 86vh+560px делает фото слишком "зумнутым"
     из-за cover на узком высоком контейнере — высота вместо этого
     подстраивается под контент (заголовок/текст/кнопки/статы + паддинги),
     .hero-slides абсолютно спозиционирован и просто следует за ней.
     Статы держим в 3 колонки (а не в 1, как остальные .stats-гриды) —
     иначе 3 карточки, растянутые на всю ширину друг под другом, сами
     по себе добавляют ~430px и сводят на нет всю экономию высоты. */
  .hero{height:auto;min-height:0}
  .hero-content{padding:104px 20px 40px}
  .hero-stats{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:24px}
  .hero-stat{padding:12px 10px}
  .hero-stat .stat-icon{width:18px;height:18px;margin-bottom:8px}
  .hero-stat b{font-size:22px}
  .hero-stat span{font-size:11px;margin-top:4px}
  .form-panel,.form-panel--elevated{padding:24px 20px}
  #vacancy-section .form-panel{padding:20px}

  /* Шапка на телефонах (≤640px): на 360-420px логотип + кнопка языка +
     кнопка Telegram + гамбургер (все десктопных размеров, см. правила выше
     без брейкпоинта) не помещаются в доступную ширину контейнера — считали:
     ~353px нужно против ~312px доступно на 360px, на 320px разрыв ещё
     больше. Секции вне шапки (hero, формы, футер и т.д.) не трогаем —
     .container сужен точечно только для .site-header, общий .container
     (используется по всему сайту) остаётся как был. */
  .site-header .container{padding:0 16px}
  .logo-img{height:32px}
  .header-actions{gap:8px}
  .header-actions .lang-switch button{padding:7px 9px;font-size:11px}
  .header-actions .btn--tg{padding:8px 12px;font-size:11px;gap:5px}
  .header-actions .btn--tg .tg-icon{width:13px;height:13px}
}
/* Самые узкие телефоны (≤380px, напр. iPhone SE/старые Android на 320-375px) —
   дополнительный запас поверх правил из блока ≤640px выше, чтобы точно не
   переполниться при чуть более широком рендере шрифта, чем в расчёте. */
@media (max-width: 380px){
  .site-header .container{padding:0 12px}
  .header-actions{gap:6px}
}

/* dark-mode friendly for viewing tools; site itself is light-themed by design */
@media (prefers-color-scheme: dark){
  body{background:var(--bg)}
}