/* dvdnaflash.top — базовые стили E1.
   Без внешних CDN: шрифты системные, иконки — текстовые глифы.
   Цель — CLS 0: у всех блоков фиксированная сетка, без подгружаемых шрифтов. */

:root{
  --c-bg:#f6f7f9;
  --c-surface:#ffffff;
  --c-ink:#161b22;
  --c-ink-soft:#4a5462;
  --c-line:#dfe3e8;
  --c-brand:#1f5f8b;
  --c-brand-dark:#14496c;
  --c-accent:#e07a1f;
  --r:10px;
  --w:1160px;
  --sp:clamp(1rem,2.5vw,2rem);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.page{
  margin:0;font-family:var(--font);font-size:17px;line-height:1.6;
  color:var(--c-ink);background:var(--c-bg);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.22;margin:0 0 .6em;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--c-brand);color:#fff;padding:.7rem 1rem;border-radius:0 0 var(--r) 0;
}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}

/* ---------- header ---------- */
.site-header{background:var(--c-surface);border-bottom:1px solid var(--c-line);
  position:sticky;top:0;z-index:20}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.site-header__bar{
  max-width:var(--w);margin:0 auto;padding:.7rem var(--sp);
  display:flex;align-items:center;gap:1rem;flex-wrap:nowrap;
}
/* Логотип сжимается (flex-shrink) и не выдавливает меню на вторую строку.
   Раньше был flex:1 1 auto + wrap — из-за этого шапка «налазила» на ноутбуке. */
.site-logo{display:flex;align-items:center;gap:.6rem;color:var(--c-ink);
  flex:0 1 auto;min-width:0;margin-right:auto;overflow:hidden}
