/* ══════════════════════════════════════════════════════
   PK MAXX  ·  style.css  ·  Premium Performance Build
   ══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ── Tokens ─────────────────────────────────────── */
:root {
  --c:  #00f5ff;
  --p:  #bf00ff;
  --pk: #ff0080;
  --g:  #ffd700;
  --bg: #020509;
  --card: rgba(4, 10, 24, 0.72);
  --bdr:  rgba(0,245,255,0.12);
  --txt:  #edf4ff;
  --mut:  rgba(160,200,255,0.50);
  --gcyan:   0 0 18px rgba(0,245,255,0.55), 0 0 44px rgba(0,245,255,0.14);
  --gpurple: 0 0 18px rgba(191,0,255,0.55), 0 0 44px rgba(191,0,255,0.14);
}

/* ── Reset ──────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  min-height:100dvh; width:100%;
  background:var(--bg);
  color:var(--txt);
  font-family:'Rajdhani',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  opacity:0;
}

/* ── Page transitions ───────────────────────────── */
body.pk-in  { animation: pkIn  0.5s cubic-bezier(.22,1,.36,1) forwards; }
body.pk-out { animation: pkOut 0.4s ease forwards; pointer-events:none; }
@keyframes pkIn  { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
@keyframes pkOut { from{opacity:1;} to{opacity:0;} }

/* ── Scroll reveal ──────────────────────────────── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.55s ease, transform 0.55s cubic-bezier(.22,1,.36,1); }
.reveal.revealed { opacity:1; transform:translateY(0); }

/* ════════════════════════════════════════════════
   SKELETON LOADER
   ════════════════════════════════════════════════ */
#sk-loader {
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.5s ease;
}
#sk-loader.hidden { opacity:0; pointer-events:none; }

.sk-center {
  display:flex; flex-direction:column; align-items:center; gap:20px;
}

/* Shimmer ring placeholder */
.sk-ring {
  width:110px; height:110px; border-radius:50%;
  background: linear-gradient(135deg,#0d0d1e,#141430);
  position:relative; overflow:hidden;
}
.sk-ring::after {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg,transparent 0%,rgba(0,245,255,0.08) 50%,transparent 100%);
  animation: shimmer 1.8s ease-in-out infinite;
}

/* Shimmer bars */
.sk-bar {
  border-radius:6px;
  background: linear-gradient(135deg,#0d0d1e,#141430);
  position:relative; overflow:hidden;
}
.sk-bar::after {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg,transparent 0%,rgba(0,245,255,0.07) 50%,transparent 100%);
  animation: shimmer 1.8s ease-in-out infinite;
}
.sk-bar.w200 { width:200px; height:18px; }
.sk-bar.w140 { width:140px; height:11px; }
.sk-bar.w120 { width:120px; height:36px; }

@keyframes shimmer {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}

/* ════════════════════════════════════════════════
   VIDEO BACKGROUND
   ════════════════════════════════════════════════ */
.vid-bg {
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:#000;
}
.vid-bg video { width:100%; height:100%; object-fit:cover; will-change:transform; }
.vid-overlay  { position:absolute; inset:0; }

/* ── Canvas particle layer (jugnu) ─────────────── */
.pt-canvas {
  position:fixed; inset:0; z-index:3;
  pointer-events:none; width:100%; height:100%;
}

/* ── Scan lines ─────────────────────────────────── */
.scanlines {
  position:fixed; inset:0; z-index:4; pointer-events:none;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,245,255,0.008) 2px, rgba(0,245,255,0.008) 4px
  );
}

/* ── Corner brackets ────────────────────────────── */
.corner {
  position:fixed; width:40px; height:40px;
  z-index:6; pointer-events:none; opacity:0.50;
}
.corner.tl { top:12px; left:12px;   border-top:1.5px solid var(--c); border-left:1.5px solid var(--c); }
.corner.tr { top:12px; right:12px;  border-top:1.5px solid var(--p); border-right:1.5px solid var(--p); }
.corner.bl { bottom:12px; left:12px;  border-bottom:1.5px solid var(--c); border-left:1.5px solid var(--c); }
.corner.br { bottom:12px; right:12px; border-bottom:1.5px solid var(--p); border-right:1.5px solid var(--p); }

