:root {
    --ink: #edf4ff;
    --paper: #0b1424;
    --lime: #b8e986;
    --orange: #ef7055;
}

.apps-page { margin-top: 70px; background: var(--paper); }
.apps-hero { position: relative; min-height: calc(100vh - 70px); overflow: hidden; padding: 92px 0 110px; background: linear-gradient(135deg, #08111f 0%, #10233a 52%, #241c35 100%); color: var(--ink); }
.apps-hero::before, .apps-hero::after { position: absolute; border-radius: 50%; content: ''; pointer-events: none; }
.apps-hero::before { width: 34rem; height: 34rem; top: -19rem; left: -12rem; background: rgba(56,189,248,.18); filter: blur(3px); }
.apps-hero::after { width: 30rem; height: 30rem; right: -12rem; bottom: -17rem; background: rgba(239,112,85,.2); }
.apps-hero .container { position: relative; z-index: 1; }

.apps-hero-content { max-width: 700px; margin: 0 auto 54px; text-align: center; }
.eyebrow { display: inline-block; color: #55708e; font-size: .7rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow { margin-bottom: 22px; }
.apps-hero h1 { margin: 0 0 20px; color: #fff; font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.06em; line-height: .98; }
.apps-hero h1 em { color: #dc6148; font-style: normal; }
.apps-hero-content > p { max-width: 530px; margin: auto; color: rgba(255,255,255,.7); font-size: 1.05rem; }

.apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1120px; margin: auto; }
.app-card-inner { position: relative; display: flex; height: 100%; flex-direction: column; padding: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 28px; background: rgba(255,255,255,.08); box-shadow: 0 22px 55px rgba(0,0,0,.3); backdrop-filter: blur(14px); }
.app-card-veena .app-card-inner { background: linear-gradient(150deg, rgba(27,49,76,.96), rgba(91,51,53,.76)); }
.app-card-shruthi .app-card-inner { background: linear-gradient(150deg, rgba(27,49,76,.96), rgba(31,76,83,.76)); }
.app-art { display: flex; align-items: flex-end; justify-content: center; height: 285px; margin: -24px -24px 24px; overflow: hidden; border-radius: 27px 27px 0 0; background: rgba(0,0,0,.22); }
.app-art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform .35s ease; }
.app-card:hover .app-art img { transform: scale(1.04) translateY(-3px); }
.app-intro { min-height: 86px; }
.app-kicker { display: inline-block; margin-bottom: 8px; color: rgba(255,255,255,.58); font-size: .62rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.app-intro h2 { margin: 0; color: #fff; font-size: clamp(1.35rem, 2.2vw, 1.75rem); letter-spacing: -.04em; line-height: 1.1; }
.app-subtitle { margin: 7px 0 0; color: var(--lime); font-size: .9rem; font-weight: 700; }
.app-copy { flex: 1; margin: 21px 0 24px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
.app-copy p { margin: 0; color: rgba(255,255,255,.72); font-size: .91rem; line-height: 1.65; }
.app-copy p + p { margin-top: 12px; }
.store-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.store-badge { display: block; line-height: 0; transition: transform .2s ease; }
.store-badge:hover { transform: translateY(-3px); }
.store-badge img { width: auto; height: 40px; }

@media (max-width: 800px) {
    .apps-hero { padding: 70px 15px 90px; }
    .apps-hero-content { margin-bottom: 34px; }
    .apps-hero h1 { font-size: 2.35rem; }
    .apps-grid { grid-template-columns: 1fr; max-width: 560px; }
    .app-art { height: 300px; }
}

@media (max-width: 480px) {
    .app-card-inner { padding: 20px; }
    .app-art { height: 245px; margin: -20px -20px 21px; }
    .store-badges { justify-content: center; }
    .store-badge img { height: 37px; }
}

@media (prefers-reduced-motion: reduce) {
    .app-art img, .store-badge { transition: none; }
}