/* =====================================================================
   BATTLE THE AI
   ===================================================================== */
.battle{position:relative;overflow:hidden}
.battle .container{position:relative;z-index:2}
.battle-head{display:flex;justify-content:space-between;align-items:center;gap:40px}
.battle-copy{flex:1 1 560px;max-width:640px}
.battle h2{
  font-family:var(--serif);font-weight:900;font-size:64px;line-height:1.0;
  letter-spacing:-1.28px;color:var(--ink);margin-bottom:0;
}
.battle h2 .alt{display:block;color:var(--gold-logo)}
.battle .sub{margin-top:22px;font-size:16px;color:var(--ink-muted)}
.battle-art{
  flex:0 0 auto;position:relative;
  width:clamp(240px,30vw,330px);height:clamp(360px,46vw,470px);
}
/* two swords overlaid centred = crossed X (Figma) */
.battle-art .sword{
  position:absolute;top:0;left:50%;height:100%;width:auto;
  transform:translateX(-50%);transform-origin:50% 62%;
  transition:transform .5s cubic-bezier(.2,.7,.25,1), filter .5s ease;
}
.battle-art::before{
  content:"";position:absolute;inset:-40px;z-index:-1;
  background:radial-gradient(circle,rgba(201,134,58,.10),transparent 65%);
}

.steps{display:flex;gap:18px;flex-wrap:wrap;margin:48px 0 40px}
.step{display:flex;align-items:center;gap:18px}
.step .num{
  width:34px;height:34px;border-radius:18px;flex:0 0 34px;
  background:#291908;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:13px;color:#fdc98f;
}
.step .txt b{display:block;font-size:13px;font-weight:700;color:var(--ink-muted);line-height:1.5}
.step .txt span{display:block;font-size:12px;color:var(--ink);line-height:1.5}
.step .arrow{color:var(--gold);font-size:18px;opacity:.6;margin:0 6px}
.step:last-child .arrow{display:none}
/* subtle hover on each step */
.step{cursor:default}
.step .num,.step .txt b{transition:border-color .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease}
.step:hover .num{border-color:var(--gold);background:#3a2410;color:#ffe9b8;box-shadow:0 0 14px rgba(201,134,58,.45)}
.step:hover .txt b{color:var(--gold-light)}

.battle-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.battle-note{font-size:14px;color:var(--ink-muted)}
.battle-note .buy{color:var(--gold-btn)}
.battle-note .buy:hover{color:var(--gold-light)}