@layer legacy {

/* ============================================================
   SIMSIKO — GAME UI AGENCY SITE
   Design system: Overwatch main-menu backbone + loot-crate juice
   + PS5 holo-trophy treatments. Single file, zero external images.
   ============================================================ */

/* ---------- tokens ---------- */
.page-content{
  --bg0:#05090F;
  --bg1:#0A1526;
  --bg2:#101F3C;
  --bg3:#16294D;
  --line:#22355C;
  --cyan:#37C8F5;
  --cyan2:#4DD8FF;
  --orange:#F99E1A;
  --orange2:#FFB347;
  --gold:#FFD24A;
  --magenta:#FF3D8A;
  --green:#58F27B;
  --red:#FF5C5C;
  --txt:#FFFFFF;
  --body:#AFC3E1;
  --muted:#8FA3C8; /* AA on all panel backgrounds */
  --fd:'Big Shoulders Display','ArchyEDT','Noto Sans Georgian',sans-serif;
  --fu:'Rajdhani','Noto Sans Georgian',sans-serif;
  --fh:'Chakra Petch','Noto Sans Georgian',monospace;
  --skew:-8deg;
  --unskew:8deg;
  --glow-cyan:rgba(55,200,245,.45);
  --glow-gold:rgba(255,210,74,.4);
  --glow-orange:rgba(249,158,26,.45);
}
/* ArchyEDT (typeface.ge) - Georgian display font, embedded for single-file portability */

/* ---------- bilingual visibility (html.lang-ka / html.lang-en set by head boot script) ---------- */
html.lang-en .page-content .i-ka{ display:none !important; }
html.lang-ka .page-content .i-en{ display:none !important; }
.page-content #btn-lang b{ font-weight:inherit; }
/* MS Block glyphs fill the full em (ascent = 1.0em vs Big Shoulders' 0.81) — multi-line Georgian
   in tight headings collides at line-height:1. Inline .i-ka lifts only the lines it sits on. */
.page-content h1 .i-ka,.page-content h2 .i-ka,.page-content h3 .i-ka,.page-content h4 .i-ka,.page-content .hero-sub .i-ka{ line-height:1.22; }

/* ---------- reset / base ---------- */
.page-content *,.page-content *::before,.page-content *::after{ box-sizing:border-box; margin:0; padding:0; }
.page-content{ scroll-behavior:smooth; overflow-x:clip; }
.page-content{
  background:var(--bg1);
  color:var(--body);
  font-family:var(--fu);
  font-size:17px;
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
.page-content img,.page-content svg{ max-width:100%; display:block; }
.page-content a{ color:var(--cyan); text-decoration:none; }
.page-content button{ font-family:inherit; background:none; border:0; color:inherit; cursor:pointer; }
.page-content input,.page-content select,.page-content textarea{ font-family:inherit; }
.page-content ::selection{ background:var(--cyan); color:var(--bg0); }
.page-content ::-webkit-scrollbar{ width:10px; }
.page-content ::-webkit-scrollbar-track{ background:var(--bg0); }
.page-content ::-webkit-scrollbar-thumb{ background:#2E3A5C; border:2px solid var(--bg0); border-radius:5px; }
.page-content ::-webkit-scrollbar-thumb:hover{ background:var(--cyan); }
@media (pointer:fine){
  .page-content.gamecursor,.page-content.gamecursor a,.page-content.gamecursor button,.page-content.gamecursor input,.page-content.gamecursor select,.page-content.gamecursor textarea,.page-content.gamecursor label{ cursor:none; }
}

.page-content h1,.page-content h2,.page-content h3,.page-content h4{ font-family:var(--fd); color:var(--txt); text-transform:none; line-height:1; font-weight:800; } /* Latin headings typed in caps; uppercase would remap Georgian to mtavruli and lose MS Block */
.page-content :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.page-content .skip-link{ position:fixed; top:-60px; left:16px; z-index:10001; background:var(--cyan); color:var(--bg0);
  font-family:var(--fh); font-size:13px; letter-spacing:.1em; padding:10px 18px; transition:top .2s ease; }
.page-content .skip-link:focus{ top:8px; }
.page-content .sk{ display:inline-block; transform:skewX(-10deg); } /* skew the span, not the box */

/* ---------- layers ---------- */
.page-content #bg-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.page-content #page{ position:relative; z-index:1; }

/* CRT overlay: scanlines + rolling band + vignette */
.page-content .fx-overlay{ position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); opacity:.55; }
.page-content .fx-overlay::before{ content:''; position:absolute; left:0; right:0; height:140px;
  background:linear-gradient(transparent, rgba(160,220,255,.045), transparent);
  animation:crt-roll 9s linear infinite; }
.page-content .fx-overlay::after{ content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 58%, rgba(0,0,10,.42) 100%); }
@keyframes crt-roll{ from{ transform:translateY(-20vh);} to{ transform:translateY(120vh);} }

/* periodic diagonal signal sweep */
.page-content #sweep-line{ position:fixed; top:-10%; left:-30%; width:3px; height:120%; z-index:9001; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-12deg) translateX(-10vw); opacity:0; }
.page-content #sweep-line.fire{ animation:sweep .9s ease-in-out; }
@keyframes sweep{ 0%{ opacity:0; transform:skewX(-12deg) translateX(-10vw);} 15%{opacity:1;} 85%{opacity:1;} 100%{ opacity:0; transform:skewX(-12deg) translateX(140vw);} }

/* white impact flash */
.page-content #flash{ position:fixed; inset:0; z-index:9500; pointer-events:none; background:#fff; opacity:0; mix-blend-mode:overlay; }
.page-content #flash.fire{ animation:flashfire .28s ease-out; }
@keyframes flashfire{ 0%{opacity:0;} 20%{opacity:.85;} 100%{opacity:0;} }
.page-content #page.shake{ animation:pageshake .3s linear; }
@keyframes pageshake{
  10%{ transform:translate(5px,-4px) rotate(.25deg);} 30%{ transform:translate(-5px,3px);}
  50%{ transform:translate(3px,-2px) rotate(-.2deg);} 70%{ transform:translate(-2px,1px);}
  90%{ transform:translate(1px,0);} 100%{ transform:none;} }

/* ---------- custom cursor ---------- */
.page-content #cursor-ring,.page-content #cursor-dot{ position:fixed; top:0; left:0; z-index:10000; pointer-events:none; opacity:0; }
.page-content.gamecursor #cursor-ring,.page-content.gamecursor #cursor-dot{ opacity:1; }
.page-content #cursor-dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); margin:-3px 0 0 -3px; }
.page-content #cursor-ring{ width:34px; height:34px; margin:-17px 0 0 -17px; border:1.5px solid var(--cyan);
  border-radius:50%; transition:transform .18s ease, border-color .18s ease; }
.page-content #cursor-ring::before,.page-content #cursor-ring::after{ content:''; position:absolute; background:var(--cyan); transition:background .18s ease; }
.page-content #cursor-ring::before{ left:50%; top:-6px; width:1.5px; height:5px; margin-left:-.75px; box-shadow:0 37px 0 var(--cyan); }
.page-content #cursor-ring::after{ top:50%; left:-6px; height:1.5px; width:5px; margin-top:-.75px; box-shadow:37px 0 0 var(--cyan); }
.page-content #cursor-ring.lock{ transform:scale(1.45) rotate(45deg); border-color:var(--orange); }
.page-content #cursor-ring.lock::before,.page-content #cursor-ring.lock::after{ background:var(--orange); box-shadow:none; }
.page-content #cursor-ring.down{ transform:scale(.75); }
.page-content .trail-dot{ position:fixed; top:0; left:0; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:var(--cyan); z-index:9999; pointer-events:none; opacity:0; }
.page-content .trail-dot.live{ animation:trailfade .45s ease-out forwards; }
@keyframes trailfade{ 0%{ opacity:.55; transform:scale(1);} 100%{ opacity:0; transform:scale(.2) translateY(4px);} }

/* ---------- keycap ---------- */
.page-content .kbd{ display:inline-block; font-family:var(--fh); font-size:11px; color:var(--muted);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:3px; padding:1px 6px;
  letter-spacing:.08em; vertical-align:middle; transition:all .15s ease; }
.page-content .kbd.hot{ color:var(--orange2); border-color:rgba(249,158,26,.5); }

/* ---------- buttons ---------- */
.page-content .btn{ position:relative; display:inline-block; font-family:var(--fd); font-weight:800; text-transform:none;
  font-size:22px; letter-spacing:.05em; padding:14px 34px; transform:skewX(var(--skew));
  border:1.5px solid var(--cyan); color:var(--txt); overflow:hidden;
  transition:transform .18s ease, box-shadow .25s ease, color .18s ease; }
.page-content .btn > span{ display:inline-block; transform:skewX(var(--unskew)); position:relative; z-index:2; }
.page-content .btn::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--cyan), var(--cyan2));
  transform:translateX(-101%); transition:transform .18s ease; z-index:1; }
.page-content .btn:hover{ transform:skewX(var(--skew)) translateY(-3px); box-shadow:0 6px 28px var(--glow-cyan); color:var(--bg0); }
.page-content .btn:hover::before{ transform:translateX(0); }
.page-content .btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.page-content .btn.filled-orange{ border-color:var(--orange); background:linear-gradient(90deg, var(--orange), var(--orange2)); color:var(--bg0); }
.page-content .btn.filled-orange::before{ background:#fff; opacity:.25; }
.page-content .btn.filled-orange:hover{ box-shadow:0 8px 34px var(--glow-orange); color:var(--bg0); }
/* perpetual pulse ring for primary CTA — box-shadow so the button's own
   overflow:hidden can't clip it; paused on hover (hover has its own glow) */
.page-content .btn.pulse:not(:hover){ animation:pulsering 2.8s ease-out infinite; }
@keyframes pulsering{ 0%{ box-shadow:0 0 0 0 rgba(249,158,26,.7);} 70%,100%{ box-shadow:0 0 0 12px rgba(249,158,26,0);} }

/* ---------- section scaffolding ---------- */
.page-content section{ position:relative; padding:110px 6vw 90px; overflow:hidden; scroll-margin-top:56px; }
.page-content .ribbon{ margin-bottom:56px; position:relative; }
.page-content .ribbon .kicker{ font-family:var(--fu); font-weight:600; font-size:13px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:10px; display:flex; align-items:center; gap:14px; }
.page-content .ribbon .kicker::after{ content:''; height:1px; width:120px; background:linear-gradient(90deg, var(--cyan), transparent); }
.page-content .ribbon h2{ font-size:clamp(44px,7vw,96px); font-weight:900; letter-spacing:.01em; }
.page-content .ribbon .rule{ margin-top:12px; height:4px; width:0; background:linear-gradient(90deg, var(--cyan), transparent 80%);
  transition:width 1s cubic-bezier(.16,1,.3,1) .2s; }
.page-content .in .ribbon .rule,.page-content .ribbon.in .rule{ width:min(420px,60%); }

/* diagonal slash decorations inside sections */
.page-content .slash{ position:absolute; top:-10%; height:120%; width:22vw; background:rgba(55,200,245,.05);
  transform:skewX(-12deg); pointer-events:none; }
.page-content .slash.drift{ animation:slashdrift 40s ease-in-out infinite alternate; }
@keyframes slashdrift{ from{ translate:0 0; } to{ translate:8vw 0; } }

/* scroll-reveal engine — :not(.in) holds the hidden state so revealed
   elements return to their NATURAL styles (incl. resting skews + hover) */
.page-content [data-reveal]{ transition:opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms); }
.page-content [data-reveal]:not(.in){ opacity:0; transform:translateY(34px); }
.page-content [data-reveal="left"]:not(.in){ transform:translateX(-44px) skewX(-4deg); }
.page-content [data-reveal="skew"]:not(.in){ transform:translateY(46px) skewX(-16deg); }

/* ---------- top bar chrome ---------- */
.page-content .topbar{ position:fixed; top:0; left:0; right:0; z-index:900; height:62px;
  display:flex; align-items:center; gap:28px; padding:0 22px;
  background:rgba(10,21,38,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); }
.page-content .logo{ display:flex; align-items:center; gap:10px; }
@keyframes logobreathe{ 0%,100%{ filter:drop-shadow(0 0 4px var(--glow-cyan)); } 50%{ filter:drop-shadow(0 0 12px var(--glow-cyan)); } }
.page-content .nav-tabs{ display:flex; gap:6px; margin:0 auto; }
.page-content .nav-tabs a{ position:relative; font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:7px 18px; border:1px solid transparent; transform:skewX(-10deg);
  transition:color .18s ease, background .18s ease, border-color .18s ease; }
.page-content .nav-tabs a span{ display:inline-block; transform:skewX(10deg); }
.page-content .nav-tabs a:hover{ color:var(--txt); border-color:var(--line); }
.page-content .nav-tabs a.active{ color:var(--bg0); background:var(--cyan); box-shadow:0 4px 18px var(--glow-cyan); }
.page-content .nav-tabs a .pip{ position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 8px var(--glow-orange); animation:pippulse 2s ease-in-out infinite; }
@keyframes pippulse{ 50%{ transform:scale(1.35);} }
.page-content .player-chip{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); padding:5px 12px 5px 6px;
  background:rgba(16,31,60,.6); transition:border-color .2s ease, box-shadow .2s ease; }
.page-content .player-chip:hover{ border-color:var(--cyan); box-shadow:0 0 18px rgba(55,200,245,.25); }
.page-content .player-chip .avatar{ width:32px; height:36px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:radial-gradient(circle at 35% 30%, var(--cyan2), #123 70%); }
.page-content .player-chip .who{ line-height:1.15; text-align:left; }
.page-content .player-chip .who b{ display:block; font-size:12px; color:var(--txt); letter-spacing:.1em; font-weight:700; }
.page-content .player-chip .who i{ font-style:normal; font-family:var(--fh); font-size:10px; color:var(--muted); }
.page-content .player-chip .dot{ width:8px; height:8px; border-radius:50%; background:#3AE374; position:relative; }
.page-content .player-chip .dot::after{ content:''; position:absolute; inset:0; border-radius:50%; border:1px solid #3AE374;
  animation:sonar 2s ease-out infinite; }
@keyframes sonar{ from{ transform:scale(1); opacity:.8; } to{ transform:scale(2.6); opacity:0; } }

/* ---------- bottom bar chrome ---------- */
.page-content .bottombar{ position:fixed; bottom:0; left:0; right:0; z-index:900; height:44px;
  display:flex; align-items:center; justify-content:space-between; padding:0 18px; gap:16px;
  background:rgba(10,21,38,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(55,200,245,.2); font-family:var(--fh); font-size:12px; }
.page-content .chatline{ color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.page-content .chatline .tag{ color:var(--cyan); }
.page-content .chatline::after{ content:'▌'; color:var(--cyan); animation:blink 1.06s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.page-content .chrome-btns{ display:flex; gap:10px; flex-shrink:0; }
.page-content .chrome-btns button{ font-family:var(--fh); font-size:11px; letter-spacing:.1em; color:var(--body);
  border:1px solid var(--line); padding:4px 12px; transform:skewX(-10deg);
  transition:all .15s ease; }
.page-content .chrome-btns button span{ display:inline-block; transform:skewX(10deg); }
.page-content .chrome-btns button:hover{ background:var(--cyan); color:var(--bg0); border-color:var(--cyan); box-shadow:0 0 14px var(--glow-cyan); }
.page-content .chrome-btns button.hot:hover{ background:var(--orange); border-color:var(--orange); box-shadow:0 0 14px var(--glow-orange); }

/* ---------- boot overlay ---------- */
.page-content #boot{ position:fixed; inset:0; z-index:9600; display:grid; place-items:center; background:transparent; }
.page-content #boot .panel{ position:absolute; inset:0; background:#05090F; transition:transform .55s cubic-bezier(.7,0,.3,1); }
.page-content #boot .panel.top{ clip-path:polygon(0 0,100% 0,100% 42%,0 58%); }
.page-content #boot .panel.bot{ clip-path:polygon(0 58%,100% 42%,100% 100%,0 100%); }
.page-content #boot.exit .panel.top{ transform:translate(-8%,-100%); }
.page-content #boot.exit .panel.bot{ transform:translate(8%,100%); }
.page-content #boot .boot-content{ position:relative; z-index:2; text-align:center; transition:opacity .25s ease; }
.page-content #boot.exit .boot-content{ opacity:0; }
.page-content #boot.gone{ display:none; }
@keyframes bootpop{ from{ transform:scale(.82); opacity:0;} to{ transform:scale(1); opacity:1;} }
.page-content .boot-lines{ font-family:var(--fh); font-size:13px; color:var(--muted); text-align:left;
  min-height:66px; width:340px; max-width:80vw; margin:0 auto 18px; }
.page-content .boot-lines .ok{ color:var(--green); }
.page-content .boot-press{ font-family:var(--fh); font-size:14px; letter-spacing:.28em; color:var(--cyan);
  animation:blink 1.1s steps(2) infinite; opacity:0; }
.page-content .boot-press.show{ opacity:1; }


/* ============================================================
   PART 2 — HERO / TICKER / HERO SELECT / PLAY (services)
   ============================================================ */

/* ---------- HERO: main menu ---------- */
.page-content #hero{ min-height:100svh; display:grid; grid-template-columns:300px 1fr; align-items:center; gap:5vw;
  padding-top:120px; padding-bottom:120px; }
.page-content .hero-bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.page-content .hero-bg .band{ position:absolute; top:-12%; right:-6%; width:64%; height:124%;
  background:linear-gradient(160deg, rgba(16,31,60,.9), rgba(13,27,46,.4));
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%); }
.page-content .hero-bg .ghost{ position:absolute; right:-4vw; top:50%; transform:translateY(-52%) skewX(-10deg);
  font-family:var(--fd); font-weight:900; font-size:56vw; line-height:.8; color:rgba(255,255,255,.028);
  user-select:none; }
.page-content .hero-bg .shard{ position:absolute; width:130px; height:26px; background:rgba(55,200,245,.10);
  animation:heroshardbob 5s ease-in-out infinite alternate; }
.page-content .hero-bg .shard.s1{ top:22%; right:16%; animation-duration:4.2s; }
.page-content .hero-bg .shard.s2{ top:30%; right:8%; width:90px; animation-duration:5.4s; background:rgba(249,158,26,.10); }
.page-content .hero-bg .shard.s3{ top:66%; right:22%; width:180px; animation-duration:6.1s; }
/* hero shards animate `transform` so the JS parallax `translate` property still composes */
@keyframes heroshardbob{ from{ transform:skewX(-30deg) translateY(-8px) rotate(-1deg); } to{ transform:skewX(-30deg) translateY(8px) rotate(1.5deg); } }
@keyframes shardbob{ from{ translate:0 -8px; rotate:-1deg; } to{ translate:0 8px; rotate:1.5deg; } }

/* The character used to be a 917KB base64 PNG inlined right here — 74% of this whole
   file. It is now three external WebP frames (hero-giorgi / hero-capu / hero-tiger),
   which the browser caches separately and which let the banner cycle between them. */
/* hero character splash — big main-character figure anchored bottom-right, edges faded into the banner */
/* --pacc is the frame's accent — cyan for Giorgi, violet for Cappuccino, carrot for
   Tiger — and the glow, the nameplate shadow and the class chip all read from it */
.page-content #hero{ --pacc:var(--cyan); }
.page-content .hero-char{ position:absolute; right:8%; bottom:0; height:84%; aspect-ratio:760/1160; z-index:1;
  pointer-events:none; animation:charfloat 6.5s ease-in-out infinite; }
.page-content .hero-char .cglow{ position:absolute; inset:8% 6% 6% 12%; z-index:0; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--pacc) 24%, transparent), rgba(255,60,90,.13) 52%, transparent 74%);
  filter:blur(30px); animation:charglow 4s ease-in-out infinite alternate; }
/* three stacked frames, cross-fading. All three were composited onto one 760x1160
   canvas with a shared floor line, so switching between them moves nothing but the
   figure itself — no jump, no re-scale. */
.page-content .hero-char .cbody{ position:absolute; inset:0; z-index:1;
  background:var(--src) no-repeat bottom right / contain;
  opacity:0; transition:opacity .9s ease; }
.page-content .hero-char .cbody.on{ opacity:1; }
@keyframes charfloat{ 50%{ transform:translateY(-12px); } }
@keyframes charglow{ from{ opacity:.65; } to{ opacity:1; } }
@media (max-width:1020px){ .page-content .hero-char{ opacity:.24; right:-8%; } }

/* ---------- hero: keep the copy off the character ----------
   MARKETING scaled on 11.5vw while the character scaled on the hero's HEIGHT,
   so the two grew at different rates and eventually collided — 321px of overlap
   at 1280x800, straight across his head, shoulders and chest.
   Rather than tune numbers per device: give the character a width we can name,
   reserve that strip on the text side, and let the headline size itself from
   whatever column is actually left. Self-correcting at any viewport and any
   zoom level, because both sides derive from the same measurement. */
.page-content{ --char-w:clamp(180px,24vw,500px); }
@media (min-width:1021px){
  /* min() so the rendered width can never exceed --char-w and never exceeds the
     original 84% either — he only ever gets smaller, never bigger (868/1500=.5787) */
  /* 760/1160 = .6552 — the new frame aspect; keeps the reserved text column exact */
  .page-content .hero-char{ right:3%; height:min(84%, calc(var(--char-w) / 0.6552)); }
  /* .82 because the artwork's left edge is transparent across the headline band —
     the silhouette does not start until ~20% into its own box */
  .page-content .hero-lockup{ padding-right:calc(var(--char-w) * .82 + 1.5vw); }
}
.page-content .hero-lockup{ container-type:inline-size; }
@media (max-width:640px){ .page-content .hero-char{ display:none; } }
@media (prefers-reduced-motion:reduce){ .page-content .hero-char,.page-content .hero-char .cglow{ animation:none; } }

/* SIMS character nameplate — game hero-select style */
.page-content .hero-char-plate{ position:absolute; z-index:2; bottom:21%; right:12%; text-align:right; pointer-events:none;
  animation:charfloat 6.5s ease-in-out infinite; }
.page-content .hero-char-plate .cp-name{ font-family:var(--fd); font-weight:900; font-size:clamp(30px,4.4vw,60px); line-height:.9;
  color:var(--txt); letter-spacing:.03em; transform:skewX(-10deg); transition:text-shadow .9s ease;
  text-shadow:4px 4px 0 color-mix(in srgb, var(--pacc) 55%, transparent),
              0 0 26px color-mix(in srgb, var(--pacc) 45%, transparent); }
.page-content .hero-char-plate .cp-tags{ display:flex; gap:8px; justify-content:flex-end; margin-top:11px; }
.page-content .hero-char-plate .cp-tags span{ display:inline-block; transform:skewX(-10deg); }
.page-content .hero-char-plate .cp-tags b{ display:inline-block; transform:skewX(10deg); font-weight:inherit; }
.page-content .hero-char-plate .lv{ font-family:var(--fd); font-weight:800; font-size:15px; color:var(--gold);
  border:1.5px solid var(--gold); padding:4px 12px; box-shadow:0 0 14px rgba(255,210,74,.3); }
.page-content .hero-char-plate .cls{ font-family:var(--fh); font-weight:600; font-size:11px; letter-spacing:.16em; color:var(--pacc);
  border:1px solid var(--line); padding:5px 12px; transition:color .9s ease; }
@media (max-width:1020px){ .page-content .hero-char-plate{ display:none; } }

/* left game-menu list */
.page-content .hero-menu{ display:flex; flex-direction:column; gap:8px; position:relative; z-index:2; }
.page-content .hero-menu a{ position:relative; font-family:var(--fd); font-weight:700; font-size:26px; letter-spacing:.04em;
  text-transform:none; color:var(--body); padding:10px 20px 10px 26px; transform:skewX(-10deg);
  border-left:4px solid transparent; overflow:hidden;
  transition:color .18s ease, transform .22s ease, border-color .18s ease; }
.page-content .hero-menu a span{ display:inline-block; transform:skewX(10deg); position:relative; z-index:2; }
.page-content .hero-menu a::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--cyan), var(--cyan2));
  transform:translateX(-101%); transition:transform .2s ease; }
.page-content .hero-menu a::after{ content:'▸'; position:absolute; left:8px; top:50%; translate:0 -50%; color:var(--bg0);
  opacity:0; z-index:2; transition:opacity .18s ease; }
.page-content .hero-menu a:hover,.page-content .hero-menu a.selected{ color:var(--bg0); transform:skewX(-10deg) translateX(12px);
  border-left-color:var(--txt); }
.page-content .hero-menu a:hover::before,.page-content .hero-menu a.selected::before{ transform:translateX(0); }
.page-content .hero-menu a:hover::after{ opacity:1; }
.page-content .hero-menu:hover a:not(:hover){ opacity:.55; }
.page-content .hero-menu a .pip{ position:absolute; top:6px; right:8px; width:9px; height:9px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 10px var(--glow-orange); animation:pippulse 2s ease-in-out infinite; z-index:3; }

/* title lockup */
.page-content .hero-lockup{ position:relative; z-index:2; }
.page-content .hero-kicker{ font-weight:600; font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); margin-bottom:14px; }
.page-content .hero-title{ font-size:clamp(64px,11.5vw,176px); font-weight:900; letter-spacing:.01em; position:relative;
  color:var(--txt); width:fit-content; }
/* MARKETING renders ~4.6x the font size wide, so 21cqw always fits the reserved
   column. Engines without cqw units drop this line and keep the vw rule above. */
.page-content .hero-title{ font-size:clamp(64px, min(21cqw, 11.5vw), 176px); }
.page-content .hero-title .letters{ display:inline-block; transform:skewX(-10deg);
  text-shadow:6px 6px 0 rgba(55,200,245,.5); }
.page-content .hero-title .letters .lt{ display:inline-block; opacity:0; transform:translateY(34px); filter:blur(6px); }
.page-content .hero-title.cascade .lt{ animation:ltdrop .55s cubic-bezier(.2,1,.3,1) forwards; animation-delay:var(--ld); }
@keyframes ltdrop{ to{ opacity:1; transform:none; filter:blur(0); } }
/* rgb-split glitch (activated .glitching via JS after cascade) */
.page-content .hero-title.glitch-ready::before,.page-content .hero-title.glitch-ready::after{ content:attr(data-text); position:absolute;
  left:0; top:0; transform:skewX(-10deg); opacity:0; pointer-events:none; }
.page-content .hero-title.glitching::before{ color:#0FF; opacity:.75; animation:glitchtop .32s steps(2) both; }
.page-content .hero-title.glitching::after{ color:#F0F; opacity:.75; animation:glitchbot .32s steps(3) both; }
@keyframes glitchtop{ 0%{ clip-path:inset(12% 0 58% 0); transform:skewX(-10deg) translate(-7px,-2px);}
  50%{ clip-path:inset(40% 0 30% 0); transform:skewX(-14deg) translate(5px,1px);}
  100%{ clip-path:inset(70% 0 8% 0); transform:skewX(-10deg) translate(-3px,0);} }
@keyframes glitchbot{ 0%{ clip-path:inset(60% 0 12% 0); transform:skewX(-10deg) translate(6px,2px);}
  50%{ clip-path:inset(10% 0 72% 0); transform:skewX(-7deg) translate(-6px,-1px);}
  100%{ clip-path:inset(38% 0 40% 0); transform:skewX(-10deg) translate(2px,0);} }
.page-content .hero-sub{ font-family:var(--fd); font-weight:700; font-size:clamp(22px,3.2vw,44px); color:var(--txt);
  letter-spacing:.02em; text-transform:none; margin:6px 0 12px; }
.page-content .hero-sub .sk{ text-shadow:3px 3px 0 rgba(249,158,26,.35); }
.page-content .hero-why{ font-size:clamp(15px,1.5vw,19px); font-weight:600; color:var(--muted);
  max-width:580px; margin:0 0 30px; }
.page-content .hero-why b{ color:var(--gold); font-weight:700; }
/* keep hero text clear of the character art on the right (char is vh-sized, left edge ≈60vw on 16:10; hidden ≤640px, faded ≤1020px) */
.page-content .hero-kicker,.page-content .hero-sub,.page-content .hero-why{ max-width:min(540px, 23vw); }
@media (min-width:1021px){ .page-content .hero-sub{ font-size:clamp(20px, 2.1vw, 30px); } } /* fits the narrower column in 2 lines */
@media (max-width:1020px){ .page-content .hero-kicker,.page-content .hero-sub,.page-content .hero-why{ max-width:none; } }

/* client quote card in the hero — same 23vw column as the copy above it */
.page-content .hero-quote{ position:relative; max-width:min(540px, 23vw); margin:0 0 26px;
  border:1px solid var(--line); border-left:3px solid var(--cyan);
  background:rgba(9,18,34,.55); padding:13px 17px 14px; }
.page-content .hq-top{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.page-content .hq-stars{ display:flex; gap:2px; color:var(--gold); font-size:12px; letter-spacing:.04em;
  text-shadow:0 0 8px var(--glow-gold); }
.page-content .hq-tag{ font-family:var(--fh); font-size:9px; letter-spacing:.14em; color:var(--green);
  border:1px solid color-mix(in srgb, var(--green) 45%, var(--line)); padding:2px 7px; }
.page-content .hq-text{ font-size:14px; line-height:1.55; font-weight:600; color:var(--body); margin:0 0 11px; }
.page-content .hq-who{ display:flex; align-items:center; gap:10px; }
.page-content .hq-mark{ width:27px; height:27px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(55,200,245,.1);
  font-family:var(--fd); font-weight:800; font-size:13px; color:var(--cyan); }
.page-content .hq-name{ font-family:var(--fd); font-weight:800; font-size:14px; letter-spacing:.05em;
  color:var(--txt); line-height:1.15; }
.page-content .hq-role{ display:block; font-family:var(--fh); font-size:9px; letter-spacing:.11em; color:var(--muted); }
@media (max-width:1020px){ .page-content .hero-quote{ max-width:none; } }

.page-content .hero-ctas{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.page-content .version-line{ position:absolute; bottom:56px; left:6vw; font-family:var(--fh); font-size:11px; color:var(--muted);
  letter-spacing:.12em; z-index:2; }
.page-content .scroll-hint{ position:absolute; bottom:56px; right:6vw; display:flex; align-items:center; gap:12px; z-index:2;
  font-family:var(--fh); font-size:11px; letter-spacing:.2em; color:var(--muted); transition:opacity .5s ease; }
.page-content .scroll-hint .mouse{ width:20px; height:32px; border:1.5px solid var(--muted); border-radius:10px; position:relative; }
.page-content .scroll-hint .mouse::after{ content:''; position:absolute; top:5px; left:50%; width:3px; height:6px; margin-left:-1.5px;
  border-radius:2px; background:var(--cyan); animation:mousedrop 1.6s ease-in-out infinite; }
@keyframes mousedrop{ 0%{ transform:translateY(0); opacity:1;} 70%{ transform:translateY(12px); opacity:0;} 100%{ opacity:0;} }
.page-content .scroll-hint.gone{ opacity:0; }

/* ---------- killfeed ticker ---------- */
.page-content .ticker-wrap{ position:relative; z-index:3; transform:rotate(-1.6deg) scale(1.04); margin:-30px 0; }
.page-content .ticker{ overflow:hidden; white-space:nowrap; background:linear-gradient(90deg, var(--orange), var(--orange2)); padding:9px 0;
  border-top:2px solid rgba(5,9,15,.3); border-bottom:2px solid rgba(5,9,15,.3); }
.page-content .ticker .track{ display:inline-block; animation:marquee 26s linear infinite; }
.page-content .ticker:hover .track{ animation-play-state:paused; }
.page-content .ticker .track span{ font-family:var(--fd); font-weight:800; font-size:16px; letter-spacing:.12em;
  color:var(--bg0); text-transform:uppercase; padding:0 18px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.page-content .ticker.alt{ background:var(--bg2); border-color:rgba(55,200,245,.25); }
.page-content .ticker.alt .track{ animation-direction:reverse; animation-duration:32s; }
.page-content .ticker.alt .track span{ color:var(--cyan); -webkit-text-stroke:0; opacity:.85; }

/* ---------- HERO SELECT: player card ---------- */
.page-content #hero-select{ background:linear-gradient(180deg, var(--bg1), var(--bg0) 85%); }
.page-content .char-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:5vw; align-items:stretch; }

/* portrait */
.page-content .portrait-frame{ position:relative; transform:skewX(-6deg); border:2px solid transparent; min-height:560px;
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box,
    linear-gradient(160deg, var(--cyan) 0%, transparent 45%, transparent 60%, var(--orange) 100%) border-box;
  overflow:hidden; transition:box-shadow .3s ease; }
.page-content .portrait-frame:hover{ box-shadow:0 20px 60px rgba(55,200,245,.18); }
.page-content .portrait-inner{ position:absolute; inset:0; transform:skewX(6deg) scale(1.12); }
.page-content .rim{ position:absolute; inset:0; }
.page-content .rim.cy{ background:radial-gradient(60% 80% at 18% 45%, rgba(55,200,245,.32), transparent 60%);
  animation:rimbreathe 3.2s ease-in-out infinite alternate; }
.page-content .rim.or{ background:radial-gradient(55% 75% at 85% 60%, rgba(249,158,26,.22), transparent 60%);
  animation:rimbreathe 4.1s ease-in-out infinite alternate-reverse; }
@keyframes rimbreathe{ from{ opacity:.55; } to{ opacity:1; } }
.page-content .figure{ position:absolute; left:50%; bottom:-4%; width:78%; height:88%; transform:translateX(-50%);
  background:linear-gradient(180deg, #0E1D38 0%, #091528 100%);
  clip-path:polygon(38% 0,62% 0,66% 7%,64% 12%,72% 15%,78% 22%,80% 34%,96% 48%,100% 62%,100% 100%,0 100%,0 62%,4% 48%,20% 34%,22% 22%,28% 15%,36% 12%,34% 7%); }
.page-content .figure::before{ content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(55,200,245,.5) 0%, transparent 22%),
             linear-gradient(260deg, rgba(249,158,26,.35) 0%, transparent 20%); }
.page-content .figure::after{ content:''; position:absolute; top:1.5%; left:50%; width:26%; height:16%; transform:translateX(-50%);
  background:radial-gradient(circle at 42% 38%, #14294D, #0A1930 75%); border-radius:46% 54% 48% 52%;
  box-shadow:inset 6px 0 10px rgba(55,200,245,.35), inset -6px 0 10px rgba(249,158,26,.2); }
.page-content .visor{ position:absolute; top:8.5%; left:50%; width:15%; height:2.6%; transform:translateX(-50%);
  background:linear-gradient(90deg, var(--cyan), var(--cyan2)); border-radius:2px;
  box-shadow:0 0 18px var(--cyan), 0 0 42px rgba(55,200,245,.5); animation:visorpulse 2.6s ease-in-out infinite; }
@keyframes visorpulse{ 50%{ box-shadow:0 0 26px var(--cyan), 0 0 60px rgba(55,200,245,.7);} }
.page-content .pshard{ position:absolute; background:rgba(55,200,245,.14); border:1px solid rgba(55,200,245,.25);
  transform:skewX(-24deg); animation:shardbob 5s ease-in-out infinite alternate; }
.page-content .pshard.a{ width:70px; height:14px; top:18%; left:10%; animation-duration:4.4s; }
.page-content .pshard.b{ width:44px; height:10px; top:26%; right:12%; animation-duration:5.2s; background:rgba(249,158,26,.14); border-color:rgba(249,158,26,.3); }
.page-content .pshard.c{ width:100px; height:18px; bottom:30%; left:4%; animation-duration:6s; }
.page-content .gloss{ position:absolute; top:0; left:-70%; width:45%; height:100%; z-index:5;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.14), transparent);
  transform:skewX(-18deg); pointer-events:none; }
.page-content .portrait-frame:hover .gloss{ animation:glosssweep .8s ease; }
@keyframes glosssweep{ to{ left:130%; } }
.page-content .nameplate{ position:absolute; left:0; right:0; bottom:0; z-index:6; padding:20px 26px;
  background:linear-gradient(180deg, transparent, rgba(5,9,15,.92) 40%); transform:skewX(6deg) scale(1.12); transform-origin:bottom center; }
.page-content .nameplate .nrow{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.page-content .nameplate h3{ font-size:44px; font-weight:900; letter-spacing:.02em; }
.page-content .nameplate .class{ font-family:var(--fh); font-size:11px; letter-spacing:.22em; color:var(--cyan); }
.page-content .lv-badge{ font-family:var(--fd); font-weight:800; font-size:15px; color:var(--gold); padding:4px 12px;
  border:1.5px solid var(--gold); transform:rotate(0) skewX(-10deg); position:relative; overflow:hidden; }
.page-content .lv-badge::after{ content:''; position:absolute; top:0; left:-80%; width:40%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,240,180,.55), transparent);
  animation:goldsweep 5s ease-in-out infinite; }
/* transform-based sweep: composited, no layout work */
@keyframes goldsweep{ 0%,70%{ transform:skewX(-18deg) translateX(0); } 90%,100%{ transform:skewX(-18deg) translateX(560%); } }
.page-content .xp-bar{ margin-top:14px; }
.page-content .xp-track{ height:9px; background:#0B1930; border:1px solid var(--line); position:relative; overflow:hidden; }
.page-content .xp-track::before{ content:''; position:absolute; inset:0; z-index:2;
  background:repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(5,9,15,.8) calc(10% - 1px) 10%); }
.page-content .xp-fill{ height:100%; width:0; background:linear-gradient(90deg, var(--cyan), var(--cyan2)); position:relative;
  transition:width 1.5s cubic-bezier(.16,1,.3,1) .3s; }
.page-content .xp-fill::after{ content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(60deg, transparent 0 10px, rgba(255,255,255,.28) 10px 14px);
  animation:candy 1.2s linear infinite; }
@keyframes candy{ to{ translate:19px 0; } }
.page-content .xp-tip{ position:absolute; right:-2px; top:-3px; width:4px; height:15px; background:#fff;
  box-shadow:0 0 12px var(--cyan2); }
.page-content .xp-label{ display:flex; justify-content:space-between; font-family:var(--fh); font-size:11px; color:var(--muted);
  letter-spacing:.1em; margin-top:7px; }
.page-content .in .xp-fill{ width:78%; }

/* stat panel */
.page-content .stat-panel{ position:relative; border:1px solid var(--line); background:
  repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 1px, transparent 1px 7px), var(--bg2);
  padding:34px 34px 28px; display:flex; flex-direction:column; gap:6px; }
.page-content .stat-panel::before{ content:''; position:absolute; top:-1px; left:-1px; width:26px; height:26px;
  border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); }
.page-content .stat-panel::after{ content:''; position:absolute; bottom:-1px; right:-1px; width:26px; height:26px;
  border-bottom:2px solid var(--cyan); border-right:2px solid var(--cyan); }
.page-content .stat-row{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:14px; padding:13px 0;
  border-bottom:1px solid rgba(34,53,92,.6); }
.page-content .stat-row .lbl{ font-weight:600; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.page-content .stat-row .val{ font-family:var(--fh); font-weight:600; font-size:clamp(30px,3vw,42px); color:var(--txt);
  font-variant-numeric:tabular-nums; line-height:1; }
.page-content .stat-row .val small{ font-size:.55em; color:var(--cyan); }
.page-content .stat-row .minibar{ grid-column:1 / -1; height:3px; background:#0B1930; overflow:hidden; }
.page-content .stat-row .minibar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--cyan), var(--cyan2));
  transition:width 1s cubic-bezier(.16,1,.3,1) var(--d,0ms); }
.page-content .in .stat-row .minibar i{ width:var(--w,70%); }
.page-content .loadout{ margin-top:18px; }
.page-content .loadout .lo-lbl{ font-weight:600; font-size:12px; letter-spacing:.26em; color:var(--muted); text-transform:uppercase; margin-bottom:12px; }
.page-content .loadout .hexes{ display:flex; gap:14px; }
.page-content .hex-ability{ position:relative; width:58px; height:66px; display:grid; place-items:center;
  border:0; transition:transform .18s ease, filter .18s ease; }