/* ── Floating 3D brand sphere ───────────────────── */
.brand-sphere {
  position:fixed; inset:0; z-index:1;
  pointer-events:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.brand-sphere video {
  width:min(60vw,460px); height:auto;
  opacity:0.18;
  filter:blur(10px) saturate(2.2);
  border-radius:50%;
  animation:bsDrift 14s ease-in-out infinite;
  transform-origin:center;
}
@keyframes bsDrift {
  0%,100% { transform:scale(1) translateY(0) rotate(-2deg); }
  33%      { transform:scale(1.05) translateY(-14px) rotate(2deg); }
  66%      { transform:scale(0.97) translateY(8px) rotate(-1deg); }
}

/* ════════════════════════════════════════════════
   SPLASH
   ════════════════════════════════════════════════ */
.splash-wrap {
  position:relative; z-index:10; height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:20px;
  animation:splashReveal 0.9s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes splashReveal { from{opacity:0;transform:scale(0.96);} to{opacity:1;transform:scale(1);} }

/* Splash CSS particles */
.splash-pts { position:fixed; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.spt { position:absolute; border-radius:50%; animation:sptFloat linear infinite; }
@keyframes sptFloat {
  0%   { transform:translateY(104vh); opacity:0; }
  7%   { opacity:0.7; }
  93%  { opacity:0.25; }
  100% { transform:translateY(-6vh) translateX(14px); opacity:0; }
}

/* Logo ring */
.logo-ring { position:relative; width:132px; height:132px; margin-bottom:24px; }
.logo-ring::before,.logo-ring::after {
  content:''; position:absolute; inset:0;
  border-radius:50%; border:2px solid transparent;
}
.logo-ring::before { border-top-color:var(--c); border-right-color:var(--c); animation:spin 3s linear infinite; }
.logo-ring::after  { border-bottom-color:var(--p); border-left-color:var(--p); animation:spin 5.5s linear infinite reverse; }
@keyframes spin { to{transform:rotate(360deg);} }
.ring-pulse {
  position:absolute; inset:-15px; border-radius:50%;
  border:1px solid rgba(0,245,255,0.13);
  animation:rPulse 3.2s ease-out infinite;
}
@keyframes rPulse { 0%{transform:scale(.8);opacity:.6;} 100%{transform:scale(1.55);opacity:0;} }
.logo-inner {
  position:absolute; inset:12px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,245,255,0.13),rgba(191,0,255,0.06));
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif; font-size:23px; font-weight:900;
  color:var(--c); letter-spacing:2px; text-shadow:0 0 16px rgba(0,245,255,0.9);
}

.splash-title {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(2.8rem,13vw,7.5rem);
  font-weight:900; letter-spacing:0.10em;
  background:linear-gradient(128deg,var(--c),var(--p),var(--pk));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 0 26px rgba(0,245,255,0.55));
  animation:tPulse 3.5s ease-in-out infinite;
  margin-bottom:10px;
}
@keyframes tPulse {
  0%,100% { filter:drop-shadow(0 0 24px rgba(0,245,255,0.50)); }
  50%      { filter:drop-shadow(0 0 52px rgba(0,245,255,0.95)) drop-shadow(0 0 88px rgba(191,0,255,0.40)); }
}
.splash-sub {
  font-family:'Space Mono',monospace;
  font-size:clamp(0.55rem,2.2vw,0.84rem);
  letter-spacing:0.34em; color:rgba(0,245,255,0.70);
  text-transform:uppercase; margin-bottom:44px;
}

/* Enter button */
.enter-btn {
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:14px 44px;
  background:transparent; border:1px solid var(--c);
  color:var(--c);
  font-family:'Orbitron',sans-serif; font-size:0.85rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; cursor:pointer; overflow:hidden;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
  transition:box-shadow 0.35s, transform 0.35s;
}
.enter-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--c),var(--p));
  opacity:0; transition:opacity 0.35s;
}
.enter-btn:hover::before,.enter-btn:active::before { opacity:0.13; }
.enter-btn:hover { box-shadow:var(--gcyan); transform:translateY(-3px) scale(1.02); }
.enter-btn:active { transform:scale(0.98); }
.enter-btn span,.enter-btn .arr { position:relative; z-index:1; }
.enter-btn .arr { font-size:1.1rem; transition:transform 0.35s; }
.enter-btn:hover .arr { transform:translateX(7px); }

.status-bar {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  font-family:'Space Mono',monospace; font-size:0.54rem;
  letter-spacing:0.34em; color:rgba(0,245,255,0.24);
  text-transform:uppercase; z-index:10; white-space:nowrap;
}
.blink::after { content:'|'; animation:blk 1s step-end infinite; }
@keyframes blk { 50%{opacity:0;} }

/* ════════════════════════════════════════════════
   MAIN PAGE
   ════════════════════════════════════════════════ */
.main-wrap { position:relative; z-index:10; padding-bottom:56px; }

/* Header */
.hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 20px;
  background:rgba(2,5,12,0.62);
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  border-bottom:1px solid var(--bdr);
  position:sticky; top:0; z-index:50;
}
.hdr-logo {
  font-family:'Orbitron',sans-serif; font-size:1.28rem; font-weight:900;
  letter-spacing:0.16em;
  background:linear-gradient(128deg,var(--c),var(--p));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 0 9px rgba(0,245,255,0.30));
}
.hdr-nav { display:flex; align-items:center; gap:16px; }
.hdr-btn {
  font-family:'Space Mono',monospace; font-size:0.56rem;
  letter-spacing:0.22em; color:var(--mut);
  text-transform:uppercase; background:none; border:none;
  cursor:pointer; transition:color 0.25s; padding:0; outline:none;
}
.hdr-btn:hover { color:var(--c); }
.hdr-tag {
  font-family:'Space Mono',monospace; font-size:0.44rem;
  letter-spacing:0.16em; color:var(--mut);
  text-align:right; text-transform:uppercase; line-height:1.5; display:none;
}
@media(min-width:420px){ .hdr-tag { display:block; } }

/* Hero */
.hero { position:relative; padding:48px 20px 60px; text-align:center; }
.hero-badge {
  display:inline-flex; align-items:center; gap:7px; padding:4px 16px;
  border:1px solid rgba(0,245,255,0.26); border-radius:2px;
  font-family:'Space Mono',monospace; font-size:0.56rem;
  letter-spacing:0.26em; color:var(--c); text-transform:uppercase; margin-bottom:16px;
  background:rgba(0,245,255,0.04);
}
.hero-title {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(2.3rem,11vw,6rem);
  font-weight:900; letter-spacing:0.08em;
  background:linear-gradient(128deg,#fff 0%,var(--c) 50%,var(--p) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1.07; margin-bottom:12px;
}
.hero-desc { font-size:0.96rem; color:var(--mut); letter-spacing:0.04em; max-width:360px; margin:0 auto; line-height:1.74; }

.pdot {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--c); box-shadow:0 0 7px var(--c);
  animation:pdot 2s ease-in-out infinite;
}
@keyframes pdot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.3;transform:scale(0.55);} }

/* Stats */
.stats {
  display:flex; gap:9px; padding:0 18px; margin-bottom:22px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.stats::-webkit-scrollbar { display:none; }
.stat-chip {
  flex-shrink:0; min-width:76px; padding:10px 14px;
  background:var(--card); border:1px solid var(--bdr); border-radius:10px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); text-align:center;
  transition:border-color 0.3s, box-shadow 0.3s;
}
.stat-chip:hover { border-color:rgba(0,245,255,0.28); box-shadow:0 0 12px rgba(0,245,255,0.07); }
.stat-val { display:block; font-family:'Orbitron',sans-serif; font-size:1.1rem; font-weight:900; color:var(--c); text-shadow:0 0 11px rgba(0,245,255,0.42); }
.stat-lbl { font-size:0.55rem; letter-spacing:0.13em; color:var(--mut); text-transform:uppercase; font-family:'Space Mono',monospace; }

/* Section header */
.sec-head { display:flex; align-items:center; gap:12px; padding:0 20px; margin-bottom:16px; }
.sec-label { font-family:'Orbitron',sans-serif; font-size:0.65rem; font-weight:700; letter-spacing:0.30em; color:var(--c); text-transform:uppercase; white-space:nowrap; }
.sec-line { flex:1; height:1px; background:linear-gradient(90deg,var(--c),transparent); }

/* ════════════════════════════════════════════════
   APP CARDS  — iOS-style, wide premium cards
   ════════════════════════════════════════════════ */
.apps-sec { position:relative; z-index:10; padding:24px 0; }

.app-list {
  display:flex; flex-direction:column;
  gap:16px; padding:0 20px;
  max-width:480px; margin:0 auto;
}
@media(min-width:560px){ .app-list { padding:0 32px; } }
@media(min-width:900px){
  .app-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    max-width:880px;
    gap:18px;
    padding:0 32px;
  }
}

/* Each card: full-width iOS style */
.app-card {
  display:flex; align-items:center; gap:16px;
  padding:18px 20px;
  background:rgba(4,10,26,0.70);
  border:1px solid rgba(0,245,255,0.11);
  border-radius:24px;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:0 8px 32px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.03);
  cursor:pointer; text-decoration:none; color:inherit;
  position:relative; overflow:hidden;
  transition:transform 0.35s cubic-bezier(.34,1.56,.64,1), border-color 0.30s, box-shadow 0.30s;
  -webkit-tap-highlight-color:transparent;
  width:100%; /* full width */
}

/* Shimmer top-edge highlight */
.app-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,245,255,0.22),transparent);
}
/* Hover glow fill */
.app-card::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(135deg,rgba(0,245,255,0.06),rgba(191,0,255,0.03));
  opacity:0; transition:opacity 0.30s;
}
.app-card:hover::after,.app-card:active::after { opacity:1; }
.app-card:hover {
  transform:translateY(-5px) scale(1.015);
  border-color:rgba(0,245,255,0.28);
  box-shadow:0 16px 44px rgba(0,0,0,0.50), 0 0 28px rgba(0,245,255,0.09), 0 0 0 1px rgba(0,245,255,0.06);
}
.app-card:active { transform:scale(0.98); transition-duration:0.1s; }

/* Icon — square, rounded */
.app-icon {
  width:64px; height:64px; flex-shrink:0;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(0,245,255,0.10),rgba(191,0,255,0.08));
  border:1px solid rgba(0,245,255,0.14);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,0.40), 0 0 12px rgba(0,245,255,0.05);
  transition:box-shadow 0.30s;
  position:relative; z-index:1;
}
.app-card:hover .app-icon { box-shadow:0 6px 22px rgba(0,0,0,0.50), 0 0 20px rgba(0,245,255,0.16); }
.app-icon img { width:100%; height:100%; object-fit:cover; border-radius:16px; }
.app-icon svg { width:36px; height:36px; }

/* Text block */
.app-info { flex:1; min-width:0; position:relative; z-index:1; }
.app-name {
  font-family:'Rajdhani',sans-serif; font-size:1.05rem; font-weight:700;
  letter-spacing:0.03em; color:var(--txt); margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.app-sub {
  font-family:'Space Mono',monospace; font-size:0.52rem;
  letter-spacing:0.12em; color:var(--mut); text-transform:uppercase;
}

/* Get APK button */
.app-dl {
  flex-shrink:0; padding:8px 14px;
  background:linear-gradient(135deg,rgba(0,245,255,0.12),rgba(191,0,255,0.08));
  border:1px solid rgba(0,245,255,0.24); border-radius:10px;
  color:var(--c); font-family:'Orbitron',sans-serif; font-size:0.50rem;
  font-weight:700; letter-spacing:0.14em; text-transform:uppercase; text-align:center;
  position:relative; z-index:1; white-space:nowrap;
  transition:background 0.30s, box-shadow 0.30s;
}
.app-card:hover .app-dl {
  background:linear-gradient(135deg,rgba(0,245,255,0.20),rgba(191,0,255,0.14));
  box-shadow:0 0 12px rgba(0,245,255,0.28);
}

/* ── About teaser ───────────────────────────────── */
.abt-teaser { padding:0 20px 36px; max-width:480px; margin:0 auto; }
@media(min-width:900px){ .abt-teaser{ max-width:880px; padding:0 32px 36px; } }
.abt-inner {
  display:block; text-decoration:none; border-radius:20px; overflow:hidden;
  position:relative; min-height:140px;
  border:1px solid rgba(0,245,255,0.12); cursor:pointer;
  transition:border-color 0.35s, box-shadow 0.35s, transform 0.35s;
}
.abt-inner:hover { border-color:rgba(0,245,255,0.32); box-shadow:0 0 26px rgba(0,245,255,0.07); transform:translateY(-3px); }
.abt-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.70; }
.abt-overlay { position:absolute; inset:0; background:linear-gradient(128deg,rgba(2,5,12,0.58),rgba(4,0,20,0.36)); }
.abt-body { position:relative; z-index:2; padding:24px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.abt-label { font-family:'Space Mono',monospace; font-size:0.54rem; letter-spacing:0.26em; color:var(--c); text-transform:uppercase; margin-bottom:5px; text-shadow:0 0 10px rgba(0,245,255,0.5); }
.abt-name { font-family:'Orbitron',sans-serif; font-size:1.18rem; font-weight:900; letter-spacing:0.08em; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.8); }
.abt-tag { font-family:'Rajdhani',sans-serif; font-size:0.84rem; color:rgba(255,255,255,0.58); margin-top:3px; text-shadow:0 1px 4px rgba(0,0,0,0.8); }
.abt-arrow {
  width:38px; height:38px; border:1px solid rgba(0,245,255,0.34); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--c); font-size:0.9rem; flex-shrink:0; backdrop-filter:blur(10px);
  transition:box-shadow 0.30s, transform 0.30s;
}
.abt-inner:hover .abt-arrow { box-shadow:0 0 14px rgba(0,245,255,0.38); transform:translateX(3px); }

