/* ===== Base ===== */
:root{
  --bg:#0e2f5a;
  --bg-dark:#0b2446;
  --ink:#e9eef5;
  --ink-muted:#b8c3d4;
  --accent:#c73333;
  --panel:#122d55;
  --panel-2:#0f2a50;
  --line:#2d4a78;
  --ok:#1f9d6a;
  --card:#11294c;
  --shadow: 0 8px 24px rgba(0,0,0,.25);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-dark) 100%);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0);overflow:hidden}

/* ===== Layout ===== */
.container{width:100%;max-width:1200px;margin-inline:auto;padding:0 20px}
.section{padding:64px 0}
.section_tint{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.section_split .split{display:grid;gap:32px}
@media (min-width: 960px){
  .section_split .split{grid-template-columns:1fr 1fr}
}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:50;background:rgba(11,36,70,.8);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--line)}
.header__wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.2px}
.logo__dot{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(199,51,51,.2)}
.logo__accent{color:var(--accent)}
.nav{display:flex;gap:18px}
.nav__link{color:var(--ink);text-decoration:none;opacity:.9}
.nav__link:hover,.nav__link:focus{opacity:1;text-decoration:underline}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;padding:84px 0 72px;border-bottom:1px solid var(--line)}
.hero__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(199,51,51,.25), transparent 60%);
  opacity:.9;
}
.hero__content{position:relative}
.hero__title{margin:0 0 10px;font-size:clamp(28px,3.6vw,44px);line-height:1.2}
.hero__subtitle{margin:0 0 16px;color:var(--ink-muted);max-width:860px}
.hero__bullets{margin:0 0 24px;padding-left:18px}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero__note{margin-top:10px;color:var(--ink-muted);font-size:14px}