/* hex shape lives on pseudos so the tooltip child isn't clipped */
.page-content .hex-ability::after{ content:''; position:absolute; inset:0; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg, var(--acc,var(--cyan)) 0%, var(--bg3) 55%); z-index:0; }
.page-content .hex-ability::before{ content:''; position:absolute; inset:2px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg, #16294D, #0A1526); z-index:1; }
.page-content .hex-ability .glyph{ position:relative; z-index:1; font-family:var(--fh); font-weight:600; font-size:18px; color:var(--acc,var(--cyan)); }
.page-content .hex-ability:hover{ transform:scale(1.15) translateY(-4px); filter:drop-shadow(0 6px 14px var(--glow-cyan)); }
.page-content .hex-ability .tip{ position:absolute; bottom:calc(100% + 10px); left:50%; translate:-50% 6px; white-space:nowrap;
  font-family:var(--fh); font-size:11px; color:var(--txt); background:var(--bg0); border:1px solid var(--acc,var(--cyan));
  padding:6px 12px; opacity:0; pointer-events:none; transition:all .2s ease; z-index:10; }
.page-content .hex-ability:hover .tip,.page-content .hex-ability:focus-visible .tip{ opacity:1; translate:-50% 0; }
.page-content .bio{ margin-top:18px; font-size:16px; color:var(--body); border-left:3px solid var(--cyan); padding-left:16px; }
.page-content .bio b{ color:var(--txt); }

/* ---------- services: rectangular price cards (goldilocks) ---------- */
.page-content .svc-lbl{ font-family:var(--fh); font-size:12px; letter-spacing:.28em; color:var(--muted); margin:34px 0 16px; display:flex; align-items:center; gap:14px; }
.page-content .svc-lbl::after{ content:''; height:1px; flex:1; background:linear-gradient(90deg, var(--line), transparent); }
.page-content .svc-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.page-content .svc-card{ position:relative; display:flex; flex-direction:column; gap:10px; padding:24px 22px 20px;
  border:1px solid var(--line); border-top:3px solid var(--acc, var(--cyan));
  background:rgba(9,18,34,.6); transition:transform .18s ease, box-shadow .25s ease, border-color .18s ease; }
.page-content .svc-card:hover{ transform:translateY(-4px); border-color:var(--acc, var(--cyan)); box-shadow:0 10px 34px rgba(0,0,0,.35); }
.page-content .svc-card .problem{ font-family:var(--fu); font-size:13.5px; color:var(--muted); font-style:italic; min-height:2.6em; }
.page-content .svc-card h3{ font-size:24px; letter-spacing:.02em; color:var(--txt); }
.page-content .svc-card h3 small{ display:block; font-size:12px; color:var(--acc, var(--cyan)); font-family:var(--fh); letter-spacing:.2em; margin-top:4px; }
.page-content .svc-price{ font-family:var(--fd); font-weight:900; font-size:34px; color:var(--gold); line-height:1; }
.page-content .svc-price small{ font-size:.42em; color:var(--muted); font-family:var(--fh); font-weight:400; letter-spacing:.12em; }
.page-content .svc-price .was{ font-size:.5em; color:var(--muted); text-decoration:line-through; font-weight:700; margin-right:8px; }
.page-content .svc-card ul{ list-style:none; display:flex; flex-direction:column; gap:6px; margin:2px 0 6px; }
.page-content .svc-card ul li{ font-size:13.5px; color:var(--body); padding-left:16px; position:relative; }
.page-content .svc-card ul li::before{ content:'✓'; position:absolute; left:0; color:var(--acc, var(--cyan)); font-size:11px; }
/* The index card promised "რეკლამა — Meta / Google / TikTok" at ₾5,600 while the ad budget
   exclusion only appeared on squad.html. Buyers read the cheaper page as the offer, so the
   two terms that change the real cost belong here too — and at body contrast, not grey. */
.page-content .svc-fine{ font-family:var(--fh); font-size:11px; letter-spacing:.06em; color:var(--body);
  border-top:1px solid var(--line); padding-top:9px; margin-top:2px; line-height:1.5; }
/* Five of six test buyers stalled on the same unanswered terms — VAT, term length, notice,
   who funds the ads, who owns the ad accounts afterwards. All five lived only in Giorgi's
   head. Full contrast and next to the form, because these are material terms, not fine print. */
.page-content .terms-panel{ margin-top:22px; border:1px solid var(--line); background:rgba(9,18,34,.6); padding:18px 18px 15px; }
.page-content .terms-panel h4{ font-family:var(--fh); font-size:11px; letter-spacing:.24em; color:var(--cyan);
  text-transform:uppercase; margin-bottom:13px; font-weight:600; }
.page-content .terms-panel dl{ display:grid; grid-template-columns:auto 1fr; gap:10px 14px; margin:0; }
.page-content .terms-panel dt{ font-family:var(--fh); font-size:11px; letter-spacing:.1em; color:var(--muted);
  text-transform:uppercase; white-space:nowrap; padding-top:2px; }
.page-content .terms-panel dd{ margin:0; font-size:13.5px; font-weight:600; color:var(--body); line-height:1.45; }
.page-content .terms-panel dd b{ color:var(--gold); font-weight:700; }
@media (max-width:640px){ .page-content .terms-panel dl{ grid-template-columns:1fr; gap:0; }
  .page-content .terms-panel dt{ margin-top:12px; } .page-content .terms-panel dt:first-child{ margin-top:0; } }
/* #career is the peak-desire moment and had no CTA at all — the portfolio simply ended and
   the visitor had to scroll past a ticker to find any way to act. */
.page-content .career-cta{ margin-top:52px; padding-top:30px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.page-content .career-cta p{ flex:1 1 260px; font-size:16px; font-weight:600; color:var(--txt); margin:0; }
@media (max-width:640px){ .page-content .career-cta{ flex-direction:column; align-items:stretch; } }
.page-content .svc-cta{ margin-top:auto; font-family:var(--fd); font-weight:800; font-size:16px; letter-spacing:.04em;
  color:var(--acc, var(--cyan)); display:inline-flex; align-items:center; gap:8px; transition:gap .15s ease; }
.page-content .svc-card:hover .svc-cta{ gap:14px; }
.page-content .svc-card.featured{ --acc:#FF7A2F; border-color:rgba(255,122,47,.55); background:linear-gradient(180deg, rgba(255,122,47,.08), rgba(9,18,34,.6) 40%);
  box-shadow:0 0 34px rgba(255,122,47,.14); transform:scale(1.03); z-index:2; }
.page-content .svc-card.featured:hover{ transform:scale(1.03) translateY(-4px); }
.page-content .pop-badge{ position:absolute; top:-13px; left:50%; translate:-50% 0; white-space:nowrap;
  font-family:var(--fh); font-size:10px; letter-spacing:.18em; color:var(--bg0);
  background:linear-gradient(90deg, var(--gold), #F6E7B9); padding:5px 16px; box-shadow:0 0 18px rgba(255,210,74,.4); }
.page-content .save-badge{ position:absolute; top:12px; right:12px; font-family:var(--fh); font-size:10px; letter-spacing:.12em;
  color:var(--bg0); background:var(--green); padding:4px 10px; box-shadow:0 0 14px rgba(88,242,123,.35); }
.page-content .svc-ones{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.page-content .svc-one{ position:relative; display:flex; flex-direction:column; gap:5px; padding:16px 18px 14px;
  border:1px solid var(--line); border-left:3px solid var(--acc, var(--cyan)); background:rgba(9,18,34,.55);
  transition:transform .16s ease, border-color .16s ease; }
.page-content .svc-one:hover{ transform:translateY(-3px); border-color:var(--acc, var(--cyan)); }
.page-content .svc-one b{ font-family:var(--fd); font-size:17px; font-weight:800; color:var(--txt); }
.page-content .svc-one .op{ font-family:var(--fd); font-weight:900; font-size:20px; color:var(--gold); }
.page-content .svc-one .op small{ font-size:.55em; color:var(--muted); font-family:var(--fh); }
.page-content .svc-one .op .was{ font-size:.6em; color:var(--muted); text-decoration:line-through; margin-right:6px; }
.page-content .svc-one .od{ font-size:12.5px; color:var(--muted); line-height:1.4; }
.page-content .brawl-wrap{ max-width:480px; margin:44px auto 0; }

/* ---------- team cards (also used on team.html) ---------- */
.page-content .team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.page-content .tm-card{ position:relative; border:1px solid var(--line); border-top:3px solid var(--acc, var(--cyan));
  background:rgba(9,18,34,.6); padding:24px 22px 20px; display:flex; flex-direction:column; gap:10px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .25s ease; }
.page-content .tm-card:hover{ transform:translateY(-4px); border-color:var(--acc, var(--cyan)); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.page-content .tm-ava{ width:62px; height:68px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display:grid; place-items:center; font-family:var(--fd); font-weight:900; font-size:28px; color:var(--bg0);
  background:linear-gradient(160deg, var(--acc, var(--cyan)), color-mix(in srgb, var(--acc, var(--cyan)) 35%, #05090F)); }
.page-content .tm-card h3{ font-size:22px; letter-spacing:.02em; }
.page-content .tm-role{ font-family:var(--fh); font-size:10px; letter-spacing:.2em; color:var(--acc, var(--cyan)); }
.page-content .tm-desc{ font-size:14px; color:var(--body); line-height:1.55; }
.page-content .tm-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; }
.page-content .tm-tags i{ font-style:normal; font-family:var(--fh); font-size:9.5px; letter-spacing:.12em;
  border:1px solid var(--line); padding:3px 9px; color:var(--muted); }
.page-content .tm-card.wide{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:20px; border-top-color:var(--line); }
.page-content .tm-card.wide .tm-desc{ max-width:none; }
@media (max-width:1020px){ .page-content .team-grid{ grid-template-columns:1fr; } .page-content .tm-card.wide{ flex-direction:column; align-items:flex-start; } }
@media (max-width:1020px){ .page-content .svc-tiers{ grid-template-columns:1fr; } .page-content .svc-card.featured{ transform:none; } .page-content .svc-card.featured:hover{ transform:translateY(-4px); } }

/* ---------- PLAY: services ---------- */
.page-content #play{ background:var(--bg1); padding-bottom:130px; }
.page-content .modes-row{ display:grid; grid-template-columns:repeat(4, 1fr) .8fr; gap:20px; align-items:end;
  position:relative; z-index:2; }
.page-content .mode-card{ --acc:var(--cyan); position:relative; height:470px; transform:skewX(var(--skew));
  border:1.5px solid var(--line); background:var(--bg2); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .3s ease, border-color .2s ease, filter .3s ease; }
.page-content .mode-card > *{ transform:skewX(var(--unskew)) scale(1.06); }
.page-content .modes-row:hover .mode-card:not(:hover){ filter:brightness(.55) saturate(.6); }
.page-content .mode-card:hover{ transform:skewX(var(--skew)) translateY(-20px) scale(1.03); border-color:var(--acc);
  box-shadow:0 24px 50px -6px var(--glow), 0 0 46px -4px var(--glow); z-index:3; }
.page-content .mode-card .art{ position:relative; height:60%; overflow:hidden; flex-shrink:0; }
.page-content .mode-card .plate{ position:relative; flex:1; padding:16px 22px; background:rgba(5,9,15,.55);
  border-top:1.5px solid var(--line); transition:background .25s ease, border-color .25s ease; }
.page-content .mode-card:hover .plate{ border-color:var(--acc); }
.page-content .mode-card .plate h3{ font-size:25px; font-weight:800; letter-spacing:.02em; color:var(--txt); }
.page-content .mode-card .plate .svc{ font-weight:700; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); }
.page-content .mode-card .plate p{ font-size:14px; line-height:1.45; color:var(--body); margin-top:5px; }
.page-content .mode-card .chips{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.page-content .mode-card .chips i{ font-style:normal; font-family:var(--fh); font-size:9px; letter-spacing:.14em; color:var(--muted);
  border:1px solid var(--line); padding:2px 7px; }
.page-content .mode-card .enter{ position:absolute; left:0; right:0; bottom:0; padding:9px; text-align:center;
  font-family:var(--fd); font-weight:800; font-size:15px; letter-spacing:.1em; color:var(--bg0);
  background:var(--acc); transform:skewX(var(--unskew)) scale(1.06) translateY(102%); transition:transform .22s ease; }
.page-content .mode-card:hover .enter,.page-content .mode-card:focus-within .enter{ transform:skewX(var(--unskew)) scale(1.06) translateY(0); }
/* per-card accents */
.page-content .m-social{ --acc:var(--cyan2); --glow:rgba(77,216,255,.4); }
.page-content .m-ads{ --acc:var(--gold); --glow:rgba(255,210,74,.42); }
.page-content .m-brand{ --acc:var(--magenta); --glow:rgba(255,61,138,.4); }
.page-content .m-content{ --acc:var(--green); --glow:rgba(88,242,123,.38); }
/* featured (competitive) */
.page-content .mode-card.featured{ translate:0 -26px; border-color:rgba(255,210,74,.6);
  box-shadow:0 0 42px rgba(255,210,74,.22); }
.page-content .mode-card.featured:hover{ transform:skewX(var(--skew)) translateY(-16px) scale(1.03); }
.page-content .mode-card.featured .plate{ border-color:rgba(255,210,74,.5); }
.page-content .mode-card .most-picked{ position:absolute; top:14px; right:-34px; rotate:38deg; z-index:5;
  font-family:var(--fh); font-size:9px; letter-spacing:.2em; color:var(--bg0);
  background:linear-gradient(90deg, var(--gold), #F6E7B9); padding:4px 40px; }
/* rank emblem floats above the featured card — parented to .modes-row so the
   card's overflow:hidden can't clip it; left = center of grid column 2 */
.page-content .rank-emblem{ position:absolute; top:-90px; left:calc((100% - 80px)/4.8 * 1.5 + 20px); translate:-50% 0;
  width:74px; height:74px; z-index:6; pointer-events:none;
  animation:emblembob 3.4s ease-in-out infinite; filter:drop-shadow(0 6px 18px var(--glow-gold)); }
@keyframes emblembob{ 50%{ translate:-50% -8px; } }
.page-content .rank-emblem .ring{ position:absolute; inset:0; border:2px dashed var(--gold); border-radius:50%;
  animation:spin 22s linear infinite; }
.page-content .rank-emblem .ring2{ position:absolute; inset:9px; border:1.5px solid rgba(255,210,74,.55); border-radius:50%;
  border-left-color:transparent; border-right-color:transparent; animation:spin 13s linear infinite reverse; }
.page-content .rank-emblem .core{ position:absolute; inset:24px; rotate:45deg;
  background:linear-gradient(135deg, var(--gold), #B8860B); animation:corepulse 2.4s ease-in-out infinite; }
@keyframes corepulse{ 50%{ scale:1.14; box-shadow:0 0 20px var(--glow-gold);} }
@keyframes spin{ to{ rotate:360deg; } }
/* card art scenes (pure CSS) */
.page-content .art-social{ background:linear-gradient(170deg, #07304A, #0A1526 80%); }
.page-content .art-social .bub{ position:absolute; bottom:-44px; border-radius:50% 50% 50% 6px; border:1.5px solid rgba(77,216,255,.5);
  background:rgba(77,216,255,.1); animation:bubrise 6s linear infinite; opacity:0; }
.page-content .art-social .bub.b1{ width:34px; height:30px; left:18%; animation-delay:0s; }
.page-content .art-social .bub.b2{ width:22px; height:20px; left:52%; animation-delay:1.6s; }
.page-content .art-social .bub.b3{ width:44px; height:38px; left:66%; animation-delay:3.1s; }
.page-content .art-social .bub.b4{ width:26px; height:23px; left:34%; animation-delay:4.4s; }
.page-content .art-social .heart{ position:absolute; bottom:-44px; width:18px; height:18px; background:var(--cyan2); left:44%;
  clip-path:path('M9 17 L2 9 A4.5 4.5 0 0 1 9 4 A4.5 4.5 0 0 1 16 9 Z'); animation:bubrise 7s linear 2.2s infinite; opacity:0; }
/* transform-based rise: composited, no layout work */
@keyframes bubrise{ 0%{ transform:translateY(0); opacity:0; } 12%{ opacity:.9; } 82%{ opacity:.6; } 100%{ transform:translateY(-380px); opacity:0; } }
.page-content .art-ads{ background:linear-gradient(170deg, #2A2208, #0A1526 80%); }
.page-content .art-ads svg{ position:absolute; inset:10% 8%; width:84%; height:80%; overflow:visible; }
.page-content .art-ads .graphline{ fill:none; stroke:var(--gold); stroke-width:2.5;
  stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600); animation:drawgraph 6s ease-in-out infinite; }
.page-content .art-ads .grapharea{ fill:url(#adsgrad); opacity:0; animation:areafade 6s ease-in-out infinite; }
@keyframes drawgraph{ 0%{ stroke-dashoffset:var(--len,600);} 45%,80%{ stroke-dashoffset:0;} 100%{ stroke-dashoffset:0; opacity:0;} }
@keyframes areafade{ 0%,25%{ opacity:0;} 55%,80%{ opacity:.5;} 100%{ opacity:0;} }
.page-content .art-ads .reticle{ position:absolute; top:16%; right:12%; width:60px; height:60px; border:1px solid rgba(255,210,74,.4);
  border-radius:50%; animation:spin 18s linear infinite; }
.page-content .art-ads .reticle::before{ content:''; position:absolute; inset:10px; border:1px dashed rgba(255,210,74,.35); border-radius:50%; }
.page-content .art-ads .reticle::after{ content:''; position:absolute; top:50%; left:-8px; right:-8px; height:1px; background:rgba(255,210,74,.4); }
.page-content .art-brand{ background:linear-gradient(170deg, #33102A, #0A1526 80%); }
.page-content .art-brand .shape{ position:absolute; animation:orbit 12s linear infinite; }
.page-content .art-brand .circ{ width:64px; height:64px; border-radius:50%; border:2px solid var(--magenta);
  top:26%; left:24%; --orx:26px; background:rgba(255,61,138,.08); }
.page-content .art-brand .tri{ width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent;
  border-bottom:52px solid rgba(77,216,255,.5); top:38%; left:48%; --orx:-30px; animation-duration:15s; }
.page-content .art-brand .sq{ width:44px; height:44px; border:2px solid var(--txt); rotate:14deg; top:20%; left:56%;
  --orx:20px; animation-duration:18s; opacity:.7; }
@keyframes orbit{ from{ transform:rotate(0) translateX(var(--orx,24px)) rotate(0);} to{ transform:rotate(360deg) translateX(var(--orx,24px)) rotate(-360deg);} }
.page-content .art-brand .swatches{ position:absolute; bottom:10%; left:50%; translate:-50% 0; display:flex; gap:5px; }
.page-content .art-brand .swatches i{ width:22px; height:8px; }
.page-content .art-content{ background:linear-gradient(170deg, #0A2E1A, #0A1526 80%); }
.page-content .art-content .bracket{ position:absolute; width:26px; height:26px; border:2.5px solid var(--green); opacity:.85; }
.page-content .art-content .bracket.tl{ top:14%; left:12%; border-right:0; border-bottom:0; }
.page-content .art-content .bracket.tr{ top:14%; right:12%; border-left:0; border-bottom:0; }
.page-content .art-content .bracket.bl{ bottom:16%; left:12%; border-right:0; border-top:0; }
.page-content .art-content .bracket.br{ bottom:16%; right:12%; border-left:0; border-top:0; }
.page-content .art-content .rec{ position:absolute; top:18%; right:20%; display:flex; align-items:center; gap:7px;
  font-family:var(--fh); font-size:11px; letter-spacing:.16em; color:var(--txt); }
.page-content .art-content .rec::before{ content:''; width:10px; height:10px; border-radius:50%; background:var(--red);
  animation:blink 1.2s steps(1) infinite; box-shadow:0 0 10px var(--red); }
.page-content .art-content .play-tri{ position:absolute; top:46%; left:50%; translate:-40% -50%; width:0; height:0;
  border-left:34px solid rgba(88,242,123,.85); border-top:22px solid transparent; border-bottom:22px solid transparent;
  filter:drop-shadow(0 0 16px rgba(88,242,123,.5)); animation:corepulse 2.8s ease-in-out infinite; }
.page-content .art-content .glitchbar{ position:absolute; left:0; right:0; height:5px; background:rgba(88,242,123,.25);
  animation:gbar 4.5s steps(1) infinite; }
@keyframes gbar{ 0%,88%{ top:30%; opacity:0;} 89%,92%{ top:34%; opacity:1; translate:6px 0;} 93%,96%{ top:62%; translate:-8px 0;} 97%,100%{ opacity:0;} }
/* (hover speed-up removed: mid-flight duration changes phase-snap animations) */

/* weekly brawl side card */
.page-content .brawl-card{ position:relative; height:400px; transform:skewX(var(--skew)); overflow:hidden;
  border:1.5px solid var(--orange2); background:linear-gradient(170deg, #B36A0A, #7A4A08 60%, #5C3606);
  box-shadow:0 0 34px rgba(249,158,26,.25); display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .3s ease; }
.page-content .brawl-card::before{ content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(5,9,15,.14) 0 14px, transparent 14px 28px); }
.page-content .brawl-card:hover{ transform:skewX(var(--skew)) translateY(-14px); box-shadow:0 18px 50px rgba(249,158,26,.4); }
.page-content .brawl-card > *{ transform:skewX(var(--unskew)) scale(1.05); position:relative; z-index:2; }
.page-content .brawl-card .bc-head{ text-align:center; padding:20px 14px 0; }
.page-content .brawl-card .bc-head .wk{ font-family:var(--fd); font-weight:900; font-size:30px; color:var(--bg0); letter-spacing:.03em; }
.page-content .brawl-card .bc-head .sub{ font-family:var(--fh); font-size:10px; letter-spacing:.2em; color:rgba(5,9,15,.75); }
.page-content .brawl-card .medal{ width:74px; height:74px; margin:16px auto; border-radius:50%; position:relative;
  background:radial-gradient(circle at 36% 32%, #FFE9B0, var(--gold) 55%, #B8860B);
  box-shadow:0 0 26px rgba(255,210,74,.55), inset 0 -6px 12px rgba(92,54,6,.6);
  display:grid; place-items:center; animation:medalbob 3s ease-in-out infinite; }
@keyframes medalbob{ 50%{ translate:0 -8px; } }
.page-content .brawl-card .medal b{ font-family:var(--fd); font-weight:900; font-size:30px; color:#5C3606; transform:skewX(-8deg); }
.page-content .brawl-card .bc-body{ background:rgba(5,9,15,.85); padding:16px 18px 18px; text-align:center; }
.page-content .brawl-card .bc-body h4{ font-size:19px; letter-spacing:.04em; color:var(--orange2); }
.page-content .brawl-card .bc-body p{ font-size:13px; color:var(--body); line-height:1.45; margin:6px 0 10px; }
.page-content .brawl-card .count{ font-family:var(--fh); font-weight:600; font-size:22px; color:var(--txt);
  letter-spacing:.1em; font-variant-numeric:tabular-nums; margin-bottom:12px; }
.page-content .brawl-card .count small{ display:block; font-size:9px; color:var(--muted); letter-spacing:.24em; }
.page-content .brawl-card .claim{ display:inline-block; font-family:var(--fd); font-weight:800; font-size:16px; letter-spacing:.06em;
  color:var(--orange2); border:1.5px solid var(--orange); padding:8px 24px; text-transform:uppercase;
  transition:all .18s ease; }
.page-content .brawl-card .claim:hover{ background:var(--orange); color:var(--bg0); box-shadow:0 0 22px var(--glow-orange); }
.page-content .ember{ position:absolute; bottom:-12px; width:4px; height:4px; border-radius:50%; z-index:1;
  background:radial-gradient(circle, #FFD9A0, rgba(249,158,26,0)); animation:emberrise var(--dur,9s) linear var(--del,0s) infinite; }
@keyframes emberrise{ 0%{ transform:translateY(0) translateX(0); opacity:0;} 10%{ opacity:.9;}
  50%{ transform:translateY(-46vh) translateX(14px);} 100%{ transform:translateY(-80vh) translateX(-8px); opacity:0;} }
/* floor line + reflections */
.page-content .modes-floor{ margin-top:26px; height:2px; background:linear-gradient(90deg, transparent, rgba(55,200,245,.5), transparent);
  position:relative; z-index:1; }
.page-content .modes-floor::after{ content:''; position:absolute; top:2px; left:0; right:0; height:70px;
  background:linear-gradient(180deg, rgba(55,200,245,.07), transparent); }


/* ============================================================
   PART 3 — LOOT / CAREER / PARTY / FOOTER / RESPONSIVE
   ============================================================ */

/* ---------- LOOT: supply drop ---------- */
.page-content #loot{ background:radial-gradient(80% 60% at 50% 100%, rgba(55,200,245,.06), transparent 70%), var(--bg0);
  text-align:center; padding-bottom:120px; }
.page-content #loot .ribbon{ text-align:left; }
.page-content .crate-stage{ position:relative; min-height:480px; display:flex; align-items:flex-end; justify-content:center; }
.page-content .crate-wrap{ position:relative; width:min(320px,70vw); }
.page-content .crate{ position:relative; width:100%; aspect-ratio:1.15; animation:levitate 3.5s ease-in-out infinite;
  transition:transform .25s ease; perspective:700px; }
@keyframes levitate{ 50%{ translate:0 -10px; } }
.page-content .crate-wrap:hover .crate{ transform:rotate(-2deg) scale(1.02); }
.page-content .crate-lid{ position:absolute; top:0; left:2%; right:2%; height:30%; z-index:3;
  background:linear-gradient(180deg, #2A3654, #1A2440 70%, #121A30);
  border:1px solid #3A4A70; border-bottom:2px solid var(--seam,#0B1220);
  clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);
  transform-origin:50% 8%; transition:transform .45s cubic-bezier(.5,-.35,.3,1.4), opacity .4s ease; }
.page-content .crate-lid::after{ content:''; position:absolute; inset:12% 6%;
  background:repeating-linear-gradient(90deg, rgba(143,163,200,.08) 0 2px, transparent 2px 12px); }
.page-content .crate.open .crate-lid{ transform:rotateX(-112deg) translateZ(6px); }
.page-content .crate-body{ position:absolute; top:28%; left:0; right:0; bottom:0; z-index:2;
  background:linear-gradient(160deg, #232D44 0%, #141C30 45%, #0D1424 100%);
  border:1px solid #3A4A70; box-shadow:inset 0 2px 0 rgba(143,163,200,.3), inset 0 -3px 0 rgba(0,0,0,.6); }
.page-content .crate-body::before{ content:''; position:absolute; top:0; left:-10%; width:34%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(200,220,255,.08), transparent); transform:skewX(-16deg); }
.page-content .crate-seam{ position:absolute; top:28%; left:0; right:0; height:3px; z-index:4; background:var(--seam,var(--cyan2));
  box-shadow:0 0 14px var(--seam,var(--cyan2)); opacity:.65; transition:background .3s ease, box-shadow .3s ease;
  animation:seamglint 4s ease-in-out infinite; }
@keyframes seamglint{ 0%,84%,100%{ opacity:.55; } 90%{ opacity:1; } }
.page-content .crate-plate{ position:absolute; top:46%; left:50%; translate:-50% 0; z-index:3; padding:8px 30px;
  background:linear-gradient(160deg, #445273, #232D44 70%); border:1px solid #55648C;
  font-family:var(--fd); font-weight:900; font-size:26px; letter-spacing:.06em; transform:skewX(-8deg);
  color:transparent; background-clip:padding-box; }
.page-content .crate-plate span{ display:inline-block; transform:skewX(8deg);
  background:linear-gradient(100deg, #8FA3C8, #DDE6F5 45%, #8FA3C8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.page-content .crate-shadow{ position:absolute; bottom:-34px; left:50%; translate:-50% 0; width:88%; height:30px;
  background:radial-gradient(ellipse, var(--seamdim,rgba(55,200,245,.35)), transparent 70%);
  animation:shadowpulse 3.5s ease-in-out infinite; filter:blur(6px); }
@keyframes shadowpulse{ 50%{ scale:.85 1; opacity:.7; } }
.page-content .crate-alert{ position:absolute; top:-84px; left:50%; translate:-50% 0; text-align:center; z-index:5; }
.page-content .crate-alert .mark{ display:inline-grid; place-items:center; width:34px; height:34px;
  background:var(--orange); color:var(--bg0); font-family:var(--fd); font-weight:900; font-size:22px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); animation:alertbounce 1.4s ease-in-out infinite; }
@keyframes alertbounce{ 50%{ translate:0 -8px; } }
.page-content .crate-alert .cl{ display:block; margin-top:8px; font-family:var(--fh); font-size:11px; letter-spacing:.22em; color:var(--orange2); }
.page-content .pillar{ position:absolute; bottom:40%; left:50%; translate:-50% 0; width:110px; height:0; z-index:1;
  background:linear-gradient(180deg, transparent, var(--seam,var(--cyan2)));
  filter:blur(14px); opacity:0; transition:height .5s ease, opacity .4s ease; }
.page-content .crate.open ~ .pillar,.page-content .crate-wrap.opened .pillar{ height:64vh; opacity:.55; }
.page-content .shockwave{ position:absolute; bottom:26%; left:50%; width:80px; height:80px; margin-left:-40px; z-index:5;
  border:2px solid var(--seam,var(--cyan2)); border-radius:50%; opacity:0; pointer-events:none; }
.page-content .shockwave.fire{ animation:shock .65s ease-out; }
@keyframes shock{ 0%{ opacity:.9; transform:scale(.2);} 100%{ opacity:0; transform:scale(4);} }
.page-content #burst-canvas{ position:absolute; inset:0; pointer-events:none; z-index:6; }
/* reward card */
.page-content .reward-card{ position:absolute; bottom:34%; left:50%; translate:-50% 40px; z-index:7; width:min(340px,80vw);
  opacity:0; scale:.6; visibility:hidden; transition:all .6s cubic-bezier(.2,1.4,.4,1) .25s; pointer-events:none; }
.page-content .crate-wrap.opened .reward-card{ opacity:1; scale:1; visibility:visible; translate:-50% -140px; pointer-events:auto; }
.page-content .reward-inner{ position:relative; padding:26px 26px 22px; background:linear-gradient(165deg, #131E38, #0B1322); text-align:center; overflow:hidden; }
.page-content .reward-holo{ position:absolute; inset:-2.5px; z-index:-1;
  background:conic-gradient(from var(--a), #7DF9FF, #B26BFF, #FF6BC1, #FFD86B, #7DF9FF); }
.page-content .crate-wrap.opened .reward-holo{ animation:holospin 4s linear infinite; } /* spin only while visible */
@keyframes holospin{ to{ --a:360deg; } }
.page-content .reward-inner::after{ content:''; position:absolute; top:0; left:-80%; width:45%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.16), transparent);
  transform:skewX(-18deg); animation:goldsweep 3.4s ease-in-out infinite; pointer-events:none; }
.page-content .reward-inner .rar{ font-family:var(--fh); font-size:10px; letter-spacing:.34em; color:var(--gold); }
.page-content .reward-inner h3{ font-size:26px; margin:8px 0 6px; }
.page-content .reward-inner p{ font-size:14px; color:var(--body); margin-bottom:14px; }
.page-content .reward-inner .redeem{ display:inline-block; font-family:var(--fd); font-weight:800; font-size:17px;
  letter-spacing:.06em; color:var(--bg0); background:linear-gradient(90deg, var(--gold), #F6E7B9);
  padding:9px 28px; text-transform:uppercase; transition:box-shadow .2s ease, transform .2s ease; }
.page-content .reward-inner .redeem:hover{ box-shadow:0 0 26px var(--glow-gold); transform:translateY(-2px); }
.page-content .crate-reset{ margin-top:70px; font-family:var(--fh); font-size:11px; letter-spacing:.22em; color:var(--muted);
  border:1px solid var(--line); padding:7px 20px; opacity:0; visibility:hidden; pointer-events:none; transition:all .3s ease .8s; }
.page-content .crate-wrap-region.opened-ui .crate-reset{ opacity:1; visibility:visible; pointer-events:auto; }
.page-content .crate-reset:hover{ color:var(--txt); border-color:var(--cyan); }
/* rarity selector */
.page-content .rarity-row{ display:flex; gap:16px; justify-content:center; margin-top:64px; flex-wrap:wrap; }
.page-content .rarity-thumb{ --rc:var(--cyan2); position:relative; width:170px; padding:14px 12px 12px; text-align:center;
  border:1px solid var(--line); background:var(--bg2); transition:all .22s ease; }
.page-content .rarity-thumb .minicrate{ width:44px; height:34px; margin:0 auto 10px; position:relative;
  background:linear-gradient(160deg, #232D44, #10182C); border:1px solid #3A4A70; }
.page-content .rarity-thumb .minicrate::before{ content:''; position:absolute; top:30%; left:0; right:0; height:2px;
  background:var(--rc); box-shadow:0 0 8px var(--rc); }
.page-content .rarity-thumb b{ display:block; font-family:var(--fd); font-weight:800; font-size:15px; color:var(--txt);
  letter-spacing:.05em; text-transform:uppercase; }
.page-content .rarity-thumb i{ font-style:normal; font-family:var(--fh); font-size:10px; color:var(--muted); letter-spacing:.08em; }
.page-content .rarity-thumb:hover{ translate:0 -6px; border-color:var(--rc); }
.page-content .rarity-thumb.sel{ border-color:var(--rc); box-shadow:0 0 22px -2px var(--rc); }
.page-content .rarity-thumb.sel::after{ content:''; position:absolute; left:10%; right:10%; bottom:-1px; height:2px; background:var(--rc); }
.page-content .rarity-thumb.r-social{ --rc:var(--cyan2); } .page-content .rarity-thumb.r-ads{ --rc:var(--gold); }
.page-content .rarity-thumb.r-brand{ --rc:var(--magenta); } .page-content .rarity-thumb.r-content{ --rc:var(--green); }
.page-content .crate.shaking{ animation:crateshake .55s linear both; }
@keyframes crateshake{ 0%{ translate:0 0; rotate:0deg; } 12%{ translate:-3px 1px; rotate:-.6deg; }
  24%{ translate:4px -1px; rotate:.8deg; } 38%{ translate:-5px 2px; rotate:-1.1deg; }
  52%{ translate:6px -2px; rotate:1.3deg; } 68%{ translate:-7px 2px; rotate:-1.6deg; }
  84%{ translate:8px -3px; rotate:1.8deg; } 100%{ translate:0 0; rotate:0deg; } }

/* ---------- CAREER ---------- */
.page-content #career{ background:linear-gradient(180deg, var(--bg0), var(--bg1) 30%); }
.page-content .trophy-strip{ display:grid; grid-template-columns:auto repeat(4,minmax(0,1fr)) auto; gap:0; align-items:center;
  border:1px solid var(--line); background:rgba(16,31,60,.5); margin-bottom:64px; position:relative; overflow:hidden; }
.page-content .trophy-strip > div{ padding:26px 30px; position:relative; }
.page-content .trophy-strip > div:not(:first-child)::before{ content:''; position:absolute; left:0; top:-20%; height:140%;
  width:1px; background:var(--line); transform:rotate(12deg); }
.page-content .plat-cell{ display:flex; align-items:center; gap:18px; }
.page-content .trophy-glyph{ position:relative; width:44px; height:52px; flex-shrink:0; }
.page-content .trophy-glyph .cup{ position:absolute; top:0; left:50%; translate:-50% 0; width:32px; height:26px;
  background:var(--tc,#DDE6F5); border-radius:0 0 16px 16px; }
.page-content .trophy-glyph .cup::before,.page-content .trophy-glyph .cup::after{ content:''; position:absolute; top:3px; width:10px; height:14px;
  border:3px solid var(--tc,#DDE6F5); border-radius:50%; }
.page-content .trophy-glyph .cup::before{ left:-9px; border-right:0; }
.page-content .trophy-glyph .cup::after{ right:-9px; border-left:0; }
.page-content .trophy-glyph .stem{ position:absolute; top:26px; left:50%; translate:-50% 0; width:6px; height:12px; background:var(--tc,#DDE6F5); }
.page-content .trophy-glyph .base{ position:absolute; top:38px; left:50%; translate:-50% 0; width:24px; height:6px; background:var(--tc,#DDE6F5); }
.page-content .trophy-glyph.plat{ --tc:#DDE6F5; filter:drop-shadow(0 0 12px rgba(221,230,245,.5)); animation:platpulse 3s ease-in-out infinite; }
@keyframes platpulse{ 50%{ filter:drop-shadow(0 0 22px rgba(160,220,255,.8)); } }
.page-content .trophy-glyph.gold{ --tc:var(--gold); } .page-content .trophy-glyph.silver{ --tc:#C9D1E0; } .page-content .trophy-glyph.bronze{ --tc:#C9793F; }
.page-content .trophy-glyph.sm{ scale:.55; width:26px; height:30px; }
.page-content .plat-cell .pc-txt b{ display:block; font-family:var(--fd); font-weight:900; font-size:26px; color:var(--txt); letter-spacing:.03em; }
.page-content .plat-cell .pc-txt i{ font-style:normal; font-family:var(--fh); font-size:10px; letter-spacing:.2em; color:var(--muted); }
.page-content .t-cell{ text-align:center; }
.page-content .t-cell .num{ font-family:var(--fh); font-weight:600; font-size:36px; color:var(--txt); font-variant-numeric:tabular-nums; line-height:1.1; }
.page-content .t-cell .lbl{ display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }
.page-content .verified-chip{ display:flex; align-items:center; gap:12px; }
.page-content .verified-chip .avatar{ width:38px; height:44px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:radial-gradient(circle at 35% 30%, var(--cyan2), #123 70%); }
.page-content .verified-chip .vc b{ display:flex; align-items:center; gap:6px; font-family:var(--fd); font-size:18px;
  font-weight:800; color:var(--txt); letter-spacing:.04em; }
.page-content .verified-chip .vc b .check{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%;
  background:var(--cyan); color:var(--bg0); font-size:11px; font-family:var(--fu); }
.page-content .verified-chip .vc i{ font-style:normal; font-family:var(--fh); font-size:9px; letter-spacing:.18em; color:var(--muted); }

/* achievements grid */
.page-content .ach-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:80px; }
.page-content .ach-card{ position:relative; display:flex; gap:14px; padding:18px; border:1px solid var(--line);
  background:var(--bg2); transform:skewX(-4deg); overflow:hidden;
  transition:all .22s ease; }
.page-content .ach-card > *{ transform:skewX(4deg); }
.page-content .ach-card:hover{ translate:0 -6px; border-color:var(--gold); box-shadow:0 12px 30px rgba(255,210,74,.15); }
.page-content .ach-hex{ flex-shrink:0; width:48px; height:54px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg, var(--gold), #7A5A10); display:grid; place-items:center;
  font-family:var(--fh); font-weight:600; font-size:19px; color:var(--bg0); transition:transform .45s ease; }
.page-content .ach-card:hover .ach-hex{ transform:skewX(4deg) rotateY(180deg); }
.page-content .ach-body b{ display:block; font-family:var(--fd); font-weight:800; font-size:18px; color:var(--txt);
  letter-spacing:.04em; text-transform:uppercase; }
.page-content .ach-body p{ font-size:13px; color:var(--body); line-height:1.4; margin:3px 0 8px; }
.page-content .ach-body .rar-bar{ height:3px; background:#0B1930; position:relative; }
.page-content .ach-body .rar-bar i{ position:absolute; inset:0 auto 0 0; width:var(--r,4%); background:var(--gold); }
.page-content .ach-body .rar-txt{ font-family:var(--fh); font-size:9px; letter-spacing:.1em; color:var(--muted); margin-top:4px; display:block; }
.page-content .ach-card.locked{ filter:grayscale(.6); }
.page-content .ach-card.locked .ach-hex{ background:linear-gradient(160deg, #33405E, #141E36); color:var(--orange); }
.page-content .ach-card.locked .ach-body b{ color:var(--muted); letter-spacing:.12em; }
.page-content .ach-card.locked:hover{ border-color:var(--orange); box-shadow:0 0 22px rgba(249,158,26,.15); animation:denied .3s linear; }
.page-content .ach-card.locked .hint{ color:var(--orange2); }
@keyframes denied{ 25%{ translate:-3px 0;} 50%{ translate:3px 0;} 75%{ translate:-2px 0;} }

/* achievement toast */
.page-content .toast-dock{ position:fixed; top:76px; right:20px; z-index:950; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.page-content .toast{ display:flex; align-items:center; gap:14px; min-width:300px; padding:12px 18px;
  background:rgba(13,18,32,.9); backdrop-filter:blur(8px); border:1px solid rgba(255,210,74,.4);
  animation:toastin 3.4s cubic-bezier(.2,.9,.3,1) both; position:relative; overflow:hidden; }
@keyframes toastin{ 0%{ transform:translateX(120%);} 9%,86%{ transform:none;} 100%{ transform:translateX(120%);} }
.page-content .toast::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--gold); transform-origin:left; animation:toasttimer 3s linear .2s both; }
@keyframes toasttimer{ from{ transform:scaleX(1);} to{ transform:scaleX(0);} }
.page-content .toast .t-glyph{ animation:spinY 1.1s ease both; }
@keyframes spinY{ from{ transform:rotateY(0);} to{ transform:rotateY(720deg);} }
.page-content .toast .t-txt i{ font-style:normal; display:block; font-family:var(--fh); font-size:9px; letter-spacing:.26em; color:var(--gold); }
.page-content .toast .t-txt b{ font-family:var(--fd); font-size:17px; font-weight:800; color:var(--txt); letter-spacing:.05em; text-transform:uppercase; }

/* season timeline carousel */
.page-content .season-zone .sz-lbl{ font-weight:600; font-size:12px; letter-spacing:.26em; color:var(--muted);
  text-transform:uppercase; margin-bottom:20px; }
.page-content .season-row{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:30px 4px 26px;
  scrollbar-width:thin; scrollbar-color:#2E3A5C var(--bg0); }
.page-content .season-card{ --sc:var(--cyan); scroll-snap-align:center; flex:0 0 230px; height:310px; position:relative;
  padding:3px; transition:transform .35s ease, filter .35s ease; filter:brightness(.75); }
.page-content .season-card.center{ transform:scale(1.07); filter:brightness(1); z-index:2; }
.page-content .season-holo{ position:absolute; inset:0; background:conic-gradient(from var(--a), #7DF9FF, #B26BFF, #FF6BC1, #FFD86B, #7DF9FF);
  opacity:.4; transition:opacity .3s ease; }
.page-content .season-card.center .season-holo{ opacity:1; animation:holospin 5s linear infinite; }
.page-content .season-inner{ position:relative; height:100%; background:linear-gradient(170deg, #10182E, #080E1C);
  padding:22px 20px; display:flex; flex-direction:column; overflow:hidden; }
.page-content .season-inner::after{ content:''; position:absolute; top:0; left:-80%; width:40%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.13), transparent);
  transform:skewX(-18deg); animation:goldsweep 4.5s ease-in-out var(--sd,0s) infinite; pointer-events:none; }
.page-content .season-inner .yr{ font-family:var(--fd); font-weight:900; font-size:54px; color:var(--txt);
  letter-spacing:.01em; line-height:1; transform:skewX(-8deg); }
.page-content .season-inner .headline{ font-family:var(--fd); font-weight:700; font-size:19px; color:var(--sc);
  letter-spacing:.03em; text-transform:uppercase; margin:12px 0 8px; line-height:1.15; }
.page-content .season-inner p{ font-size:12.5px; color:var(--body); line-height:1.45; }
.page-content .season-inner .growth{ margin-top:auto; height:5px; background:#0B1930; }
.page-content .season-inner .growth i{ display:block; height:100%; width:var(--g,50%); background:linear-gradient(90deg, var(--sc), transparent); }
.page-content .timeline-rail{ position:relative; height:2px; margin-top:6px; background:var(--line); }
.page-content .timeline-rail .tick{ position:absolute; top:-4px; width:10px; height:10px; border-radius:50%;
  background:var(--bg1); border:2px solid var(--muted); translate:-50% 0; transition:all .25s ease; }
.page-content .timeline-rail .tick.on{ border-color:var(--cyan); background:var(--cyan); box-shadow:0 0 12px var(--glow-cyan); }
.page-content .timeline-rail .tick b{ position:absolute; top:14px; left:50%; translate:-50% 0; font-family:var(--fh);
  font-weight:400; font-size:10px; color:var(--muted); letter-spacing:.08em; }

/* ---------- PARTY: contact ---------- */
.page-content #party{ background:linear-gradient(180deg, var(--bg1), var(--bg0)); padding-bottom:150px; }
.page-content .lobby-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:5vw; align-items:start; position:relative; z-index:2; }
.page-content .slot{ position:relative; display:flex; align-items:center; gap:16px; padding:18px 22px; margin-bottom:14px;
  transform:skewX(-6deg); }
.page-content .slot > *{ transform:skewX(6deg); }
.page-content .slot.filled{ border:1px solid rgba(58,227,116,.4); background:rgba(16,31,60,.65);
  box-shadow:inset 3px 0 0 #3AE374; }
.page-content .slot .s-avatar{ width:46px; height:52px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:radial-gradient(circle at 35% 30%, var(--cyan2), #123 70%); flex-shrink:0; }
.page-content .slot .s-info{ flex:1; min-width:0; }
.page-content .slot .s-info b{ display:block; font-family:var(--fd); font-weight:800; font-size:21px; color:var(--txt); letter-spacing:.04em; }
.page-content .slot .s-info i{ font-style:normal; font-family:var(--fh); font-size:10px; letter-spacing:.16em; color:var(--muted); }
.page-content .slot .ready{ font-family:var(--fd); font-weight:800; font-size:15px; color:#3AE374; letter-spacing:.08em; }
.page-content .slot.empty{ border:1.5px dashed rgba(55,200,245,.5); background:transparent; min-height:88px;
  animation:slotpulse 2.4s ease-in-out infinite; }
@keyframes slotpulse{ 50%{ border-color:rgba(55,200,245,.9); box-shadow:0 0 18px rgba(55,200,245,.12);} }
.page-content .slot.empty .plus{ display:grid; place-items:center; width:46px; height:52px; font-family:var(--fd);
  font-size:30px; font-weight:700; color:var(--cyan); border:1px dashed rgba(55,200,245,.5);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); animation:corepulse 2.4s ease-in-out infinite; }
.page-content .slot.empty.connecting{ border-style:solid; background:rgba(55,200,245,.08); }
.page-content .slot.empty .s-info b{ color:var(--cyan); font-size:17px; letter-spacing:.08em; }
.page-content .match-settings{ margin-top:30px; border-top:1px solid var(--line); }
.page-content .match-settings .ms-row{ display:flex; justify-content:space-between; padding:12px 4px;
  border-bottom:1px solid rgba(34,53,92,.55); font-size:14px; }
.page-content .match-settings .ms-row .k{ font-weight:600; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; font-size:12px; }
.page-content .match-settings .ms-row .v{ font-family:var(--fh); font-size:12px; color:var(--cyan); letter-spacing:.08em; }
.page-content .email-chip{ margin-top:26px; display:flex; align-items:center; gap:10px; font-family:var(--fh); font-size:12px;
  color:var(--body); border:1px solid var(--line); padding:10px 16px; width:fit-content;
  transition:border-color .2s ease; }
.page-content .email-chip:hover{ border-color:var(--cyan); }
.page-content .email-chip b{ color:var(--cyan); font-weight:600; letter-spacing:.05em; }
.page-content .email-chip .copied{ color:#3AE374; opacity:0; transition:opacity .3s ease; }
.page-content .email-chip .copied.show{ opacity:1; }

/* form */
.page-content .invite-form{ position:relative; }
.page-content .field{ position:relative; margin-bottom:20px; }
.page-content .field label{ display:block; font-weight:600; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px; transition:color .2s ease; }
.page-content .field:focus-within label{ color:var(--cyan); }
.page-content .field input,.page-content .field select,.page-content .field textarea{ width:100%; background:rgba(16,31,60,.55); border:1px solid var(--line);
  color:var(--txt); font-size:16px; font-weight:500; padding:13px 18px; transform:skewX(-4deg);
  transition:border-color .2s ease, box-shadow .2s ease; }
.page-content .field input,.page-content .field select{ height:52px; }
.page-content .field textarea{ resize:vertical; min-height:110px; }
.page-content .field input:focus,.page-content .field select:focus,.page-content .field textarea:focus{ outline:none; border-color:var(--cyan);
  box-shadow:0 0 0 1px var(--cyan), 0 0 22px rgba(55,200,245,.2); }
.page-content .field ::placeholder{ color:var(--muted); opacity:.7; }
.page-content .field select{ appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 49%, var(--cyan) 50%), linear-gradient(-45deg, transparent 49%, var(--cyan) 50%);
  background-position:calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size:6px 6px; background-repeat:no-repeat; }
.page-content .field select option{ background:var(--bg1); color:var(--txt); }
.page-content .btn-launch{ width:100%; font-size:26px; padding:18px; }
.page-content .form-hint{ text-align:center; font-family:var(--fh); font-size:11px; color:var(--muted); letter-spacing:.14em; margin-top:14px; }
/* marketing-consent opt-in: unticked by default, and kept at body contrast rather
   than muted grey — it is a material term, not small print */
.page-content .field-consent{ display:flex; align-items:flex-start; gap:11px; margin:-4px 0 20px; }
.page-content .field-consent input{ flex:0 0 auto; width:20px; height:20px; margin:1px 0 0; accent-color:var(--cyan); cursor:pointer; }
.page-content .field-consent label{ font-family:var(--fu); font-size:13px; font-weight:500; line-height:1.45;
  letter-spacing:0; text-transform:none; color:var(--body); cursor:pointer; }
/* match found takeover */
.page-content .match-banner{ position:fixed; top:0; bottom:0; left:0; right:0; z-index:960; display:grid; place-items:center;
  pointer-events:none; visibility:hidden; }
.page-content .match-banner.fire{ visibility:visible; }
.page-content .match-banner .mb-half{ position:absolute; top:44%; height:12%; min-height:96px; width:52%;
  background:linear-gradient(90deg, var(--cyan), var(--cyan2)); }
.page-content .match-banner .mb-half.l{ left:0; transform:translateX(-102%) skewX(-12deg); }
.page-content .match-banner .mb-half.r{ right:0; transform:translateX(102%) skewX(-12deg); }
.page-content .match-banner.fire .mb-half.l{ animation:slamL .5s cubic-bezier(.7,0,.3,1) forwards; }
.page-content .match-banner.fire .mb-half.r{ animation:slamR .5s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes slamL{ to{ transform:translateX(-1%) skewX(-12deg);} }
@keyframes slamR{ to{ transform:translateX(1%) skewX(-12deg);} }
.page-content .match-banner .mb-txt{ position:relative; z-index:2; font-family:var(--fd); font-weight:900;
  font-size:clamp(34px,6vw,72px); color:var(--bg0); letter-spacing:.04em; text-transform:uppercase;
  transform:skewX(-10deg); opacity:0; }
.page-content .match-banner.fire .mb-txt{ animation:mbtxt .4s ease .35s forwards; }
@keyframes mbtxt{ to{ opacity:1; } }
.page-content .match-banner.out{ transition:opacity .5s ease; opacity:0; }

/* ---------- footer ---------- */
.page-content .site-footer{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-top:90px; padding-top:26px; border-top:1px solid var(--line);
  font-family:var(--fh); font-size:11px; color:var(--muted); letter-spacing:.1em; }
.page-content .social-hexes{ display:flex; gap:12px; }
.page-content .social-hexes a{ display:grid; place-items:center; width:38px; height:44px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background:var(--bg2);
  font-family:var(--fh); font-size:11px; font-weight:600; color:var(--body); transition:all .2s ease; }
.page-content .social-hexes a:hover{ background:var(--cyan); color:var(--bg0); transform:rotate(8deg) scale(1.1); }
.page-content .fps{ font-variant-numeric:tabular-nums; }
.page-content .fps b{ color:var(--green); font-weight:600; }

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .page-content .nav-tabs{ gap:3px; }
  .page-content .nav-tabs a{ font-size:11px; padding:6px 10px; letter-spacing:.1em; }
  .page-content .modes-row{ grid-template-columns:repeat(2, 1fr); align-items:stretch; }
  .page-content .brawl-card{ grid-column:1 / -1; height:auto; padding-top:10px; }
  .page-content .mode-card.featured{ translate:0 0; }
  .page-content .rank-emblem{ display:none; }
  /* the 6-cell strip only fits above ~1240px — stack it here, not at 1020 */
  .page-content .trophy-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-content .trophy-strip > div:not(:first-child)::before{ display:none; }
  .page-content .trophy-strip > div{ border-bottom:1px solid rgba(34,53,92,.5); }
}
@media (max-width:1020px){
  .page-content #hero{ grid-template-columns:1fr; gap:40px; padding-top:110px; }
  .page-content .hero-menu{ order:2; max-width:400px; }
  .page-content .char-grid{ grid-template-columns:1fr; }
  .page-content .portrait-frame{ min-height:460px; }
  .page-content .ach-grid{ grid-template-columns:repeat(2,1fr); }
  .page-content .lobby-grid{ grid-template-columns:1fr; }
  .page-content .nav-tabs{ display:none; }
  .page-content .player-chip{ margin-left:auto; }
}
@media (max-width:640px){
  .page-content{ --skew:-4deg; --unskew:4deg; }
  .page-content section{ padding:80px 6vw 66px; }
  .page-content .modes-row{ grid-template-columns:1fr; }
  .page-content .mode-card{ height:auto; min-height:380px; }
  .page-content .mode-card .art{ height:200px; }
  .page-content .ach-grid{ grid-template-columns:1fr; }
  .page-content .chatline{ display:none; }
  /* the 3 HUD buttons are a fixed 436px nowrap row — they hung off both edges
     of every phone (60px each side at 320px). ESC goes to the same place as the
     logo, so drop it here and tighten the rest. */
  .page-content .bottombar{ justify-content:center; padding:0 10px; gap:8px; }
  .page-content .chrome-btns{ gap:8px; min-width:0; flex-shrink:1; }
  .page-content .chrome-btns button{ padding:4px 9px; min-width:0; }
  .page-content #btn-esc{ display:none; }
  /* 1fr's automatic min-content floor kept the 2-col grid at 455px and
     overflow:hidden ate the whole right column below ~530px */
  .page-content .trophy-strip{ grid-template-columns:1fr; }
  .page-content .trophy-strip > div{ padding:20px 18px; }
  .page-content .version-line{ display:none; }
  .page-content .scroll-hint{ right:auto; left:6vw; }
  .page-content .hero-ctas .btn{ font-size:18px; padding:12px 24px; }
  .page-content .toast-dock{ right:10px; left:10px; }
  .page-content .toast{ min-width:0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .page-content *,.page-content *::before,.page-content *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; }
  .page-content{ scroll-behavior:auto; }
  .page-content #bg-canvas,.page-content .fx-overlay::before,.page-content #sweep-line{ display:none; }
  .page-content [data-reveal],.page-content [data-reveal]:not(.in){ opacity:1; transform:none; transition-delay:0ms; }
  .page-content .toast{ animation:none; } /* toastin's resting frame is offscreen — render in place instead */
  .page-content .toast::after{ animation:none; opacity:0; }
}


/* ============================================================
   BUDGET CALCULATOR — 3 steps, one screen, no scrolling
   Replaces the 8-field 90-day planner: that one asked for current
   PROFIT as its second question (test buyers refused to type it) and
   never named a plan at the end, so the effort bought nothing.
   ============================================================ */
/* The brief was "no scrolling". The generic section chrome alone (200px padding +
   a 96px headline) ate 364px, so this section runs its own tighter scale, and
   compacts again on short laptop screens where the budget is smallest. */
.page-content #hero-select{ display:flex; flex-direction:column; justify-content:center; padding-top:48px; padding-bottom:40px; }
.page-content #hero-select .ribbon{ margin-bottom:20px; }
.page-content #hero-select .ribbon h2{ font-size:clamp(32px,4vw,54px); }
.page-content #hero-select .subtext{ max-width:720px; margin:-10px 0 16px; color:var(--body); font-size:14px; }
.page-content #hero-select .subtext b{ color:var(--txt); }
.page-content .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); border:0; white-space:nowrap; }

.page-content .calc-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); gap:20px; align-items:start; }

/* ---- step rail ---- */
.page-content .calc-rail{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.page-content .calc-rail .st{ display:flex; align-items:center; gap:9px; }
.page-content .calc-rail .dot{ width:30px; height:30px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; font-family:var(--fh); font-weight:600;
  font-size:13px; color:var(--muted); background:var(--bg1); transition:.2s ease; }
.page-content .calc-rail .lbl{ font-family:var(--fh); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.page-content .calc-rail .bar{ flex:1; height:1px; background:var(--line); min-width:14px; }
.page-content .calc-rail .st.on .dot{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 14px rgba(55,200,245,.35); }
.page-content .calc-rail .st.on .lbl{ color:var(--txt); }
.page-content .calc-rail .st.done .dot{ border-color:var(--green); color:var(--bg0); background:var(--green); }

/* ---- step blocks ---- */
.page-content .calc-step{ border:1px solid var(--line); background:rgba(9,18,34,.55); padding:13px 16px 14px; margin-bottom:10px; }
.page-content .calc-step > h3{ display:flex; align-items:center; gap:10px; font-family:var(--fu); font-weight:700;
  font-size:15px; letter-spacing:.01em; color:var(--txt); margin-bottom:12px; }
.page-content .calc-step > h3 .n{ width:22px; height:22px; flex:none; display:grid; place-items:center;
  font-family:var(--fh); font-size:11px; font-weight:600; color:var(--bg0); background:var(--cyan); }

/* ---- option chips ---- */
.page-content .opt-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:8px; }
.page-content .opt{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:12px 6px 10px; border:1px solid var(--line); background:rgba(16,31,60,.4);
  cursor:pointer; transition:border-color .16s ease, transform .16s ease, background .16s ease; }
.page-content .opt .g{ font-size:19px; line-height:1; color:var(--cyan); transition:transform .16s ease; }
.page-content .opt .t{ font-family:var(--fu); font-weight:600; font-size:11.5px; line-height:1.2; text-align:center; color:var(--body); }
.page-content .opt:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.page-content .opt:hover .g{ transform:scale(1.12); }
.page-content .opt[aria-pressed="true"]{ border-color:var(--cyan); background:rgba(55,200,245,.12); box-shadow:0 0 16px rgba(55,200,245,.18) inset; }
.page-content .opt[aria-pressed="true"] .t{ color:var(--txt); }
.page-content .opt[aria-pressed="true"]::after{ content:'✓'; position:absolute; top:4px; right:6px; font-size:10px; color:var(--cyan); }

/* ---- money fields ---- */
.page-content .calc-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.page-content .calc-fields.one{ grid-template-columns:1fr; }
.page-content .mf label{ display:block; font-family:var(--fh); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.page-content .mf .box{ position:relative; display:flex; align-items:center; border:1px solid var(--line); background:var(--bg0); }
.page-content .mf .box:focus-within{ border-color:var(--cyan); box-shadow:0 0 0 1px rgba(55,200,245,.3); }
.page-content .mf .cur{ padding:0 0 0 12px; font-family:var(--fd); font-weight:800; font-size:17px; color:var(--gold); }
.page-content .mf input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--txt);
  font-family:var(--fh); font-weight:600; font-size:17px; padding:11px 10px; }
.page-content .mf input::-webkit-outer-spin-button,.page-content .mf input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.page-content .mf input[type=number]{ -moz-appearance:textfield; }
.page-content .mf .per{ padding:0 12px 0 0; font-family:var(--fh); font-size:11px; color:var(--muted); }
.page-content .mf .hint{ display:block; margin-top:5px; font-family:var(--fu); font-size:11.5px; color:var(--muted); line-height:1.35; }

/* "Other" free-text, and the high-ticket field — both appear conditionally */
.page-content .other-wrap{ margin-top:12px; }
.page-content .other-wrap input{ font-family:var(--fu); font-size:14px; font-weight:600; padding:10px 12px; }
.page-content .ticket-wrap .box{ border-color:var(--orange); }

/* high-ticket result: percentage growth is meaningless when one deal is worth a year
   of fees, so this vertical gets deal arithmetic instead */
.page-content .cr-deal{ margin-top:10px; border:1px solid var(--line); background:rgba(9,18,34,.5); padding:10px 12px; }
.page-content .cr-deal .dl{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-family:var(--fu); font-size:12.5px; }
.page-content .cr-deal .dl span:first-child{ color:var(--muted); }
.page-content .cr-deal .dl span:last-child{ color:var(--txt); font-weight:700; }
.page-content .cr-deal .dl:nth-child(2) span:last-child{ color:var(--gold); font-family:var(--fd); font-weight:800; font-size:15px; }
.page-content .cr-deal .big{ border-top:1px solid var(--line); margin-top:6px; padding-top:8px; text-align:center; }
.page-content .cr-deal .big b{ display:block; font-family:var(--fd); font-weight:900; font-size:24px; color:var(--gold); line-height:1.1; }
.page-content .cr-deal .big i{ font-style:normal; font-family:var(--fu); font-size:11.5px; color:var(--body); }

/* ---- nav (mobile wizard only) ---- */
.page-content .calc-nav{ display:none; gap:10px; margin-top:4px; }
.page-content .calc-nav .btn{ flex:1; justify-content:center; }

/* ---- result panel ---- */
.page-content .calc-result{ position:sticky; top:84px; border:1px solid var(--line); background:rgba(16,31,60,.5); padding:18px 18px 16px; }
.page-content .calc-result::before{ content:''; position:absolute; top:-1px; left:-1px; width:22px; height:22px;
  border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); }
.page-content .calc-result h3{ display:flex; align-items:center; gap:9px; font-family:var(--fu); font-weight:700;
  font-size:15px; color:var(--txt); margin-bottom:14px; }
.page-content .calc-result h3 .g{ color:var(--cyan); font-size:17px; }
.page-content .cr-row{ display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid rgba(34,53,92,.55); }
.page-content .cr-row .k{ font-family:var(--fh); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); flex:1; }
.page-content .cr-row .v{ font-family:var(--fu); font-weight:700; font-size:13.5px; color:var(--txt); text-align:right; }
/* the budget total steps back to a plain row — the projection below it is the number
   the visitor actually came for, so it gets the size instead */
.page-content .cr-total .v{ font-family:var(--fd); font-weight:800; font-size:18px; color:var(--gold); }
/* the revenue field earns its place by putting the spend in proportion — a plain
   computed fact from the visitor's own two numbers, with no benchmark claim attached */
.page-content .cr-share{ font-family:var(--fu); font-size:11.5px; color:var(--body); text-align:center; margin-top:6px; }
.page-content .cr-share b{ color:var(--cyan); }

.page-content .cr-plan{ margin-top:10px; border:1px solid var(--acc,var(--orange)); background:rgba(249,158,26,.07); padding:10px 12px; }
.page-content .cr-plan .lb{ font-family:var(--fh); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc,var(--orange2)); }
.page-content .cr-plan .nm{ font-family:var(--fd); font-weight:900; font-size:21px; letter-spacing:.02em; color:var(--txt); line-height:1.1; margin:2px 0 1px; }
.page-content .cr-plan .pr{ font-family:var(--fd); font-weight:800; font-size:16px; color:var(--gold); }
.page-content .cr-plan .why{ font-family:var(--fu); font-size:11.5px; color:var(--body); line-height:1.4; margin-top:5px; }
.page-content .cr-note{ display:flex; gap:8px; margin-top:8px; font-family:var(--fu); font-size:11px; color:var(--body); line-height:1.35; }
.page-content .cr-note .i{ color:var(--orange2); flex:none; }
.page-content .calc-result .btn{ width:100%; justify-content:center; margin-top:12px; }
.page-content .cr-fine{ font-family:var(--fu); font-size:10.5px; color:var(--muted); line-height:1.4; margin-top:9px; text-align:center; }

/* empty state until enough is filled in */
.page-content .calc-result[data-ready="0"] .cr-plan,.page-content .calc-result[data-ready="0"] .btn{ opacity:.35; pointer-events:none; filter:grayscale(.6); }

/* short laptops (1366x768, 1280x800) have the least vertical budget of all —
   drop the explainer and shave the scale again rather than force a scroll */
/* Anything under a ~1000px-tall viewport — which is every laptop — has to give the
   projection room without a scroll, so the chrome around it shrinks instead. */
@media (min-width:1021px) and (max-height:1000px){
  .page-content #hero-select{ padding-top:30px; padding-bottom:24px; }
  .page-content #hero-select .subtext{ display:none; }
  .page-content #hero-select .ribbon{ margin-bottom:12px; }
  .page-content #hero-select .ribbon h2{ font-size:clamp(26px,2.6vw,36px); }
  .page-content #hero-select .ribbon .kicker{ margin-bottom:3px; }
  .page-content .calc-rail{ margin-bottom:10px; }
  .page-content .calc-step{ padding:10px 14px 11px; margin-bottom:8px; }
  .page-content .calc-step > h3{ margin-bottom:8px; font-size:14px; }
  .page-content .opt{ padding:8px 6px 7px; }
  .page-content .opt .g{ font-size:17px; }
  .page-content .mf .hint{ font-size:10.5px; }
  .page-content .mf input{ font-size:16px; padding:9px 10px; }
  .page-content .calc-result{ padding:13px 14px 12px; }
  .page-content .cr-deal .big b{ font-size:21px; }
  .page-content .cr-plan .nm{ font-size:19px; }
  .page-content .cr-fine{ font-size:10px; margin-top:7px; }
}
/* 1280x800 and 1366x768 are the tightest real laptops. The plan rationale and the
   revenue-share line are the two most expendable blocks — the plan name, its price,
   the projection and the capacity caveat all survive. */
@media (min-width:1021px) and (max-height:860px){
  .page-content #hero-select{ padding-top:18px; padding-bottom:14px; }
  .page-content .calc-rail{ margin-bottom:8px; }
  .page-content #hero-select .ribbon h2{ font-size:clamp(24px,2.2vw,30px); }
  .page-content .calc-rail .dot{ width:26px; height:26px; font-size:12px; }
  .page-content .cr-plan .why{ display:none; }
  .page-content .cr-share{ display:none; }
  .page-content .cr-deal{ padding:8px 11px; }
  .page-content .cr-deal .dl{ padding:3px 0; }
  .page-content .cr-deal .big{ margin-top:5px; padding-top:6px; }
  .page-content .cr-fine{ font-size:9.5px; }
  .page-content .calc-result .btn{ margin-top:9px; }
  /* the "Other" free-text field makes step 1 the tallest column, so it pays here too */
  .page-content .other-wrap{ margin-top:8px; }
  .page-content .other-wrap input{ padding:8px 10px; font-size:13px; }
  .page-content .mf label{ margin-bottom:4px; }
  .page-content .opt-grid{ gap:7px; }
  .page-content .calc-step{ margin-bottom:7px; }
}
@media (max-width:1020px){
  .page-content .calc-wrap{ grid-template-columns:1fr; }
  .page-content .calc-result{ position:static; }
  /* a phone screen is the tightest budget there is — the explainer goes, and the
     chrome shrinks, so each single step still lands inside one screen */
  .page-content #hero-select{ padding-top:32px; padding-bottom:24px; }
  .page-content #hero-select .subtext{ display:none; }
  .page-content #hero-select .ribbon{ margin-bottom:12px; }
  .page-content #hero-select .ribbon h2{ font-size:clamp(26px,7vw,38px); }
  .page-content .calc-step{ padding:12px 14px 13px; }
  .page-content .calc-step > h3{ margin-bottom:10px; font-size:14px; }
  .page-content .opt{ padding:9px 5px 8px; }
  .page-content .opt .g{ font-size:17px; }
  .page-content .opt .t{ font-size:11px; }
  .page-content .mf .hint{ font-size:11px; }
  .page-content .calc-result{ padding:15px 15px 14px; }
  /* step 3 carries three fields in the high-ticket path — the tightest single screen */
  .page-content .calc-fields{ gap:10px; }
  .page-content .ticket-wrap{ margin-top:8px !important; }
  .page-content .mf input{ padding:9px 10px; }
  .page-content .mf .hint{ font-size:10.5px; line-height:1.3; }
  /* mobile becomes a one-step-at-a-time wizard so the whole thing still fits a phone
     screen without scrolling — all three at once cannot */
  .page-content .calc-step{ display:none; }
  .page-content #hero-select[data-step="1"] .calc-step[data-s="1"],.page-content #hero-select[data-step="2"] .calc-step[data-s="2"],.page-content #hero-select[data-step="3"] .calc-step[data-s="3"]{ display:block; }
  .page-content #hero-select[data-step="done"] .calc-step{ display:none; }
  .page-content .calc-nav{ display:flex; }
  .page-content #hero-select[data-step="done"] .calc-nav{ display:none; }
  .page-content .calc-result{ display:none; }
  .page-content #hero-select[data-step="done"] .calc-result{ display:block; }
  .page-content .calc-rail .lbl{ display:none; }
}
@media (max-width:640px){
  .page-content .calc-fields{ grid-template-columns:1fr; }
  .page-content .opt-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce){
  .page-content .opt,.page-content .opt .g{ transition:none; }
}


/* classic SIMS logo — hex emblem + white wordmark */
.page-content .logo .hex{ width:30px; height:34px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg, var(--cyan), #0E2A4A 70%); position:relative;
  animation:logobreathe 3s ease-in-out infinite; }
.page-content .logo .hex::after{ content:'S'; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--fd); font-weight:900; font-size:18px; color:var(--bg0); }
.page-content .logo .word{ font-family:var(--fd); font-weight:900; font-size:20px; color:#FFFFFF; letter-spacing:.04em; transform:skewX(-10deg); }.page-content .boot-emblem{ width:86px; height:98px; margin:0 auto 18px; position:relative;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg, var(--cyan) 0%, #0E2A4A 65%);
  animation:bootpop .7s cubic-bezier(.2,1.4,.4,1) both; overflow:hidden; }
.page-content .boot-emblem::before{ content:'S'; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--fd); font-weight:900; font-size:52px; color:var(--bg0); }
.page-content .boot-emblem::after{ content:''; position:absolute; top:-20%; left:-60%; width:40%; height:140%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg); animation:bootflare 1s ease .4s both; }
@keyframes bootflare{ to{ left:130%; } }
.page-content .boot-word{ font-family:var(--fd); font-weight:900; font-size:56px; letter-spacing:.03em; color:#FFFFFF;
  transform:skewX(-10deg); margin-bottom:22px; }/* Cappuccino & Tiger menu items — muted brand colors at rest, light up on hover */
.page-content .nav-tabs a.t-capu{ color:#9B82C6; border-color:rgba(178,107,255,.28); }
.page-content .nav-tabs a.t-capu:hover{ color:#E4CFFF; border-color:#B26BFF; background:rgba(178,107,255,.14);
  box-shadow:0 0 16px rgba(178,107,255,.38); }
.page-content .nav-tabs a.t-tiger{ color:#C08A5E; border-color:rgba(255,122,47,.28); }
.page-content .nav-tabs a.t-tiger:hover{ color:#FFC79A; border-color:#FF7A2F; background:rgba(255,122,47,.14);
  box-shadow:0 0 16px rgba(255,122,47,.38); }
.page-content .hero-menu a.m-capu{ color:#A78BD1; }
.page-content .hero-menu a.m-capu::before{ background:linear-gradient(90deg,#B26BFF,#D8B4FE); }
.page-content .hero-menu a.m-tiger{ color:#C68F63; }
.page-content .hero-menu a.m-tiger::before{ background:linear-gradient(90deg,#FF7A2F,#FFB347); }

}