:root{
  --bg-0:#09111A;
  --bg-1:#0E1726;
  --bg-2:#122033;
  --surface:#101826;
  --surface-2:#141F2F;
  --line:rgba(255,255,255,.08);
  --text:#E6EDF6;
  --muted:rgba(230,237,246,.72);
  --brand:#4CE7FF;
  --brand-2:#7CFFB2;
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --radius:22px;
  --radius-sm:14px;
  --container:1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  /* Background is rendered on a fixed layer (see body::before) to enable
     a "nearly fixed" parallax that moves slower than the page content. */
  /* Solid fallback so you never see "empty" areas even on very long pages */
  background:var(--bg-0);
  line-height:1.55;
}

/* Nearly-fixed premium background layers (parallax driven via CSS variable)
   We use two layers:
   - ::before for big light volumes (moves)
   - ::after for grain + vignette (static)
*/
body::before{
  content:"";
  position:fixed;
  inset:-80vh -25vw;
  z-index:-2;
  pointer-events:none;
  transform:translate3d(0, var(--bgParallax, 0px), 0);
  will-change:transform;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(76,231,255,.12), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(124,255,178,.09), transparent 55%),
    radial-gradient(900px 900px at 60% 90%, rgba(140,120,255,.06), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 45%, #06080c);
}

/* Depth layer: subtle grain + vignette for a more "material" premium feel */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.9;
  background:
    /* vignette */
    radial-gradient(1200px 800px at 50% 10%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(900px 700px at 20% 90%, rgba(76,231,255,.05), transparent 60%),
    radial-gradient(900px 700px at 85% 75%, rgba(124,255,178,.04), transparent 62%),
    radial-gradient(closest-side at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%),
    /* grain (lightweight pattern) */
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce){
  body::before{transform:none}
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.section{padding:92px 0}
.section--light{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section__header{max-width:720px; margin:0 0 34px}
.section__footer{margin-top:28px}
.h1{font-size:44px; letter-spacing:-.02em; line-height:1.1; margin:0 0 12px}
.h2{font-size:34px; letter-spacing:-.02em; line-height:1.15; margin:0 0 10px}
.muted{color:var(--muted); margin:0}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--line);
  border-radius:999px; color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  gap:10px; font-weight:600;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}
.btn:hover{transform:translateY(-1px); border-color:rgba(76,231,255,.35)}
.btn--primary{
  background:linear-gradient(90deg, rgba(76,231,255,.18), rgba(124,255,178,.14));
  border-color:rgba(76,231,255,.32);
  box-shadow:0 10px 30px rgba(76,231,255,.08);
}
.btn--ghost{background:transparent}

.btn--pulse{
  position:relative;
  background:linear-gradient(135deg, rgba(76,231,255,.95), rgba(46,107,255,.95));
  border-color:rgba(255,255,255,.14);
  color:#071018;
  animation:ostPulse 2.6s ease-in-out infinite;
}
.btn--pulse:hover{transform:translateY(-1px); filter:saturate(1.05) brightness(1.02)}
@keyframes ostPulse{
  0%{box-shadow:0 0 0 0 rgba(76,231,255,.28), 0 10px 30px rgba(0,0,0,.35)}
  55%{box-shadow:0 0 0 10px rgba(76,231,255,0), 0 14px 40px rgba(0,0,0,.45)}
  100%{box-shadow:0 0 0 0 rgba(76,231,255,0), 0 10px 30px rgba(0,0,0,.35)}
}
@media (prefers-reduced-motion: reduce){
  .btn--pulse{animation:none}
}

