/* ============================================================
   RAMEZWARE — base.css
   Variables, reset, typography, shared utilities
   ============================================================ */

:root {
  --ink:       #0a0a0f;
  --deep:      #0f0f1a;
  --surface:   #13131f;
  --card:      #1a1a2e;
  --border:    rgba(255,255,255,0.07);
  --ember:     #e8622a;
  --ember-dim: #c44a18;
  --gold:      #c9a84c;
  --steel:     #8a9bb8;
  --mist:      #b8c4d4;
  --white:     #f0eeeb;
  --glow:      rgba(232,98,42,0.15);
  --nav-h:     68px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img  { display: block; max-width: 100%; }

body {
  background: var(--ink);
  color: var(--mist);
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none;
}

/* Grain overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 1000; opacity: 0.5;
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeUp    { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes gridDrift { 0%{ transform:translateY(0); } 100%{ transform:translateY(60px); } }
@keyframes runeFloat { 0%,100%{ transform:translateY(0) rotate(45deg); } 50%{ transform:translateY(-18px) rotate(52deg); } }
@keyframes ticker    { 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

.fade-up { opacity:0; transform:translateY(20px); transition:opacity 0.7s, transform 0.7s; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ── Shared section styles ──────────────────────────────────── */
section { padding:7rem 3rem; position:relative; }

.section-label {
  font-family:'DM Mono',monospace; font-size:.68rem;
  letter-spacing:.25em; text-transform:uppercase; color:var(--ember);
  margin-bottom:1rem; display:flex; align-items:center; gap:.7rem;
}
.section-label::before { content:''; display:block; width:24px; height:1px; background:var(--ember); }

.section-title { font-family:'Cinzel',serif; font-size:clamp(1.8rem,4vw,3.2rem); font-weight:700; color:var(--white); line-height:1.1; margin-bottom:1.2rem; }
.section-body  { font-size:1rem; color:var(--steel); max-width:560px; line-height:1.8; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--ember); color:var(--white); text-decoration:none;
  font-family:'DM Mono',monospace; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.9rem 2rem; border:none; cursor:pointer;
  position:relative; overflow:hidden;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.btn-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.1),transparent); opacity:0; transition:opacity .2s; }
.btn-primary:hover { background:var(--ember-dim); transform:translateY(-2px); box-shadow:0 8px 30px rgba(232,98,42,.35); }
.btn-primary:hover::before { opacity:1; }

.btn-outline {
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid var(--border); color:var(--mist); text-decoration:none;
  font-family:'DM Mono',monospace; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.9rem 2rem; transition:border-color .2s, color .2s, transform .2s;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }