/* ================================================================
   DIPESH MARKET v6 — FULLY RESPONSIVE (Mobile + Desktop)
   Mobile-first approach, fluid layouts, touch-optimised
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

/* ──────────────────────────────────────────────
   CSS VARIABLES — LIGHT THEME (default)
────────────────────────────────────────────── */
:root {
  --brand:       #dc0023;
  --brand-d:     #b8001d;
  --brand-dim:   rgba(220,0,35,0.08);
  --brand-glow:  rgba(220,0,35,0.20);

  --bg:          #f5f4f0;
  --bg-alt:      #ffffff;
  --surface:     #ffffff;
  --surface2:    #f0efe9;
  --surface3:    #e8e7e0;

  --border:      rgba(0,0,0,0.08);
  --border-md:   rgba(0,0,0,0.13);

  --text:        #111111;
  --text-2:      #555555;
  --text-3:      #aaaaaa;

  --nav-bg:      rgba(245,244,240,0.94);
  --shadow-s:    0 1px 3px rgba(0,0,0,0.06),0 2px 8px rgba(0,0,0,0.04);
  --shadow-m:    0 4px 20px rgba(0,0,0,0.08);
  --shadow-h:    0 12px 40px rgba(220,0,35,0.14),0 2px 8px rgba(0,0,0,0.06);

  --f-head:  'Outfit', sans-serif;
  --f-body:  'Plus Jakarta Sans', sans-serif;
  --f-mono:  'JetBrains Mono', monospace;
  --ease:    cubic-bezier(0.22,1,0.36,1);
  --t:       0.22s;
  --r:       12px;
  --r-lg:    18px;
  --r-xl:    24px;
}

/* ──────────────────────────────────────────────
   DARK THEME
────────────────────────────────────────────── */
.dark {
  --brand:       #ff1a3d;
  --brand-d:     #e8132a;
  --brand-dim:   rgba(255,26,61,0.11);
  --brand-glow:  rgba(255,26,61,0.26);

  --bg:          #090909;
  --bg-alt:      #0f0f0f;
  --surface:     #111111;
  --surface2:    #1a1a1a;
  --surface3:    #242424;

  --border:      rgba(255,255,255,0.07);
  --border-md:   rgba(255,255,255,0.13);

  --text:        #f2ede6;
  --text-2:      #999080;
  --text-3:      #4a4540;

  --nav-bg:      rgba(9,9,9,0.94);
  --shadow-s:    0 1px 3px rgba(0,0,0,0.5),0 2px 8px rgba(0,0,0,0.4);
  --shadow-m:    0 4px 20px rgba(0,0,0,0.5);
  --shadow-h:    0 12px 40px rgba(255,26,61,0.18),0 2px 8px rgba(0,0,0,0.5);
}

/* ──────────────────────────────────────────────
   RESET + BASE
────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family:var(--f-body);
  background:var(--bg); color:var(--text);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}
body::-webkit-scrollbar { width:4px }
body::-webkit-scrollbar-thumb { background:var(--brand); border-radius:4px }
a { text-decoration:none; color:inherit }
button { cursor:pointer; font-family:var(--f-body); border:none; background:none }
img { display:block; max-width:100%; height:auto }
input,textarea,select { font-family:var(--f-body) }

/* ──────────────────────────────────────────────
   SCROLL PROGRESS
────────────────────────────────────────────── */
.scroll-prog { position:fixed; top:0; left:0; right:0; height:3px; z-index:9999 }
#scrollBar {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--brand),#ff6b6b,var(--brand));
  background-size:200%; animation:shimmer 2s linear infinite;
  transition:width .06s linear; box-shadow:0 0 8px var(--brand-glow);
}
@keyframes shimmer { 0%{background-position:0%} 100%{background-position:200%} }