/* ── Divider & Footer ───────────────────────────── */
.divider { height:1px; margin:24px 20px; background:linear-gradient(90deg,transparent,var(--c),var(--p),transparent); opacity:0.26; }
.footer { text-align:center; padding:20px; border-top:1px solid var(--bdr); background:rgba(2,5,12,0.88); }
.footer p { font-family:'Space Mono',monospace; font-size:0.56rem; letter-spacing:0.17em; color:var(--mut); text-transform:uppercase; line-height:1.8; }
.footer span { color:var(--c); }

/* ════════════════════════════════════════════════
   ABOUT PAGE
   ════════════════════════════════════════════════ */
.abt-bg { position:fixed; inset:0; z-index:0; overflow:hidden; background:#000; }
.abt-bg video { width:100%; height:100%; object-fit:cover; }
.abt-bg-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(2,5,12,0.38) 0%,
    rgba(2,5,12,0.06) 28%,
    rgba(2,5,12,0.06) 70%,
    rgba(2,5,12,0.48) 100%
  );
}

/* Floating text — no card box */
.abt-float {
  position:relative; z-index:10; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:0 24px 52px;
}
@media(min-width:580px){ .abt-float { justify-content:center; padding:90px 24px 60px; } }

.abt-float-inner {
  width:100%; max-width:340px; text-align:center;
  animation:abtReveal 0.75s cubic-bezier(.22,1,.36,1) 0.25s forwards;
  opacity:0; transform:translateY(18px);
}
@keyframes abtReveal { to{opacity:1;transform:translateY(0);} }

.abt-float-title {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(1.9rem,7.5vw,3rem);
  font-weight:900; letter-spacing:0.10em; color:#fff;
  text-shadow:0 0 36px rgba(0,245,255,0.78), 0 2px 12px rgba(0,0,0,0.95);
  margin-bottom:5px;
}
.abt-float-sub {
  font-family:'Space Mono',monospace; font-size:0.56rem;
  letter-spacing:0.26em; color:rgba(0,245,255,0.80);
  text-transform:uppercase; margin-bottom:18px;
  text-shadow:0 0 12px rgba(0,245,255,0.44);
}
.abt-float-bar {
  width:38px; height:2px; margin:0 auto 18px;
  background:linear-gradient(90deg,var(--c),var(--p));
  border-radius:2px; box-shadow:0 0 9px rgba(0,245,255,0.44);
}
.abt-float-body {
  font-family:'Rajdhani',sans-serif; font-size:0.92rem; line-height:1.76;
  color:rgba(228,242,255,0.82);
  text-shadow:0 1px 6px rgba(0,0,0,0.92);
  max-width:290px; margin:0 auto 14px;
}
.abt-float-body:last-of-type { margin-bottom:26px; }

