/* ============================================================
   INNOCENT · SRG Gold Lane · APEX SCOPE theme
   Palette : deep ink navy + mint-cyan reticle + gold accent
   Glass   : blur(40px) saturate(200%) brightness(1.05) (mandatory)
   Mobile  : bottom tabbar (mandatory) — never top nav
   ============================================================ */

:root{
  --bg:        #06090f;
  --bg-2:      #0d1320;
  --bg-3:      #131a2c;
  --panel:     rgba(18,24,40,0.62);
  --panel-2:   rgba(13,19,32,0.78);
  --line:      rgba(255,255,255,0.10);
  --line-2:    rgba(255,255,255,0.14);
  --reticle:   #5fffd0;   /* mint-cyan scope */
  --reticle-2: #2bc4a0;
  --gold:      #ffc857;   /* gold accent (Gold Lane) */
  --gold-2:    #f0a93a;
  --danger:    #ff5577;
  --text:      #e8eef5;
  --dim:       #5a6878;
  --dim-2:     #7c8a99;
  --sans:      'Inter', system-ui, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, monospace;
  --pad:       clamp(20px, 4vw, 56px);
  --radius:    28px;
  --radius-s:  18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:var(--sans);overflow-x:hidden}
body{min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- preload ---------- */
.apex-pre{
  position:fixed;inset:0;z-index:120;
  background:radial-gradient(circle at 50% 50%, #0d1320 0%, #06090f 70%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .55s ease, visibility .55s;
}
.apex-pre.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.apex-pre__reticle{width:min(80vmin,520px);height:min(80vmin,520px);animation:apexPulse 2.2s ease-in-out infinite}
@keyframes apexPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
.apex-pre__text{position:absolute;text-align:center;z-index:2}
.apex-pre__tag{font-family:var(--mono);font-size:11px;letter-spacing:4px;color:var(--reticle);margin-bottom:14px}
.apex-pre__name{font-family:var(--sans);font-weight:900;font-size:clamp(48px,7vw,84px);letter-spacing:6px;color:var(--text);text-shadow:0 0 40px rgba(95,255,208,.45)}
.apex-pre__sub{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--dim-2);margin-top:14px}

/* ---------- top brand bar ---------- */
.apex-bar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px var(--pad);
  background:rgba(6,9,15,0.78);
  backdrop-filter:blur(28px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter:blur(28px) saturate(180%) brightness(1.04);
  border-bottom:1px solid var(--line);
}
.apex-bar__brand{display:flex;align-items:center;gap:10px;color:var(--reticle);font-family:var(--mono);font-size:12px;letter-spacing:3px;font-weight:700}
.apex-bar__mark{width:26px;height:26px;color:var(--reticle)}
.apex-bar__txt em{color:var(--gold);font-style:normal}
.apex-bar__dot{color:var(--dim);margin:0 6px}
.apex-bar__telem{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.apex-bar__pill{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;padding:6px 10px;border:1px solid var(--line-2);border-radius:999px;color:var(--text);background:var(--panel)}
.apex-bar__pill--mute{color:var(--dim-2);border-color:var(--line)}
.apex-bar__pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--danger);margin-right:6px;box-shadow:0 0 8px var(--danger);animation:apexBlink 1.2s ease-in-out infinite;vertical-align:middle}
@keyframes apexBlink{0%,100%{opacity:1}50%{opacity:.25}}

@media (max-width:760px){
  .apex-bar{padding:10px 16px}
  .apex-bar__txt span:first-child,.apex-bar__dot{display:inline}
  .apex-bar__telem{display:none}
}

/* ---------- hero ---------- */
.apex-hero{
  position:relative;overflow:hidden;
  padding:48px var(--pad) 0;
}
.apex-hero__bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.apex-hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(95,255,208,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,255,208,0.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
}
.apex-hero__scan{
  position:absolute;left:0;right:0;height:1.5px;top:0;
  background:linear-gradient(90deg, transparent, var(--reticle), transparent);
  box-shadow:0 0 28px rgba(95,255,208,.45);
  animation:apexScan 7s ease-in-out infinite;
}
@keyframes apexScan{0%,100%{top:0;opacity:.4}50%{top:100%;opacity:.85}}
.apex-hero__noise{
  position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:3px 3px;
}