/* ──────────────────────────────────────────────
   TICKER
────────────────────────────────────────────── */
.ticker-bar {
  background:var(--brand); padding:7px 0; overflow:hidden;
  position:relative; z-index:10;
}
.dark .ticker-bar { background:#0f0f0f; border-bottom:1px solid rgba(220,0,35,.25) }
.ticker-inner { display:flex; align-items:center; gap:8px; padding:0 16px; overflow:hidden }
.t-dot {
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.8); animation:blink 1.4s ease infinite;
}
.dark .t-dot { background:var(--brand) }
#tickerTxt {
  white-space:nowrap; display:inline-block;
  animation:tickMove 32s linear infinite;
  color:rgba(255,255,255,.95); font-size:.72rem; font-weight:600;
  font-family:var(--f-head); letter-spacing:.04em;
}
.dark #tickerTxt { color:var(--brand) }
#tickerTxt:hover { animation-play-state:paused }
@keyframes tickMove { 0%{transform:translateX(100vw)} 100%{transform:translateX(-100%)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ──────────────────────────────────────────────
   NAV
────────────────────────────────────────────── */
.site-nav {
  position:sticky; top:0; z-index:500;
  background:var(--nav-bg);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-wrap {
  max-width:1360px; margin:0 auto;
  display:flex; align-items:center; gap:12px;
  padding:0 16px; height:60px;
}
/* Brand */
.nav-brand { display:flex; align-items:center; gap:9px; flex-shrink:0; text-decoration:none }
.brand-ico {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,#ff1a3d,#9a0010);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 12px var(--brand-glow);
  transition:transform var(--t) var(--ease);
}
.nav-brand:hover .brand-ico { transform:rotate(-8deg) scale(1.08) }
.brand-ico svg { width:17px; height:17px }
.brand-name {
  font-family:var(--f-head); font-size:1.08rem; font-weight:800;
  letter-spacing:-.02em; color:var(--text);
}
.brand-name b { color:var(--brand); font-weight:800 }

/* Search */
.nav-search-wrap { flex:1; position:relative; max-width:400px }
.nav-search-wrap .s-ico {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; stroke:var(--text-3); pointer-events:none;
}
.nav-search {
  width:100%; height:40px; padding:0 36px 0 38px;
  background:var(--surface2); border:1.5px solid var(--border);
  border-radius:100px; color:var(--text); font-size:.84rem; outline:none;
  transition:border-color var(--t),box-shadow var(--t);
}
.nav-search:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-dim) }
.nav-search::placeholder { color:var(--text-3) }
#clrBtn {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  background:var(--text-3); color:var(--surface); font-size:.58rem;
  display:none; align-items:center; justify-content:center;
  border:none; transition:background var(--t);
}
#clrBtn:hover { background:var(--brand) }

/* Nav actions */
.nav-actions { display:flex; align-items:center; gap:6px; flex-shrink:0 }

/* Theme toggle */
.theme-tog {
  width:52px; height:28px; border-radius:14px;
  background:var(--surface2); border:1.5px solid var(--border);
  position:relative; cursor:pointer; flex-shrink:0;
  transition:background var(--t),border-color var(--t);
}
.theme-tog:hover { border-color:var(--brand) }
.dark .theme-tog { background:var(--surface3); border-color:rgba(255,26,61,.3) }
.tog-thumb {
  position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:white; box-shadow:0 1px 4px rgba(0,0,0,.2);
  transition:transform .28s var(--ease);
  display:flex; align-items:center; justify-content:center; font-size:.72rem;
}
.dark .tog-thumb { transform:translateX(24px); background:#1f1f1f }

/* Icon btns */
.nav-ico-btn {
  width:38px; height:38px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--surface2);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-2); transition:all var(--t); position:relative;
  flex-shrink:0;
}
.nav-ico-btn:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-dim) }
.nav-ico-btn svg { width:16px; height:16px; stroke:currentColor; fill:none }
#wCount {
  position:absolute; top:-5px; right:-5px;
  min-width:16px; height:16px; border-radius:8px;
  background:var(--brand); color:white;
  font-size:.58rem; font-weight:700; font-family:var(--f-head);
  display:none; align-items:center; justify-content:center;
  padding:0 3px; border:2px solid var(--bg);
}
.nav-cta {
  display:flex; align-items:center; gap:5px;
  background:linear-gradient(135deg,#ff1a3d,#9a0010);
  color:white; height:38px; padding:0 16px; border-radius:100px;
  font-family:var(--f-head); font-size:.8rem; font-weight:700;
  box-shadow:0 3px 12px var(--brand-glow);
  transition:all var(--t); white-space:nowrap;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 5px 18px var(--brand-glow) }
.nav-cta svg { width:13px; height:13px; stroke:white; fill:none }
/* Hide contact text on small screens */
.cta-txt { display:none }

/* Mobile hamburger */
.mob-menu-btn {
  display:none; width:38px; height:38px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--surface2);
  align-items:center; justify-content:center; color:var(--text-2);
  flex-direction:column; gap:5px; flex-shrink:0;
}
.mob-menu-btn span {
  display:block; width:18px; height:2px;
  background:currentColor; border-radius:2px;
  transition:all .25s ease;
}
/* Mobile search (hidden by default, shown when search toggled) */
.mob-search-bar {
  display:none; padding:10px 16px; border-top:1px solid var(--border);
  background:var(--nav-bg);
}
.mob-search-bar .nav-search-wrap { max-width:100% }
.mob-search-bar.open { display:block }

