html{scroll-behavior:smooth}
*{box-sizing:border-box}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #0b1220;
  color: #e5e7eb;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

/* ===== ФОН ===== */
.background .gradient {
  position: fixed;
  inset: 0;
  background: linear-gradient(120deg, #0b1220, #0f172a, #111827, #0b1220);
  background-size: 300% 300%;
  animation: gradientShift 28s ease infinite;
  z-index: -3;
}
#blobs{ position: fixed; inset:0; pointer-events:none; z-index:-2; }
.blob{
  position:absolute; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.55), rgba(147,51,234,.18), rgba(0,0,0,0) 70%);
  filter: blur(28px) saturate(1.2);
  mix-blend-mode: screen;
  opacity:.35;
  animation: blobFloat var(--dur,22s) ease-in-out infinite;
}

/* ===== ШАПКА ===== */
.header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px; background: rgba(17,24,39,0.75);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  position: sticky; top: 0; z-index: 10;
}
.logo-block { display: flex; align-items: center; gap:10px }
.logo { width: 48px; height: 48px; border-radius: 8px; box-shadow:0 4px 14px rgba(0,0,0,0.4) }
.brand { font-weight: 800; font-size: 18px; letter-spacing: .5px }
.header nav a { margin: 0 10px; text-decoration: none; color: #cbd5e1; padding:6px 8px; border-radius:8px; transition:.25s }
.header nav a:hover { color: #93c5fd; background: rgba(37,99,235,.12) }

/* Кнопка наверх */
#toTop{
  position: fixed; right: 16px; bottom: 16px; width: 40px; height: 40px;
  border-radius: 10px; border: 0; background: rgba(59,130,246,.9); color: #fff;
  font-size: 20px; cursor: pointer; display: none; box-shadow:0 8px 24px rgba(37,99,235,.45);
}
#toTop.show{ display:block }
#toTop:hover{ transform: translateY(-2px); }

/* ===== ГЕРОЙ ===== */
.hero { text-align: center; padding: 90px 20px 40px }
.hero-logo{
  width: clamp(200px, 30vw, 360px);
  height: auto;
  display:block;
  margin: 0 auto 10px auto;
  filter: drop-shadow(0 10px 30px rgba(59,130,246,.35));
  opacity:.95;
}
.brand-hero{
  font-size: clamp(38px, 8vw, 88px);
  font-weight: 900;
  letter-spacing: 2px;
  margin: 6px 0 6px;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1.05;
  text-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.hero h1 { font-size: 40px; margin: 8px 0 10px; color:#fff }
.gradient-text {
  background: linear-gradient(to right, #60a5fa, #c084fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p{ color:#cbd5e1;margin:0 auto 14px;max-width:720px }
.hero-btns { margin-top: 8px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap }
.btn-primary {
  background: linear-gradient(to right, #2563eb, #9333ea);
  color: white; padding: 12px 18px; border: none; border-radius: 10px; cursor: pointer;
  box-shadow:0 10px 24px rgba(79,70,229,.45); transition: .25s;
}
.btn-outline {
  border: 2px solid #60a5fa; padding: 12px 18px; border-radius: 10px; cursor: pointer; color: #93c5fd; background:transparent; transition:.25s
}
.btn-outline:hover { background: #3b82f6; color: white; transform: translateY(-1px) }
.btn-primary:hover{ transform: translateY(-1px); filter:saturate(1.1) }

/* ===== ОБЩАЯ СТАТИСТИКА ===== */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 18px; padding: 24px 20px 36px; max-width: 1100px; margin: 0 auto;
}
.stat-card{ background:#0f172a; border:1px solid rgba(148,163,184,.15); border-radius:16px; padding:20px; text-align:center; box-shadow:0 6px 24px rgba(0,0,0,.35) }
.stats span { font-size: 34px; color: #93c5fd; font-weight: 800; display:block }

/* ===== СЕКЦИИ ===== */
.section { padding: 56px 20px; text-align: center; }
.section h2 { font-size: 28px; margin-bottom: 18px; color:#fff }
.sub{ color:#94a3b8; margin-top:-6px; margin-bottom:22px }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; max-width:1100px; margin:0 auto }
.card {
  background: #0f172a; padding: 20px; border-radius: 16px; border:1px solid rgba(148,163,184,.12);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  color:#e5e7eb;
}
.card img{ width:100%; height:180px; object-fit:cover; border-radius:12px }
.card figcaption{ margin-top:10px; font-weight:600 }
.hover-pop:hover { transform: translateY(-6px) scale(1.02); box-shadow:0 10px 34px rgba(0,0,0,.5); border-color:rgba(147,197,253,.25) }
.jobs-grid .card small{ color:#94a3b8 }

/* ===== СТАТИСТИКА ПО СТРАНАМ ===== */
.employment .bars { max-width: 720px; margin: 0 auto; text-align: left }
.bar { display: grid; grid-template-columns: 140px 1fr 60px; align-items:center; gap:12px; margin: 12px 0 }
.bar span{ color:#e5e7eb }
.bar-bg { width:100%; background: #1f2937; border-radius: 999px; overflow: hidden; height: 16px; }
.bar-fill { height: 100%; width: 0; background: linear-gradient(90deg,#60a5fa,#c084fc); border-radius:999px; }
.bar-fill.anim { transition: width 1.8s ease }

/* ===== ГЕОГРАФИЯ И ПАРТНЁРЫ ===== */
.geo{ max-width: 900px; margin: 0 auto 22px; text-align:left }
.geo-item{ display:flex; gap:14px; align-items:flex-start; margin:10px 0 }
.num{
  min-width: 34px; height: 34px; border-radius:10px;
  background:#111827; border:1px solid rgba(148,163,184,.2); box-shadow:0 6px 18px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#e5e7eb;
}
.geo-title{ font-weight:700; margin-bottom:6px; color:#fff }
.flag-row{ display:flex; flex-wrap:wrap; gap:8px }
.flag-icon{
  width:48px; height:32px; border-radius:6px; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.35);
  border:1px solid rgba(148,163,184,.25)
}
.partners-head{ color:#fff; margin: 18px 0 10px }

/* ===== ОТЗЫВЫ ===== */
.testimonials { background: linear-gradient(to right, rgba(37,99,235,.25), rgba(147,51,234,.25)); border-top:1px solid rgba(148,163,184,.15); color: #e5e7eb; padding: 60px 20px; text-align: center; }
.testimonials h2{ color:#fff }
.testimonials blockquote { font-size: 20px; font-style: italic; margin: 12px auto; max-width: 700px; }
.fade{ opacity:1; transition: opacity .5s }
.fade.hide{ opacity:.1 }

/* ===== КОНТАКТЫ — крупные белые ===== */
#contact .contact-panel{
  max-width: 960px;
  margin: 0 auto;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
#contact .contact-grid{
  grid-template-columns: 1fr;
  gap: 14px;
  display:grid;
}
#contact .contact-grid p{
  color: #fff;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.55;
  letter-spacing: .2px;
  margin: 0;
}
#contact .contact-grid a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#contact h2{ color:#fff }

/* ===== ПОДВАЛ ===== */
footer { text-align: center; padding: 24px 20px; background: #0b1220; color: #94a3b8; border-top:1px solid rgba(148,163,184,.15) }
.footer-wrap{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-left{ display:flex; align-items:center; gap:10px; color:#cbd5e1 }
.footer-left img{ width:42px; height:auto; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.35) }
.footer-center{ text-align:center; flex:1 }
.socials{ display:flex; justify-content:center; gap:10px; margin-bottom:8px }
.socials a{ display:inline-flex; width:32px; height:32px; border-radius:8px; align-items:center; justify-content:center; background:#111827; color:#cbd5e1; text-decoration:none; transition:.25s; border:1px solid rgba(148,163,184,.2) }
.socials a:hover{ background:#1f2937; transform: translateY(-2px) }

/* ===== АНИМАЦИИ ===== */
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes blobFloat { 0%,100%{ transform: translate(var(--tx,0), var(--ty,0)) scale(1) } 50%{ transform: translate(calc(var(--tx,0) * -1), calc(var(--ty,0) * -1)) scale(1.08) } }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(16px); transition: .6s ease }
.reveal.visible{ opacity:1; transform:none }
.slide-down{ transform: translateY(-8px); }

/* ===== АДАПТИВ ===== */
@media (max-width: 640px){
  .hero h1{ font-size:30px }
  .header nav a{ margin:0 6px }
}

/* === Hero logo bigger === */
.hero-logo{ width: clamp(221px, 32.3vw, 442px); }

/* === Job apply button === */
.job-actions{ margin-top: 10px; }
.btn-apply{
  display:inline-block; margin-top:8px; padding:10px 14px; border-radius:10px;
  background: linear-gradient(90deg,#22c55e,#16a34a); color:#fff; text-decoration:none; font-weight:700;
  box-shadow:0 8px 22px rgba(22,163,74,.35); transition:.2s;
}
.btn-apply:hover{ transform: translateY(-1px); filter:saturate(1.1) }

/* === Contact quick actions === */
.contact-actions{
  display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; justify-content:center
}
.contact-actions .cta{
  display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:800;
  box-shadow:0 10px 26px rgba(0,0,0,.35); transition:.22s; border:1px solid rgba(148,163,184,.2)
}
.contact-actions .cta.call{ background:#111827; color:#e5e7eb }
.contact-actions .cta.wa{ background:#128C7E; color:#fff }
.contact-actions .cta.mail{ background:#0f172a; color:#e5e7eb }
.contact-actions .cta.map{ background:#1f2937; color:#e5e7eb }
.contact-actions .cta:hover{ transform: translateY(-2px); }

/* ==== Modern Contacts (3-column) ==== */
.contact-modern-wrap{ padding-top: 28px; }
.contact-title{ font-size: clamp(32px, 5vw, 56px); color:#fff; margin-bottom: 16px; }
.contact-modern{
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; align-items:start;
}
.contact-modern .card{
  background:#ffffff; color:#0b1220; border:1px solid rgba(148,163,184,.25);
  border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.contact-map .map-iframe{ width:100%; height:420px; border-radius: 12px; }
.contact-details h3, .contact-form h3{ margin: 6px 0 6px; }
.contact-details .addr{ font-weight:700; }
.contact-details .desc{ color:#1f2937 }
.contact-details .phones{ display:flex; flex-direction:column; gap:6px; margin:10px 0 }
.contact-details .phones a{ font-weight:800; font-size:20px; color:#0b1220; text-decoration:none }
.contact-details .phones a:hover{ text-decoration:underline }
.socials-row{ display:flex; gap:10px; margin-top:14px }
.socials-row .soc{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  color:#fff; font-weight:900; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.soc.ok{ background:#EE8208 } .soc.ig{ background:#C13584 } .soc.vk{ background:#2787F5 } .soc.wa{ background:#128C7E }

.contact-form p{ color:#1f2937 }
#askForm .row{ display:flex; gap:10px; }
#askForm input, #askForm textarea{
  width:100%; padding:12px 12px; border-radius:10px; border:1px solid #cbd5e1; font-size:16px;
}
#askForm textarea{ margin-top:10px; resize:vertical }
.btn-send{
  width:100%; margin-top:14px; padding:14px 16px; border-radius:14px; border:0; cursor:pointer;
  font-weight:900; background: linear-gradient(90deg,#3b82f6,#6366f1); color:#fff;
  box-shadow:0 14px 36px rgba(59,130,246,.35);
}
.btn-send:hover{ filter:saturate(1.1); transform: translateY(-1px) }

@media (max-width: 1000px){
  .contact-modern{ grid-template-columns: 1fr; }
  .contact-map .map-iframe{ height:300px }
  #askForm .row{ flex-direction:column }
}

/* Route: overlay and button */
.contact-map{ position:relative }
.map-overlay{ position:absolute; inset:0; border-radius:12px; text-indent:-9999px; }
.route-btn{
  display:inline-block; margin:10px 0 0; padding:10px 14px; border-radius:10px; 
  background:#111827; color:#fff; text-decoration:none; font-weight:800;
  box-shadow:0 8px 22px rgba(0,0,0,.35); border:1px solid rgba(148,163,184,.2);
}
.route-btn:hover{ transform: translateY(-2px); }

/* ==== Unified Contact Panel (single background) ==== */
.contact-unified-wrap{ padding-top: 28px; }
.contact-unified{
  max-width: 1200px; margin: 0 auto;
  background: #ffffff; color:#0b1220; border:1px solid rgba(148,163,184,.25);
  border-radius: 18px; padding: 18px; box-shadow: 0 16px 44px rgba(0,0,0,.45);
  display: grid; grid-template-columns: 1.2fr 1fr 0.9fr; gap: 18px; align-items:start;
}
.contact-unified h3{ margin: 6px 0 6px; }
.contact-unified .addr{ font-weight:700 }
.map-wrap{ position:relative }
.map-iframe{ width:100%; height:420px; border-radius: 12px; }
.map-overlay{ position:absolute; inset:0; border-radius: 12px; text-indent:-9999px; }

.phones{ display:flex; flex-direction:column; gap:6px; margin:10px 0 }
.phones a{ font-weight:800; font-size:20px; color:#0b1220; text-decoration:none }
.phones a:hover{ text-decoration:underline }
.socials-row{ display:flex; gap:10px; margin-top:12px }
.socials-row .soc{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  color:#fff; font-weight:900; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.soc.ok{ background:#EE8208 } .soc.ig{ background:#C13584 } .soc.vk{ background:#2787F5 } .soc.wa{ background:#128C7E }

.write-actions{ display:flex; flex-direction:column; gap:12px; margin-top:10px }
.btn-contact{ display:inline-block; text-decoration:none; padding:14px 16px; border-radius:12px; font-weight:900; }
.btn-contact.wa{ background:#128C7E; color:#fff; box-shadow:0 14px 30px rgba(18,140,126,.35) }
.btn-contact.email{ background:#0f172a; color:#fff; box-shadow:0 14px 30px rgba(15,23,42,.35) }
.btn-contact:hover{ transform: translateY(-1px); filter:saturate(1.05) }

@media (max-width: 1000px){
  .contact-unified{ grid-template-columns: 1fr; }
  .map-iframe{ height:300px }
}

/* ==== Remove underline from all button-like links ==== */
.btn-primary, .btn-outline, .btn-apply, .cta, .route-btn, .socials a, .btn-contact { text-decoration: none !important; }

/* ==== Jobs grid: 3 per row on desktop ==== */
.jobs-grid{ grid-template-columns: 1fr; }
@media (min-width: 980px){
  .jobs-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* === Job pictograms & tags === */
.job-title{ font-weight:800; font-size:20px; display:flex; align-items:center; gap:8px }
.job-ico{ font-size:22px }
.job-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px }
.tag{ background:#111827; color:#e5e7eb; border:1px solid rgba(148,163,184,.25); border-radius:999px; padding:6px 10px; font-size:12px; display:inline-flex; align-items:center; gap:6px }
.job-sub small{ color:#94a3b8 }

/* === Subtitle under brand === */
.brand-sub{
  font-size: clamp(12px, 2.4vw, 18px);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #a5b4fc;
  opacity: .95;
  margin: 2px auto 10px;
}

/* ==== Facts section ==== */
.facts-wrap h2{ color:#fff; margin-bottom: 18px }
.facts-grid{
  max-width: 1100px; margin: 0 auto;
  display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}
.fact-card{
  background:#0f172a; border:1px solid rgba(148,163,184,.18); border-radius:16px;
  padding:18px; position:relative; overflow:hidden;
}
.fact-ico{ color:#93c5fd; filter: drop-shadow(0 10px 24px rgba(59,130,246,.35)); margin-bottom:6px }
.fact-title{ font-weight:800; font-size:20px; color:#fff }
.fact-sub{ color:#cbd5e1 }
.fact-card.award{ border-color: rgba(196,181,253,.4); background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(147,51,234,.08)); }
.fact-card.award .fact-ico{ color:#fbbf24 }
.fact-badge{
  display:inline-block; margin-top:8px; padding:6px 10px; border-radius:999px;
  background: linear-gradient(90deg,#f59e0b,#fbbf24); color:#111827; font-weight:900;
  box-shadow:0 10px 26px rgba(245,158,11,.35);
}

/* === Partners RU: 3x3 and flag near title === */
.flag-inline{ width:28px; height:auto; vertical-align:middle; margin-left:8px; border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,.35); border:1px solid rgba(148,163,184,.25) }
.partners-ru{ grid-template-columns: 1fr; }
@media (min-width: 980px){
  .partners-ru{ grid-template-columns: repeat(3, 1fr) !important; }
}

/* === Representatives block === */
.rep-card{
  max-width: 1100px; margin: 10px auto 24px;
  background: linear-gradient(180deg, rgba(37,99,235,.10), rgba(147,51,234,.10));
  border:1px solid rgba(148,163,184,.22); border-radius: 18px;
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}
.rep-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: 16px; align-items:center; padding: 18px; }
.rep-text h3{ margin: 0 0 6px; color:#fff; font-size: 24px }
.rep-lead{ color:#cbd5e1; margin: 0 0 10px }
.rep-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px }
.rep-badge{ background:#111827; color:#e5e7eb; border:1px solid rgba(148,163,184,.25); padding:8px 12px; border-radius:999px; font-weight:800 }
.rep-list{ margin:8px 0 0 16px; color:#e5e7eb }
.rep-list li{ margin:6px 0 }
.rep-image{ width:100%; height:auto; border-radius: 14px; border:1px solid rgba(148,163,184,.18); box-shadow:0 10px 30px rgba(0,0,0,.5) }
@media (max-width: 900px){
  .rep-grid{ grid-template-columns: 1fr; }
}

/* Center the text/badges in representatives block */
.rep-text{ text-align:center }
.rep-badges{ justify-content:center }
.rep-list{ list-style-position: inside; text-align:center }

/* === About: Events gallery === */
.about-events-title{ color:#fff; margin: 16px 0 10px; font-size: clamp(18px, 2.5vw, 26px) }
.about-events-grid{
  display:grid; gap:16px; grid-template-columns: 1fr; margin-top:8px;
}
@media (min-width: 980px){
  .about-events-grid{ grid-template-columns: repeat(3, 1fr); }
}
.event-card{
  background:#0b1220; border:1px solid rgba(148,163,184,.25); border-radius:16px; overflow:hidden;
  box-shadow:0 16px 44px rgba(0,0,0,.45);
}
.event-card img{ width:100%; height:280px; object-fit:cover; display:block }
.event-card figcaption{ padding:12px 14px; display:block; text-align:center }
.event-title{ color:#e5e7eb; font-weight:800; max-width:none; display:block; margin:0 auto }
.event-year{
  background:linear-gradient(90deg,#f59e0b,#fbbf24); color:#111827; font-weight:900; padding:6px 10px;
  border-radius:999px; box-shadow:0 8px 22px rgba(245,158,11,.35);
}

/* === About: Social responsibility === */
.about-social-title{ color:#fff; margin: 18px 0 8px; font-size: clamp(18px, 2.5vw, 26px) }
.about-social-lead{ color:#cbd5e1; margin: 0 0 12px; max-width: 900px }
.about-social-grid{
  display:grid; gap:16px; grid-template-columns: 1fr; 
}
@media (min-width: 980px){
  .about-social-grid{ grid-template-columns: repeat(3, 1fr); }
}
.social-card{
  background:#0b1220; border:1px solid rgba(148,163,184,.25); border-radius:16px; overflow:hidden;
  box-shadow:0 16px 44px rgba(0,0,0,.45);
}
.social-card img{ width:100%; height:280px; object-fit:cover; display:block }

/* === Social projects: redesign === */
.about-social{
  margin-top: 18px;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(59,130,246,.10), rgba(147,51,234,.10)) , rgba(11,18,32,.35);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
  padding: 18px;
}
.about-social-title{ 
  text-align:center; 
  font-size: clamp(22px, 3vw, 32px);
  color:#fff;
  margin: 6px 0 6px;
}
.about-social-divider{
  width: 120px; height: 4px; border-radius: 999px; margin: 6px auto 10px;
  background: linear-gradient(90deg,#3b82f6,#8b5cf6);
  box-shadow: 0 6px 18px rgba(99,102,241,.45);
}
.about-social-lead{ 
  text-align:center;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.5;
  color:#e5e7eb; 
  margin: 0 auto 14px; 
  max-width: 950px;
}
.about-social-grid{
  display:grid; gap:16px; grid-template-columns: 1fr; 
}
@media (min-width: 980px){
  .about-social-grid{ grid-template-columns: repeat(3, 1fr); }
}
.social-card{
  background:#0b1220; border:1px solid rgba(148,163,184,.25); border-radius:16px; overflow:hidden;
  box-shadow:0 16px 44px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.social-card:hover{ transform: translateY(-2px); box-shadow:0 22px 50px rgba(0,0,0,.55) }
.social-card img{ width:100%; height:300px; object-fit:cover; display:block }

/* === About subtitle (tagline) === */
.about-subtag{
  margin: 4px 0 14px;
  text-align: center;
  font-weight: 800;
  color: #e5e7eb;
  font-size: clamp(18px, 3vw, 30px);
  letter-spacing: .02em;
}

/* === ABOUT: Unified typography & spacing === */
#about { --aboutTitle: clamp(28px, 5vw, 40px); --aboutLead: clamp(14px, 1.9vw, 18px); }
#about h2{
  font-size: var(--aboutTitle);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  color:#fff;
  font-weight: 900;
  margin-bottom: 8px;
}
#about .about-subtag{
  font-size: clamp(16px, 2.4vw, 22px);
  line-height: 1.35;
  color:#e5e7eb;
  text-align: center;
  margin-bottom: 14px;
}
#about p{ font-size: var(--aboutLead); color:#cbd5e1 }
#about .grid{ gap:16px }
#about .card{ border-radius:16px; box-shadow:0 16px 44px rgba(0,0,0,.45) }
#about .hover-pop:hover{ transform: translateY(-2px) }

/* Event cards typography */
#about .event-title{ font-size: clamp(15px, 1.8vw, 18px); font-weight: 800; color:#e5e7eb }
#about .event-year{ font-size: 12px; }

/* Social block aligns with section look */
#about .about-social{ border-radius:18px; }
#about .about-social-title{ font-size: clamp(20px, 3vw, 28px) }
#about .about-social-lead{ font-size: clamp(16px, 2.2vw, 20px) }

/* === CONTACTS: use global background & readable colors === */
.contact-unified{
  background: transparent !important;
  color: #e5e7eb !important;
  border: none !important;
  box-shadow: none !important;
}
.contact-unified h3{ color:#fff }
.details-col .addr{ color:#fff; font-weight:800 }
.details-col .desc{ color:#cbd5e1 }
.phones a{ color:#e5e7eb !important; text-decoration:none }
.phones a:hover{ color:#ffffff !important; text-decoration:underline }
.route-btn{ background:#111827; color:#fff; border-color:rgba(148,163,184,.35) }
.write-col p{ color:#cbd5e1 }
.btn-contact.email{ background:#0f172a; color:#fff }
.btn-contact.wa{ background:#128C7E; color:#fff }
.map-iframe{ border:1px solid rgba(148,163,184,.25) }
.socials-row .soc{ box-shadow:0 8px 24px rgba(0,0,0,.4) }
.contact-title{ color:#fff }

/* === Footer SVG social icons === */
footer .socials{ display:flex; gap:10px; }
footer .socials .soc{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:#0b1220; border:1px solid rgba(148,163,184,.25);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  color:#e5e7eb; text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
footer .socials .soc .icon{ width:26px; height:26px; display:block }
footer .socials .soc:hover{ transform: translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.5) }

/* brand hovers */
footer .socials .soc.ok:hover{ background:#EE8208; color:#ffffff }
footer .socials .soc.vk:hover{ background:#2787F5; color:#ffffff }
footer .socials .soc.ig:hover{ background:#C13584; color:#ffffff }

/* === Brand-filled footer icons (default) === */
footer .socials .soc{ color:#fff; border:none }
footer .socials .soc.ok{ background:#EE8208 }
footer .socials .soc.vk{ background:#2787F5 }
footer .socials .soc.ig{ 
  background: radial-gradient(30% 30% at 30% 20%, #FEDA77, transparent),
              radial-gradient(40% 40% at 70% 80%, #F58529, transparent),
              linear-gradient(45deg, #F58529, #DD2A7B 40%, #8134AF 70%, #515BD4);
}
footer .socials .soc:hover{ transform: translateY(-2px); filter: brightness(1.05) }

/* === About intro block (as per user's layout) === */
.about-intro{ max-width: 1000px; margin: 10px auto 8px; }
.about-intro-row{ display:flex; align-items:flex-start; justify-content:center; gap:10px; margin: 10px 0; }
.about-intro-row p{ 
  margin: 0; 
  text-align: center; 
  color:#e5e7eb; 
  font-size: clamp(16px, 2.4vw, 22px); 
  line-height: 1.35;
  max-width: 980px;
}
.about-intro .ai-sponsor p{ font-weight: 800; }
.about-intro .ai-events p{ font-weight: 800; }
.ai-ico{ color:#93c5fd; width: 28px; height: 28px; display:inline-flex }
.ai-ico svg{ width: 28px; height: 28px; display:block }
.ai-heart{ color:#f472b6 }
.ai-calendar{ color:#f59e0b }
.ai-team{ color:#a78bfa }
.ai-founded{ color:#60a5fa }

/* === Theme toggle button === */
.theme-toggle {
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(17,24,39,0.6);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  backdrop-filter: blur(8px);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.theme-toggle:hover { transform: translateY(-1px); }
html[data-theme="light"] .theme-toggle {
  background: rgba(255,255,255,0.8);
  color: #111827;
  border-color: rgba(0,0,0,0.1);
}
.theme-toggle .icon { font-size: 16px; line-height: 1; }

/* Dark theme: unify fact cards background like the award card */
html[data-theme="dark"] .fact-card{
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(147,51,234,.08)) !important;
  border-color: rgba(148,163,184,.25) !important;
}

/* Dark theme: Email button green for consistency */
html[data-theme="dark"] .btn-contact.email{
  background:#128C7E !important;
  color:#ffffff !important;
  box-shadow:0 14px 30px rgba(18,140,126,.35) !important;
}

/* Header-embedded theme toggle */
.theme-toggle.inline{
  position: static;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(17,24,39,0.4);
  margin-left: 6px;
}
html[data-theme="light"] .theme-toggle.inline{
  background: rgba(255,255,255,0.8);
  border-color: rgba(0,0,0,0.1);
  color:#111827;
}

/* ==== Inline theme toggle (pill) ==== */
.theme-toggle.inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  position: static;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(17,24,39,0.55);
  color:#fff;
  cursor:pointer;
  backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.theme-toggle.inline:hover{ transform: translateY(-1px); }
.theme-toggle.inline .icon{ font-size: 16px }
.theme-toggle.inline .label{ font-weight: 700; letter-spacing: .2px }

/* Knob */
.theme-toggle.inline::before{
  content:'';
  width: 16px; height: 16px;
  border-radius: 999px;
  background: currentColor;
  opacity: .85;
  box-shadow: 0 1px 6px rgba(0,0,0,.35);
  transform: translateX(0);
  transition: transform .25s ease;
}
/* Move knob to the right in light theme */
html[data-theme="light"] .theme-toggle.inline::before{ transform: translateX(6px); }
html[data-theme="dark"] .theme-toggle.inline::before{ transform: translateX(-6px); }

/* Light palette for the pill */
html[data-theme="light"] .theme-toggle.inline{
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.10);
  color:#111827;
}

/* === Simplified footer social buttons (flat brand circles) === */
footer .socials .soc{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:none !important;
  background:#1f2937; /* fallback */
  color:#ffffff !important; /* icons use currentColor -> white */
  box-shadow:none !important;
  transition: transform .15s ease, filter .15s ease, background .2s ease;
  text-decoration:none;
}
footer .socials .soc .icon{ width:24px; height:24px; display:block }
footer .socials .soc:hover{ transform: translateY(-1px); filter: saturate(1.05); }

/* Brand backgrounds */
footer .socials .soc.ok{ background:#EE8208 !important; }
footer .socials .soc.vk{ background:#2787F5 !important; }
footer .socials .soc.ig{ background:#C13584 !important; }

/* Remove inner overlay shapes inside SVGs (e.g., VK rounded rect) */
footer .socials .soc .icon rect{ display:none !important; }
footer .socials .soc .icon [opacity], 
footer .socials .soc .icon [fill-opacity]{ opacity: 1 !important; }

/* Text labels for social buttons */
footer .socials .soc-label{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .5px;
  line-height: 1;
  color: #fff;
}

/* === Flat logos (no background/shadow) === */
.header .logo{
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.footer-left img{
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* === Logo sizing & alignment fixes === */
.header .logo{
  height: 44px !important;
  width: auto !important;      /* keep aspect ratio */
  display: block;
  object-fit: contain;         /* avoid stretch */
  object-position: center;
}
.footer-left img{
  height: 36px !important;
  width: auto !important;
  display: block;
  object-fit: contain;
  object-position: center;
}

/* Make footer left group align nicely */
.footer-left{ display:flex; align-items:center; gap:10px }

/* === Facts timer styling === */
.fact-card.exp .fact-badges{ margin-top:6px; }
.fact-card.exp .since-pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(99,102,241,.12);
  border:1px solid rgba(99,102,241,.25);
  font-weight:800;
  font-size:14px;
}
.fact-card.exp .fact-timer{
  margin-top:8px;
  display:flex; gap:10px; align-items:baseline; justify-content:center;
}
.fact-card.exp .fact-timer .n{
  display:inline-block; min-width:34px; text-align:center;
  padding:6px 10px; border-radius:10px;
  background:rgba(15,23,42,.15);
  font-weight:900; font-size:18px;
}
.fact-card.exp .fact-timer .u{ margin-left:4px; margin-right:8px; opacity:.85; font-weight:700 }
.fact-card.exp .fact-time-inline{
  margin-top:6px; font-weight:800; opacity:.9; letter-spacing:.5px;
}

/* Light theme adjustments */
html[data-theme="light"] .fact-card.exp .fact-timer .n{ background:rgba(0,0,0,.06); color:#0b1220 }
html[data-theme="light"] .fact-card.exp .since-pill{ background:rgba(99,102,241,.10); border-color:rgba(0,0,0,.10); color:#0b1220 }

/* === Center 'experience' concise line === */
.fact-card .exp-value{
  margin-top: 8px;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: .2px;
}
html[data-theme="light"] .fact-card .exp-value{ color:#0b1220 }

/* === Logo glow across themes === */
/* Default (тёмная тема и общий) — мягкая светлая подсветка + фирменный холодный ореол */
.header .logo,
.hero-logo,
.footer-left img{
  filter:
    drop-shadow(0 2px 8px rgba(255,255,255,.16))
    drop-shadow(0 0 14px rgba(147,197,253,.22))   /* голубой */
    drop-shadow(0 0 18px rgba(167,139,250,.18)); /* фиолетовый */
  transition: filter .2s ease, transform .12s ease;
}
.header .logo:hover,
.hero-logo:hover,
.footer-left img:hover{ transform: translateY(-1px) }

/* === Rep section polish === */
.rep-text ul{
  list-style: disc inside;
  margin: 8px 0 0 0;
  padding-left: 0;
}
.rep-text ul li{ margin: 8px 0; text-indent: 0; }

.rep-image-wrap{
  background: none !important;
  box-shadow: none !important;
}
.rep-image{
  display:block;
  width:100%;
  height:auto;
  filter:
    drop-shadow(0 6px 20px rgba(0,0,0,.18))
    drop-shadow(0 2px 8px rgba(0,0,0,.08));
}
/* Light theme: slightly deeper shadow for separation */
html[data-theme="light"] .rep-image{ filter: drop-shadow(0 8px 22px rgba(0,0,0,.16)) drop-shadow(0 2px 8px rgba(0,0,0,.06)); }

/* Country flag chips — simple animations */
.flag-list img,
.flags img,
.country-flags img{
  display:inline-block;
  border-radius:10px;
  transition: transform .18s ease, box-shadow .2s ease, filter .2s ease;
}
.flag-list img:hover,
.flags img:hover,
.country-flags img:hover{
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  filter: saturate(1.1);
}
/* Gentle float animation for the row */
@keyframes floaty {
  0% { transform: translateY(0) }
  50% { transform: translateY(-2px) }
  100% { transform: translateY(0) }
}
.flag-list img:nth-child(3n){ animation: floaty 4s ease-in-out infinite }
.flag-list img:nth-child(3n+1){ animation: floaty 5s ease-in-out infinite .4s }
.flag-list img:nth-child(3n+2){ animation: floaty 6s ease-in-out infinite .8s }

/* Use the silhouette as a mask; fallback to background image if mask unsupported */
  -webkit-mask-image: url('assets/rep/kz-reps-clean.png');
  mask-image: url('assets/rep/kz-reps-clean.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  background:
    linear-gradient(135deg, #e9e4da 0%, #f3f5f8 25%, #d6e3f0 50%, #c7d2fe 75%, #bcd2e6 100%);
  filter:
    drop-shadow(0 14px 34px rgba(0,0,0,.18))
    drop-shadow(0 4px 12px rgba(0,0,0,.10))
    drop-shadow(0 0 10px rgba(99,102,241,.18)); /* cold glow */
}
/* Simulate regions with overlayed subtle stripes/blocks */
.rep-map-mask::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(120deg, rgba(30,58,138,.22) 0 20%, transparent 20% 30%, rgba(14,116,144,.22) 30% 45%, transparent 45% 55%, rgba(15,118,110,.22) 55% 70%, transparent 70% 80%, rgba(49,46,129,.22) 80% 100%),
    linear-gradient(0deg, rgba(255,255,255,.15), rgba(255,255,255,0));
  mix-blend-mode: overlay;
  pointer-events:none;
}
/* Markers */
.rep-marker{
  position:absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%,-50%);
  width: 12px; height:12px; border-radius:50%;
  background:#ef4444;
  box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 6px 14px rgba(0,0,0,.25);
}
.rep-marker span{
  position:absolute; top:-28px; left:50%; transform:translateX(-50%);
  background:#111827; color:#fff; font-size:12px; font-weight:700;
  padding:4px 8px; border-radius:999px; white-space:nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
/* Light theme tuning */
html[data-theme="light"] .rep-map-mask{
  background: linear-gradient(135deg, #edeade 0%, #f8fafc 25%, #e5eef8 50%, #e0e7ff 75%, #ddebf4 100%);
  filter:
    drop-shadow(0 10px 26px rgba(0,0,0,.14))
    drop-shadow(0 2px 8px rgba(0,0,0,.06))
    drop-shadow(0 0 8px rgba(99,102,241,.15));
}

/* Kazakhstan SVG map wrapper (keep previous scale) */
.kz-map{ margin:12px 0; display:block; border-radius:18px; overflow:visible }
.kz-map svg{ width:100%; height:auto; display:block; aspect-ratio: 16/9; }

/* Reps map cleaned glow */
.rep-image{
  filter:
    drop-shadow(0 14px 34px rgba(0,0,0,.18))
    drop-shadow(0 4px 12px rgba(0,0,0,.10))
    drop-shadow(0 0 10px rgba(99,102,241,.18));
}

/* Map container: no inner frame */
.rep-image-wrap, .rep-media, .rep-right, .rep-illustration{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Logo-like glow around map edges */
.rep-image{
  filter:
    drop-shadow(0 2px 8px rgba(255,255,255,.16))
    drop-shadow(0 0 14px rgba(147,197,253,.22))
    drop-shadow(0 0 18px rgba(167,139,250,.18));
}

/* Map image: no element glow, keep transparent background */
.rep-image{ filter: none !important; background: transparent !important; }
.rep-image-wrap, .rep-media, .rep-right, .rep-illustration{ background: transparent !important; box-shadow: none !important; }

/* Plain map image: no highlight/box-shadow from any wrappers */
.rep-image,
.rep-media img,
.rep-illustration img{ filter:none !important; box-shadow:none !important; outline:none !important; }

.rep-right, .rep-media, .rep-image-wrap, .rep-illustration{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* City chips as gradient text */
.city-chip, .city, .rep-cities .tag, .rep-cities .chip{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.rep-cities, .rep-cities .city-chip, .rep-cities .city{
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: .2px;
  margin-right: 18px;
}

.rep-cities .city-chip, .rep-cities .city{
  background: linear-gradient(90deg,#8B5CF6 0%, #06B6D4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.rep-cities .city-chip:hover, .rep-cities .city:hover{
  opacity: .9; transform: translateY(-1px);
}

/* Pretty working-hours pills */
.hours-list{margin:8px 0 16px; padding:0; list-style:none; display:flex; gap:12px; flex-wrap:wrap}
.hours-list li{padding:8px 14px; border-radius:9999px; background:rgba(255,255,255,0.06); 
               box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);}
.hours-list li span{opacity:.85; margin-right:8px}
.hours-list li b{font-weight:800}
/* Light theme tweak */
html[data-theme="light"] .hours-list li{background:rgba(15, 23, 42, 0.06);
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08);}

/* Centered working hours block */
.hours-block{ text-align:center }
.hours-list{ justify-content:center }

/* Hero gradient styles */
.hero-title{
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .2px;
  background: linear-gradient(90deg, #8B5CF6 0%, #06B6D4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-subtitle{
  margin-top: 10px;
  font-size: 1.075rem;
  opacity: .95;
}

html[data-theme="light"] .hero-title{
  background: linear-gradient(90deg, #7C3AED 0%, #0891B2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
html[data-theme="light"] .hero-subtitle{ opacity: .9 }

/* Anim 1: gentle breathing gradient for hero title */
.hero-title{
  background-size: 200% 100%;
  animation: heroShift 10s ease-in-out infinite;
  will-change: transform, background-position;
}
@keyframes heroShift{
  0%,100%{ background-position: 0% 50%; transform: scale(1.00) }
  50%    { background-position: 100% 50%; transform: scale(1.02) }
}
@media (prefers-reduced-motion: reduce){
  .hero-title{ animation: none }
}

/* Anim 6: subtle shimmer on hero title when hovered */
.hero-title:hover{
  background-image:
    linear-gradient(90deg, #8B5CF6, #06B6D4),
    linear-gradient(120deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 70%);
  background-size: 200% 100%, 200% 100%;
  background-blend-mode: overlay;
  animation: heroShift 10s ease infinite, shimmer 1.8s ease-in-out 1;
}
@keyframes shimmer{
  from{ background-position: 0 0, -200% 0 }
  to  { background-position: 0 0,  200% 0 }
}
html[data-theme="light"] .hero-title:hover{
  background-image:
    linear-gradient(90deg, #7C3AED, #0891B2),
    linear-gradient(120deg, rgba(0,0,0,.0) 30%, rgba(0,0,0,.18) 50%, rgba(0,0,0,0) 70%);
}

/* Particles BG */
.hero-wrap{ position: relative; overflow: hidden; padding: 12px 0; }
.hero-wrap .bg-particles{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none;
}
/* lift content above canvas */
.hero-wrap > h1, .hero-wrap > p{ position:relative; z-index:1 }

/* Optional: add a subtle dark-to-transparent overlay on light theme to improve contrast */
html[data-theme="light"] .hero-wrap::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: linear-gradient(to bottom, rgba(15,23,42,0.03), rgba(15,23,42,0));
}

/* Particles header */
header, .header{ position: relative }
.bg-particles{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.bg-particles--header{ z-index:0 }
header > *, .header > *{ position: relative; z-index: 1 } /* keep content above canvas */

/* Particles brand */
.brand-wrap{ position: relative; }
.brand-wrap .bg-particles{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.brand-wrap > *{ position: relative; z-index:1 }

/* Sticky header */
header, .header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(120%) blur(4px);
}
/* backgrounds for themes so content under doesn't просвечивать слишком сильно */
html[data-theme="dark"] header, html[data-theme="dark"] .header{ background: rgba(2,6,23,0.55) }      /* slate-950 ~ */
html[data-theme="light"] header, html[data-theme="light"] .header{ background: rgba(255,255,255,0.70) } /* light glass */

.logo-shine{ position: relative; display:inline-block }

/* Dark theme: a bit brighter & cyan tint */
html[data-theme="dark"] 

  5%   { opacity:.7 }
  28.5%{ transform: translateX(120%)  scale(1.12); opacity:.7 }
  32%  { opacity:0 }
  100% { transform: translateX(120%)  scale(1.12); opacity:0 }
}

  100%{ transform: translateX(120%) }
}
@media (prefers-reduced-motion: reduce){
  
}

/* Logo shimmer via CSS mask (affects logo shape itself) */
.logo-shine{ position: relative; display:inline-block }

html[data-theme="dark"] 

  5%   { opacity:.7 }
  28.5%{ transform: translateX(120%)  scale(1.12); opacity:.7 }
  32%  { opacity:0 }
  100% { transform: translateX(120%)  scale(1.12); opacity:0 }
}

  100%{ transform: translateX(120%) }
}
@media (prefers-reduced-motion: reduce){
  
}


/* ==== Mobile nav (hamburger) ==== */
.menu-toggle{ display:none; margin-left:.5rem; width:44px; height:36px; border-radius:10px; border:1px solid var(--border,rgba(0,0,0,.1)); background:var(--card-bg,rgba(255,255,255,.08)); box-shadow:var(--shadow-sm); align-items:center; justify-content:center; gap:5px; padding:6px 8px }
.menu-toggle .bar{ display:block; width:20px; height:2px; background:var(--text, #0f172a); border-radius:2px; transition:transform .25s ease, opacity .25s ease, background .25s ease}
html[data-theme="dark"] .menu-toggle .bar{ background: #e5e7eb }
.menu-toggle.inline{ display:inline-flex }

/* transform to X when open */
.menu-open .menu-toggle .bar:nth-child(1){ transform: translateY(6px) rotate(45deg) }
.menu-open .menu-toggle .bar:nth-child(2){ opacity:0 }
.menu-open .menu-toggle .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg) }

/* Desktop nav as before */
header nav#siteNav{ display:flex; gap:20px; align-items:center; }

/* Mobile styles */
@media (max-width: 860px){
  header .logo-block{ gap:.5rem }
  header nav#siteNav{
    position: fixed;
    inset: 64px 16px auto 16px;
    background: var(--panel, rgba(255,255,255,.8));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border, rgba(15,23,42,.12));
    border-radius: 16px;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    transform-origin: top;
    transform: scaleY(0.0);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
    z-index: 999;
  }
  html[data-theme="dark"] header nav#siteNav{
    background: rgba(2,6,23,.82);
    border-color: rgba(148,163,184,.18);
  }
  header nav#siteNav a{
    display:block;
    padding: 12px 10px;
    border-radius: 10px;
    color: var(--text, #0f172a);
  }
  html[data-theme="dark"] header nav#siteNav a{ color: #e5e7eb }
  header nav#siteNav a:hover{
    background: rgba(99,102,241,.12);
  }
  .menu-open header nav#siteNav{
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }
  /* show burger, hide inline nav on small widths */
  header .logo-block .menu-toggle{ display:inline-flex }
  header > nav#siteNav{ /* hide inline flex layout; we'll overlay it */ }
  header nav#siteNav{ display:grid }
  /* optional: hide original inline display to avoid pushing layout */
  header { position: relative; }
  /* Backdrop */
  header::after{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 998;
  }
  .menu-open header::after{ opacity:1; pointer-events:auto }
}

/* Improve hit targets */
header nav#siteNav a{ text-decoration:none; font-weight:600 }


/* ===== v118: reduce central hero logo by ~30% on both themes ===== */
.hero-logo {
  transform: scale(0.7) !important;   /* 70% of original size */
  transform-origin: center center !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}


/* ===== v119: tighten vertical spacing around hero logos ===== */
.hero { padding-top: 28px !important; padding-bottom: 14px !important; }
.hero-inner { margin-top: 0 !important; margin-bottom: 0 !important; }
.hero-logo { margin-top: 0 !important; margin-bottom: 4px !important; }
/* reduce gap before the next section right after hero */
.hero + .section { padding-top: 32px !important; }
/* and a bit less space above hero from header on small screens */
@media (max-width: 640px) {
  .hero { padding-top: 22px !important; padding-bottom: 8px !important; }
  .hero + .section { padding-top: 24px !important; }
}


/* ===== v120: ultra-tight hero vertical spacing ===== */
.hero { padding-top: 8px !important; padding-bottom: 4px !important; }
.hero-inner { margin: 0 !important; }
.hero h1, .hero h2, .hero p { margin-top: 0 !important; }
.hero-title { margin: 4px 0 6px !important; line-height: 1.1 !important; }
.hero-sub { margin: 0 0 8px !important; }
.hero-logo { margin: 2px auto 4px !important; }
.hero + .section { padding-top: 16px !important; }

@media (max-width: 640px) {
  .hero { padding-top: 6px !important; padding-bottom: 2px !important; }
  .hero-title { margin: 2px 0 4px !important; }
  .hero-sub { margin: 0 0 6px !important; }
  .hero + .section { padding-top: 12px !important; }
}


/* ===== v121: tightest gap between hero logo and title ===== */
#home.hero { padding-top: 0 !important; padding-bottom: 0 !important; }
#home.hero .brand-wrap { margin-top: -10px !important; margin-bottom: 0 !important; }
img.hero-logo { display:block; margin: 0 auto 2px !important; }
.brand-hero { margin: 0 0 2px !important; line-height: 1.05 !important; }
.brand-sub { margin: 0 0 8px !important; }
#home.hero + .section { padding-top: 10px !important; }

@media (max-width: 640px) {
  #home.hero .brand-wrap { margin-top: -12px !important; }
  .brand-hero { margin-bottom: 0 !important; }
  .brand-sub { margin-bottom: 6px !important; }
  #home.hero + .section { padding-top: 8px !important; }
}

/* ===== v122: restore hero spacing from v88 ===== */
.hero {
  text-align: center !important;
  padding: 90px 20px 40px !important;
}
.brand-hero {
  font-size: clamp(38px, 8vw, 88px) !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  margin: 6px 0 6px !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  text-shadow: 0 8px 30px rgba(0,0,0,.35) !important;
}
.brand-sub {
  font-size: clamp(12px, 2.4vw, 18px) !important;
  letter-spacing: 0.38em !important;
  text-transform: uppercase !important;
  color: #a5b4fc !important;
  opacity: .95 !important;
  margin: 2px auto 10px !important;
}
.hero-logo {
  width: clamp(200px, 30vw, 360px) !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 10px auto !important;
  filter: drop-shadow(0 10px 30px rgba(59,130,246,.35)) !important;
  opacity: .95 !important;
}


/* ===== v123: kill gap between hero logo and title ===== */
#home.hero .brand-wrap { display:flex; flex-direction:column; align-items:center; gap: 2px !important; }
img.hero-logo { display:block; margin: 0 auto 0 !important; padding: 0 !important; }
.brand-hero { margin: 0 !important; line-height: 1.02 !important; }
.brand-sub { margin-top: 4px !important; }
#home.hero { padding-top: 0 !important; padding-bottom: 8px !important; }


/* ===== v125: fix hero gap caused by particles canvas & tighten spacing ===== */
#home.hero { position: relative !important; padding-top: 0 !important; }
#home.hero .bg-particles { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; z-index: 0 !important; }
/* make sure content sits above */
#home.hero .brand-wrap { position: relative !important; z-index: 1 !important; display: flex; flex-direction: column; align-items: center; gap: 2px !important; margin: 0 !important; }
img.hero-logo { display: block !important; margin: 0 auto 0 !important; padding: 0 !important; vertical-align: top !important; }
.brand-hero { margin: 0 !important; line-height: 1.03 !important; }
.brand-sub { margin: 2px 0 6px !important; }
\n
/* ===== v126: remove transform scaling; set real size for hero logo ===== */
img.hero-logo, .hero-logo {
  transform: none !important;         /* do not reserve extra layout space */
  width: auto !important;
  height: auto !important;
  max-height: 220px !important;       /* ~30% smaller visual size */
  display: block !important;
  margin: 0 auto 2px !important;
}


/* ===== v127: brand-hero 20% smaller + gradient text ===== */
.brand-hero {
  /* ~20% smaller compared to previous clamp(38px, 8vw, 88px) */
  font-size: clamp(30px, 6.4vw, 70px) !important;
  line-height: 1.06 !important;
  margin: 2px 0 6px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  /* Fancy gradient text with solid fallback for older browsers */
  color: #cfe6ff !important; /* fallback */
  background: linear-gradient(90deg, #7cc0ff 0%, #b994ff 50%, #ffd1ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Slightly different gradient for light theme for contrast */
[data-theme="light"] .brand-hero {
  color: #2a2a2a !important; /* fallback */
  background: linear-gradient(90deg, #2a6fff 0%, #7a2cff 55%, #ff4dd2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
\n
/* ===== v128: reduce hero subtitle by ~20% ===== */
.brand-sub { 
  font-size: 0.8em !important;  /* ~20% smaller */
  line-height: 1.25 !important;
}





/* ===== v130: logo contrast — dark: white; light: dark-slate ===== */
[data-theme="dark"] .brand-logo,
[data-theme="dark"] .hero-logo {
  filter: none !important; /* keep original (white PNG/SVG) */
}

[data-theme="light"] .brand-logo,
[data-theme="light"] .hero-logo {
  /* turn white logo into a dark slate tone suitable for light UI */
  filter: invert(12%) sepia(6%) saturate(320%) hue-rotate(180deg) brightness(85%) contrast(95%) !important;
}


/* ===== v131: map lazy placeholder ===== */
.map-lazy { position: relative; width: 100%; max-width: 900px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.map-fallback { display:block; width:100%; height:auto; object-fit: cover; }
.map-open { position:absolute; right:12px; bottom:12px; padding:10px 14px; border-radius:12px; background:rgba(0,0,0,.65); color:#fff; border:0; font-weight:600; cursor:pointer; backdrop-filter: blur(4px); }
[data-theme="light"] .map-open{ background:rgba(0,0,0,.55); }
.map-iframe { width:100%; height:420px; border:0; border-radius:16px; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.is-hidden { display:none !important; }


/* ===== v132: map autoload with overlay ===== */
.map-wrap{ position:relative; width:100%; max-width:900px; margin:0 auto; border-radius:16px; overflow:hidden; box-shadow:0 10px 28px rgba(0,0,0,.25); }
.map-iframe{ width:100%; height:420px; border:0; display:block; }
.map-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:16px; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
.map-overlay .map-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75; filter: blur(1px); }
.map-status{ position:relative; z-index:2; display:flex; align-items:center; gap:10px; }
.map-spinner{ width:18px; height:18px; border-radius:50%; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; animation: spin 1s linear infinite; }
@keyframes spin{ to { transform: rotate(360deg);} }
.map-text{ color:#fff; font-weight:600; text-shadow:0 2px 8px rgba(0,0,0,.4); }
.map-retry{ padding:8px 12px; border-radius:10px; border:0; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; }
[data-theme="light"] .map-overlay{ background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.75)); }
[data-theme="light"] .map-retry{ background:rgba(0,0,0,.65); color:#fff; }
.map-wrap.is-loaded .map-overlay{ display:none; }


/* v134: hide theme toggle icons */
.theme-toggle .icon{ display:none !important; width:0 !important; height:0 !important; }


/* Разделительная линия под заголовками карточек услуг */
.service-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  position: relative;
  color: #fff;
}

.service-card h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #4facfe, #9b59b6);
  margin: 8px 0 12px 0;
  border-radius: 1px;
}

/* Секция Наши представители */
#geo {
    padding: 60px 0;
    border: none !important;
    box-shadow: none !important;
}

/* Тёмная тема */
[data-theme="dark"] #geo {
    background: linear-gradient(135deg, rgba(30, 32, 60, 0.95), rgba(40, 20, 70, 0.9));
}

/* Светлая тема */
[data-theme="light"] #geo {
    background: linear-gradient(135deg, rgba(240, 242, 248, 0.95), rgba(220, 230, 245, 0.9));
}

/* Убираем рамки у карты */
.rep-card, .rep-image-wrap {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Секция Социальные проекты и поддержка */
#social {
    padding: 60px 0;
    border: none !important;
    box-shadow: none !important;
}

/* Тёмная тема */
[data-theme="dark"] #social {
    background: linear-gradient(135deg, rgba(25, 40, 50, 0.95), rgba(20, 60, 80, 0.9));
}

/* Светлая тема */
[data-theme="light"] #social {
    background: linear-gradient(135deg, rgba(245, 247, 250, 0.95), rgba(225, 235, 245, 0.9));
}

/* --- Improved adaptive menu scaling (v220) --- */
@media (max-width: 1200px) {
  nav, .navbar, .menu, .header-menu {
    transform: scale(0.95);
    transform-origin: top left;
  }
}
@media (max-width: 992px) {
  nav, .navbar, .menu, .header-menu {
    transform: scale(0.9);
  }
}
@media (max-width: 768px) {
  nav, .navbar, .menu, .header-menu {
    transform: scale(0.8);
  }
}
@media (max-width: 576px) {
  nav, .navbar, .menu, .header-menu {
    transform: scale(0.7);
  }
}
/* Prevent overflow */
nav, .navbar, .menu, .header-menu {
  max-width: 100%;
  overflow-x: hidden;
}

/* --- Adaptive Header and Menu (v221) --- */
@media (max-width: 1200px) {
  nav, .navbar, .menu, .header-menu {
    transform: scale(0.95);
  }
  nav a, .navbar a, .menu a, .header-menu a {
    font-size: 0.95em;
  }
}
@media (max-width: 992px) {
  nav, .navbar, .menu, .header-menu {
    transform: scale(0.9);
  }
  nav a, .navbar a, .menu a, .header-menu a {
    font-size: 0.9em;
  }
}
@media (max-width: 768px) {
  nav, .navbar, .menu, .header-menu {
    transform: scale(0.85);
  }
  nav a, .navbar a, .menu a, .header-menu a {
    font-size: 0.85em;
  }
}
@media (max-width: 576px) {
  nav, .navbar, .menu, .header-menu {
    transform: scale(0.8);
  }
  nav a, .navbar a, .menu a, .header-menu a {
    font-size: 0.8em;
  }
}
@media (max-width: 400px) {
  nav, .navbar, .menu, .header-menu {
    transform: scale(0.75);
  }
  nav a, .navbar a, .menu a, .header-menu a {
    font-size: 0.75em;
  }
}
/* Prevent overflow */
nav, .navbar, .menu, .header-menu {
  max-width: 100%;
  overflow-x: hidden;
}


/* --- Force mobile menu layout when nav overflows --- */
html.menu-force-collapsed header .logo-block .menu-toggle{ display:inline-flex; }
html.menu-force-collapsed header nav#siteNav{
  position: fixed;
  inset: 64px 16px auto 16px;
  background: var(--panel, rgba(255,255,255,.8));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border, rgba(15,23,42,.12));
  border-radius: 16px;
  padding: 12px;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 4px;
  transform-origin: top;
  transform: scaleY(0.0);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
}
html.menu-force-collapsed .menu-open header::after{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.28);
  opacity: 1;
  pointer-events: auto;
  transition: opacity .25s ease;
}
html.menu-force-collapsed .menu-open header nav#siteNav{
  transform: scaleY(1.0);
  opacity: 1;
  pointer-events: auto;
}
/* hide inline layout when forced collapsed */
html.menu-force-collapsed header > nav#siteNav{
  /* The inline flex layout defined for desktop becomes overlay grid */
}



/* Ensure desktop inline nav when not forced */
html:not(.menu-force-collapsed) header nav#siteNav{ display:flex; gap:20px; align-items:center; }