@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=Roboto:wght@300;400;500;700&display=swap');

:root {
  --electric: #3b82f6;
  --electric-dark: #2563eb;
  --yellow: #fbbf24;
  --yellow-light: #fcd34d;
  --dark: #0a1628;
  --panel: #111d33;
  --lighter: #1a2d4d;
  --txt: #c0d0e8;
  --txt-muted: #7088a8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Roboto', sans-serif; background: var(--dark); color: var(--txt); line-height: 1.7; overflow-x: hidden; }

a { color: var(--electric); text-decoration: none; transition: 0.25s; }
a:hover { color: var(--yellow); }

.bold-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px; padding: 0 2.5rem;
  background: var(--panel); position: sticky; top: 0; z-index: 1000;
  border-bottom: 3px solid var(--yellow);
}

.vl-logo { font-family: 'Russo One', sans-serif; font-size: 1.6rem; color: var(--electric); display: flex; align-items: center; gap: 8px; }
.vl-logo svg { width: 34px; height: 34px; }
.vl-logo .y { color: var(--yellow); }

.vl-nav { display: flex; list-style: none; gap: 1.6rem; }
.vl-nav a { font-family: 'Russo One', sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: var(--txt-muted); }
.vl-nav a:hover { color: var(--yellow); }

.vl-burger { display: none; background: none; border: 2px solid var(--yellow); border-radius: 4px; padding: 5px 8px; cursor: pointer; }
.vl-burger span { display: block; width: 24px; height: 2px; background: var(--yellow); margin: 5px 0; transition: 0.3s; }

.geo-hero {
  padding: 5rem 2.5rem;
  background: linear-gradient(145deg, var(--panel) 0%, var(--dark) 50%, var(--panel) 100%);
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  max-width: 1300px; margin: 0 auto;
}

.gh-text h1 { font-family: 'Russo One', sans-serif; font-size: 3rem; color: var(--yellow); line-height: 1.15; margin-bottom: 1.5rem; }
.gh-text h1 span { color: var(--electric); }
.gh-text p { font-weight: 300; margin-bottom: 2rem; color: var(--txt-muted); }

.bolt-btn {
  display: inline-block; padding: 14px 40px;
  background: var(--yellow); color: var(--dark);
  font-family: 'Russo One', sans-serif; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 2px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: 0.3s;
}
.bolt-btn:hover { background: var(--yellow-light); color: var(--dark); transform: translateY(-2px); }

.gh-game .vl-frame { background: var(--panel); border: 2px solid var(--electric); overflow: hidden; }
.vl-frame iframe { width: 100%; height: 500px; border: none; display: block; }

.zap-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--electric-dark);
}

.zs-cell { padding: 2.5rem 2rem; text-align: center; border-right: 1px solid rgba(255,255,255,0.1); }
.zs-cell:last-child { border-right: none; }
.zs-cell .z-ico { font-size: 2rem; margin-bottom: 0.5rem; }
.zs-cell h3 { font-family: 'Russo One', sans-serif; font-size: 1rem; color: var(--yellow); margin-bottom: 0.3rem; }
.zs-cell p { font-size: 0.85rem; font-weight: 300; color: rgba(255,255,255,0.7); }

.wide-section { max-width: 1100px; margin: 0 auto; padding: 5rem 2rem; text-align: center; }
.wide-section h2 { font-family: 'Russo One', sans-serif; font-size: 2.2rem; color: var(--yellow); margin-bottom: 1.5rem; }
.wide-section .ws-lead { max-width: 700px; margin: 0 auto 3rem; font-weight: 300; color: var(--txt-muted); }

.block-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.bg-card {
  background: var(--panel); border-top: 3px solid var(--electric);
  padding: 2rem 1.5rem; transition: 0.3s;
}
.bg-card:hover { border-top-color: var(--yellow); transform: translateY(-3px); }
.bg-card .bc-ico { font-size: 2rem; margin-bottom: 0.7rem; }
.bg-card h3 { font-family: 'Russo One', sans-serif; font-size: 0.95rem; color: var(--electric); margin-bottom: 0.5rem; }
.bg-card p { font-size: 0.88rem; font-weight: 300; color: var(--txt-muted); }

