/* ============================================================
   OVERWATCH FAN HUB — style.css
   Visual language: kinetic navy/orange, clipped angles, condensed type
   ============================================================ */

@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:600;font-display:swap;src:url('../assets/fonts/barlow-condensed-600i.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:700;font-display:swap;src:url('../assets/fonts/barlow-condensed-700i.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:800;font-display:swap;src:url('../assets/fonts/barlow-condensed-800i.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/barlow-condensed-600.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/barlow-condensed-700.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/rajdhani-500.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/rajdhani-600.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/rajdhani-700.woff2') format('woff2');}

:root{
  --ink:#0a1322;
  --ink-2:#0e1a2e;
  --ink-3:#132138;
  --panel:#101c30;
  --line:rgba(168,190,220,.14);
  --line-strong:rgba(168,190,220,.3);
  --orange:#f89e1b;
  --orange-hot:#ffb431;
  --orange-deep:#e06f00;
  --blue:#3ea6ff;
  --tank:#5aa2ff;
  --damage:#ff7847;
  --support:#ffc93c;
  --text:#f2f6fd;
  --muted:#9db0cb;
  --font-display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:'Rajdhani', 'Segoe UI', sans-serif;
  --clip-btn:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  --nav-h:64px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(.7,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.modal-open{overflow:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul{list-style:none;}
svg{display:block;}
.wrap{width:min(1200px,92vw);margin-inline:auto;}

::selection{background:var(--orange);color:#160b00;}

.skip-link{
  position:fixed;top:-60px;left:16px;z-index:300;
  background:var(--orange);color:#160b00;font-family:var(--font-display);
  font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase;
  padding:.5rem 1.1rem;clip-path:var(--clip-btn);transition:top .2s;
}
.skip-link:focus{top:12px;}

:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}

/* ---------- typography helpers ---------- */
.kicker{
  font-family:var(--font-display);font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;font-size:15px;color:var(--orange);margin-bottom:.6rem;
}
.h-xl{
  font-family:var(--font-display);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.01em;line-height:.92;
  font-size:clamp(2.6rem,5.4vw,4.4rem);text-wrap:balance;
}
.h-xl em{font-style:italic;color:var(--orange);}
.lede{color:var(--muted);max-width:56ch;font-size:1.06rem;font-weight:500;}
.lede--center{margin-inline:auto;}

.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  margin-bottom:2.6rem;
}
.section-head--center{justify-content:center;text-align:center;}

/* angled section cuts */
.section-angle{
  --cut:60px;
  clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%);
  padding-top:calc(var(--cut) + 4.5rem);
  margin-top:calc(var(--cut) * -1);
  position:relative;
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px) skewY(.4deg);transition:opacity .7s var(--ease-out) var(--d,0s),transform .7s var(--ease-out) var(--d,0s);}
.reveal.in{opacity:1;transform:none;}

/* ---------- boot overlay ---------- */
.boot{
  position:fixed;inset:0;z-index:400;display:grid;place-content:center;justify-items:center;gap:1.4rem;
  background:radial-gradient(90% 90% at 50% 40%,#12203a 0%,var(--ink) 70%);
  transition:opacity .55s var(--ease-out),visibility .55s;
}
.boot__logo img{animation:boot-pulse 1.3s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(248,158,27,.45));}
@keyframes boot-pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.07);opacity:1}}
.boot__bar{width:230px;height:4px;background:rgba(255,255,255,.1);transform:skewX(-24deg);overflow:hidden;}
.boot__bar span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--orange-deep),var(--orange-hot));transition:width .25s var(--ease-out);}
.boot__text{font-family:var(--font-display);font-weight:600;letter-spacing:.3em;font-size:14px;color:var(--muted);text-transform:uppercase;}
body:not([data-loading]) .boot{opacity:0;visibility:hidden;pointer-events:none;}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--orange);--btn-fg:#1a0d00;
  display:inline-flex;align-items:center;gap:.6rem;position:relative;
  font-family:var(--font-display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:17px;padding:.78rem 1.7rem;background:var(--btn-bg);color:var(--btn-fg);
  clip-path:var(--clip-btn);transition:transform .18s var(--ease-snap),filter .18s,background .18s,color .18s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.09);}
