*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:#0b202e;
  color:#f5f7fb;
}
a{text-decoration:none;color:inherit}

/* NAVBAR */
.nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;
  background:#0f2836;
  border-bottom:1px solid #122b3a;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Added shadow for depth */
}
.nav-left{display:flex;align-items:center;gap:12px}
.menu-btn{
  border:none;background:transparent;color:#e6f6ff;
  font-size:24px;cursor:pointer;padding:0;
}
.logo-group{display:flex;align-items:center;gap:8px}
.logo-icon{
  width:28px;height:28px;border-radius:6px;
  background:#33b5e5;
  display:flex;align-items:center;justify-content:center;
  color:#033047;font-size:17px;font-weight:bold;
}
.logo-text{
  font-size:19px;font-weight:800;color:#e6f7ff;letter-spacing:-0.03em;
}
.nav-middle{
  flex:1;display:none;justify-content:center;padding:0 16px;
}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-flash{
  border:none;background:#f472b6;color:#06121a;
  width:32px;height:32px;border-radius:999px;font-size:16px;cursor:pointer;
}
.nav-theme{
  width:32px;height:32px;border-radius:999px;
  border:1px solid #1e3a4c;
  background:#081723;
  color:#e5f6ff;
  font-size:16px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* SEARCH */
.nav-search{
  display:flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;
  background:#071924;border:1px solid #173549;
  color:#cbd5f5;position:relative;width:100%;max-width:400px;
}
.nav-search input{
  border:none;outline:none;background:transparent;
  color:#e5edff;font-size:14px;width:100%;
}
.nav-search-icon{font-size:14px;opacity:.7}
.nav-search-mobile{
  padding:8px 16px 12px;background:#0f2836;
  border-bottom:1px solid #122b3a;
}

/* SEARCH SUGGESTIONS */
.search-suggestions{
  position:absolute;left:0;right:0;top:120%;
  background:#1a2c38;
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
  max-height:300px;overflow-y:auto;
  z-index:100;border:1px solid #2a3b4c;
}
.search-suggestions:empty{display:none}
.search-suggestion-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;cursor:pointer;font-size:14px;
  border-bottom:1px solid #233442;
}
.search-suggestion-item:last-child{border-bottom:none;}
.search-suggestion-item img{
  width:32px;height:32px;border-radius:8px;object-fit:cover;
}
.search-suggestion-item:hover{background:#0b3044}
.search-suggestion-title{font-weight:600;color:#fff;}

/* SIDEBAR */
#sidebar{
  position:fixed;top:0;left:-280px;
  width:280px;height:100vh;
  background:#0b202e;
  z-index:200;transition:cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
  border-right:1px solid #1e313f;
  box-shadow: 10px 0 30px rgba(0,0,0,0.3);
}
#sidebar.open{left:0}
.sidebar-inner{padding:24px 20px;}
.sidebar-title{
  font-size:13px;font-weight:800;margin-bottom:12px;
  color:#607d8b;text-transform:uppercase;letter-spacing:0.1em;
}
#sidebar a{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;
  border-bottom:1px solid #162a39;
  font-size:15px;color:#eceff1;font-weight:500;
}
#sidebar-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  z-index:150;transition:.3s;
  backdrop-filter: blur(2px);
}
#sidebar-backdrop.show{
  opacity:1;pointer-events:auto;
}

/* PAGE */
.page{
  max-width:1200px;margin:0 auto;
  padding:16px;
}

/* HERO - IMPROVED */
.hero{
  display:flex;flex-direction:column;
  gap:16px;margin-bottom:24px;
}
.hero-left{
  position:relative;min-height:220px;
  overflow:hidden;border-radius:16px;
  background:#081722;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.05);transition:opacity .5s, transform .5s;
}
.hero-slide--active{opacity:1;transform:scale(1);}
.hero-gradient{
  position:absolute;inset:0;
  background:linear-gradient(to top, #061018 10%, rgba(6,16,24,0.6) 50%, rgba(6,16,24,0.2) 100%);
}
.hero-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:24px 20px;
}
.hero-badge{
  display:inline-block;padding:4px 10px;border-radius:6px;
  background:#33b5e5;color:#05141d;font-size:11px;
  font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:8px;
}
.hero h1{margin:0 0 6px;font-size:24px;line-height:1.2;text-shadow:0 2px 4px rgba(0,0,0,0.5);}
.hero p{margin:0 0 16px;font-size:14px;color:#cfd8dc;line-height:1.4;display:none;}
.hero-btn{
    display:inline-block;background:#fff;color:#000;
    padding:8px 18px;border-radius:99px;font-weight:700;font-size:13px;
}
.hero-dots{
  position:absolute;right:20px;bottom:20px;
  display:flex;gap:6px;z-index:10;
}
.hero-dot{
  width:8px;height:8px;border-radius:999px;
  background:rgba(255,255,255,.3);cursor:pointer;
}
.hero-dot--active{background:#fff;transform:scale(1.2);}

.hero-right{
  display:flex;flex-direction:column;gap:12px;
}
.utility-card, .mini-banner{
  border-radius:16px;padding:16px;
  background:#122836;
}
.utility-tag{
  background:#00695c;color:#fff;
  font-size:10px;padding:3px 8px;border-radius:4px;text-transform:uppercase;font-weight:bold;
}

/* TABS */
.tabs{
  margin:20px 0 12px;
  display:flex;gap:10px;
  overflow-x:auto;padding-bottom:5px;
}
.tab{
  padding:8px 18px;border-radius:999px;
  border:none;
  background:#162a39;
  font-size:14px;color:#90a4ae;font-weight:600;
  cursor:pointer;white-space:nowrap;
}
.tab-active{
  background:#fff;
  color:#000;
}

/* SECTIONS & SCROLL SNAP (UPTODOWN STYLE) */
.section{margin-top:24px;}
.section-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;
}
.section-header h2{margin:0;font-size:19px;font-weight:700;}
.section-viewall{
  background:transparent;border:none;color:#33b5e5;font-weight:600;font-size:13px;cursor:pointer;
}

.app-row{display:flex;gap:14px;}
/* THIS IS THE MAGIC SCROLL SNAP */
.app-row--scroll{
  overflow-x:auto;padding-bottom:12px;
  scroll-snap-type: x mandatory; /* The Snap Logic */
  scroll-padding-left: 0;
}
.app-row--scroll::-webkit-scrollbar{height:0px;display:none;} /* Hide Scrollbar */

.app-item{
  flex:0 0 150px; /* Fixed width for better snap */
  width: 150px;
  scroll-snap-align: start; /* Snap alignment */
}
.app-item--ranked{position:relative;}
.app-rank{
  position:absolute;top:-10px;left:-4px;
  font-size:50px;font-weight:900;
  color:rgba(51, 181, 229, 0.15);pointer-events:none;z-index:0;
}

.app-card{
  display:flex;flex-direction:column;gap:10px; /* Stacked layout like Uptodown vertical cards */
  padding:0;background:transparent;cursor:pointer;
  position:relative;z-index:1;
}
.app-icon{
  width:100%;aspect-ratio:1;
  border-radius:18px;overflow:hidden;
  background:#162a39;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.app-icon img{width:100%;height:100%;object-fit:cover;}
.app-text{min-width:0;}
.app-title{
  font-size:14px;font-weight:600;
  color:#eceff1;margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.app-desc{
  font-size:12px;color:#90a4ae;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* APP PAGE SPECIFIC */
.app-page{max-width:800px;margin:0 auto;padding:20px 16px 60px;}
.app-header-card{
    display:flex;gap:20px;align-items:flex-start;margin-bottom:24px;
}
.app-header-icon{
    width:90px;height:90px;border-radius:20px;overflow:hidden;flex-shrink:0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.app-header-icon img{width:100%;height:100%;object-fit:cover;}
.app-header-main{flex:1;}
.app-header-title{font-size:24px;font-weight:800;line-height:1.2;margin-bottom:4px;}
.app-header-meta{color:#33b5e5;font-weight:600;font-size:14px;margin-bottom:8px;}
.app-download-btn{
    display:block;width:100%;background:#33b5e5;color:#05141d;
    text-align:center;padding:14px;border-radius:12px;
    font-weight:800;font-size:16px;margin-top:16px;
    box-shadow: 0 4px 15px rgba(51,181,229,0.3);
}

/* UPTODOWN STYLE TECH TABLE */
.tech-table{
    width:100%;border-collapse:collapse;
    margin-top:10px;font-size:14px;
}
.tech-table tr{border-bottom:1px solid #1e313f;}
.tech-table tr:last-child{border-bottom:none;}
.tech-table th{text-align:left;padding:12px 0;color:#90a4ae;font-weight:400;width:40%;}
.tech-table td{text-align:right;padding:12px 0;color:#eceff1;font-weight:500;}

/* LIGHT THEME */
body.theme-light{background:#f0f2f5;color:#1f2937;}
body.theme-light .nav, body.theme-light .footer{background:#fff;border-color:#e5e7eb;}
body.theme-light .logo-text{color:#0f172a;}
body.theme-light .nav-search{background:#f3f4f6;border-color:#e5e7eb;}
body.theme-light .nav-search input{color:#111827;}
body.theme-light .sidebar{background:#fff;}
body.theme-light #sidebar{background:#fff;border-right:1px solid #e5e7eb;}
body.theme-light #sidebar a{color:#374151;border-bottom-color:#f3f4f6;}
body.theme-light .app-title{color:#111827;}
body.theme-light .app-desc{color:#6b7280;}
body.theme-light .tech-table tr{border-bottom-color:#e5e7eb;}
body.theme-light .tech-table th{color:#6b7280;}
body.theme-light .tech-table td{color:#111827;}

/* RESPONSIVE */
@media (min-width:768px){
    .nav{padding:12px 32px;}
    .nav-middle{display:flex;}
    .nav-search--mobile{display:none;}
    .page{padding:24px 32px;}
    .hero{flex-direction:row;}
    .hero-left{flex:2;}
    .hero-right{flex:1;}
    .hero p{display:block;}
    .app-row--desktop-grid{
        display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
        gap:20px;overflow:visible;
    }
    .app-item{width:auto;}
    .app-card{background:transparent;}
}