/* =============================================================
   DiwaGame — Emerald Midnight (dark-green dominant)
   Hand-built CSS. Design tokens below define the whole system.
   ============================================================= */

:root {
  /* surfaces — deep forest greens */
  --bg:        #05110B;
  --surface:   #081711;
  --surface-1: #0D2117;
  --surface-2: #112A1D;
  --surface-3: #173726;
  --surface-4: #214834;
  --glass:     rgba(14, 34, 24, 0.62);
  --glass-brd: rgba(67, 224, 138, 0.16);

  /* text */
  --ink:    #E9F3EC;
  --ink-2:  #AEC6B7;
  --muted:  #7C9788;
  --outline:#234A36;

  /* brand — dominant emerald green */
  --brand:        #16A862;
  --brand-bright: #43E08A;
  --brand-dim:    #1FC074;
  --brand-deep:   #0B7D46;

  /* secondary warm accents (small, conventional) */
  --gold:    #F5C451;       /* star ratings only */
  --saffron: #FF9A3D;       /* "Hot" + warnings */
  --saffron-bright: #FFBC78;
  --danger:  #ffb4ab;
  --danger-bg: #2a1512;

  /* gradients & glow */
  --grad-brand: linear-gradient(135deg, #4BE995 0%, #18A863 52%, #0B7D46 100%);
  --grad-hero:  radial-gradient(1200px 640px at 50% -10%, rgba(67,224,138,0.20), transparent 60%),
                radial-gradient(820px 520px at 88% 8%, rgba(22,168,98,0.18), transparent 58%),
                radial-gradient(720px 520px at 8% 24%, rgba(11,125,70,0.16), transparent 60%);
  --glow-brand: 0 0 0 1px rgba(67,224,138,.34), 0 10px 32px rgba(22,168,98,.22);
  --shadow-card:0 1px 0 rgba(255,255,255,.03) inset, 0 14px 36px rgba(0,0,0,.5);

  /* spacing */
  --sp-xs:4px; --sp-sm:12px; --sp:16px; --sp-md:24px; --sp-lg:48px; --sp-xl:80px;
  --container:1320px;
  --radius:16px; --radius-sm:11px; --radius-lg:24px;

  --font-head:"Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --topbar-h:38px;
  --header-h:80px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  margin:0; font-family:var(--font-body); font-size:16px; line-height:1.7; color:var(--ink);
  background:var(--surface);
  background-image:
    radial-gradient(1200px 760px at 50% -220px, rgba(67,224,138,0.08), transparent 60%),
    radial-gradient(900px 620px at 100% 0, rgba(11,125,70,0.10), transparent 55%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
}
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:700; line-height:1.16; letter-spacing:-0.01em; color:#fff; margin:0 0 .5em; }
p { margin:0 0 1rem; }
a { color:var(--brand-bright); text-decoration:none; transition:color .18s ease; }
a:hover { color:#fff; }
img { max-width:100%; display:block; }
ul { margin:0 0 1rem; padding-left:1.2rem; }
strong { color:#fff; font-weight:700; }
:focus-visible { outline:2px solid var(--brand-bright); outline-offset:3px; border-radius:4px; }

.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(18px,4.5vw,56px); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:300; background:var(--brand); color:#04130b; padding:10px 16px; border-radius:0 0 10px 0; font-weight:700; }
.skip-link:focus { left:0; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55em; cursor:pointer;
  font-family:var(--font-head); font-weight:700; font-size:15px; line-height:1; border:0; border-radius:999px;
  padding:14px 26px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; text-align:center; }
.btn svg { width:20px; height:20px; }
.btn-primary { background:var(--grad-brand); color:#04130b; box-shadow:0 6px 22px rgba(22,168,98,.4); }
.btn-primary:hover { color:#04130b; transform:translateY(-2px); box-shadow:0 12px 32px rgba(67,224,138,.5); }
.btn-ghost { background:rgba(255,255,255,.04); color:var(--ink); border:1px solid var(--surface-4); }
.btn-ghost:hover { color:#fff; border-color:var(--brand); background:rgba(22,168,98,.12); }
.btn-block { width:100%; }
.btn-lg { padding:17px 32px; font-size:16px; }

/* ===========================================================
   HEADER (redesigned) — trust topbar + main bar, bigger logo
   =========================================================== */
.topbar { background:linear-gradient(90deg, rgba(11,125,70,.28), rgba(22,168,98,.14)); border-bottom:1px solid rgba(67,224,138,.12); font-size:12.5px; }
.topbar .container { display:flex; align-items:center; justify-content:space-between; height:var(--topbar-h); gap:16px; }
.topbar .tb-left { display:flex; align-items:center; gap:8px; color:#d7ece0; font-weight:600; letter-spacing:.02em; }
.topbar .tb-left svg { width:16px; height:16px; color:var(--brand-bright); }
.topbar .tb-right { display:flex; align-items:center; gap:18px; color:var(--ink-2); }
.topbar .tb-right span { display:inline-flex; align-items:center; gap:6px; }
.topbar .tb-right svg { width:15px; height:15px; color:var(--brand-bright); }
@media (max-width:720px){ .topbar .tb-right{ display:none; } .topbar .tb-left{ margin-inline:auto; } }

.site-header { position:sticky; top:0; z-index:100; height:var(--header-h);
  background:rgba(5,17,11,.82); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid rgba(67,224,138,.14); box-shadow:0 8px 30px rgba(0,0,0,.35); }
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:100%; gap:18px; }

/* brand — bigger logo */
.brand { display:flex; align-items:center; gap:14px; font-family:var(--font-head); font-weight:800; color:#fff; letter-spacing:-.02em; }
.brand:hover { color:#fff; }
.brand img { width:56px; height:56px; border-radius:14px; box-shadow:var(--glow-brand); object-fit:cover; }
.brand .bt { display:flex; flex-direction:column; line-height:1; }
.brand .bt .nm { font-size:25px; }
.brand .bt .nm b { color:var(--brand-bright); }
.brand .bt .tag { font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:4px; }

.nav { display:flex; align-items:center; gap:4px; }
.nav a { position:relative; color:var(--ink-2); font-weight:600; font-size:15.5px; padding:10px 16px; border-radius:10px; transition:all .18s ease; }
.nav a:hover { color:#fff; background:rgba(255,255,255,.05); }
.nav a.active { color:var(--brand-bright); }
.nav a.active::after { content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2.5px; border-radius:999px; background:var(--grad-brand); box-shadow:0 0 12px rgba(67,224,138,.6); }
.nav .nav-cta { margin-left:10px; }
.nav .nav-cta::after { display:none; }
.nav-toggle { display:none; background:rgba(255,255,255,.04); border:1px solid var(--surface-4); border-radius:11px; padding:11px; cursor:pointer; color:var(--ink); }
.nav-toggle svg { width:24px; height:24px; }

@media (max-width:920px){
  .nav-toggle { display:inline-flex; }
  .nav { position:fixed; inset:calc(var(--topbar-h) + var(--header-h)) 0 auto 0; flex-direction:column; align-items:stretch; gap:4px;
    background:rgba(5,17,11,.98); backdrop-filter:blur(18px); padding:16px 20px 24px; border-bottom:1px solid rgba(67,224,138,.16);
    transform:translateY(-140%); transition:transform .3s ease; box-shadow:0 24px 44px rgba(0,0,0,.6); }
  .nav.open { transform:translateY(0); }
  .nav a { padding:14px 16px; font-size:16px; }
  .nav a.active::after { display:none; }
  .nav .nav-cta { margin:10px 0 0; }
}

/* ===========================================================
   HERO (redesigned)
   =========================================================== */
.hero { position:relative; overflow:hidden; padding-block:clamp(56px,8vw,108px); background:var(--grad-hero); }
/* AI-generated background photo (Cloudflare Workers AI — FLUX-1-schnell) */
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('/assets/images/hero-bg.webp') center/cover no-repeat; opacity:.55; filter:saturate(1.05); }
.hero::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(95deg, rgba(5,17,11,.95) 0%, rgba(5,17,11,.80) 44%, rgba(5,17,11,.50) 100%),
            radial-gradient(900px 520px at 50% -12%, rgba(22,168,98,.22), transparent 62%); }
.hero::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.35;
  background-image:radial-gradient(circle at 1px 1px, rgba(67,224,138,.10) 1px, transparent 0); background-size:34px 34px; }
.hero .container { position:relative; z-index:2; }
@media (max-width:860px){
  .hero::before { background:linear-gradient(180deg, rgba(5,17,11,.86) 0%, rgba(5,17,11,.78) 55%, rgba(5,17,11,.9) 100%),
                  radial-gradient(700px 420px at 50% -10%, rgba(22,168,98,.22), transparent 62%); }
}
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,56px); align-items:center; }
.hero-copy { max-width:620px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700; font-size:12.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand-bright); background:rgba(22,168,98,.12);
  border:1px solid rgba(67,224,138,.28); padding:7px 16px; border-radius:999px; margin-bottom:22px; }
.hero-badge svg { width:16px; height:16px; }
.hero h1 { font-size:clamp(36px,5.2vw,62px); font-weight:800; letter-spacing:-.03em; margin-bottom:20px; }
.hero h1 .hl { background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-sub { font-size:clamp(16px,1.7vw,19px); color:var(--ink-2); margin-bottom:30px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; }
.hero-mini { display:flex; flex-wrap:wrap; gap:8px 22px; }
.hero-mini span { display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); font-size:14px; font-weight:600; }
.hero-mini svg { width:18px; height:18px; color:var(--brand-bright); }

/* hero showcase panel (right) */
.hero-panel { position:relative; }
.hero-stats-card { background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius-lg); padding:26px; backdrop-filter:blur(12px); box-shadow:var(--shadow-card); }
.hero-stats-card .hsc-head { display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; color:#fff; margin-bottom:20px; }
.hero-stats-card .hsc-head svg { width:22px; height:22px; color:var(--brand-bright); }
.hero-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hstat { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-sm); padding:16px; }
.hstat .num { font-family:var(--font-head); font-weight:800; font-size:clamp(22px,2.4vw,30px); color:var(--brand-bright); line-height:1.05; display:block; }
.hstat .lbl { font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.hero-chips-row { display:flex; gap:10px; margin-top:16px; }
.hero-chips-row .hcr { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; font-weight:600; color:#d7ece0;
  background:rgba(22,168,98,.12); border:1px solid rgba(67,224,138,.2); border-radius:10px; padding:11px; }
.hero-chips-row svg { width:16px; height:16px; color:var(--brand-bright); }
@media (max-width:860px){
  .hero-grid { grid-template-columns:1fr; }
  .hero-panel { order:-1; }
}

/* ---------- Trust bar ---------- */
.trust-bar { border-block:1px solid rgba(67,224,138,.1); background:rgba(0,0,0,.28); }
.trust-bar .container { display:flex; flex-wrap:wrap; justify-content:space-around; gap:18px 24px; padding-block:20px; }
.trust-item { display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink-2); font-size:14.5px; }
.trust-item svg { width:24px; height:24px; color:var(--brand-bright); flex:none; }
.trust-item b { color:#fff; }

/* ---------- Section scaffolding ---------- */
.section { padding-block:clamp(46px,6.5vw,84px); }
.section-head { margin:0 0 clamp(26px,4vw,42px); }
.section-head.center { text-align:center; max-width:720px; margin-inline:auto; }
.section-head .row { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700; font-size:12px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--brand-bright); background:rgba(22,168,98,.1);
  border:1px solid rgba(67,224,138,.22); padding:6px 14px; border-radius:999px; margin-bottom:16px; }
.eyebrow svg { width:15px; height:15px; }
.eyebrow.hot { color:var(--saffron-bright); background:rgba(255,154,61,.1); border-color:rgba(255,154,61,.28); }
.section-head h2 { font-size:clamp(26px,3.4vw,40px); margin:0 0 8px; }
.section-head p { color:var(--ink-2); font-size:clamp(15px,1.5vw,17px); margin:0; max-width:560px; }
.section-head.center p { margin-inline:auto; }
.deco-line { width:78px; height:4px; margin:18px 0 0; border-radius:999px; background:var(--grad-brand); box-shadow:0 0 18px rgba(67,224,138,.5); }
.section-head.center .deco-line { margin-inline:auto; }
.see-all { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--brand-bright);
  border:1px solid var(--surface-4); border-radius:999px; padding:10px 18px; white-space:nowrap; }
.see-all:hover { color:#04130b; background:var(--brand-bright); border-color:var(--brand-bright); }
.see-all svg { width:16px; height:16px; }

/* ---------- Stars ---------- */
.stars { display:inline-flex; gap:1px; color:var(--gold); vertical-align:middle; }
.stars .star--empty { color:var(--surface-4); }
.rating-num { color:var(--gold); font-weight:700; }

/* ---------- Badges / pills ---------- */
.pill { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-head); font-weight:700; font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.pill svg { width:13px; height:13px; }
.pill-hot { background:linear-gradient(135deg,#FFB060,#FF7A2E); color:#3a1800; box-shadow:0 4px 14px rgba(255,122,46,.35); }
.pill-new { background:var(--grad-brand); color:#04130b; box-shadow:0 4px 14px rgba(22,168,98,.36); }
.pill-ver { background:rgba(255,255,255,.06); color:var(--ink-2); border:1px solid var(--surface-4); }
.bonus-chip { display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:12.5px; color:var(--brand-bright);
  background:rgba(22,168,98,.14); border:1px solid rgba(67,224,138,.3); padding:4px 10px; border-radius:999px; }
.bonus-chip svg { width:14px; height:14px; }

/* ===========================================================
   ALL GAMES — 6-column compact grid
   =========================================================== */
.game-grid { display:grid; gap:18px; grid-template-columns:repeat(6, 1fr); }
@media (max-width:1180px){ .game-grid{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:820px){  .game-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:520px){  .game-grid{ grid-template-columns:repeat(2,1fr); gap:12px;} }

.apk-card { position:relative; display:flex; flex-direction:column; background:var(--surface-2);
  border:1px solid rgba(255,255,255,.07); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow-card);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.apk-card:hover { transform:translateY(-4px); border-color:rgba(67,224,138,.5); box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 24px rgba(22,168,98,.18); }
.apk-card .badge { position:absolute; top:11px; right:11px; z-index:3; }
.apk-thumb { position:relative; aspect-ratio:1/1; border-radius:13px; overflow:hidden; margin-bottom:12px;
  border:1px solid rgba(67,224,138,.34); box-shadow:0 0 0 1px rgba(0,0,0,.4), inset 0 0 26px rgba(22,168,98,.08); background:var(--surface-3); }
.apk-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.apk-card:hover .apk-thumb img { transform:scale(1.06); }
.apk-card h3 { font-size:15px; margin:0 0 6px; line-height:1.25; }
.apk-card h3 a { color:#fff; }
.apk-card h3 a:hover { color:var(--brand-bright); }
.card-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; font-size:12.5px; color:var(--muted); }
.apk-card .btn { margin-top:auto; padding:11px 14px; font-size:13.5px; }

/* ===========================================================
   NEWEST GAMES — spotlight layout (large horizontal cards)
   =========================================================== */
.spotlight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:1080px){ .spotlight-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){  .spotlight-grid{ grid-template-columns:1fr;} }
.spotlight { position:relative; display:flex; gap:18px; padding:20px; border-radius:var(--radius-lg);
  background:linear-gradient(150deg, rgba(22,168,98,.10), var(--surface-2) 55%); border:1px solid rgba(67,224,138,.18);
  box-shadow:var(--shadow-card); overflow:hidden; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.spotlight::after { content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, rgba(67,224,138,.18), transparent 70%); pointer-events:none; }
.spotlight:hover { transform:translateY(-4px); border-color:rgba(67,224,138,.5); box-shadow:0 20px 48px rgba(0,0,0,.55), 0 0 26px rgba(22,168,98,.2); }
.spotlight-icon { position:relative; z-index:2; width:92px; height:92px; flex:none; border-radius:18px; overflow:hidden;
  border:2px solid rgba(67,224,138,.5); box-shadow:0 0 26px rgba(22,168,98,.28); background:var(--surface-3); }
.spotlight-icon img { width:100%; height:100%; object-fit:cover; }
.spotlight-body { position:relative; z-index:2; min-width:0; flex:1; display:flex; flex-direction:column; }
.spotlight-body .top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.spotlight-body h3 { font-size:18px; margin:0; line-height:1.2; }
.spotlight-body h3 a { color:#fff; } .spotlight-body h3 a:hover { color:var(--brand-bright); }
.spotlight-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.spotlight-desc { font-size:13.5px; color:var(--ink-2); margin:0 0 14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.spotlight-foot { display:flex; align-items:center; gap:12px; margin-top:auto; }
.spotlight-foot .btn { flex:1; padding:11px 16px; font-size:13.5px; }

/* ===========================================================
   HOT GAMES — ranked "top charts" list
   =========================================================== */
.chart-list { display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
@media (max-width:820px){ .chart-list{ grid-template-columns:1fr;} }
.chart-row { display:flex; align-items:center; gap:16px; padding:12px 16px; border-radius:var(--radius);
  background:var(--surface-2); border:1px solid rgba(255,255,255,.06); transition:all .18s ease; }
.chart-row:hover { border-color:rgba(67,224,138,.45); background:var(--surface-3); transform:translateX(3px); }
.chart-rank { font-family:var(--font-head); font-weight:800; font-size:26px; width:40px; flex:none; text-align:center;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.chart-row:nth-child(1) .chart-rank, .chart-row:nth-child(2) .chart-rank { font-size:30px; }
.chart-icon { width:60px; height:60px; flex:none; border-radius:14px; overflow:hidden; border:1px solid rgba(67,224,138,.32);
  box-shadow:inset 0 0 18px rgba(22,168,98,.1); background:var(--surface-3); }
.chart-icon img { width:100%; height:100%; object-fit:cover; }
.chart-info { min-width:0; flex:1; }
.chart-info h3 { font-size:16px; margin:0 0 4px; line-height:1.2; }
.chart-info h3 a { color:#fff; } .chart-info h3 a:hover { color:var(--brand-bright); }
.chart-info .cm { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.chart-dl { flex:none; }
.chart-dl .btn { padding:10px 16px; font-size:13px; }
.chart-dl .btn .lbl-full { display:inline; }
@media (max-width:1080px){ .chart-dl .btn .lbl-full{ display:none; } .chart-dl .btn{ padding:11px; border-radius:50%; } }

/* ===========================================================
   APK DETAIL PAGE (redesigned — app-store style)
   =========================================================== */
.breadcrumb { padding-block:18px; font-size:13.5px; color:var(--muted); }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.breadcrumb li { display:flex; align-items:center; gap:8px; }
.breadcrumb svg { width:15px; height:15px; opacity:.6; }
.breadcrumb a { color:var(--ink-2); }
.breadcrumb [aria-current] { color:var(--brand-bright); }

.app-hero { position:relative; overflow:hidden; border-bottom:1px solid rgba(67,224,138,.1); }
.app-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(46px) saturate(1.4); transform:scale(1.3); opacity:.26; z-index:0; }
.app-hero::after { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(5,17,11,.72) 0%, rgba(5,17,11,.92) 100%),
             radial-gradient(700px 360px at 18% 0, rgba(22,168,98,.22), transparent 60%); }
.app-hero-inner { position:relative; z-index:2; display:flex; gap:clamp(20px,3.5vw,38px); align-items:center; padding-block:clamp(34px,5vw,54px); flex-wrap:wrap; }
.app-icon { width:clamp(116px,15vw,148px); aspect-ratio:1/1; border-radius:26px; flex:none; overflow:hidden;
  border:2px solid rgba(67,224,138,.55); box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 40px rgba(22,168,98,.32); background:var(--surface-3); }
.app-icon img { width:100%; height:100%; object-fit:cover; }
.app-head { flex:1 1 340px; min-width:0; }
.app-badges { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:12px; }
.app-head h1 { font-size:clamp(28px,4.2vw,46px); margin:0 0 8px; }
.app-dev { display:flex; align-items:center; gap:8px; color:var(--brand-bright); font-weight:600; font-size:14.5px; margin-bottom:16px; }
.app-dev svg { width:17px; height:17px; }
.app-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.app-actions .btn-lg { padding:16px 34px; }
.app-secure { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2); }
.app-secure svg { width:18px; height:18px; color:var(--brand-bright); }

/* stats strip */
.app-stats { position:relative; z-index:2; }
.app-stats-inner { display:grid; grid-template-columns:repeat(5,1fr); margin-top:-1px;
  border:1px solid rgba(67,224,138,.16); border-radius:var(--radius); overflow:hidden; background:var(--glass); backdrop-filter:blur(10px); }
.app-stat { padding:16px 14px; text-align:center; border-right:1px solid rgba(255,255,255,.06); }
.app-stat:last-child { border-right:0; }
.app-stat .v { font-family:var(--font-head); font-weight:700; color:#fff; font-size:17px; display:flex; align-items:center; justify-content:center; gap:5px; }
.app-stat .v .stars { font-size:0; } /* keep stars compact */
.app-stat .v svg { width:16px; height:16px; color:var(--brand-bright); }
.app-stat .k { font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
@media (max-width:680px){
  .app-stats-inner { grid-template-columns:repeat(3,1fr); }
  .app-stat:nth-child(n+4){ border-top:1px solid rgba(255,255,255,.06); }
  .app-stat:nth-child(3){ border-right:0; }
}

/* body + sidebar */
.app-body { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:clamp(24px,3vw,44px); align-items:start; padding-block:clamp(36px,5vw,56px); }
.content-card { background:var(--surface-1); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-lg); padding:clamp(22px,3vw,38px); }
.article { min-width:0; }
.article-lead p { font-size:18px; color:var(--ink-2); }
.article-h2 { font-size:clamp(20px,2.4vw,26px); margin:32px 0 14px; color:#fff; }
.article-h2:first-child { margin-top:0; }
.article-h2::before { content:""; display:block; width:46px; height:3px; border-radius:999px; background:var(--grad-brand); margin-bottom:14px; }
.article p { color:var(--ink-2); }
.article-list { list-style:none; padding:0; margin:0 0 1.2rem; display:grid; gap:10px; }
.article-list li { position:relative; padding:12px 16px 12px 46px; background:var(--surface-2); border:1px solid rgba(255,255,255,.05); border-radius:12px; color:var(--ink-2); }
.article-list li::before { content:""; position:absolute; left:16px; top:16px; width:18px; height:18px; border-radius:6px;
  background:var(--grad-brand); box-shadow:0 0 10px rgba(67,224,138,.45); }
.article-list li strong { color:#fff; }

/* FAQ */
.faq { display:grid; gap:12px; }
.faq-item { background:var(--surface-2); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:18px 20px; }
.faq-q { font-size:16.5px; margin:0 0 8px; color:var(--brand-bright); display:flex; gap:10px; align-items:flex-start; }
.faq-q::before { content:"Q"; font-size:12px; font-weight:800; background:var(--grad-brand); color:#04130b; width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; flex:none; margin-top:1px; }
.faq-a { color:var(--ink-2); margin:0; }
.faq-a + .faq-a { margin-top:8px; }

/* sidebar */
.app-side { position:sticky; top:calc(var(--header-h) + 16px); display:grid; gap:16px; }
.s-card { background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius); padding:20px; backdrop-filter:blur(10px); box-shadow:var(--shadow-card); }
.s-card h3 { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-bright); margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.s-card h3 svg { width:16px; height:16px; }
.dl-card { text-align:center; background:linear-gradient(160deg, rgba(22,168,98,.16), var(--surface-1)); border-color:rgba(67,224,138,.28); }
.dl-card .price { font-family:var(--font-head); font-weight:800; font-size:24px; color:#fff; }
.dl-card .free { color:var(--brand-bright); }
.dl-card .sub { font-size:12.5px; color:var(--muted); margin:4px 0 16px; }
.s-list { list-style:none; padding:0; margin:0; display:grid; gap:2px; }
.s-list li { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:14px; }
.s-list li:last-child { border-bottom:0; }
.s-list .k { color:var(--muted); }
.s-list .v { color:#fff; font-weight:600; text-align:right; }
.s-warn { background:var(--danger-bg); border:1px solid rgba(255,180,171,.28); }
.s-warn h3 { color:var(--danger); }
.s-warn p { font-size:13.5px; color:#f3c8c2; margin:0; }
@media (max-width:980px){
  .app-body { grid-template-columns:1fr; }
  .app-side { position:static; order:2; }
}

/* sticky mobile download bar */
.dl-bar { position:fixed; left:0; right:0; bottom:0; z-index:95; display:none; align-items:center; gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(5,17,11,.95); backdrop-filter:blur(14px);
  border-top:1px solid rgba(67,224,138,.2); box-shadow:0 -10px 30px rgba(0,0,0,.5); }
.dl-bar .dlb-info { display:flex; align-items:center; gap:11px; min-width:0; flex:1; }
.dl-bar img { width:42px; height:42px; border-radius:10px; flex:none; border:1px solid rgba(67,224,138,.3); }
.dl-bar .dlb-info .nm { font-family:var(--font-head); font-weight:700; color:#fff; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-bar .dlb-info .mt { font-size:12px; color:var(--muted); }
.dl-bar .btn { flex:none; }
@media (max-width:980px){ .dl-bar { display:flex; } body.page-apk { padding-bottom:78px; } }

/* related — horizontal scroll row */
.related-rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(170px,1fr); gap:16px; overflow-x:auto; padding-bottom:10px;
  scroll-snap-type:x mandatory; }
.related-rail .apk-card { scroll-snap-align:start; }
@media (min-width:1024px){ .related-rail{ grid-auto-flow:row; grid-template-columns:repeat(5,1fr); overflow:visible; } }

/* ===========================================================
   HOMEPAGE CONTENT SECTIONS (layout variations)
   =========================================================== */
.section-alt { background:linear-gradient(180deg, rgba(22,168,98,.05), transparent 70%); border-block:1px solid rgba(67,224,138,.07); }

/* Browse by Category — AI-image cards */
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .cat-grid{ grid-template-columns:1fr;} }
.cat-card { position:relative; display:block; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/1;
  border:1px solid rgba(67,224,138,.2); box-shadow:var(--shadow-card); isolation:isolate; }
.cat-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .5s ease; }
.cat-card::after { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(5,17,11,.15) 0%, rgba(5,17,11,.35) 45%, rgba(5,17,11,.92) 100%); }
.cat-card:hover img { transform:scale(1.07); }
.cat-card:hover { border-color:rgba(67,224,138,.55); }
.cc-body { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px; }
.cc-body h3 { font-size:20px; margin:0 0 4px; color:#fff; }
.cc-body p { font-size:13px; color:var(--ink-2); margin:0 0 12px; }
.cc-go { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--brand-bright); }
.cc-go svg { width:16px; height:16px; transition:transform .2s ease; }
.cat-card:hover .cc-go svg { transform:translateX(4px); }
.cc-tag { position:absolute; top:14px; left:14px; z-index:2; }

/* Why Choose — feature cards */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:880px){ .feature-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .feature-grid{ grid-template-columns:1fr;} }
.feature-card { background:var(--surface-2); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:26px 24px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform:translateY(-4px); border-color:rgba(67,224,138,.4); box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 22px rgba(22,168,98,.14); }
.fc-ico { width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(135deg, rgba(67,224,138,.18), rgba(22,168,98,.08)); border:1px solid rgba(67,224,138,.3); }
.fc-ico svg { width:26px; height:26px; color:var(--brand-bright); }
.feature-card h3 { font-size:18px; margin:0 0 8px; }
.feature-card p { font-size:14.5px; color:var(--ink-2); margin:0; }

/* How It Works — numbered steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .steps{ grid-template-columns:1fr;} }
.step { position:relative; background:var(--surface-1); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:26px 22px; }
.step-num { font-family:var(--font-head); font-weight:800; font-size:18px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  color:#04130b; background:var(--grad-brand); box-shadow:0 6px 18px rgba(22,168,98,.35); margin-bottom:16px; }
.step h3 { font-size:17px; margin:0 0 6px; }
.step p { font-size:14px; color:var(--ink-2); margin:0; }
.step:not(:last-child)::after { content:""; position:absolute; top:48px; right:-12px; width:24px; height:2px; background:linear-gradient(90deg,var(--brand),transparent); z-index:1; }
@media (max-width:900px){ .step::after{ display:none; } }

/* About — image + prose split */
.about-split { display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(24px,3.5vw,48px); align-items:start; }
@media (max-width:880px){ .about-split{ grid-template-columns:1fr; } }
.about-media { position:sticky; top:calc(var(--header-h) + 16px); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(67,224,138,.22); box-shadow:var(--shadow-card); }
.about-media img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; display:block; }
.about-media .am-cap { position:absolute; left:0; right:0; bottom:0; padding:22px;
  background:linear-gradient(180deg, transparent, rgba(5,17,11,.92)); }
.about-media .am-cap .e { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand-bright); }
.about-media .am-cap .e svg { width:15px; height:15px; }
.about-media .am-cap p { margin:6px 0 0; color:#fff; font-weight:600; font-size:15px; }
@media (max-width:880px){ .about-media{ position:static; } .about-media img{ aspect-ratio:16/9; } }
.about-split .prose { max-width:none; margin:0; padding:0; }
.about-split .prose > h2:first-child, .about-split .prose > h1:first-child { margin-top:0; }

/* ===========================================================
   Static / legal pages
   =========================================================== */
.page-hero { position:relative; overflow:hidden; border-bottom:1px solid rgba(67,224,138,.1); text-align:center; }
.page-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(34px) brightness(.5); transform:scale(1.25); opacity:.3; z-index:0; }
.page-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,17,11,.6), rgba(5,17,11,.92)),radial-gradient(600px 300px at 50% 0,rgba(22,168,98,.2),transparent 60%); z-index:1; }
.page-hero-inner { position:relative; z-index:2; padding-block:clamp(48px,7vw,84px); }
.page-hero h1 { font-size:clamp(28px,4.2vw,46px); margin:0; }
.prose { max-width:840px; margin-inline:auto; padding-block:clamp(36px,5vw,60px); }
.prose h2 { font-size:clamp(20px,2.5vw,28px); margin:36px 0 12px; }
.prose h2::before { content:""; display:block; width:42px; height:3px; border-radius:999px; background:var(--grad-brand); margin-bottom:12px; }
.prose h3 { font-size:19px; color:var(--brand-bright); margin:24px 0 8px; }
.prose p, .prose li { color:var(--ink-2); }
.prose a { text-decoration:underline; text-underline-offset:3px; }

/* ---------- Responsible gambling band ---------- */
.warn-band { background:linear-gradient(180deg, rgba(255,154,61,.07), rgba(42,21,18,.4)); border-block:1px solid rgba(255,154,61,.16); }
.warn-band .container { padding-block:clamp(36px,5vw,56px); }
.warn-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.warn-head svg { width:34px; height:34px; color:var(--saffron); flex:none; }
.warn-head h2 { margin:0; font-size:clamp(20px,2.5vw,28px); color:#fff; }
.warn-band p { color:#e7d6cd; max-width:820px; }
.tip-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.tip-chip { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-2);
  background:rgba(255,255,255,.04); border:1px solid var(--surface-4); border-radius:999px; padding:8px 15px; }
.tip-chip svg { width:16px; height:16px; color:var(--saffron-bright); }

/* ===========================================================
   FOOTER (redesigned) — bigger logo
   =========================================================== */
.site-footer { border-top:1px solid rgba(67,224,138,.12); background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); padding-top:clamp(44px,5vw,64px); }
.footer-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(22,168,98,.16), rgba(11,125,70,.06)); border:1px solid rgba(67,224,138,.22);
  border-radius:var(--radius-lg); padding:clamp(22px,3vw,34px); margin-bottom:clamp(34px,4vw,52px); }
.footer-cta h3 { font-size:clamp(20px,2.4vw,28px); margin:0 0 6px; }
.footer-cta p { color:var(--ink-2); margin:0; font-size:14.5px; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:38px; }
.footer-brand .brand { margin-bottom:16px; align-items:center; }
.footer-brand .brand img { width:64px; height:64px; border-radius:16px; }
.footer-brand .brand .bt .nm { font-size:27px; }
.footer-brand p { color:var(--muted); font-size:14px; max-width:340px; margin-bottom:16px; }
.footer-trust { display:flex; flex-wrap:wrap; gap:8px; }
.footer-trust span { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink-2);
  background:rgba(255,255,255,.04); border:1px solid var(--surface-4); border-radius:999px; padding:6px 12px; }
.footer-trust svg { width:14px; height:14px; color:var(--brand-bright); }
.footer-col h4 { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-bright); margin:0 0 16px; }
.footer-col ul { list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.footer-col a { color:var(--ink-2); font-size:14.5px; }
.footer-col a:hover { color:#fff; }
.footer-warn { display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; font-family:var(--font-head); font-weight:700;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--saffron-bright); border:1px solid rgba(255,154,61,.3);
  background:rgba(255,154,61,.07); border-radius:14px; padding:14px; margin-bottom:24px; }
.footer-warn svg { width:20px; height:20px; flex:none; }
.footer-bottom { text-align:center; color:var(--muted); font-size:13px; border-top:1px solid rgba(255,255,255,.06); padding-block:22px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:30px;} .footer-brand{ grid-column:1/-1;} }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr;} }

/* ---------- Scroll-to-top ---------- */
.to-top { position:fixed; right:22px; bottom:22px; z-index:90; width:48px; height:48px; border-radius:50%; border:1px solid var(--brand);
  background:rgba(5,17,11,.88); backdrop-filter:blur(8px); color:var(--brand-bright); cursor:pointer; display:grid; place-items:center;
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; transition:all .25s ease; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { background:var(--brand); color:#04130b; }
.to-top svg { width:22px; height:22px; }
@media (max-width:980px){ .page-apk .to-top{ bottom:88px; } }

/* ---------- Reveal ---------- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }