/* Naruto Card Game – narutocard.hu közös stíluslap */

:root{
  --paper:#ece3cc;          /* pergamen háttér */
  --paper-deep:#e3d8bc;
  --ink:#141414;            /* fekete címek/szöveg */
  --orange:#f47b20;         /* Naruto örvény narancs */
  --red:#e01010;            /* piros kiemelés */
  --green:#6b7c4a;          /* szőtt zöld szegély */
  --green-dark:#4c5a33;
  --blue:#3ba8dc;           /* The Lookout kék */
  --teal:#2ba8b0;           /* kártyakeret türkiz */
  --magenta:#e0447a;        /* kártyakeret pink */
  --card-shadow:0 10px 24px rgba(20,20,20,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Rubik',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(160,130,80,.18), transparent 60%),
    var(--paper);
  line-height:1.6;
}
/* bal oldali zöld szőtt csík, mint a PDF-ben */
body::before{
  content:"";
  position:fixed;inset:0 auto 0 0;width:26px;z-index:60;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.14) 0 6px, transparent 6px 12px),
    linear-gradient(var(--green), var(--green-dark));
  box-shadow:2px 0 8px rgba(0,0,0,.25);
}
h1,h2,h3,.phase b{font-family:'Anton',Impact,'Arial Narrow',sans-serif;letter-spacing:.5px;text-transform:uppercase;font-weight:400}

/* ---------- NAV ---------- */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(236,227,204,.94);backdrop-filter:blur(6px);
  border-bottom:3px solid var(--ink);
  padding:.6rem 2rem .6rem 3rem;
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
}
.brand{font-family:'Anton',sans-serif;font-size:1.35rem;text-transform:uppercase;letter-spacing:1px;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:.15rem}
.brand .swirl{color:var(--orange);font-size:1.5rem;line-height:1;transform:translateY(1px)}
.brand img{height:38px;width:auto;display:block}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
nav .links{display:flex;gap:1.1rem;flex-wrap:wrap;margin-left:auto}
nav .links a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.9rem;border-bottom:2px solid transparent;padding-bottom:2px}
nav .links a:hover,nav .links a.on{border-color:var(--orange)}

/* ---------- KÁRTYA ALAPELEMEK ---------- */
.tcard{position:relative;display:inline-block}
.tcard img{
  width:100%;display:block;border-radius:4.2%/3.1%;
  aspect-ratio:600/838;object-fit:cover;
  box-shadow:var(--card-shadow);cursor:zoom-in;
  transition:transform .18s, box-shadow .18s;background:#fff;
}
.cardface{position:relative;display:block}
.tcard img:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(20,20,20,.34)}
.tcard .cap{
  display:block;text-align:center;font-size:.78rem;font-weight:700;margin-top:.5rem;
  letter-spacing:.5px;color:#3a352a;
}
.tcard .cap small{display:block;font-weight:400;color:#6b6250}
/* lefektetett (Rest) lap */
.restwrap{display:flex;align-items:center;justify-content:center}
.rest{transform:rotate(90deg)}
/* piros X overlay */
.xover::after{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  background:
    linear-gradient(45deg, transparent 46.5%, var(--red) 46.5% 53.5%, transparent 53.5%),
    linear-gradient(-45deg, transparent 46.5%, var(--red) 46.5% 53.5%, transparent 53.5%);
  opacity:.88;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
/* piros bekarikázás a kártyán (százalékos pozíciók) */
.ring{
  position:absolute;border:4px solid var(--red);border-radius:50%;
  pointer-events:none;box-shadow:0 0 0 2px rgba(224,16,16,.15), inset 0 0 0 2px rgba(224,16,16,.15);
}
.nbadge{
  position:absolute;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;
  font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.3);pointer-events:none;
}

/* ---------- HERO ---------- */
header.hero{
  max-width:1200px;margin:0 auto;padding:4.5rem 2rem 3.5rem 3rem;
  display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;
}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02}
.hero h1 .o{color:var(--orange)}
.herologo{width:min(460px,92%);height:auto;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.14))}
.hero .sub{font-family:'Anton',sans-serif;font-size:clamp(1.2rem,2.5vw,1.8rem);letter-spacing:4px;margin-top:.4rem;text-transform:uppercase}
.hero .lead{margin-top:1.2rem;font-size:1.05rem;max-width:34rem;color:#3a352a}
.hero .cta{margin-top:1.8rem;display:flex;gap:1rem;flex-wrap:wrap}
.btn{
  display:inline-block;padding:.8rem 1.6rem;font-weight:700;text-decoration:none;
  border:3px solid var(--ink);color:var(--ink);text-transform:uppercase;letter-spacing:1px;font-size:.85rem;
  transition:transform .15s, box-shadow .15s;background:transparent;cursor:pointer;
}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.2)}
/* hero kártyalegyező */
.herofan{position:relative;height:min(430px,60vw)}
.herofan::before{
  content:"";position:absolute;inset:6% 2%;pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(244,123,32,.30), transparent 62%);
  filter:blur(14px);
}
.herofan .tcard{position:absolute;width:min(46%,240px);top:50%;left:50%}
.herofan .tcard:nth-child(1){transform:translate(-92%,-52%) rotate(-12deg);z-index:1}
.herofan .tcard:nth-child(2){transform:translate(-50%,-56%) rotate(1deg);z-index:2}
.herofan .tcard:nth-child(3){transform:translate(-8%,-50%) rotate(12deg);z-index:3}
.herofan .tcard img:hover{transform:translateY(-10px)}
/* hero statisztikák */
.herostats{display:flex;gap:2.2rem;margin-top:2rem;flex-wrap:wrap}
.herostats .stat .num{font-family:'Anton',sans-serif;font-size:2rem;line-height:1.05;color:var(--orange)}
.herostats .stat .lbl{font-size:.82rem;font-weight:500;color:#5a5342;letter-spacing:.3px}

/* egyszerű oldalfejléc (aloldalak) */
.pagehead{max-width:1200px;margin:0 auto;padding:3rem 2rem 0 3rem}
.pagehead h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.pagehead h1 span{color:var(--orange)}
.pagehead p.lead{margin-top:.8rem;max-width:44rem;color:#3a352a}
.toc{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}
.toc a{
  display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;
  padding:.35rem 1rem;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.5px;
}
.toc a:hover{background:var(--orange)}

/* ---------- HIVATALOS KEY VISUAL HERO ---------- */
.kv{position:relative;background:#f2f2f4 url('/assets/official/mv.webp') no-repeat right center/cover;border-bottom:3px solid var(--ink)}
.kv::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(242,242,244,.94) 0%, rgba(242,242,244,.78) 36%, transparent 60%)}
.kv .inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:5rem 2rem 4.5rem 3rem}
.kv .inner > *{max-width:560px}
.kv .lead{margin-top:1.2rem;font-size:1.05rem;color:#2c2820}
.kv .sub{font-family:'Anton',sans-serif;font-size:clamp(1.1rem,2.2vw,1.6rem);letter-spacing:4px;margin-top:.5rem;text-transform:uppercase}
.kv .cta{margin-top:1.8rem;display:flex;gap:1rem;flex-wrap:wrap}

/* ---------- PROMÓVIDEÓ ---------- */
.videobox{max-width:900px;margin:0 auto;border:3px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:var(--card-shadow);background:#000}
.videobox video{display:block;width:100%}

/* ---------- FUTÓ KÁRTYASOR (marquee) ---------- */
.marquee{overflow:hidden;position:relative;padding:.6rem 0}
.marquee .track{display:flex;gap:1.4rem;width:max-content;animation:mscroll 45s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee img{height:240px;width:auto;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.2))}
@keyframes mscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SOROZATLOGÓK ---------- */
.serieslogos{display:flex;gap:3rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.serieslogos img{height:72px;width:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.15))}

/* ---------- MEGJELENÉS BANNER ---------- */
.release{
  text-align:center;background:linear-gradient(135deg,var(--orange),#d43a10);color:#fff;
  border-radius:18px;padding:2.8rem 2rem;box-shadow:var(--card-shadow);
}
.release .lbl{font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.9rem;opacity:.92}
.release .big{font-family:'Anton',sans-serif;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.05;margin-top:.3rem;text-transform:uppercase}

/* ---------- FIGYELMEZTETÉS ---------- */
.notice{
  max-width:1100px;margin:0 auto 3rem;padding:1.4rem 1.8rem;
  background:#fff8e6;border-left:8px solid var(--orange);
  box-shadow:0 4px 14px rgba(0,0,0,.08);border-radius:0 8px 8px 0;
}
.notice b{color:var(--red)}
.wrap{max-width:1200px;margin:0 auto;padding:0 2rem 0 3rem}

/* ---------- LANDING NAVIGÁCIÓS PANELEK ---------- */
.navcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.navcard{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:360px;border-radius:16px;overflow:hidden;text-decoration:none;color:#fff;
  border:3px solid var(--ink);box-shadow:var(--card-shadow);background:#111;
  transition:transform .18s, box-shadow .18s;
}
.navcard .bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;
  transition:transform .35s ease;
}
.navcard::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.05) 22%, rgba(10,10,10,.9) 76%);
}
.navcard:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(0,0,0,.3)}
.navcard:hover .bg{transform:scale(1.07)}
.navcard .body{position:relative;z-index:1;padding:1.5rem 1.5rem 1.6rem}
.navcard h3{color:#fff;font-size:1.7rem;letter-spacing:1px}
.navcard p{font-size:.92rem;color:#efe8d5;opacity:.92;margin:.35rem 0 1rem;line-height:1.5}
.navcard .go{
  display:inline-block;font-weight:700;color:#fff;background:var(--orange);
  padding:.5rem 1.1rem;border-radius:999px;text-transform:uppercase;font-size:.78rem;letter-spacing:1px;
  transition:letter-spacing .15s, background .15s;
}
.navcard:hover .go{letter-spacing:2px;background:var(--red)}

/* kiemelt kártyasor */
.cardstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.cardstrip .tcard{width:100%}

/* ---------- SZEKCIÓK ---------- */
section{padding:3.2rem 0}
section:nth-of-type(even){background:linear-gradient(rgba(160,130,80,.10),rgba(160,130,80,.10))}
.sec-head{margin-bottom:2rem}
.sec-head h2{font-size:clamp(1.9rem,4vw,3rem);display:inline-block;position:relative;padding-bottom:.4rem}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:60%;height:6px;background:var(--orange)}
.sec-head p.tag{font-weight:500;color:#5a5342;margin-top:.5rem}
.orig{
  display:inline-block;margin-left:.8rem;font-size:.72rem;font-weight:700;letter-spacing:.5px;
  background:var(--ink);color:var(--paper);padding:.2rem .7rem;border-radius:999px;cursor:zoom-in;
  vertical-align:middle;text-transform:uppercase;
}
.orig:hover{background:var(--orange)}

.row{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;margin-bottom:3rem}
.row:last-child{margin-bottom:0}
.row .txt h3{font-size:1.35rem;margin-bottom:.7rem}
.row .txt p{margin-bottom:.8rem}
.row .txt ul,.row .txt ol{margin:.4rem 0 1rem 1.3rem}
.row .txt li{margin-bottom:.45rem}
.rev .vis-side{order:-1}
.hl{color:var(--red);font-weight:700}
.kw{color:#1a56e8;font-weight:700}
.pill{
  display:inline-block;background:var(--ink);color:var(--paper);border-radius:999px;
  padding:.15rem .8rem;font-size:.8rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:.15rem .25rem .15rem 0;
}
.pill.o{background:var(--orange)}
.pill.t{background:var(--teal)}
.pill.m{background:var(--magenta)}

/* kártyasorok a diagramokban */
.cardrow{display:flex;gap:1.2rem;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.cardrow .tcard{width:min(160px,26vw)}
.cardrow.big .tcard{width:min(210px,38vw)}
.duo{display:flex;gap:1.6rem;align-items:center;justify-content:center;flex-wrap:wrap}
.duo .tcard{width:min(200px,36vw)}
.bigarrow{font-size:2.6rem;color:var(--orange);font-weight:700;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}

/* típussor (5 kártya) */
.typerow{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:1rem}
.typerow .tcard{width:100%}

/* kézlegyező */
.fan{position:relative;height:230px;margin:0 auto;width:min(420px,90%)}
.fan .tcard{position:absolute;width:120px;top:38%;left:50%}
.fan .tcard:nth-child(1){transform:translate(-160%,-42%) rotate(-24deg)}
.fan .tcard:nth-child(2){transform:translate(-115%,-49%) rotate(-12deg)}
.fan .tcard:nth-child(3){transform:translate(-64%,-52%) rotate(0deg)}
.fan .tcard:nth-child(4){transform:translate(-12%,-49%) rotate(12deg)}
.fan .tcard:nth-child(5){transform:translate(32%,-42%) rotate(24deg)}
.fan.xed::after{
  content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9rem;color:var(--red);font-weight:700;opacity:.85;pointer-events:none;
  text-shadow:0 3px 8px rgba(0,0,0,.3);
}

/* játéktábla */
.mat{
  display:grid;gap:.7rem;background:var(--paper-deep);border:3px solid var(--ink);border-radius:14px;
  padding:1rem;grid-template-columns:2.2fr 1fr;box-shadow:var(--card-shadow);
}
.mat .zone{
  background:#fffdf6;border:2px solid #9a8f74;border-radius:8px;padding:.7rem .8rem;
  font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.5px;text-align:center;
}
.mat .zone small{display:block;font-weight:400;text-transform:none;letter-spacing:0;color:#6b6250;font-size:.75rem;line-height:1.35;margin-top:.15rem}
.mat .colL{display:flex;flex-direction:column;gap:.7rem}
.mat .colR{display:flex;flex-direction:column;gap:.7rem}
.mat .zone.tall{flex:1;display:flex;flex-direction:column;justify-content:center}

/* fázis idővonal */
.phases{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin:1.6rem 0 1rem;border-radius:8px;overflow:hidden;text-align:center}
.phase{padding:.9rem .5rem;color:#fff;font-size:.85rem}
.phase:nth-child(1){background:#57c8dd}.phase:nth-child(2){background:#4fb6dc}
.phase:nth-child(3){background:#479fda}.phase:nth-child(4){background:#3f88d8}.phase:nth-child(5){background:#3771d6}
.phase b{display:block;font-size:1rem;letter-spacing:1px;margin-bottom:.15rem}

/* harc lépések */
.steps{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0}
.steps span{
  background:linear-gradient(135deg,#7fe9f5,#4a90e2);color:#fff;font-weight:700;
  padding:.55rem 1.1rem;border-radius:999px;font-size:.9rem;box-shadow:0 3px 8px rgba(0,0,0,.15)
}
.steps .arr{background:none;color:var(--ink);box-shadow:none;padding:.55rem 0;font-size:1.1rem}

/* statisztika kitűzők */
.statchip{
  display:inline-block;background:var(--ink);color:#fff;border-radius:6px;padding:.25rem .7rem;
  font-family:'Anton',sans-serif;font-size:1rem;letter-spacing:1px;margin:.2rem .2rem 0 0;
}
.statchip.pow{background:var(--teal)}
.statchip.hp{background:var(--magenta)}
.statchip.dmg{background:var(--red)}
.statchip.life{background:var(--orange)}
.statchip.cost{background:#1a56e8}

/* GYIK */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.faq-card{
  background:#fffdf6;border:2px solid var(--ink);border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);padding:1.2rem 1.3rem 1.4rem;
  display:flex;gap:1.1rem;align-items:flex-start;
}
.faq-card .tcard{flex:0 0 110px;width:110px}
.faq-card .tcard + .tcard{margin-left:-70px;transform:rotate(6deg)}
.faq-card h3{font-size:1.05rem;margin-bottom:.5rem}
.faq-card h3::before{content:"K: ";color:var(--orange)}
.faq-card p{font-size:.95rem}
.faq-card p b:first-child{color:var(--red)}

/* GALÉRIA */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem;align-items:center}
.filters .btn{padding:.5rem 1.1rem;font-size:.78rem}
.filters .btn.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filters input{
  padding:.55rem 1rem;border:3px solid var(--ink);background:#fffdf6;
  font:inherit;font-size:.85rem;min-width:200px;margin-left:auto;
}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.2rem}
.gallery .tcard{width:100%;cursor:pointer}
.gallery .tcard img{cursor:pointer}
.count{color:#6b6250;font-size:.85rem;margin-bottom:1rem}
a.tcard{text-decoration:none;color:inherit;display:inline-block}
.pagenav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.pagenav .btn{font-size:.75rem;text-transform:none;letter-spacing:.3px}

/* KÁRTYA RÉSZLETEK MODAL */
#cm{
  position:fixed;inset:0;background:rgba(10,10,10,.7);display:none;z-index:90;
  align-items:center;justify-content:center;padding:1.5rem;
}
#cm.on{display:flex}
.cm-box{
  background:#fffdf6;border:3px solid var(--ink);border-radius:14px;
  max-width:900px;width:100%;max-height:92vh;overflow:auto;
  display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:1.8rem;
  padding:1.8rem;position:relative;
}
.cm-box .close{
  position:absolute;top:.5rem;right:.9rem;font-size:1.8rem;background:none;border:none;
  cursor:pointer;color:var(--ink);font-weight:700;line-height:1;
}
.cm-box .close:hover{color:var(--red)}
.cm-box h3{font-size:1.7rem;margin-bottom:.1rem}
.cm-box .no{color:#6b6250;font-weight:700;margin-bottom:.7rem}
.cm-stats{display:flex;flex-wrap:wrap;gap:.3rem;margin:.5rem 0 .9rem}
.cm-box .traits{font-size:.9rem;color:#5a5342;margin-bottom:1rem}
.cm-box .traits b{color:var(--ink)}
.cm-eff{
  background:var(--paper);border-left:5px solid var(--orange);
  padding:.8rem 1rem;border-radius:0 8px 8px 0;margin-bottom:.7rem;font-size:.95rem;
}
.cm-eff .sup{color:var(--orange);font-weight:700}
.cm-eff.en{border-left-color:#9a8f74;color:#5a5342;font-size:.84rem;font-style:italic}
.cm-eff p{margin-bottom:.4rem}
.cm-eff p:last-child{margin-bottom:0}

/* ÜTEMTERV – idővonal */
.timeline{list-style:none;margin:1.2rem 0 0;padding:0 0 0 34px;position:relative}
.timeline::before{
  content:"";position:absolute;left:9px;top:10px;bottom:14px;width:5px;border-radius:3px;
  background:linear-gradient(var(--orange), var(--red));
}
.timeline li{position:relative;padding:.65rem 0 .65rem .4rem}
.timeline li::before{
  content:"";position:absolute;left:-32px;top:1rem;width:13px;height:13px;border-radius:50%;
  background:var(--paper);border:4px solid var(--orange);box-shadow:0 0 0 3px rgba(244,123,32,.18);
}
.timeline .date{display:block;font-weight:700;color:#a35410;font-size:.8rem;letter-spacing:1px;text-transform:uppercase}
.timeline .evt{font-size:1.02rem}
.timeline li.big::before{background:var(--red);border-color:var(--red);box-shadow:0 0 0 4px rgba(224,16,16,.22)}
.timeline li.big .date{color:var(--red)}
.timeline li.big .evt{font-family:'Anton',sans-serif;font-size:1.5rem;letter-spacing:.5px;text-transform:uppercase}

/* KÖZÖSSÉG */
.community{text-align:center;padding:4rem 2rem 4.5rem 3rem;background:var(--ink);color:var(--paper)}
.community h2{font-size:clamp(2rem,5vw,3.4rem);color:#fff}
.community h2 span{color:var(--orange)}
.community p{margin:.8rem auto 1.6rem;max-width:32rem}
.soc{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.soc a{display:inline-block;padding:.85rem 1.7rem;border-radius:8px;text-decoration:none;color:#fff;font-weight:700;letter-spacing:.5px;transition:transform .15s}
.soc a:hover{transform:translateY(-3px)}
.soc .dc{background:#5865F2}.soc .fb{background:#1877F2}.soc .rd{background:#FF4500}
.soc .pg{background:transparent;border:3px solid #1877F2}

footer{background:#0c0c0c;color:#8f8877;padding:2.4rem 2rem 2rem;font-size:.85rem}
footer a{color:var(--blue)}
.f-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:1.1rem;align-items:center;text-align:center}
.f-brand{font-family:'Anton',sans-serif;font-size:1.45rem;color:var(--paper);letter-spacing:2px;text-transform:uppercase}
.f-brand span{color:var(--orange)}
.f-links{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center}
.f-links a{color:#cfc6ad;text-decoration:none;font-weight:500}
.f-links a:hover{color:var(--orange)}
.f-note{font-size:.76rem;max-width:52rem;line-height:1.65;color:#6f6a5b}
.f-note a{color:#8f8877}

/* lightbox */
#lb{
  position:fixed;inset:0;background:rgba(10,10,10,.88);display:none;z-index:100;
  align-items:center;justify-content:center;padding:2rem;cursor:zoom-out;
}
#lb.on{display:flex}
#lb img{max-width:min(1400px,95vw);max-height:92vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}

.fade{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}
.fade.vis{opacity:1;transform:none}

@media (max-width:900px){
  body::before{width:12px}
  nav{padding-left:1.6rem}
  .wrap{padding:0 1.2rem 0 1.6rem}
  .pagehead{padding:2.2rem 1.2rem 0 1.6rem}
  header.hero{grid-template-columns:1fr;padding:2.6rem 1.2rem 2.2rem 1.6rem;gap:2.4rem}
  .row{grid-template-columns:1fr;gap:1.6rem}
  .rev .vis-side{order:0}
  .faq-grid{grid-template-columns:1fr}
  .phases{grid-template-columns:1fr;text-align:left}
  .typerow{grid-template-columns:repeat(3,1fr)}
  .mat{grid-template-columns:1fr}
  .fan{height:190px}
  .fan .tcard{width:95px}
  .navcards{grid-template-columns:1fr}
  .navcard{min-height:280px}
  .cardstrip{grid-template-columns:repeat(3,1fr)}
  .kv{background-position:78% center}
  .kv::before{background:linear-gradient(rgba(242,242,244,.9), rgba(242,242,244,.82))}
  .kv .inner{padding:2.8rem 1.2rem 2.4rem 1.6rem}
  .marquee img{height:170px}
  .serieslogos img{height:52px}
  .cm-box{grid-template-columns:1fr;padding:1.3rem}
  .filters input{margin-left:0;width:100%}
}