/* ==========================================================================
   AlWinDoors — design system layer
   Подключается после /styles.css и приводит промо-сайт к одному ритму:
   токены, типографика, отступы секций, мобильная навигация, sticky-CTA,
   компоненты страницы тарифов.
   ========================================================================== */

/* ---------- 1. Токены ---------- */
:root{
  --aw-paper:#f8f7f3;
  --aw-surface:#fff;
  --aw-ink:#112d43;
  --aw-ink-soft:#1c3b50;
  --aw-muted:#5e6d76;
  --aw-muted-2:#6b7f8a;
  --aw-line:#d9dfdf;
  --aw-line-soft:#e6eae6;
  --aw-wash:#e9ede9;
  --aw-orange:#bd4d25;
  --aw-orange-soft:#f0a579;
  --aw-on-dark:#fff;
  --aw-on-dark-muted:#b9c8d2;

  --aw-h2:clamp(30px,3.1vw,44px);
  --aw-h3:clamp(19px,1.6vw,22px);
  --aw-lead:clamp(15px,1.15vw,17px);
  --aw-section-y:clamp(48px,6vw,72px);
  --aw-gap:clamp(22px,3.2vw,48px);
  --aw-header-h:78px;
}

/* ---------- 2. Базовая типографика и доступность ---------- */
html{scroll-padding-top:calc(var(--aw-header-h) + 16px)}
::selection{background:#f4d9c9;color:var(--aw-ink)}
:focus-visible{outline:2px solid var(--aw-orange);outline-offset:3px}
.on-dark :focus-visible,.demo-section :focus-visible,.contact-section :focus-visible,.tariff-cta :focus-visible{outline-color:var(--aw-orange-soft)}

.eyebrow{font-family:var(--mono);font-size:10px;line-height:1.5;letter-spacing:.12em;font-weight:500;color:var(--aw-ink)}
.micro{color:var(--aw-muted-2)}

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

/* единый масштаб H2 для всех секций */
.section-heading h2,
.friction-intro h2,
.demo-heading h2,
.workshop-copy h2,
.faq-section h2,
.contact-layout h2{font-size:var(--aw-h2);line-height:1.14;letter-spacing:-.045em;font-weight:520;margin:0}

/* единый вторичный цвет текста на светлом фоне */
.hero-description,.hero-note,
.friction-intro>p:last-child,
.capability>p,.capability ul,
.launch-steps p,
.faq-list p,
.workshop-copy>p:not(.eyebrow),
.role-benefits p,
.plans-note,.plan-who,.plan-annual,.teaser .t-desc,.teaser-note,
.addon p,.rule-block ul,.matrix caption{color:var(--aw-muted)}

/* на тёмном фоне — один светлый нейтральный */
.demo-invitation p,
.meeting-agenda p,
.meeting-takeaway p,
.contact-layout>div>p:not(.eyebrow),
.tariff-cta p{color:var(--aw-on-dark-muted)}

/* H3: три уровня, без случайных значений */
.capability h3{font-size:26px;line-height:1.2}
.role-benefits h3,.meeting-agenda h3{font-size:16px;line-height:1.35}
.launch-steps h3{font-size:20px;line-height:1.3}
.addon h3{font-size:16px;line-height:1.35;font-weight:650;letter-spacing:-.02em}
.rule-block h3{font-size:18px;line-height:1.3}

/* кнопки: одна высота и один набор размеров */
.button{font-size:13px;min-height:50px;padding:15px 22px;gap:22px}
.button span{font-size:18px;line-height:1}
.button-primary{background:var(--aw-orange);border-color:var(--aw-orange);color:#fff}
.button-primary:hover{background:#9f3e1c;border-color:#9f3e1c}

/* ---------- 3. Вертикальный ритм ---------- */
.friction-section,.demo-section,.section,.launch-section,.faq-section,.contact-section,
.tariff-teaser,.plans,.matrix-section,.addons,.rules,.faq-tariffs,.tariff-cta{
  padding-block:var(--aw-section-y);
}
.section-heading{margin-bottom:var(--aw-gap)}
.friction-section{gap:var(--aw-gap);padding-block:var(--aw-section-y)}
.demo-heading,.launch-section .section-heading{margin-bottom:calc(var(--aw-gap) * .75)}
.page-hero{padding-block:clamp(36px,4.6vw,60px) clamp(28px,3.4vw,44px)}

/* ---------- 4. Шапка и мобильная навигация ---------- */
.header{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--aw-line);background:#f8f7f3f2;backdrop-filter:blur(12px)}
.header.is-scrolled{box-shadow:0 10px 24px rgba(17,45,67,.06)}
.header-inner{min-height:var(--aw-header-h)}
.desktop-nav a{position:relative;padding-block:4px;color:var(--aw-ink);transition:color .15s ease}
.desktop-nav a[aria-current="page"]{color:var(--aw-orange)}
.header-cta{min-height:46px}

.menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  background:transparent;border:1px solid #a2adb5;color:var(--aw-ink);cursor:pointer}
.menu-toggle:hover{border-color:var(--aw-ink)}
.menu-toggle-bars{position:relative;display:block;width:18px;height:12px}
.menu-toggle-bars i{position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .18s ease,opacity .18s ease}
.menu-toggle-bars i:nth-child(1){top:0}
.menu-toggle-bars i:nth-child(2){top:5px}
.menu-toggle-bars i:nth-child(3){top:10px}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.mobile-nav{position:absolute;left:0;right:0;top:100%;z-index:29;
  background:var(--aw-paper);border-bottom:1px solid var(--aw-line);
  padding:6px 20px 22px;box-shadow:0 18px 30px rgba(17,45,67,.08)}
.mobile-nav[hidden]{display:none}
.mobile-nav a{display:flex;align-items:center;justify-content:space-between;
  padding:15px 2px;border-top:1px solid var(--aw-line-soft);
  font-size:15px;color:var(--aw-ink);text-decoration:none}
.mobile-nav a:first-child{border-top:0}
.mobile-nav a[aria-current="page"]{color:var(--aw-orange)}
.mobile-nav .button{margin-top:14px;justify-content:space-between;font-size:13px;border-top:0;padding:15px 18px;color:#fff}

@media (max-width:900px){
  :root{--aw-header-h:72px}
  .desktop-nav{display:none}
  .menu-toggle{display:inline-flex}
}
@media (min-width:901px){
  .mobile-nav{display:none}
}

/* ---------- 5. Sticky-CTA ---------- */
.sticky-demo{align-items:center;background:var(--aw-surface);border:1px solid var(--aw-line);box-shadow:0 18px 40px rgba(17,45,67,.16);padding-right:46px}
.sticky-close{position:absolute;top:6px;right:6px;width:30px;height:30px;padding:0;
  display:grid;place-items:center;background:transparent;border:0;cursor:pointer;
  color:var(--aw-muted-2);font-size:18px;line-height:1}
.sticky-close:hover{color:var(--aw-ink)}
body.has-sticky{padding-bottom:86px}
@media (max-width:620px){body.has-sticky{padding-bottom:104px}}

/* ---------- 6. Подвал ---------- */
.footer{border-top:1px solid var(--aw-line);background:var(--aw-paper)}
.footer>.wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;align-items:start;padding-block:38px}
.footer-brand{font-size:22px}
.footer-brand span{margin-top:6px}
.footer-col{display:grid;gap:9px;align-content:start}
.footer-col>span{font:9px var(--mono);letter-spacing:.12em;color:var(--aw-muted-2);margin-bottom:2px}
.footer-col a{font-size:12.5px;color:var(--aw-ink)}
.footer-col a:hover{color:var(--aw-orange)}
.footer-note{font-size:11.5px;line-height:1.7;color:var(--aw-muted)}
@media (max-width:820px){
  .footer>.wrap{grid-template-columns:1fr 1fr;gap:26px}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:520px){
  .footer>.wrap{grid-template-columns:1fr}
}

/* ---------- 7. Главная: тизер тарифов ---------- */
.teaser-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.teaser{position:relative;display:flex;flex-direction:column;gap:6px;
  background:var(--aw-surface);border:1px solid #ced7db;padding:22px 20px 18px}
.teaser.featured{border:2px solid var(--aw-ink);box-shadow:7px 8px 0 #e4e7e2;padding:21px 19px 17px}
.teaser .t-badge{position:absolute;top:-1px;left:-1px;background:var(--aw-ink);color:#fff;
  font-family:var(--mono);font-size:8px;letter-spacing:.1em;padding:5px 8px}
.teaser .t-name{font-size:17px;font-weight:650;letter-spacing:-.03em;margin-top:12px}
.teaser .t-price{font-size:30px;font-weight:600;letter-spacing:-.05em;line-height:1.02;white-space:nowrap}
.teaser .t-price small{font-size:12px;font-weight:600;letter-spacing:0;color:var(--aw-muted);margin-left:2px}
.teaser .t-annual{font-size:11.5px;color:var(--aw-muted)}
.teaser .t-desc{font-size:12.5px;line-height:1.55;margin:6px 0 0}
.teaser .t-link{margin-top:auto;padding-top:16px;font-size:12.5px;font-weight:600;color:var(--aw-ink)}
.teaser .t-link:hover{color:var(--aw-orange)}
@media (max-width:820px){.teaser-grid{grid-template-columns:1fr}}

/* ---------- 8. Страница тарифов: шапка ---------- */
.page-hero h1{font-size:clamp(34px,4.4vw,56px);line-height:1.07;letter-spacing:-.05em;font-weight:600;margin:0 0 22px;max-width:940px}
.page-hero .lead{max-width:660px;font-size:var(--aw-lead);line-height:1.62;color:#536673;margin:0 0 26px}
.page-hero .hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.page-hero .hero-note{margin-top:16px}

.toggle-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.currency-switch{display:inline-flex;border:1px solid #b9c3c9;background:var(--aw-surface)}
.currency-switch button{appearance:none;background:transparent;border:0;padding:10px 16px;
  font:inherit;font-size:12px;font-weight:650;color:var(--aw-ink);cursor:pointer;
  display:flex;gap:8px;align-items:center;min-height:42px}
.currency-switch button+button{border-left:1px solid #b9c3c9}
.currency-switch button[aria-pressed="true"]{background:var(--aw-ink);color:#fff}
.currency-switch button:focus-visible{outline-offset:-2px}

/* ---------- 9. Карточки тарифов ---------- */
.plan-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--aw-surface);
  border:1px solid #ced7db;padding:22px 18px 16px;transition:border-color .15s ease,box-shadow .15s ease}
.plan:hover{border-color:#aebdc6}
.plan.featured{border:2px solid var(--aw-ink);box-shadow:7px 8px 0 #e4e7e2;padding:21px 17px 15px}
.plan-badge{position:absolute;top:-1px;left:-1px;background:var(--aw-ink);color:#fff;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;padding:5px 8px}
.plan-badge.soon{background:var(--aw-orange)}
.plan-name{font-size:20px;font-weight:650;letter-spacing:-.03em;line-height:1.1;margin-top:14px}
.plan-who{font-size:11.5px;line-height:1.45;margin-top:6px;min-height:34px}
.plan-price{margin-top:16px;font-size:31px;font-weight:600;letter-spacing:-.05em;line-height:1;white-space:nowrap}
.plan-price small{font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--aw-muted);margin-left:3px}
.plan-annual{margin-top:6px;font-size:11.5px;line-height:1.45}
.plan-alt{margin-top:8px;font-size:11.5px;font-weight:650;color:#536673;line-height:1.4;
  border-top:1px dashed #d5dcdd;padding-top:8px}
.plan-list{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--aw-line);
  font-size:12px;line-height:1.45;color:var(--aw-ink)}
.plan-list li{position:relative;padding-left:13px;margin-bottom:7px}
.plan-list li:before{content:"";position:absolute;left:0;top:6px;width:4px;height:4px;background:var(--aw-orange)}
.plan-list li.dim{color:var(--aw-muted-2)}
.plan-cta{margin-top:auto;padding-top:16px}
.plan-cta .button{width:100%;justify-content:space-between;gap:8px;min-height:44px;padding:12px 13px;font-size:12px}
.plan-cta .button span{font-size:14px}
.plans-note{margin-top:20px;font-size:12.5px;line-height:1.65;max-width:900px}
.plans-note strong{color:var(--aw-ink)}
.enterprise{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:26px;
  border:1px solid #ced7db;background:var(--aw-surface);padding:20px 22px;flex-wrap:wrap}
.enterprise>div{max-width:780px}
.enterprise strong{font-size:15.5px;display:block;margin-bottom:5px}
.enterprise p{font-size:12.5px;line-height:1.6;color:var(--aw-muted);margin:0}
.enterprise .button{min-height:46px;padding:12px 18px;font-size:12.5px}

/* ---------- 10. Матрица функций ---------- */
.matrix-section{background:var(--aw-surface);border-top:1px solid var(--aw-line)}
.matrix-hint{display:none;margin:18px 0 0;font:10px var(--mono);letter-spacing:.08em;color:var(--aw-muted-2)}
.matrix-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:20px;font-size:11.5px;color:var(--aw-muted)}
.matrix-legend span{display:inline-flex;align-items:center;gap:7px}
.matrix-legend b{font-weight:650;color:#38644c}
.matrix-legend i{font-style:normal;color:#9a5a22;font-weight:600}
.matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:24px;border:1px solid var(--aw-line)}
.matrix{width:100%;min-width:840px;border-collapse:collapse;font-size:12.5px;line-height:1.45}
.matrix th,.matrix td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--aw-line);vertical-align:top}
.matrix thead th{background:var(--aw-paper);font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  font-weight:500;text-transform:uppercase;color:var(--aw-muted);border-bottom:1px solid #c9d2d6}
.matrix tbody tr:hover td{background:#fbfaf6}
.matrix td{color:#3f5361}
.matrix th:first-child,.matrix td:first-child{font-weight:550;color:var(--aw-ink);background:var(--aw-surface);min-width:220px}
.matrix thead th:first-child{background:var(--aw-paper);width:32%}
.matrix .col-featured{background:#f4f6f2}
.matrix thead .col-featured{background:#e9eee8;color:var(--aw-ink)}
.matrix .yes{color:#38644c;font-weight:650}
.matrix .no{color:#9aa6ad}
.matrix .soon{color:#9a5a22;font-weight:600}
@media (max-width:900px){
  .matrix-hint{display:block}
  .matrix{min-width:760px}
  .matrix th:first-child,.matrix td:first-child{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--aw-line)}
}

/* ---------- 11. Аддоны ---------- */
.addons-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.addon{display:flex;flex-direction:column;gap:7px;background:var(--aw-surface);border:1px solid #ced7db;padding:18px 18px 16px}
.addon .micro{font-family:var(--mono);font-size:9px;letter-spacing:.08em}
.addon p{font-size:12px;line-height:1.55;margin:0}
.addon .addon-price{margin-top:auto;padding-top:12px;font-size:17px;font-weight:650;letter-spacing:-.02em}
.addon .addon-price small{font-size:11px;font-weight:600;color:var(--aw-muted);letter-spacing:0}

/* ---------- 12. Правила ---------- */
.rules{background:var(--aw-paper);border-top:1px solid var(--aw-line)}
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.rule-block{background:var(--aw-surface);border:1px solid #ced7db;padding:24px 24px 20px}
.rule-block h3{margin:0 0 14px}
.rule-block ul{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.6}
.rule-block li{position:relative;padding-left:17px;margin-bottom:10px}
.rule-block li:before{content:"→";position:absolute;left:0;top:0;color:var(--aw-orange);font-size:11px}

/* ---------- 13. FAQ и CTA страницы тарифов ---------- */
.faq-tariffs{border-top:1px solid var(--aw-line)}
.faq-tariffs.faq-section{display:grid;grid-template-columns:1fr 2fr;gap:var(--aw-gap);align-items:start}
.faq-tariffs h2{margin:18px 0 0}
.tariff-cta{background:var(--aw-ink);color:#fff;border-top:1px solid var(--aw-line)}
.tariff-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.tariff-cta h2{font-size:var(--aw-h2);line-height:1.14;letter-spacing:-.045em;font-weight:520;margin:0}
.tariff-cta p{max-width:540px;margin:10px 0 0;font-size:13px;line-height:1.6}
.tariff-cta .cta-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.tariff-cta .text-link{color:#fff;border-bottom:1px solid #5d7688;padding-bottom:2px}
@media (max-width:900px){
  .faq-tariffs.faq-section{grid-template-columns:1fr}
  .faq-tariffs h2{margin:10px 0 0}
}

/* ---------- 14. Переключатель валют ---------- */
html[data-currency="RUB"] .only-amd{display:none}
html[data-currency="AMD"] .only-rub{display:none}

/* ---------- 15. Адаптив ---------- */
@media (max-width:1180px){
  .plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .addons-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  :root{--aw-section-y:clamp(44px,7vw,58px)}
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rules-grid{grid-template-columns:1fr}
  .matrix{min-width:720px}
  .page-hero .lead{font-size:15px}
  .capability h3{font-size:24px}
}
@media (max-width:620px){
  :root{--aw-header-h:68px;--aw-section-y:44px}
  .plan-grid{grid-template-columns:1fr;gap:10px}
  .plan.featured{box-shadow:6px 7px 0 #e4e7e2}
  .plan-who{min-height:0}
  .plans{padding-block:32px 26px}
  .addons-grid{grid-template-columns:1fr}
  .enterprise{padding:18px}
  .enterprise .button{width:100%;justify-content:space-between}
  .tariff-cta .cta-actions{width:100%}
  .tariff-cta .button{width:100%;justify-content:space-between}
  .currency-switch button{padding:10px 13px;font-size:11.5px}
  .button{min-height:48px;padding:14px 18px;font-size:12px}
  .plan-cta .button{min-height:46px;font-size:12.5px}
}
@media (max-width:370px){
  :root{--aw-section-y:40px}
}

/* ---------- 16. Печать ---------- */
@media print{
  .header,.footer,.mobile-nav,.menu-toggle,.sticky-demo,.tariff-cta,.plan-cta,.currency-switch,.matrix-hint{display:none!important}
  body{background:#fff}
  .plan-grid{grid-template-columns:repeat(5,1fr);gap:6px}
  .plan{padding:10px;break-inside:avoid}
  .plan-price{font-size:16px}
  .matrix{min-width:0;font-size:9px}
  .matrix th,.matrix td{padding:5px}
  .only-rub,.only-amd{display:revert!important}
  .section,.friction-section,.demo-section,.launch-section,.faq-section,.contact-section,
  .plans,.matrix-section,.addons,.rules,.faq-tariffs,.tariff-cta{padding-block:18px}
}

.footer-brand-wrap{display:grid;gap:12px}


/* ---------- 17. Доработки после аудита ---------- */
.friction-section{grid-template-columns:.95fr 1.25fr}
.plans h2,.matrix-section h2,.addons h2,.rules h2{font-size:var(--aw-h2);line-height:1.14;letter-spacing:-.045em;font-weight:520;margin:0}
.matrix caption{caption-side:top;text-align:left;padding:0 0 14px;font-size:12px;line-height:1.6;color:var(--aw-muted)}
.plans-eyebrow{margin:0 0 18px}
.footer>.wrap{grid-template-columns:1.6fr 1fr 1fr}
.footer-brand-wrap .footer-note{margin:0}
.footer-copy{margin-top:4px!important;font-size:11px!important;color:var(--aw-muted-2)!important}
@media (max-width:520px){
  .header-cta{display:none}
}

@media (min-width:621px) and (max-width:820px){
  .plan-grid > .plan:last-child{grid-column:1/-1}
}