.app-breadcrumb,
.app-page {
    width: min(1120px, calc(100% - 32px));
    margin-inline: auto;
}

.app-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-block: 22px 8px;
    color: var(--text-muted);
    font-size: 13px;
}

.app-breadcrumb a { color: var(--gold-dark); text-decoration: none; }

.app-page { padding-bottom: 64px; }

.app-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr);
    align-items: center;
    gap: clamp(32px, 6vw, 82px);
    min-height: 590px;
    padding: clamp(38px, 6vw, 76px);
    overflow: hidden;
    background: var(--bg2);
    background: linear-gradient(135deg, color-mix(in srgb, var(--bg2) 96%, var(--gold) 4%), color-mix(in srgb, var(--bg) 84%, var(--gold) 16%));
    border: 1px solid var(--border-gold);
    border-radius: 30px;
    box-shadow: 0 22px 65px rgba(80, 58, 12, .09);
}

.app-kicker,
.app-section-heading > span {
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
}

.app-hero h1 {
    max-width: 720px;
    margin: 14px 0 18px;
    color: var(--text);
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.18;
}

.app-hero__content > p { max-width: 680px; color: var(--text-muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.9; }
.app-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }

.app-install-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 22px;
    color: #fff;
    background: linear-gradient(135deg, #a97908, #d0a629);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(169, 121, 8, .24);
    cursor: pointer;
    font: 900 14px/1.4 inherit;
}

.app-install-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-install-button:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(169, 121, 8, .3); outline: 3px solid rgba(208, 166, 41, .22); outline-offset: 3px; }
.app-secondary-link { color: var(--text); font-weight: 800; text-underline-offset: 5px; }
.app-hero__note { margin-top: 14px; font-size: 12px !important; font-weight: 700; }
.app-hero__visual { display: grid; place-items: center; }

.app-phone {
    position: relative;
    width: min(100%, 310px);
    padding: 12px;
    background: #141414;
    border: 4px solid #2b2b2b;
    border-radius: 40px;
    box-shadow: 0 28px 55px rgba(0, 0, 0, .22);
    transform: rotate(-2deg);
}

.app-page--urdu .app-phone { transform: rotate(2deg); }
.app-phone__camera { position: absolute; z-index: 1; top: 17px; left: 50%; width: 72px; height: 18px; border-radius: 12px; background: #141414; transform: translateX(-50%); }
.app-phone img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; object-position: top; border-radius: 27px; }

.app-benefits,
.app-guide,
.app-tools,
.app-faq { padding-top: clamp(62px, 8vw, 96px); }

.app-section-heading { max-width: 720px; margin-bottom: 28px; }
.app-section-heading h2 { margin: 9px 0 0; color: var(--text); font-size: clamp(27px, 4vw, 42px); line-height: 1.35; }
.app-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.app-feature-grid article { min-height: 210px; padding: 24px; background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; }
.app-feature-grid article > span { color: var(--gold); font-weight: 900; }
.app-feature-grid h3 { margin: 24px 0 10px; color: var(--text); font-size: 18px; }
.app-feature-grid p, .app-platform-card p, .app-platform-card li, .app-faq p { color: var(--text-muted); line-height: 1.8; }

.app-platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.app-platform-card { padding: 26px; background: var(--bg2); border: 1px solid var(--border-gold); border-radius: 22px; }
.app-platform-card--wide { grid-column: 1 / -1; }
.app-platform-card__title { display: flex; align-items: center; gap: 14px; }
.app-platform-card__title > span { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; color: var(--gold-dark); background: var(--bg3); background: color-mix(in srgb, var(--gold) 12%, var(--bg)); border-radius: 13px; font-weight: 900; }
.app-platform-card h3 { margin: 0; color: var(--text); }
.app-platform-card__title p { margin: 3px 0 0; font-size: 12px; }
.app-platform-card ol { margin: 22px 0; padding-inline-start: 24px; }
.app-platform-card li { padding-inline-start: 6px; margin: 8px 0; }
.app-guide-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-guide-images--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-guide-images img { display: block; width: 100%; max-height: 360px; object-fit: cover; object-position: top; border: 1px solid var(--border); border-radius: 15px; }
.app-tool-links { display: flex; flex-wrap: wrap; gap: 10px; }
.app-tool-links a { padding: 12px 16px; color: var(--text); background: var(--bg2); border: 1px solid var(--border); border-radius: 999px; font-weight: 800; text-decoration: none; }
.app-tool-links a:is(:hover, :focus-visible) { color: var(--gold-dark); border-color: var(--gold); }
.app-faq__list { display: grid; gap: 10px; }
.app-faq details { padding: 0 22px; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; }
.app-faq summary { padding: 20px 0; color: var(--text); cursor: pointer; font-weight: 900; }
.app-faq details p { margin: -5px 0 20px; }

.app-final-cta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin-top: 88px;
    padding: 28px;
    background: var(--bg2);
    background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 13%, var(--bg2)), var(--bg2));
    border: 1px solid var(--border-gold);
    border-radius: 24px;
}

.app-final-cta img { border-radius: 18px; }
.app-final-cta h2 { margin: 0 0 6px; color: var(--text); font-size: 22px; }
.app-final-cta p { margin: 0; color: var(--text-muted); }
.urdu-footer__app-link { display: inline-block; margin-top: 8px; color: var(--gold-dark); font-weight: 800; }

@media (max-width: 820px) {
    .app-hero { grid-template-columns: 1fr; text-align: center; }
    .app-hero__content > p, .app-section-heading { margin-inline: auto; }
    .app-hero__actions { justify-content: center; }
    .app-hero__visual { order: -1; }
    .app-phone { width: 220px; }
    .app-phone img { max-height: 390px; }
    .app-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .app-breadcrumb, .app-page { width: min(100% - 20px, 1120px); }
    .app-breadcrumb { padding-top: 14px; }
    .app-hero { min-height: 0; padding: 28px 18px 34px; border-radius: 22px; }
    .app-hero h1 { font-size: 32px; }
    .app-install-button { width: 100%; }
    .app-feature-grid, .app-platform-grid { grid-template-columns: 1fr; }
    .app-feature-grid article { min-height: 0; }
    .app-platform-card--wide { grid-column: auto; }
    .app-guide-images--three { grid-template-columns: 1fr; }
    .app-guide-images--three img { max-height: 430px; }
    .app-final-cta { grid-template-columns: 1fr; text-align: center; }
    .app-final-cta img { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .app-install-button, .app-phone { transition: none; transform: none; }
}