/* ===== Tokens ===== */
:root{
  --void:#0A0A0C;
  --panel:#141318;
  --panel-2:#1B1A21;
  --line: rgba(242,200,121,0.14);
  --gold-core:#F2C879;
  --gold-bright:#FFE3A3;
  --gold-ember:#C9862B;
  --text:#F4F1E9;
  --text-muted:#93908A;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--void);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em;}
img{max-width:100%; display:block;}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ===== Scroll progress ===== */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:200;
  background:linear-gradient(90deg, var(--gold-ember), var(--gold-bright));
  box-shadow:0 0 8px rgba(242,200,121,0.6);
}

/* ===== Cinematic loader ===== */
.loader{
  position:fixed; inset:0; z-index:500; background:var(--void);
  display:flex; align-items:center; justify-content:center;
}
.loader-word{
  font-family:var(--font-display); font-weight:700; font-size:clamp(20px,3vw,30px);
  letter-spacing:0.22em; color:var(--gold-core);
  text-shadow:0 0 24px rgba(242,200,121,0.6);
  opacity:0; filter:blur(6px);
}
.loader.done{pointer-events:none;}

/* ===== Custom cursor glow (desktop only, additive to native cursor) ===== */
.cursor-glow{
  position:fixed; top:0; left:0; width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,227,163,0.55), rgba(242,200,121,0) 70%);
  transform:translate(-50%,-50%); pointer-events:none; z-index:400;
  mix-blend-mode:screen; will-change:transform; opacity:0;
  transition:opacity 0.3s ease;
}
.cursor-glow.active{opacity:1;}
.cursor-glow.hovering{width:60px; height:60px;}
@media (max-width:900px), (hover:none){
  .cursor-glow{display:none;}
}

/* ===== Nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px;
  background:linear-gradient(to bottom, rgba(10,10,12,0.9), transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid transparent;
  transition:background 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
}
.nav.scrolled{
  background:rgba(10,10,12,0.82);
  border-bottom:1px solid var(--line);
  padding:16px 40px;
}
.wordmark{
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:0.14em;
  display:flex; align-items:center; gap:9px;
}
.wordmark-dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold-core);
  box-shadow:0 0 8px 2px var(--gold-core);
}
.nav-links{display:flex; gap:34px; font-size:14px; color:var(--text-muted);}
.nav-links a:hover{color:var(--gold-bright);}
.nav-cta{
  font-size:13px; padding:9px 18px; border:1px solid var(--line); border-radius:100px;
  color:var(--gold-bright); transition:border-color 0.2s, background 0.2s;
}
.nav-cta:hover{border-color:var(--gold-core); background:rgba(242,200,121,0.06);}
@media (max-width:760px){
  .nav-links{display:none;}
  .nav{padding:18px 20px;}
}

/* ===== Hero ===== */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden; padding:0 40px;
}
#globeCanvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block;}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 70% 55% at 50% 45%, rgba(10,10,12,0.1), rgba(10,10,12,0.86) 78%);
}
.hero-content{position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center;}
.reveal-line{overflow:visible;}
.hero h1{overflow:hidden;}
.hero h1 .line{display:block; overflow:hidden;}
.hero h1 .line > *{display:inline-block;}

.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2;
  width:1px; height:52px; background:var(--line); overflow:hidden;
}
.scroll-cue span{
  position:absolute; top:-52px; left:0; width:100%; height:100%;
  background:linear-gradient(var(--gold-core), transparent);
  animation:cueDrop 2.4s ease-in-out infinite;
}
@keyframes cueDrop{
  0%{top:-52px;} 60%{top:52px;} 100%{top:52px;}
}
@media (max-width:760px){.scroll-cue{display:none;}}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold-core); margin-bottom:18px;
}
.eyebrow.center{text-align:center;}
.hero h1{
  font-size:clamp(42px, 7vw, 84px); line-height:1.02; letter-spacing:-0.02em; margin-bottom:22px;
}
.glow-text{
  color:var(--gold-bright);
  text-shadow:0 0 24px rgba(242,200,121,0.55), 0 0 60px rgba(242,200,121,0.25);
}
.hero-sub{
  font-size:17px; color:var(--text-muted); max-width:520px; margin:0 auto 34px;
}
.hero-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

.btn-primary{
  display:inline-block; font-family:var(--font-body); font-weight:500; font-size:14px;
  background:var(--gold-core); color:#1A1305; padding:13px 26px; border-radius:100px;
  box-shadow:0 0 0 0 rgba(242,200,121,0.5); transition:box-shadow 0.2s;
}
.btn-primary:hover{box-shadow:0 6px 24px rgba(242,200,121,0.35);}
.btn-primary.large{font-size:15px; padding:16px 34px;}
.btn-ghost{
  display:inline-block; font-family:var(--font-body); font-weight:500; font-size:14px;
  border:1px solid var(--line); color:var(--text); padding:13px 26px; border-radius:100px;
  transition:border-color 0.2s, color 0.2s;
}
.btn-ghost:hover{border-color:var(--gold-core); color:var(--gold-bright);}

