/* Base layer (reset + utilities) */
:root {
  --s-dark: #07080c;
  --s-dark2: #10131b;
  --s-gold: #c9a227;
  --s-gold-soft: #e6c866;
  --s-gold-glow: rgba(201,162,39,0.35);
  --s-blue: #0066cc;
  --s-blue-glow: rgba(0,102,204,0.35);
  --s-ink: #e6e1d6;
  --s-muted: #918a7c;
  --s-edge: rgba(201,162,39,0.18);
  --s-mist: rgba(201,162,39,0.07);
  --s-mist-strong: rgba(201,162,39,0.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 28%, var(--s-dark2) 0%, var(--s-dark) 60%);
  color: var(--s-ink);
  font-family: system-ui, -apple-system, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--s-gold-soft); text-decoration: none; }
a:hover { text-decoration: none; filter: brightness(1.1); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 4px;
  border: 1px solid rgba(201,162,39,0.35);
  color: #fff; background: var(--s-mist);
  font-weight: 500; letter-spacing: 0.06em;
  transition: all .22s ease;
  cursor: pointer;
}
.btn:hover {
  background: var(--s-mist-strong);
  border-color: var(--s-gold);
  box-shadow: 0 0 26px var(--s-gold-glow);
  transform: translateY(-1px);
}
.btn-primary {
  background: linear-gradient(180deg, rgba(0,102,204,0.35), rgba(0,102,204,0.15));
  border-color: rgba(0,102,204,0.6);
}
.btn-primary:hover {
  box-shadow: 0 0 26px var(--s-blue-glow);
}

/* Sections */
.section {
  padding: 64px 24px;
}
.container { max-width: 1200px; margin: 0 auto; }
.grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: linear-gradient(180deg, rgba(16,19,27,0.9), rgba(7,8,12,0.9));
  border: 1px solid var(--s-edge); border-radius: 10px;
  padding: 22px; backdrop-filter: blur(10px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--s-gold);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 30px var(--s-gold-glow);
}

/* Reveal on scroll */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Utilities */
.text-gold { color: var(--s-gold); }
.muted { color: var(--s-muted); }
.divider {
  height: 1px; width: 80px; margin: 24px auto;
  background: linear-gradient(90deg, transparent, var(--s-gold), transparent);
}