*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:system-ui,-apple-system,sans-serif;background:#F8FAFC;color:#334155;overflow-x:hidden}

:root{
  --sovereign-blue:#2563EB;
  --link-blue:#60A5FA;
  --crown-emerald:#10B981;
  --life-green:#3DE87A;
  --void:#050607;
  --deep-slate:#0F172A;
  --mid-slate:#334155;
  --cloud:#94A3B8;
  --light:#F8FAFC;
  --white:#FFFFFF;
  --border:rgba(15,23,42,0.08);
  --font-d:"Instrument Sans",system-ui,sans-serif;
  --font-m:"Courier New",Courier,monospace;
}

/* ── GRADIENT BAR ─────────────────────────────────── */
#gradient-bar{
  position:fixed;top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,#2563EB,#60A5FA,#10B981);
  z-index:200;
}

/* ── NAV ──────────────────────────────────────────── */
#nav{
  position:fixed;top:4px;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 52px;
  transition:background .3s,border-color .3s;
}
#nav.scrolled{
  background:rgba(248,250,252,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(15,23,42,.07);
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo img{height:36px;width:auto;max-width:120px;display:block}
.nav-brand{
  font-family:var(--font-d);font-weight:700;font-size:.95rem;
  letter-spacing:.02em;color:#fff;transition:color .3s
}
.nav-brand em{font-style:normal;color:var(--sovereign-blue)}
#nav.scrolled .nav-brand{color:var(--deep-slate)}
#nav.scrolled .nav-brand em{color:var(--sovereign-blue)}
#nav.scrolled .logo-dark{display:none!important}
#nav.scrolled .logo-bright{display:block!important}
#nav button[data-nav]{color:rgba(255,255,255,.7);transition:color .2s}
#nav button[data-nav]:hover{color:#fff}
#nav.scrolled button[data-nav]{color:var(--deep-slate)}
#nav.scrolled button[data-nav]:hover{color:var(--sovereign-blue)}
.nav-drop{
  font-family:var(--font-d);font-weight:700;font-size:.8rem;
  letter-spacing:.06em;color:#fff;
  background:var(--sovereign-blue);
  border:none;border-radius:9999px;padding:10px 24px;
  cursor:pointer;text-decoration:none;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.nav-drop:hover{
  background:#1D4ED8;
  box-shadow:0 8px 24px rgba(37,99,235,.35);
  transform:translateY(-1px);
}

/* ── SECTION DOTS ─────────────────────────────────── */
#section-dots{
  position:fixed;right:24px;top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;
  z-index:90;
  opacity:0;transition:opacity 1s ease;
}
#section-dots.visible{opacity:1}
.sdot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(148,163,184,.4);
  cursor:pointer;
  transition:background .3s,transform .3s;
  position:relative;
}
.sdot.active{
  background:var(--crown-emerald);
  transform:scale(1.5);
}
.sdot:hover .sdot-tip{opacity:1;pointer-events:none}
.sdot-tip{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  background:rgba(15,23,42,.85);color:#fff;
  font-family:system-ui;font-size:11px;font-weight:400;
  padding:4px 10px;border-radius:6px;white-space:nowrap;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
@media(max-width:768px){#section-dots{display:none}}

/* ── HERO ─────────────────────────────────────────── */
#hero{
  position:relative;width:100%;height:100vh;
  overflow:hidden;background:var(--void);
}
#hero-canvas{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
#hero-overlays{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:10;
}

/* Coordinates (lower-third) */
/* Coordinates — bottom strip, always below everything */
.hero-coord-block{
  position:absolute;bottom:18%;left:50%;transform:translateX(-50%);
  text-align:center;
  opacity:0;transition:opacity 1.5s ease;
  z-index:5;
}
.hero-coord-block.show{opacity:1}
.hero-coord-line{
  display:block;
  font-family:var(--font-m);
  font-size:clamp(.55rem,.75vw,.72rem);
  letter-spacing:.18em;
  color:rgba(16,185,129,.6);
  line-height:2;
}
.hero-coord-line.loc{color:rgba(210,240,225,.35)}
.hero-coord-line.sp{color:rgba(16,185,129,.3)}