/* ──────────────────────────────────────────────
   HERO
────────────────────────────────────────────── */
.hero {
  padding:60px 16px 48px; text-align:center;
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(900px,100%); height:100%;
  background:radial-gradient(ellipse 70% 60% at 50% 20%,
    rgba(220,0,35,.06) 0%, transparent 70%);
  pointer-events:none;
}
.hero::after {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:48px 48px; pointer-events:none; opacity:.5;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,black,transparent);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,black,transparent);
}
.hero-in { position:relative; z-index:1; max-width:760px; margin:0 auto }
.hero-badge {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--brand-dim); border:1px solid rgba(220,0,35,.18);
  color:var(--brand); padding:5px 14px; border-radius:100px;
  font-size:.7rem; font-weight:700; font-family:var(--f-head);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:22px;
  animation:fadeUp .55s ease both;
}
.badge-dot { width:5px; height:5px; background:var(--brand); border-radius:50% }
.hero h1 {
  font-family:var(--f-head); font-size:clamp(2rem,6vw,4.4rem);
  font-weight:900; line-height:1.07; letter-spacing:-.04em;
  margin-bottom:18px; color:var(--text);
  animation:fadeUp .55s .08s ease both;
}
.h1-red {
  background:linear-gradient(90deg,var(--brand),#ff6b6b,var(--brand));
  background-size:200%; -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  animation:fadeUp .55s .08s ease both, grad 4s .7s linear infinite;
}
@keyframes grad { 0%{background-position:0%} 100%{background-position:200%} }
.h1-muted { color:var(--text-2) }
.hero-sub {
  font-size:clamp(.9rem,2.5vw,1.05rem); color:var(--text-2); line-height:1.7;
  max-width:520px; margin:0 auto 32px;
  animation:fadeUp .55s .15s ease both;
}
.hero-btns {
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  animation:fadeUp .55s .22s ease both;
}
.btn-primary {
  display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(135deg,#ff1a3d,#9a0010);
  color:white; padding:13px 26px; border-radius:12px;
  font-family:var(--f-head); font-size:.88rem; font-weight:700;
  box-shadow:0 4px 20px var(--brand-glow); transition:all var(--t); border:none;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px var(--brand-glow) }
.btn-primary svg { width:15px; height:15px; stroke:white; fill:none }
.btn-outline {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surface); border:1.5px solid var(--border-md);
  color:var(--text-2); padding:13px 26px; border-radius:12px;
  font-family:var(--f-head); font-size:.88rem; font-weight:700;
  transition:all var(--t);
}
.btn-outline:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-dim) }
/* Trust badges */
.hero-trust {
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 20px;
  margin-top:40px; padding-top:32px; border-top:1px solid var(--border);
  animation:fadeUp .55s .28s ease both;
}
.trust-it {
  display:flex; align-items:center; gap:6px;
  font-size:.75rem; color:var(--text-3); font-weight:500;
}
.trust-it svg { width:13px; height:13px; stroke:var(--brand); fill:none; flex-shrink:0 }

/* ──────────────────────────────────────────────
   STATS
────────────────────────────────────────────── */
.stats-sec { max-width:1360px; margin:0 auto 48px; padding:0 16px }
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-s);
}
.stat-box {
  padding:22px 16px; text-align:center;
  border-right:1px solid var(--border); transition:background var(--t);
}
.stat-box:last-child { border-right:none }
.stat-box:hover { background:var(--brand-dim) }
.sn { display:block; font-family:var(--f-head); font-size:1.8rem; font-weight:800; color:var(--brand); line-height:1; margin-bottom:4px }
.sl { font-size:.65rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.09em; font-weight:600 }

/* ──────────────────────────────────────────────
   FEATURED
────────────────────────────────────────────── */
.feat-sec { max-width:1360px; margin:0 auto 48px; padding:0 16px }
.sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.sec-title { font-family:var(--f-head); font-size:1.3rem; font-weight:800; letter-spacing:-.02em; color:var(--text) }
.sec-title em { font-style:normal; color:var(--brand) }
.see-all {
  display:flex; align-items:center; gap:4px;
  font-size:.76rem; color:var(--text-2); font-weight:600;
  font-family:var(--f-head); border:1px solid var(--border);
  border-radius:8px; padding:6px 12px; background:transparent; transition:all var(--t);
}
.see-all:hover { border-color:var(--brand); color:var(--brand) }
.see-all svg { width:11px; height:11px; stroke:currentColor; fill:none }
#featGrid {
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.fc {
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  cursor:pointer; transition:all var(--t); box-shadow:var(--shadow-s);
}
.fc:hover { border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--shadow-h) }
.fc-img { height:110px; overflow:hidden; position:relative }
.fc-img img,.fc-img .thumb-art { width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease) }
.fc:hover .fc-img img,.fc:hover .fc-img .thumb-art { transform:scale(1.06) }
.fc-body { padding:11px 12px }
.fc-tag { font-size:.6rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; font-weight:600; display:block; margin-bottom:3px }
.fc-name { font-family:var(--f-head); font-size:.85rem; font-weight:700; color:var(--text); margin-bottom:3px; line-height:1.2 }
.fc-price { font-family:var(--f-mono); font-size:.78rem; font-weight:700; color:var(--brand) }

