.nav-cta{
  font-family:var(--font-body); font-weight:600; font-size:13.5px;
  background:var(--accent-green); color:#fff;
  padding:9px 18px; border-radius:12px; text-decoration:none; white-space:nowrap;
}

.hero{
  background:var(--map-bg);
  color:#fff;
  position:relative;
  overflow:hidden;
  padding:72px 0 64px;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.5) 100%, transparent),
    radial-gradient(1.5px 1.5px at 65% 15%, rgba(255,255,255,0.35) 100%, transparent),
    radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.4) 100%, transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.3) 100%, transparent),
    radial-gradient(1.5px 1.5px at 90% 35%, rgba(255,255,255,0.45) 100%, transparent),
    radial-gradient(1px 1px at 10% 65%, rgba(255,255,255,0.3) 100%, transparent);
  pointer-events:none;
}
.hero .wrap{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:44px;
  align-items:center;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em;
  color:rgba(255,255,255,0.75);
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.05);
  padding:6px 13px; border-radius:100px;
  margin-bottom:20px;
}
.hero-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-green); box-shadow:0 0 0 3px rgba(31,138,92,0.25); }
.hero h1{ font-size:40px; line-height:1.1; color:#fff; max-width:500px; }
.hero h1 em{ font-style:normal; color:var(--timeline-line); }
.hero p.lede{ font-size:16px; line-height:1.6; color:rgba(255,255,255,0.6); max-width:440px; margin-top:18px; }
.cta-row{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.btn-store{
  display:flex; align-items:center; gap:9px;
  background:#fff; color:var(--map-bg);
  padding:11px 18px; border-radius:12px;
  text-decoration:none; font-weight:600; font-size:13.5px;
  border:1px solid rgba(255,255,255,0.1);
}
.btn-store.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.22); }
.btn-store img{ width:24px; height:24px; flex-shrink:0; }
.hero-note{ font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,0.35); margin-top:14px; letter-spacing:0.02em; }

.globe-stage{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; }
.globe-stage svg{ width:100%; height:100%; }
.globe-ring{ transform-origin:200px 200px; animation:spin 34s linear infinite; }
.globe-ring.slow{ animation-duration:52s; animation-direction:reverse; }
@keyframes spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.pin{ animation:pulse 2.6s ease-in-out infinite; transform-origin:center; }
.pin.d2{ animation-delay:.6s; }
.pin.d3{ animation-delay:1.2s; }
.pin.d4{ animation-delay:1.8s; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.pin-card{
  position:absolute;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(6px);
  border-radius:10px;
  padding:7px 10px;
  font-family:var(--font-mono);
  font-size:10px;
  color:rgba(255,255,255,0.75);
  letter-spacing:0.03em;
}
.pin-card .co{ color:var(--timeline-line); font-weight:500; }
.pin-card.pc1{ top:8%; right:2%; }
.pin-card.pc2{ bottom:10%; left:-2%; }

@media (prefers-reduced-motion: reduce){
  .globe-ring, .pin{ animation:none !important; }
}

.features{ padding:64px 0; }
.section-head{ max-width:560px; margin-bottom:36px; }
.section-head h2{ font-size:26px; line-height:1.2; }

.feat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.feat-card{
  background:var(--surface);
  border:1px solid var(--field-border);
  border-radius:18px;
  padding:22px 20px;
}
.feat-card .icon-badge{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(31,138,92,0.1); color:var(--accent-green);
  margin-bottom:14px;
}
.feat-card.blue .icon-badge{ background:rgba(59,130,246,0.1); color:var(--selection-blue); }
.feat-card h3{ font-size:15.5px; margin-bottom:6px; }
.feat-card p{ font-size:13px; line-height:1.55; color:var(--text-secondary); }

.rule-strip{
  margin-top:16px;
  background:var(--dotted-fill);
  border:1.5px dashed var(--field-label);
  border-radius:14px;
  padding:16px 20px;
  display:flex; align-items:center; gap:12px;
  font-size:13.5px; color:var(--text-primary);
}
.rule-strip strong{ color:var(--accent-green); }
.rule-strip .rulemark{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--field-label); flex-shrink:0;
}

.final-cta{
  background:var(--map-bg); color:#fff;
  border-radius:24px;
  padding:52px 36px;
  text-align:center;
}
.final-cta h2{ font-size:27px; color:#fff; max-width:460px; margin:0 auto 10px; }
.final-cta p{ color:rgba(255,255,255,0.55); font-size:14.5px; max-width:380px; margin:0 auto 26px; }
.final-cta .cta-row{ justify-content:center; }

@media (max-width:860px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero h1{ font-size:32px; max-width:100%; }
  .hero p.lede{ max-width:100%; }
  .globe-stage{ max-width:300px; margin:0 auto; }
  .feat-grid{ grid-template-columns:1fr 1fr; }
  .features{ padding:48px 0; }
  .final-cta{ padding:40px 22px; }
}
@media (max-width:520px){
  .feat-grid{ grid-template-columns:1fr; }
}