/* Speech bubble — center screen, Navi just stopped */
#hero-bubble{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-44%) translateY(12px);
  background:rgba(2,14,9,.92);
  border:1px solid rgba(16,185,129,.3);
  border-radius:14px;padding:22px 32px;
  font-family:var(--font-m);
  font-size:clamp(.78rem,1.1vw,.9rem);
  line-height:2.1;color:rgba(210,240,225,.9);
  text-align:center;white-space:nowrap;
  opacity:0;
  transition:opacity .8s ease,transform .8s ease;
  pointer-events:none;
  z-index:15;
}
#hero-bubble.show{opacity:1;transform:translate(-50%,-44%) translateY(0)}
#hero-bubble.hide{opacity:0;transform:translate(-50%,-44%) translateY(-8px);transition:opacity .6s ease,transform .6s ease}
#hero-bubble::after{
  content:'';position:absolute;
  bottom:-9px;left:50%;transform:translateX(-50%);
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:9px solid rgba(16,185,129,.3);
}
.bline{display:block;opacity:0;transform:translateY(4px);transition:opacity .6s,transform .6s}
.bline.vis{opacity:1;transform:translateY(0)}
.bline-dim{color:rgba(210,240,225,.25)}

/* Hero headline + button — center, appears after bubble hides */
#hero-headline{
  position:absolute;top:42%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  opacity:0;transition:opacity 1.4s ease;
  pointer-events:none;
  z-index:12;
}
#hero-headline.show{opacity:1;pointer-events:auto}
/* hero-el-label and hero-tagline removed — Hero shows CTAs only */
.hero-drop-btn{
  display:inline-block;
  font-family:var(--font-d);font-weight:700;
  font-size:1rem;letter-spacing:.3px;
  color:#fff;background:var(--sovereign-blue);
  border:none;border-radius:9999px;
  padding:14px 40px;cursor:pointer;
  text-decoration:none;
  transition:background .2s,transform .2s,box-shadow .2s;
  pointer-events:auto;
}
.hero-drop-btn:hover{
  background:#1D4ED8;
  box-shadow:0 10px 28px rgba(37,99,235,.4);
  transform:translateY(-2px);
}
.hero-ghost-btn{
  display:inline-block;
  font-family:var(--font-d);font-weight:600;
  font-size:1rem;letter-spacing:.3px;
  color:rgba(255,255,255,.85);
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  border-radius:9999px;
  padding:14px 32px;
  text-decoration:none;
  transition:border-color .2s,background .2s,transform .2s;
  white-space:nowrap;
}
.hero-ghost-btn:hover{
  border-color:rgba(61,232,122,.6);
  background:rgba(61,232,122,.07);
  transform:translateY(-2px);
}

/* Hero scroll indicator */
#hero-scroll{
  position:absolute;bottom:28px;left:50%;
  transform:translateX(-50%);
  text-align:center;
  opacity:0;transition:opacity 1.5s ease;
  pointer-events:none;
  z-index:12;
}
#hero-scroll.show{opacity:.55;pointer-events:auto;cursor:pointer}
.hero-scroll-label{
  font-family:system-ui;font-weight:600;
  font-size:10px;letter-spacing:2px;
  text-transform:uppercase;
  color:var(--crown-emerald);
  display:block;margin-bottom:6px;
}
.hero-scroll-label em{font-style:normal}
.hero-scroll-arrow{
  display:block;
  font-size:14px;color:var(--crown-emerald);
  animation:float-arrow 1.5s ease-in-out infinite;
}
@keyframes float-arrow{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ── SECTIONS ─────────────────────────────────────── */
.section{padding:10rem 0}
.section-inner{max-width:1100px;margin:0 auto;padding:0 52px}
@media(max-width:768px){
  .section{padding:6rem 0}
  .section-inner{padding:0 24px}
}

.section-label{
  display:block;
  font-family:system-ui;font-weight:600;
  font-size:12px;letter-spacing:2px;
  text-transform:uppercase;
  color:var(--crown-emerald);
  margin-bottom:16px;
}
.section-label em{font-style:normal;color:var(--crown-emerald)}

.section-title{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(2.25rem,3.5vw,3rem);
  line-height:1.08;
  color:var(--deep-slate);
  letter-spacing:-.5px;
  margin-bottom:20px;
}
.section-title em{font-style:italic;color:var(--mid-slate)}
.section-title .linc-c{color:var(--crown-emerald);font-style:normal}

.section-body{
  font-size:1.0625rem;line-height:1.8;
  color:var(--mid-slate);
  max-width:560px;
  margin-bottom:32px;
}

/* scroll reveal */
.reveal{
  opacity:0;transform:translateY(36px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.in{opacity:1;transform:translateY(0)}

/* ── EARTH LINC SECTION ───────────────────────────── */
#earth-linc{background:var(--light)}
#earth-linc .el-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-bottom:64px}
@media(max-width:900px){#earth-linc .el-intro-grid{grid-template-columns:1fr}}

.three-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;margin-bottom:56px;
}
@media(max-width:900px){.three-cards{grid-template-columns:1fr}}

.el-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:2rem;
  padding:2.5rem;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 8px 32px rgba(0,0,0,.04);
  transition:transform .2s,box-shadow .2s;
}
.el-card:hover{
  transform:translateY(-3px) scale(1.008);
  box-shadow:0 4px 16px rgba(0,0,0,.07),0 16px 48px rgba(0,0,0,.07);
}
.card-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  background:rgba(16,185,129,.08);
}
.card-icon svg{width:22px;height:22px;stroke:var(--crown-emerald);fill:none;stroke-width:2}
.card-label{
  font-family:system-ui;font-weight:600;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--cloud);margin-bottom:10px;
}
.card-title{
  font-family:var(--font-d);font-weight:700;
  font-size:1.1rem;color:var(--deep-slate);margin-bottom:12px;
}
.card-body{font-size:.9rem;line-height:1.78;color:var(--mid-slate)}
.card-footer-tag{
  margin-top:20px;padding-top:16px;
  border-top:1px solid var(--border);
  font-family:var(--font-m);font-size:.65rem;
  letter-spacing:.12em;color:var(--cloud);
  text-transform:uppercase;
}

/* Growth ladder */
.growth-ladder{margin-bottom:56px}
.growth-quote{
  font-family:var(--font-d);font-style:italic;
  font-size:1rem;color:var(--mid-slate);
  margin-bottom:24px;
}
.ladder-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
@media(max-width:768px){.ladder-steps{grid-template-columns:1fr 1fr}}
.lstep{
  background:#F1F5F9;border-radius:14px;padding:20px 18px;
}
.lstep-num{
  font-family:var(--font-d);font-weight:700;
  font-size:1.6rem;color:var(--crown-emerald);
  margin-bottom:8px;line-height:1;
}
.lstep-title{
  font-size:.85rem;font-weight:600;
  color:var(--deep-slate);margin-bottom:4px;
}
.lstep-body{font-size:.78rem;line-height:1.6;color:var(--mid-slate)}