/* ──────────────────────────────────────────────
   FILTER + SORT
────────────────────────────────────────────── */
.filter-sec { max-width:1360px; margin:0 auto 20px; padding:0 16px }
.filter-wrap { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.chips { display:flex; gap:7px; flex-wrap:wrap; flex:1 }
.chip {
  padding:7px 14px; border-radius:100px;
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--text-2); font-family:var(--f-head); font-size:.73rem;
  font-weight:600; cursor:pointer; transition:all var(--t); white-space:nowrap;
}
.chip:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-dim) }
.chip.on { background:var(--brand); color:white; border-color:var(--brand); box-shadow:0 2px 10px var(--brand-glow) }
.sort-wrap { display:flex; align-items:center; gap:6px; flex-shrink:0 }
.sort-lbl { font-size:.7rem; color:var(--text-3); font-weight:500; white-space:nowrap }
.sort-sel {
  height:36px; padding:0 28px 0 11px; border-radius:9px;
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--text-2); font-size:.78rem; cursor:pointer; outline:none;
  transition:border-color var(--t); appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center; background-size:13px;
}
.sort-sel:focus { border-color:var(--brand) }

/* ──────────────────────────────────────────────
   SECTION HEADING
────────────────────────────────────────────── */
.mkt-head { max-width:1360px; margin:0 auto 18px; padding:0 16px; display:flex; align-items:center; gap:10px }
.mkt-head h2 { font-family:var(--f-head); font-size:1.3rem; font-weight:800; letter-spacing:-.02em; color:var(--text) }
#appCnt { font-size:.7rem; color:var(--text-3); background:var(--surface2); border:1px solid var(--border); padding:2px 9px; border-radius:100px; font-family:var(--f-mono) }

/* ──────────────────────────────────────────────
   APP GRID
────────────────────────────────────────────── */
#appGrid {
  max-width:1360px; margin:0 auto; padding:0 16px 72px;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(20px) }
  to   { opacity:1; transform:translateY(0) }
}

/* ──────────────────────────────────────────────
   APP CARD
────────────────────────────────────────────── */
.app-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
  animation:cardIn .4s var(--ease) both;
  box-shadow:var(--shadow-s);
  /* Prevent accidental tap highlights on mobile */
  -webkit-tap-highlight-color:transparent;
}
.app-card:hover {
  transform:translateY(-5px); box-shadow:var(--shadow-h);
  border-color:rgba(220,0,35,.22);
}

