/* =========================================
   KB — Trustworthy Navy Header (3-zone flex)
   ========================================= */




/* Logo */

/* Nav (center) */

/* CTA (if used in nav) */
.nav__link--cta {
  background: #1E3A8A;
  color: #fff;
}
.nav__link--cta:hover {
  filter: brightness(1.05);
}

/* Language switcher (right) */

/* Mobile: nav hides, logo left + lang right remain */



/* =========================================
   HERO (headers + background + layout + portrait)
   Palette: Navy #1E3A8A, Green #22C55E, Sky #0EA5E9
   Targets ONLY .hero* + generic h1–h3 (safe)
   ========================================= */

/* ---------- Page background (subtle, premium) ---------- */


/* ---------- Headings (global, but simple) ---------- */


/* ---------- Hero layout ---------- */
/* ---------- Portrait block (styled “wow” circle) ---------- */
.hero__media {
  justify-self: center;
  position: relative;
  width: clamp(240px, 36vw, 420px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* layered frames */
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(14,165,233,.10), transparent),
    #FFFFFF;
  border: 2px solid #E2E8F0;
  box-shadow:
    0 18px 50px rgba(2,6,23,.10),
    inset 0 0 0 10px #F8FAFC;                 /* soft inner ring */
  overflow: hidden;
}
.hero__media::before {
  /* dotted arc decoration */
  content: "";
  position: absolute; inset: 10px;
  border-radius: 50%;
  border: 2px dotted rgba(30,58,138,.25);
  /* show only top-right arc */
  clip-path: polygon(55% 0, 100% 0, 100% 45%, 90% 55%, 75% 65%, 60% 70%, 55% 50%);
}
.hero__media::after {
  /* tiny color bead */
  content: "";
  position: absolute; right: 12%; top: 14%;
  width: 12px; height: 12px; border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 6px rgba(34,197,94,.18);
}
.hero__img {
  width: 100%; height: 100%; object-fit: cover;
  transform: translateY(0); transition: transform .4s ease;
  filter: saturate(1.02) contrast(1.02);
}
.hero__media:hover .hero__img { transform: translateY(-2px); }

/* subtle caption or name under photo (optional) */


/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; }        /* image above text on small screens */
  .hero__content { text-align: left; }
}

/* ================================
   Smooth scroll + anchor offset
   ================================ */


/* ================================
   Page background (soft navy)
   ================================ */


/* ================================
   Headings (elegant, readable)
   ================================ */

/* ================================
   Hero: layout + copy
   ================================ */
/* hero layout consolidated below */

/* ================================
   Buttons (Trustworthy Navy)
   ================================ */
/* buttons consolidated below */

/* ================================
   Portrait (circle + subtle rings)
   ================================ */
/* hero portrait styles consolidated below */

/* ================================
   Responsive stack
   ================================ */
/* hero responsive consolidated below */

/* Base */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0;
  color: #0F172A;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(1100px 520px at 80% -10%, rgba(14,165,233,0.10), transparent),
    linear-gradient(#F8FAFC, #FFFFFF);
}
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.container { width: min(1152px, 100% - 40px); margin-inline: auto; }

/* Header (Trustworthy Navy) */
.site-header{
  position: sticky; top:0; z-index:50;
  background: #ffffffcc;
  backdrop-filter: saturate(1.1) blur(8px);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 2px solid #CBD5E1; /* slightly thicker line */
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height: 50px; padding-block: 4px;
  width: min(1152px, 100% - 40px); margin-inline: auto;
}
.brand { display:inline-flex; align-items:center; text-decoration:none; color:#0F172A; }
.brand__logo-img { width: clamp(30px, 12vw, 100px); height:auto; object-fit:contain; }

.nav__list{
  display:flex; gap:16px; list-style:none; margin:0; padding:0;
}
.nav__link{
  display:inline-flex; align-items:center; padding:6px 10px;
  border-radius:8px; font-weight:600; font-size:15px; color:#0F172A; text-decoration:none;
  transition: background .2s ease, box-shadow .2s ease;
}
.nav__link:hover{ background:#f9fafb; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.nav__link[aria-current="page"]{ background:#f1f5f9; box-shadow: inset 0 0 0 1px #E2E8F0; }
.nav__link--current{ background:#f1f5f9; box-shadow: inset 0 0 0 1px #E2E8F0; }

.lang-switcher{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px; border-radius:999px; background:#fff; border:1px solid #E2E8F0;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.lang-switcher a{
  padding:5px 9px; border-radius:999px; font-size:13px; font-weight:700;
  color:#475569; text-decoration:none;
}
.lang-switcher .is-active{ background:#1E3A8A; color:#fff; }

@media (max-width: 768px) { .nav__list{ display:none; } }

/* Headings */
.h1, h1{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:800; font-size:clamp(32px,5vw,48px);
  line-height:1.12; letter-spacing:-0.01em; margin:0 0 12px;
}
.h2, h2{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:700; font-size:clamp(24px,3.5vw,32px);
  line-height:1.2; margin:0 0 10px;
}
.kb-underline{ position:relative; display:inline-block; padding-bottom:6px; }
.kb-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, rgba(30,58,138,.55), rgba(14,165,233,.45));
  border-radius:3px;
}

/* Match underline style for services title */
#services-title{ position:relative; display:inline-block; padding-bottom:6px; }
#services-title::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, rgba(30,58,138,.55), rgba(14,165,233,.45));
  border-radius:3px;
}

/* Hero */
.hero { position:relative; isolation:isolate; overflow:hidden; }
.hero__inner{
  display:grid; grid-template-columns: 1.05fr .95fr; align-items:center;
  gap:clamp(24px,5vw,48px); padding-block:clamp(40px,7vw,96px);
}
.hero__content{ max-width:68ch; text-align:left; }
.lead{ color:#475569; font-size:clamp(16px,2.2vw,18px); line-height:1.65; margin:10px 0; }
.usp{ color:#0F172A; font-size:16px; line-height:1.65; margin:8px 0 10px; }
.seo-note{ color:#64748B; font-size:14px; line-height:1.6; margin:6px 0 16px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:10px; border:1px solid transparent;
  font-weight:700; letter-spacing:.01em; text-decoration:none; white-space:nowrap;
  transition:transform .05s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease, color .2s ease;
}
.btn:focus-visible{ box-shadow:0 0 0 3px rgba(30,58,138,.22); }
.btn--primary{
  background:#1E3A8A; color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06), 0 10px 20px rgba(30,58,138,.18);
}
.btn--primary:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn--outline{
  color:#1E3A8A; background:transparent;
  border-color: color-mix(in oklab, #1E3A8A 65%, #FFFFFF 35%);
}
.btn--outline:hover{ background:rgba(30,58,138,.06); }
.btn--ghost{
  background:#ffffff; color:#0F172A; border:1px solid #E2E8F0;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.btn--ghost:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(2,6,23,.08); }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }

/* Portrait (hero) */
.hero__media{
  justify-self:center; position:relative; width:clamp(240px,36vw,420px);
  aspect-ratio:1/1; border-radius:50%;
  background: radial-gradient(120% 120% at 0% 0%, rgba(14,165,233,.10), transparent), #FFFFFF;
  border:2px solid #E2E8F0;
  box-shadow: 0 18px 50px rgba(2,6,23,.10), inset 0 0 0 10px #F8FAFC;
  overflow:hidden;
}
.hero__media::before{
  content:""; position:absolute; inset:12px; border-radius:50%;
  border:2px dotted rgba(30,58,138,.28);
  clip-path: polygon(55% 0, 100% 0, 100% 45%, 90% 55%, 75% 65%, 60% 70%, 55% 50%);
}
.hero__media::after{
  content:""; position:absolute; right:12%; top:14%;
  width:12px; height:12px; border-radius:50%; background:#22C55E;
  box-shadow:0 0 0 6px rgba(34,197,94,.18);
}
.hero__img{ width:100%; height:100%; object-fit:cover; transform:translateY(0); transition:transform .35s ease; filter:saturate(1.02) contrast(1.02); }
.hero__media:hover .hero__img{ transform:translateY(-2px); }

@media (max-width:960px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__media{ order:-1; }
}

/* About (own soft navy background) */
#about{ scroll-margin-top: 72px; }
.about{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 90% -10%, rgba(14,165,233,0.10), transparent),
    linear-gradient(#EEF3FF, #F3F7FD);
  border-top:1px solid #E2E8F0; border-bottom:1px solid #E2E8F0;
  padding-block: clamp(56px, 8vw, 104px);
}
.about__inner{
  display:grid; align-items:center; gap:clamp(24px,5vw,48px);
  grid-template-columns: 1.05fr .95fr;
}
.about__content{ max-width:68ch; }
.about__media{
  justify-self:center; position:relative; width:clamp(220px,34vw,400px);
  aspect-ratio:1/1; border-radius:50%; background:#fff; border:2px solid #E2E8F0;
  box-shadow:0 18px 50px rgba(2,6,23,.10); overflow:hidden;
}
.about__media::before{ content:""; position:absolute; inset:10px; border-radius:50%; box-shadow: inset 0 0 0 10px #F8FAFC; }
.about__img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.02); transform:translateY(0); transition:transform .35s ease; }
.about__media:hover .about__img{ transform:translateY(-2px); }

@media (max-width:960px){
  .about__inner{ grid-template-columns:1fr; }
  .about__media{ order:-1; }
}

/* Contact banner anchor offset */
#contact-banner{ scroll-margin-top: 72px; }

/* Small utilities */
.contact-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.cards{ list-style:none; padding:0; margin:0; display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card{ background:#fff; border:1px solid #E2E8F0; border-radius:12px; padding:16px; }
.section-cta{ margin-top:16px; }
.site-footer{ border-top:1px solid #E2E8F0; padding:24px 0; color:#475569; }
.footer__grid{ display:grid; gap:16px; grid-template-columns: 2fr 1fr 1fr; }
@media (max-width:960px){ .footer__grid{ grid-template-columns:1fr; } }


/* ================================
   Global links (no more purple)
   ================================ */
a:link, a:visited { color: #0EA5E9; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #1E3A8A; text-decoration-color: rgba(30,58,138,.5); }

/* ================================
   Services Teaser — cards
   ================================ */
.services-teaser {
  padding-block: clamp(56px, 8vw, 104px);
}

.services-teaser #services-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.services-teaser #services-title::after {
  content: ""; display: block; height: 3px; width: 200px; margin-top: 8px;
  background: linear-gradient(90deg, rgba(30,58,138,.55), rgba(14,165,233,.45));
  border-radius: 3px;
}

.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
}
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(240px, 1fr)); } }
@media (max-width: 720px)  { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 8px 30px rgba(2,6,23,.06);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}

/* subtle top accent bar */
.card::before {
  content: "";
  position: absolute; left: 14px; right: 14px; top: 10px; height: 4px;
  background: linear-gradient(90deg, rgba(30,58,138,.35), rgba(14,165,233,.35));
  border-radius: 4px;
  opacity: .6; transform: translateY(-8px);
  transition: transform .28s ease, opacity .28s ease;
}

/* gentle “shine” sweep on hover */
.card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}

.card h3 {
  margin: 10px 0 8px;
  font-weight: 800;
  color: #0F172A;
  font-size: clamp(18px, 2.3vw, 22px);
}

.card p {
  margin: 0;
  color: #475569;
  line-height: 1.6;
}

/* hover micro-interactions */
.card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, #1E3A8A 32%, #E2E8F0);
  box-shadow: 0 14px 40px rgba(2,6,23,.10);
}
.card:hover::before { transform: translateY(0); opacity: 1; }
.card:hover::after  { transform: translateX(120%); }

/* center the teaser CTA neatly */
.services-teaser .section-cta { margin-top: 18px; }
.services-teaser .section-cta .btn { font-size: 16px; }

/* ================================
   Contact Banner — soft section + chips
   ================================ */
.contact-banner {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px);
  background:
    radial-gradient(1100px 520px at 20% -10%, rgba(14,165,233,.10), transparent),
    linear-gradient(#F9FBFF, #F2F6FD);
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

.contact-banner h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  margin: 0 0 12px;
}

.contact-banner p {
  color: #475569;
  margin: 0 0 16px;
}

/* Pills grid */
.contact-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}


