/* ════════════════════════════════════════════════════════════════
   ADS — Vendor Classifieds · общие стили лендинга
   Дизайн-система: ElevenLabs «parchment» + фирменный акцент ADS.
   ════════════════════════════════════════════════════════════════ */
:root{
  /* ── Цвета ── */
  --color-parchment-white:#fdfcfc;
  --color-warm-sand:#f5f3f1;
  --color-ash-border:#e5e5e5;
  --color-midnight-ink:#000000;
  --color-driftwood:#777169;
  --color-fog:#a59f97;
  --color-silver-mist:#b1b0b0;
  --color-void-violet:#0447ff;   /* декоративные «орбы» */
  --color-ember-orange:#ff4704;  /* декоративные «орбы» */

  /* ── Фирменный акцент ADS (поменять на ваш точный hex при необходимости) ── */
  --accent:#0447ff;
  --accent-hover:#0339cc;
  --accent-ink:#ffffff;

  /* ── Шрифты ── */
  --font-display:'Figtree',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-logo:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-inter:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ── Радиусы ── */
  --radius-md:4px; --radius-lg:8px; --radius-xl:14px;
  --radius-2xl:20px; --radius-3xl:24px; --radius-full:9999px;

  /* ── Тени ── */
  --shadow-ring:rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px 0px, rgba(0,0,0,0.04) 0px 2px 4px 0px;
  --shadow-card:rgba(0,0,0,0.4) 0px 0px 1px 0px, rgba(0,0,0,0.04) 0px 1px 1px 0px, rgba(0,0,0,0.04) 0px 2px 4px 0px;
  --shadow-modal:rgba(0,0,0,0.18) 0px 24px 60px -12px, rgba(0,0,0,0.08) 0px 8px 20px -8px;

  /* ── Поверхности ── */
  --surface-canvas:#fdfcfc;
  --surface-card:#f5f3f1;
  --surface-border:#e5e5e5;
  --surface-elevated:#ffffff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-inter);
  background:var(--surface-canvas);
  color:var(--color-midnight-ink);
  font-size:16px;line-height:1.5;letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── Контейнер ── */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@media(max-width:560px){.wrap{padding:0 18px}}

/* ── Типографика ── */
.display{font-family:var(--font-display);font-weight:300;letter-spacing:-0.02em;line-height:1.06;font-size:clamp(34px,6.4vw,54px)}
.h2{font-family:var(--font-display);font-weight:300;letter-spacing:-0.02em;line-height:1.12;font-size:clamp(27px,4vw,38px)}
.h3{font-family:var(--font-display);font-weight:400;letter-spacing:-0.01em;line-height:1.2;font-size:clamp(20px,2.4vw,24px)}
.lead{font-size:clamp(16px,1.6vw,19px);line-height:1.5;color:var(--color-driftwood)}
.body{font-size:16px;line-height:1.55;color:var(--color-driftwood)}
.muted{color:var(--color-fog)}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-driftwood)}

/* ── Кнопки (pill) ── */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-full);font-family:var(--font-inter);font-size:15px;font-weight:500;padding:11px 20px;border:1px solid var(--color-ash-border);cursor:pointer;transition:transform .12s ease,opacity .12s ease,background .12s ease}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--outline{background:var(--surface-canvas);color:var(--color-midnight-ink);box-shadow:var(--shadow-ring)}
.btn--outline:hover{background:var(--surface-card)}
.btn--ghost{background:transparent;border-color:transparent;padding:11px 12px}
.btn--ghost:hover{color:var(--color-driftwood)}
.btn--sm{font-size:14px;padding:8px 14px}

/* ── Орб = плейсхолдер под анимированную иконку ── */
.orb{width:44px;height:44px;border-radius:var(--radius-full);flex:0 0 auto;
  background:radial-gradient(circle at 32% 30%, #ff7a3c 0%, var(--color-ember-orange) 32%, #b21fb8 64%, var(--color-void-violet) 100%);
  box-shadow:var(--shadow-card);position:relative}
.orb::after{content:"icon";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600;color:rgba(255,255,255,.85);letter-spacing:.04em}
.orb--sm{width:34px;height:34px}
.orb--sm::after{content:""}

/* ── Шапка ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(253,252,252,.82);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--color-ash-border)}
.nav__in{display:flex;align-items:center;gap:14px;height:60px}
.logo{font-family:var(--font-logo);font-weight:700;font-size:16px;letter-spacing:0.05em;display:inline-flex;align-items:center;gap:8px}
.logo .bar{color:var(--accent)}
.nav__links{display:flex;gap:6px;margin-left:10px}
.nav__links a{font-size:14px;font-weight:500;color:var(--color-midnight-ink);padding:8px 12px;border-radius:var(--radius-full)}
.nav__links a:hover{color:var(--color-driftwood)}
.nav__cta{margin-left:auto;display:flex;align-items:center;gap:8px}
@media(max-width:780px){.nav__links{display:none}}
@media(max-width:460px){.nav__cta .btn--ghost{display:none}}

/* ── Переключатель языка (кнопка) ── */
.lang-btn{display:inline-flex;align-items:center;gap:7px}
.lang-btn__flag{font-size:16px;line-height:1}
.lang-btn__code{font-weight:600;letter-spacing:.04em}
.lang-btn__chev{width:14px;height:14px;opacity:.5}

/* ── Переключатель языка (модал) ── */
.lang-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .18s ease}
.lang-overlay.open{opacity:1}
.lang-overlay[hidden]{display:none}
.lang-modal{width:100%;max-width:640px;max-height:84vh;background:var(--surface-canvas);border:1px solid var(--color-ash-border);border-radius:28px;box-shadow:var(--shadow-modal);display:flex;flex-direction:column;transform:scale(.96);transition:transform .18s ease}
.lang-overlay.open .lang-modal{transform:scale(1)}
.lang-modal__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px}
.lang-modal__title{font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:-0.01em}
.lang-modal__close{width:36px;height:36px;border-radius:var(--radius-full);border:1px solid var(--color-ash-border);background:var(--surface-card);color:var(--color-driftwood);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}
.lang-modal__close:hover{color:var(--color-midnight-ink)}
.lang-search{padding:0 20px 12px}
.lang-search input{width:100%;padding:12px 16px;border:1px solid var(--color-ash-border);border-radius:var(--radius-md);background:var(--surface-elevated);font-family:var(--font-inter);font-size:15px;color:var(--color-midnight-ink)}
.lang-search input:focus{outline:none;border-color:var(--accent)}
.lang-modal__body{overflow-y:auto;padding:0 16px 20px;-webkit-overflow-scrolling:touch}
.lang-group-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-fog);padding:14px 4px 8px}
.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:560px){.lang-grid{grid-template-columns:1fr 1fr 1fr}}
.lang-chip{display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:9px 12px;border:1px solid transparent;border-radius:var(--radius-xl);background:var(--surface-card);cursor:pointer;transition:border-color .12s ease,background .12s ease}
.lang-chip:hover{border-color:var(--color-ash-border);background:var(--surface-elevated)}
.lang-chip.selected{border-color:var(--accent);background:var(--surface-elevated)}
.lang-chip__flag{font-size:22px;line-height:1;flex:0 0 auto}
.lang-chip__txt{min-width:0;flex:1}
.lang-chip__name{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-midnight-ink)}
.lang-chip.selected .lang-chip__name{color:var(--accent)}
.lang-chip__en{display:block;font-size:12px;color:var(--color-fog);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-chip__check{color:var(--accent);flex:0 0 auto;font-size:13px}
.lang-empty{text-align:center;padding:48px 0;color:var(--color-fog);font-size:14px}
.lang-count{font-size:12px;color:var(--color-fog);padding:4px 4px 8px}

/* ── Секции ── */
section{padding:clamp(56px,9vw,104px) 0}
.section-tight{padding:clamp(40px,6vw,72px) 0}
.sec-head{max-width:760px;margin:0 auto 44px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.sec-head .orb{margin-bottom:2px}

/* ── Сплит текст + изображение ── */
.split{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.split__text{display:flex;flex-direction:column;gap:18px}
.split__eyebrow{display:flex;align-items:center;gap:12px}
.feature-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.feature-list li{position:relative;padding-left:26px;font-size:15px;color:var(--color-driftwood);line-height:1.5}
.feature-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-midnight-ink)}
@media(min-width:880px){
  .split{grid-template-columns:1fr 1fr;gap:64px}
  .split--rev .split__text{order:2}
  .split--rev .split__media{order:1}
}

/* ── Медиа-слоты ── */
.media{position:relative;width:100%;border-radius:var(--radius-2xl);background:var(--surface-elevated);box-shadow:var(--shadow-card);overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.media--wide{aspect-ratio:16/10}
.media--hero{aspect-ratio:16/9}
.media--banner{aspect-ratio:16/9}
.media>img{width:100%;height:100%;object-fit:cover;display:block}
.media__inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px}
.media__dim{font-family:var(--font-mono);font-size:13px;color:var(--color-midnight-ink);background:var(--surface-card);border:1px solid var(--color-ash-border);border-radius:var(--radius-full);padding:6px 14px}
.media__hint{font-size:12px;color:var(--color-fog);max-width:300px}
.media__icon{width:40px;height:40px;border-radius:var(--radius-full);background:var(--surface-card);border:1px dashed var(--color-silver-mist);display:flex;align-items:center;justify-content:center;color:var(--color-driftwood);font-size:18px}

/* ── Карточки ── */
.card{background:var(--surface-card);border-radius:var(--radius-2xl);padding:28px}
.card--white{background:var(--surface-elevated);box-shadow:var(--shadow-card)}
.grid{display:grid;gap:20px}
@media(min-width:720px){.grid--2{grid-template-columns:1fr 1fr}.grid--3{grid-template-columns:repeat(3,1fr)}}

/* ── Hero ── */
.hero{padding-top:clamp(40px,6vw,72px)}
.hero__top{display:grid;grid-template-columns:1fr;gap:28px;align-items:end;margin-bottom:40px}
@media(min-width:880px){.hero__top{grid-template-columns:1.15fr .85fr;gap:48px}}
.hero__sub{font-family:var(--font-display);font-weight:300;font-size:clamp(17px,2vw,22px);color:var(--color-driftwood);letter-spacing:-0.01em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{font-size:13px;color:var(--color-driftwood);background:var(--surface-card);border:1px solid var(--color-ash-border);border-radius:var(--radius-full);padding:6px 14px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.microcopy{font-size:13px;color:var(--color-fog);margin-top:10px}

/* ── 2-в-1 ── */
.duo{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){.duo{grid-template-columns:1fr 1fr}}
.duo__col{background:var(--surface-card);border-radius:var(--radius-3xl);padding:30px;display:flex;flex-direction:column;gap:14px}
.duo__col h3{font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:-0.01em;display:flex;align-items:center;gap:12px}
.duo__col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.duo__col li{font-size:14px;color:var(--color-driftwood);padding-left:18px;position:relative}
.duo__col li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:var(--radius-full);background:var(--color-driftwood)}

/* ── Галерея 9:16 ── */
.gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 0 20px;-webkit-overflow-scrolling:touch}
.gallery::-webkit-scrollbar{height:6px}
.gallery::-webkit-scrollbar-thumb{background:var(--color-ash-border);border-radius:var(--radius-full)}
.shot{flex:0 0 auto;width:min(70vw,264px);aspect-ratio:9/16;scroll-snap-align:center;border-radius:var(--radius-3xl);background:var(--surface-elevated);box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 12px;font-size:13px;font-weight:500;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.45));text-align:center}
.shot{position:relative}
.gallery-hint{text-align:center;font-size:13px;color:var(--color-fog);margin-top:6px}

