/* Светлый дизайн (легкий фон, белые карточки), WCAG 2.1 AA */
:root{
  --color-navy:#0B3967;
  --color-primary:#0A84FF; /* Azure */
  --color-primary-dark:#0A63CC;
  --color-teal:#00B3A4;
  --color-slate:#34495E;
  --color-light:#F6FAFF;
  --color-white:#FFFFFF;

  --bg:#FFFFFF;
  --text:#1F2937;

  --space-1: clamp(0.5rem, 1vw, 0.75rem);
  --space-2: clamp(0.75rem, 1.2vw, 1rem);
  --space-3: clamp(1rem, 1.6vw, 1.25rem);
  --space-4: clamp(1.25rem, 2vw, 1.75rem);
  --space-5: clamp(1.5rem, 3vw, 2.25rem);
  --container: min(1120px, 100% - 2rem);

  --radius: 12px;
  --shadow: 0 10px 24px rgba(2,25,56,.08);

  --fs-300: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
  --fs-400: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-500: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-600: clamp(1.25rem, 1.1rem + 1vw, 1.75rem);
  --fs-700: clamp(1.5rem, 1.2rem + 1.6vw, 2.125rem);
  --fs-800: clamp(2rem, 1.6rem + 2.4vw, 3rem);
}

*{box-sizing:border-box}
html{color-scheme: light; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans', Arial; font-size: var(--fs-400); line-height:1.6; color: var(--text); background: var(--bg)}
h1,h2,h3{font-family: Manrope, Inter, system-ui, sans-serif; line-height:1.2; margin:0 0 var(--space-3)}
h1{font-size: var(--fs-800)}
h2{font-size: var(--fs-700)}
h3{font-size: var(--fs-600)}
p{margin:0 0 var(--space-3)}
a{color: var(--color-primary-dark)} a:hover,a:focus{color: var(--color-primary)}

.container{width:var(--container); margin-inline:auto; padding:0}
.section{padding: clamp(2.5rem, 6vw, 5rem) 0}
.section__title{margin-bottom: var(--space-4)}

.skip-link{position:fixed; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left: var(--space-2); top: var(--space-2); width:auto; height:auto; padding: var(--space-2) var(--space-3); background: var(--color-primary-dark); color: #fff; border-radius: 6px; z-index:9999}

/* Header */
.header{background:#fff; border-bottom:1px solid #E6EAF2}
.header--sticky{position: sticky; top:0; z-index: 1000; backdrop-filter: saturate(180%) blur(6px)}
.header__row{display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap: var(--space-2); padding: var(--space-2) 0}
.logo{display:flex; align-items:center; gap:.5rem; color: var(--color-navy); text-decoration:none; font-weight:700; flex-shrink:0}
.logo__img{display:block; height:40px; width:auto}
@media (max-width: 480px){ .logo__img{height:34px} }

.nav__list{display:flex; flex-wrap:nowrap; gap: clamp(.5rem, 2vw, 1rem); list-style:none; margin:0; padding:0}
.nav__item{flex:0 0 auto}
.nav__link{white-space:nowrap; text-decoration:none; color: var(--text); padding: .5rem .75rem; border-radius: 8px}
.nav__link.is-active, .nav__link[aria-current="true"]{background: var(--color-light); outline: 2px solid var(--color-primary-dark); outline-offset: 0}

.header__cta{display:flex; align-items:center; gap: var(--space-2)}
.link-phone{white-space:nowrap; text-decoration:none; color: var(--color-navy); font-weight:600}

/* Buttons */
.btn{--btn-bg: var(--color-navy); --btn-fg:#fff; --btn-border: transparent; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding: .75rem 1rem; border-radius: 10px; border:2px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); text-decoration:none; font-weight:700; letter-spacing:.01em; transition: transform .15s ease, background .2s ease, border-color .2s ease}
.btn:focus-visible{outline: 3px solid var(--color-primary); outline-offset:3px}
.btn:hover{transform: translateY(-1px)} .btn:active{transform: translateY(0)}
.btn--primary{--btn-bg: var(--color-navy)}
.btn--ghost{--btn-bg: transparent; --btn-fg: var(--color-navy); --btn-border: var(--color-navy)} .btn--ghost:hover{--btn-bg: var(--color-light)}

/* Hero — светлый фон, мягкие волны */
.hero{background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%)}
.hero__grid{display:grid; grid-template-columns:1fr; gap: var(--space-5)}
.hero__title{max-width: 24ch}
.hero__subtitle{color: #374151}
.hero__actions{display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-3)}
.benefits{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: .75rem; margin-top: var(--space-4); padding:0; list-style:none}
.benefits__item{display:flex; align-items:center; gap:.5rem; background: var(--color-light); padding:.75rem .75rem; border-radius: 10px}
.icon{display:inline-flex; width:1.25rem; height:1.25rem; align-items:center; justify-content:center; color: var(--color-teal); font-weight:700}

/* === ОБНОВЛЕНО: фон из SVG-иллюстраций === */
.hero__media{
  min-height: 220px;
  border-radius: 16px;
  box-shadow: var(--shadow);
  /* сначала — картинка, ниже — градиент как graceful fallback */
  background:
    center / cover no-repeat url("./hero-aquifer-v2.svg"),
    linear-gradient(180deg, #EEF6FF 0%, #FFFFFF 100%);
  background-color: #EEF6FF; /* на случай, если SVG не загрузится */
}
@media (max-width: 640px){
  .hero__media{
    min-height: 200px;
    background:
      center / cover no-repeat url("./hero-aquifer-v2-mobile.svg"),
      linear-gradient(180deg, #EEF6FF 0%, #FFFFFF 100%);
    background-color: #EEF6FF;
  }
}
@media (min-width: 900px){ .hero__grid{grid-template-columns:1.1fr .9fr; align-items:center} }

/* About */
.about__grid{display:grid; grid-template-columns:1fr; gap: var(--space-4)}
@media (min-width: 800px){.about__grid{grid-template-columns:1.2fr .8fr}}
.list-check{list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.list-check li{padding-left:1.75rem; position:relative}
.list-check li::before{content:"✔"; position:absolute; left:.25rem; color: var(--color-teal); font-weight:700}

/* Services */
.cards{display:grid; grid-template-columns:1fr; gap: var(--space-3)}
.card{border:1px solid #E6EDF6; border-radius: var(--radius); padding: var(--space-4); background:#fff; box-shadow: 0 1px 0 #EFF3FA inset, var(--shadow)}
.card__title{margin-bottom:.25rem}
.card__text{margin:0}
@media (min-width: 720px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width: 1040px){.cards{grid-template-columns:repeat(3,1fr)}}

/* Process */
.steps{display:grid; gap: var(--space-3); padding:0; margin: 0; list-style:none}
.steps__item{border-left: 4px solid var(--color-primary-dark); padding: .5rem .75rem .5rem 1rem; background: #F9FBFF; border-radius: 8px}

/* KPI / Case */
.kpi{display:grid; grid-template-columns:repeat(3,1fr); gap: var(--space-3); margin-block: var(--space-4)}
.kpi__item{background: #F4F9FF; border: 1px solid #E5F0FF; border-radius: 12px; padding: var(--space-4); text-align:center}
.kpi__num{display:block; font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: var(--fs-600); color: var(--color-navy)}
.kpi__label{display:block; color: #475569}
.case{border:1px solid #E6EDF6; border-radius: 14px; overflow:hidden; background: #fff; box-shadow: var(--shadow)}
.case__header{display:flex; gap:.5rem; align-items:center; justify-content:space-between; padding: var(--space-3) var(--space-4); background: linear-gradient(90deg, #EAF3FF, #F4FAFF)}
.case__title{margin:0}
.case__tag{font-size: .825rem; background: var(--color-navy); color:#fff; padding:.25rem .5rem; border-radius: 999px}
.case__body{padding: var(--space-4)}
.case__grid{display:grid; grid-template-columns:1fr; gap: var(--space-3)}
.case__grid dt{font-weight:700}
.case__grid dd{margin:0}
@media (min-width: 900px){.case__grid{grid-template-columns:repeat(3,1fr)}}

/* FAQ */
.faq__list{display:grid; gap: .75rem}
.faq__item{border: 1px solid #E6EDF6; border-radius: 12px; background:#fff; padding: .5rem 1rem}
.faq__item[open]{box-shadow: var(--shadow)}
.faq__q{cursor:pointer; font-weight:700; padding: .75rem 0}
.faq__a{padding: 0 0 .75rem 0; color:#374151}

/* CTA */
.cta{background: linear-gradient(180deg, #F7FBFF 0, #FFF 100%)}
.cta__grid{display:grid; grid-template-columns:1fr; gap: var(--space-4)}
.form{display:grid; gap: var(--space-3); padding: var(--space-4); border:1px solid #E6EDF6; border-radius: 14px; background:#fff; box-shadow: var(--shadow)}
.form__title{margin:0 0 .5rem}
.form__field{display:grid; gap:.5rem}
label{font-weight:600}
input, textarea{width:100%; border:1px solid #CBD5E1; border-radius: 10px; padding:.75rem .9rem; font-size: var(--fs-400); background:#fff; color: var(--text)}
input:focus, textarea:focus{outline:3px solid var(--color-primary); outline-offset:2px; border-color: var(--color-primary-dark)}
.form__error{color:#B91C1C; min-height:1.2em; margin:0}
.form__note{margin-top:.25rem; color:#065F46}

/* Contact */
.contact__grid{display:grid; grid-template-columns:1fr; gap: var(--space-4)}
.contact__list{display:grid; gap:.5rem; padding:0; list-style:none}
.map{min-height: 240px; border-radius: 12px; background:
    linear-gradient(180deg, #E0F2FE, #E6FFFB),
    repeating-linear-gradient(90deg, rgba(11,57,103,.15) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(180deg, rgba(11,57,103,.15) 0 1px, transparent 1px 16px);
  border:1px solid #CFE8FF}

/* Footer */
.footer{background: var(--color-navy); color:#E6EEF7; padding: var(--space-4) 0}
.footer a{color:#D1E9FF}
.footer__grid{display:grid; grid-template-columns:1fr; gap: var(--space-3)}

/* To-top */
.to-top{position:fixed; right:1rem; bottom:1rem; z-index:1000; width:3rem; height:3rem; border-radius: 999px; border: 2px solid var(--color-navy); background:#fff; color: var(--color-navy); font-size: 1.25rem; line-height: 1; display:grid; place-items:center; cursor:pointer; box-shadow: var(--shadow); opacity:0; visibility:hidden; transition: opacity .2s ease, visibility .2s ease, transform .2s ease}
.to-top:focus-visible{outline:3px solid var(--color-primary)}
.to-top.is-visible{opacity:1; visibility:visible; transform: translateY(0)}
.to-top:not(.is-visible){transform: translateY(8px)}

/* Utilities */
.header, .section, .footer{padding-left:1rem; padding-right:1rem}

/* Responsive tweaks */
@media (min-width: 768px){
  .footer__grid{grid-template-columns: 1fr 1fr}
  .contact__grid{grid-template-columns:1.1fr .9fr}
}

/* Контрастные комбинации соответствуют WCAG AA. */

/* --- Visual/Nav/Map upgrades --- */
.card__icon{display:block; width:56px; height:56px; margin-bottom:.75rem}
.hp{position:absolute!important; left:-10000px!important; top:auto!important; width:1px!important; height:1px!important; overflow:hidden!important}
.muted{opacity:.7}
section[id]{scroll-margin-top: 88px}
.map{
  min-height: 260px;
  background:
    center / cover no-repeat url("./map-placeholder.svg"),
    linear-gradient(180deg,#E8F3FF 0%, #FFFFFF 100%);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* === Header nav: focus ring + active (no underline) === */
.header .nav__list a:focus-visible,
.header nav a[href*="#"]:focus-visible,
nav .nav__list a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 8px;
}
.header .nav__list a.is-active,
.header nav a[href*="#"][aria-current="true"],
nav .nav__list a.is-active,
nav .nav__list a[aria-current="true"] {
  color: var(--color-primary) !important;
  font-weight: 600;
}
section[id]{ scroll-margin-top:88px }
.hp{ position:absolute!important; left:-10000px!important; top:auto!important; width:1px!important; height:1px!important; overflow:hidden!important }