:root{
  --bg0:#071a22;
  --bg1:#0b2631;
  --glass: rgba(14, 40, 52, .42);
  --glass2: rgba(14, 40, 52, .22);
  --stroke: rgba(185, 246, 255, .16);
  --text: rgba(231, 252, 255, .92);
  --muted: rgba(231, 252, 255, .70);
  --btn: rgba(10, 34, 45, .62);
  --btn2: rgba(10, 34, 45, .34);
  --shadow: 0 28px 80px rgba(0,0,0,.45);
  --radius: 22px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 70% 40%, #12414b 0%, var(--bg0) 55%, #041015 100%);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

.page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(16px, 3vw, 36px);
}

.shell{
  width:min(1180px, 100%);
  position:relative;
}

.hero{
  position:relative;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(900px 460px at 60% 40%, rgba(42, 225, 255, .10), rgba(0,0,0,0) 60%),
    radial-gradient(700px 420px at 35% 45%, rgba(42, 225, 255, .12), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("assets/hero.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.03);
  opacity: .90;
}

.hero::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 520px at 70% 35%, rgba(170, 255, 245, .22), rgba(0,0,0,0) 55%),
    radial-gradient(700px 420px at 35% 60%, rgba(18, 149, 170, .22), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.55));
  pointer-events:none;
}

.hero-inner{
  position:relative;
  padding: clamp(18px, 3.6vw, 42px);
  min-height: clamp(520px, 62vh, 680px);
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.brand{
  display:flex;
  align-items:flex-start;
  gap: 10px;
}

.brand-mark{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, rgba(160,255,255,.95), rgba(54, 200, 214, .35) 55%, rgba(6, 24, 32, .1));
  border: 1px solid rgba(185, 246, 255, .22);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.brand-text{
  line-height:1.05;
}
.brand-text .name{
  font-weight: 760;
  letter-spacing: .3px;
  font-size: 28px;
}
.brand-text .sub{
  font-weight: 680;
  letter-spacing: 3px;
  font-size: 12px;
  opacity:.78;
  margin-top: 4px;
}

.nav{
  display:flex;
  align-items:center;
  gap: 22px;
}

.nav a{
  font-weight: 560;
  font-size: 14px;
  opacity:.82;
}
.nav a:hover{ opacity:1; }

.lang{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(185, 246, 255, .16);
  background: rgba(10, 34, 45, .28);
  backdrop-filter: blur(8px);
}

.lang select{
  background: transparent;
  color: var(--text);
  border: none;
  outline: none;
  font-weight: 650;
  letter-spacing:.4px;
  cursor:pointer;
}
.lang select option{ color:#06212b; }

.content{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top: clamp(22px, 5vh, 52px);
}

.center{
  width: min(760px, 100%);
  text-align:center;
  position:relative;
  z-index:2;
}

.h1{
  margin: 0 auto;
  font-weight: 780;
  letter-spacing: .2px;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.06;
  text-shadow: 0 22px 55px rgba(0,0,0,.55);
}

.subline{
  margin: 16px auto 0;
  max-width: 56ch;
  font-size: clamp(14px, 1.55vw, 18px);
  color: var(--muted);
  line-height: 1.6;
}

.cta{
  margin-top: clamp(20px, 3.4vw, 34px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  flex-wrap:wrap;
}

.btn{
  border: 1px solid rgba(185, 246, 255, .20);
  background: linear-gradient(180deg, rgba(19, 60, 74, .50), rgba(9, 30, 38, .42));
  color: var(--text);
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 720;
  letter-spacing:.2px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  min-width: 168px;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(185, 246, 255, .34);
  background: linear-gradient(180deg, rgba(31, 94, 112, .56), rgba(9, 30, 38, .38));
}
.btn.secondary{
  background: linear-gradient(180deg, rgba(12, 38, 48, .38), rgba(9, 30, 38, .25));
  border-color: rgba(185, 246, 255, .14);
  opacity:.92;
}

.globe-stage{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:1;
}

.globe{
  width: clamp(280px, 42vw, 430px);
  aspect-ratio: 1;
  position:relative;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.55));
}

.globe svg{
  width:100%;
  height:100%;
  display:block;
}

.orbit{
  position:absolute;
  inset: -8%;
  border-radius: 999px;
  opacity:.9;
  transform-origin: 50% 50%;
  animation: spin 12s linear infinite;
}
.orbit.slow{ animation-duration: 18s; opacity:.7;}
.orbit.fast{ animation-duration: 9.5s; opacity:.85;}

.orbit .plane{
  position:absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%) translateX(calc(var(--r) * 1px)) rotate(12deg);
  color: rgba(215, 255, 255, .88);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

.orbit .trail{
  position:absolute;
  inset:0;
  border-radius:999px;
  border: 1px solid rgba(185, 246, 255, .16);
  background: radial-gradient(circle at 50% 50%, rgba(185,246,255,.07), rgba(0,0,0,0) 55%);
  mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,1) 59%);
}

@keyframes spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.sections{
  position:relative;
  margin-top: 14px;
  display:none;
}

.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index:50;
}
.modal{
  width:min(560px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(185, 246, 255, .18);
  background: rgba(9, 30, 38, .82);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  padding: 18px 18px 14px;
}
.modal .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.modal h3{
  margin: 0;
  font-size: 18px;
  letter-spacing:.2px;
}
.modal .close{
  border:none;
  background: transparent;
  color: rgba(231,252,255,.85);
  font-size: 22px;
  cursor:pointer;
  padding: 6px 10px;
  border-radius: 10px;
}
.modal .close:hover{ background: rgba(255,255,255,.06); }

.form{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.input, .textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(185, 246, 255, .16);
  background: rgba(0,0,0,.20);
  color: var(--text);
  outline:none;
}
.textarea{ min-height: 110px; resize: vertical; }
.helper{
  margin-top: 10px;
  color: rgba(231,252,255,.62);
  font-size: 12px;
  line-height:1.4;
}

.hamburger{
  display:none;
  border: 1px solid rgba(185, 246, 255, .16);
  background: rgba(10, 34, 45, .28);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
  cursor:pointer;
}
.hamburger:hover{ border-color: rgba(185, 246, 255, .28); }

@media (max-width: 860px){
  .nav{ display:none; }
  .hamburger{ display:inline-flex; }
  .topbar{ align-items:center; }
  .brand-text .name{ font-size: 24px; }
  .brand-mark{ width: 32px; height:32px; border-radius: 11px; }
  .hero-inner{ min-height: 640px; }
  .globe{ width: clamp(260px, 70vw, 380px); }
}

.mobile-drawer{
  display:none;
  position:absolute;
  top: 76px;
  right: 20px;
  left: 20px;
  border-radius: 18px;
  border: 1px solid rgba(185, 246, 255, .16);
  background: rgba(9, 30, 38, .78);
  backdrop-filter: blur(10px);
  padding: 12px;
  z-index: 10;
}
.mobile-drawer a{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  opacity:.9;
}
.mobile-drawer a:hover{ background: rgba(255,255,255,.06); opacity:1; }
.mobile-drawer.show{ display:block; }