/* GALAXTARUS LANDING — styles partagés */

:root {
  --bg-0: #050811;
  --bg-1: #0a1124;
  --bg-2: #121a36;
  --ink: #e2ecff;
  --ink-dim: #8b9bc7;
  --ink-deep: #5a6890;
  --magenta: #ff4dd6;
  --magenta-glow: #c065ff;
  --cyan: #4dffee;
  --cyan-dim: #2ab8aa;
  --yellow: #ffcc44;
  --yellow-dim: #b88800;
  --border: rgba(192, 101, 255, 0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-0);
  color: var(--ink);
  font-family: 'Georgia', 'Times New Roman', serif;
  line-height: 1.7;
  font-size: 18px;
  overflow-x: hidden;
}
.mono { font-family: 'Consolas', 'Menlo', 'Courier New', monospace; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: #fff; }

/* NAV */
nav.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px;
  background: linear-gradient(180deg, rgba(5,8,17,0.92) 0%, rgba(5,8,17,0) 100%);
  backdrop-filter: blur(4px);
}
nav.top .brand { font-family: 'Consolas', monospace; font-size: 13px; letter-spacing: 4px; color: var(--magenta); text-transform: uppercase; }
nav.top .brand a { color: var(--magenta); }
nav.top .brand b { color: #fff; font-weight: 700; }
nav.top .brand a:hover, nav.top .brand a:hover b { color: var(--cyan); }
nav.top .center { display: flex; gap: 28px; font-family: 'Consolas', monospace; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }
nav.top .center a { color: var(--ink-dim); padding-bottom: 4px; }
nav.top .center a.active { color: #fff; border-bottom: 1px solid var(--magenta); }
nav.top .center a:hover { color: #fff; }

.lang-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 3px; font-family: 'Consolas', monospace; font-size: 11px; overflow: hidden; }
.lang-toggle button { background: transparent; color: var(--ink-dim); border: 0; padding: 6px 12px; cursor: pointer; letter-spacing: 1px; }
.lang-toggle button.active { background: var(--magenta); color: var(--bg-0); font-weight: 700; }
.lang-toggle button:hover:not(.active) { color: #fff; }

/* SECTIONS */
section { position: relative; padding: 140px 32px; max-width: 1100px; margin: 0 auto; }
section p { color: var(--ink); max-width: 680px; margin-bottom: 28px; }
section p.lead { font-size: 22px; line-height: 1.5; color: #fff; max-width: 680px; }
section .kicker { font-family: 'Consolas', monospace; font-size: 11px; letter-spacing: 5px; color: var(--magenta); text-transform: uppercase; margin-bottom: 28px; display: block; }
section h2 { font-family: 'Georgia', serif; font-size: 56px; font-weight: 400; color: #fff; line-height: 1.05; margin-bottom: 36px; letter-spacing: -1px; max-width: 720px; }
section h2 em { font-style: italic; color: var(--cyan); font-weight: 400; }
section h2 .pink { color: var(--magenta); font-style: italic; }
section h2 .yellow { color: var(--yellow); font-style: italic; }
section .sig { font-family: 'Consolas', monospace; color: var(--ink-deep); font-size: 12px; letter-spacing: 2px; margin-top: 16px; }

/* HERO */
.hero { min-height: 80vh; padding: 140px 32px 80px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 1100px; margin: 0 auto; position: relative; }
.hero h1 {
  font-family: 'Georgia', serif; font-weight: 400;
  font-size: 88px; line-height: 1; color: #fff; letter-spacing: -2px;
  margin-bottom: 36px;
  text-shadow: 0 0 60px rgba(255,77,214,0.3);
  max-width: 900px;
}
.hero h1 em { font-style: italic; color: var(--magenta); }
.hero h1 .cyan { color: var(--cyan); font-style: italic; }
.hero h1 .yellow { color: var(--yellow); font-style: italic; }
.hero .tag { font-size: 21px; color: var(--ink); max-width: 640px; margin-bottom: 48px; line-height: 1.5; }
.hero .pill { display: inline-block; font-family: 'Consolas', monospace; font-size: 11px; letter-spacing: 5px; color: var(--magenta); text-transform: uppercase; padding: 8px 16px; border: 1px solid var(--border); border-radius: 2px; margin-bottom: 36px; }

.cta {
  display: inline-block; padding: 16px 32px;
  background: transparent; border: 1px solid var(--magenta);
  color: var(--magenta); font-family: 'Consolas', monospace;
  letter-spacing: 3px; font-size: 12px; text-transform: uppercase;
  transition: all 0.25s; cursor: pointer; margin-right: 12px;
}
.cta:hover { background: var(--magenta); color: var(--bg-0); box-shadow: 0 0 32px rgba(255,77,214,0.5); }
.cta.ghost { border-color: var(--ink-dim); color: var(--ink-dim); }
.cta.ghost:hover { border-color: var(--cyan); background: transparent; color: var(--cyan); box-shadow: none; }

/* THREE PATHS (index) */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 100px auto 60px; max-width: 1100px; padding: 0 32px; }
.path { padding: 40px 30px; border: 1px solid var(--border); border-radius: 4px; background: rgba(10,17,36,0.4); transition: all 0.25s; text-decoration: none; display: block; color: var(--ink); }
.path:hover { transform: translateY(-4px); border-color: var(--magenta); background: rgba(10,17,36,0.6); }
.path .pkicker { font-family: 'Consolas', monospace; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 16px; }
.path .ptitle { font-family: 'Georgia', serif; font-size: 32px; color: #fff; line-height: 1.1; margin-bottom: 20px; font-weight: 400; }
.path .ptitle em { font-style: italic; color: var(--magenta); }
.path .ptitle .cyan { color: var(--cyan); font-style: italic; }
.path .ptitle .yellow { color: var(--yellow); font-style: italic; }
.path .pdesc { font-size: 15px; line-height: 1.6; color: var(--ink); margin-bottom: 24px; }
.path .parrow { font-family: 'Consolas', monospace; font-size: 11px; letter-spacing: 3px; color: var(--magenta); text-transform: uppercase; }
.path:hover .parrow { color: var(--cyan); }

/* IMAGE PLACEHOLDERS */
.imgph { aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(10,17,36,0.6), rgba(6,9,17,0.6)); border: 1px dashed var(--ink-deep); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--ink-deep); font-family: 'Consolas', monospace; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin: 40px 0; padding: 24px; text-align: center; }
.imgph .imgph-label { color: var(--magenta); font-weight: 700; }
.imgph .imgph-desc { color: var(--ink-dim); font-size: 10px; letter-spacing: 2px; max-width: 360px; line-height: 1.6; text-transform: none; font-family: 'Georgia', serif; }
.imgph.square { aspect-ratio: 1/1; }
.imgph.tall { aspect-ratio: 3/4; }

/* SPLIT */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
.split.reverse { grid-template-columns: 1fr 1.1fr; }
.split.reverse .text { order: 2; }
.split.reverse .visual { order: 1; }
.visual { position: relative; }

/* PULL QUOTE */
.pullquote {
  max-width: 900px; margin: 0 auto; text-align: center;
  padding: 120px 32px;
  font-family: 'Georgia', serif; font-size: 38px; line-height: 1.3;
  color: var(--ink); font-style: italic; letter-spacing: -0.5px;
}
.pullquote .accent { color: var(--magenta); }
.pullquote .sub { display: block; margin-top: 28px; font-style: normal; font-family: 'Consolas', monospace; font-size: 12px; letter-spacing: 4px; color: var(--ink-deep); text-transform: uppercase; }

/* TABLES (tech) */
table.spec { width: 100%; max-width: 900px; margin: 40px 0; border-collapse: collapse; font-family: 'Consolas', monospace; font-size: 14px; }
table.spec th, table.spec td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.spec th { color: var(--magenta); text-transform: uppercase; font-size: 11px; letter-spacing: 3px; font-weight: 700; }
table.spec td { color: var(--ink); }
table.spec td:first-child { color: var(--cyan); white-space: nowrap; }

/* CODE BLOCKS */
pre.code { background: #060911; border: 1px solid var(--border); border-radius: 4px; padding: 24px; overflow-x: auto; font-family: 'Consolas', monospace; font-size: 13px; line-height: 1.6; color: var(--ink); margin: 24px 0; max-width: 900px; }
pre.code .key { color: var(--magenta); }
pre.code .str { color: var(--cyan); }
pre.code .com { color: var(--ink-deep); }

/* DIVIDER */
.divider { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.divider hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* CHAPTER GRID */
.chapters-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 40px 0; max-width: 1000px; }
.chapter { padding: 14px 12px; border: 1px solid var(--border); border-radius: 3px; background: rgba(10,17,36,0.3); font-family: 'Consolas', monospace; font-size: 12px; line-height: 1.4; }
.chapter .num { color: var(--ink-deep); letter-spacing: 2px; margin-bottom: 6px; font-size: 10px; }
.chapter .ttl { color: var(--ink); }
.chapter.played { border-color: var(--magenta); background: linear-gradient(135deg, rgba(255,77,214,0.08), rgba(10,17,36,0.4)); }
.chapter.played .ttl { color: #fff; font-weight: 700; }
.chapter.played .num { color: var(--magenta); }
.chapter.locked { opacity: 0.45; }

/* PLEDGE STRIP */
.pledge-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.tier { padding: 24px; border: 1px solid var(--border); border-radius: 4px; background: rgba(10,17,36,0.4); transition: all 0.2s; }
.tier:hover { border-color: var(--magenta); transform: translateY(-3px); }
.tier .price { font-family: 'Consolas', monospace; font-size: 24px; color: var(--magenta); margin-bottom: 4px; }
.tier .name { font-family: 'Consolas', monospace; font-size: 11px; letter-spacing: 2px; color: var(--ink-dim); text-transform: uppercase; margin-bottom: 14px; }
.tier .desc { font-size: 14px; line-height: 1.5; color: var(--ink); font-family: 'Georgia', serif; }
.tier.signature { border-color: var(--yellow-dim); background: linear-gradient(180deg, rgba(255,204,68,0.05), rgba(10,17,36,0.4)); }
.tier.signature .price { color: var(--yellow); }

/* FOOTER */
footer { padding: 80px 32px 60px; border-top: 1px solid var(--border); text-align: center; color: var(--ink-deep); font-family: 'Consolas', monospace; font-size: 12px; letter-spacing: 2px; max-width: 1100px; margin: 80px auto 0; }
footer .pages { margin-bottom: 28px; }
footer .pages a { margin: 0 12px; color: var(--ink-dim); }
footer .pages a:hover { color: #fff; }
footer .links { margin-bottom: 28px; }
footer .links a { margin: 0 16px; }

/* RESPONSIVE */
@media (max-width: 820px) {
  section { padding: 80px 24px; }
  .hero h1 { font-size: 48px; }
  .hero .tag { font-size: 17px; }
  section h2 { font-size: 32px; }
  section p { font-size: 16px; }
  section p.lead { font-size: 18px; }
  .split, .split.reverse { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse .text, .split.reverse .visual { order: unset; }
  .pullquote { font-size: 22px; padding: 60px 24px; }
  .cta { display: block; margin-bottom: 12px; margin-right: 0; text-align: center; }
  .paths { grid-template-columns: 1fr; padding: 0 24px; }
  .chapters-grid { grid-template-columns: repeat(2, 1fr); }
  .pledge-strip { grid-template-columns: 1fr; }
  nav.top { padding: 12px 14px; gap: 8px; flex-wrap: wrap; }
  nav.top .center { display: none; }
  table.spec { font-size: 12px; }
  table.spec th, table.spec td { padding: 10px 8px; }
}

/* ANIMATIONS */
.star { fill: #fff; animation: twinkle 3s infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.ship-drift { animation: drift 12s ease-in-out infinite; }
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}
.havoc-eye { animation: havoc-charge 5s ease-in-out infinite; transform-origin: center; }
@keyframes havoc-charge {
  0%, 30% { opacity: 0.5; }
  50% { opacity: 1; filter: drop-shadow(0 0 24px #ffcc44); }
  70%, 100% { opacity: 0.5; }
}
.los-portrait { animation: los-glitch 7s infinite; }
@keyframes los-glitch {
  0%, 92%, 100% { transform: translate(0,0); }
  93% { transform: translate(-2px, 1px); }
  94% { transform: translate(2px, -1px); }
  95% { transform: translate(-1px, 0); }
  96% { transform: translate(0, 1px); }
}