/* ============================================================
   RAMEZWARE — hero.css
   Hero section + ticker + stats
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden; padding:8rem 3rem 4rem;
  /* Fallback: visible even without the hero image asset */
  background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(232,98,42,0.12) 0%, transparent 70%), var(--ink);
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 55% 90% at 10% 50%, rgba(10,10,15,.95) 0%, transparent 100%),
    radial-gradient(ellipse 40% 60% at 5% 90%, rgba(201,168,76,.04) 0%, transparent 70%);
}
.hero-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,black 30%,transparent 70%);
  animation:gridDrift 20s linear infinite;
}
.hero-img-bg {
  position:absolute; right:0; top:0; bottom:0;
  width:62%; object-fit:cover; object-position:center top;
  opacity:.6;
  mask-image:linear-gradient(to left, rgba(0,0,0,1) 20%, rgba(0,0,0,.5) 55%, transparent 100%);
  -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,1) 20%, rgba(0,0,0,.5) 55%, transparent 100%);
  pointer-events:none; user-select:none;
}

.rune { position:absolute; border:1px solid; opacity:.06; animation:runeFloat linear infinite; }
.rune:nth-child(1) { width:120px; height:120px; top:15%; right:12%; border-color:var(--ember); animation-duration:18s; }
.rune:nth-child(2) { width: 60px; height: 60px; top:65%; right:25%; border-color:var(--gold);  animation-duration:12s; animation-delay:-4s; }
.rune:nth-child(3) { width:200px; height:200px; top:30%; right: 5%; border-color:var(--steel); animation-duration:25s; border-radius:40px; }
.rune:nth-child(4) { width: 80px; height: 80px; top:75%; left:  8%; border-color:var(--ember); animation-duration:15s; animation-delay:-8s; }

.hero-content { position:relative; z-index:2; max-width:680px; }

/* Keyframes duplicated here so hero content is never invisible
   even if base.css fails to load first */
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }

.hero-eyebrow { font-family:'DM Mono',monospace; font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; color:var(--ember); margin-bottom:1.5rem; display:flex; align-items:center; gap:.8rem; animation:fadeUp .8s .2s both; }
.hero-eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--ember); }

.hero-title { font-family:'Cinzel',serif; font-size:clamp(2.8rem,7vw,6.5rem); font-weight:900; color:var(--white); line-height:1; letter-spacing:-.01em; margin-bottom:1rem; animation:fadeUp .9s .35s both; }
.hero-title .ember { color:var(--ember); }

.hero-sub { font-size:clamp(.95rem,2.5vw,1.15rem); color:var(--steel); max-width:500px; margin-bottom:3rem; animation:fadeUp .9s .5s both; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; animation:fadeUp .9s .65s both; }

/* ── Ticker ─────────────────────────────────────────────────── */
.ticker { background:var(--ember); padding:.6rem 0; overflow:hidden; white-space:nowrap; }
.ticker-inner { display:inline-block; animation:ticker 30s linear infinite; font-family:'DM Mono',monospace; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.ticker-sep { margin:0 2rem; opacity:.5; }

/* ── Stats ──────────────────────────────────────────────────── */
.stats { background:var(--surface); padding:4rem 3rem; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stats-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item { text-align:center; padding:2rem 1rem; position:relative; }
.stat-item::after { content:''; position:absolute; right:0; top:20%; bottom:20%; width:1px; background:var(--border); }
.stat-item:last-child::after { display:none; }
.stat-num { font-family:'Cinzel',serif; font-size:clamp(2rem,4vw,3rem); font-weight:900; color:var(--white); line-height:1; margin-bottom:.4rem; }
.stat-num .accent { color:var(--ember); }
.stat-label { font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--steel); }