.apex-hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr 1.25fr;gap:clamp(28px,5vw,72px);
  align-items:center;
  max-width:1280px;margin:0 auto;
  padding:36px 0 56px;
}
@media (max-width:960px){.apex-hero__inner{grid-template-columns:1fr;gap:36px;padding:8px 0 32px}}

/* portrait scope */
.apex-portrait{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.apex-portrait__ring{
  position:relative;width:clamp(280px,38vw,380px);height:clamp(280px,38vw,380px);
  border-radius:50%;
}
.apex-reticle{position:absolute;inset:0;width:100%;height:100%;animation:apexReticle 14s linear infinite}
@keyframes apexReticle{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.apex-portrait__img{
  position:absolute;inset:18%;border-radius:50%;overflow:hidden;
  background:linear-gradient(160deg, #1a2240, #0d1320 70%);
  box-shadow:inset 0 0 0 1px rgba(95,255,208,.25);
}
.apex-portrait__img img{width:100%;height:100%;object-fit:cover;filter:contrast(108%) saturate(112%);transform:scale(1.02)}
.apex-portrait__corner{
  position:absolute;width:14px;height:14px;border:1.5px solid var(--gold);
}
.apex-portrait__corner--tl{top:6%;left:6%;border-right:0;border-bottom:0}
.apex-portrait__corner--tr{top:6%;right:6%;border-left:0;border-bottom:0}
.apex-portrait__corner--bl{bottom:6%;left:6%;border-right:0;border-top:0}
.apex-portrait__corner--br{bottom:6%;right:6%;border-left:0;border-top:0}
.apex-portrait__lock{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--bg);
  background:var(--gold);padding:3px 7px;border-radius:2px;font-weight:700;
  opacity:0;animation:apexLock 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes apexLock{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}30%,55%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:.4}}
.apex-portrait__tag{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:3px;
  padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--panel);color:var(--dim-2);
  backdrop-filter:blur(20px) saturate(180%);
}
.apex-portrait__tag b{color:var(--gold);font-weight:700;letter-spacing:2px}

/* hero text */
.apex-hero__text{position:relative}
.apex-kicker{
  display:inline-block;
  font-family:var(--mono);font-size:11px;letter-spacing:4px;
  color:var(--reticle);margin-bottom:18px;
  padding:6px 12px;border:1px solid rgba(95,255,208,.35);border-radius:999px;
  background:rgba(95,255,208,0.05);
}
.apex-name{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(54px,8vw,108px);
  line-height:.92;letter-spacing:-2px;
  margin-bottom:14px;
}
.apex-name__first{display:block;color:var(--text);font-weight:300;font-size:.62em;letter-spacing:6px;opacity:.7}
.apex-name__mid{display:block;color:var(--text);font-weight:800}
.apex-name__last{display:block;color:var(--gold);font-weight:900;-webkit-text-stroke:1px rgba(255,200,87,.35)}
.apex-alias{font-size:15px;color:var(--dim-2);margin-bottom:18px;letter-spacing:.5px}
.apex-alias em{color:var(--reticle);font-style:normal;font-weight:600}
.apex-quote{
  font-family:var(--mono);font-size:13px;letter-spacing:1px;
  border-left:2px solid var(--reticle);padding:4px 0 4px 16px;
  color:var(--text);margin-bottom:32px;max-width:520px;
}

.apex-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-bottom:28px;
  background:var(--line-2);
  border:1px solid var(--line-2);border-radius:var(--radius);
  overflow:hidden;
  backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
}
.apex-stat{
  background:rgba(13,19,32,0.55);
  padding:18px 14px;
  position:relative;
}
.apex-stat::after{
  content:'';position:absolute;left:14px;top:14px;width:6px;height:6px;
  background:var(--reticle);border-radius:50%;box-shadow:0 0 8px var(--reticle);
}
.apex-stat__num{
  font-family:var(--mono);font-size:clamp(22px,2.6vw,30px);font-weight:600;
  color:var(--gold);font-variant-numeric:tabular-nums;line-height:1;
  margin:10px 0 6px;letter-spacing:-.5px;
}
.apex-stat__lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  color:var(--dim-2);text-transform:uppercase;
}
@media (max-width:560px){.apex-stats{grid-template-columns:repeat(2,1fr)}}

.apex-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.apex-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:3px;font-weight:700;
  padding:14px 22px;border-radius:999px;
  transition:transform .15s ease, background .2s, color .2s, border-color .2s;
  text-transform:uppercase;
}
.apex-btn--gold{background:var(--gold);color:#1a1100;border:1px solid var(--gold)}
.apex-btn--gold:hover{background:var(--gold-2);border-color:var(--gold-2);transform:translateY(-1px)}
.apex-btn--ghost{background:transparent;color:var(--reticle);border:1px solid var(--reticle)}
.apex-btn--ghost:hover{background:rgba(95,255,208,0.08);transform:translateY(-1px)}

.apex-telem{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  max-width:520px;
  background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-s);
  overflow:hidden;
}
.apex-telem__row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;background:rgba(13,19,32,0.55);
  font-family:var(--mono);font-size:11px;letter-spacing:2px;
}
.apex-telem__row span{color:var(--dim-2)}
.apex-telem__row b{color:var(--text);font-weight:500}
.apex-telem__ok{color:var(--reticle)!important;animation:apexBlink 1.6s ease-in-out infinite}

/* hero marquee band */
.apex-hero__band{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:4px;color:var(--dim-2);
  padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  white-space:nowrap;overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.apex-hero__band span{color:var(--text);font-weight:600}
.apex-hero__band span:nth-child(7n+3){color:var(--gold)}
.apex-hero__band span:nth-child(7n+5){color:var(--reticle)}
.apex-hero__band i{display:inline-block;width:5px;height:5px;background:var(--reticle);border-radius:50%;flex:0 0 5px;box-shadow:0 0 6px var(--reticle)}

/* ---------- sections (shared) ---------- */
.apex-section{
  position:relative;
  padding:88px var(--pad) 88px;
  max-width:1320px;margin:0 auto;
}
@media (max-width:760px){.apex-section{padding:64px var(--pad) 72px}}
.apex-section--alt{
  background:linear-gradient(180deg, transparent, rgba(13,19,32,0.55) 30%, rgba(13,19,32,0.55) 70%, transparent);
  max-width:none;padding-left:0;padding-right:0;
}
.apex-section--alt > *{max-width:1320px;margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}

.apex-section__head{margin-bottom:36px}
.apex-section__mark{
  display:inline-block;
  font-family:var(--mono);font-size:11px;letter-spacing:4px;
  color:var(--reticle);margin-bottom:12px;
  padding:5px 12px;border:1px solid rgba(95,255,208,.30);border-radius:999px;
}
.apex-section__title{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(36px,5.5vw,64px);line-height:1;letter-spacing:-1px;
  margin-bottom:12px;
}
.apex-section__title em{color:var(--gold);font-style:normal;-webkit-text-stroke:1px rgba(255,200,87,.25)}
.apex-section__sub{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--dim-2)}

/* filter chips */
.apex-filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 32px}
.apex-chip{
  font-family:var(--mono);font-size:11px;letter-spacing:2px;font-weight:600;
  padding:10px 16px;border:1px solid var(--line-2);border-radius:999px;
  color:var(--dim-2);background:var(--panel);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  transition:all .2s;
  display:inline-flex;align-items:center;gap:8px;
}
.apex-chip em{font-style:normal;font-size:9px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--text)}
.apex-chip:hover{color:var(--text);border-color:var(--reticle)}
.apex-chip.is-on{background:var(--gold);color:#1a1100;border-color:var(--gold)}
.apex-chip.is-on em{background:rgba(26,17,0,.18);color:#1a1100}

/* deeds (achievements) */
.apex-deeds{list-style:none;display:flex;flex-direction:column;gap:10px}
.apex-deed{
  display:grid;grid-template-columns:130px 1fr 110px;gap:24px;align-items:center;
  padding:18px 22px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  position:relative;overflow:hidden;
  transition:transform .25s ease, border-color .25s, opacity .35s ease, max-height .45s ease, padding .35s ease, margin .35s ease;
  max-height:200px;
}
.apex-deed.is-hidden{max-height:0;padding-top:0;padding-bottom:0;margin:0;opacity:0;overflow:hidden;border-color:transparent}
.apex-deed:hover{border-color:rgba(95,255,208,.35);transform:translateX(2px)}
.apex-deed::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--reticle);
}
.apex-deed[data-tier="S-Tier"]::before{background:var(--gold)}
.apex-deed__date{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--reticle)}
.apex-deed__title{font-family:var(--sans);font-weight:700;font-size:18px;color:var(--text);margin-bottom:4px;letter-spacing:-.2px}
.apex-deed__award{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--dim-2)}
.apex-deed__note{font-size:13px;color:var(--dim-2);margin-top:6px}
.apex-deed__tier{
  font-family:var(--mono);font-size:10px;letter-spacing:3px;font-weight:700;
  padding:8px 10px;border-radius:6px;text-align:center;
  border:1px solid var(--line-2);color:var(--reticle);
}
.apex-deed[data-tier="S-Tier"] .apex-deed__tier{color:var(--gold);border-color:rgba(255,200,87,.4);background:rgba(255,200,87,0.06)}
.apex-deed[data-tier="A-Tier"] .apex-deed__tier{color:var(--reticle);border-color:rgba(95,255,208,.4);background:rgba(95,255,208,0.06)}
@media (max-width:600px){
  .apex-deed{grid-template-columns:1fr;gap:8px;padding:16px 18px}
  .apex-deed__tier{justify-self:start}
}

/* career timeline */
.apex-career{list-style:none;position:relative;padding-left:34px}
.apex-career::before{
  content:'';position:absolute;left:11px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg, var(--reticle) 0%, rgba(95,255,208,.15) 100%);
}
.apex-career li{
  position:relative;
  padding:18px 22px 22px 24px;margin-bottom:14px;
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-s);
  backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
}
.apex-career li::before{
  content:'';position:absolute;left:-29px;top:24px;
  width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:2px solid var(--reticle);
  box-shadow:0 0 12px rgba(95,255,208,.5);
}
.apex-career li:last-child{border-color:rgba(255,200,87,.4)}
.apex-career li:last-child::before{
  background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 14px rgba(255,200,87,.7);
  animation:apexBlink 2s ease-in-out infinite;
}
.apex-career li:last-child::after{
  content:'CURRENT';position:absolute;right:16px;top:16px;
  font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--gold);
  border:1px solid var(--gold);padding:3px 8px;border-radius:4px;
}
.apex-career__period{font-family:var(--mono);font-size:11px;letter-spacing:2.5px;color:var(--reticle);margin-bottom:4px}
.apex-career__team{font-family:var(--sans);font-weight:800;font-size:20px;color:var(--text);margin-bottom:2px}
.apex-career__role{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--dim-2);margin-bottom:8px;text-transform:uppercase}
.apex-career__note{font-size:13px;color:var(--dim-2);line-height:1.55}

/* arsenal */
.apex-arsenal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.apex-weapon{
  padding:22px 22px 24px;
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-s);
  backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  position:relative;overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.apex-weapon:hover{border-color:rgba(255,200,87,.45);transform:translateY(-2px)}
.apex-weapon__head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.apex-weapon__name{font-family:var(--sans);font-weight:800;font-size:22px;color:var(--text);letter-spacing:-.3px}
.apex-weapon__games{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--dim-2);margin-top:4px}
.apex-weapon__wr{font-family:var(--mono);font-weight:700;font-size:24px;color:var(--gold);font-variant-numeric:tabular-nums}
.apex-weapon__wr small{font-size:10px;color:var(--dim-2);font-weight:400;margin-left:2px}
.apex-weapon__bar{
  height:6px;border-radius:999px;background:rgba(255,255,255,0.06);overflow:hidden;
  border:1px solid var(--line);
}
.apex-weapon__bar i{
  display:block;height:100%;
  background:linear-gradient(90deg, var(--reticle), var(--gold));
  border-radius:999px;
  transition:width 1s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 0 8px rgba(95,255,208,.3);
}