.ticker{
  position:absolute; left:40px; bottom:32px; z-index:2;
  display:flex; flex-direction:column; gap:4px;
}
.ticker-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; color:var(--text-muted); text-transform:uppercase;
}
.ticker-value{
  font-family:var(--font-mono); font-size:28px; color:var(--gold-bright);
  text-shadow:0 0 18px rgba(242,200,121,0.4);
}
@media (max-width:760px){
  .ticker{left:20px; bottom:20px;}
  .ticker-value{font-size:22px;}
}

/* ===== Sections ===== */
.section{padding:140px 40px; max-width:1200px; margin:0 auto;}
.section.alt{max-width:100%; background:var(--panel); position:relative; overflow:hidden;}
.section.alt::before, .section.alt::after{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,200,121,0.06), transparent 70%);
  pointer-events:none; animation:driftGlow 18s ease-in-out infinite alternate;
}
.section.alt::before{top:-180px; left:-120px;}
.section.alt::after{bottom:-200px; right:-140px; animation-delay:-9s;}
@keyframes driftGlow{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(40px,30px) scale(1.15);}
}
.section.alt > *{max-width:1200px; margin-left:auto; margin-right:auto; position:relative; z-index:1;}
.section-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.section-grid.reverse .section-copy{order:2;}
.section-grid.reverse .section-visual{order:1;}
@media (max-width:900px){
  .section{padding:90px 24px;}
  .section-grid{grid-template-columns:1fr; gap:48px;}
  .section-grid.reverse .section-copy, .section-grid.reverse .section-visual{order:initial;}
}

.section-copy h2{font-size:clamp(28px,3.4vw,40px); margin-bottom:20px; line-height:1.12;}
.section-copy p{color:var(--text-muted); font-size:16px; margin-bottom:24px; max-width:460px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}
h2.center{font-size:clamp(28px,3.6vw,42px); max-width:700px; margin-bottom:16px;}
.section-lede{color:var(--text-muted); max-width:480px; margin-bottom:64px; font-size:16px;}

.feature-list{list-style:none; display:flex; flex-direction:column; gap:20px;}
.feature-list li{display:flex; gap:16px; align-items:flex-start;}
.feature-tag{
  flex:0 0 auto; font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--gold-core); border:1px solid var(--line); border-radius:6px; padding:4px 9px; margin-top:2px;
}
.feature-list span:last-child{color:var(--text-muted); font-size:15px; max-width:400px;}

/* ===== Map mock (signature visual) — night heat-map over Diamond Head ===== */
.section-visual{perspective:1400px;}
.map-mock{
  position:relative; aspect-ratio:1/1; background:radial-gradient(circle at 50% 32%, #1d1a20, #0a090c 72%);
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  transform-style:preserve-3d; will-change:transform;
}

/* Diamond Head crater silhouette along the base */
.map-mock-terrain{
  position:absolute; left:-10%; right:-10%; bottom:-4%; height:46%; z-index:1;
  background:linear-gradient(to top, #232029, #2b2731 55%, #363040);
  clip-path:polygon(
    0% 100%, 0% 68%, 8% 60%, 16% 44%, 24% 30%, 30% 20%, 36% 34%,
    42% 12%, 48% 26%, 55% 18%, 63% 36%, 71% 24%, 79% 42%, 88% 52%,
    100% 58%, 100% 100%
  );
  filter:drop-shadow(0 -3px 10px rgba(242,200,121,0.45)) drop-shadow(0 -1px 2px rgba(255,227,163,0.5));
}
.map-mock-terrain::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(242,200,121,0.1), transparent 55%);
}

/* Slow radar sweep for a "live" feel */
.map-mock-sweep{
  position:absolute; inset:0; z-index:0; mix-blend-mode:screen; opacity:0.55;
  background:conic-gradient(from 0deg at 50% 62%, rgba(242,200,121,0.16), transparent 24%, transparent 100%);
  animation:sweepTurn 7s linear infinite;
}
@keyframes sweepTurn{ to{ transform:rotate(360deg); } }

