/* =========================================================
   NALYORA — base.css
   Variables, reset, fond étoilé, boutons, titres de section.
   ========================================================= */

:root {
  --bg: #040a1c;
  --bg-2: #071330;
  --bg-3: #0b1d45;
  --card: rgba(14, 32, 74, 0.55);
  --card-border: rgba(110, 180, 255, 0.16);
  --text: #eaf3ff;
  --muted: #9db4d6;
  --blue: #2b86ff;
  --blue-2: #1f5ee0;
  --cyan: #5fd0ff;
  --ice: #bfe9ff;
  --glow: 0 0 24px rgba(64, 160, 255, 0.55);
  --radius: 18px;
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Lilita One", "Outfit", sans-serif;
  --font-pixel: "Silkscreen", monospace;
  --nav-h: 64px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

.container { width: min(1180px, 100% - 40px); margin-inline: auto; }

/* ---------- Fond étoilé ---------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(43, 134, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(95, 208, 255, 0.08), transparent 70%),
    linear-gradient(180deg, #06102a 0%, var(--bg) 60%);
  pointer-events: none;
}
.sky canvas { width: 100%; height: 100%; display: block; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform .15s, box-shadow .2s, background .2s, filter .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(2px); }
.btn-primary {
  background: linear-gradient(180deg, #4aa3ff 0%, var(--blue) 50%, var(--blue-2) 100%);
  box-shadow: 0 4px 0 #123f9e, 0 8px 24px rgba(43, 134, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.35);
  color: #fff;
}
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 4px 0 #123f9e, 0 10px 34px rgba(43, 134, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-primary:active { box-shadow: 0 2px 0 #123f9e, 0 6px 18px rgba(43, 134, 255, 0.35); }
.btn-ghost {
  background: rgba(30, 60, 130, 0.35);
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 0 rgba(4, 12, 34, 0.9);
}
.btn-ghost:hover { background: rgba(43, 100, 200, 0.4); }
.btn-ice {
  background: linear-gradient(180deg, #e6f7ff, #a9dcff);
  color: #0a2a66;
  box-shadow: 0 4px 0 #5c9fd6, 0 8px 22px rgba(95, 208, 255, 0.35);
}
.btn-ice:hover { filter: brightness(1.05); }
.btn-discord {
  background: linear-gradient(180deg, #7984ff, #5865f2);
  color: #fff;
  box-shadow: 0 4px 0 #3a43b8, 0 8px 24px rgba(88, 101, 242, 0.4);
}
.btn-discord:hover { filter: brightness(1.08); }
.btn-lg { padding: 15px 26px; font-size: 1.02rem; border-radius: 16px; }

.btn-ip {
  font-family: var(--font-pixel);
  letter-spacing: 0.12em;
  font-size: 1.05rem;
  text-transform: uppercase;
  min-width: 260px;
}
.btn-ip .label-copied { display: none; }
.btn-ip.copied .label-ip { display: none; }
.btn-ip.copied .label-copied { display: inline; }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: 110px 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--cyan); box-shadow: 14px 0 0 rgba(95, 208, 255, .45); margin-right: 14px; }

.title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}
.title .hl {
  background: linear-gradient(180deg, #d6f3ff, #5fd0ff 60%, #2b86ff);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(64, 160, 255, 0.45));
}
.lead { color: var(--muted); font-size: 1.08rem; max-width: 560px; margin: 0 0 28px; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }