/* =========================================================
   ERLYQ — Apps page: iPhone boot intro + App Store layout
   ========================================================= */
.as-page {
  --ios-blue: #007aff;
  --ios-label: #1c1c1e;
  --ios-grey: #8e8e93;
  --ios-sep: #e5e5ea;
  --ios-group: #f2f2f7;
  background: #fff;
}
body.is-phone-intro { overflow: hidden; }
body.is-phone-intro .nav { opacity: 0; transform: translateY(-24px); pointer-events: none; }

/* ---------- iPhone boot intro ---------- */
.pi { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(60% 50% at 30% 20%, rgba(170, 200, 255, .45), transparent 70%), radial-gradient(55% 50% at 80% 80%, rgba(255, 190, 215, .4), transparent 70%), #f5f5f7; }
.pi.is-out { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.pi__phone { --h: min(78vh, 760px); position: relative; height: var(--h); aspect-ratio: .49; padding: calc(var(--h) * .017); border-radius: 15% / 7.2%; background: #0b0b0d; opacity: 0;
  box-shadow: 0 0 0 2px #c9c9ce, 0 0 0 4px #8f8f94, inset 0 0 0 1px rgba(255, 255, 255, .14), 0 60px 90px -40px rgba(0, 0, 0, .5), 0 30px 40px -30px rgba(0, 0, 0, .35); will-change: transform; }
.pi__phone::before { content: ""; position: absolute; top: 22%; right: -5px; width: 4px; height: 10%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #8f8f94, #d4d4d9); }
.pi__phone::after { content: ""; position: absolute; top: 18%; left: -5px; width: 4px; height: 6%; border-radius: 3px 0 0 3px; background: linear-gradient(270deg, #8f8f94, #d4d4d9); box-shadow: 0 calc(var(--ph, 600px) * .09) 0 #a8a8ad; }
.pi__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12.4% / 5.8%; background: #000; container-type: size; color: #fff; }

.pi__wall { position: absolute; inset: -6%; opacity: 0;
  background: radial-gradient(70% 50% at 18% 18%, #6f9dff 0%, transparent 70%), radial-gradient(60% 50% at 88% 28%, #ff86b0 0%, transparent 72%), radial-gradient(80% 60% at 55% 100%, #ffc76b 0%, transparent 70%), linear-gradient(160deg, #26306b, #3a1f55 60%, #1b1d3a); }
.pi__wall::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .08); }

.pi__lock { position: absolute; inset: 0; text-align: center; opacity: 0; }
.pi__date { margin: 0; padding-top: 15cqh; font-size: 4.6cqw; font-weight: 600; letter-spacing: .01em; opacity: .92; }
.pi__time { margin: 0; font-size: 23cqw; font-weight: 700; line-height: 1; letter-spacing: -.02em; text-shadow: 0 2px 24px rgba(0, 0, 0, .15); }
.pi__notes { position: absolute; left: 4cqw; right: 4cqw; bottom: 17cqh; display: flex; flex-direction: column; gap: 2cqw; }
.pi__note { display: flex; align-items: center; gap: 3cqw; padding: 3cqw 3.6cqw; border-radius: 5.5cqw; background: rgba(245, 245, 250, .78); color: #111; text-align: left; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 2px 12px rgba(0, 0, 0, .12); opacity: 0; }
.pi__note img { width: 9.5cqw; height: 9.5cqw; flex: 0 0 auto; border-radius: 2.3cqw; }
.pi__note div { flex: 1; min-width: 0; }
.pi__note b { display: block; font-size: 3.5cqw; font-weight: 700; }
.pi__note span { display: block; font-size: 3.3cqw; line-height: 1.3; color: #333; }
.pi__note time { align-self: flex-start; color: #6e6e73; font-size: 2.9cqw; }
.pi__hint { position: absolute; left: 0; right: 0; bottom: 6.5cqh; margin: 0; font-size: 3.4cqw; font-weight: 500; opacity: .75; }
.pi__homebar { position: absolute; bottom: 1.6cqh; left: 50%; width: 36cqw; height: 1.3cqw; margin-left: -18cqw; border-radius: 99px; background: #fff; opacity: .9; }

.pi__home { position: absolute; inset: 0; opacity: 0; }
.pi__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5cqw 0; padding: 18cqh 4cqw 0; }
.pi__app { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; }
.pi__app img, .pi__app i { width: 15cqw; height: 15cqw; border-radius: 3.6cqw; box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, .25); }
.pi__app i { display: block; background: rgba(255, 255, 255, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.pi__app em { max-width: 21cqw; overflow: hidden; color: #fff; font-size: 2.8cqw; font-style: normal; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.pi__dock { position: absolute; left: 3.5cqw; right: 3.5cqw; bottom: 3.6cqh; display: flex; justify-content: space-around; padding: 3.4cqw 2cqw; border-radius: 8cqw; background: rgba(255, 255, 255, .2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.pi__dock i { width: 14.5cqw; height: 14.5cqw; border-radius: 3.5cqw; background: rgba(255, 255, 255, .28); }

.pi__island { position: absolute; top: 2.3cqh; left: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 2cqw; width: 30cqw; height: 8.6cqw; transform: translateX(-50%); border-radius: 99px; background: #000; overflow: hidden; }
.pi__island span { color: #fff; font-size: 3.4cqw; font-weight: 700; letter-spacing: .14em; opacity: 0; white-space: nowrap; }
.pi__wave { display: flex; align-items: center; gap: .7cqw; height: 4cqw; opacity: 0; }
.pi__wave i { width: .8cqw; height: 100%; border-radius: 9px; background: #4cd964; animation: piWave .9s ease-in-out infinite; }
.pi__wave i:nth-child(2) { animation-delay: -.2s; background: #5ac8fa; }
.pi__wave i:nth-child(3) { animation-delay: -.45s; background: #ff2d55; }
.pi__wave i:nth-child(4) { animation-delay: -.65s; background: #ffcc00; }
@keyframes piWave { 50% { transform: scaleY(.35); } }
.pi__white { position: absolute; inset: 0; z-index: 4; background: #fbfbfd; opacity: 0; }

.pi__skip { position: absolute; right: 24px; bottom: 22px; height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .06); color: #3a3a3c; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s; }
.pi__skip:hover { background: rgba(0, 0, 0, .1); }

/* ---------- App Store: Today ---------- */
.as-today { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 128px 0 0; }
.as-date { margin: 0; color: var(--ios-grey); font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.as-title { margin: 2px 0 0; font-size: clamp(34px, 4.2vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; }
.as-today__note { margin: 0; max-width: 340px; color: var(--ios-grey); font-size: 15px; text-align: right; }
.as-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 22px; }
.today-card { position: relative; display: block; height: clamp(460px, 44vw, 580px); overflow: hidden; border-radius: 26px; color: #fff; isolation: isolate; box-shadow: 0 16px 44px -20px rgba(0, 0, 0, .45); transition: transform .45s var(--ease-out), box-shadow .45s; }
.today-card:hover { transform: scale(.985); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .45); }
.today-card__art { position: absolute; inset: 0; z-index: -1; }
.today-card--vaqit .today-card__art { background: radial-gradient(70% 50% at 70% 20%, rgba(255, 205, 130, .55), transparent 70%), linear-gradient(180deg, #1d2b48 0%, #3c4f78 55%, #c98e5b 100%); }
.today-card--su .today-card__art { background: radial-gradient(70% 50% at 30% 20%, rgba(180, 230, 255, .7), transparent 70%), linear-gradient(180deg, #0b5fa8 0%, #2c8ee0 55%, #8fd0ff 100%); }
.today-card__phone { position: absolute; left: 50%; bottom: -26%; width: 48%; transform: translateX(-50%) rotate(-4deg); transition: transform .8s var(--ease-out); }
.today-card:hover .today-card__phone { transform: translateX(-50%) translateY(-14px) rotate(-2deg); }
.today-card--su .today-card__phone { transform: translateX(-50%) rotate(4deg); }
.today-card--su:hover .today-card__phone { transform: translateX(-50%) translateY(-14px) rotate(2deg); }
.today-card__top { position: absolute; top: 24px; left: 26px; right: 26px; }
.today-card__eyebrow { margin: 0 0 6px; color: rgba(255, 255, 255, .78); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.today-card__top h2 { margin: 0; font-size: clamp(28px, 2.8vw, 36px); font-weight: 800; line-height: 1.06; letter-spacing: -.025em; text-shadow: 0 2px 20px rgba(0, 0, 0, .15); }
.today-card__app { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: rgba(250, 250, 252, .82); color: var(--ios-label); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); }
.today-card__app img { width: 48px; height: 48px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.today-card__app div { flex: 1; min-width: 0; }
.today-card__app b { display: block; font-size: 15px; font-weight: 600; }
.today-card__app span { display: block; color: var(--ios-grey); font-size: 13px; }

.get { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; height: 30px; padding: 0 18px; border-radius: 999px; background: rgba(0, 122, 255, .1); color: var(--ios-blue); font-size: 15px; font-weight: 700; letter-spacing: .02em; transition: background .2s, transform .3s var(--ease-out); }
.get:hover { background: rgba(0, 122, 255, .17); }
.get:active { transform: scale(.94); }
.get--fill { background: var(--ios-blue); color: #fff; }
.get--fill:hover { background: #1a86ff; }

/* ---------- App Store: product page ---------- */
.as-app { margin-top: 90px; padding-top: 70px; border-top: 1px solid var(--ios-sep); }
.as-head { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.as-icon { width: clamp(96px, 11vw, 136px); height: auto; aspect-ratio: 1; border-radius: 22.5%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 14px 30px -14px rgba(0, 0, 0, .35); }
.as-name { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.025em; }
.as-sub { margin: 2px 0 0; color: var(--ios-grey); font-size: 18px; }
.as-dev { margin: 4px 0 0; color: var(--ios-blue); font-size: 15px; }
.as-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.as-actions small { color: var(--ios-grey); font-size: 12px; }

.as-info { display: grid; grid-auto-columns: minmax(128px, 1fr); grid-auto-flow: column; margin-top: 30px; padding: 14px 0; overflow-x: auto; border-top: 1px solid var(--ios-sep); border-bottom: 1px solid var(--ios-sep); scrollbar-width: none; }
.as-info::-webkit-scrollbar { display: none; }
.as-info > div { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 14px; text-align: center; }
.as-info > div + div { border-left: 1px solid var(--ios-sep); }
.as-info small { color: var(--ios-grey); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.as-info b { color: #6e6e73; font-size: 21px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.as-info b svg { width: 22px; height: 22px; fill: none; stroke: #6e6e73; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.as-info span { color: var(--ios-grey); font-size: 12px; white-space: nowrap; }
.stars { color: #6e6e73; font-size: 13px; letter-spacing: 1px; }

.as-h { margin: 44px 0 16px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.as-shots { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.as-shots img { flex: 0 0 auto; width: clamp(190px, 21vw, 250px); height: auto; border-radius: 9% / 4.2%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); scroll-snap-align: start; }
.as-shots--su img { background: #f5f8fb; }

.as-desc { max-width: 780px; }
.as-desc p { margin: 0; color: var(--ios-label); font-size: 16px; line-height: 1.6; }
.as-desc.is-clamped p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.as-more { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--ios-blue); font-size: 16px; cursor: pointer; }
.as-desc:not(.is-clamped) .as-more { display: none; }

.as-list { max-width: 780px; margin: 0; padding: 0; overflow: hidden; border-radius: 14px; background: var(--ios-group); list-style: none; }
.as-list li { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 16px; }
.as-list li + li::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--ios-sep); }
.as-list i { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--c, var(--ios-blue)); }
.as-list i svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.as-list b { display: block; font-size: 16px; font-weight: 600; }
.as-list span { display: block; color: var(--ios-grey); font-size: 14px; }

.as-ratings { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 30px; align-items: center; max-width: 560px; }
.as-ratings__score b { display: block; font-size: 64px; font-weight: 800; line-height: .9; letter-spacing: -.03em; color: #3a3a3c; }
.as-ratings__score span { display: block; margin-top: 4px; color: var(--ios-grey); font-size: 14px; font-weight: 600; text-align: center; }
.as-bars { display: grid; gap: 3px; }
.as-bars div { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
.as-bars small { color: var(--ios-grey); font-size: 9px; letter-spacing: 1px; text-align: right; }
.as-bars em { display: block; height: 4px; overflow: hidden; border-radius: 4px; background: var(--ios-sep); }
.as-bars em::after { content: ""; display: block; width: var(--w, 0%); height: 100%; border-radius: inherit; background: #6e6e73; }
.as-ratings p { grid-column: 2; margin: 0; color: var(--ios-grey); font-size: 14px; text-align: right; }

.as-infolist { max-width: 780px; margin: 0; }
.as-infolist div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--ios-sep); font-size: 15px; }
.as-infolist dt { color: var(--ios-grey); }
.as-infolist dd { margin: 0; text-align: right; }

@media (max-width: 860px) {
  .as-cards { grid-template-columns: 1fr; }
  .as-today__note { display: none; }
}
@media (max-width: 640px) {
  .as-today { padding-top: 110px; }
  .today-card { height: 480px; }
  .today-card__phone { width: 58%; }
  .as-head { grid-template-columns: auto 1fr; gap: 16px; }
  .as-app { margin-top: 60px; padding-top: 50px; }
  .as-ratings__score b { font-size: 52px; }
  .pi__phone { --h: min(80vh, 700px); max-width: 90vw; }
  .pi__skip { right: 50%; transform: translateX(50%); bottom: 16px; }
}