:root {
  --bg: #ffffff;
  --ink: #1b1c20;
  --ink-soft: rgba(27,28,32,0.6);
  --ink-line: rgba(27,28,32,0.09);
  --red: #e60029;
  --gradient: linear-gradient(135deg, #ff6f00 0%, #ff2200 45%, #e60029 100%);
  --font-main: 'Gilroy', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
::selection { background: var(--red); color: #fff; }

body {
  font-family: var(--font-main);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  cursor: none !important;
}
*, *::before, *::after { cursor: none !important; }
a, button, [role="button"], label, select, input, textarea { cursor: none !important; }
.t-rec, .t-rec * { cursor: none !important; }

#cur { position: fixed; pointer-events: none; z-index: 99999; top: 0; left: 0; }
#cur .c-icon {
  position: absolute; width: 36px; height: 36px;
  transform: translate(-50%, -50%);
  transition: width .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1);
  animation: rotateCursor 1.8s linear infinite;
}
#cur .c-icon img { width: 100%; height: 100%; object-fit: contain; }
body.on-link #cur .c-icon { width: 54px; height: 54px; }
body.dragging-divider #cur .c-icon { width: 70px; height: 70px; opacity: .5; }
@keyframes rotateCursor {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── NAV ── */
.ez-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  height: 80px; display: flex; align-items: center;
  padding: 0 48px;
  transition: background .4s, box-shadow .4s, height .4s;
}
.ez-nav.scrolled {
  background: rgba(15,15,18,.96);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
  height: 68px;
}
.nav-logo {
  flex-shrink: 0; margin-right: auto;
  opacity: 1; transition: opacity .4s, visibility .4s; visibility: visible;
}
.nav-logo img { height: 44px; width: auto; max-width: 160px; object-fit: contain; }
.nav-logo.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.nav-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }

.nav-portfolio {
  display: flex; align-items: center; gap: 8px; padding: 9px 20px;
  background: var(--gradient);
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  text-decoration: none; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(230,0,41,.3); transition: transform .3s, box-shadow .3s; white-space: nowrap;
}
.nav-portfolio:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(230,0,41,.5); }

.nav-lang {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.7) !important; -webkit-text-fill-color: rgba(255,255,255,.7) !important;
  text-decoration: none; border: 1.5px solid rgba(255,255,255,.25);
  padding: 7px 13px; border-radius: 4px; transition: all .3s; white-space: nowrap; background: transparent;
}
.nav-lang:hover {
  background: #fff; color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important; border-color: #fff;
}