.hero__svg{position:absolute;opacity:.3}
.hero__svg--left{left:-20px;top:-10px;height:120%;}
.hero__svg--right{right:-20px;bottom:-30px;height:130%;}
.svg-line{stroke:#3e5f94;stroke-width:2;fill:none}
.svg-node{fill:#193b6d;stroke:#496ea6;stroke-width:2}

.btn{display:inline-block;border:1px solid transparent;padding:12px 18px;border-radius:12px;text-decoration:none;cursor:pointer;transition:transform .06s ease, background .2s ease}
.btn:active{transform:translateY(1px)}
.btn_primary{background:var(--accent);color:#fff;border-color:rgba(0,0,0,.1);box-shadow:var(--shadow)}
.btn_primary:hover,.btn_primary:focus{filter:brightness(1.05)}
.btn_secondary{background:transparent;color:var(--ink);border-color:#3e5f94}
.btn_secondary:hover,.btn_secondary:focus{background:#173a6d}

/* ===== Lists, text ===== */
h2{margin:0 0 12px;font-size:clamp(22px,2.6vw,32px);line-height:1.3}
h3{margin:0 0 8px;font-size:clamp(18px,2vw,22px)}
.muted{color:var(--ink-muted)}
.list{margin:0;padding:0 0 0 18px}
.checklist{margin:14px 0 0;padding:0;list-style:none}
.checklist li{position:relative;padding-left:28px;margin:8px 0}
.checklist li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;background:conic-gradient(var(--ok) 0 75%, transparent 75% 100%);border:2px solid rgba(255,255,255,.15)}

/* ===== Cards ===== */
.cards{display:grid;gap:16px}
@media (min-width: 960px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid #1a3966;border-radius:var(--radius);padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.18);min-height:160px}
.card__title{margin:0 0 6px}
.card__text{margin:0;color:var(--ink-muted)}

/* ===== Tiles (products) ===== */
.grid{display:grid;gap:18px}
.grid_4{grid-template-columns:1fr}
.grid_3{grid-template-columns:1fr}
@media (min-width: 880px){.grid_4{grid-template-columns:repeat(4,1fr)}}
@media (min-width: 880px){.grid_3{grid-template-columns:repeat(3,1fr)}}

.tile{background:var(--panel);border:1px solid #1b3a6b;border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.tile__icon svg{width:40px;height:40px}
.tile .ico{fill:none;stroke:#9db4d7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile__title{margin:6px 0 0}
.tile__list{margin:6px 0 0;padding-left:18px;color:var(--ink-muted)}
.tile__footnote{margin:8px 0 0;color:var(--ink-muted);font-size:14px}

/* ===== Table ===== */
.table-wrap{overflow:auto;border:1px solid #1a3966;border-radius:var(--radius)}
.table{width:100%;border-collapse:collapse;min-width:640px;background:var(--panel-2)}
.table th,.table td{padding:12px;border-bottom:1px solid #1a3966;text-align:left}
.table thead th{background:#14315a;}
.note{margin-top:10px;color:var(--ink-muted)}

/* ===== Mini cases ===== */
.mini-case{background:var(--panel);border:1px solid #1b3a6b;border-radius:var(--radius);padding:16px}
.mini-case__title{margin:0 0 4px}
.mini-case__meta{margin:0 0 8px;color:var(--ink-muted);font-size:14px}

/* ===== Steps ===== */
.steps{margin:6px 0 0;padding-left:18px}
.steps li{margin:8px 0}

/* ===== FAQ ===== */
.faq{background:var(--panel);border:1px solid #1b3a6b;border-radius:var(--radius);padding:12px;margin:10px 0}
.faq__q{font-weight:600}
.faq__a{margin-top:8px;color:var(--ink-muted)}



/* ===== Footer ===== */
.footer{border-top:1px solid var(--line);padding:28px 0;background:#0b2546}
.footer__wrap{display:grid;gap:12px}
@media (min-width: 720px){.footer__wrap{grid-template-columns:2fr 2fr 1fr}}
.footer__brand{margin:0 0 6px;font-weight:700}
.footer__meta{margin:0;color:var(--ink-muted)}
.footer__addr{font-style:normal}
.footer__link{color:var(--ink)}


/* ===== Mobile hamburger (CSS-only) ===== */
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-toggle__btn{display:none;position:relative;width:36px;height:36px;border:1px solid #3e5f94;border-radius:10px;align-items:center;justify-content:center;cursor:pointer;background:rgba(17,41,76,.6)}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after{content:"";display:block;width:18px;height:2px;background:#e9eef5;border-radius:2px;position:relative;transition:transform .2s ease, opacity .2s ease}
.nav-toggle__bar::before{position:absolute;top:-6px}
.nav-toggle__bar::after{position:absolute;top:6px}

/* Mobile layout */
@media (max-width: 768px){
  .nav{position:absolute;top:64px;right:20px;background:#0b2546;border:1px solid #1a3966;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.35);padding:12px;display:none;flex-direction:column;min-width:220px}
  .nav__link{padding:10px 8px;border-radius:8px}
  .nav__link:focus,.nav__link:hover{background:#173a6d}
  .nav-toggle__btn{display:flex}
  .header__wrap{gap:10px}
  .nav-toggle:checked ~ .nav{display:flex}
  .nav-toggle:checked + .nav-toggle__btn .nav-toggle__bar{opacity:1;transform:rotate(45deg)}
  .nav-toggle:checked + .nav-toggle__btn .nav-toggle__bar::before{transform:rotate(90deg);top:0}
  .nav-toggle:checked + .nav-toggle__btn .nav-toggle__bar::after{opacity:0}
}

/* Ensure desktop stays unchanged */
@media (min-width: 769px){
  .nav{display:flex !important;position:static;background:transparent;border:none;box-shadow:none;padding:0;min-width:auto}
  .nav-toggle__btn{display:none}
}

/* ===== Enhancements: fixed header + :target mobile menu ===== */

/* 1) Fixed header (always visible) */
.header_fixed{position:fixed;top:0;left:0;right:0;z-index:1000}
/* Add top padding to body to prevent content jump under fixed header */
body{padding-top:72px}

/* 2) Mobile menu via :target — closes automatically when following any link */
.nav-toggle__btn{display:none;position:relative;width:36px;height:36px;border:1px solid #3e5f94;border-radius:10px;align-items:center;justify-content:center;background:rgba(17,41,76,.6)}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after{content:"";display:block;width:18px;height:2px;background:#e9eef5;border-radius:2px;position:relative;transition:transform .2s ease, opacity .2s ease}
.nav-toggle__bar::before{position:absolute;top:-6px}
.nav-toggle__bar::after{position:absolute;top:6px}

/* Default nav (desktop) stays as is from earlier styles */
/* Mobile behavior */
@media (max-width: 768px){
  .nav-toggle__btn{display:flex}
  .nav{
    position:fixed;top:72px;right:16px;display:none;
    flex-direction:column;align-items:flex-start;
    background:#0b2546;border:1px solid #1a3966;border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.35);padding:12px;min-width:240px
  }
  /* Show menu only when targeted */
  #menu:target{display:flex}
  .nav__link{padding:10px 8px;border-radius:8px;display:block;width:100%;margin-top:-30px}
  .nav__link:hover,.nav__link:focus{background:#173a6d}
  /* Close control (X) visible only on mobile */
  .nav__close{display:block;margin:0px 0px -34px auto;padding:6px 10px;border-radius:8px;
    text-decoration:none;color:#e9eef5;border:1px solid #3e5f94;background:transparent}
  .nav__close:hover,.nav__close:focus{background:#173a6d}
}

/* Desktop: show inline, hide toggle, no :target overlay needed */
@media (min-width: 769px){
  .nav{display:flex !important;position:static;background:transparent;border:none;box-shadow:none;padding:0;min-width:auto}
  .nav__close{display:none}
  .nav-toggle__btn{display:none}
}

/* Modal (CSS-only via :target) */
.modal{display:none;position:fixed;inset:0;z-index:2000;align-items:center;justify-content:center}
.modal:target{display:flex}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.modal__content{position:relative;z-index:1;background:#0b2546;border-radius:12px;box-shadow:0 0 24px rgba(0,0,0,.4);
  width:90%;max-width:370px;max-height:80vh;padding:20px;display:flex;flex-direction:column;gap:12px}
.modal__close{position:absolute;top:8px;right:12px;font-size:28px;color:#fff;text-decoration:none;background:transparent;line-height:1}
.modal__text{color:#e9eef5;margin:0 0 8px}
.modal__cta{text-align:center}



/* === Modal window for Digital Catalog === */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.modal:target {
  display: flex;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.modal__content {
  position: relative;
  z-index: 1;
  background: #0b2546;
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
  width: 90%;
  max-width: 960px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal__iframe {
  width: 100%;
  height: 80vh;
  border: none;
  background: #fff;
}

.modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  background: transparent;
  line-height: 1;
  z-index: 2;
}

.modal__close:hover,
.modal__close:focus {
  color: #e9eef5;
}


/* --- Fix: mobile CTA is not clickable --- */
@media (max-width: 768px){
  /* Декор не перехватывает клики */
  .hero__bg,
  .hero__svg { pointer-events: none; }

  /* Контент героя выше декоративных слоёв */
  .hero__content { position: relative; z-index: 1; }

  /* Кнопка гарантированно поверх */
  .hero__ctas .btn { position: relative; z-index: 2; }

  /* На всякий случай: когда меню скрыто — оно не ловит клики */
  .nav { pointer-events: none; }
  #menu:target { pointer-events: auto; }
}



    background-image:
      linear-gradient(180deg, rgba(14,47,90,.90) 0%, rgba(11,36,70,.96) 65%, rgba(11,36,70,1) 100%),
      -webkit-image-set(
        url('./assets/hero-mobile.webp') 1x,
        url('./assets/hero-mobile@2x.webp') 2x
      );
    background-image:
      linear-gradient(180deg, rgba(14,47,90,.90) 0%, rgba(11,36,70,.96) 65%, rgba(11,36,70,1) 100%),
      image-set(
        url('./assets/hero-mobile.webp') type('image/webp') 1x,
        url('./assets/hero-mobile@2x.webp') type('image/webp') 2x
      );
  }
}

/* Чтобы CTA были кликабельны */
.hero__content { position: relative; z-index: 1; }
.hero__ctas .btn { position: relative; z-index: 2; }