/* Glow clusters: soft residential heat blobs + sharper commercial pins */
.glow-cluster{
  position:absolute; border-radius:50%; z-index:2;
  animation:clusterPulse 4.4s ease-in-out infinite;
}
.glow-cluster:not(.sharp){
  background:radial-gradient(circle, rgba(242,200,121,0.5), rgba(242,200,121,0) 72%);
  filter:blur(1px);
}
.glow-cluster.sharp{
  background:radial-gradient(circle, rgba(255,227,163,0.95), rgba(255,227,163,0) 65%);
  box-shadow:0 0 14px 3px rgba(255,227,163,0.6);
}
.gc1{width:34%; height:34%; left:14%; top:30%; animation-delay:0s;}
.gc2{width:22%; height:22%; left:46%; top:18%; animation-delay:0.5s;}
.gc3{width:26%; height:26%; left:58%; top:44%; animation-delay:1.1s;}
.gc4{width:9%; height:9%; left:40%; top:38%; animation-delay:0.3s;}
.gc5{width:6%; height:6%; left:66%; top:30%; animation-delay:1.6s;}
@keyframes clusterPulse{
  0%,100%{opacity:0.55; transform:scale(1);}
  50%{opacity:0.95; transform:scale(1.08);}
}

.map-mock-caption{
  position:absolute; bottom:14px; left:14px; z-index:3; font-family:var(--font-mono); font-size:11px; color:var(--text-muted);
}

/* ===== Missions ===== */
.mission-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1200px; margin:0 auto; perspective:1600px;}
@media (max-width:900px){.mission-grid{grid-template-columns:1fr;}}
.mission-card{
  background:var(--panel-2); border:1px solid var(--line); border-radius:16px; padding:26px;
  transform-style:preserve-3d; will-change:transform; transition:box-shadow 0.3s ease, border-color 0.3s ease;
}
.mission-card:hover{border-color:var(--gold-ember); box-shadow:0 20px 50px -20px rgba(242,200,121,0.25);}
.mission-bar{
  width:100%; height:4px; background:rgba(255,255,255,0.06); border-radius:2px; margin-bottom:18px; overflow:hidden;
}
.mission-bar span{
  display:block; height:100%; background:linear-gradient(90deg, var(--gold-ember), var(--gold-bright));
  box-shadow:0 0 10px rgba(242,200,121,0.5);
}
.mission-card h3{font-size:18px; margin-bottom:8px;}
.mission-card p{color:var(--text-muted); font-size:14px; margin-bottom:20px;}
.mission-meta{
  display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:12px; color:var(--gold-core);
}

/* ===== Media hub (Ledger) ===== */
.media-hub{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; max-width:1200px; margin:0 auto;
}
@media (max-width:900px){.media-hub{grid-template-columns:1fr; gap:64px;}}
.media-col-head{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; gap:12px;
}
.media-col-head h3{font-size:18px;}
.media-tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--gold-core); white-space:nowrap;
}

.reel{perspective:1400px;}
.reel-item{
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  display:flex; align-items:center; justify-content:center; position:relative;
  transform-style:preserve-3d; will-change:transform;
}
.play{
  width:0; height:0; border-style:solid; border-width:9px 0 9px 14px;
  border-color:transparent transparent transparent var(--gold-core);
  opacity:0.85;
}

.reel-vertical{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.reel-vertical-item{aspect-ratio:9/16;}
@media (max-width:560px){.reel-vertical{grid-template-columns:repeat(3,1fr);}}

.reel-wide{display:flex; flex-direction:column; gap:14px;}
.reel-wide-item{aspect-ratio:16/9;}
.reel-cap{
  position:absolute; left:14px; bottom:12px; font-family:var(--font-mono); font-size:11px; color:var(--text-muted);
}

/* ===== Governance ===== */
.gov-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px; max-width:1100px; margin:0 auto; perspective:1400px;
}
@media (max-width:900px){.gov-grid{grid-template-columns:1fr;}}
.gov-tier{
  border-top:1px solid var(--line); padding-top:24px;
  transform-style:preserve-3d; will-change:transform; transform-origin:top center;
}
.gov-num{
  display:block; font-family:var(--font-mono); color:var(--gold-core); font-size:13px; margin-bottom:14px;
}
.gov-tier h3{font-size:19px; margin-bottom:10px;}
.gov-tier p{color:var(--text-muted); font-size:15px;}

/* ===== CTA ===== */
.cta{
  padding:160px 40px; text-align:center; max-width:700px; margin:0 auto;
}
.cta h2{font-size:clamp(30px,4vw,46px); margin-bottom:16px;}
.cta p{color:var(--text-muted); margin-bottom:36px; font-size:16px;}

/* ===== Footer ===== */
.footer{
  display:flex; justify-content:space-between; padding:28px 40px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:12px; color:var(--text-muted);
}
@media (max-width:600px){
  .footer{flex-direction:column; gap:8px; text-align:center;}
}