.apps-hero {
  position: relative;
  background-image: var(--ah-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
  padding: clamp(80px, 12vh, 120px) 0; /* adjust vertical space */
}

/* subtle dark overlay so white text is readable */
.apps-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}

/* keep inner content above overlay */
.apps-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* heading style */
.apps-hero__inner h1 {
  margin: 0;
  font-size: clamp(1.25rem, 3.6vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}

/* responsive tweak for small screens */
@media (max-width: 640px) {
  .apps-hero { padding: clamp(28px, 10vh, 60px) 0; }
  .apps-hero__inner h1 { font-size: 20px; }
}

.apps-body { display:grid; grid-template-columns: 260px 1fr; gap:32px; margin-top:24px; }
@media (max-width: 960px){ 
    .apps-body{ grid-template-columns:1fr; }
    .apps-sidebar {display: none !important;}
}

.apps-sidebar { 
    position:sticky; 
    top:150px;
    padding-bottom: 80px;
    margin-top: 56px;
    align-self:start; }
.apps-sidebar h3 { 
    font-weight:700;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin-bottom:12px; 
}
.apps-groups, .apps-subgroups { 
    list-style:none; 
    margin:0; 
    padding:0; 
}
.apps-groups > li { 
    margin-bottom:10px; 
}
.apps-groups a { 
    color:var(--color-text); 
    text-decoration:none;
    font-size: 1rem;
}
.apps-groups a:hover { color: var(--color-primary); }

.apps-group { margin:56px 0; }
.apps-group__title { 
    font-size:1.5rem; 
    letter-spacing:.04em; 
    margin:12px 0 20px;
}
/* highlight current TOC item */
.apps-groups a,
.apps-subgroups a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transition: color .12s ease, font-weight .12s ease;
}
.apps-groups a.is-active,
.apps-subgroups a.is-active {
  color: var(--color-primary);
  font-weight: 700;
}

/* optional visual marker */
.apps-groups a.is-active::before,
.apps-subgroups a.is-active::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  /* SVG encoded as data URI, stroke color = var(--color-primary-hex) replace #007acc as needed */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007acc' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
  transform: translateX(-2px);
}

/*grid*/
.apps-grid { 
    display:grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap:24px; 
}
@media (max-width: 1024px){ .apps-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .apps-grid{ grid-template-columns: 1fr; } }

.app-card { 
    background:#fff; 
    border-radius:4px; 
    overflow:hidden; 
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .06);
}
.app-card:hover { 
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2); 
}
.app-card__link { 
    display:block; 
    font-size: 1.125rem;
    color:inherit; 
    text-decoration:none; 
}
.app-card__thumb { 
    background:var(--color-bg-soft);
    aspect-ratio: 16/11; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
}
.app-card__thumb img { 
    width:100%; 
    height:100%; 
    object-fit:cover; 
}
.app-card__ph { 
    width:100%; 
    height:100%; 
}

.app-card__body { 
    padding:14px 16px 18px; 
}
.app-card__title { 
    font-weight:700;
    font-size: 1.125rem;
    margin:0 0 6px; 
}
.app-card__desc { 
    font-size:0.75rem; 
    color:var(--color-muted); 
    margin:0 0 12px; 
    line-height:1.45; 
}
.app-card__cta { 
    display:inline-flex; 
    gap:6px; 
    align-items:center; 
    font-size:0.75rem; 
    background:none; 
    color: var(--color-text); 
    padding:6px 10px; 
    border-radius:4px; 
    border: 1px solid var(--color-border);
}
.app-card:hover .app-card__cta { 
    color: #fff;
    background-color: var(--color-primary);
}