.site-logo:hover{text-decoration:none}
.site-logo__mark{
  font-size:1.7rem;line-height:1;color:var(--c-brand);
  width:2.4rem;height:2.4rem;display:grid;place-items:center;
  border:2px solid var(--c-brand);border-radius:50%;flex:0 0 auto;
}
.site-logo__text{display:flex;flex-direction:column;min-width:0}
.site-logo__name{font-size:1.12rem;letter-spacing:-.02em;white-space:nowrap}
.site-logo__tagline{font-size:.78rem;color:var(--c-ink-soft);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav-burger{
  display:none;flex-direction:column;gap:5px;padding:.6rem;cursor:pointer;
  border:1px solid var(--c-line);border-radius:8px;
}
.nav-burger span{display:block;width:22px;height:2px;background:var(--c-ink)}

/* flex:0 0 auto — меню держит свою ширину и остаётся в одной строке с логотипом */
.main-nav{display:flex;align-items:center;gap:1rem;flex-wrap:nowrap;flex:0 0 auto}
.main-nav__list{display:flex;gap:.2rem;flex-wrap:nowrap}
.main-nav__link{
  display:block;padding:.5rem .7rem;border-radius:8px;
  color:var(--c-ink);font-size:.95rem;font-weight:500;
}
.main-nav__link:hover{background:var(--c-bg);text-decoration:none}
.main-nav__link.is-active{color:var(--c-brand);background:#eaf2f8}
.main-nav__aside{display:flex;align-items:center;gap:.9rem}

.lang-switcher{display:flex;gap:.15rem;border:1px solid var(--c-line);border-radius:8px;padding:2px}
.lang-switcher__item{
  padding:.28rem .5rem;font-size:.8rem;font-weight:700;border-radius:6px;
  color:var(--c-ink-soft);
}
.lang-switcher__item.is-current{background:var(--c-brand);color:#fff}
.lang-switcher__item.is-disabled{opacity:.4;cursor:not-allowed}
.header-phone{display:inline-flex;align-items:center;gap:.4rem;
  font-weight:700;white-space:nowrap;font-size:.95rem}
.header-phone__icon{flex:0 0 auto}

/* ---------- main / sections ---------- */
.site-main{max-width:var(--w);margin:0 auto;padding:0 var(--sp) 3rem}
.section{padding:2.4rem 0;border-top:1px solid var(--c-line)}
.section:first-child{border-top:0}
.section--muted{background:var(--c-surface);border-radius:var(--r);
  padding:2rem var(--sp);margin:2rem 0;border-top:0}
.section--center{text-align:center;padding:4rem 0}
.section__title{font-size:clamp(1.35rem,3vw,1.85rem)}
.section__more{margin:1.2rem 0 0;font-weight:600}

.hero{padding:3rem 0 2.4rem}
.hero__title{font-size:clamp(1.7rem,4.6vw,2.7rem)}
.hero__lead{font-size:clamp(1rem,2vw,1.16rem);color:var(--c-ink-soft);max-width:62ch}
.hero__actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}

.page-head{padding:2.2rem 0 1rem}
.page-head__title{font-size:clamp(1.6rem,4vw,2.3rem)}
.page-head__lead{color:var(--c-ink-soft);max-width:66ch}

.btn{
  display:inline-block;padding:.72rem 1.3rem;border-radius:9px;font-weight:600;
  border:2px solid transparent;font-size:.98rem;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.btn--primary:hover{background:var(--c-brand-dark);border-color:var(--c-brand-dark)}
.btn--ghost{border-color:var(--c-brand);color:var(--c-brand);background:var(--c-surface)}
.btn--ghost:hover{background:#eaf2f8}

.breadcrumbs{padding:1rem 0 0;font-size:.85rem;color:var(--c-ink-soft)}
.breadcrumbs__list{display:flex;flex-wrap:wrap;gap:.4rem}
.breadcrumbs__item+.breadcrumbs__item::before{content:"/";margin-right:.4rem;opacity:.5}

.notice{
  background:var(--c-surface);border:1px solid var(--c-line);border-left:4px solid var(--c-accent);
  border-radius:var(--r);padding:.9rem 1.1rem;margin:0 0 1rem;color:var(--c-ink-soft);
}

/* ---------- карточки услуг (равная высота, CLS 0) ---------- */
.card-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.service-card{display:flex}
.service-card__link{
  display:flex;flex-direction:column;gap:.4rem;width:100%;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);
  padding:1.2rem;color:var(--c-ink);
}
.service-card__link:hover{text-decoration:none;border-color:var(--c-brand);
  box-shadow:0 4px 16px rgba(22,27,34,.07)}
.service-card__icon{color:var(--c-brand);font-size:1.4rem;line-height:1}
.service-card__title{font-size:1.06rem;margin:0}
.service-card__text{font-size:.92rem;color:var(--c-ink-soft);margin:0;flex:1 1 auto}
.service-card__cta{color:var(--c-brand);font-weight:600;font-size:.9rem;margin-top:.5rem}

/* ---------- карточки блога (равная высота, 3/2/1, CLS 0) ---------- */
.post-card{display:flex}
.post-card__link{
  display:flex;flex-direction:column;gap:.35rem;width:100%;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);
  padding:1.2rem;color:var(--c-ink);
}
.post-card__link:hover{text-decoration:none;border-color:var(--c-brand);
  box-shadow:0 4px 16px rgba(22,27,34,.07)}
.post-card__cat{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--c-accent);font-weight:700;
}
.post-card__title{font-size:1.05rem;margin:0}
.post-card__text{font-size:.92rem;color:var(--c-ink-soft);margin:0;flex:1 1 auto}
.post-card__meta{font-size:.8rem;color:var(--c-ink-soft)}
.post-card__cta{color:var(--c-brand);font-weight:600;font-size:.9rem}

.pager{display:flex;align-items:center;gap:1rem;justify-content:center;padding:1.4rem 0}
.pager__link{font-weight:700}
.pager__current{color:var(--c-ink-soft);font-size:.92rem}

/* ---------- прайс ---------- */
.price-block__effective{font-weight:700;color:var(--c-accent);margin-bottom:1rem}
.price-block__disclaimer{font-size:.85rem;color:var(--c-ink-soft);margin-top:.8rem}
.price-table{
  width:100%;border-collapse:collapse;background:var(--c-surface);
  border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden;
  margin:0 0 1.6rem;font-size:.95rem;
}
.price-table__caption{
  caption-side:top;text-align:left;font-weight:700;padding:.7rem .2rem;color:var(--c-ink);
}
.price-table th,.price-table td{padding:.7rem .9rem;border-top:1px solid var(--c-line);text-align:left}
.price-table thead th{background:#eef1f4;border-top:0;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--c-ink-soft)}
.price-table__num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700}
.price-table__name{font-weight:400}
.price-table__title{font-weight:700;display:block}
.price-table__qty{display:block;font-size:.85rem;color:var(--c-brand);font-weight:600}
.price-table__note{display:block;font-size:.83rem;color:var(--c-ink-soft);margin-top:.15rem}
.price-table tr.is-popular{background:#fdf6ee}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:.55rem}
.faq-item{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r)}
.faq-item__q{padding:.9rem 1.1rem;font-weight:600;cursor:pointer;list-style:none}
.faq-item__q::-webkit-details-marker{display:none}
.faq-item__q::before{content:"+";color:var(--c-brand);font-weight:700;margin-right:.6rem}
.faq-item[open] .faq-item__q::before{content:"–"}
.faq-item__a{padding:0 1.1rem .3rem;color:var(--c-ink-soft)}

/* ---------- контакты ---------- */
.contacts-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr));margin:1.5rem 0}
.contacts-card{background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r);padding:1.2rem}
.contacts-card__title{font-size:1.04rem;margin-bottom:.7rem}
.contacts-card__note{font-size:.88rem;color:var(--c-ink-soft);margin:.7rem 0 0}
.contacts-list{display:flex;flex-direction:column;gap:.55rem}
.contacts-list li{font-size:.95rem}
.contacts-list a{font-weight:700}
.contacts-list__label,.contacts-list__msg{
  display:block;font-size:.8rem;color:var(--c-ink-soft);text-transform:uppercase;letter-spacing:.03em;
}
.contacts-list__msg{text-transform:none;letter-spacing:0;color:var(--c-brand)}
.contacts-address{font-style:normal;font-weight:700;line-height:1.5}