.highlight-band { background: var(--lighter); padding: 4rem 2rem; text-align: center; }
.highlight-band h2 { font-family: 'Russo One', sans-serif; font-size: 1.8rem; color: var(--yellow); margin-bottom: 1.2rem; }
.highlight-band p { max-width: 700px; margin: 0 auto 1rem; font-weight: 300; color: var(--txt-muted); }

.content-doc { max-width: 880px; margin: 0 auto; padding: 4rem 2rem; }
.content-doc h1 { font-family: 'Russo One', sans-serif; font-size: 2.5rem; color: var(--yellow); text-align: center; margin-bottom: 2.5rem; }
.content-doc h2 { font-family: 'Russo One', sans-serif; font-size: 1.1rem; color: var(--electric); margin: 2rem 0 0.7rem; }
.content-doc p { font-weight: 300; margin-bottom: 1rem; color: var(--txt-muted); }
.content-doc ul { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.content-doc li { font-weight: 300; margin-bottom: 0.5rem; color: var(--txt-muted); }

.play-arena { max-width: 860px; margin: 0 auto; padding: 4rem 2rem; text-align: center; }
.play-arena h1 { font-family: 'Russo One', sans-serif; font-size: 2.5rem; color: var(--yellow); margin-bottom: 1rem; }
.play-arena > p { font-weight: 300; margin-bottom: 2rem; color: var(--txt-muted); }

.power-footer { background: var(--panel); border-top: 3px solid var(--yellow); padding: 2.5rem 2rem; text-align: center; }
.pf-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1rem; }
.pf-links a { color: var(--txt-muted); font-size: 0.85rem; }
.pf-links a:hover { color: var(--yellow); }
.pf-copy { font-size: 0.8rem; color: var(--txt-muted); opacity: 0.5; }

.age-bolt {
  position: fixed; inset: 0; background: rgba(10,22,40,0.95); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}

.age-panel-v {
  background: var(--panel); border: 2px solid var(--yellow); padding: 3rem;
  text-align: center; max-width: 430px; width: 90%;
}
.age-panel-v h2 { font-family: 'Russo One', sans-serif; font-size: 1.4rem; color: var(--yellow); margin-bottom: 1rem; }
.age-panel-v p { font-weight: 300; margin-bottom: 2rem; color: var(--txt-muted); }
.age-v-btns { display: flex; gap: 1rem; justify-content: center; }
.age-v-btns button { padding: 10px 30px; font-family: 'Russo One', sans-serif; font-size: 0.9rem; cursor: pointer; transition: 0.3s; border: none; }
.av-yes { background: var(--yellow); color: var(--dark); }
.av-yes:hover { background: var(--yellow-light); }
.av-no { background: var(--lighter); color: var(--txt-muted); }
.av-no:hover { background: var(--dark); }

@media (max-width: 900px) {
  .vl-burger { display: block; }
  .vl-nav { position: fixed; top: 70px; right: -100%; width: 70%; max-width: 280px; height: calc(100vh - 70px); background: var(--panel); flex-direction: column; padding: 2rem; gap: 1.2rem; border-left: 2px solid var(--yellow); transition: right 0.3s; }
  .vl-nav.open { right: 0; }
  .geo-hero { grid-template-columns: 1fr; padding: 3rem 1.5rem; }
  .gh-text h1 { font-size: 2.2rem; }
  .zap-strip { grid-template-columns: 1fr; }
  .zs-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .block-grid { grid-template-columns: 1fr; }
  .vl-frame iframe { height: 380px; }
}

@media (max-width: 480px) {
  .gh-text h1 { font-size: 1.7rem; }
  .bold-header { padding: 0 1rem; }
  .vl-frame iframe { height: 280px; }
}