/* ── Конвейер Telegram/WhatsApp ── */
.steps{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--surface-elevated);border-radius:var(--radius-2xl);padding:22px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:10px}
.step__num{width:28px;height:28px;border-radius:var(--radius-full);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.step h4{font-family:var(--font-display);font-weight:400;font-size:17px;letter-spacing:-0.01em}
.step p{font-size:13.5px;line-height:1.55;color:var(--color-driftwood)}
.tgwa-details{display:grid;grid-template-columns:1fr;gap:10px 28px;margin-top:8px}
@media(min-width:760px){.tgwa-details{grid-template-columns:1fr 1fr}}

/* ── Таблица тарифов ── */
.price-wrap{overflow-x:auto;border:1px solid var(--color-ash-border);border-radius:var(--radius-3xl);background:var(--surface-elevated)}
table.price{border-collapse:collapse;width:100%;min-width:720px;font-size:14px}
table.price th,table.price td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--color-ash-border)}
table.price thead th{position:sticky;top:0;background:var(--surface-card);font-family:var(--font-display);font-weight:400;font-size:16px;letter-spacing:-0.01em}
table.price tbody th{text-align:left;font-weight:400;color:var(--color-driftwood);font-family:var(--font-inter);min-width:240px}
table.price .price-val{font-family:var(--font-display);font-weight:300;font-size:22px}
table.price .yes{color:var(--accent);font-weight:600}
table.price .no{color:var(--color-silver-mist)}
table.price tbody tr:last-child td,table.price tbody tr:last-child th{border-bottom:none}
.price-foot{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px}
.price-foot .card{flex:1 1 280px}

