:root {
  --bg:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --brand:#22c55e;
  --brand2:#06b6d4;
  --radius:18px;
  --max:1200px;
  --shadow:0 10px 30px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}

/* NAV (mobile) */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(15,23,42,.06)}
.nav{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:.3px}
.brand-logo{width:36px;height:36px;object-fit:contain;border-radius:8px;box-shadow:var(--shadow);background:#fff;display:block}
.spacer{flex:1}
.menu{display:none;position:absolute;top:64px;left:0;right:0;padding:10px 16px;list-style:none;margin:0}
.menu.open{display:grid;grid-template-columns:1fr;gap:10px}
.menu a{background:#fff;box-shadow:var(--shadow);text-align:center;display:block;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:600}
.burger{display:block;position:relative;width:44px;height:44px;border:none;border-radius:10px;background:#fff;box-shadow:var(--shadow);cursor:pointer}
.burger::before,.burger::after,.burger span{content:"";position:absolute;left:10px;right:10px;height:3px;background:var(--ink);border-radius:3px;transition:transform .25s ease,opacity .25s ease}
.burger::before{top:12px}
.burger span{top:50%;transform:translateY(-50%)}
.burger::after{bottom:12px}
.burger.active span{opacity:0}
.burger.active::before{transform:translateY(8px) rotate(45deg)}
.burger.active::after{transform:translateY(-8px) rotate(-45deg)}
body.nav-open::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.25);backdrop-filter:saturate(180%) blur(2px);-webkit-backdrop-filter:saturate(180%) blur(2px);z-index:40}

/* HERO */
.hero{position:relative;display:grid;place-items:center;min-height:68vh;text-align:center;color:#0b1220;overflow:clip}
.hero::before{content:"";position:absolute;inset:-10% -10% 0 -10%;background:
  radial-gradient(60% 70% at 10% 20%, rgba(34,197,94,.20), transparent 60%),
  radial-gradient(60% 70% at 90% 10%, rgba(6,182,212,.18), transparent 60%),
  linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
  z-index:-1}
.hero-inner{max-width:900px;padding:64px 18px}
.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border:1px solid rgba(15,23,42,.08);border-radius:999px;background:#fff;box-shadow:var(--shadow);font-size:12px;color:var(--muted);margin-bottom:14px}
.hero h1{font-size:32px;line-height:1.15;margin:0 0 10px}
.hero p{font-size:16px;color:var(--muted);margin:0 0 20px}
.cta{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;padding:12px 16px;border-radius:999px;text-decoration:none;font-weight:800}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:var(--shadow)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid rgba(15,23,42,.12)}

/* Sections */
.section{margin:0 auto;padding:52px 18px}
.section h2{margin:0 0 10px;font-size:24px}
.muted{color:var(--muted)}

/* Services */
.cards{display:grid;grid-template-columns:1fr;gap:14px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card h3{margin:6px 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}

/* Documents */
.docs{display:grid;grid-template-columns:1fr;gap:10px}
.doc{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid rgba(15,23,42,.08);text-decoration:none;color:var(--ink)}
.doc:hover{background:#f8fafc}

/* Contact */
.contact-row{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid rgba(15,23,42,.12);background:#fff;color:var(--ink);text-decoration:none}

/* Footer */
.site-footer{border-top:1px solid rgba(15,23,42,.08);padding:24px 18px;text-align:center;color:var(--muted)}

/* Back to top */
#toTop{position:fixed;right:18px;bottom:max(18px, env(safe-area-inset-bottom));display:none;background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:12px;box-shadow:var(--shadow);cursor:pointer;z-index:60}
#toTop span{display:block;padding:10px 12px}

/* UX */
:where(a,button){-webkit-tap-highlight-color:transparent}
:where(a,button):focus{outline:none}
:where(a,button):focus-visible{outline:3px solid #22c55e;outline-offset:3px;border-radius:10px}
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto} *{transition:none!important} }

/* ==== Overrides: remove backgrounds for logo & back button; discourage image downloads ==== */
#toTop{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#toTop img{ display:block; }

.site-header, .nav, .brand, .brand-logo{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.nav{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.brand:hover, .brand:focus{ background: transparent !important; }

img, svg, picture, figure {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#toTop.btn{ background: transparent !important; }



/* === Language chip (premium, fixed width, no background) === */
:root{
  --ring: rgba(14,163,90,.35);
  --chip-border: rgba(15,23,42,.14);
}
.nav .chip.lang{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:34px; padding:0;
  border-radius:9999px;
  background:transparent; border:1px solid var(--chip-border);
  font-weight:800; letter-spacing:.2px; text-transform:uppercase; line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.nav .chip.lang:hover{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.06); }
.nav .chip.lang:active{ transform:translateY(0); }
.nav .chip.lang:focus{ outline:none; box-shadow:0 0 0 3px var(--ring); }



/* === Language chip (full text + flag, fixed width, no background) === */
.nav .chip.lang{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:128px; height:34px; padding:0 10px;
  border-radius:9999px;
  background:transparent; border:1px solid var(--chip-border, rgba(15,23,42,.14));
  font-weight:800; letter-spacing:.2px; text-transform:none; line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav .chip.lang .flag{ font-size:16px; line-height:1; }
.nav .chip.lang .label{ display:inline-block; transform:translateY(0.5px); }
.nav .chip.lang:hover{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.06); }
.nav .chip.lang:active{ transform:translateY(0); }
.nav .chip.lang:focus{ outline:none; box-shadow:0 0 0 3px var(--ring, rgba(14,163,90,.35)); }



/* === Language chip: micro-gradient border (premium), transparent fill === */
.nav .chip.lang{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:128px; height:34px; padding:0 12px;
  border:1px solid transparent;
  border-radius:9999px;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(135deg, rgba(14,163,90,.55), rgba(13,187,106,.45), rgba(6,182,212,.45)) border-box;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  color:inherit; text-decoration:none; font-weight:800; letter-spacing:.2px;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.nav .chip.lang .flag{ width:16px; height:12px; display:inline-block; border-radius:2px; overflow:hidden; }
.nav .chip.lang .label{ display:inline-block; line-height:1; transform:translateY(0.3px); }
.nav .chip.lang:hover{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.08); filter:saturate(1.05); }
.nav .chip.lang:active{ transform:translateY(0); }
.nav .chip.lang:focus{ outline:none; box-shadow:0 0 0 3px rgba(14,163,90,.28); }


/* === PATCH v3: remove rogue square (burger) + no backgrounds for logo & BackToHome === */

/* Burger: fixed touch size, fully transparent */
.nav .burger,
.nav .burger:hover,
.nav .burger:active{
  width:44px; height:44px; flex:0 0 44px;
  display:inline-flex; align-items:center; justify-content:center;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
}
.nav .burger:focus{ outline: none; box-shadow: 0 0 0 3px rgba(14,163,90,.28); }

/* Header/brand/logo: absolutely no backgrounds/shadows/borders */
.site-header, .nav, .brand, .brand-logo, .brand img{
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.site-header::before, .site-header::after,
.nav::before, .nav::after,
.brand::before, .brand::after{
  content: none !important;
}

/* BackToHome button: image only, no podlozhka */
#toTop, #toTop:hover, #toTop:active, #toTop:focus,
#toTop::before, #toTop::after{
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#toTop span{ display:none !important; } /* hide arrow fallback if present */

/* Keep language chip sizing and flags intact (from previous patch) */
.nav .chip.lang{
  width:168px; height:40px; padding:0 16px; box-sizing:border-box;
}
.nav .chip.lang .flag{
  width:22px; height:22px; flex:0 0 22px; border-radius:50%; object-fit:contain;
}

/* Keep nav spacing sane */
.nav{ gap:12px; }
/* Language chip — normal text weight */
.nav .chip.lang{ 
  font-weight: 400 !important;   /* было жирным → делаем normal */
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.nav .chip.lang .label{
  font-weight: 400 !important;
}
/* restore smooth scroll on mobile */
html { 
  scroll-behavior: smooth; 
  -webkit-overflow-scrolling: touch; 
}
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}
/* === PATCH: BackToHome overlap fix (mobile) === */
@media (max-width: 767px){
  :root{
    --toTop-size: 44px;   /* размер BackToHome.png */
    --toTop-gap:  24px;   /* отступ от низа экрана */
  }
  #toTop{
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--toTop-gap));
    width: var(--toTop-size);
    height: var(--toTop-size);
    z-index: 1000;
  }
  .site-footer{
    padding-bottom: calc(var(--toTop-size) + var(--toTop-gap) + 8px);
  }
}
/* Freeze layout inside the language chip: flag & text never shift */
.nav .chip.lang{
  justify-content: center;                 /* сама «пилюля» центрируется как и раньше */
}

.nav .chip.lang .flag{
  width:22px; height:22px; flex:0 0 22px;  /* фиксированный слот для флага */
  border-radius:50%; object-fit:contain; display:inline-block;
}

/* фиксированный слот для текста — одна ширина для обоих языков */
.nav .chip.lang .label{
  flex:0 0 92px;            /* можно 88–100px; это «замораживает» позицию текста */
  text-align:center;
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis;
}
/* Move flag slightly right on mobile, keep text centered */
@media (max-width: 767px){
  .nav .chip.lang .flag{
    transform: translateX(12px);
  }
  .nav .chip.lang .label{
    padding-left: 6px; /* сохраняем прежний визуальный зазор между флагом и текстом */
  }
}
/* Fix: no clipping of descenders in the language chip */
.nav .chip.lang{
  /* не даём контейнеру резать текст по вертикали */
  overflow: visible !important;
  line-height: 1.15 !important;  /* вместо 1 — чуть больше воздуха */
}
.nav .chip.lang .label{
  /* перенос/обрезка управляются на самом тексте, а не на контейнере */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15 !important;
  padding-bottom: 1px;            /* лёгкий подъём, чтобы 'g' гарантированно не касалась низа */
}
/* shift label 2px left on mobile only */
@media (max-width: 767px){
  .nav .chip.lang .label{
    transform: translateX(-2px);
    will-change: transform;
  }
}
/* Mobile: shift ONLY the text inside the language chip 2px left */
@media (max-width: 767px){
  .nav .chip.lang .label{
    transform: none !important;  /* на всякий случай гасим прежние translateX */
    position: relative;
    left: -2px;                  /* сдвиг текста на 2px влево */
  }
}


/* === FINAL LANG CHIP (mobile-only, minimal & safe) === */
@media (max-width: 767px){
  .nav .chip.lang{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    width:128px !important;
    height:40px !important;
    padding:0 16px !important;
    box-sizing:border-box !important;
    border-radius:9999px !important;
    border:1px solid transparent !important;
    background:
      linear-gradient(transparent, transparent) padding-box,
      linear-gradient(135deg, rgba(14,163,90,.55), rgba(13,187,106,.45), rgba(6,182,212,.45)) border-box !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    line-height:1.15 !important;
    color:inherit !important;
    text-decoration:none !important;
    overflow:visible !important;
  }
  .nav .chip.lang .flag{
    display:inline-block !important;
    width:22px !important; height:22px !important; flex:0 0 22px !important;
    border-radius:50% !important; object-fit:contain !important;
    transform: translateX(12px) !important;
    margin:0 !important;
  }
  .nav .chip.lang .label{
    display:inline-block !important;
    flex:0 0 82px !important; text-align:center !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
    font-weight:400 !important; line-height:1.15 !important;
    /* keep previous compensations neutralized */
    transform:none !important; left:auto !important; margin:0 !important; position:static !important;
    /* keep visual gap and shift glyphs left by 2px */
    padding-left:12px !important;
    text-indent:-2px;
  }
}
@media (max-width: 767px){
  :root{ --anchor-offset: 25px; }
  #about,
  #services{
    scroll-margin-top: var(--anchor-offset); 
  }
}