/* clips grid */
.apex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:36px}
.apex-clip{
  position:relative;aspect-ratio:9/14;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  display:block;cursor:pointer;
  transition:transform .2s ease, border-color .2s;
}
.apex-clip:hover{border-color:rgba(95,255,208,.5);transform:translateY(-3px)}
.apex-clip:active{transform:scale(.98)}
.apex-clip__thumb{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s}
.apex-clip:hover .apex-clip__thumb{transform:scale(1.06)}
.apex-clip__veil{position:absolute;inset:0;background:linear-gradient(180deg, transparent 30%, rgba(6,9,15,0.95) 100%)}
.apex-clip__top{
  position:absolute;top:8px;left:8px;right:8px;z-index:2;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:9px;letter-spacing:1px;
}
.apex-clip__id{background:rgba(6,9,15,.85);color:var(--reticle);padding:3px 6px;border-radius:4px;border:1px solid var(--line-2)}
.apex-clip__dur{background:var(--gold);color:#1a1100;padding:3px 6px;border-radius:4px;font-weight:700}
.apex-clip__bot{position:absolute;left:10px;right:10px;bottom:10px;z-index:2}
.apex-clip__title{
  font-family:var(--sans);font-size:12px;line-height:1.3;color:var(--text);font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px;
}
.apex-clip__meta{display:flex;gap:10px;font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--dim-2)}
.apex-clip__meta span b{color:var(--reticle);font-weight:600}
.apex-clip__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border:1.5px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,9,15,0.4);
  opacity:0;transition:opacity .2s, transform .2s;z-index:2;
}
.apex-clip__play::before{
  content:'';width:0;height:0;
  border-left:13px solid var(--gold);border-top:8px solid transparent;border-bottom:8px solid transparent;
  margin-left:3px;
}
.apex-clip:hover .apex-clip__play{opacity:1}

.apex-clips__more{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* squad */
.apex-squad{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
}
.apex-mate{
  display:flex;flex-direction:column;gap:8px;
  padding:20px 18px;
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-s);
  backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  position:relative;overflow:hidden;
  transition:transform .2s, border-color .2s, background .2s;
}
.apex-mate:hover{transform:translateY(-2px);border-color:rgba(95,255,208,.4)}
.apex-mate__role{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--reticle);font-weight:700}
.apex-mate__name{font-family:var(--sans);font-weight:900;font-size:24px;color:var(--text);letter-spacing:-.3px}
.apex-mate__lane{font-family:var(--mono);font-size:11px;color:var(--dim-2);letter-spacing:1.5px}
.apex-mate__cta{
  margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:2px;
  color:var(--gold);font-weight:600;
}
.apex-mate--self{
  background:linear-gradient(160deg, rgba(255,200,87,0.10), rgba(13,19,32,0.6));
  border-color:rgba(255,200,87,0.5);
}
.apex-mate--self .apex-mate__role{color:var(--gold)}
.apex-mate--self .apex-mate__cta{color:var(--text)}

/* footer */
.apex-foot{
  border-top:1px solid var(--line);
  padding:48px var(--pad) 120px;
  background:rgba(13,19,32,0.6);
}
.apex-foot__inner{max-width:600px;margin:0 auto;text-align:center}
.apex-foot__mark{width:38px;height:38px;color:var(--reticle);margin:0 auto 14px}
.apex-foot__name{font-family:var(--sans);font-weight:800;font-size:16px;letter-spacing:5px;color:var(--text);margin-bottom:6px}
.apex-foot__line{font-family:var(--mono);font-size:12px;color:var(--dim-2);letter-spacing:3px;margin-bottom:14px}
.apex-foot__src{
  display:inline-block;
  font-family:var(--mono);font-size:11px;letter-spacing:3px;
  color:var(--gold);border:1px solid var(--line-2);border-radius:999px;
  padding:8px 16px;
  transition:border-color .2s, background .2s;
}
.apex-foot__src:hover{border-color:var(--gold);background:rgba(255,200,87,.06)}