/* Thumb */
.card-thumb {
  position:relative; height:176px; overflow:hidden;
  background:var(--surface2); flex-shrink:0;
}
.thumb-img,.thumb-art {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease);
}
.app-card:hover .thumb-img,.app-card:hover .thumb-art { transform:scale(1.04) }
.thumb-ov {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.52) 0%,transparent 55%);
  pointer-events:none;
}
.c-tag {
  position:absolute; top:11px; left:11px;
  padding:3px 10px; border-radius:100px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);
  color:white; font-size:.6rem; font-weight:700;
  font-family:var(--f-head); letter-spacing:.06em; text-transform:uppercase;
}
.c-badge {
  position:absolute; top:11px; right:46px;
  padding:3px 7px; border-radius:6px;
  font-size:.57rem; font-weight:800; font-family:var(--f-head);
  letter-spacing:.07em; text-transform:uppercase;
}
.b-new  { background:#1d4ed8; color:white }
.b-hot  { background:#dc2626; color:white; animation:bpulse 2s ease infinite }
.b-pop  { background:#b45309; color:white }
.b-sale { background:#15803d; color:white }
@keyframes bpulse {
  0%,100% { box-shadow:0 0 0 0 rgba(220,38,38,.5) }
  50%      { box-shadow:0 0 0 5px transparent }
}
.wish-btn {
  position:absolute; top:9px; right:9px;
  width:32px; height:32px; border-radius:9px;
  background:rgba(0,0,0,.5); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.75); transition:all var(--t);
  -webkit-tap-highlight-color:transparent;
}
.wish-btn:hover,.wish-btn:active { background:rgba(220,0,35,.35); color:white }
.wish-btn.wl { background:var(--brand); color:white; border-color:var(--brand) }
.wish-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; transition:fill var(--t) }
.wish-btn.wl svg { fill:white }
.c-views {
  position:absolute; bottom:10px; right:10px;
  display:flex; align-items:center; gap:3px;
  font-size:.6rem; color:rgba(255,255,255,.5); font-family:var(--f-mono);
}
.c-views svg { width:9px; height:9px; stroke:currentColor; fill:none }

/* APK BADGE on thumb */
.apk-thumb-badge {
  position:absolute; bottom:10px; left:10px;
  display:flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:100px;
  background:rgba(34,197,94,.2); border:1px solid rgba(34,197,94,.4);
  backdrop-filter:blur(8px);
  color:#4ade80; font-size:.6rem; font-weight:700;
  font-family:var(--f-head); letter-spacing:.05em;
}
.apk-thumb-badge svg { width:9px; height:9px; stroke:currentColor; fill:none }

/* Card body */
.card-body { padding:16px; flex:1; display:flex; flex-direction:column; gap:0 }

.c-rating { display:flex; align-items:center; gap:5px; margin-bottom:8px }
.stars { display:flex; gap:1px }
.star { font-size:.7rem }
.star.f { color:#f59e0b }
.star.h { color:#f59e0b; opacity:.5 }
.star.e { color:var(--text-3) }
.r-val { font-size:.73rem; font-weight:700; color:var(--text); font-family:var(--f-mono) }
.r-cnt { font-size:.67rem; color:var(--text-3) }

.c-name {
  font-family:var(--f-head); font-size:1rem; font-weight:800;
  letter-spacing:-.015em; color:var(--text); margin-bottom:6px; line-height:1.2;
}
.c-desc {
  font-size:.8rem; color:var(--text-2); line-height:1.58; flex:1; margin-bottom:13px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Price box */
.price-box {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 13px; margin-bottom:12px;
  background:var(--surface2); border:1px solid var(--border); border-radius:11px;
  transition:background var(--t),border-color var(--t);
}
.app-card:hover .price-box { background:var(--brand-dim); border-color:rgba(220,0,35,.18) }
.p-lbl { font-size:.6rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin-bottom:1px }
.p-val { font-family:var(--f-mono); font-size:1rem; font-weight:700; color:var(--brand) }
.p-right { text-align:right }
.p-right-v { font-size:.72rem; color:var(--text-2); font-family:var(--f-mono) }

/* Action buttons grid */
.card-acts { display:grid; gap:7px; margin-bottom:11px }
/* Default: 2 columns (buy + demo) */
.card-acts.cols-2 { grid-template-columns:1fr 1fr }
/* With APK: 3 columns */
.card-acts.cols-3 { grid-template-columns:1fr 1fr; }
/* Buy button */
.btn-buy {
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:linear-gradient(135deg,#ff1a3d,#9a0010);
  color:white; border:none; border-radius:10px; height:42px;
  font-family:var(--f-head); font-size:.78rem; font-weight:700;
  box-shadow:0 3px 14px var(--brand-glow); transition:all var(--t);
  -webkit-tap-highlight-color:transparent;
}
.btn-buy:hover,.btn-buy:active { transform:translateY(-1px); box-shadow:0 6px 20px var(--brand-glow) }
.btn-buy svg { width:13px; height:13px; stroke:white; fill:none }
/* Demo button */
.btn-demo {
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:transparent; border:1.5px solid var(--border);
  color:var(--text-2); border-radius:10px; height:42px;
  font-family:var(--f-head); font-size:.78rem; font-weight:700;
  transition:all var(--t); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.btn-demo:hover,.btn-demo:active { border-color:var(--brand); color:var(--brand); background:var(--brand-dim) }
.btn-demo svg { width:13px; height:13px; stroke:currentColor; fill:none }

/* ★ APK DOWNLOAD BUTTON ★ */
.btn-apk {
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(34,197,94,.1); border:1.5px solid rgba(34,197,94,.35);
  color:#16a34a; border-radius:10px; height:42px;
  font-family:var(--f-head); font-size:.78rem; font-weight:700;
  transition:all var(--t); text-decoration:none; grid-column:1 / -1;
  -webkit-tap-highlight-color:transparent;
}
.dark .btn-apk { color:#4ade80; background:rgba(74,222,128,.08); border-color:rgba(74,222,128,.25) }
.btn-apk:hover,.btn-apk:active {
  background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.6);
  transform:translateY(-1px); box-shadow:0 4px 16px rgba(34,197,94,.2);
}
.btn-apk svg { width:13px; height:13px; stroke:currentColor; fill:none }
.apk-size { font-size:.65rem; opacity:.7; font-family:var(--f-mono) }

/* Interactions */
.card-ints {
  display:flex; align-items:center; gap:2px;
  padding-top:10px; border-top:1px solid var(--border); margin-bottom:9px;
}
.int-btn {
  display:flex; align-items:center; gap:4px;
  padding:5px 8px; border-radius:7px; border:none;
  background:transparent; color:var(--text-3);
  font-size:.7rem; font-weight:500; transition:all var(--t);
  -webkit-tap-highlight-color:transparent;
}
.int-btn:hover,.int-btn:active { background:var(--surface2); color:var(--text-2) }
.int-btn svg { width:13px; height:13px; stroke:currentColor; fill:none }
.int-btn.liked { color:var(--brand) }
.int-btn.liked svg { fill:var(--brand); stroke:var(--brand) }
.int-btn.pop { animation:heartPop .3s var(--ease) }
@keyframes heartPop { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }
.int-gap { flex:1 }
.ico-btn {
  width:30px; height:30px; border-radius:7px;
  border:1px solid var(--border); background:transparent;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3); transition:all var(--t);
}
.ico-btn:hover,.ico-btn:active { border-color:var(--brand); color:var(--brand); background:var(--brand-dim) }
.ico-btn svg { width:12px; height:12px; stroke:currentColor; fill:none }

/* User rating */
.u-rate { display:flex; align-items:center; gap:3px; padding-top:8px; border-top:1px solid var(--border) }
.s-btn { background:none; border:none; padding:1px; transition:transform var(--t); opacity:.38; -webkit-tap-highlight-color:transparent }
.s-btn:hover,.s-btn:active,.s-btn.on { opacity:1; transform:scale(1.25) }
.rate-lbl { font-size:.6rem; color:var(--text-3); margin-left:3px; font-style:italic }

/* No results */
#noRes {
  display:none; flex-direction:column; align-items:center;
  padding:80px 16px; text-align:center; max-width:340px; margin:0 auto;
}
#noRes svg { width:52px; height:52px; stroke:var(--text-3); fill:none; margin-bottom:14px; opacity:.4 }
#noRes h3 { font-family:var(--f-head); font-size:1rem; color:var(--text-2) }

/* ──────────────────────────────────────────────
   WISHLIST PANEL
────────────────────────────────────────────── */
#wishPanel { position:fixed; inset:0; z-index:8000; pointer-events:none }
#wishPanel.open { pointer-events:all }
.w-ov {
  position:absolute; inset:0; background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px); opacity:0; transition:opacity var(--t);
}
#wishPanel.open .w-ov { opacity:1 }
.w-drawer {
  position:absolute; top:0; right:0; bottom:0; width:min(340px,100vw);
  background:var(--surface); border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .35s var(--ease);
  box-shadow:-8px 0 40px rgba(0,0,0,.12);
}
.dark .w-drawer { box-shadow:-8px 0 60px rgba(0,0,0,.6) }
#wishPanel.open .w-drawer { transform:none }
.w-hdr {
  padding:18px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.w-title { font-family:var(--f-head); font-size:.95rem; font-weight:800; color:var(--text); display:flex; align-items:center; gap:7px }
.w-title svg { width:15px; height:15px; stroke:var(--brand); fill:none }
.w-close {
  width:30px; height:30px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface2);
  color:var(--text-2); font-size:.8rem;
  display:flex; align-items:center; justify-content:center; transition:all var(--t);
}
.w-close:hover { border-color:var(--brand); color:var(--brand) }
.w-body { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px }
.w-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 11px; border-radius:10px;
  background:var(--surface2); border:1px solid var(--border);
}
.w-ico { font-size:1.35rem; flex-shrink:0 }
.w-info { flex:1; min-width:0 }
.w-name { font-family:var(--f-head); font-size:.82rem; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.w-price { font-size:.73rem; color:var(--brand); font-family:var(--f-mono); font-weight:700; margin-top:1px }
.w-rm {
  width:24px; height:24px; border-radius:6px;
  border:1px solid var(--border); background:transparent;
  color:var(--text-3); font-size:.62rem;
  display:flex; align-items:center; justify-content:center; transition:all var(--t); flex-shrink:0;
}
.w-rm:hover { background:var(--brand); border-color:var(--brand); color:white }
.w-empty { text-align:center; padding:44px 16px; color:var(--text-3) }
.w-empty span { font-size:2.4rem; display:block; margin-bottom:10px }
.w-empty p { font-size:.84rem; line-height:1.65 }

/* ──────────────────────────────────────────────
   MODALS
────────────────────────────────────────────── */
.modal-bg {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  z-index:9000; align-items:center; justify-content:center; padding:16px;
}
.modal-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); width:100%; max-width:480px; max-height:88vh;
  overflow:hidden; display:flex; flex-direction:column;
  transform:translateY(16px) scale(.96); opacity:0;
  transition:all .3s var(--ease);
  box-shadow:0 20px 60px rgba(0,0,0,.15);
}
.dark .modal-box { box-shadow:0 20px 60px rgba(0,0,0,.65) }
.modal-box.in { transform:none; opacity:1 }
.m-hdr {
  padding:16px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.m-hdr h3 { font-family:var(--f-head); font-size:.92rem; font-weight:800; color:var(--text) }
.m-cls {
  width:28px; height:28px; border-radius:7px;
  border:1px solid var(--border); background:var(--surface2);
  color:var(--text-2); font-size:.78rem;
  display:flex; align-items:center; justify-content:center; transition:all var(--t);
}
.m-cls:hover { border-color:var(--brand); color:var(--brand) }
.cmt-list { flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:12px }
.cmt-list::-webkit-scrollbar { width:3px }
.cmt-list::-webkit-scrollbar-thumb { background:var(--brand); border-radius:3px }
.cmt-empty { text-align:center; padding:36px; color:var(--text-3) }
.cmt-empty span { font-size:2rem; display:block; margin-bottom:7px }
.cmt-item { display:flex; gap:10px; animation:cardIn .22s ease both }
.cmt-av {
  width:32px; height:32px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-head); font-weight:800; font-size:.8rem;
  flex-shrink:0; color:white;
}
.cmt-body { flex:1 }
.cmt-top { display:flex; align-items:baseline; gap:7px; margin-bottom:3px }
.cmt-name { font-weight:700; font-size:.8rem; font-family:var(--f-head); color:var(--text) }
.cmt-time { font-size:.66rem; color:var(--text-3) }
.cmt-txt { font-size:.8rem; color:var(--text-2); line-height:1.55; word-break:break-word }
.cmt-form {
  padding:12px 18px 16px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px; flex-shrink:0;
}
.cmt-form input,.cmt-form textarea {
  width:100%; background:var(--surface2); border:1.5px solid var(--border);
  border-radius:10px; padding:9px 12px; color:var(--text);
  font-size:.83rem; outline:none; resize:none;
  transition:border-color var(--t),box-shadow var(--t);
}
.cmt-form input:focus,.cmt-form textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-dim) }
.cmt-form input::placeholder,.cmt-form textarea::placeholder { color:var(--text-3) }
.cmt-form textarea { min-height:66px }
.cmt-form input.shake { animation:shake .36s ease; border-color:var(--brand) }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }
.cmt-sub {
  background:linear-gradient(135deg,#ff1a3d,#9a0010);
  color:white; border:none; padding:10px; border-radius:10px;
  font-family:var(--f-head); font-size:.83rem; font-weight:700;
  transition:all var(--t); box-shadow:0 3px 12px var(--brand-glow);
}
.cmt-sub:hover { opacity:.9; transform:translateY(-1px) }

/* Buy modal */
.buy-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); width:100%; max-width:450px;
  overflow:hidden; transform:translateY(16px) scale(.96); opacity:0;
  transition:all .3s var(--ease);
  box-shadow:0 20px 60px rgba(0,0,0,.15);
}
.dark .buy-box { box-shadow:0 20px 60px rgba(0,0,0,.65) }
.buy-box.in { transform:none; opacity:1 }
.buy-hdr {
  padding:20px 20px 16px;
  background:linear-gradient(135deg,var(--brand-dim),transparent);
  border-bottom:1px solid var(--border); position:relative;
}
.buy-hdr h3 { font-family:var(--f-head); font-size:1.05rem; font-weight:800; color:var(--text); margin-bottom:3px }
.buy-hdr p { font-size:.78rem; color:var(--text-2) }
.buy-cls {
  position:absolute; top:14px; right:14px;
  width:28px; height:28px; border-radius:7px;
  border:1px solid var(--border); background:var(--surface2);
  color:var(--text-2); font-size:.78rem;
  display:flex; align-items:center; justify-content:center; transition:all var(--t);
}
.buy-cls:hover { border-color:var(--brand); color:var(--brand) }
.buy-body { padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px }
.buy-lbl { font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); font-family:var(--f-head); margin-top:3px }
.c-opt {
  display:flex; align-items:center; gap:12px; padding:12px;
  border-radius:11px; border:1.5px solid var(--border);
  background:var(--surface2); text-decoration:none; color:var(--text); transition:all var(--t);
}
.c-opt:hover { border-color:var(--brand); background:var(--brand-dim); color:var(--brand) }
.c-opt:hover .co-i { background:var(--brand); border-color:var(--brand) }
.c-opt:hover .co-i svg { stroke:white }
.co-i {
  width:38px; height:38px; border-radius:9px;
  background:var(--surface3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--t);
}
.co-i svg { width:17px; height:17px; stroke:var(--brand); fill:none; transition:stroke var(--t) }
.co-i.wa { background:rgba(37,211,102,.1); border-color:rgba(37,211,102,.2) }
.co-i.wa svg { stroke:#22c55e }
.c-opt:hover .co-i.wa { background:#22c55e; border-color:#22c55e }
.c-opt:hover .co-i.wa svg { stroke:white }
.co-t { flex:1; min-width:0 }
.co-ttl { font-family:var(--f-head); font-size:.82rem; font-weight:700; margin-bottom:1px; color:var(--text) }
.co-val { font-size:.72rem; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.buy-div { height:1px; background:var(--border); margin:2px 0 }

/* Toast */
.toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(12px);
  background:var(--text); color:var(--surface);
  padding:10px 20px; border-radius:100px;
  font-size:.8rem; font-weight:700; font-family:var(--f-head);
  box-shadow:0 4px 24px rgba(0,0,0,.15);
  opacity:0; transition:all .26s var(--ease);
  z-index:99999; white-space:nowrap; pointer-events:none;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0) }

/* Particles */
.hprt {
  position:fixed; pointer-events:none; z-index:99998;
  width:7px; height:7px; background:var(--brand); border-radius:50%;
  animation:pfly .65s ease-out both;
}
@keyframes pfly { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)} }