/* ── HERO DESKTOP ── */
.hero { position: relative; background: #0e0e10; height: 100vh; min-height: 700px; }
.hero-stage {
  position: relative; height: 100vh; min-height: 700px;
  width: 100%; overflow: visible; background: #0e0e10;
  --split: 52; --lean: 14;
}
.hero-left {
  position: absolute; inset: 0; z-index: 2; background: #0e0e10;
  padding: 120px 80px 80px;
  display: flex; flex-direction: column; justify-content: center;
  clip-path: polygon(0 0, calc(var(--split)*1% + var(--lean)*1%) 0, calc(var(--split)*1% - var(--lean)*1%) 100%, 0 100%);
  transition: clip-path .15s linear;
}
body.dragging-divider .hero-left { transition: none; }
.hero-reel { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg,#18020a 0%,#0e0e10 70%); }
.hero-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.hero-reel-overlay { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(14,14,16,.3) 0%,rgba(14,14,16,.8) 80%); }
.hero-glow {
  position: absolute; z-index: 1; width: 60vw; height: 70vh; top: -10%; right: -20%;
  background: radial-gradient(ellipse at center, rgba(255,80,0,.22) 0%, transparent 60%);
  pointer-events: none; animation: glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.hero-left-content { position: relative; z-index: 2; max-width: 540px; }
.hero-logo-big { opacity: 0; animation: fadeUp .8s ease .1s forwards; margin-bottom: 52px; }
.hero-logo-big img { height: clamp(60px,14vw,90px); width: auto; object-fit: contain; display: block; }
.hero-sub {
  font-size: clamp(16px,1.4vw,20px); line-height: 1.65;
  color: rgba(255,255,255,.7); max-width: 460px; font-weight: 400;
  opacity: 0; animation: fadeUp .8s ease .3s forwards;
}
.hero-sub strong { color: #fff; font-weight: 700; white-space: nowrap; }
.hero-mobile, .hero-mobile-title { display: none; }
.hero-right {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg,#1a0507 0%,#0e0e10 60%);
  clip-path: polygon(calc(var(--split)*1% + var(--lean)*1%) 0, 100% 0, 100% 100%, calc(var(--split)*1% - var(--lean)*1%) 100%);
  transition: clip-path .15s linear;
  display: flex; align-items: center; justify-content: flex-end; overflow: visible;
}
body.dragging-divider .hero-right { transition: none; }
.hero-right-inner {
  position: relative; z-index: 2;
  margin-left: auto; margin-right: 6%;
  opacity: 0; animation: fadeUp .8s ease .5s forwards;
  width: auto; overflow: visible;
}

/* ── GEO CLUSTER ── */
.geo-cluster {
  position: relative; width: 540px; height: 540px;
  display: flex; align-items: center; justify-content: center; overflow: visible;
}
.geo-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.geo-lines line { stroke: rgba(230,0,41,.25); stroke-width: 1; stroke-dasharray: 4 8; animation: lineFlow 20s linear infinite; }
.geo-lines line:nth-child(2) { animation-delay: -6s; }
.geo-lines line:nth-child(3) { animation-delay: -12s; }
@keyframes lineFlow { to { stroke-dashoffset: -130; } }
.geo-cluster::before {
  content: ''; position: absolute; inset: -10%;
  background: radial-gradient(ellipse at 50% 55%, rgba(255,80,0,.18) 0%, transparent 58%);
  z-index: 0; pointer-events: none; animation: clusterPulse 5s ease-in-out infinite;
}
@keyframes clusterPulse { 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
.geo {
  position: absolute; z-index: 10;
  text-decoration: none; color: #fff;
  display: flex !important; flex-direction: column;
  align-items: center; gap: 12px; overflow: visible;
}
.geo--kz { top: 0; left: 50%; transform: translateX(-50%) translateY(-20px); width: 200px; }
.geo--uz { bottom: 20px; left: 0px; width: 170px; }
.geo--kg { bottom: 20px; right: 0px; width: 170px; }
.t-rec .geo-shape svg path.gs, .hero .geo-shape svg .gs, .geo-shape svg .gs {
  fill: none !important; stroke: #e60029 !important; stroke-width: 2.4 !important;
  vector-effect: non-scaling-stroke !important; opacity: 1 !important;
}
.t-rec .geo:hover .geo-shape svg path.gs, .hero .geo:hover .geo-shape svg .gs, .geo:hover .geo-shape svg .gs {
  stroke: #ff4400 !important; stroke-width: 3.6 !important; opacity: 1 !important;
}
.t-rec .geo:hover .geo-shape svg path.gf, .hero .geo:hover .geo-shape svg .gf, .geo:hover .geo-shape svg .gf {
  fill: #e60029 !important; opacity: 0.85 !important;
}
.t-rec svg { overflow: visible !important; }
.t-rec .geo-shape svg { display: block !important; opacity: 1 !important; visibility: visible !important; }
.geo-shape {
  position: relative;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: transform .6s cubic-bezier(.22,1,.36,1), filter .6s;
  z-index: 20; overflow: visible;
}
.geo--kz .geo-shape { width: 210px; height: 210px; animation: geoFloatKZ 5.5s ease-in-out infinite; }
.geo--uz .geo-shape { width: 210px; height: 210px; animation: geoFloatUZ 6.2s ease-in-out infinite; }
.geo--kg .geo-shape { width: 210px; height: 210px; animation: geoFloatKG 5s ease-in-out infinite; }
@keyframes geoFloatKZ { 0%,100%{ translate:0 0 } 33%{ translate:4px -12px } 66%{ translate:-4px -6px } }
@keyframes geoFloatUZ { 0%,100%{ translate:0 0 } 40%{ translate:-6px -10px } 75%{ translate:3px -4px } }
@keyframes geoFloatKG { 0%,100%{ translate:0 0 } 30%{ translate:5px -8px } 70%{ translate:-3px -14px } }
.geo-shape::after {
  content:''; position:absolute; inset:10%; z-index:0; border-radius:50%;
  background: radial-gradient(circle, rgba(255,80,0,.28) 0%, transparent 65%);
  animation: geoPulse 4s ease-in-out infinite; pointer-events:none;
}
.geo--uz .geo-shape::after { animation-delay: 1.5s; }
.geo--kg .geo-shape::after { animation-delay: 3s; }
@keyframes geoPulse { 0%,100%{ opacity:.3; transform:scale(.85) } 50%{ opacity:.95; transform:scale(1.12) } }
.geo-shape svg {
  position: relative; z-index: 25;
  width: 100%; height: 100%; display: block !important; overflow: visible;
  animation: geoRotate 60s linear infinite; opacity: 1 !important; visibility: visible !important;
}
.geo--uz .geo-shape svg { animation-direction: reverse; animation-duration: 50s; }
.geo--kg .geo-shape svg { animation-duration: 45s; }
@keyframes geoRotate { to { transform: rotate(360deg); } }
.geo-shape svg .gs {
  fill: none !important; stroke: #e60029 !important; stroke-width: 2.4 !important;
  vector-effect: non-scaling-stroke !important; stroke-linejoin: round !important;
  transition: stroke-width .4s, stroke .4s !important; opacity: 1 !important; display: block !important;
}
.geo-shape svg .gf { fill: url(#ezGrad) !important; opacity: 0 !important; transition: opacity .45s !important; }
.geo:hover .geo-shape { z-index: 50; transform: scale(1.14) rotate(-3deg); filter: drop-shadow(0 0 32px rgba(255,80,0,.6)) !important; }
.geo:hover .geo-shape svg .gs { stroke-width: 3.6 !important; stroke: url(#ezGrad) !important; opacity: 1 !important; }
.geo:hover .geo-shape svg .gf { opacity: .9 !important; }
.geo-code, .geo-full {
  position: absolute; inset: 0; z-index: 30;
  display: flex !important; align-items: center; justify-content: center;
  text-align: center; line-height: 1; color: #fff !important; pointer-events: none;
  transition: opacity .35s, transform .5s cubic-bezier(.22,1,.36,1);
  font-family: var(--font-main) !important;
}
.geo-code {
  font-size: 40px !important; font-weight: 900 !important; letter-spacing: 1px !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.55) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
.geo-full {
  font-size: 25px !important; font-weight: 800 !important; letter-spacing: -.3px !important;
  opacity: 0; transform: scale(.88); padding: 0 14px;
  text-shadow: 0 2px 12px rgba(0,0,0,.55) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
.geo:hover .geo-code { opacity: 0; transform: scale(1.15); }
.geo:hover .geo-full { opacity: 1; transform: scale(1); }
.geo-go {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex !important; align-items: center; justify-content: center; font-size: 14px;
  opacity: 0; transform: scale(.5) translateY(10px);
  transition: opacity .4s, transform .5s cubic-bezier(.22,1,.36,1), background .3s, color .3s;
  color: rgba(255,255,255,.5) !important; -webkit-text-fill-color: rgba(255,255,255,.5) !important;
}
.geo:hover .geo-go {
  opacity: 1; transform: scale(1) translateY(13px);
  background: #fff !important; color: var(--red) !important; -webkit-text-fill-color: var(--red) !important;
}
.geo-orb {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gradient); opacity: 0; pointer-events: none;
  transition: opacity .4s; box-shadow: 0 0 8px rgba(255,80,0,.8);
}
.geo:hover .geo-orb { opacity: 1; }
.geo-orb-1 { animation: orbOrbit1 2s linear infinite; top: 50%; left: 50%; }
.geo-orb-2 { animation: orbOrbit2 2.8s linear infinite; top: 50%; left: 50%; }
.geo-orb-3 { animation: orbOrbit3 3.4s linear infinite; top: 50%; left: 50%; }
@keyframes orbOrbit1 {
  from { transform: translate(-50%,-50%) rotate(0deg) translateX(var(--orb-r,90px)) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg) translateX(var(--orb-r,90px)) rotate(-360deg); }
}
@keyframes orbOrbit2 {
  from { transform: translate(-50%,-50%) rotate(120deg) translateX(var(--orb-r,90px)) rotate(-120deg); }
  to   { transform: translate(-50%,-50%) rotate(480deg) translateX(var(--orb-r,90px)) rotate(-480deg); }
}
@keyframes orbOrbit3 {
  from { transform: translate(-50%,-50%) rotate(240deg) translateX(var(--orb-r,90px)) rotate(-240deg); }
  to   { transform: translate(-50%,-50%) rotate(600deg) translateX(var(--orb-r,90px)) rotate(-600deg); }
}
.geo--kz .geo-orb { --orb-r: 105px; }
.geo--uz .geo-orb, .geo--kg .geo-orb { --orb-r: 85px; }

/* ── DIVIDER ── */
.hero-divider-svg { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.hero-divider-line {
  stroke: rgba(255,255,255,.22) !important; stroke-width: 1 !important; stroke-dasharray: 3 6 !important;
  transition: stroke .3s, stroke-width .3s; vector-effect: non-scaling-stroke;
}
.hero-stage:hover .hero-divider-line { stroke: rgba(255,255,255,.35); }
body.dragging-divider .hero-divider-line { stroke: rgba(230,0,41,.85) !important; stroke-dasharray: none !important; stroke-width: 2 !important; }
.hero-divider-handle {
  position: absolute; top: 50%; left: calc(var(--split)*1%);
  transform: translate(-50%,-50%); width: 48px; height: 48px; z-index: 4;
  background: rgba(14,14,16,.55); backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,.25); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; touch-action: none;
  transition: background .3s, border-color .3s, box-shadow .3s, transform .35s cubic-bezier(.22,1,.36,1);
}
body.dragging-divider .hero-divider-handle { transition: none; }
.hero-divider-handle .handle-symbol {
  width: 26px; height: 26px; object-fit: contain; opacity: .75;
  transition: opacity .3s, transform .35s cubic-bezier(.22,1,.36,1);
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.hero-divider-handle:hover {
  background: rgba(230,0,41,.12); border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(230,0,41,.18), 0 8px 24px rgba(230,0,41,.3);
  transform: translate(-50%,-50%) scale(1.1);
}
.hero-divider-handle:hover .handle-symbol { opacity: 1; transform: rotate(30deg); }
body.dragging-divider .hero-divider-handle {
  background: var(--red); border-color: rgba(255,255,255,.6);
  box-shadow: 0 8px 32px rgba(230,0,41,.55); transform: translate(-50%,-50%) scale(.9);
}
body.dragging-divider .hero-divider-handle .handle-symbol {
  opacity: .9; filter: brightness(0) invert(1); animation: handleSpin .8s linear infinite;
}
@keyframes handleSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.hero-divider-hint {
  position: absolute; top: calc(50% + 40px); left: calc(var(--split)*1%);
  transform: translateX(-50%); z-index: 4;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.4); white-space: nowrap; pointer-events: none;
  transition: opacity .4s; opacity: 1;
}
body.dragging-divider .hero-divider-hint { opacity: 0; }
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

/* ── COUNTRIES SECTION ── */
.countries-section { background: #fff; padding: 0; }
.cs-header {
  max-width: 1280px; margin: 0 auto;
  padding: 90px 72px 0;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
}
.sec-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--red); display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.sec-tag::before { content:''; width:18px; height:1.5px; background: var(--red); }
.sec-h2 {
  font-size: clamp(32px,3.4vw,52px); font-weight: 900;
  letter-spacing: -1px; line-height: 1; overflow: visible;
}
.sec-h2 em {
  font-style: italic; font-weight: 300;
  background: var(--gradient); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
  display: inline-block; padding: 0 0.06em 0.05em 0;
}
.cs-header-hint { font-size: 14px; color: var(--ink-soft); max-width: 260px; line-height: 1.6; text-align: right; white-space: pre-line; }

.rg-grid {
  max-width: 1280px; margin: 0 auto;
  padding: 48px 72px 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.rg-card {
  position: relative; text-decoration: none; color: var(--ink);
  border: 1px solid var(--ink-line); border-radius: 24px;
  padding: 44px 30px 34px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  background: #fff; overflow: hidden;
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s, border-color .4s;
}
.rg-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--gradient); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.rg-card:hover::before { transform: scaleX(1); }
.rg-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(27,28,32,.10), 0 0 0 1px var(--red);
  border-color: transparent;
}
.rg-badge {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: #fff; background: var(--gradient); padding: 4px 12px; border-radius: 100px;
  white-space: nowrap; box-shadow: 0 4px 12px rgba(230,0,41,.3);
}
.rg-flag {
  width: 96px; height: 72px; margin: 8px 0 24px; border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
}
.rg-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-card:hover .rg-flag { transform: scale(1.08) rotate(-4deg); box-shadow: 0 18px 38px rgba(0,0,0,.22); }
.rg-name {
  font-size: clamp(26px, 2.4vw, 34px); font-weight: 900; letter-spacing: -1px; line-height: 1; margin-bottom: 6px;
  color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important;
}
.rg-city {
  font-size: 13px; font-weight: 500; color: var(--ink-soft) !important; margin-bottom: 22px;
  -webkit-text-fill-color: var(--ink-soft) !important;
}
.rg-tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 26px; }
.rg-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .4px;
  padding: 5px 12px; border-radius: 100px; border: 1px solid var(--ink-line);
  color: var(--ink-soft) !important; white-space: nowrap;
  transition: border-color .3s, color .3s, background .3s;
  -webkit-text-fill-color: var(--ink-soft) !important;
}
.rg-card:hover .rg-tag {
  border-color: rgba(230,0,41,.3); color: var(--red) !important;
  background: rgba(230,0,41,.04); -webkit-text-fill-color: var(--red) !important;
}
.rg-arrow {
  margin-top: auto; width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink-line); color: var(--ink) !important;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  transition: all .45s cubic-bezier(.22,1,.36,1); -webkit-text-fill-color: var(--ink) !important;
}
.rg-card:hover .rg-arrow {
  background: var(--red) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  transform: rotate(-45deg) scale(1.08); box-shadow: 0 6px 20px rgba(230,0,41,.35);
}

/* ── PORTFOLIO BAND ── */
.port-band { max-width: 1280px; margin: 64px auto 0; padding: 0 72px 90px; }
.port-band-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 32px; background: var(--ink); border-radius: 14px; flex-wrap: wrap;
}
.port-band-text { font-size: 14px; color: rgba(255,255,255,.55) !important; font-weight: 500; -webkit-text-fill-color: rgba(255,255,255,.55) !important; }
.port-band-text strong { color: #fff !important; font-weight: 700; -webkit-text-fill-color: #fff !important; }
.port-band-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px; background: var(--gradient); color: #fff !important;
  border-radius: 100px; text-decoration: none;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(230,0,41,.35); transition: transform .3s, box-shadow .3s; white-space: nowrap;
  -webkit-text-fill-color: #fff !important;
}
.port-band-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(230,0,41,.5); }
.pbi { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 9px; }

/* ── MARQUEE ── */
.mq-section { position: relative; background: var(--ink); overflow: hidden; padding: 0; }
.mq-accent-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient); }
.mq-inner { overflow: hidden; }
.mq-track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.mq-track { display: flex; align-items: center; white-space: nowrap; padding: 28px 0; animation: mqScroll 28s linear infinite; width: max-content; }
.mq-track:hover { animation-play-state: paused; }
@keyframes mqScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq-item { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mq-num {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; letter-spacing: -0.5px;
  background: var(--gradient) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important; line-height: 1;
}
.mq-lbl {
  font-size: clamp(11px, 1.1vw, 14px); font-weight: 600; letter-spacing: 0.3px;
  color: rgba(255,255,255,.55) !important; text-transform: uppercase; white-space: nowrap;
  -webkit-text-fill-color: rgba(255,255,255,.55) !important;
}
.mq-shape { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin: 0 28px !important; line-height: 1 !important; }
.mq-shape svg { display: block !important; width: 14px !important; height: 14px !important; }

/* ── FOOTER ── */
footer { background: var(--ink); color: #fff; padding: 70px 72px 0; }
.f-grid { display: grid; grid-template-columns: 1.8fr 1.2fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.07); }
.f-logo-wrap { height: 48px; margin-bottom: 14px; }
.f-logo-wrap img { height: 100%; width: auto; max-width: 180px; object-fit: contain; }
.f-tag { font-size: 12px; opacity: .4; letter-spacing: .5px; line-height: 1.6; margin-bottom: 20px; }
.f-col h4 { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--red) !important; -webkit-text-fill-color: var(--red) !important; margin-bottom: 16px; }
.f-col a { display: block; color: #fff !important; text-decoration: none; font-size: 14px; padding: 4px 0; opacity: .5; transition: opacity .25s, transform .2s; -webkit-text-fill-color: #fff !important; }
.f-col a:hover { opacity: 1; transform: translateX(4px); }
.f-bot { display: flex; justify-content: space-between; align-items: center; font-size: 10px; opacity: .3; letter-spacing: 1px; text-transform: uppercase; padding: 24px 0; }

/* ── REVEAL ── */
.rv { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.rv.on { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════
   TABLET ≤ 1024px
   ══════════════════════════════════════════════════ */
@media(max-width: 1024px) {
  .hero { height: auto; min-height: 100vh; min-height: 100svh; }
  .hero-stage { position: relative; height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: 0; }
  .hero-left { position: relative; inset: auto; clip-path: none; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 110px 36px 56px; }
  .hero-left-content { max-width: 600px; width: 100%; }
  .hero-right { display: none; }
  .hero-sub { display: none; }
  .hero-reel video { display: block; }
  .hero-mobile .hero-logo-big {
  display: block !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  margin-bottom: 24px !important;
  animation: fadeUp .8s ease .1s forwards !important;
}

/* Скрыть лого вне hero-mobile */
.hero-left-content > .hero-logo-big {
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}

.hero-title-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  margin: 0;
  vertical-align: middle;
  line-height: 0;
}

.hero-mobile .hero-logo-big img {
  height: 56px !important;
}
  .hero-divider-svg, .hero-divider-handle, .hero-divider-hint { display: none; }

  .hero-mobile { display: block; max-width: 600px; }
  .hero-mobile-title {
    display: block; color: #fff; font-weight: 900;
    font-size: clamp(34px,9vw,56px); line-height: 1.3; letter-spacing: -1.5px;
    margin-bottom: 18px; opacity: 0; animation: fadeUp .8s ease .25s forwards;
  }
  .hero-mobile-title em {
    font-style: italic; font-weight: 300;
    background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  
  .hero-mobile-title em {
  display: inline-block !important;
  line-height: 1.3 !important;
  padding-bottom: 0.1em !important;
  margin-bottom: -0.1em !important;
}
  .hero-mobile-sub {
    font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.7); font-weight: 500;
    margin-bottom: 34px; max-width: 460px; opacity: 0; animation: fadeUp .8s ease .4s forwards;
  }
  
  .hero-title-accent {
  font-style: italic;
  font-weight: 300;
  color: #ff4400 !important;
  -webkit-text-fill-color: #ff4400 !important;
}

.hero-title-svg {
  display: block;
  width: 100%;
  height: 0.95em;
  overflow: visible;
  margin: -0.1em 0;
}
  /* ── HERO STATS ── */
  .hmc-stats {
    display: flex;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(135deg, rgba(255,111,0,.06) 0%, rgba(230,0,41,.04) 100%);
    border-radius: 20px; overflow: hidden; margin-bottom: 22px;
    position: relative;
    box-shadow: 0 10px 40px rgba(230,0,41,.08), inset 0 1px 0 rgba(255,255,255,.06);
    opacity: 0; animation: fadeUp .8s ease .55s forwards;
  }
  .hmc-stats::before {
    content: ''; position: absolute; inset: -40% -10%;
    background: radial-gradient(ellipse at center, rgba(255,80,0,.18) 0%, transparent 60%);
    pointer-events: none; z-index: 0; animation: hmcGlow 4s ease-in-out infinite;
  }
  @keyframes hmcGlow { 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
  .hmc-stat { flex: 1; padding: 22px 8px; text-align: center; position: relative; z-index: 1; }
  .hmc-stat + .hmc-stat { border-left: 1px solid rgba(255,255,255,.08); }
  .hmc-n {
    display: block;
    background: var(--gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    font-size: clamp(24px,7vw,34px); font-weight: 900; letter-spacing: -.5px; line-height: 1;
    filter: drop-shadow(0 0 12px rgba(255,80,0,.4));
    transition: transform .4s cubic-bezier(.22,1,.36,1);
  }
  .hmc-stat:hover .hmc-n, .hmc-stat:active .hmc-n { transform: scale(1.1); }
  .hmc-l {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: 1px;
    text-transform: uppercase; color: rgba(255,255,255,.55) !important;
    -webkit-text-fill-color: rgba(255,255,255,.55) !important; margin-top: 8px;
  }
  .hmc-stat::after {
    content: ''; display: block; width: 20px; height: 1px;
    background: var(--gradient); margin: 8px auto 0; opacity: .4;
    transition: width .3s, opacity .3s;
  }
  .hmc-stat:hover::after { width: 36px; opacity: .8; }
  .hmc-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 18px; text-decoration: none;
    background: var(--gradient); color: #fff !important;
    border-radius: 100px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(230,0,41,.32); transition: transform .3s, box-shadow .3s;
    opacity: 0; animation: fadeUp .8s ease .7s forwards;
    -webkit-text-fill-color: #fff !important;
  }
  .hmc-btn:active { transform: scale(.98); }

  .cs-header { padding: 64px 40px 0; gap: 24px; }
  .rg-grid { padding: 40px 40px 0; gap: 18px; }
  .port-band { padding: 0 40px 64px; margin-top: 48px; }
}
/* ── конец @media 1024 ── */

/* ══════════════════════════════════════════════════
   PHONE ≤ 640px
   ══════════════════════════════════════════════════ */
@media(max-width: 640px) {
  /* NAV */
  .ez-nav { padding: 0 20px; height: 64px; }
  .ez-nav.scrolled { height: 56px; }
  .nav-portfolio { display: none; }
  .nav-logo img { height: 36px; }

  /* HERO */
  .hero-left { padding: 96px 20px 40px; }
  .hero-mobile .hero-logo-big {
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin-bottom: 24px !important;
    animation: fadeUp .8s ease .1s forwards !important;
  }
  .hero-mobile {
  overflow: visible !important;
  padding-bottom: 8px !important;
}
  
  .hero-mobile .hero-logo-big img {
  height: 48px !important;
}

  .hero-mobile-title {
  font-size: clamp(22px, 7vw, 36px) !important;
  letter-spacing: -.5px !important;
  line-height: 1.45 !important;
  margin-bottom: 16px;
  overflow: visible !important;
}
  .hero-mobile-title em { white-space: nowrap !important; display: inline !important; padding-bottom: 0.15em !important; }
  .hero-mobile-sub { font-size: 14px; margin-bottom: 28px; }
  .hmc-stat { padding: 17px 6px !important; }
  .hmc-n { font-size: clamp(22px,7.5vw,30px) !important; }
  .hmc-l { font-size: 9px !important; }
  .hmc-btn { padding: 16px; }

  /* CS-HEADER */
  .cs-header { padding: 56px 20px 0; flex-direction: column; align-items: flex-start; gap: 12px; }
  .cs-header-hint { text-align: left; max-width: 100%; font-size: 13px; }
  .sec-h2 { font-size: 32px; }

  /* Контейнер — padding-bottom большой чтобы скролл был длинным
     и эффект был заметен на каждой карточке */
  .rg-grid {
    padding: 16px 16px 10px !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    position: relative !important;
    max-width: 100% !important;
  }

  /* ── Карточка — высокая, как hero-country-card ── */
  .rg-card {
    position: sticky !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
    text-align: left !important;
    padding: 22px 20px 20px !important;
    border-radius: 20px !important;
    min-height: auto !important;
    overflow: hidden !important;
    transform-origin: top center !important;
    will-change: transform, filter !important;
    margin-bottom: 16px !important;
    background: #fff !important;
    box-shadow:
      0 2px 0 rgba(0,0,0,.04),
      0 8px 24px rgba(27,28,32,.08) !important;
    border: 1px solid rgba(27,28,32,.07) !important;
  }

  /* Большой gap — чтобы каждая карточка была хорошо видна
     перед тем как следующая начнёт её перекрывать */
  .rg-card:nth-child(1) { top: 68px; z-index: 1; }
  .rg-card:nth-child(2) { top: 100px; z-index: 2; }
  .rg-card:nth-child(3) { top: 132px; z-index: 3; }

  /* Градиентная полоска сверху — всегда */
  .rg-card::before {
    display: none !important;
  }
  
  .rg-card {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── ROW 1: бейдж (только для KZ) ── */
  .rg-badge {
    position: static !important;
    transform: none !important;
    font-size: 8px !important;
    padding: 3px 10px !important;
    margin-bottom: 14px !important;
    display: inline-flex !important;
    align-self: flex-start !important;
  }

  .rg-card:not(:has(.rg-badge)) .rg-flag {
    margin-top: 0 !important;
  }

  /* ── ROW 2: флаг ── */
  .rg-flag {
    width: 52px !important;
    height: 39px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.14) !important;
    flex-shrink: 0 !important;
  }

  /* ── ROW 3: название + город ── */
  .rg-name {
    font-size: 26px !important;
    letter-spacing: -0.8px !important;
    margin: 0 !important;
    line-height: 1 !important;
    flex: 1 !important;
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink) !important;
  }
  
  
  .rg-city {
    font-size: 12px !important;
    margin: 4px 0 14px !important;
    color: var(--ink-soft) !important;
    -webkit-text-fill-color: var(--ink-soft) !important;
  }
  
  .rg-card {
    flex-direction: column !important;
  }
  
  .rg-badge { order: 0 !important; }
  .rg-flag  { order: 1 !important; margin-bottom: 12px !important; }
  .rg-name  { order: 2 !important; }
  .rg-city  { order: 3 !important; }
  .rg-tags  { order: 4 !important; }
  .rg-arrow { order: 5 !important; }

  /* ── ROW 4: теги — показываем на мобилке ── */
  .rg-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 18px !important;
    justify-content: flex-start !important;
  }
  
  .rg-tag {
    font-size: 10px !important;
    padding: 4px 10px !important;
    border: 1px solid var(--ink-line) !important;
    color: var(--ink-soft) !important;
    -webkit-text-fill-color: var(--ink-soft) !important;
  }

  /* ── Стрелка — правый нижний угол ── */
  .rg-arrow {
      position: absolute !important;
      right: 20px !important;
      top: 22px !important;
      width: 40px !important;
      height: 40px !important;
      min-width: 40px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 16px !important;
      line-height: 40px !important;
      text-align: center !important;
      background: rgba(27,28,32,.10) !important;
      border-radius: 50% !important;
      color: var(--ink) !important;
      -webkit-text-fill-color: var(--ink) !important;
      flex-shrink: 0 !important;
    }
  
  
  .rg-card .rg-flag,
  .rg-card .rg-name,
  .rg-card .rg-arrow {
    display: block !important;
  }

  .rg-card:hover {
    transform: none !important;
    box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 8px 24px rgba(27,28,32,.08) !important;
    border-color: rgba(27,28,32,.07) !important;
  }
  
  
  .rg-card:hover::before { transform: scaleX(1) !important; }
  .rg-card:hover .rg-flag { transform: none !important; }
  .rg-card:hover .rg-arrow {
    transform: none !important;
    background: rgba(27,28,32,.06) !important;
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink) !important;
    box-shadow: none !important;
  }
  .rg-card:hover .rg-tag {
    border-color: var(--ink-line) !important;
    color: var(--ink-soft) !important;
    -webkit-text-fill-color: var(--ink-soft) !important;
    background: transparent !important;
  }
  .rg-card:hover::before { display: none !important; }

  /* Port-band — прижимаем к карточкам */
  .port-band {
    padding: 0 16px 56px !important;
    margin-top: 12px !important;
  }
  .port-band-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 22px !important;
    gap: 14px !important;
  }
  .port-band-text { font-size: 13px !important; }


  /* FOOTER */
  footer { padding: 50px 20px 0; }
  .f-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 28px; }
  .f-bot { flex-direction: column; gap: 8px; text-align: center; padding: 18px 0; }

  /* MARQUEE */
  .mq-track { padding: 22px 0; }
  .mq-num { font-size: 20px !important; }
  .mq-lbl { font-size: 10px !important; }
  .mq-shape { margin: 0 18px !important; }

  /* CURSOR OFF */
  body { cursor: auto; }
  *, *::before, *::after { cursor: auto !important; }
  a, button, [role="button"], label, select, input, textarea { cursor: pointer !important; }
  #cur { display: none; }
}
/* ── конец @media 640 ── */

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion: reduce) {
  .geo-shape, .geo--kz .geo-shape, .geo--uz .geo-shape, .geo--kg .geo-shape { animation: none; }
  .geo-shape::after { animation: none; }
  .geo-orb { animation: none; }
}