/* bottom tabbar (mobile) */
.apex-tabbar{
  display:none;
  position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
  background:rgba(6,9,15,0.78);
  backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  border:1px solid var(--line-2);border-radius:999px;
  padding:8px;
  justify-content:space-between;align-items:center;gap:6px;
}
@media (max-width:760px){
  .apex-tabbar{display:flex}
  .apex-foot{padding-bottom:140px}
}
.apex-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 6px;border-radius:999px;
  font-family:var(--mono);font-size:9px;letter-spacing:1.5px;color:var(--dim-2);
  transition:background .2s, color .2s;
}
.apex-tab b{font-weight:600}
.apex-tab__ic{
  width:18px;height:18px;display:block;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:.7;
}
.apex-tab__ic--user{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fffd0' stroke-width='1.6'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 4-7 8-7s8 3 8 7'/></svg>")}
.apex-tab__ic--target{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fffd0' stroke-width='1.6'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='4'/><line x1='12' y1='1' x2='12' y2='5'/><line x1='12' y1='19' x2='12' y2='23'/><line x1='1' y1='12' x2='5' y2='12'/><line x1='19' y1='12' x2='23' y2='12'/></svg>")}
.apex-tab__ic--film{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fffd0' stroke-width='1.6'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M7 5v14M17 5v14M3 9h4M3 15h4M17 9h4M17 15h4'/></svg>")}
.apex-tab__ic--squad{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fffd0' stroke-width='1.6'><circle cx='9' cy='9' r='3'/><circle cx='17' cy='10' r='2.5'/><path d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/><path d='M14 20c0-2.5 1.7-4.5 4-5'/></svg>")}
.apex-tab.is-on{background:rgba(255,200,87,0.15);color:var(--gold)}
.apex-tab.is-on .apex-tab__ic{opacity:1}

/* ---------- modal ---------- */
.apex-modal{
  position:fixed;inset:0;z-index:80;display:none;
  align-items:center;justify-content:center;padding:18px;
}
.apex-modal.is-on{display:flex}
.apex-modal__bg{
  position:absolute;inset:0;background:rgba(4,6,12,0.88);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  animation:apexFade .3s ease;
}
.apex-modal__panel{
  position:relative;width:min(420px,92vw);aspect-ratio:9/16;
  background:var(--bg-2);border:1px solid var(--reticle);
  border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  max-height:90vh;
  animation:apexPop .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes apexFade{from{opacity:0}to{opacity:1}}
@keyframes apexPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.apex-modal__top{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:3px;
}
.apex-modal__title{color:var(--reticle)}
.apex-modal__close{
  width:28px;height:28px;border:1px solid var(--line-2);border-radius:50%;
  color:var(--text);font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.apex-modal__close:hover{border-color:var(--gold);color:var(--gold)}
.apex-modal__embed{position:relative;flex:1;background:#000;min-height:0}
.apex-modal__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.apex-modal__embed .skel{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(95,255,208,0.12), var(--bg) 70%);
}
.apex-modal__stats{
  display:flex;flex-wrap:wrap;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--dim-2);
  padding:12px 14px;border-top:1px solid var(--line);
}
.apex-modal__stats b{color:var(--gold);margin-left:4px;font-weight:600}

/* ---------- scroll-reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* ---------- responsive tweaks ---------- */
@media (max-width:600px){
  .apex-hero{padding-top:24px}
  .apex-name__first{font-size:.55em;letter-spacing:4px}
  .apex-quote{font-size:12px}
  .apex-stat::after{display:none}
  .apex-stat{padding-left:14px;padding-right:10px}
}

/* desktop cursor crosshair (only on devices with fine pointer, capped cheap) */
@media (hover:hover) and (pointer:fine){
  .apex-cursor{
    position:fixed;top:0;left:0;width:18px;height:18px;pointer-events:none;z-index:200;
    transform:translate3d(-9999px,-9999px,0);transition:transform .05s linear;
  }
  .apex-cursor::before,.apex-cursor::after{
    content:'';position:absolute;background:var(--reticle);
  }
  .apex-cursor::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
  .apex-cursor::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
}