.btn:active{transform:translateY(0) scale(.97);}
.btn::after{
  content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .5s var(--ease-out);
}
.btn:hover::after{transform:translateX(120%);}
.btn--ghost{--btn-bg:rgba(255,255,255,.06);--btn-fg:var(--text);box-shadow:inset 0 0 0 1.5px var(--line-strong);backdrop-filter:blur(6px);}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--orange);}
.btn--line{--btn-bg:transparent;--btn-fg:var(--text);box-shadow:inset 0 0 0 1.5px var(--orange);color:var(--orange);}
.btn--xl{font-size:21px;padding:1.05rem 2.3rem;}
.btn--nav{font-size:15px;padding:.55rem 1.2rem;}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:200;
  background:linear-gradient(180deg,rgba(8,15,28,.92),rgba(8,15,28,.75));
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,transform .3s;
}
.nav.is-scrolled{border-bottom-color:var(--line);background:rgba(8,15,28,.95);}
.nav__progress{position:absolute;top:0;left:0;right:0;height:2.5px;background:rgba(255,255,255,.06);}
.nav__progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange-deep),var(--orange-hot));}
.nav__inner{width:min(1300px,94vw);margin-inline:auto;height:var(--nav-h);display:flex;align-items:center;gap:2rem;}
.nav__brand{display:flex;align-items:center;gap:.7rem;}
.nav__mark{transition:transform .5s var(--ease-snap);}
.nav__brand:hover .nav__mark{transform:rotate(-30deg);}
.nav__word{font-family:var(--font-display);font-weight:800;font-style:italic;font-size:22px;letter-spacing:.09em;}
.nav__tag{
  font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.22em;
  color:var(--ink);background:var(--orange);padding:.15rem .5rem .05rem;
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
.nav__links{display:flex;gap:.4rem;margin-left:auto;}
.nav__links a{
  font-family:var(--font-display);font-weight:600;font-size:16.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:.45rem .9rem;position:relative;
  white-space:nowrap;transition:color .2s;
}
.nav__links a::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.2rem;height:2.5px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-snap);
}
.nav__links a:hover{color:var(--text);}
.nav__links a.is-active{color:var(--text);}
.nav__links a.is-active::after{transform:scaleX(1);}
.nav__actions{display:flex;align-items:center;gap:1rem;}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px;}
.nav__burger span{width:24px;height:2.4px;background:var(--text);transition:transform .25s,opacity .2s;}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg);}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg);}
.nav__mobile{
  position:absolute;top:var(--nav-h);inset-inline:0;background:rgba(8,15,28,.98);
  border-bottom:1px solid var(--line);display:flex;flex-direction:column;padding:.6rem 4vw 1.2rem;
}
.nav__mobile[hidden]{display:none;}
.nav__mobile a{
  font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.1em;
  text-transform:uppercase;padding:.75rem 0;border-bottom:1px solid var(--line);
}
.nav__mobile a:last-child{border-bottom:0;}
.nav__mobile-cta{color:var(--orange);}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 3rem) 0 7rem;overflow:hidden;isolation:isolate;
}
.hero__bg{
  position:absolute;inset:-8% -4%;z-index:-3;
  background:url('../assets/ui/masthead_2600.jpg') center 32%/cover no-repeat;
  will-change:transform;
}
.hero__veil{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(78deg,rgba(10,19,34,.96) 6%,rgba(10,19,34,.72) 38%,rgba(10,19,34,.2) 72%),
    linear-gradient(0deg,var(--ink) 0%,transparent 26%),
    linear-gradient(180deg,rgba(8,15,28,.7) 0%,transparent 30%);
}
.hero__grid-lines{
  position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(120,160,220,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,160,220,.05) 1px,transparent 1px);
  background-size:90px 90px;
  mask-image:linear-gradient(180deg,transparent,black 30%,black 70%,transparent);
}
.hero__content{width:min(1200px,92vw);margin-inline:auto;position:relative;}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-display);font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  font-size:14.5px;color:var(--orange-hot);
  background:rgba(248,158,27,.09);border:1px solid rgba(248,158,27,.35);
  padding:.4rem 1rem;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  margin-bottom:1.4rem;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--orange);display:inline-block;animation:blink 1.6s ease-in-out infinite;}
.dot--live{background:#4ade80;box-shadow:0 0 8px #4ade80;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.hero__title{
  font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(3.2rem,9.2vw,8rem);line-height:.9;letter-spacing:.005em;
  text-shadow:0 6px 40px rgba(0,0,0,.55);
}
.hero__title span{display:block;}
.hero__title-accent{
  color:transparent;
  background:linear-gradient(100deg,var(--orange-deep) 0%,var(--orange) 45%,var(--orange-hot) 80%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 26px rgba(248,158,27,.35));
}
.hero__sub{margin-top:1.5rem;font-size:clamp(1.05rem,1.7vw,1.3rem);color:#dce7f7;line-height:1.6;}
.hero__sub strong{color:var(--orange-hot);letter-spacing:.18em;font-weight:700;}
.hero__sub .sep{margin:0 .6em;color:var(--muted);}
.hero__sub span{color:var(--muted);}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem;}
.hero__platforms{margin-top:2.6rem;display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;}
.hero__platforms-label{
  font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);
}
.hero__platforms ul{display:flex;gap:.5rem;flex-wrap:wrap;}
.hero__platforms li{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:600;font-size:14.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#cfe0f5;background:rgba(255,255,255,.05);border:1px solid var(--line);
  padding:.45rem .95rem;transition:border-color .2s,color .2s,transform .2s;
}
.hero__platforms li svg{width:19px;height:19px;}
.hero__platforms li:hover{border-color:var(--orange);color:var(--orange-hot);transform:translateY(-2px);}
.hero__float{position:absolute;z-index:0;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));will-change:transform;opacity:.95;}
.hero__float img{
  border-radius:16px;transform:rotate(-4deg);
  border:1px solid rgba(255,255,255,.35);outline:3px solid rgba(10,19,34,.4);
}
.hero__float-name{
  position:absolute;left:50%;bottom:-12px;transform:translateX(-50%) rotate(-4deg);
  font-family:var(--font-display);font-weight:800;font-style:italic;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:#1a0d00;background:var(--orange);
  padding:.18rem .8rem .1rem;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.hero__float--1{right:6%;top:16%;width:min(300px,22vw);animation:floaty 7s ease-in-out infinite;}
.hero__float--2{right:24%;top:52%;width:min(230px,17vw);animation:floaty 9s ease-in-out infinite reverse;}
.hero__float--2 img{transform:rotate(5deg);}
.hero__float--3{right:3%;bottom:8%;width:min(190px,14vw);animation:floaty 8s ease-in-out 1.2s infinite;}
.hero__float--3 img{transform:rotate(-8deg);}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -16px}}
.hero__shards{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.hero__shards i{
  position:absolute;width:140px;height:3px;
  background:linear-gradient(90deg,transparent,rgba(248,158,27,.7),transparent);
  animation:shard 9s linear infinite;
}
.hero__shards i:nth-child(1){top:12%;left:-10%;animation-delay:0s;}
.hero__shards i:nth-child(2){top:26%;left:-10%;animation-delay:2.4s;width:80px;}
.hero__shards i:nth-child(3){top:44%;left:-10%;animation-delay:5s;}
.hero__shards i:nth-child(4){top:60%;left:-10%;animation-delay:1.2s;width:200px;background:linear-gradient(90deg,transparent,rgba(62,166,255,.55),transparent);}
.hero__shards i:nth-child(5){top:74%;left:-10%;animation-delay:6.4s;}
.hero__shards i:nth-child(6){top:34%;left:-10%;animation-delay:7.6s;background:linear-gradient(90deg,transparent,rgba(62,166,255,.55),transparent);}
.hero__shards i:nth-child(7){top:88%;left:-10%;animation-delay:3.8s;width:60px;}
.hero__shards i:nth-child(8){top:8%;left:-10%;animation-delay:8.4s;width:100px;}
@keyframes shard{0%{transform:translateX(0) rotate(-14deg);opacity:0}8%{opacity:1}100%{transform:translateX(130vw) rotate(-14deg);opacity:0}}
.hero__scrollcue{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.hero__scrollcue-text{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.4em;color:var(--muted);}
.hero__scrollcue-line{width:2px;height:44px;background:linear-gradient(180deg,var(--orange),transparent);animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* ---------- ticker ---------- */
.ticker{
  position:relative;z-index:5;display:flex;align-items:stretch;
  background:var(--orange);color:#1a0d00;
  clip-path:polygon(0 0,100% 12px,100% 100%,0 calc(100% - 12px));
  margin-top:-1px;padding-block:5px;
}
.ticker__label{
  display:flex;align-items:center;gap:.5rem;flex:none;
  font-family:var(--font-display);font-weight:800;font-style:italic;font-size:15px;letter-spacing:.22em;
  padding:.55rem 1.4rem;background:#160b00;color:var(--orange-hot);
  position:relative;z-index:2;
}
.ticker__track{
  display:flex;align-items:center;gap:3.5rem;white-space:nowrap;overflow:hidden;
  font-family:var(--font-display);font-weight:700;font-size:16.5px;letter-spacing:.12em;text-transform:uppercase;
  flex:1;
}
.ticker__track > span{padding-inline:1.2rem;position:relative;}
.ticker__track > span::after{content:"◆";position:absolute;right:-1.1rem;opacity:.5;font-size:11px;}
.ticker__track.js-run{display:inline-flex;animation:ticker 38s linear infinite;}
.ticker:hover .ticker__track.js-run{animation-play-state:paused;}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- season ---------- */
.season{background:linear-gradient(180deg,#0d1930 0%,#0a1426 100%);padding-bottom:6rem;overflow:hidden;}
.season__sky{
  position:absolute;inset:0;opacity:.16;pointer-events:none;
  background:url('../assets/ui/sky_1600.jpg') center top/cover no-repeat;
  mask-image:linear-gradient(180deg,black,transparent 75%);
}
.season__layout{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:4rem;align-items:center;}
.season__art{
  position:relative;margin:0;border:1px solid var(--line-strong);
  clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px);
  box-shadow:0 30px 80px rgba(0,0,0,.5);will-change:transform;
}
.season__art img{width:100%;height:auto;}
.season__art-badge{
  position:absolute;top:14px;left:14px;
  font-family:var(--font-display);font-weight:800;font-style:italic;font-size:15px;letter-spacing:.2em;
  color:#1a0d00;background:var(--orange);padding:.35rem .9rem .2rem;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.season__copy .lede{margin-top:1.1rem;}
.season__points{margin-top:1.8rem;display:flex;flex-direction:column;gap:1.1rem;}
.season__points li{
  display:flex;gap:1rem;align-items:center;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  padding:.8rem 1.1rem;transition:border-color .2s,transform .2s var(--ease-snap),background .2s;
}
.season__points li:hover{border-color:rgba(248,158,27,.5);background:rgba(248,158,27,.05);transform:translateX(6px);}
.season__points li img{border-radius:10px;flex:none;border:1px solid var(--line-strong);}
.season__points h3{font-family:var(--font-display);font-weight:700;font-style:italic;font-size:19px;letter-spacing:.06em;text-transform:uppercase;}
.season__points p{font-size:.95rem;color:var(--muted);}
.chip-icon{
  flex:none;width:52px;height:52px;display:grid;place-content:center;font-size:20px;
  color:var(--orange);border:1px solid rgba(248,158,27,.4);background:rgba(248,158,27,.08);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.season__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem;}

/* ---------- news ---------- */
.news{padding:6rem 0 7rem;background:var(--ink);}
.news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.news-card{
  --cat:var(--blue);
  display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  transition:transform .25s var(--ease-snap),border-color .25s,box-shadow .25s;
}
.news-card:hover{transform:translateY(-6px);border-color:rgba(248,158,27,.55);box-shadow:0 24px 60px rgba(0,0,0,.45);}
.news-card--feature{grid-row:span 2;grid-column:span 1;}
.news-card--feature .news-card__media{aspect-ratio:auto;flex:1;min-height:280px;}
.news-card__media{overflow:hidden;position:relative;aspect-ratio:2/1;}
.news-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out),filter .3s;}
.news-card:hover .news-card__media img{transform:scale(1.07);filter:saturate(1.15);}
.news-card__body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;}
.news-card__cat{
  align-self:flex-start;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cat);border:1px solid color-mix(in srgb,var(--cat) 55%,transparent);
  padding:.18rem .6rem .1rem;
}
.news-card__cat--season{--cat:var(--orange);}
.news-card__cat--dev{--cat:var(--blue);}
.news-card__cat--community{--cat:#4ade80;}
.news-card__cat--event{--cat:#c792ff;}
.news-card h3{font-family:var(--font-display);font-weight:700;font-style:italic;font-size:1.42rem;line-height:1.08;text-transform:uppercase;letter-spacing:.02em;}
.news-card p{color:var(--muted);font-size:.97rem;}
.news-card__date{
  margin-top:auto;padding-top:.5rem;
  font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:#5f7192;
  border-top:1px solid var(--line);
}

/* ---------- features ---------- */
.features{background:linear-gradient(180deg,#0c1730 0%,#0a1322 80%);padding-bottom:7rem;}
.features__bg{
  position:absolute;inset:0;pointer-events:none;opacity:.12;
  background:
    radial-gradient(60% 45% at 20% 20%,rgba(248,158,27,.5),transparent 70%),
    radial-gradient(50% 40% at 85% 70%,rgba(62,166,255,.5),transparent 70%);
}
.features .wrap{position:relative;}
.features__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;}
.feature{
  background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 16px,16px 0,100% 0,100% 100%,0 100%);
  padding-bottom:1.5rem;transition:border-color .25s,box-shadow .25s;will-change:transform;
}
.feature:hover{border-color:rgba(248,158,27,.55);box-shadow:0 26px 70px rgba(0,0,0,.45);}
.feature__media{overflow:hidden;aspect-ratio:16/9;}
.feature__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out);}
.feature:hover .feature__media img{transform:scale(1.08);}
.feature h3{
  font-family:var(--font-display);font-weight:800;font-style:italic;font-size:1.55rem;
  letter-spacing:.03em;text-transform:uppercase;padding:1.1rem 1.2rem .3rem;color:var(--orange-hot);
}
.feature p{padding:0 1.2rem;color:var(--muted);font-size:.96rem;}

/* ---------- stats ---------- */
.stats{background:linear-gradient(90deg,#140e04 0%,#241503 50%,#140e04 100%);border-block:1px solid rgba(248,158,27,.3);padding:3.2rem 0;}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center;}
.stat__num{
  display:block;font-family:var(--font-display);font-weight:800;font-style:italic;
  font-size:clamp(2.6rem,5vw,4rem);line-height:1;color:var(--orange-hot);
  text-shadow:0 4px 30px rgba(248,158,27,.35);font-variant-numeric:tabular-nums;
}
.stat__label{
  display:block;margin-top:.45rem;
  font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:#b9a68a;
}

/* ---------- heroes ---------- */
.heroes{background:linear-gradient(180deg,#0d1930 0%,#0a1322 100%);padding-bottom:8rem;}
.heroes__controls{
  display:flex;gap:1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-bottom:2rem;
}
.role-tabs{display:flex;gap:.55rem;flex-wrap:wrap;}
.role-tab{
  --role:var(--orange);
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:16.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);
  padding:.6rem 1.15rem;clip-path:var(--clip-btn);
  transition:color .2s,border-color .2s,background .2s,transform .2s var(--ease-snap);
}
.role-tab svg{width:19px;height:19px;}
.role-tab--tank{--role:var(--tank);}
.role-tab--damage{--role:var(--damage);}
.role-tab--support{--role:var(--support);}
.role-tab:hover{transform:translateY(-2px);border-color:var(--role);color:var(--text);}
.role-tab.is-active{background:var(--role);border-color:var(--role);color:#102035;}
.role-tab--damage.is-active{color:#2b0d00;}
.role-tab--support.is-active{color:#2b1e00;}
.role-tab__count{
  font-size:13.5px;font-weight:700;background:rgba(0,0,0,.22);padding:.05rem .45rem;
  clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);
}
.heroes__search{
  display:flex;align-items:center;gap:.6rem;flex:1;min-width:240px;max-width:360px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);padding:.55rem .95rem;
  clip-path:var(--clip-btn);transition:border-color .2s;
}
.heroes__search:focus-within{border-color:var(--orange);}
.heroes__search svg{width:17px;height:17px;color:var(--muted);flex:none;}
.heroes__search input{
  flex:1;background:none;border:0;outline:0;color:var(--text);
  font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:.04em;
}
.heroes__search input::placeholder{color:#5f7192;}

.heroes__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:.9rem;}
.hero-card{
  --role:var(--orange);
  position:relative;text-align:left;background:var(--panel);border:1px solid var(--line);
  overflow:hidden;aspect-ratio:3/4.1;display:flex;flex-direction:column;justify-content:flex-end;
  transition:border-color .22s,box-shadow .22s,transform .22s var(--ease-snap);
  opacity:0;transform:translateY(18px) scale(.96);
  animation:card-in .5s var(--ease-out) forwards;animation-delay:var(--stagger,0s);
}
@keyframes card-in{to{opacity:1;transform:none;}}
.hero-card--tank{--role:var(--tank);}
.hero-card--damage{--role:var(--damage);}
.hero-card--support{--role:var(--support);}
.hero-card:hover,.hero-card:focus-visible{
  border-color:var(--role);
  box-shadow:0 14px 44px rgba(0,0,0,.5),inset 0 0 0 1px var(--role);
  transform:translateY(-5px) scale(1.02);z-index:3;
}
.hero-card__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .5s var(--ease-out),filter .35s;filter:saturate(.92);
}
.hero-card:hover .hero-card__img{transform:scale(1.12);filter:saturate(1.2);}
.hero-card__veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 42%,rgba(7,13,24,.55) 68%,rgba(7,13,24,.96) 100%);
}
.hero-card__frame{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:linear-gradient(120deg,transparent 35%,color-mix(in srgb,var(--role) 40%,transparent) 50%,transparent 65%);
  transform:translateX(-60%);
}
.hero-card:hover .hero-card__frame{opacity:1;animation:card-sheen .7s var(--ease-out);}
@keyframes card-sheen{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
.hero-card__info{position:relative;padding:.7rem .8rem .75rem;z-index:2;}
.hero-card__role{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--role);
}
.hero-card__role svg{width:12px;height:12px;}
.hero-card__name{
  font-family:var(--font-display);font-weight:800;font-style:italic;font-size:1.34rem;line-height:1;
  text-transform:uppercase;letter-spacing:.02em;
}
.hero-card__loc{font-weight:600;font-size:.8rem;color:var(--muted);letter-spacing:.04em;transition:color .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-card:hover .hero-card__loc{color:#d7e3f6;}
.heroes__empty{
  text-align:center;padding:4rem 1rem;color:var(--muted);
  border:1px dashed var(--line-strong);margin-top:1rem;
}
.heroes__empty img{margin:0 auto 1rem;opacity:.45;}
.heroes__empty h3{font-family:var(--font-display);font-weight:700;font-style:italic;font-size:1.6rem;text-transform:uppercase;color:var(--text);}
.linklike{color:var(--orange);text-decoration:underline;text-underline-offset:3px;font-weight:700;}
.linklike:hover{color:var(--orange-hot);}

/* ---------- promo ---------- */
.promo{padding:0 0 6rem;background:var(--ink);}
.promo__card{
  position:relative;overflow:hidden;
  width:min(1200px,92vw);margin-inline:auto;padding:2.6rem 3rem;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  background:
    linear-gradient(100deg,rgba(12,26,46,.94) 30%,rgba(12,26,46,.55) 70%),
    url('../assets/ui/blizzcon.jpg') center/cover;
  border:1px solid var(--line-strong);
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
  will-change:transform;
}
.promo__card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(180deg,var(--orange-deep),var(--orange-hot));
}
.promo__kicker{
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--blue);margin-bottom:.4rem;
}
.promo__title{
  font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:.95;
}
.promo__sub{color:var(--muted);margin-top:.5rem;max-width:52ch;}
.promo__cta{flex:none;}

/* ---------- footer ---------- */
.footer{background:#070d18;border-top:1px solid var(--line);}
.footer__layout{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:2.5rem;padding:3.5rem 0 2.5rem;
}
.footer__logo{width:230px;margin-bottom:1rem;filter:invert(1);}
.footer__brand p{color:var(--muted);font-size:.95rem;max-width:32ch;}
.footer__social{display:flex;gap:.6rem;margin-top:1.2rem;}
.footer__social a{
  width:38px;height:38px;display:grid;place-content:center;
  border:1px solid var(--line);color:var(--muted);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:color .2s,border-color .2s,transform .2s;
}
.footer__social a svg{width:19px;height:19px;}
.footer__social a:hover{color:var(--ink);background:var(--orange);border-color:var(--orange);transform:translateY(-3px);}
.footer__col h4{
  font-family:var(--font-display);font-weight:700;font-style:italic;font-size:17px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:.9rem;
}
.footer__col a{display:block;color:var(--muted);font-weight:600;padding:.28rem 0;transition:color .15s,transform .15s;}
.footer__col a:hover{color:var(--text);transform:translateX(4px);}
.footer__note p{font-size:.85rem;color:#536382;line-height:1.6;}
.footer__bar{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1rem 4vw;border-top:1px solid var(--line);
  font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#536382;
}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:3vh 3vw;}
.modal[hidden]{display:none;}
.modal__backdrop{position:absolute;inset:0;background:rgba(4,8,16,.8);backdrop-filter:blur(8px);animation:fade-in .25s var(--ease-out);}
@keyframes fade-in{from{opacity:0}}
.modal__panel{
  position:relative;width:min(1020px,96vw);max-height:92svh;overflow:hidden auto;
  background:linear-gradient(180deg,#122037,#0c1526);
  border:1px solid var(--line-strong);
  clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
  animation:panel-in .35s var(--ease-out);scrollbar-width:thin;
}
@keyframes panel-in{from{opacity:0;transform:translateY(28px) scale(.97)}}
.modal__close{
  position:sticky;top:14px;margin-left:calc(100% - 56px);z-index:20;
  width:42px;height:42px;display:grid;place-content:center;
  background:rgba(10,19,34,.8);border:1px solid var(--line-strong);color:var(--text);
  clip-path:var(--clip-btn);transition:background .2s,color .2s,transform .2s;
}
.modal__close:hover{background:var(--orange);color:#1a0d00;transform:rotate(90deg);}
.modal__nav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:20;
  width:46px;height:64px;display:grid;place-content:center;
  background:rgba(10,19,34,.75);border:1px solid var(--line-strong);color:var(--text);
  transition:background .2s,color .2s;
}
.modal__nav svg{width:20px;height:20px;}
.modal__nav:hover{background:var(--orange);color:#1a0d00;}
.modal__nav--prev{left:max(1vw,calc(50% - 560px - 54px));clip-path:polygon(0 0,100% 8px,100% calc(100% - 8px),0 100%);}
.modal__nav--next{right:max(1vw,calc(50% - 560px - 54px));clip-path:polygon(0 8px,100% 0,100% 100%,0 calc(100% - 8px));}
.modal__media{position:relative;aspect-ratio:21/10;min-height:260px;margin-top:-56px;}
.modal__media > img{width:100%;height:100%;object-fit:cover;object-position:center 22%;}
.modal__media-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,21,38,.25) 0%,transparent 30%,rgba(12,21,38,.92) 88%);
}
.modal__identity{
  position:absolute;left:1.6rem;right:1.6rem;bottom:1rem;display:flex;align-items:flex-end;gap:1.1rem;
}
.modal__identity > img{
  width:96px;height:96px;border-radius:14px;border:2px solid var(--orange);
  background:#0a1322;box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.modal__role{
  display:inline-block;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;
  color:#102035;background:var(--orange);padding:.2rem .7rem .1rem;margin-bottom:.25rem;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
.modal__role--tank{background:var(--tank);}
.modal__role--damage{background:var(--damage);color:#2b0d00;}
.modal__role--support{background:var(--support);color:#2b1e00;}
.modal__name{
  font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(2.2rem,5vw,3.4rem);line-height:.95;text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.modal__body{padding:1.6rem 2rem 2.4rem;display:flex;flex-direction:column;gap:1.1rem;}
.modal__meta{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;}
.modal__meta div{font-size:.95rem;color:var(--muted);font-weight:600;}
.modal__meta b{
  display:block;font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:.28em;text-transform:uppercase;color:#5f7192;
}
.modal__meta span{color:var(--text);}
.modal__hp{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;}
.modal__hp-label{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#5f7192;}
.modal__hp-bar{display:flex;gap:3px;height:12px;flex:1;min-width:180px;max-width:380px;transform:skewX(-14deg);}
.modal__hp-bar i{display:block;height:100%;flex:var(--flex,1);}
.modal__hp-bar .hp-health{background:#e8eef8;}
.modal__hp-bar .hp-armor{background:#f0a63a;}
.modal__hp-bar .hp-shield{background:#59c2f0;}
.modal__hp-total{font-family:var(--font-display);font-weight:800;font-style:italic;font-size:1.5rem;color:var(--orange-hot);}
.modal__hp-key{font-weight:600;font-size:.8rem;color:var(--muted);letter-spacing:.06em;}
.modal__story{color:#c6d3e8;max-width:72ch;}
.modal__section{
  font-family:var(--font-display);font-weight:700;font-style:italic;font-size:1.35rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--orange-hot);
  border-bottom:1px solid var(--line);padding-bottom:.4rem;margin-top:.5rem;
}
.modal__abilities{display:grid;gap:.7rem;}
.modal__abilities li{
  display:flex;gap:1rem;align-items:flex-start;
  background:rgba(255,255,255,.035);border:1px solid var(--line);padding:.75rem .95rem;
  transition:border-color .2s,transform .2s;
}
.modal__abilities li:hover{border-color:rgba(248,158,27,.5);transform:translateX(5px);}
.modal__abilities img{width:52px;height:52px;flex:none;background:#0a1322;border:1px solid var(--line-strong);padding:5px;border-radius:10px;}
.modal__abilities h5{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.08em;text-transform:uppercase;}
.modal__abilities p{font-size:.92rem;color:var(--muted);}
.modal__perks{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.modal__perk-group h6{
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  color:#5f7192;margin-bottom:.6rem;
}
.modal__perk{
  display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.6rem;
  background:rgba(255,255,255,.03);border:1px solid var(--line);padding:.6rem .75rem;
}
.modal__perk img{width:36px;height:36px;flex:none;background:#0a1322;border-radius:8px;padding:3px;border:1px solid var(--line);}
.modal__perk h5{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;}
.modal__perk p{font-size:.85rem;color:var(--muted);line-height:1.4;}
.modal__perks-empty{color:#536382;font-size:.9rem;}

/* ---------- trailer modal ---------- */
.modal__panel--trailer{width:min(940px,94vw);}
.trailer__frame{position:relative;}
.trailer__frame > img{width:100%;height:auto;filter:brightness(.5);}
.trailer__msg{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1rem;text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:1.3rem;letter-spacing:.06em;color:#dce7f7;
}
.trailer__msg img{opacity:.9;animation:boot-pulse 1.6s ease-in-out infinite;}

/* ================= responsive ================= */
@media (max-width:1060px){
  .features__grid{grid-template-columns:repeat(2,1fr);}
  .news__grid{grid-template-columns:1fr 1fr;}
  .news-card--feature{grid-row:auto;grid-column:span 2;}
  .news-card--feature .news-card__media{aspect-ratio:21/9;}
  .season__layout{grid-template-columns:1fr;gap:2.5rem;}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:2.4rem;}
  .hero__float--2{display:none;}
}
@media (max-width:820px){
  .nav__links{display:none;}
  .nav__burger{display:flex;}
  .btn--nav{display:none;}
  .hero{min-height:92svh;padding-bottom:5rem;}
  .hero__float--1{width:34vw;top:12%;}
  .hero__float--3{display:none;}
  .ticker__label{font-size:12.5px;padding-inline:.9rem;}
  .heroes__controls{flex-direction:column;align-items:stretch;}
  .heroes__search{max-width:none;}
  .modal__nav{display:none;}
  .footer__layout{grid-template-columns:1fr 1fr;gap:2rem;}
  .footer__brand{grid-column:span 2;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .section-head{flex-direction:column;align-items:flex-start;gap:1.2rem;}
  .news__grid{grid-template-columns:1fr;}
  .news-card--feature{grid-column:auto;}
  .features__grid{grid-template-columns:1fr;}
  .stats__grid{grid-template-columns:1fr 1fr;gap:1.8rem;}
  .hero__title{font-size:clamp(2.6rem,13vw,3.4rem);}
  .hero__float--1{display:none;}
  .heroes__grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
  .hero-card__name{font-size:1.12rem;}
  .modal__body{padding:1.2rem 1.1rem 1.8rem;}
  .modal__identity{left:1rem;right:1rem;}
  .modal__identity > img{width:70px;height:70px;}
  .modal__perks{grid-template-columns:1fr;}
  .footer__layout{grid-template-columns:1fr;}
  .footer__brand{grid-column:auto;}
  .section-angle{--cut:34px;}
}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
  .hero-card{opacity:1;transform:none;animation:none;}
  .ticker__track.js-run{animation:none;flex-wrap:wrap;}
}