@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=EB+Garamond:ital@0;1&display=swap');

:root{
  --gold:#d2a532; --gold-bright:#f0e096; --gold-dim:#9a7320;
  --cream:#ede0b2; --parch:#b8a578; --ink:#8a7858;
  --bg:#0e0a04; --panel:#1c1409; --border:rgba(200,162,60,.30);
  --blue:#7fb0e8; --red:#e87a6a;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:#0e0a04; color:var(--parch);
  font-family:'EB Garamond',Georgia,serif; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--gold); text-decoration:none}
a:hover{color:var(--cream)}
.cinzel{font-family:'Cinzel',serif}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}

/* ── Nav ───────────────────────────────────────────── */
nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:14px;
  padding:14px 24px;
  background:linear-gradient(180deg,rgba(14,10,4,.96),rgba(14,10,4,.7));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav .brand{display:flex; align-items:center; gap:11px; font-family:'Cinzel',serif;
  font-weight:700; letter-spacing:2px; color:var(--cream); font-size:17px}
nav .brand img{width:30px; height:30px; border-radius:7px}
nav .spacer{flex:1}
nav .links a{font-family:'Cinzel',serif; font-size:12px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--parch); margin-left:22px}
nav .links a:hover{color:var(--gold)}
@media(max-width:620px){ nav .links a{margin-left:14px; font-size:11px} nav .brand span{display:none} }

/* ── Hero ──────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding:90px 24px 80px; text-align:center;
}
.hero-bg{position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:sepia(.5) brightness(.4) contrast(1.05);
  opacity:.55;
  animation:slowzoom 24s ease-in-out infinite alternate;
}
@keyframes slowzoom{from{transform:scale(1.05)}to{transform:scale(1.18)}}
.hero-scrim{position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(0,0,0,0), rgba(8,5,2,.85) 75%),
    linear-gradient(180deg, rgba(14,10,4,.85), rgba(14,10,4,.4) 40%, rgba(14,10,4,.97));
}
.hero-inner{position:relative; z-index:2; max-width:760px; margin:0 auto}
.hero .icon{width:120px; height:120px; border-radius:26px; margin:0 auto 26px; display:block;
  box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 0 1px var(--border);}
.hero h1{font-family:'Cinzel',serif; font-weight:900; color:#f2e8c4;
  font-size:clamp(44px,9vw,84px); letter-spacing:6px; line-height:1;
  text-shadow:0 4px 26px rgba(0,0,0,.8), 0 0 34px rgba(210,165,80,.22)}
.hero .eyebrow{font-family:'Cinzel',serif; font-size:12px; letter-spacing:4px;
  text-transform:uppercase; color:var(--gold-dim); margin-bottom:14px}
.hero .tag{font-size:clamp(17px,3.6vw,22px); font-style:italic; color:var(--parch);
  margin:18px auto 6px; max-width:560px}
.divider{width:90px; height:2px; margin:22px auto;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.btn{display:inline-flex; align-items:center; gap:9px;
  font-family:'Cinzel',serif; font-weight:700; letter-spacing:1px; font-size:15px;
  padding:15px 28px; border-radius:13px; cursor:pointer; transition:transform .12s, box-shadow .12s}
.btn-primary{color:#f2e8c4;
  background:linear-gradient(180deg,#3a2c12,#241a0b);
  border:1.4px solid rgba(210,165,50,.7);
  box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 18px rgba(210,165,50,.12)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 26px rgba(210,165,50,.25); color:#fff}
.btn-ghost{color:var(--parch); background:rgba(34,26,9,.5); border:1px solid var(--border)}
.btn-ghost:hover{color:var(--gold); border-color:var(--gold)}
.coming{margin-top:18px; font-size:13px; color:var(--ink); font-style:italic; letter-spacing:.5px}

/* ── Sections ─────────────────────────────────────── */
section{padding:72px 0}
.section-eyebrow{font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold-dim); text-align:center}
.section-title{font-family:'Cinzel',serif; color:var(--cream);
  font-size:clamp(28px,5vw,40px); letter-spacing:1px; text-align:center; margin:8px 0 6px;
  text-shadow:0 2px 10px rgba(0,0,0,.5)}