.socials { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.soc-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:50px;
  font-family:'Rajdhani',sans-serif; font-size:0.88rem; font-weight:700;
  letter-spacing:0.05em; text-decoration:none;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:transform 0.30s cubic-bezier(.34,1.56,.64,1), box-shadow 0.30s, background 0.30s;
  -webkit-tap-highlight-color:transparent;
}
.soc-btn:hover { transform:translateY(-3px) scale(1.04); }
.soc-btn:active { transform:translateY(-1px) scale(0.97); }
.soc-btn.ig { background:linear-gradient(135deg,rgba(225,48,108,0.16),rgba(193,53,132,0.10)); border:1px solid rgba(225,48,108,0.34); color:#f87171; }
.soc-btn.ig:hover { background:linear-gradient(135deg,rgba(225,48,108,0.28),rgba(193,53,132,0.20)); box-shadow:0 0 20px rgba(225,48,108,0.36); }
.soc-btn.tg { background:linear-gradient(135deg,rgba(0,136,204,0.16),rgba(0,100,180,0.10)); border:1px solid rgba(0,136,204,0.34); color:#60a5fa; }
.soc-btn.tg:hover { background:linear-gradient(135deg,rgba(0,136,204,0.28),rgba(0,100,180,0.20)); box-shadow:0 0 20px rgba(0,136,204,0.36); }

/* ════════════════════════════════════════════════
   APP DETAIL PAGES
   ════════════════════════════════════════════════ */
.detail-wrap {
  position:relative; z-index:10; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 20px 40px; text-align:center;
}
.detail-card {
  background:var(--card);
  border:1px solid var(--bdr); border-radius:24px;
  padding:40px 26px; max-width:390px; width:100%;
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  box-shadow:0 0 48px rgba(0,245,255,0.04), 0 28px 56px rgba(0,0,0,0.55);
  position:relative; overflow:hidden;
  animation:cardRise 0.55s cubic-bezier(.22,1,.36,1) 0.1s forwards;
  opacity:0; transform:translateY(16px);
}
@keyframes cardRise { to{opacity:1;transform:translateY(0);} }
.detail-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--c),transparent);
}
.detail-icon {
  width:92px; height:92px; border-radius:22px; overflow:hidden;
  margin:0 auto 20px;
  background:linear-gradient(135deg,rgba(0,245,255,0.10),rgba(191,0,255,0.09));
  border:1px solid rgba(0,245,255,0.19);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 28px rgba(0,245,255,0.13), 0 6px 20px rgba(0,0,0,0.50);
}
.detail-icon .emoji { font-size:44px; }
.detail-name {
  font-family:'Orbitron',sans-serif; font-size:1.42rem; font-weight:900;
  letter-spacing:0.05em;
  background:linear-gradient(135deg,#fff,var(--c));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:5px;
}
.detail-ver { font-family:'Space Mono',monospace; font-size:0.60rem; color:var(--p); letter-spacing:0.20em; margin-bottom:14px; }
.detail-meta { display:flex; gap:6px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
.meta-chip {
  padding:3px 10px; border:1px solid var(--bdr); border-radius:50px;
  font-family:'Space Mono',monospace; font-size:0.54rem;
  letter-spacing:0.10em; color:var(--mut); background:rgba(0,245,255,0.04);
}
.detail-desc { font-size:0.91rem; color:var(--mut); line-height:1.72; margin-bottom:22px; }
.feat-list { list-style:none; text-align:left; margin-bottom:24px; }
.feat-list li {
  display:flex; align-items:flex-start; gap:8px; padding:6px 0;
  border-bottom:1px solid rgba(0,245,255,0.05);
  font-size:0.85rem; color:var(--mut);
  font-family:'Rajdhani',sans-serif; letter-spacing:0.03em;
}
.feat-list li::before { content:'▸'; color:var(--c); flex-shrink:0; margin-top:1px; }
.dl-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:14px 32px;
  background:linear-gradient(135deg,var(--c),var(--p));
  border:none; border-radius:12px; color:#000;
  font-family:'Orbitron',sans-serif; font-size:0.78rem; font-weight:900;
  letter-spacing:0.15em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  box-shadow:0 0 26px rgba(0,245,255,0.28);
  transition:transform 0.30s cubic-bezier(.34,1.56,.64,1), box-shadow 0.30s;
}
.dl-btn:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 0 44px rgba(0,245,255,0.48), 0 14px 28px rgba(0,0,0,0.30); }
.dl-btn:active { transform:scale(0.98); }
.dl-note { font-family:'Space Mono',monospace; font-size:0.56rem; color:var(--mut); letter-spacing:0.14em; margin-top:11px; display:block; text-align:center; }

/* ── Back button ─────────────────────────────────── */
.back-btn {
  position:fixed; top:15px; left:15px; z-index:200;
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
  background:rgba(2,5,12,0.76); border:1px solid var(--bdr); border-radius:50px;
  color:var(--c); font-family:'Rajdhani',sans-serif; font-size:0.84rem;
  font-weight:600; letter-spacing:0.10em;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  cursor:pointer; text-decoration:none; outline:none; -webkit-appearance:none;
  transition:box-shadow 0.30s, transform 0.20s, border-color 0.20s;
  -webkit-tap-highlight-color:transparent;
}
.back-btn:hover { box-shadow:var(--gcyan); border-color:var(--c); transform:translateX(-2px); }
.back-btn:active { transform:scale(0.96); }

/* ── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--c),var(--p)); border-radius:2px; }