/* Portal panel */
.portal-panel{
  background:var(--void);
  border:1px solid rgba(61,232,122,.2);
  border-radius:2rem;
  padding:3rem;
  margin-bottom:56px;
}
.terminal-lines{margin-bottom:24px}
.tline{
  display:block;
  font-family:var(--font-m);font-size:.8rem;
  color:rgba(61,232,122,.65);
  line-height:2;
  letter-spacing:.04em;
}
.tline::before{content:'> ';color:rgba(61,232,122,.35)}
.portal-tagline{
  font-family:var(--font-d);font-style:italic;
  font-size:1rem;color:rgba(148,163,184,.7);
  margin-bottom:24px;
}
.btn-pair{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{
  font-family:var(--font-d);font-weight:700;
  font-size:.85rem;letter-spacing:.3px;
  color:#fff;background:var(--sovereign-blue);
  border:none;border-radius:9999px;
  padding:12px 28px;text-decoration:none;
  transition:background .2s,transform .2s,box-shadow .2s;
  cursor:pointer;
}
.btn-primary:hover{background:#1D4ED8;transform:translateY(-1px);box-shadow:0 8px 20px rgba(37,99,235,.3)}
.btn-outline{
  font-family:var(--font-d);font-weight:600;
  font-size:.85rem;letter-spacing:.3px;
  color:var(--crown-emerald);
  background:transparent;
  border:1px solid rgba(16,185,129,.4);
  border-radius:9999px;padding:12px 28px;
  text-decoration:none;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.btn-outline:hover{border-color:var(--crown-emerald);background:rgba(16,185,129,.06)}

/* Infra table */
.infra-label{
  font-family:system-ui;font-weight:600;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--cloud);margin-bottom:16px;
}
.infra-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
@media(max-width:768px){.infra-grid{grid-template-columns:1fr 1fr}}
.infra-item{
  background:#fff;border:1px solid var(--border);
  border-radius:1rem;padding:18px 16px;
}
.infra-name{
  font-size:.85rem;font-weight:600;
  color:var(--deep-slate);margin-bottom:4px;
}
.infra-desc{font-size:.78rem;line-height:1.6;color:var(--mid-slate)}

/* ── YOUTH PROGRAM ────────────────────────────────── */
#youth-program{background:var(--void)}
#youth-program .section-label{color:rgba(16,185,129,.7)}
#youth-program .section-title{color:#fff}
#youth-program .section-title em{color:rgba(255,255,255,.35)}
#youth-program .section-body{color:rgba(255,255,255,.5)}

.track-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:48px 0}
@media(max-width:900px){.track-cards{grid-template-columns:1fr}}
.track-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:2rem;padding:2.5rem;
  transition:border-color .2s,background .2s;
}
.track-card:hover{
  border-color:rgba(16,185,129,.25);
  background:rgba(16,185,129,.04);
}
.track-label{
  font-family:system-ui;font-weight:600;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--crown-emerald);margin-bottom:12px;
}
.track-title{
  font-family:var(--font-d);font-weight:700;
  font-size:1.05rem;color:#fff;margin-bottom:12px;
}
.track-body{font-size:.88rem;line-height:1.78;color:rgba(255,255,255,.5)}

.five-paths{margin-bottom:48px}
.paths-label{
  font-family:system-ui;font-weight:600;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(148,163,184,.6);margin-bottom:20px;
}
.path-row{
  display:flex;gap:20px;align-items:baseline;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.path-name{
  font-family:var(--font-d);font-weight:600;
  font-size:.9rem;color:var(--crown-emerald);
  min-width:120px;
}
.path-desc{font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.45)}

.youth-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.youth-discord{
  font-size:.82rem;color:rgba(148,163,184,.5);
  font-family:system-ui;margin-left:4px;
}

/* ── GET INVOLVED ─────────────────────────────────── */
#get-involved{background:var(--light)}

.anzhu-panel{
  background:rgba(16,185,129,.04);
  border:1px solid rgba(16,185,129,.15);
  border-radius:3rem;
  padding:3.5rem;
  margin-bottom:48px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;
}
@media(max-width:900px){.anzhu-panel{grid-template-columns:1fr}}
.anzhu-badge{
  font-family:system-ui;font-weight:600;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--crown-emerald);margin-bottom:16px;
}
.anzhu-title{
  font-family:var(--font-d);font-weight:700;
  font-size:1.5rem;color:var(--deep-slate);
  margin-bottom:6px;
}
.anzhu-sub{
  font-size:.85rem;color:var(--cloud);margin-bottom:20px;
}
.anzhu-body{font-size:.9rem;line-height:1.8;color:var(--mid-slate)}

.coord-block{
  background:var(--deep-slate);
  border-radius:1.5rem;padding:24px;
  font-family:var(--font-m);
}
.coord-line{
  display:block;
  font-size:.78rem;line-height:2;
  color:var(--cloud);letter-spacing:.04em;
}
.coord-line.big{
  font-size:.85rem;color:var(--crown-emerald);
  letter-spacing:.08em;
}