.contact-list a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: #0F172A; text-decoration: none;
  border: 1px solid #E2E8F0;
  box-shadow: 0 6px 22px rgba(2,6,23,.06);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease, background-color .2s ease;
  position: relative; overflow: hidden; /* for shine sweep */
}

/* Minor visual glyph fixes and overrides */
.site-footer .footer__nav a::after { content: "›"; }

@media (max-width: 700px){
  .lang-switcher .is-active::after { content: "▾"; }
}

/* replace emoji ::before with real icons */
.contact-list a::before,
.site-footer .contact-list a::before{ content: none !important; }

/* icon image inside contact pill */
.contact-list a .contact-icon{
  width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 50%;
  background: #F1F5F9;
  box-shadow: inset 0 0 0 1px #E2E8F0;
  object-fit: contain;
  padding: 2px;
}

.contact-list a:hover {
  transform: translateY(-3px);
  background: #FFFFFF;
  border-color: color-mix(in oklab, #1E3A8A 30%, #E2E8F0);
  box-shadow: 0 12px 30px rgba(2,6,23,.10);
}

/* Shine sweep on hover */
.contact-list a::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.contact-list a:hover::after{ transform: translateX(120%); }

/* (no float; using shine sweep like cards) */

/* Keep that bottom CTA tight */
.contact-banner .section-cta { margin-top: 18px; }

/* ================================
   Reveal-on-scroll (CSS side)
   ================================ */
.reveal { opacity: 0; transform: translateY(14px); filter: blur(3px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .card, .contact-list a { transition: none !important; }
  .contact-list a:hover { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ================================
   FOOTER — Trustworthy Navy polish
   ================================ */

.site-footer{
  position: relative;
  background:
    radial-gradient(1100px 520px at 80% -10%, rgba(14,165,233,.08), transparent),
    linear-gradient(#FFFFFF, #F8FAFC);
  border-top: 2px solid #E2E8F0;
  padding: clamp(32px, 6vw, 56px) 0;
  color: #475569;
}
.site-footer::before{
  /* thin navy accent line */
  content:""; position:absolute; left:0; right:0; top:-2px; height:3px;
  background: linear-gradient(90deg, rgba(30,58,138,.35), rgba(14,165,233,.25));
}

.footer__grid{
  width: min(1152px, 100% - 40px);
  margin-inline: auto;
  display: grid; gap: 24px;
  grid-template-columns: 1.6fr 1fr 1.3fr; /* brand | nav | contacts */
  align-items: start;
}
@media (max-width: 960px){
  .footer__grid{ grid-template-columns: 1fr; }
}

/* --- Brand block (left) --- */
.footer__brand{ display: grid; gap: 10px; align-content: start; }
.footer__brand .brand__logo{
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 14px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(14,165,233,.12), transparent),
    #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  color: #1E3A8A; font-weight: 800; letter-spacing: .04em;
  font-family: "Playfair Display", Georgia, serif;
}
.footer__brand p{ margin: 0; color: #64748B; }

/* --- Footer nav (middle) --- */
.footer__nav ul{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
}
.site-footer .footer__nav a{
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  color: #0F172A;
  padding: 6px 10px;
  border-radius: 10px;
  transition: background .2s ease, transform .05s ease, box-shadow .2s ease, color .2s ease;
}
.site-footer .footer__nav a::after{
  content: "→"; font-size: 14px; opacity: .0; transform: translateX(-6px);
  transition: transform .2s ease, opacity .2s ease;
}
.site-footer .footer__nav a:hover{
  background: #F1F5F9;
  box-shadow: 0 1px 2px rgba(2,6,23,.06);
  transform: translateY(-1px);
  color: #1E3A8A;
}
.site-footer .footer__nav a:hover::after{ opacity: 1; transform: translateX(2px); }

/* --- Contacts (right) — reuse pills but soften */
.site-footer .contact-list{
  grid-template-columns: 1fr; /* stack neatly on desktop too */
  gap: 12px;
}
.site-footer .contact-list a{
  background: #FFFFFF;
  border-color: #E2E8F0;
  color: #0F172A;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
  padding: 12px 14px;
}
.site-footer .contact-list a:hover{
  border-color: color-mix(in oklab, #1E3A8A 28%, #E2E8F0);
  box-shadow: 0 12px 30px rgba(2,6,23,.10);
}

/* --- Copyright / small text --- */
.site-footer small{
  display: block;
  margin-top: 14px;
  color: #94A3B8;
}

/* --- Link overrides only inside footer (no purple) --- */
.site-footer a:link,
.site-footer a:visited{
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* --- Subtle reveal for footer items (works with your existing JS) --- */
.js .site-footer .footer__brand,
.js .site-footer .footer__nav li,
.js .site-footer .footer__contacts .contact-list a,
.js .site-footer small{
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.js .site-footer.in-view .footer__brand,
.js .site-footer.in-view .footer__nav li,
.js .site-footer.in-view .footer__contacts .contact-list a,
.js .site-footer.in-view small{
  opacity: 1; transform: none;
}

/* Footer contact pills — same hover as "Готовы начать?" */
.site-footer .contact-list a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid #E2E8F0;
  box-shadow: 0 6px 22px rgba(2,6,23,.06);
  text-decoration: none;

  /* match the hero pills transitions */
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    border-color .2s ease,
    background-color .2s ease,
    color .2s ease;
}

.site-footer .contact-list a:hover{
  transform: translateY(-3px);
  background: #FFFFFF;
  border-color: color-mix(in oklab, #1E3A8A 30%, #E2E8F0);
  box-shadow: 0 12px 30px rgba(2,6,23,.10);
  color: #0F172A;
}

.site-footer .contact-list a:active{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(2,6,23,.10);
}

.site-footer .contact-list a:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(30,58,138,.22),
    0 6px 22px rgba(2,6,23,.06);
  border-color: color-mix(in oklab, #1E3A8A 35%, #E2E8F0);
}

/* Tiny icon bubbles (to match top section) */
/* icon image in footer uses same bubble sizing */
.site-footer .contact-list a .contact-icon{
  width: 18px; height: 18px; flex: 0 0 18px;
}

/* Footer brand logo image sizing within existing box */
.footer__brand .brand__logo img{
  width: 100%; height: 100%; object-fit: contain; padding: 6px;
}

@media (prefers-reduced-motion: reduce){
  .site-footer .contact-list a{ transition: none !important; }
  .contact-list a:hover, .site-footer .contact-list a:hover { animation: none !important; }
}


/* =========================================================
   MOBILE NAV + LANGUAGE DROPDOWN (Trustworthy Navy)
   ========================================================= */

/* Ensure primary button text stays visible on hover */
.btn.btn--primary:hover{
  color: #fff;
  background: color-mix(in oklab, #1E3A8A 90%, #FFFFFF 10%);
  filter: none;
}

/* --- base prep --- */
.header__inner { position: relative; }     /* needed for absolute mobile panel */
.no-scroll { overflow: hidden; }           /* lock scroll when menu open */

/* ---------- burger button ---------- */
.nav__toggle{
  display: none;                           /* hidden on desktop */
  -webkit-tap-highlight-color: transparent;
  width: 40px; height: 40px;
  border: 1px solid #E2E8F0; border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(2,6,23,.06);
  align-items: center; justify-content: center; gap: 0;
}
.nav__toggle-bar{
  position: relative; display: block; width: 18px; height: 2px; background: #0F172A; border-radius: 2px;
}
.nav__toggle-bar::before, .nav__toggle-bar::after{
  content:""; position: absolute; left: 0; width: 18px; height: 2px; background: #0F172A; border-radius: 2px;
}
.nav__toggle-bar::before{ top: -6px; }
.nav__toggle-bar::after{ top: 6px; }

/* open state */
.site-header.is-open .nav__toggle-bar{ transform: rotate(45deg); transition: transform .2s ease; }
.site-header.is-open .nav__toggle-bar::before{ top: 0; transform: rotate(90deg); transition: transform .2s ease, top .2s ease; }
.site-header.is-open .nav__toggle-bar::after{ opacity: 0; transition: opacity .2s ease; }

/* ---------- desktop nav stays as-is ---------- */
@media (min-width: 771px){
  .nav__toggle{ display: none; }
  .nav__list{ display: flex; gap: 16px; }
}

/* ---------- mobile behavior ---------- */
@media (max-width: 770px){
  .nav__toggle{ display: inline-flex; order: 2; margin-left: 6px; }
  .nav { order: 3; }             /* keep lang switcher on the far right */
  .lang-switcher { order: 4; margin-left: auto; }

  /* hide the inline nav list; turn it into a dropdown panel */
  .nav__list{
    position: absolute; z-index: 60;
    top: 100%; left: 0; right: 0;
    display: grid; gap: 6px;
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
    box-shadow: 0 16px 40px rgba(2,6,23,.10);
    transform: translateY(-8px);
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform .22s ease, opacity .22s ease, visibility 0s linear .22s;
  }
  .site-header.is-open .nav__list{
    transform: translateY(0);
    opacity: 1; pointer-events: auto; visibility: visible;
    transition: transform .22s ease, opacity .22s ease;
  }

  .nav__link{
    padding: 12px 14px; border-radius: 12px; font-size: 16px;
    background: #fff; border: 1px solid transparent;
  }
  .nav__link:hover{ background: #F9FAFB; border-color: #E2E8F0; }
  .nav__link[aria-current="page"]{ background: #F1F5F9; border-color: #E2E8F0; }
}

/* ---------- language dropdown (mobile only) ---------- */
@media (max-width: 700px){
  .lang-switcher{
    display: inline-flex; flex-direction: column; align-items: stretch;
    gap: 0; padding: 0;
    background: transparent; border: 0; box-shadow: none;
    position: relative; isolation: isolate;
  }

  /* visible pill (selected language) */
  .lang-switcher .is-active{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 12px; border-radius: 999px;
    font-weight: 700; color: #fff; background: #1E3A8A;
    text-decoration: none;
    position: relative;
  }
  .lang-switcher .is-active::after{
    content: "▾"; margin-left: 6px; font-size: 12px; color: #fff;
  }

  /* hidden options by default */
  .lang-switcher a:not(.is-active){
    display: block;
    max-height: 0; opacity: 0; transform: translateY(-6px);
    overflow: hidden; pointer-events: none;
    padding: 0 12px; margin-top: 0;
    border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; color: #0F172A; text-decoration: none;
    box-shadow: 0 8px 24px rgba(2,6,23,.06);
    transition: max-height .22s ease, opacity .22s ease, transform .22s ease, margin-top .22s ease;
  }

  /* open on focus/hover (tap focuses on mobile) */
  .lang-switcher:focus-within a:not(.is-active),
  .lang-switcher:hover a:not(.is-active){
    max-height: 40px; opacity: 1; transform: none; margin-top: 8px;
    pointer-events: auto;
  }
  .lang-switcher:focus-within .is-active,
  .lang-switcher:hover .is-active{
    border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
  }
}


/* Center the burger in the header on mobile */
@media (max-width: 770px){
  .header__inner{ position: relative; }                 /* anchor for absolute centering */
  .nav__toggle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);                   /* dead center */
    margin: 0;                                          /* override earlier margin-left */
    z-index: 70;                                        /* sits above header chrome */
  }

  /* keep logo left and language pill on the right */
  .brand{ order: 1; }
  .nav{ order: 3; }                                     /* nav list becomes dropdown below */
  .lang-switcher{ order: 4; margin-left: auto; }
}

/* =========================================
   Services page spacing tweaks
   Scope: only on services.html (body.page-services)
   ========================================= */
.page-services .services-hero{ padding-block: clamp(64px, 9vw, 110px); }
.page-services .services-hero h1{ margin: 0 0 18px; }
.page-services .services-hero p{ margin: 0 0 14px; }

.page-services h2{ margin: 0 0 14px; }
.page-services .section-cta{ margin-top: 22px; }

.page-services .pricing-unit{ padding-block: clamp(56px, 8vw, 80px); }
.page-services .pricing-unit .cards{ gap: 24px; }
.page-services .pricing-unit .card h3{ margin: 12px 0 10px; }

.page-services .payment{ padding-block: clamp(56px, 8vw, 80px); }
.page-services .payment ul{ margin: 0 0 12px 1.1em; }
.page-services .payment li + li{ margin-top: 6px; }

.page-services .final-cta{ padding-block: clamp(64px, 9vw, 80px); }
.page-services .final-cta p{ margin: 0 0 14px; }
.page-services .final-cta .contact-list{ gap: 12px; }

/* Extra space under the “Задать вопрос” button in the How section */
.page-services .how .section-cta{ margin-bottom: 20px; }

/* =========================================
   FAQ page spacing + accordion styles
   Scope: only on faq.html (body.page-faq)
   ========================================= */
.page-faq .faq{ padding-block: clamp(64px, 9vw, 110px); }
.page-faq .faq h1{ margin: 0 0 18px; }

/* Accordion container */
.page-faq .faq details{
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  margin: 12px 0;
  overflow: hidden; /* clip rounded corners during animation */
  box-shadow: 0 1px 2px rgba(2,6,23,.04);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.page-faq .faq details:hover{
  border-color: color-mix(in oklab, #1E3A8A 25%, #E2E8F0);
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}
.page-faq .faq details[open]{
  border-color: color-mix(in oklab, #1E3A8A 35%, #E2E8F0);
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
}

/* Summary (question) */
.page-faq .faq summary{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  color: #0F172A;
  list-style: none; /* Firefox */
}
.page-faq .faq summary::-webkit-details-marker{ display: none; }

/* Chevron */
.page-faq .faq details > summary::after{
  content: "";
  margin-left: auto;
  width: 10px; height: 10px;
  border-right: 2px solid #64748B;
  border-bottom: 2px solid #64748B;
  transform: rotate(-45deg);
  transition: transform .25s ease, border-color .2s ease;
}
.page-faq .faq details[open] > summary::after{
  transform: rotate(45deg);
  border-color: #1E3A8A;
}

/* Answer wrapper (animated) */
.page-faq .faq .faq__content{
  overflow: hidden;
  max-height: 0; /* default closed; JS will set to none when opened */
  transition: max-height .30s ease;
  border-top: 1px solid #E2E8F0;
  padding: 0 16px; /* vertical padding applied when open via child margins */
}
.page-faq .faq .faq__content > *{ margin: 12px 0 16px; color: #475569; }

@media (prefers-reduced-motion: reduce){
  .page-faq .faq .faq__content{ transition: none !important; }
}

/* =========================================
   Contact page spacing tweaks
   Scope: only on contact.html (body.page-contact)
   ========================================= */
.page-contact .contact-hero{ padding-block: clamp(48px, 8vw, 90px); }
.page-contact .contact-hero h1{ margin: 0 0 16px; }
.page-contact .contact-hero p{ margin: 0 0 12px; }
.page-contact .contact-hero .contact-list{ gap: 10px; }

.page-contact h1{ text-align: center; }
.page-contact h2{ margin: 0 0 12px; }
.page-contact .quick-info{ padding-block: clamp(36px, 6vw, 72px); }
.page-contact .quick-info ul{ margin: 0 0 10px 1.1em; }
.page-contact .quick-info li + li{ margin-top: 6px; }

.page-contact .contact-form{ padding-block: clamp(36px, 6vw, 72px); }

.page-contact .payments{ padding-block: clamp(36px, 6vw, 72px); }
.page-contact .payments ul{ margin: 0 0 10px 1.1em; }
.page-contact .payments li + li{ margin-top: 6px; }

.page-contact .location{ padding-block: clamp(36px, 6vw, 72px); }
.page-contact .location ul{ margin: 0 0 10px 1.1em; }
.page-contact .location li + li{ margin-top: 6px; }

.page-contact .final-cta{ padding-block: clamp(44px, 7vw, 80px); }
.page-contact .final-cta p{ margin: 0 0 12px; }
.page-contact .final-cta .contact-list{ gap: 10px; }

/* =========================================
   CONTACT FORM — Trustworthy Navy polish
   Scope: ONLY .contact-form section
   ========================================= */

.contact-form {
  padding-block: clamp(40px, 7vw, 96px);
}
.contact-form form {
  width: min(720px, 100%);
  margin: 18px auto 0;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.08);
  padding: clamp(18px, 3vw, 28px);
  /* soft entrance */
  opacity: 0; transform: translateY(10px);
  animation: kbFormIn .5s .05s both ease;
}
@keyframes kbFormIn{
  to { opacity: 1; transform: none; }
}

/* Fieldsets as clean sections */
.contact-form fieldset {
  margin: 0;
  padding: clamp(12px, 2vw, 16px);
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  background: #FFFFFF;
  display: grid;
  align-items: center;
  gap: 10px 16px;
  grid-template-columns: 1fr 1.6fr; /* labels left, controls right */
}

/* =========================================
   Contact page — tighter spacing overrides
   ========================================= */
/* Center the main page header on contact page */
.page-contact h1 { text-align: center; }

/* Reduce vertical padding to bring sections closer together */
.page-contact .contact-hero { padding-block: clamp(48px, 8vw, 90px); }
.page-contact .quick-info { padding-block: clamp(36px, 6vw, 72px); }
.page-contact .contact-form { padding-block: clamp(36px, 6vw, 72px); }
.page-contact .payments { padding-block: clamp(36px, 6vw, 72px); }
.page-contact .location { padding-block: clamp(36px, 6vw, 72px); }
.page-contact .final-cta { padding-block: clamp(44px, 7vw, 80px); }

/* Slightly tighten inner gaps */
.page-contact .contact-hero .contact-list { gap: 10px; }
.page-contact .final-cta .contact-list { gap: 10px; }
.contact-form fieldset + fieldset {
  margin-top: clamp(12px, 2vw, 16px);
}

/* Legends as cute pills */
.contact-form legend {
  grid-column: 1 / -1;
  display: inline-block;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1E3A8A;
  background: rgba(14,165,233,.12);
  border: 1px solid #E2E8F0;
}

/* Labels */
.contact-form label {
  font-weight: 600;
  color: #0F172A;
  align-self: center;
}
.contact-form label + input,
.contact-form label + select,
.contact-form label + textarea {
  /* the control sits to the right column */
  grid-column: 2;
}

/* Controls */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: #0F172A;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(2,6,23,.04);
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease, transform .05s ease;
}
.contact-form textarea { min-height: 140px; resize: vertical; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: color-mix(in oklab, #1E3A8A 50%, #E2E8F0);
  box-shadow: 0 0 0 3px rgba(30,58,138,.20), 0 8px 22px rgba(2,6,23,.06);
}

/* :invalid and :valid states (HTML5 validation) */
.contact-form input:required:invalid,
.contact-form select:required:invalid,
.contact-form textarea:required:invalid {
  border-color: #FCA5A5; /* soft red */
}
.contact-form input:required:valid,
.contact-form select:required:valid,
.contact-form textarea:required:valid {
  border-color: #86EFAC; /* soft green */
}

/* Custom selects (arrow) */
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #0F172A 50%),
    linear-gradient(135deg, #0F172A 50%, transparent 50%),
    linear-gradient(#E2E8F0, #E2E8F0);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    calc(100% - 28px) 50%;
  background-size: 6px 6px, 6px 6px, 1px 60%;
  background-repeat: no-repeat;
  padding-right: 42px;
}

/* Checkbox + consent */
.contact-form input[type="checkbox"] {
  width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px;
  accent-color: #1E3A8A;
}
.contact-form label > input[type="checkbox"] { margin-right: 10px; }

/* Submit button (matches .btn--primary) */
.contact-form button[type="submit"]{
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  margin-top: 14px;
  padding: 14px 18px;
  font-weight: 800;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #1E3A8A; color: #FFFFFF;
  letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 12px 22px rgba(30,58,138,.18);
  transition: transform .05s ease, filter .2s ease, box-shadow .25s ease;
}
.contact-form button[type="submit"]:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 16px 32px rgba(30,58,138,.22);
}
.contact-form button[type="submit"]:active{
  transform: translateY(0);
  box-shadow: 0 10px 18px rgba(30,58,138,.18);
}
.contact-form button[type="submit"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(30,58,138,.22), 0 12px 22px rgba(2,6,23,.06);
}

/* Helper text & spacing */
.contact-form p { color:#475569; margin: 8px 0 16px; }
.contact-form .container > p { text-align: center; }
.contact-form label[for="message"] { align-self: start; }

/* Autofill smoothing */
.contact-form input:-webkit-autofill,
.contact-form select:-webkit-autofill,
.contact-form textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #FFFFFF inset !important;
  -webkit-text-fill-color: #0F172A !important;
}

/* Make the honeypot truly invisible if inline style gets removed */
.contact-form [aria-hidden="true"] { position: absolute !important; left: -9999px !important; }

/* Responsive: single-column on mobile */
@media (max-width: 760px){
  .contact-form fieldset { grid-template-columns: 1fr; }
  .contact-form label + input,
  .contact-form label + select,
  .contact-form label + textarea { grid-column: 1; }
}