:root {
  --bg: #0d1530;
  --bg-2: #131d40;
  --card: #18234a;
  --card-border: rgba(255, 255, 255, 0.08);
  --text: #eef2ff;
  --muted: #8b97b8;
  --accent: #ff8a3d;
  --accent-2: #ffd23f;
  --up: #4ade80;
  --down: #f87171;
  --radius: 18px;
  --display: "Bungee", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -10%, #1f2d63 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
main { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; }
section { margin-top: 28px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
[hidden] { display: none !important; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px;
  background: rgba(13, 21, 48, 0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--card-border);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 1.3rem; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { text-decoration: none; color: var(--muted); font-weight: 600; }
.nav-links a:hover { color: var(--text); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  font: 700 1rem var(--body); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }
.btn-primary { background: linear-gradient(135deg, var(--accent), #ff6a3d); color: #fff; box-shadow: 0 6px 20px rgba(255, 138, 61, 0.35); }
.btn-primary:hover { box-shadow: 0 10px 28px rgba(255, 138, 61, 0.5); }
.btn-ghost { background: rgba(255, 255, 255, 0.06); border-color: var(--card-border); color: var(--text); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.ticker { font-family: var(--display); letter-spacing: 0.02em; }
.btn .ticker { font-size: 0.9em; }

/* ---------- hero ---------- */
.hero { text-align: center; margin-top: 36px; }
.hero h1 {
  margin: 0; font-size: clamp(3rem, 10vw, 6rem); line-height: 1;
  background: linear-gradient(180deg, #fff 30%, #ffc89e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 24px rgba(255, 138, 61, 0.35));
}
.tagline { color: #c7d0ea; font-size: clamp(1rem, 2.4vw, 1.2rem); max-width: 720px; margin: 14px auto 0; }
.tagline strong { color: var(--accent-2); }

/* ---------- stage ---------- */
.stage {
  position: relative; overflow: hidden;
  border-radius: 24px; border: 1px solid var(--card-border);
  aspect-ratio: 3 / 2; background: #4aa3e8;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
#scene { display: block; width: 100%; height: 100%; }

.camp-label { font: 700 11px var(--body); fill: #fff; paint-order: stroke; stroke: rgba(20, 26, 50, 0.75); stroke-width: 3px; }
.camp { --tent-body: #8a94ad; --tent-flag: #c4cad8; }
.camp.reached { --tent-body: #ff8a3d; --tent-flag: #4ade80; }
#bubble { transition: opacity 0.3s; pointer-events: none; }

.flag-cloth { transform-box: fill-box; transform-origin: 0% 50%; animation: wave 1.6s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(4deg) scaleX(0.94); } }

.drift-slow { animation: drift 60s linear infinite alternate; }
.drift-fast { animation: drift 34s linear infinite alternate-reverse; }
@keyframes drift { from { transform: translateX(-120px); } to { transform: translateX(160px); } }

/* ---------- climber animations ---------- */
.climber-body .leg, .climber-body .arm { transform-box: fill-box; transform-origin: 50% 0%; }
.climber-body .sweat { opacity: 0; }

.climber-body.climbing .leg-front { animation: swing 0.45s ease-in-out infinite alternate; }
.climber-body.climbing .leg-back { animation: swing 0.45s ease-in-out infinite alternate-reverse; }
.climber-body.climbing .arm-front { animation: reach 0.45s ease-in-out infinite alternate; }
.climber-body.climbing .arm-back { animation: reach 0.45s ease-in-out infinite alternate-reverse; }
.climber-body.climbing { animation: bob 0.45s ease-in-out infinite alternate; }

.climber-body.slipping { animation: shake 0.22s linear infinite; }
.climber-body.slipping .arm-front { transform: rotate(-150deg); }
.climber-body.slipping .arm-back { transform: rotate(-130deg); }
.climber-body.slipping .leg-front { transform: rotate(-25deg); }
.climber-body.slipping .leg-back { transform: rotate(18deg); }
.climber-body.slipping .sweat { opacity: 1; animation: drip 0.8s ease-in infinite; }

.climber-body.idle { animation: breathe 2.4s ease-in-out infinite; }

.climber-body.summit .arm-front { animation: cheer 0.5s ease-in-out infinite alternate; }
.climber-body.summit .arm-back { animation: cheer 0.5s ease-in-out infinite alternate-reverse; }
.climber-body.summit { animation: jump 0.5s ease-in-out infinite alternate; }

@keyframes swing { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
@keyframes reach { from { transform: rotate(-160deg); } to { transform: rotate(-40deg); } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
@keyframes shake { 0% { transform: translateX(0) rotate(-6deg); } 50% { transform: translateX(1.5px) rotate(-9deg); } 100% { transform: translateX(0) rotate(-6deg); } }
@keyframes drip { from { transform: translateY(0); opacity: 1; } to { transform: translateY(8px); opacity: 0; } }
@keyframes cheer { from { transform: rotate(-170deg); } to { transform: rotate(-140deg); } }
@keyframes jump { from { transform: translateY(0); } to { transform: translateY(-6px); } }

/* ---------- HUD ---------- */
.hud { position: absolute; z-index: 2; }
.hud-tl { top: 14px; left: 14px; }
.hud-tr { top: 14px; right: 14px; }
.hud-bl { bottom: 14px; left: 56px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }

.status, .chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(13, 21, 48, 0.72); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff; font: 700 0.82rem var(--body);
}
.chip { cursor: pointer; transition: background 0.15s; }
.chip:hover { background: rgba(13, 21, 48, 0.92); }
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.status.live .dot { background: var(--up); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); animation: pulse 1.6s infinite; }
.status.demo .dot { background: var(--accent-2); }
.status.wait .dot { background: #60a5fa; }
.status.error .dot { background: var(--down); }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }

.altitude-big { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1; }
.altitude-big small { font-size: 0.5em; }
.altitude-sub { font-weight: 700; font-size: 0.9rem; opacity: 0.95; }

.altimeter { position: absolute; left: 18px; top: 64px; bottom: 18px; z-index: 2; width: 22px; }
.altimeter-track { position: relative; height: 100%; width: 10px; margin: 0 auto; border-radius: 99px; background: rgba(13, 21, 48, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); }
.altimeter-fill { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 99px; background: linear-gradient(0deg, var(--accent), var(--accent-2)); }
.alt-tick { position: absolute; left: -5px; width: 18px; height: 2px; background: rgba(255, 255, 255, 0.75); transform: translateY(1px); }

.demo-controls { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 0.85rem; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }

#confetti { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
#confetti i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { top: 110%; transform: rotate(720deg) translateX(40px); } }

/* ---------- cards ---------- */
.card { background: linear-gradient(180deg, var(--card), var(--bg-2)); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px; }
.card h2 { margin: 0 0 12px; font-size: 1.15rem; }
.card h3 { margin: 0; font-size: 0.85rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-value { font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin: 6px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-delta { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.stat-delta.up { color: var(--up); }
.stat-delta.down { color: var(--down); }
.bar { height: 8px; background: rgba(255, 255, 255, 0.08); border-radius: 99px; overflow: hidden; margin: 6px 0; }
.bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 99px; transition: width 0.8s ease; }

/* ---------- CA ---------- */
.ca-card { text-align: center; }
.ca-label { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; }
.ca-row { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 12px 0 16px; flex-wrap: wrap; }
.ca-row code {
  font-size: clamp(0.8rem, 2.2vw, 1.05rem); padding: 12px 16px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.3); border: 1px dashed rgba(255, 255, 255, 0.2);
  word-break: break-all; max-width: 100%;
}
.ca-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- feed + chart ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feed { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.feed li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--card-border); font-size: 0.92rem; animation: slideIn 0.35s ease; }
.feed li.up b { color: var(--up); }
.feed li.down b { color: var(--down); }
.feed time { color: var(--muted); font-size: 0.78rem; }
.feed-empty { color: var(--muted); display: block !important; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-6px); } }
#spark { width: 100%; height: 180px; display: block; }

/* ---------- sections ---------- */
.section-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2.1rem); text-align: center; margin: 48px 0 18px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step { text-align: center; }
.step h3 { color: var(--text); text-transform: none; font-size: 1.1rem; letter-spacing: 0; margin: 8px 0 6px; }
.step p { color: #c0c9e2; margin: 0; }
.step-icon { font-size: 2.2rem; }
.step-num { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); background: linear-gradient(135deg, var(--accent), #ff6a3d); }

.camp-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column-reverse; gap: 10px; }
.camp-item { display: grid; grid-template-columns: 36px 1fr auto auto 28px; gap: 12px; align-items: center; padding: 14px 18px; transition: border-color 0.4s, background 0.4s; }
.camp-icon { font-size: 1.4rem; }
.camp-name { font-weight: 800; }
.camp-alt, .camp-liq { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.camp-check { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(255, 255, 255, 0.06); color: transparent; transition: all 0.4s; }
.camp-item.reached { border-color: rgba(74, 222, 128, 0.4); }
.camp-item.reached .camp-check { background: var(--up); color: #0d1530; }

.faq { margin-bottom: 10px; padding: 16px 20px; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { color: #c0c9e2; margin: 10px 0 0; }

.footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 30px 16px 40px; border-top: 1px solid var(--card-border); }
.footer p { max-width: 680px; margin: 0 auto; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50;
  transform: translate(-50%, 120px); opacity: 0;
  background: #fff; color: #0d1530; font-weight: 800;
  padding: 12px 22px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s cubic-bezier(.2, 1.4, .4, 1), opacity 0.35s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .steps { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .nav { padding: 10px 16px; }
  .nav-links, .hide-sm { display: none; }
  .stage { aspect-ratio: 4 / 5; border-radius: 18px; }
  .camp-item { grid-template-columns: 30px 1fr 28px; }
  .camp-alt, .camp-liq { grid-column: 2; font-size: 0.82rem; }
  .camp-check { grid-column: 3; grid-row: 1 / span 3; }
  .camp-icon { grid-row: 1 / span 3; }
  .demo-controls span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}