.option-card{
  background:#fff;border:1px solid var(--border);
  border-radius:2rem;padding:2.5rem;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 8px 32px rgba(0,0,0,.04);
  transition:transform .2s,box-shadow .2s;
}
.option-card:hover{
  transform:translateY(-3px) scale(1.008);
  box-shadow:0 4px 16px rgba(0,0,0,.07),0 16px 48px rgba(0,0,0,.07);
}
.option-label{
  font-family:system-ui;font-weight:600;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--cloud);margin-bottom:12px;
}
.option-title{
  font-family:var(--font-d);font-weight:700;
  font-size:1.05rem;color:var(--deep-slate);margin-bottom:12px;
}
.option-body{font-size:.88rem;line-height:1.78;color:var(--mid-slate);margin-bottom:24px}

.contact-email{
  font-family:var(--font-m);font-size:.85rem;
  color:var(--sovereign-blue);letter-spacing:.04em;
}

/* ── ABOUT ────────────────────────────────────────── */
#about{background:#fff}

.about-body{font-size:.95rem;line-height:1.85;color:var(--mid-slate);margin-bottom:16px}
.name-equation{
  font-family:var(--font-m);font-size:.82rem;
  color:var(--cloud);letter-spacing:.06em;
  margin:24px 0;line-height:2;
}

.brand-stack{display:flex;flex-direction:column;gap:3px}
.brand-row{
  background:#F8FAFC;border-radius:1rem;padding:20px 22px;
  display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:baseline;
}
.brand-name{
  font-family:var(--font-d);font-weight:700;
  font-size:.95rem;color:var(--deep-slate);
}
.brand-name .linc-c{color:var(--crown-emerald);font-style:normal}
.brand-role{font-size:.85rem;color:var(--mid-slate);line-height:1.6}
.brand-tag{
  margin-top:6px;
  font-family:var(--font-d);font-style:italic;
  font-size:.8rem;color:var(--crown-emerald);
}



/* ── IMPACT ───────────────────────────────────────── */
#impact{background:var(--light)}

.research-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:24px;margin-bottom:56px;
}
@media(max-width:768px){.research-grid{grid-template-columns:1fr}}

.research-card{
  background:#fff;border:1px solid var(--border);
  border-radius:2rem;padding:2.5rem;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 8px 32px rgba(0,0,0,.04);
  transition:transform .2s,box-shadow .2s;
}
.research-card:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 16px rgba(0,0,0,.07),0 16px 48px rgba(0,0,0,.07);
}




.navi-cta-link:hover{color:var(--life-green)}

/* ── FOOTER ───────────────────────────────────────── */
footer{
  background:var(--void);
  padding:72px 52px 40px;
  position:relative;
}
footer::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,#2563EB,#60A5FA,#10B981);
}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-brand{margin-bottom:48px}
.footer-brand-name{
  font-family:var(--font-d);font-weight:700;
  font-size:1.1rem;color:#fff;margin-bottom:8px;
}
.footer-brand-name em{font-style:normal;color:var(--sovereign-blue)}
.footer-brand-name .linc-c{color:var(--crown-emerald);font-style:normal}
.footer-tagline{
  font-size:.8rem;color:rgba(255,255,255,.3);
  line-height:1.7;margin-bottom:10px;
}
.footer-meta{
  font-family:var(--font-m);font-size:.65rem;
  color:rgba(255,255,255,.2);
}
.footer-links{
  display:flex;gap:32px;flex-wrap:wrap;
  margin-bottom:32px;
}
.footer-link{
  font-size:.82rem;color:rgba(255,255,255,.4);
  text-decoration:none;transition:color .2s;
}
.footer-link:hover{color:var(--crown-emerald)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
}
.footer-copy{
  font-family:var(--font-m);font-size:.65rem;
  color:rgba(255,255,255,.18);
}
.footer-legal{
  font-family:var(--font-m);font-size:.65rem;
  color:rgba(255,255,255,.18);
}
@media(max-width:768px){
  footer{padding:52px 24px 32px}
  #nav{padding:14px 24px}
}

/* Crown dot divider */
.crown-dot{
  text-align:center;
  padding:2rem 0;
  font-size:.7rem;letter-spacing:.4em;
  color:rgba(148,163,184,.3);
}

@keyframes guidePulse {
  0%,100%{opacity:.4;transform:translateY(0)}
  50%{opacity:1;transform:translateY(4px)}
}


/* ── SECTION TRANSITIONS ──────────────────────────── */
.transition-dark-to-light{
  height:200px;
  background:linear-gradient(to bottom,var(--void) 0%,#0d1a12 30%,#c8e8d8 75%,var(--light) 100%);
  display:block;
}
.transition-light-to-dark{
  height:120px;
  background:linear-gradient(to bottom,var(--light),var(--void));
  display:block;
}
.transition-dark-to-light-plain{
  height:100px;
  background:linear-gradient(to bottom,var(--void),var(--light));
  display:block;
}

/* ── CROWN DOT DIVIDER ────────────────────────────── */
.crown-dot-divider{
  display:flex;align-items:center;justify-content:center;
  gap:8px;padding:0;height:0;overflow:visible;
  position:relative;z-index:5;
}
.crown-dot-divider span{
  width:5px;height:5px;border-radius:50%;display:block;
}
.crown-dot-divider .cd-center{background:var(--sovereign-blue);}
.crown-dot-divider .cd-side{background:rgba(148,163,184,.3);}

/* ── ABOUT SECTION ────────────────────────────────── */
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;margin-top:56px;align-items:start;
}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:48px}}
.about-stat{
  border-top:1px solid var(--border);
  padding-top:20px;margin-top:4px;
}
.about-stat-num{
  font-family:var(--font-d);font-weight:700;
  font-size:2.2rem;color:var(--sovereign-blue);line-height:1;
  margin-bottom:6px;
}
.about-stat-label{
  font-size:.82rem;color:var(--cloud);
  font-family:system-ui;font-weight:600;
  letter-spacing:.04em;
}
.about-tag{
  display:inline-block;
  font-family:var(--font-m);font-size:.65rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--cloud);
  background:#F1F5F9;
  border-radius:999px;padding:5px 14px;margin:4px 4px 0 0;
}