/* ---------- CTA ---------- */
.cta-bar{
  background:var(--c-brand);color:#fff;border-radius:var(--r);
  padding:2rem var(--sp);margin:2.4rem 0 0;
}
.cta-bar__title{font-size:clamp(1.25rem,3vw,1.7rem);margin-bottom:.4rem}
.cta-bar__text{opacity:.92;max-width:60ch}
.cta-bar__actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.cta-bar .btn--primary{background:#fff;color:var(--c-brand);border-color:#fff}
.cta-bar .btn--ghost{border-color:rgba(255,255,255,.75);color:#fff;background:transparent}
.cta-bar .btn--ghost:hover{background:rgba(255,255,255,.14)}

/* ---------- prose (body из WYSIWYG) ---------- */
.prose{max-width:74ch}
.prose h2{font-size:1.4rem;margin-top:1.8rem}
.prose h3{font-size:1.15rem;margin-top:1.4rem}
.prose ul,.prose ol{margin:0 0 1em 1.3em;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.35em}

/* ---------- footer ---------- */
.site-footer{background:var(--c-ink);color:#c9d1d9;margin-top:2rem}
.site-footer__inner{
  max-width:var(--w);margin:0 auto;padding:2.4rem var(--sp) 1.4rem;
  display:grid;gap:1.6rem;grid-template-columns:repeat(3,minmax(0,1fr));
}
.footer-col__title{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  color:#8b949e;margin-bottom:.8rem}
.site-footer a{color:#fff}
.footer-contacts,.footer-nav{display:flex;flex-direction:column;gap:.5rem;font-size:.93rem}
.footer-contacts__label{display:block;font-size:.75rem;color:#8b949e;text-transform:uppercase}
.footer-note{font-size:.87rem;color:#8b949e;margin:0 0 .7rem}
.site-footer__legal{
  max-width:var(--w);margin:0 auto;padding:0 var(--sp) 1.8rem;
  font-size:.8rem;color:#6e7681;
}

/* ---------- адаптив ---------- */
/* Ноутбуки: меню ещё горизонтальное, но места мало — экономим ширину.
   Телефон превращается в кнопку-трубку без цифр (номер остаётся в aria-label). */
@media (max-width:1240px){
  .site-header__bar{gap:.7rem}
  .main-nav{gap:.7rem}
  .main-nav__link{padding:.5rem .5rem;font-size:.9rem}
  .site-logo__tagline{display:none}
  .header-phone__num{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .header-phone{
    justify-content:center;min-width:44px;min-height:44px;
    border:1px solid var(--c-line);border-radius:8px;color:var(--c-brand);
  }
  .header-phone:hover{background:var(--c-bg);text-decoration:none}
}
@media (max-width:900px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Бургер включаем раньше: 7 пунктов меню перестают влезать задолго до 760px */
@media (max-width:1024px){
  .site-header__bar{flex-wrap:wrap}
  .nav-burger{display:flex;order:3}
  .main-nav{
    order:4;flex-basis:100%;flex-direction:column;align-items:stretch;
    gap:.4rem;display:none;padding-bottom:.6rem;flex:1 1 100%;
  }
  .nav-toggle:checked ~ .site-header__bar .main-nav{display:flex}
  .main-nav__list{flex-direction:column;gap:0}
  .main-nav__link{padding:.75rem .6rem;border-bottom:1px solid var(--c-line);font-size:.95rem}
  .main-nav__aside{justify-content:space-between;padding-top:.6rem}
  /* В раскрытом меню места достаточно — возвращаем полный номер */
  .site-logo__tagline{display:block}
  .header-phone{border:0;min-width:0;padding:0}
  .header-phone__num{position:static;width:auto;height:auto;clip:auto;overflow:visible}
}
@media (max-width:760px){
  .contacts-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .card-grid{grid-template-columns:1fr}
  .site-footer__inner{grid-template-columns:1fr}
  body.page{font-size:16px}
}

/* --- Адреса офисов и карты (страница контактов) --- */
.offices-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 1rem; }
.offices-list__item { padding-left: 1rem; border-left: 3px solid var(--c-line); }
.offices-list__item.is-primary { border-left-color: var(--c-accent); }
.offices-list__label { display: block; font-size: .8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--c-accent); }
.offices-list__note { display: block; font-size: .875rem; color: var(--c-ink-soft); }
.offices-list__map { display: inline-block; margin-top: .25rem; font-size: .875rem; }

/* ---- Карты офисов: явные отступы, чтобы блоки не слипались ---- */
.map-grid{
  display:grid;grid-template-columns:1fr;
  gap:2rem;                         /* вертикальный разрыв на мобильных */
  margin-top:1.25rem;
}
@media (min-width:48em){
  .map-grid{grid-template-columns:repeat(2,1fr);gap:1.75rem 2rem}
}
.map-frame{
  margin:0;padding:.75rem;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r);
}
.map-frame + .map-frame{margin-top:0}
.map-frame__iframe{
  display:block;width:100%;height:320px;border:0;
  border-radius:calc(var(--r) - 4px);background:var(--c-bg);
}
.map-frame__caption{
  padding-top:.6rem;font-size:.9375rem;color:var(--c-ink-soft);
  border-top:1px solid var(--c-line);margin-top:.6rem;
}
.map-frame__caption strong{color:var(--c-ink)}

/* ---- Мессенджеры: контакты, CTA, футер ---- */
.messenger-list{list-style:none;margin:0 0 .75rem;padding:0;display:grid;gap:.6rem}
.messenger-link{
  display:flex;align-items:center;gap:.6rem;
  padding:.62rem .9rem;border:1px solid var(--c-line);border-radius:var(--r);
  background:var(--c-surface);color:var(--c-ink);font-weight:600;
}
.messenger-link:hover{border-color:var(--c-brand);text-decoration:none}
.messenger-link__icon{
  width:1.75rem;height:1.75rem;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;color:#fff;font-size:.95rem;line-height:1;
}
.messenger-link--telegram .messenger-link__icon{background:#229ED9}
.messenger-link--viber .messenger-link__icon{background:#7360F2}
.messenger-link--whatsapp .messenger-link__icon{background:#25D366}
.messenger-link--telegram{border-color:#229ED9}

.btn--msg{display:inline-flex;align-items:center;gap:.4rem}
.btn--telegram{border-color:#229ED9;color:#12769f;background:var(--c-surface)}
.btn--telegram:hover{background:#229ED9;color:#fff}
.btn--viber{border-color:#7360F2;color:#5343d6;background:var(--c-surface)}
.btn--viber:hover{background:#7360F2;color:#fff}
.btn--whatsapp{border-color:#1da851;color:#157f3d;background:var(--c-surface)}
.btn--whatsapp:hover{background:#1da851;color:#fff}

.footer-messengers{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.footer-messengers__link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .7rem;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;font-size:.9375rem;
}
.footer-messengers__link:hover{border-color:currentColor;text-decoration:none}

/* ---- Логотип-картинка в шапке ---- */
.site-logo__mark{
  width:2.6rem;height:2.6rem;flex:0 0 auto;
  border:0;border-radius:0;background:none;
}

/* ---- Форма заявки ---- */
.order-form{max-width:44rem}
.order-form__group{
  border:1px solid var(--c-line);border-radius:var(--r);
  padding:1.1rem 1.2rem 1.4rem;margin:0 0 1.5rem;background:var(--c-surface);
}
.order-form__legend{padding:0 .5rem;font-weight:700;color:var(--c-brand)}
.field{margin:0 0 1.15rem}
.field:last-child{margin-bottom:0}
.field__label{display:block;font-weight:600;margin-bottom:.35rem}
.field__req{font-weight:400;font-size:.875rem;color:var(--c-ink-soft)}
.field__input{
  display:block;width:100%;padding:.6rem .75rem;font:inherit;color:var(--c-ink);
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);
}
.field__input:focus{outline:2px solid var(--c-brand);outline-offset:1px;border-color:var(--c-brand)}
.field__input--num{max-width:9rem}
.field__input--area{resize:vertical;min-height:6rem}
.field__input.is-invalid{border-color:#c62828;background:#fff7f7}
.field__hint{display:block;margin-top:.35rem;font-size:.9rem;color:var(--c-ink-soft)}
.field__error{display:block;margin-top:.35rem;font-size:.9rem;color:#c62828;font-weight:600}
.field--check{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start}
.field--check label{font-size:.95rem;line-height:1.45}
.field--check input{margin-top:.25rem;width:1.15rem;height:1.15rem}
.field--check .field__error{grid-column:1 / -1}
.btn--wide{width:100%;max-width:22rem;justify-content:center;padding:.8rem 1.2rem;font-size:1.05rem}
/* honeypot: невидим для человека, доступен ботам */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.order-form__alt{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--c-line)}
.order-form__alt-title{margin:0 0 .8rem;font-weight:600}
.messenger-list--row{display:flex;flex-wrap:wrap;gap:.6rem}
.messenger-list--row .messenger-link{min-width:13rem}

/* ---- Уведомления ---- */
.alert{padding:1rem 1.15rem;border-radius:var(--r);border:1px solid var(--c-line);margin:0 0 1.25rem}
.alert--success{background:#f1f8f2;border-color:#9ccfa5}
.alert--error{background:#fdf3f3;border-color:#e0a3a3;color:#8f2020;font-weight:600}
.alert__title{margin:0 0 .6rem;font-weight:700;font-size:1.05rem}
.alert__code{margin:0 0 .4rem;font-size:1.15rem}
.alert__code strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;
  background:var(--c-surface);padding:.15rem .5rem;border-radius:6px;border:1px solid #9ccfa5}
.alert__note{margin:0;font-size:.95rem;color:var(--c-ink-soft)}

/* CTA-пункт меню «Замовити» */
.main-nav__link.is-cta,.main-nav__item.is-cta>.main-nav__link{
  background:var(--c-accent);color:#fff;border-radius:var(--r);font-weight:700;
}
.main-nav__link.is-cta:hover{background:#c26714;color:#fff}