/* ── FAQ ── */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--surface-card);border-radius:var(--radius-xl);padding:18px 22px;border:1px solid transparent}
.faq details[open]{border-color:var(--color-ash-border);background:var(--surface-elevated)}
.faq summary{cursor:pointer;list-style:none;font-weight:500;font-size:16px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--color-driftwood);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:12px;font-size:14px;line-height:1.6;color:var(--color-driftwood)}

/* ── CTA-баннер ── */
.cta-final{background:var(--surface-card);border-radius:var(--radius-3xl);padding:clamp(36px,6vw,72px) 32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}

/* ── Футер ── */
.footer{border-top:1px solid var(--color-ash-border);background:var(--surface-card);padding:48px 0 40px}
.footer__grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:760px){.footer__grid{grid-template-columns:2fr 1fr}}
.footer__legal{font-size:13px;color:var(--color-driftwood);line-height:1.7;max-width:560px}
.footer__legal .co{color:var(--color-midnight-ink);font-weight:600}
.footer__links{display:flex;flex-direction:column;gap:10px}
.footer__links a{font-size:14px;color:var(--color-driftwood)}
.footer__links a:hover{color:var(--color-midnight-ink)}
.footer__links .ttl{font-size:12px;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-fog);margin-bottom:4px}

.row-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:4px}

/* ════════ Юридические страницы ════════ */
.legal-hero{padding:clamp(40px,7vw,80px) 0 clamp(24px,4vw,40px);border-bottom:1px solid var(--color-ash-border)}
.legal-hero .updated{font-size:13px;color:var(--color-fog);margin-top:14px}
.legal{max-width:820px;margin:0 auto;padding:clamp(36px,6vw,64px) 24px}
.legal .intro{font-size:17px;line-height:1.6;color:var(--color-driftwood);margin-bottom:28px}
.legal h2{font-family:var(--font-display);font-weight:400;letter-spacing:-0.01em;font-size:clamp(21px,3vw,27px);line-height:1.2;margin:40px 0 14px;color:var(--color-midnight-ink)}
.legal h3{font-family:var(--font-inter);font-weight:600;font-size:17px;margin:24px 0 8px;color:var(--color-midnight-ink)}
.legal p{font-size:15px;line-height:1.7;color:var(--color-driftwood);margin:10px 0}
.legal ul,.legal ol{margin:10px 0 10px 4px;padding-left:22px}
.legal li{font-size:15px;line-height:1.7;color:var(--color-driftwood);margin:6px 0}
.legal strong{color:var(--color-midnight-ink);font-weight:600}
.legal a{color:var(--accent)}
.legal a:hover{text-decoration:underline}
.legal .callout{background:var(--surface-card);border:1px solid var(--color-ash-border);border-left:3px solid var(--accent);border-radius:var(--radius-xl);padding:18px 20px;margin:20px 0}
.legal .callout p{margin:6px 0;color:var(--color-midnight-ink)}
.legal .toc{background:var(--surface-card);border-radius:var(--radius-2xl);padding:22px 26px;margin:8px 0 32px}
.legal .toc .ttl{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--color-fog);margin-bottom:10px}
.legal .toc ol{columns:2;column-gap:32px;padding-left:18px}
.legal .toc li{margin:5px 0;font-size:14px}
.legal .toc a{color:var(--color-driftwood)}
.legal .toc a:hover{color:var(--accent)}
@media(max-width:560px){.legal .toc ol{columns:1}}
.legal-contact{background:var(--surface-card);border-radius:var(--radius-2xl);padding:24px 26px;margin-top:40px}
.legal-contact p{font-size:14px;color:var(--color-driftwood);line-height:1.7;margin:4px 0}
.legal-contact .co{color:var(--color-midnight-ink);font-weight:600}