/* ── SECTION TRANSITIONS (additional) ──────────── */
.transition-light-to-dark-soft{
  height:80px;
  background:linear-gradient(to bottom,var(--light),#0d1a26);
  display:block;
}
/* --- Keyframe Animations --- */
@keyframes dropFall {
  0%   { transform: translateY(-60px); opacity: 0; }
  30%  { opacity: 1; }
  70%  { transform: translateY(0px); opacity: 1; }
  85%  { transform: translateY(6px) scaleY(.7) scaleX(1.3); opacity: .9; }
  100% { transform: translateY(4px) scaleY(.5) scaleX(1.5); opacity: 0; }
}
@keyframes walletPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  50%      { box-shadow: 0 0 0 8px rgba(16,185,129,.06), 0 0 60px rgba(16,185,129,.08); }
}
@keyframes certAppear {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes naviFloat {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-5px); }
}
@keyframes naviGlow {
  0%,100% { filter: drop-shadow(0 0 4px rgba(61,232,122,.4)); }
  50%      { filter: drop-shadow(0 0 12px rgba(61,232,122,.8)); }
}
@keyframes ripple {
  0%   { transform: scale(1); opacity: .5; }
  100% { transform: scale(3); opacity: 0; }
}
/* --- Youth Program Styles --- */
.yp-accent{color:#F97316}.yp-body{font-size:1rem;line-height:1.8;color:rgba(255,220,180,.45);margin-bottom:16px}
.yp-hero{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;margin-bottom:64px}
@media(max-width:768px){.yp-hero{grid-template-columns:1fr;gap:24px}}
.yp-track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:64px}
@media(max-width:768px){.yp-track-grid{grid-template-columns:1fr}}
.yp-track{background:rgba(249,115,22,.04);border:1px solid rgba(249,115,22,.15);border-radius:16px;padding:28px 24px;transition:border-color .3s}
.yp-track:hover{border-color:rgba(249,115,22,.4)}
.yp-track-icon{font-size:2rem;margin-bottom:16px;display:block}
.yp-track-label{font-family:var(--font-m,monospace);font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#F97316;margin-bottom:8px}
.yp-track-title{font-family:var(--font-d);font-weight:700;font-size:1.05rem;color:#fff;line-height:1.3;margin-bottom:12px}
.yp-track-desc{font-size:.88rem;line-height:1.7;color:rgba(255,220,180,.4)}
.yp-track-for{margin-top:14px;font-size:.75rem;color:rgba(249,115,22,.5);font-style:italic}
.yp-dim-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:48px}
@media(max-width:900px){.yp-dim-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.yp-dim-grid{grid-template-columns:1fr 1fr}}
.yp-dim{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:20px 16px;text-align:center;transition:border-color .3s,background .3s}
.yp-dim:hover{border-color:rgba(249,115,22,.3);background:rgba(249,115,22,.04)}
.yp-dim-icon{font-size:1.6rem;margin-bottom:10px;display:block}
.yp-dim-name{font-family:var(--font-d);font-weight:700;font-size:.9rem;color:#F97316;margin-bottom:6px}
.yp-dim-desc{font-size:.78rem;line-height:1.6;color:rgba(255,220,180,.35)}
.yp-terminal{background:#0a0604;border:1px solid rgba(249,115,22,.15);border-radius:10px;padding:20px 24px;font-family:'Courier New',monospace;font-size:.82rem;line-height:2;color:rgba(251,191,36,.6);margin-bottom:48px;position:relative;overflow:hidden}
.yp-terminal::before{content:'';position:absolute;top:0;left:0;right:0;height:32px;background:rgba(249,115,22,.06);border-bottom:1px solid rgba(249,115,22,.1)}
.yp-terminal-dots{position:absolute;top:10px;left:14px;display:flex;gap:6px}
.yp-terminal-dots span{width:8px;height:8px;border-radius:50%;background:rgba(249,115,22,.25)}
.yp-terminal-body{padding-top:20px}
.yp-cmd{color:#F97316}
.yp-comment{color:rgba(255,220,180,.2)}
.yp-btn-primary{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-d);font-weight:700;font-size:.9rem;color:#fff;background:#F97316;border:none;border-radius:999px;padding:14px 28px;cursor:pointer;text-decoration:none;transition:background .2s}
.yp-btn-primary:hover{background:#EA580C}
.yp-btn-outline{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-d);font-weight:600;font-size:.9rem;color:#F97316;background:none;border:1px solid rgba(249,115,22,.3);border-radius:999px;padding:14px 28px;cursor:pointer;text-decoration:none;transition:border-color .2s}
.yp-btn-outline:hover{border-color:#F97316}

/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVE — home.html inline style overrides
   ═══════════════════════════════════════════════════ */

/* --- Tablet (≤900px) --- */
@media(max-width:900px){
  /* Thailand section two-column → stack */
  #thailand .section-pad > div > .two-col,
  [style*="grid-template-columns:1fr 1fr;gap:80px"] {
    grid-template-columns:1fr !important;
    gap:40px !important;
  }

  /* Get Involved option cards */
  [style*="grid-template-columns:1fr 1fr;gap:24px"] {
    grid-template-columns:1fr !important;
  }

  /* Drop modal payment grid */
  [style*="grid-template-columns:1fr 1fr;gap:8px"] {
    grid-template-columns:1fr !important;
  }

  /* Bridge animation grid */
  [style*="grid-template-columns:1fr 1fr;gap:10px"] {
    grid-template-columns:1fr !important;
  }
}

/* --- Mobile (≤768px) --- */
@media(max-width:768px){
  /* Reduce section padding */
  [style*="padding:0 48px"],
  [style*="padding:0 52px"] {
    padding-left:20px !important;
    padding-right:20px !important;
  }

  [style*="padding:64px 48px"],
  [style*="padding:64px 52px"] {
    padding:40px 20px !important;
  }

  [style*="padding:64px 48px 120px"] {
    padding:40px 20px 60px !important;
  }

  [style*="padding:64px 52px 80px"] {
    padding:40px 20px 60px !important;
  }

  /* Thailand title smaller */
  #thailand h2 {
    font-size:clamp(2rem,8vw,3.5rem) !important;
    letter-spacing:-1.5px !important;
  }

  /* Section titles */
  .section-title {
    font-size:clamp(1.8rem,6vw,2.5rem) !important;
  }

  /* Thailand story text */
  #thailand p[class="reveal"] {
    font-size:.95rem !important;
  }

  /* Drop CTA three buttons → stack or smaller */
  [style*="grid-template-columns:1fr 1fr 1fr;gap:2px"] {
    grid-template-columns:1fr !important;
  }

  /* Drop modal */
  #drop-modal > div:nth-child(2) {
    margin:12px !important;
    padding:1.5rem !important;
    max-width:100% !important;
    border-radius:1.2rem !important;
  }

  /* Drop modal title */
  #drop-modal [style*="font-size:1.6rem"] {
    font-size:1.2rem !important;
  }

  /* Nav padding */
  #nav {
    padding:14px 16px !important;
  }

  /* Nav: hide desktop links and Drop button, show hamburger */
  #nav-links {
    display:none !important;
  }
  #nav > .nav-drop {
    display:none !important;
  }
  #nav-hamburger {
    display:block !important;
    color:rgba(255,255,255,.7);
  }
  #nav.scrolled #nav-hamburger {
    color:#0F172A;
  }
  /* Mobile menu shows as flex column when open */
  #mobile-menu[style*="display: flex"],
  #mobile-menu[style*="display:flex"] {
    display:flex !important;
  }

  /* Footer padding */
  footer {
    padding:48px 20px 32px !important;
  }

  /* Footer links wrap */
  .footer-links {
    gap:16px !important;
  }

  /* Hero bubble */
  #hero-bubble {
    white-space:normal !important;
    max-width:85vw;
    font-size:.8rem !important;
    padding:16px 20px !important;
  }

  /* Hero headline */
  #hero-headline {
    top:38% !important;
    width:90%;
  }

  /* Hero buttons */
  .hero-drop-btn {
    padding:12px 28px !important;
    font-size:.9rem !important;
  }

  /* Bridge section */
  [style*="max-width:640px"] {
    padding-left:20px !important;
    padding-right:20px !important;
  }

  /* Trust bar */
  [style*="display:flex;flex-wrap:wrap;gap:24px;justify-content:center"] {
    gap:12px !important;
  }

  /* EcoMatcher verification grid */
  [style*="grid-template-columns:1fr 1fr;gap:2px;border-radius:12px"] {
    grid-template-columns:1fr !important;
  }

  /* About page grid */
  .about-grid {
    grid-template-columns:1fr !important;
    gap:40px !important;
  }

  .brand-row {
    grid-template-columns:100px 1fr !important;
    gap:12px !important;
  }

  /* Sub-page content padding */
  [style*="maxWidth: 1100"] > [style*="padding: '64px 52px'"],
  [style*="max-width:1100px"] {
    padding-left:20px !important;
    padding-right:20px !important;
  }
}

/* --- Small mobile (≤480px) --- */
@media(max-width:480px){
  /* Even tighter padding */
  [style*="padding:0 48px"],
  [style*="padding:0 52px"] {
    padding-left:16px !important;
    padding-right:16px !important;
  }

  /* Drop modal tiers */
  #drop-tiers label {
    padding:12px 14px !important;
  }

  /* Stats row text */
  #thailand [style*="font-size:2.2rem"] {
    font-size:1.5rem !important;
  }

  /* Hero coord block */
  .hero-coord-line {
    font-size:.5rem !important;
  }

  /* Brand row single column on very small */
  .brand-row {
    grid-template-columns:1fr !important;
  }
}