/* Back to top */
#btt {
  position:fixed; bottom:24px; right:20px; z-index:500;
  width:42px; height:42px; border-radius:11px;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--brand); box-shadow:var(--shadow-m);
  opacity:0; transform:translateY(10px);
  transition:all var(--t); pointer-events:none;
}
#btt.vis { opacity:1; transform:none; pointer-events:all }
#btt:hover { background:var(--brand); color:white; border-color:var(--brand) }
#btt svg { width:15px; height:15px; stroke:currentColor; fill:none }

/* ──────────────────────────────────────────────
   FOOTER
────────────────────────────────────────────── */
.site-footer {
  background:var(--surface); border-top:1px solid var(--border);
  padding:48px 16px 28px;
}
.footer-in { max-width:1360px; margin:0 auto }
.footer-grid {
  display:grid; gap:36px; margin-bottom:36px;
  grid-template-columns:1.7fr 1fr 1fr 1fr;
}
.f-brand { font-family:var(--f-head); font-size:1.25rem; font-weight:800; color:var(--brand); margin-bottom:10px }
.f-desc { font-size:.82rem; color:var(--text-2); line-height:1.68; margin-bottom:16px; max-width:270px }
.f-socials { display:flex; gap:7px; flex-wrap:wrap }
.f-socials a {
  width:34px; height:34px; border-radius:9px;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3); transition:all var(--t);
}
.f-socials a:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-dim) }
.f-socials svg { width:14px; height:14px; stroke:currentColor; fill:none }
.fcol h4 { font-family:var(--f-head); font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:14px }
.fcol ul { list-style:none; display:flex; flex-direction:column; gap:9px }
.fcol li { display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text-2) }
.fcol li svg { width:11px; height:11px; stroke:var(--text-3); fill:none; flex-shrink:0 }
.fcol a { font-size:.82rem; color:var(--text-2); transition:color var(--t) }
.fcol a:hover { color:var(--brand) }
.footer-bot {
  border-top:1px solid var(--border); padding-top:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.f-copy { font-size:.74rem; color:var(--text-3) }
.f-copy b { color:var(--brand) }
.f-ver {
  font-size:.66rem; color:var(--text-3); font-family:var(--f-mono);
  display:flex; align-items:center; gap:5px;
  border:1px solid var(--border); padding:3px 10px; border-radius:100px;
}
.f-vdot { width:5px; height:5px; background:#4ade80; border-radius:50%; animation:blink 2s ease infinite }

/* ──────────────────────────────────────────────
   ANIMATIONS
────────────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ──────────────────────────────────────────────
   RESPONSIVE — TABLET  (≥ 640px)
────────────────────────────────────────────── */
@media (min-width:640px) {
  .cta-txt { display:inline }
  .hero { padding:80px 24px 64px }
  .stats-sec,.feat-sec,.filter-sec,.mkt-head,#appGrid,.footer-in { padding-left:24px; padding-right:24px }
  #appGrid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) }
  .stats-grid { grid-template-columns:repeat(4,1fr) }
}

/* ──────────────────────────────────────────────
   RESPONSIVE — DESKTOP  (≥ 1024px)
────────────────────────────────────────────── */
@media (min-width:1024px) {
  .nav-wrap { padding:0 28px; height:64px; gap:16px }
  .nav-search-wrap { max-width:380px }
  .hero { padding:100px 28px 80px }
  .stats-sec,.feat-sec,.filter-sec,.mkt-head,#appGrid,.footer-in { padding-left:28px; padding-right:28px }
  #appGrid { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px }
  .hero h1 { font-size:clamp(3rem,5vw,4.4rem) }
}

/* ──────────────────────────────────────────────
   RESPONSIVE — MOBILE  (< 640px)
────────────────────────────────────────────── */
@media (max-width:639px) {
  /* Nav */
  .nav-search-wrap { display:none }          /* hidden in nav, shown in mob-search-bar */
  .mob-menu-btn { display:flex }
  .nav-cta { padding:0 12px }
  .nav-wrap { gap:8px }

  /* Hero */
  .hero { padding:52px 16px 44px }
  .hero h1 { font-size:2rem }
  .hero-btns { flex-direction:column; align-items:stretch }
  .btn-primary,.btn-outline { justify-content:center }
  .hero-trust { gap:12px }
  .trust-it { font-size:.7rem }

  /* Stats */
  .stats-grid { grid-template-columns:repeat(2,1fr) }
  .stat-box:nth-child(2) { border-right:none }
  .stat-box:nth-child(3) { border-top:1px solid var(--border) }
  .stat-box:nth-child(4) { border-right:none; border-top:1px solid var(--border) }
  .sn { font-size:1.5rem }

  /* Featured */
  #featGrid { grid-template-columns:repeat(2,1fr) }
  .fc-img { height:90px }

  /* Filter chips — scroll horizontal */
  .chips { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px }
  .chips::-webkit-scrollbar { display:none }

  /* Cards — single column */
  #appGrid { grid-template-columns:1fr; gap:14px }
  .card-thumb { height:160px }

  /* APK button full width already via grid-column:1/-1 */
  .card-acts.cols-2 { grid-template-columns:1fr 1fr }
  .card-acts.cols-3 { grid-template-columns:1fr 1fr }

  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:28px }
  .footer-bot { flex-direction:column; text-align:center }
  .f-desc { max-width:100% }

  /* Wishlist */
  .w-drawer { width:100% }

  /* Back to top */
  #btt { bottom:16px; right:14px; width:38px; height:38px }

  /* Toast */
  .toast { max-width:calc(100vw - 32px); text-align:center; white-space:normal }
}

/* ──────────────────────────────────────────────
   MOBILE SEARCH BAR
────────────────────────────────────────────── */
.mob-search-bar { display:none; padding:10px 16px; border-top:1px solid var(--border); background:var(--nav-bg) }
.mob-search-bar.open { display:block }
.mob-search-bar .nav-search-wrap { display:block; max-width:100% }