/* =====================================================================
   LANDING: fight-video hero, feature sections, scroll reveals, footer, auth popup
   ===================================================================== */
.lp2 { max-width: none; padding: 0; }
.lp2 .lp-top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 12px 24px; gap: 10px;
  background: linear-gradient(180deg, rgba(4, 14, 18, 0.9), rgba(4, 14, 18, 0)); }
.lp2 > .lp-sec { max-width: 1180px; margin: 90px auto 0; padding: 0 22px; }
.lp-hero2 { position: relative; height: 100vh; min-height: 620px; max-height: 1000px; overflow: hidden; --mx: 0; --my: 0; --sy: 0; background: #04090c; }
.lp-hero-text { position: absolute; z-index: 5; left: max(24px, calc(50vw - 590px)); top: 50%; translate: 0 -46%; max-width: 560px; }
.lp-hero-text h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; margin: 10px 0 16px; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7); }
.lp-hero-text p { color: #c3d8db; font-size: 17px; margin: 0 0 22px; max-width: 500px; }
@keyframes hover { 50% { translate: 0 -14px; rotate: -2deg; } }
.lp-scroll { position: absolute; z-index: 5; bottom: 18px; left: 50%; translate: -50% 0; font: 700 11px var(--font-d); letter-spacing: 0.3em; text-transform: uppercase; color: var(--mute); animation: hover 2s ease-in-out infinite; }
/* sections */
.lp-num { font: 700 14px var(--font-d); color: var(--mag); letter-spacing: 0.2em; margin-bottom: 4px; }
.rv { opacity: 0; translate: 0 50px; transition: opacity .9s ease, translate .9s cubic-bezier(.2, .7, .2, 1); }
.rv.in { opacity: 1; translate: 0 0; }
.rv.in .lp-ch, .rv.in .lp-items .item, .rv.in .lp-bosses .art { animation: popIn .6s both; }
.rv.in .lp-ch:nth-child(2), .rv.in .lp-items .item:nth-child(2), .rv.in .lp-bosses .art:nth-child(2) { animation-delay: .1s; }
.rv.in .lp-ch:nth-child(3), .rv.in .lp-items .item:nth-child(3), .rv.in .lp-bosses .art:nth-child(3) { animation-delay: .2s; }
.rv.in .lp-ch:nth-child(4), .rv.in .lp-items .item:nth-child(4) { animation-delay: .3s; }
.rv.in .lp-items .item:nth-child(n+5) { animation-delay: .4s; }
@keyframes popIn { from { opacity: 0; scale: .85; translate: 0 20px; } }
.lp-ch .art { transition: transform .4s, box-shadow .4s; }
.lp-ch:hover .art { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(60, 211, 220, 0.25); }
.lp-tiers { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.lp-tiers > div { display: flex; flex-direction: column; gap: 4px; width: 150px; }
.lp-tiers .art { aspect-ratio: 3 / 4; border: 1px solid var(--line); background-position: center top; }
.lp-arrow { font-style: normal; color: var(--mag); font-size: 26px; }
.lp-img { transition: transform 6s ease; } .rv.in .lp-img { transform: scale(1.04); }
.lp-refit { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-refit .art { aspect-ratio: 3 / 4; border: 1px solid var(--line2); background-position: center top; }
.lp-refit .art:last-of-type { box-shadow: 0 0 0 1px var(--mag), 0 0 40px rgba(255, 138, 43, 0.25); }
.lp-refit-tag { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 700 14px var(--font-d); letter-spacing: 0.3em; color: #1f0d00; background: var(--mag); padding: 6px 12px; }
.lp-bosses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lp-bosses .art { aspect-ratio: 3 / 4; border: 1px solid var(--line2); background-position: center; }
.lp-soon { color: var(--mag); margin-left: 6px; font-size: 9px; vertical-align: middle; }
.lp2 .lp-final { margin-bottom: 80px; }
@media (max-width: 900px) {
  .lp-hero2 { height: 92vh; min-height: 640px; }
  .lp2 > .lp-sec { margin-top: 60px; }
  .lp-tiers > div { width: calc((100% - 70px) / 3); }
}
@media (max-width: 600px) {
  .lp-hero-text { bottom: 6%; }
  .lp-hero-text h1 { font-size: 30px; }
  .lp-hero-text p { font-size: 14px; margin-bottom: 14px; }
  .lp2 .lp-top { padding: 10px 12px; }
  .lp2 .lp-top .logo { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-scroll { animation: none !important; }
  .rv { opacity: 1; translate: none; transition: none; }
}

/* Body -> armor tiers: one row on every screen (arrows used to wrap to a second line on phones). */
.lp-tiers { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; max-width: none; flex-wrap: nowrap; }
.lp-tiers > div { width: auto !important; min-width: 0; }
@media (max-width: 600px) { .lp-tiers { gap: 6px; } .lp-arrow { font-size: 18px; } .lp-tiers .small { font-size: 11px; line-height: 1.2; } }

/* Site footer + legal popup */
.site-foot { margin-top: 40px; border-top: 1px solid var(--line2); background: linear-gradient(180deg, rgba(6, 18, 22, .6), #03080a); padding: 34px 22px 90px; }
.sf-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 28px; align-items: start; }
.sf-brand .logo { font-size: 18px; margin-bottom: 8px; }
.sf-brand p { margin: 0; max-width: 340px; }
.sf-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.sf-links a, .sf-legal a { color: #a9c1c5; text-decoration: none; font-size: 14px; }
.sf-links a:hover, .sf-legal a:hover { color: var(--cyan); text-decoration: underline; }
.sf-pay { display: flex; flex-direction: column; gap: 8px; }
.sf-cards { display: flex; gap: 8px; }
.sf-card { width: 64px; height: 40px; display: grid; place-items: center; background: #fff; border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.sf-card img { display: block; max-width: 46px; max-height: 30px; width: auto; height: auto; }
.sf-legal { max-width: 1180px; margin: 26px auto 0; padding-top: 16px; border-top: 1px solid var(--line); }
.legal-bg { z-index: 500; }
.legal-modal { width: min(760px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.legal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 10px; }
.legal-head h2 { margin: 0; flex: 1; font-size: 22px; color: #eaf7f8; }
.legal-tabs { display: flex; gap: 4px; padding: 0 18px 10px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.legal-tabs button { all: unset; cursor: pointer; white-space: nowrap; padding: 6px 10px; font: 600 13px var(--font-d); letter-spacing: .04em; color: var(--mute); border: 1px solid transparent; }
.legal-tabs button:hover { color: var(--cyan); }
.legal-tabs button.on { color: #021016; background: var(--cyan); }
.legal-body { overflow-y: auto; padding: 6px 18px 18px; color: #b9d0d4; font-size: 15px; line-height: 1.6; }
.legal-body h3 { font-size: 15px; color: #eaf7f8; margin: 16px 0 4px; letter-spacing: .03em; }
.legal-body p { margin: 0 0 8px; }
.legal-upd { margin-top: 18px !important; }
body.legal-open { overflow: hidden; }
@media (max-width: 900px) { .sf-in { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
@media (max-width: 600px) {
  .site-foot { padding: 28px 16px 70px; }
  .legal-bg { padding: 0; place-items: stretch; }
  .legal-modal { max-height: none; height: 100%; width: 100%; border: 0; }
  .legal-head h2 { font-size: 18px; }
}

/* Fixed header: solid enough to read over cards when scrolled */
.lp2 .lp-top { background: rgba(4, 14, 18, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }

/* Sign-up / log-in popup */
.auth-pop { z-index: 520; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.auth-pop-in { position: relative; width: min(420px, 100%); animation: popIn .35s both; }
.auth-pop-in .auth-box { margin: 0; width: 100%; max-width: none; }
.auth-x { position: absolute; top: -44px; right: 0; }
.lp2 .lp-final .lp-cta { margin-top: 8px; min-width: 260px; }
/* ===== Hero v3: one cinematic fight video (vertical on portrait screens, wide on landscape) ===== */
.lp2 .lp-hero3 { height: 100vh; height: 100svh; min-height: 560px; max-height: none; padding: 0; overflow: hidden; background: #04090c; }
.lp-hero3 .lp-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.lp-hero3 .lp-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 12, 15, .92) 0%, rgba(4, 12, 15, .7) 30%, rgba(4, 12, 15, 0) 58%), linear-gradient(0deg, #061014 0%, transparent 22%); }
.lp2 .lp-hero3 .lp-hero-text { position: absolute; top: 50%; bottom: auto; left: max(24px, calc(50vw - 590px)); right: auto; translate: 0 -45%; max-width: min(520px, 40vw); padding: 0; }
.lp2 .lp-hero3 .lp-scroll { display: block; }
@media (max-aspect-ratio: 1/1) {
  .lp-hero3 .lp-vid { object-position: 22% 30%; }
  .lp-hero3 .lp-shade { background: linear-gradient(0deg, #061014 0%, rgba(6, 16, 20, .94) 30%, rgba(6, 16, 20, .55) 46%, rgba(6, 16, 20, 0) 62%), linear-gradient(180deg, rgba(4, 12, 15, .6) 0%, transparent 14%); }
  .lp2 .lp-hero3 .lp-hero-text { top: auto; bottom: 22px; left: 16px; right: 16px; translate: none; max-width: 640px; }
  .lp2 .lp-hero3 .lp-hero-text h1 { font-size: clamp(26px, 7.4vw, 40px); margin: 6px 0 10px; }
  .lp2 .lp-hero3 .lp-hero-text p { font-size: 14px; margin-bottom: 14px; }
  .lp2 .lp-hero3 .lp-scroll { display: none; }
}
@media (min-aspect-ratio: 1/1) and (max-width: 900px) {
  .lp2 .lp-hero3 .lp-hero-text { max-width: 52vw; }
  .lp2 .lp-hero3 .lp-hero-text h1 { font-size: clamp(26px, 4.4vw, 40px); }
}
@media (max-aspect-ratio: 1/1) and (max-width: 520px) { .lp2 .lp-hero3 .lp-hero-text p { display: none; } }
/* fade through black between hero fight scenes */
.lp-hero3 .lp-blackout { position: absolute; inset: 0; background: #020507; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.lp-hero3 .lp-blackout.on { opacity: 1; }
/* film-style title card with the logo between reel loops */
.lp-hero3 .lp-title { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: #020507; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s ease, visibility 0s .6s; }
.lp-hero3 .lp-title.on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.lp-hero3 .lp-hero-text, .lp-hero3 .lp-scroll { transition: opacity .4s ease; }
.lp-hero3.titling .lp-hero-text, .lp-hero3.titling .lp-scroll { opacity: 0; }
.lp-title-in { text-align: center; padding: 0 16px; }
.lp-title-logo { font: 700 clamp(30px, 7vw, 92px)/1 var(--font-d, 'Rajdhani', sans-serif); letter-spacing: .16em; color: #eaf7f8; white-space: nowrap; text-transform: uppercase; }
.lp-title-logo b { color: #eaf7f8; font-weight: 700; } .lp-title-logo i { color: var(--mag, #ff8a2b); font-style: normal; display: inline-block; }
.lp-title-sub { margin-top: 18px; font: 600 clamp(11px, 1.5vw, 16px) var(--font-d, 'Rajdhani', sans-serif); letter-spacing: .42em; text-transform: uppercase; color: var(--cyan, #3cd3dc); }
.lp-title-line { height: 2px; margin: 18px auto 0; width: min(70vw, 760px); background: linear-gradient(90deg, transparent, var(--cyan, #3cd3dc), transparent); transform: scaleX(0); }
.lp-title.on .lp-title-logo b { animation: ttlL 1.1s cubic-bezier(.2, .8, .2, 1) .2s both; }
.lp-title.on .lp-title-logo span { animation: ttlR 1.1s cubic-bezier(.2, .8, .2, 1) .2s both; display: inline-block; }
.lp-title.on .lp-title-logo i { animation: ttlSlash 1.4s ease .55s both; }
.lp-title.on .lp-title-line { animation: ttlLine .9s cubic-bezier(.2, .8, .2, 1) 1s both; }
.lp-title.on .lp-title-sub { animation: ttlSub .9s ease 1.4s both; }
.lp-title.on .lp-title-in { animation: ttlOut .7s ease 3.4s both; }
@keyframes ttlL { from { opacity: 0; transform: translateX(-40px); filter: blur(10px); letter-spacing: .5em; } to { opacity: 1; transform: none; filter: none; } }
@keyframes ttlR { from { opacity: 0; transform: translateX(40px); filter: blur(10px); letter-spacing: .5em; } to { opacity: 1; transform: none; filter: none; } }
@keyframes ttlSlash { 0% { opacity: 0; transform: scale(2.4); } 30% { opacity: 1; transform: scale(1); text-shadow: 0 0 28px #ff8a2b, 0 0 60px #ff8a2b; } 45% { opacity: .3; } 55% { opacity: 1; } 100% { opacity: 1; text-shadow: 0 0 10px rgba(255, 138, 43, .6); } }
@keyframes ttlLine { to { transform: scaleX(1); } }
@keyframes ttlSub { from { opacity: 0; letter-spacing: .8em; } to { opacity: .9; } }
@keyframes ttlOut { to { opacity: 0; transform: scale(1.04); filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) { .lp-title.on * { animation: none !important; } }

/* Company details shown as text images (js/legal.js): one line box tall, sits on the text baseline. */
.lx { height: 1.3125em; width: auto; max-width: 100%; vertical-align: -0.27em; user-select: none; }