.btn--shimmer{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
}
.btn--shimmer::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:40%;
  height:180%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:rotate(18deg);
  animation:ostShimmer 2.8s ease-in-out infinite;
}
@keyframes ostShimmer{
  0%{transform:translateX(0) rotate(18deg); opacity:0}
  12%{opacity:.85}
  55%{transform:translateX(240%) rotate(18deg); opacity:.85}
  100%{transform:translateX(240%) rotate(18deg); opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .btn--shimmer::before{animation:none}
}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background:rgba(7,11,16,.55);
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:8px 0; gap:16px}
.brand{display:flex; align-items:center; gap:12px; min-width:320px}
.brand__logo{display:inline-flex; align-items:center; gap:10px}
 .brand__mark{width:104px; height:104px; display:block; filter:drop-shadow(0 10px 24px rgba(76,231,255,.12));}
.brand__text{display:none}
.lang-toggle{
  width:42px; height:42px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  font-weight:700; letter-spacing:.08em; opacity:.92;
}
.lang-toggle:hover{opacity:1; background:rgba(255,255,255,.05)}
.lang-toggle--mobile{width:auto; height:auto; padding:10px 12px; border-radius:14px}

/* Logo intro animation */
body:not(.is-loaded) .brand__mark{opacity:0; transform:translateY(-6px) scale(.96) rotate(-2deg)}
body.is-loaded .brand__mark{animation:ostLogoIn 850ms cubic-bezier(.2,.8,.2,1) 80ms both}
@keyframes ostLogoIn{
  0%{opacity:0; transform:translateY(-8px) scale(.92) rotate(-2deg)}
  60%{opacity:1; transform:translateY(0) scale(1.04) rotate(.4deg)}
  100%{opacity:1; transform:translateY(0) scale(1) rotate(0deg)}
}
.custom-logo{height:42px; width:auto}
.brand__tagline{display:flex; flex-direction:column; line-height:1.15}
.brand__name{font-weight:700}
.brand__slogan{font-size:12px; color:var(--muted)}

.nav 
/* Primary navigation — modern underline + dropdown */
.menu{display:flex; gap:18px; list-style:none; padding:0; margin:0; align-items:center}
.menu > .menu-item{position:relative}
.nav .menu > .menu-item > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  opacity:.9;
  padding:10px 6px;
  border-radius:10px;
  transition:opacity .2s ease, transform .2s ease;
}
.nav .menu > .menu-item > a::after{
  content:"";
  position:absolute;
  left:6px; right:6px; bottom:6px;
  height:2px;
  background:linear-gradient(90deg, rgba(77,163,255,0) 0%, rgba(77,163,255,.85) 45%, rgba(77,163,255,0) 100%);
  transform:scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}
.nav .menu > .menu-item:hover > a,
.nav .menu > .menu-item:focus-within > a{
  opacity:1;
  transform:translateY(-1px);
}
.nav .menu > .menu-item:hover > a::after,
.nav .menu > .menu-item:focus-within > a::after{
  transform:scaleX(1);
  opacity:1;
}

/* Dropdown */
.menu .sub-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:280px;
  padding:10px;
  margin:0;
  list-style:none;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,15,22,.82);
  backdrop-filter: blur(12px);
  border-radius:16px;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  opacity:0;
  transform: translateY(-6px) scale(.98);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index:40;
}
.menu .menu-item-has-children:hover > .sub-menu,
.menu .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}
.menu .sub-menu .menu-item a{
  display:flex;
  padding:10px 12px;
  border-radius:12px;
  opacity:.9;
  background:transparent;
  transition:background .2s ease, opacity .2s ease;
}
.menu .sub-menu .menu-item a:hover{opacity:1; background:rgba(255,255,255,.06)}
.menu .menu-item-has-children > a::before{
  content:"";
  width:7px; height:7px;
  border-right:2px solid rgba(255,255,255,.65);
  border-bottom:2px solid rgba(255,255,255,.65);
  transform:rotate(45deg);
  margin-left:4px;
  opacity:.9;
}

/* Mobile: keep simple */
@media (max-width: 980px){
  .menu{gap:10px}
  .menu .sub-menu{position:static; opacity:1; transform:none; pointer-events:auto; border:none; box-shadow:none; padding:0; background:transparent; backdrop-filter:none; min-width:0}
  .menu .menu-item-has-children > a::before{display:none}
  .menu--mobile .menu-item-has-children > .sub-menu{padding-left:10px}
}