.section-sub{text-align:center; color:var(--ink); font-style:italic; max-width:560px;
  margin:0 auto 40px; font-size:16px}

/* feature grid */
.features{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media(max-width:680px){ .features{grid-template-columns:1fr} }
.feature{
  background:linear-gradient(160deg,rgba(38,28,14,.65),rgba(18,10,3,.85));
  border:1px solid var(--border); border-radius:14px; padding:24px 22px;
  transition:border-color .15s, transform .15s;
}
.feature:hover{border-color:rgba(210,165,50,.55); transform:translateY(-3px)}
.feature .ic{font-size:26px; margin-bottom:12px}
.feature h3{font-family:'Cinzel',serif; color:var(--gold-bright); font-size:18px;
  letter-spacing:.5px; margin-bottom:8px}
.feature p{color:var(--parch); font-size:15.5px}

/* battlefields */
.fields{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media(max-width:680px){ .fields{grid-template-columns:1fr} }
.field{position:relative; height:240px; border-radius:16px; overflow:hidden;
  border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.4)}
.field img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:sepia(.45) brightness(.78) contrast(1.05); transition:transform .5s}
.field:hover img{transform:scale(1.07)}
.field .grad{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(14,10,4,.1),rgba(10,7,3,.94))}
.field .meta{position:absolute; left:20px; right:20px; bottom:18px; z-index:2}
.field .date{font-family:'Cinzel',serif; font-size:10px; letter-spacing:2px;
  color:var(--gold-dim); text-transform:uppercase}
.field h3{font-family:'Cinzel',serif; color:var(--cream); font-size:24px; letter-spacing:.5px; margin:3px 0 4px;
  text-shadow:0 2px 8px #000}
.field p{color:var(--parch); font-size:14px; font-style:italic}

/* tactics strip */
.tactics{background:
  linear-gradient(180deg,rgba(20,15,8,.6),rgba(10,7,3,.85)),
  repeating-linear-gradient(-45deg,transparent,transparent 32px,rgba(120,90,30,.03) 32px,rgba(120,90,30,.03) 33px);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.tlist{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:920px; margin:0 auto}
@media(max-width:680px){ .tlist{grid-template-columns:1fr} }
.tline{display:flex; gap:12px; align-items:flex-start}
.tline .b{width:9px; height:9px; border-radius:50%; margin-top:8px; flex:0 0 auto;
  background:var(--gold); box-shadow:0 0 8px rgba(210,165,50,.6)}
.tline strong{color:var(--cream); font-family:'Cinzel',serif; font-weight:700; font-size:15px; letter-spacing:.3px}
.tline span{color:var(--ink); font-size:14px}

/* footer */
footer{border-top:1px solid var(--border); padding:46px 24px; text-align:center}
footer .brand{font-family:'Cinzel',serif; color:var(--cream); font-size:20px; letter-spacing:3px; margin-bottom:10px}
footer .flinks a{font-family:'Cinzel',serif; font-size:12px; letter-spacing:1.5px;
  text-transform:uppercase; margin:0 12px; color:var(--parch)}
footer .copy{color:var(--ink); font-size:13px; margin-top:18px}

/* simple page (privacy/support) */
.page{max-width:720px; margin:0 auto; padding:60px 24px}
.page h1{font-family:'Cinzel',serif; color:var(--cream); font-size:clamp(30px,7vw,44px);
  letter-spacing:2px; margin-bottom:6px}
.page .updated{color:var(--ink); font-style:italic; margin-bottom:28px; font-size:14px}
.card{background:linear-gradient(160deg,rgba(38,28,14,.7),rgba(18,10,3,.9));
  border:1px solid var(--border); border-radius:16px; padding:30px;
  box-shadow:0 16px 48px rgba(0,0,0,.4); margin-bottom:18px}
.card h2{font-family:'Cinzel',serif; color:var(--gold); font-size:17px; letter-spacing:1px;
  margin:22px 0 10px} .card h2:first-child{margin-top:0}
.card p{margin-bottom:14px} .card ul{padding-left:22px; margin-bottom:14px} .card li{margin:6px 0}
.card strong{color:var(--cream)}