:root { --a: #4D9FFF; --dim: 0.85; --globe: 0.95; --gh: 62vh; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #050607; color: #F2F4F7; font-family: "Instrument Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; transition: color .25s ease, opacity .25s ease; }
a:hover { color: var(--a); }
::selection { background: var(--a); color: #050607; }

@keyframes gtfade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes gtdrift1 { 0% { transform: translate(-14%,-8%) scale(1); } 25% { transform: translate(12%,6%) scale(1.22); } 50% { transform: translate(22%,18%) scale(0.95); } 75% { transform: translate(-6%,10%) scale(1.15); } 100% { transform: translate(-14%,-8%) scale(1); } }
@keyframes gtdrift2 { 0% { transform: translate(22%,12%) scale(1.15); } 30% { transform: translate(-4%,-16%) scale(0.88); } 60% { transform: translate(-22%,4%) scale(1.28); } 100% { transform: translate(22%,12%) scale(1.15); } }
@keyframes gtdrift3 { 0% { transform: translate(6%,24%) scale(0.95); } 35% { transform: translate(-18%,-2%) scale(1.3); } 70% { transform: translate(14%,-18%) scale(1.05); } 100% { transform: translate(6%,24%) scale(0.95); } }
@keyframes gtdrift4 { 0% { transform: translate(-24%,16%) scale(1.1); } 40% { transform: translate(16%,-12%) scale(0.85); } 75% { transform: translate(4%,20%) scale(1.24); } 100% { transform: translate(-24%,16%) scale(1.1); } }
@keyframes gtdrift5 { 0% { transform: translate(28%,-14%) scale(0.9); } 50% { transform: translate(-20%,18%) scale(1.32); } 100% { transform: translate(28%,-14%) scale(0.9); } }
@keyframes gtswirl { from { transform: rotate(0deg) scale(1.18); } to { transform: rotate(360deg) scale(1.18); } }
@keyframes gtbreathe { 0% { opacity: .78; } 50% { opacity: 1; } 100% { opacity: .78; } }

.page { position: relative; min-height: 100vh; }

.bg-fixed { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #050607; }
.bg-blobs { position: absolute; inset: -25%; opacity: var(--dim); filter: blur(58px); mix-blend-mode: screen; animation: gtswirl 120s linear infinite; }
.blob1 { position: absolute; top: 4%; left: 6%; width: 60%; height: 60%; border-radius: 50%; background: radial-gradient(circle, var(--a) 0%, rgba(77,159,255,0) 68%); animation: gtdrift1 19s ease-in-out infinite, gtbreathe 11s ease-in-out infinite; }
.blob2 { position: absolute; top: 24%; left: 32%; width: 54%; height: 58%; border-radius: 50%; background: radial-gradient(circle, #2E6BFF 0%, rgba(46,107,255,0) 66%); animation: gtdrift2 24s ease-in-out infinite, gtbreathe 15s ease-in-out infinite; }
.blob3 { position: absolute; top: -2%; left: 40%; width: 46%; height: 52%; border-radius: 50%; background: radial-gradient(circle, #8FC4FF 0%, rgba(143,196,255,0) 64%); animation: gtdrift3 29s ease-in-out infinite, gtbreathe 9s ease-in-out infinite; }
.blob4 { position: absolute; top: 34%; left: 2%; width: 44%; height: 46%; border-radius: 50%; background: radial-gradient(circle, #1B4BD6 0%, rgba(27,75,214,0) 66%); animation: gtdrift4 34s ease-in-out infinite, gtbreathe 13s ease-in-out infinite; }
.blob5 { position: absolute; top: 12%; left: 54%; width: 38%; height: 42%; border-radius: 50%; background: radial-gradient(circle, #CFE4FF 0%, rgba(207,228,255,0) 62%); animation: gtdrift5 22s ease-in-out infinite, gtbreathe 17s ease-in-out infinite; }

.globe-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.globe-video {
  height: var(--gh); width: auto; min-width: 62vh; object-fit: cover; opacity: var(--globe);
  mix-blend-mode: screen; filter: grayscale(1) sepia(1) saturate(8) hue-rotate(178deg) brightness(1.55) contrast(1.2);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 6%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0.35) 94%, rgba(0,0,0,0) 100%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 6%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0.35) 94%, rgba(0,0,0,0) 100%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}
.bg-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,7,0) 0%, rgba(5,6,7,0.1) 45%, rgba(5,6,7,0.45) 80%, rgba(5,6,7,0.78) 100%); }

header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 4vw, 56px); }
.logo { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.14em; font-weight: 500; color: #F2F4F7; }
.nav-pill { display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(14,16,19,0.5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.08); }
.nav-pill a { padding: 8px 18px; border-radius: 999px; font-size: 13px; letter-spacing: 0.02em; color: rgba(242,244,247,0.7); }
.nav-pill a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-email { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em; padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(14,16,19,0.5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: rgba(242,244,247,0.8); }
.nav-email:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.desktop-nav { display: flex; align-items: center; gap: 16px; }
.menu-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(14,16,19,0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); cursor: pointer; }
.menu-btn span { display: block; height: 1.5px; width: 100%; background: #F2F4F7; }

.mobile-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(5,6,7,0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: none; flex-direction: column; padding: 22px 24px 40px; animation: gtfade .3s ease both; }
.mobile-overlay.open { display: flex; }
.mobile-overlay-top { display: flex; align-items: center; justify-content: space-between; }
.mobile-overlay-close { width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: transparent; color: #F2F4F7; font-size: 22px; line-height: 1; cursor: pointer; }
.mobile-nav { margin-top: auto; margin-bottom: auto; display: flex; flex-direction: column; gap: 4px; }
.mobile-nav a { padding: 14px 0; font-size: 42px; letter-spacing: -0.035em; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.1); }
.mobile-email { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em; padding: 16px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); text-align: center; color: rgba(242,244,247,0.85); }

main { position: relative; z-index: 10; }
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 140px clamp(20px, 4vw, 56px) 80px; }
.hero-inner { max-width: 1500px; width: 100%; margin: 0 auto; }
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.2em; color: rgba(242,244,247,0.5); margin-bottom: clamp(28px, 5vh, 56px); animation: gtfade .8s ease both; }
h1 { margin: 0; font-size: clamp(52px, 11.5vw, 200px); line-height: 0.88; letter-spacing: -0.045em; font-weight: 500; text-wrap: balance; animation: gtfade 1s ease .05s both; }
.hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: clamp(40px, 7vh, 90px); animation: gtfade 1s ease .2s both; }
.hero-buttons { display: flex; gap: 10px; }
.btn-primary { padding: 13px 26px; border-radius: 999px; background: #F2F4F7; color: #050607; font-size: 14px; font-weight: 500; }
.btn-primary:hover { background: var(--a); color: #050607; }
.btn-ghost { padding: 13px 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); font-size: 14px; color: rgba(242,244,247,0.85); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.45); color: #fff; }

section.block { padding: clamp(90px, 16vh, 190px) clamp(20px, 4vw, 56px); border-top: 1px solid rgba(255,255,255,0.07); }
.block-inner { max-width: 1500px; margin: 0 auto; display: grid; gap: 40px; }
.section-tag { display: flex; align-items: baseline; gap: 18px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.2em; color: rgba(242,244,247,0.75); }
.section-tag .num { color: #F2F4F7; }
h2 { margin: 0; font-size: clamp(34px, 5.6vw, 96px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 500; max-width: 20ch; text-wrap: balance; }

#where { padding-left: 0; padding-right: 0; }
.where-head { max-width: 1500px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); display: grid; gap: 40px; }
.counter-wrap { max-width: 1500px; margin: clamp(56px, 9vh, 100px) auto 0; padding: 0 clamp(20px, 4vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: start; }
.counter-panel { justify-self: end; width: 100%; max-width: 460px; }
.counter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: 14px; margin-bottom: 20px; }
.counter-num { font-size: clamp(46px, 5vw, 72px); line-height: 1; letter-spacing: -0.04em; font-weight: 500; font-variant-numeric: tabular-nums; }
.counter-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; color: rgba(242,244,247,0.5); text-align: right; line-height: 1.6; }
.city-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.city-row { opacity: 0; transform: translateY(6px); transition: opacity 500ms ease, transform 500ms ease; display: flex; align-items: baseline; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(242,244,247,0.88); }
.city-row.on { opacity: 1; transform: none; }
.city-row .code { color: rgba(242,244,247,0.55); flex: 0 0 auto; }

#contact { padding-bottom: 48px; }
.contact-inner { max-width: 1500px; margin: 0 auto; display: grid; gap: clamp(48px, 9vh, 100px); }
.contact-block { display: grid; gap: 28px; }
.contact-kicker { font-family: 'JetBrains Mono', monospace; font-size: clamp(11px, 1.1vw, 14px); letter-spacing: 0.18em; color: rgba(242,244,247,0.6); }
.contact-email { font-size: clamp(38px, 9vw, 150px); line-height: 0.9; letter-spacing: -0.05em; font-weight: 500; word-break: break-word; }
.contact-email:hover { color: var(--a); }
.footer-bar { display: flex; flex-wrap: wrap; gap: 28px 60px; justify-content: space-between; align-items: flex-end; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.12); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: rgba(242,244,247,0.5); }
.footer-bar .brand { color: rgba(242,244,247,0.75); }

.top-btn { position: fixed; right: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 40px); z-index: 55; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: rgba(14,16,19,0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: rgba(242,244,247,0.85); font-size: 18px; line-height: 1; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease, border-color .25s ease; }
.top-btn.show { opacity: 1; pointer-events: auto; transform: none; }
.top-btn:hover { border-color: rgba(255,255,255,0.45); color: #fff; }

@media (max-width: 820px) {
  .desktop-nav { display: none; }
  .menu-btn { display: flex; }
}