.header__cta{display:flex; align-items:center; gap:12px}

.burger{
  width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  display:none; align-items:center; justify-content:center; gap:4px;
}
.burger span{display:block; width:18px; height:2px; background:rgba(255,255,255,.9)}

.mobile-drawer{border-top:1px solid var(--line); background:rgba(10,15,22,.75)}
.mobile-drawer__inner{padding:16px 20px}
.menu--mobile{display:flex; flex-direction:column; gap:8px}
.menu--mobile a{padding:12px 12px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--line)}

.hero{position:relative; padding:78px 0 62px; overflow:hidden}
.hero__bg{position:absolute; inset:0; pointer-events:none}
.hero__photos{position:absolute; inset:0; overflow:hidden}
.hero__photo{position:absolute; inset:-70px; opacity:0; transform:scale(1.03);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:opacity 1200ms ease;
  /* Photo grade: keep premium mood but let the scene read */
  filter:saturate(1.04) contrast(1.12) brightness(1.28);
}
.hero__photo.is-active{opacity:.46; transform:scale(1.06)}

/* Ken Burns (subtle) */
.hero__photo.is-kenburns{
  will-change:transform;
  animation:ostKenBurns 28s ease-in-out infinite alternate;
}
.hero__photo--b.is-kenburns{animation-duration:32s; animation-delay:-6s}

@keyframes ostKenBurns{
  0%{transform:scale(1.02) translate3d(0%,0%,0)}
  100%{transform:scale(1.08) translate3d(-2.2%,-1.2%,0)}
}
.hero__photoOverlay{position:absolute; inset:-40px;
  /* Overlay: protect readability but allow background imagery */
  background:linear-gradient(90deg, rgba(8,12,18,.46) 0%, rgba(8,12,18,.30) 45%, rgba(8,12,18,.55) 100%),
             radial-gradient(600px 300px at 20% 30%, rgba(0,0,0,.22), transparent 70%),
             radial-gradient(700px 380px at 70% 20%, rgba(0,0,0,.18), transparent 70%);
  pointer-events:none;
}
.hero__vignette{position:absolute; inset:-20%;
  background:radial-gradient(closest-side at 60% 15%, rgba(76,231,255,.20), transparent 65%),
                                radial-gradient(closest-side at 20% 25%, rgba(124,255,178,.12), transparent 60%),
                                radial-gradient(closest-side at 50% 80%, rgba(255,255,255,.06), transparent 70%)}

/* "Breathing" light (very subtle) */
.hero__vignette{
  opacity:.92;
  animation:ostBreath 9.5s ease-in-out infinite;
}
@keyframes ostBreath{
  0%,100%{opacity:.86; filter:blur(0px)}
  50%{opacity:1; filter:blur(.2px)}
}
.hero__grid{position:absolute; inset:0; background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
                                         linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
           background-size:64px 64px; mask-image:radial-gradient(circle at 50% 30%, black 20%, transparent 70%)}
.hero__inner{display:grid; grid-template-columns:1.25fr .75fr; gap:28px; align-items:start}
.hero__h1{font-size:54px; letter-spacing:-.03em; line-height:1.05; margin:14px 0 14px}
.hero__lead{color:var(--muted); font-size:16px; margin:0 0 22px; max-width:560px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.hero__kpis{display:flex; gap:16px; margin-top:22px; flex-wrap:wrap}
.kpi{border:1px solid var(--line); background:rgba(255,255,255,.03); border-radius:16px; padding:12px 14px; min-width:160px}
.kpi__num{font-size:20px; font-weight:700}
.kpi__label{font-size:12px; color:var(--muted)}

.panel{
  border:1px solid rgba(76,231,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.panel:before{
  content:"";
  position:absolute; inset:-1px;
  background:radial-gradient(500px 220px at 30% 0%, rgba(76,231,255,.16), transparent 70%),
             radial-gradient(460px 240px at 90% 30%, rgba(124,255,178,.10), transparent 70%);
  opacity:.9;
  pointer-events:none;
}
.panel__title{position:relative; font-weight:800; letter-spacing:-.02em; font-size:16px; margin-bottom:12px}
.panel__list{position:relative; margin:0; padding-left:18px; color:rgba(230,237,246,.86)}
.panel__list li{margin:8px 0}
.panel__note{position:relative; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); color:rgba(230,237,246,.8); font-size:12px}

.features{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.feature{
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  padding:18px;
}
.feature__icon{color:var(--brand); margin-bottom:10px; display:inline-flex; align-items:center}
.feature__icon svg{width:22px; height:22px; display:block}
.feature__title{font-weight:800; margin-bottom:6px}
.feature__text{color:var(--muted); font-size:13px}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.cards--equal{grid-auto-rows:1fr}
.card{
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  position:relative; overflow:hidden;
}
.card__link{display:block; padding:20px}
.card__title{margin:0 0 8px; font-size:16px; font-weight:800}
.card__icon{color:rgba(76,231,255,.92); width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px}
.card__icon svg{width:26px; height:26px}
.card__text{margin:0; color:var(--muted); font-size:13px; line-height:1.55; flex-grow:1}
.card__more{margin-top:auto; padding-top:14px; color:rgba(76,231,255,.9); font-weight:700; font-size:12px}
.card__shine{
  position:absolute; inset:-1px;
  background:radial-gradient(520px 220px at 20% 0%, rgba(76,231,255,.14), transparent 70%),
             radial-gradient(520px 240px at 90% 30%, rgba(124,255,178,.10), transparent 70%);
  opacity:0; transition:opacity .22s ease;
  pointer-events:none;
}
.card--service{
  height:100%;
  display:flex;
  flex-direction:column;
  padding:20px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.card--service:hover .card__shine{opacity:1}
.card--service:hover{
  border-color:rgba(76,231,255,.30);
  transform:translateY(-3px);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.card--service:focus-visible{outline:2px solid rgba(76,231,255,.55); outline-offset:3px}

.map-wrap{border-radius:var(--radius); border:1px solid var(--line); background:rgba(255,255,255,.02); overflow:hidden}
.ymap{position:relative; border-radius:var(--radius); border:1px solid var(--line); background:rgba(255,255,255,.02); overflow:hidden; min-height:320px}
.ymap--contact{min-height:0; height:100%}
.ymap--fit{min-height:0; height:100%}
.ymap__skeleton{min-height:inherit; height:100%; width:100%; background:linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.06), rgba(255,255,255,.03)); background-size:200% 100%; animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ymap__chrome{position:absolute; inset:16px 16px auto 16px; display:flex; flex-direction:column; gap:4px; z-index:3; pointer-events:none}
.ymap__label{display:inline-flex; align-self:flex-start; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(10,18,28,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-weight:800; font-size:12px; letter-spacing:.04em; text-transform:uppercase}
.ymap__hint{color:rgba(230,237,243,.85); font-size:13px; max-width:720px; text-shadow:0 2px 12px rgba(0,0,0,.45)}
.ymap.is-map-loaded .ymap__skeleton{display:none}
.ymap.is-map-error::after{content:"Не удалось загрузить карту"; position:absolute; inset:auto 16px 16px 16px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-weight:700}
.map-placeholder{padding:26px; min-height:260px; display:flex; flex-direction:column; gap:10px; justify-content:center}
.map-placeholder__title{font-weight:900}
.map-placeholder__text{color:var(--muted); max-width:620px}

.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.team-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:rgba(255,255,255,.03)}
.team-card__media{aspect-ratio:4/3; background:rgba(255,255,255,.04)}
.team-card__body{padding:16px}
.team-card__name{font-weight:900}
.team-card__role{color:var(--muted); font-size:13px; margin-top:6px}

.note{border:1px dashed rgba(255,255,255,.22); border-radius:var(--radius); padding:18px; color:var(--muted)}

.contact-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:14px; align-items:stretch}
.contact-card{
  border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.03);
  padding:22px;
}
.contact-card__title{color:rgba(230,237,246,.76); font-size:12px; letter-spacing:.10em; text-transform:uppercase; margin-top:16px}
.contact-card__title:first-child{margin-top:0}
.contact-card__value{display:block; margin-top:6px; font-weight:700}
.contact-card__actions{margin-top:18px}
.map-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:rgba(255,255,255,.03); display:flex}
.map-card__frame{flex:1; height:100%; min-height:340px; display:flex}
.map-card__frame .ymap{flex:1; height:100%}
.map-card__frame iframe{display:block; border:0; width:100%; height:100%}

.honest-biz{margin-top:14px;}
.site-footer{
  border-top:1px solid var(--line);
  background:rgba(7,11,16,.65);
  backdrop-filter: blur(12px);
}
.footer__grid{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:14px; padding:36px 0}
.footer__title{font-weight:900; margin-bottom:10px}
.footer__text{color:var(--muted); margin:8px 0}
.menu--footer{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.menu--footer a{color:var(--muted)}
.menu--footer a:hover{color:var(--text)}
.footer__bottom{display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-top:1px solid var(--line)}
.footer__copy{color:var(--muted); font-size:12px}
.to-top{
  width:40px; height:40px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.prose{max-width:860px}
.prose__header{margin-bottom:18px}

.pagination{margin-top:22px}
.section__header + .grid{margin-top:18px}

@media (max-width: 980px){
  .header__inner{padding:6px 0}
  .brand{min-width:0; gap:10px}
  .brand__mark{width:64px; height:64px}
  .brand__name{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw}
  .brand__slogan{font-size:11px}
  .header__cta{gap:10px}
  .lang-toggle{width:38px; height:38px; border-radius:12px}
  .header__cta .btn{display:none}
  .hero__inner{grid-template-columns:1fr; gap:18px}
  .features{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:inline-flex}
}

@media (max-width: 560px){
  .brand__name{max-width:60vw}
  .brand__tagline{gap:2px}
  .lang-toggle{width:36px;height:36px}
  .hero__h1{font-size:40px}
  .h2{font-size:28px}
  .features{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .kpi{min-width:140px}
}


@media (max-width: 520px){
  .brand__mark{width:56px; height:56px}
  .brand__name{font-size:13px}
}


/* === Header / Menu modern fix (v20) === */
.site-header { position: sticky; top: 0; z-index: 999; backdrop-filter: blur(10px); }
.header__inner { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.header__brand { display:flex; align-items:center; gap:12px; min-width: 220px; }
.header__right { display:flex; align-items:center; justify-content:flex-end; gap:18px; flex: 1 1 auto; min-width: 0; }
.header__nav { display:flex; align-items:center; min-width: 0; }
.header__nav .menu { display:flex; align-items:center; gap:18px; flex-wrap:nowrap; white-space:nowrap; }
.header__nav .menu > li { position:relative; }
.header__nav .menu > li > a { position:relative; padding:10px 2px; opacity:.9; }
.header__nav .menu > li > a::after { content:""; position:absolute; left:0; right:0; bottom:6px; height:2px; transform:scaleX(0); transform-origin:left; transition:transform .22s ease; background: currentColor; opacity:.6; border-radius:2px; }
.header__nav .menu > li > a:hover { opacity:1; }
.header__nav .menu > li > a:hover::after,
.header__nav .menu > li.current-menu-item > a::after,
.header__nav .menu > li.current_page_item > a::after { transform:scaleX(1); }

/* Dropdown */
.header__nav .sub-menu { position:absolute; top: calc(100% + 10px); left: -10px; min-width: 240px; padding:10px; border-radius:14px;
  background: rgba(18,22,30,.92); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 16px 44px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform: translateY(-6px); transition: all .18s ease; }
.header__nav li:hover > .sub-menu { opacity:1; visibility:visible; transform: translateY(0); }
.header__nav .sub-menu a { display:block; padding:10px 12px; border-radius:10px; opacity:.92; }
.header__nav .sub-menu a:hover { background: rgba(255,255,255,.06); opacity:1; }

/* Right side controls */
.header__cta { display:flex; align-items:center; gap:12px; flex: 0 0 auto; }
.lang-toggle { display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 12px;
  border-radius:999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  transition: all .18s ease; }
.lang-toggle:hover { background: rgba(255,255,255,.10); }

/* Prevent menu wrapping on desktop; gracefully hide items on smaller widths */
@media (max-width: 1100px){
  .header__nav .menu { gap: 12px; }
  .header__brand { min-width: 200px; }
}
@media (max-width: 980px){
  .header__nav { display:none; } /* rely on existing mobile nav if present */
}




/* === v22: bulletproof header/menu (click-to-open) === */
.site-header { position: sticky; top:0; z-index: 999; backdrop-filter: blur(12px); }
.site-header .header__inner { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.site-header .brand { display:flex; align-items:center; gap:12px; min-width: 260px; }

/* Base menu reset (kills bullets everywhere in header nav) */
.site-header nav ul, .site-header nav li { margin:0; padding:0; list-style:none; }
.site-header .nav--primary { flex: 1 1 auto; display:flex; justify-content:center; min-width:0; }
.site-header .nav--primary .menu { display:flex; align-items:center; gap:18px; flex-wrap:nowrap; white-space:nowrap; }
.site-header .nav--primary .menu > li { position:relative; }

.site-header .nav--primary .menu > li > a {
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 4px;
  opacity:.92; position:relative;
}
.site-header .nav--primary .menu > li > a::after{
  content:""; position:absolute; left:4px; right:4px; bottom:6px; height:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
  background: currentColor; opacity:.6; border-radius:2px;
}
.site-header .nav--primary .menu > li > a:hover{ opacity:1; }
.site-header .nav--primary .menu > li > a:hover::after,
.site-header .nav--primary .menu > li.current-menu-item > a::after,
.site-header .nav--primary .menu > li.current_page_item > a::after{ transform:scaleX(1); }

/* Dropdown panel (hidden by default). Only opens via .is-open class (JS). */
.site-header .nav--primary .sub-menu{
  position:absolute;
  top: calc(100% + 10px);
  left: -12px;
  min-width: 280px;
  padding:10px;
  border-radius:14px;
  background: rgba(18,22,30,.92);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 1000;
}
.site-header .nav--primary li.is-open > .sub-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
}
.site-header .nav--primary .sub-menu a{
  display:block; padding:10px 12px; border-radius:10px;
  opacity:.92; white-space:normal;
}
.site-header .nav--primary .sub-menu a:hover{ background: rgba(255,255,255,.06); opacity:1; }

/* Caret button */
.site-header .menu-caret{
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  margin-left: 6px;
  transition: background .18s ease;
}
.site-header .menu-caret:hover{ background: rgba(255,255,255,.10); }
.site-header .menu-caret svg{ width:14px; height:14px; opacity:.9; }

/* Right controls */
.site-header .header__cta { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.site-header .lang-toggle { display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 12px;
  border-radius:999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  transition: all .18s ease; }
.site-header .lang-toggle:hover{ background: rgba(255,255,255,.10); }

/* Responsive */
@media (max-width: 1100px){
  .site-header .nav--primary .menu { gap: 12px; }
  .site-header .brand { min-width: 220px; }
}
@media (max-width: 980px){
  .site-header .nav--primary { display:none; }
}




/* === v23: layout/padding fixes === */
.card__body{ padding:18px 18px; }
.card__body .h5{ line-height:1.25; }
.card__body p{ max-width: none; }
.card__body a{ word-break: break-word; }

/* Prose should not crush content on wide layouts */
.prose{ max-width: 100%; }
.section__header{ max-width: 100%; }

/* Better two-column grids used on product/category pages */
.grid--2{ display:grid; grid-template-columns: 1.2fr .8fr; gap:20px; }
@media (max-width: 980px){
  .grid--2{ grid-template-columns: 1fr; }
}

/* Product cards grid */
.grid--3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
@media (max-width: 980px){
  .grid--3{ grid-template-columns: 1fr; }
}

/* Menu caret: remove grey circles that shift header */
.site-header .menu-caret{
  width:auto; height:auto; padding:0;
  background: transparent !important;
  border: 0 !important;
  margin-left: 4px;
  opacity: .85;
}
.site-header .menu-caret:hover{ background: transparent !important; opacity: 1; }
.site-header .menu-caret svg{ width:14px; height:14px; }

/* Keep menu aligned and prevent overlaps with CTA */
.site-header .nav--primary{ padding: 0 10px; }
.site-header .header__cta{ margin-left: 8px; }

/* Ensure long titles wrap nicely */
.h2, h1, h2{ overflow-wrap: anywhere; }



/* === v26 TYPOGRAPHY SPACING FIX === */
.prose{
    line-height: 1.7;
}

.prose p{
    margin-bottom: 18px;
}

.prose ul{
    margin: 18px 0 22px 24px;
}

.prose li{
    margin-bottom: 10px;
}


/* === v29: compact header + clickable brand === */
.site-header .header__inner{ padding-top: 8px !important; padding-bottom: 8px !important; }
.site-header .brand{ min-width: 200px !important; }
.site-header .nav--primary .menu{ gap: 16px !important; }
.brand__tagline-link{ text-decoration:none; color:inherit; display:inline-block; }
.brand__tagline-link:hover .brand__name{ opacity: 1; }
.brand__tagline-link .brand__name{ opacity:.98; }
.brand__tagline-link:hover .brand__slogan{ opacity: 1; }
.brand__tagline-link .brand__slogan{ opacity:.82; }



/* === v32 HEADER COMPACT === */

/* Make header ~2x more compact without breaking layout */
.site-header .header__inner{ padding-top:6px; padding-bottom:6px; }
.site-header{ backdrop-filter: blur(14px); }
.site-header .brand__name{ font-size:16px; line-height:1.15; }
.site-header .brand__slogan{ font-size:12px; line-height:1.15; }
.site-header .nav--primary .menu{ gap:14px; }
.site-header .nav--primary .menu > li > a{ padding:10px 6px; }
.site-header .header__cta{ gap:10px; }
@media (max-width: 1100px){
  .site-header .nav--primary .menu{ gap:10px; }
}

/* === v36 contacts styles === */
.ost-contacts-grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap:18px;
  margin-top:18px;
}
@media (max-width: 920px){
  .ost-contacts-grid{ grid-template-columns: 1fr; }
}
.ost-contacts-card{ padding:22px; }
.ost-contacts-h{ margin:0 0 10px 0; }
.ost-contacts-text{ opacity:.92; line-height:1.7; }

.ost-form{ display:flex; flex-direction:column; gap:10px; }
.ost-label{ opacity:.78; font-size:13px; margin-top:2px; }
.ost-input, .ost-textarea{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,14,22,.35);
  color:#fff;
  outline:none;
}
.ost-input:focus, .ost-textarea:focus{
  border-color: rgba(61, 155, 255, .65);
  box-shadow: 0 0 0 3px rgba(61, 155, 255, .15);
}
.ost-textarea{ resize:vertical; min-height:120px; }

/* Contact form validation */
.ost-field-error{
  margin-top:6px;
  font-size:12px;
  line-height:1.35;
  color:#ff6b6b;
}
.ost-input.is-invalid, .ost-textarea.is-invalid{
  border-color:rgba(255,107,107,.75) !important;
  box-shadow:0 0 0 3px rgba(255,107,107,.10);
}


/* === v40 button contrast + success check === */
.ost-form .btn--primary,
.ost-form button[type="submit"]{
  color:#fff !important;
  font-weight:600;
  letter-spacing:.3px;
}

.ost-success-card{
  padding:40px;
  text-align:center;
}

.ost-success-icon{
  width:120px;
  height:120px;
  margin:0 auto 20px;
}

.ost-success-icon svg{
  width:100%;
  height:100%;
  stroke:#4ade80;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation: ost-pop .5s ease-out;
}

.ost-success-icon circle{
  stroke:#4ade80;
  stroke-dasharray:166;
  stroke-dashoffset:166;
  animation: ost-stroke 0.6s forwards;
}

.ost-success-icon path{
  stroke:#4ade80;
  stroke-dasharray:48;
  stroke-dashoffset:48;
  animation: ost-stroke 0.4s 0.6s forwards;
}

@keyframes ost-stroke{ to{ stroke-dashoffset:0; } }
@keyframes ost-pop{ from{ transform:scale(.7); opacity:0; } to{ transform:scale(1); opacity:1; } }

.ost-success-text{
  font-size:18px;
  font-weight:500;
}


/* Vacancies page improvements */
.vacancies-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.vacancies-grid .card{padding:22px}
.vacancies-grid .card h3{margin:0 0 10px;font-size:24px;line-height:1.2;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.vacancies-grid .card p{margin:0 0 14px;line-height:1.5}
.vacancies-grid .card ul{margin:0;padding-left:18px}
.vacancies-grid .card li{margin:0 0 8px;line-height:1.45;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
@media (max-width: 900px){
  .vacancies-grid{grid-template-columns:1fr !important}
  .vacancies-grid .card{padding:18px}
  .vacancies-grid .card h3{font-size:22px}
}


/* === v49 tweaks === */
/* A bit more air before the CTA blocks */
.ost-section .cta--inline,
.section .cta--inline,
main .cta--inline{ margin-top: 34px; }

/* Header slightly slimmer */
.site-header{ padding-top: 10px; padding-bottom: 10px; }
.site-header .header-inner{ min-height: 56px; }

@media (max-width: 1024px){
  .site-header{ padding-top: 8px; padding-bottom: 8px; }
  .site-header .header-inner{ min-height: 52px; }
}

/* Contact form submit button text contrast */
.ost-contact-form .btn--primary{ color: #ffffff; }
.ost-contact-form .btn--primary.is-disabled,
.ost-contact-form .btn--primary:disabled{ opacity: .55; cursor: not-allowed; }

/* Consent checkbox styling */
.ost-form-consent{ display:flex; align-items:flex-start; gap:10px; margin-top: 12px; color: rgba(255,255,255,.82); font-size: 14px; }
.ost-form-consent input{ margin-top: 3px; }
.ost-form-consent a{ color: rgba(160,210,255,.95); text-decoration: underline; }

/* Cookie banner */
#ost-cookie{ position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 9999; }
#ost-cookie .ost-cookie__box{ max-width: 920px; margin: 0 auto; border-radius: 22px; padding: 16px 18px; background: rgba(13,18,28,.78); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 18px 48px rgba(0,0,0,.45); display:flex; gap: 14px; align-items:center; justify-content: space-between; }
#ost-cookie .ost-cookie__text{ color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.35; }
#ost-cookie .ost-cookie__actions{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
#ost-cookie .ost-cookie__actions a{ color: rgba(160,210,255,.95); text-decoration: underline; font-size: 14px; }
#ost-cookie .ost-cookie__btn{ border-radius: 999px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(88,158,255,.25); color: #fff; font-weight: 600; }


.page-content{ padding-bottom: 48px; }