/* AstroSaathi home page (day and night). Tokens and components: as-ui.css. */

/* ================================================================ HERO */
.as-hero {
    position: relative;
    overflow: hidden;
    background: var(--as-hero-bg);
    padding-block: clamp(36px, 6vw, 84px) clamp(40px, 6vw, 80px);
    isolation: isolate;
}

.as-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}

.as-hero__copy { position: relative; z-index: 2; }
.as-hero__copy .as-hero-title { margin: 12px 0 18px; }
.as-hero__copy .as-lead { max-width: 560px; }

.as-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 20px; }
.as-hero__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }

.as-hero__visual {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* the phone */
.as-phone {
    position: relative;
    z-index: 2;
    width: 270px;
    aspect-ratio: 9 / 18.6;
    border-radius: 44px;
    padding: 11px;
    background: linear-gradient(145deg, #2b2b2e, #0b0b0c 60%, #1d1d20);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 0 60px -10px rgba(255, 170, 40, .35);
    transform: rotate(4deg);
    box-sizing: border-box;
}

.as-phone__notch {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 86px;
    height: 24px;
    margin-left: -43px;
    border-radius: 14px;
    background: #050505;
    z-index: 3;
}

.as-phone__screen {
    height: 100%;
    border-radius: 34px;
    overflow: hidden;
    background: var(--as-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 44px 14px 16px;
    box-sizing: border-box;
    gap: 10px;
}

:root[data-theme="dark"] .as-phone__screen { background: radial-gradient(260px 200px at 50% 20%, rgba(242, 169, 13, .16), transparent 70%), #0e0c09; }

.as-phone__bar { display: flex; align-items: center; gap: 6px; font-family: var(--as-font-head); font-weight: 800; font-size: .95rem; color: var(--as-text); }
.as-phone__bar img { width: 22px; height: 22px; border-radius: 50%; }
.as-phone__bar b { color: var(--as-hl); }

.as-phone__wheel {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    background: conic-gradient(#ffb300, #ff6a13, #e5484d, #8b5cf6, #3b82f6, #22a559, #ffb300);
    padding: 9px;
    box-sizing: border-box;
    box-shadow: 0 0 30px -6px rgba(255, 160, 40, .7);
}

.as-phone__wheel::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--as-surface);
}

:root[data-theme="dark"] .as-phone__wheel::before { background: #120f0b; }

.as-phone__wheel img {
    position: absolute;
    inset: 22px;
    width: calc(100% - 44px);
    height: calc(100% - 44px);
    object-fit: contain;
    border-radius: 50%;
}

.as-phone__q { margin: 2px 0 0; font-size: .74rem; font-weight: 600; color: var(--as-text-2); text-align: center; }

.as-phone__tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    width: 100%;
}

.as-phone__tiles span {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 8px 2px;
    border-radius: 12px;
    background: var(--as-surface-2);
    border: 1px solid var(--as-border);
    font-size: .58rem;
    font-weight: 600;
    color: var(--as-text-2);
}

.as-phone__tiles i { font-size: .95rem; }

.as-phone__cta {
    margin-top: auto;
    width: 100%;
    padding: 11px 10px;
    border-radius: 14px;
    background: var(--as-btn-grad);
    color: var(--as-primary-ink);
    font-family: var(--as-font-head);
    font-weight: 700;
    font-size: .78rem;
    text-align: center;
}

.as-hero__visual .as-orb--amber { width: 74px; height: 74px; right: 6%; bottom: 14%; }
.as-hero__visual .as-orb--violet { width: 46px; height: 46px; left: 8%; top: 12%; }
.as-hero__visual .as-orb--rust { width: 26px; height: 26px; right: 18%; top: 8%; }

@media (max-width: 991.98px) {
    .as-hero__grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .as-hero__copy .as-lead { margin-inline: auto; }
    .as-hero__cta,
    .as-hero__stores,
    .as-hero .as-trust { justify-content: center; }
    .as-hero__visual { min-height: 440px; }
    .as-wheel { width: min(460px, 100%); }
}

@media (max-width: 560px) {
    .as-hero__cta .as-btn { flex: 1 1 100%; }
    .as-hero__visual { min-height: 380px; }
    .as-phone { width: 220px; border-radius: 38px; }
    .as-phone__screen { border-radius: 29px; padding-top: 40px; }
    .as-phone__wheel { width: 120px; height: 120px; }
}

/* ============================================================ STAT BAR */
.as-statbar {
    background: var(--as-band-bg);
    border-block: 1px solid var(--as-border);
}

.as-statbar__in {
    display: grid;
    /* As many equal columns as there are facts (three or four), across the whole width. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

.as-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 10px;
    position: relative;
}

.as-stat + .as-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24%;
    bottom: 24%;
    width: 1px;
    background: var(--as-border-2);
}

.as-stat__icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--as-primary-2);
    background: var(--as-primary-soft);
    border: 1.5px solid var(--as-border-2);
    font-size: 1.1rem;
}

.as-stat strong { display: block; font-family: var(--as-font-head); font-size: 1.15rem; font-weight: 800; color: var(--as-text); line-height: 1.2; }
/* The label under the number (not the icon's round span). */
.as-stat > div > span { font-size: .84rem; color: var(--as-muted); text-wrap: balance; }

@media (max-width: 860px) {
    .as-statbar__in { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .as-stat { justify-content: flex-start; gap: 10px; padding: 14px 10px; }
    .as-stat:nth-child(odd)::before { display: none; }
    .as-stat:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }
    .as-stat:nth-child(n + 3) { border-top: 1px solid var(--as-border); }
    .as-stat__icon { width: 36px; height: 36px; font-size: .9rem; }
    .as-stat strong { font-size: 1rem; }
    .as-stat > div > span { display: block; font-size: .76rem; line-height: 1.3; }
}

/* ====================================================== SIGN PICKER */
.as-signs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}

.as-signs__wheel {
    position: relative;
    width: min(440px, 100%);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
}

.as-signs__ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

.as-signs__ring::before {
    content: "";
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    border: 1.5px dashed var(--as-border-2);
}

.as-sign {
    /* left/top come from the page (each sign's place on the ring, in %) */
    position: absolute;
    width: 58px;
    height: 58px;
    margin: 0;
    border-radius: 50%;
    border: 1.5px solid var(--as-border-2);
    background: var(--as-surface);
    color: var(--as-wheel-glyph);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: background-color .2s ease, border-color .2s ease, transform .25s ease, box-shadow .2s ease, color .2s ease;
    box-shadow: var(--as-shadow-sm);
}

.as-sign span:first-child { font-family: var(--as-font-sym); font-size: 1.45rem; line-height: 1; }
.as-sign span + span { position: absolute; bottom: -18px; font-size: .62rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--as-muted); white-space: nowrap; }
.as-sign:hover { border-color: var(--as-primary); }

.as-sign[aria-pressed="true"] {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--as-btn-grad);
    border-color: transparent;
    color: var(--as-primary-ink);
    box-shadow: var(--as-btn-glow);
}

.as-signs__center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 30%, #ffe18a, #ffb000 55%, #e07a00 100%);
    color: #3a2100;
    box-shadow: 0 0 0 10px var(--as-primary-soft), 0 20px 50px -18px rgba(255, 150, 0, .8);
}

:root[data-theme="dark"] .as-signs__center {
    background: radial-gradient(circle at 35% 30%, #2a2214, #120f0a 70%);
    color: var(--as-primary);
    border: 2px solid var(--as-primary);
    box-shadow: 0 0 0 10px rgba(247, 196, 64, .07), 0 0 50px -6px rgba(247, 196, 64, .55);
}

.as-signs__center span { font-family: var(--as-font-sym); font-size: clamp(2.6rem, 2rem + 3vw, 4rem); line-height: 1; }

.as-signs__arrow {
    position: absolute;
    top: 50%;
    margin-top: -21px;
    z-index: 2;
}

.as-signs__arrow--prev { left: -64px; }
.as-signs__arrow--next { right: -64px; }

@media (max-width: 1180px) {
    /* The arrows sit outside the wheel: it gives up their room, so on a 1024 px screen
       the left one does not run off the edge. */
    .as-signs__wheel { width: min(440px, calc(100% - 64px)); }
    .as-signs__arrow--prev { left: -50px; }
    .as-signs__arrow--next { right: -50px; }
}

.as-horo {
    position: relative;
    overflow: hidden;
    padding: clamp(20px, 3vw, 34px);
    border-radius: var(--as-radius-xl);
    background:
        radial-gradient(380px 260px at 100% 0%, rgba(139, 92, 246, .14), transparent 70%),
        radial-gradient(380px 260px at 100% 100%, rgba(255, 170, 40, .16), transparent 70%),
        var(--as-surface);
    min-height: 320px;
}

.as-horo__art {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: clamp(120px, 34%, 210px);
    opacity: .9;
    pointer-events: none;
    filter: var(--as-art-filter);
}

.as-horo__body { position: relative; z-index: 1; max-width: 520px; }
.as-horo--art .as-horo__body { max-width: min(520px, 70%); }

@media (max-width: 640px) {
    .as-horo--art .as-horo__body { max-width: none; }
    .as-horo__art { width: 96px; right: 8px; bottom: auto; top: 8px; opacity: .55; }
}
.as-horo h3 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); font-weight: 800; margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.as-horo h3 span { font-family: var(--as-font-sym); color: var(--as-hl); font-weight: 400; }
.as-horo__dates { color: var(--as-muted); font-size: .9rem; margin: 2px 0 14px; }
.as-horo__text { color: var(--as-text-2); line-height: 1.7; margin: 0 0 16px; min-height: 3.4em; }
.as-horo__areas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.as-horo__areas .as-chip b { color: var(--as-text); }
.as-horo__lucky { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .88rem; color: var(--as-muted); margin-bottom: 18px; }
.as-horo__lucky b { color: var(--as-text); }
.as-horo__dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; border: 1px solid var(--as-border-2); }
.as-horo.is-loading .as-horo__text { opacity: .5; }

@media (max-width: 991.98px) {
    .as-signs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .as-sign { width: 44px; height: 44px; }
    .as-sign span:first-child { font-size: 1.15rem; }
    .as-sign span + span { display: none; }
    .as-signs__arrow { display: none; }
}

/* ======================================================= ASTROLOGERS */
.as-astros {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 20px);
}

.as-astro {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--as-radius-lg);
    background: var(--as-surface);
    border: 1px solid var(--as-border);
    box-shadow: var(--as-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

:root[data-theme="dark"] .as-astro { border-color: rgba(247, 196, 64, .22); }
.as-astro:hover { transform: translateY(-4px); box-shadow: var(--as-shadow-lg); border-color: var(--as-primary); }

.as-astro__media {
    position: relative;
    display: block;
    aspect-ratio: 5 / 4;
    background: radial-gradient(circle at 50% 30%, #ffd98a, #f2a33a 60%, #b8651a);
    overflow: hidden;
}

.as-astro__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .4s ease; }
.as-astro:hover .as-astro__media img { transform: scale(1.04); }
.as-astro__media .as-badge { position: absolute; right: 10px; bottom: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.as-astro__media .as-badge--plain { left: 10px; right: auto; top: 10px; bottom: auto; background: rgba(20, 14, 4, .78); color: #ffd65a; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

.as-astro__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.as-astro__name { font-family: var(--as-font-head); font-size: 1rem; font-weight: 700; color: var(--as-text) !important; text-decoration: none !important; display: flex; align-items: center; gap: 6px; }
.as-astro__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-astro__name i { color: var(--as-online); font-size: .8rem; flex: none; }
.as-astro__skill { font-size: .82rem; color: var(--as-muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-astro__meta { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--as-text-2); margin: 2px 0 0; }
.as-astro__meta .fa-star { color: var(--as-star); }
.as-astro__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.as-astro__price { font-family: var(--as-font-head); font-weight: 800; font-size: 1.05rem; color: var(--as-text); }
.as-astro__price small { font-size: .74rem; font-weight: 500; color: var(--as-muted); }
.as-astro__price del { font-size: .8rem; color: var(--as-muted); font-weight: 500; margin-right: 4px; }

/* An AI astrologer's card (docs/platform/ai-panel/PHASE1_BUILD.md 6.4): the chip keeps its size beside a long name, and
   "AI version of ..." sits under it. The corner chip's place (top right, clear of Free and Online) is as-ui.css's. The
   chip holds its screen-reader words (absolute): without a positioned box of its own they would escape the card and the
   phone's sideways row, and widen the page. */
.as-astro__name .as-badge--ai { flex: none; position: relative; }
.as-astro__versionof { color: var(--as-text-2); }

.as-astro__act {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--as-btn-grad);
    color: var(--as-primary-ink) !important;
    box-shadow: var(--as-btn-glow);
    text-decoration: none !important;
    flex: none;
}

@media (max-width: 1180px) {
    .as-astros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .as-astros > :nth-child(n + 9) { display: none; }
}

@media (max-width: 900px) {
    .as-astros {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(200px, 42%);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        margin-inline: calc(-1 * var(--as-gutter));
        padding-inline: var(--as-gutter);
        scroll-padding-inline: var(--as-gutter);
        scrollbar-width: none;
    }
    .as-astros::-webkit-scrollbar { display: none; }
    .as-astros > * { scroll-snap-align: start; }
    .as-astros > :nth-child(n + 9) { display: flex; }
}

@media (max-width: 560px) {
    .as-astros { grid-auto-columns: 66%; }
}

/* ========================================================== SERVICES */
.as-service {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: var(--as-radius-lg);
    background: var(--as-surface);
    border: 1px solid var(--as-border);
    box-shadow: var(--as-shadow);
    text-decoration: none !important;
    color: inherit;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.as-service:hover { transform: translateY(-3px); border-color: var(--as-border-2); box-shadow: var(--as-shadow-lg); }
.as-service h3 { font-size: 1.04rem; font-weight: 700; }
.as-service p { margin: 3px 0 0; font-size: .86rem; color: var(--as-muted); line-height: 1.45; }
.as-service__go { margin-left: auto; color: var(--as-violet); flex: none; transition: transform .2s ease; }
.as-service:hover .as-service__go { transform: translateX(3px); }

/* ======================================================= TESTIMONIALS */
.as-quotes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
}

.as-quote {
    display: flex;
    gap: 16px;
    padding: 20px;
    border-radius: var(--as-radius-lg);
    background: var(--as-surface);
    border: 1px solid var(--as-border);
    box-shadow: var(--as-shadow);
}

.as-quote blockquote { margin: 0; }
.as-quote__mark { font-family: Georgia, serif; font-size: 2rem; line-height: .6; color: var(--as-primary); display: block; margin-bottom: 6px; }
.as-quote p { margin: 0 0 10px; color: var(--as-text-2); font-size: .92rem; line-height: 1.6; }
.as-quote footer { font-weight: 700; font-size: .9rem; color: var(--as-text); }
.as-quote footer small { display: block; font-weight: 500; color: var(--as-muted); font-size: .76rem; }

@media (max-width: 900px) {
    .as-quotes {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(260px, 80%);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(-1 * var(--as-gutter));
        padding-inline: var(--as-gutter);
        padding-bottom: 8px;
        scrollbar-width: none;
    }
    .as-quotes::-webkit-scrollbar { display: none; }
    .as-quotes > * { scroll-snap-align: start; }
}

/* ========================================================= LIFE AREAS */
.as-area {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: var(--as-radius-lg);
    background: var(--as-surface);
    border: 1px solid var(--as-border);
    text-decoration: none !important;
    transition: transform .2s ease, border-color .2s ease;
}

.as-area:hover { transform: translateY(-2px); border-color: var(--as-primary); }
.as-area h3 { font-size: .98rem; font-weight: 700; }
.as-area p { margin: 2px 0 0; font-size: .8rem; color: var(--as-muted); line-height: 1.4; }
.as-area .as-icon-tile { width: 46px; height: 46px; border-radius: 13px; font-size: 1.1rem; }

@media (max-width: 560px) {
    .as-areas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .as-area { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
    .as-area p { display: none; }
}

/* ============================================================ NUMBERS */
.as-numbers {
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    padding: 8px;
    border-radius: var(--as-radius-lg);
    background: var(--as-surface);
    border: 1px solid var(--as-border);
    box-shadow: var(--as-shadow);
}

.as-numbers > div { text-align: center; padding: 18px 10px; position: relative; }
.as-numbers > div + div::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--as-border-2); }
.as-numbers strong { display: block; font-family: var(--as-font-head); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; color: var(--as-text); }
.as-numbers strong i { color: var(--as-star); font-size: .7em; }
.as-numbers span { font-size: .84rem; color: var(--as-muted); }

@media (max-width: 700px) {
    .as-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .as-numbers > div:nth-child(3)::before { display: none; }
}

.as-press { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 40px; margin-top: 18px; }
.as-press a, .as-press span { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.05rem, .95rem + .6vw, 1.45rem); font-weight: 700; color: var(--as-muted) !important; text-decoration: none !important; letter-spacing: .01em; opacity: .9; transition: color .2s ease, opacity .2s ease; }
.as-press a:hover { color: var(--as-text) !important; opacity: 1; }

/* ============================================================ APP PROMO */
.as-promo {
    position: relative;
    overflow: hidden;
    border-radius: var(--as-radius-xl);
    padding: clamp(24px, 4vw, 52px);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center;
    gap: 24px;
    background:
        radial-gradient(520px 320px at 100% 0%, rgba(139, 92, 246, .28), transparent 65%),
        radial-gradient(520px 320px at 0% 100%, rgba(255, 170, 40, .22), transparent 65%),
        var(--as-surface-2);
    border: 1px solid var(--as-border);
    isolation: isolate;
}

:root[data-theme="dark"] .as-promo {
    background:
        radial-gradient(520px 320px at 100% 0%, rgba(242, 169, 13, .2), transparent 65%),
        radial-gradient(520px 320px at 0% 100%, rgba(124, 58, 237, .18), transparent 65%),
        #120f0b;
}

.as-promo__phone { display: flex; justify-content: center; min-height: 380px; position: relative; }
.as-promo__phone .as-phone { width: 230px; transform: rotate(-5deg); }
.as-promo .as-orb--blue { width: 70px; height: 70px; right: 8%; top: 12%; }

@media (max-width: 860px) {
    .as-promo { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .as-promo .as-hero__stores,
    .as-promo .as-trust { justify-content: center; }
    .as-promo__phone { display: none; }
}

/* ========================================================= WHY ASTROLOGY */
.as-why {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}

.as-why__art {
    position: relative;
    border-radius: var(--as-radius-xl);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    max-width: 500px;
    justify-self: center;
    width: 100%;
    box-shadow: var(--as-shadow-lg), 0 0 0 1px var(--as-border);
}

.as-why__art img { width: 100%; height: 100%; object-fit: cover; }
.as-why__art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 70%, transparent 50%, rgba(0, 0, 0, .25)); }
.as-why h2 { margin: 10px 0 4px; }
.as-why h2 + p.as-h3 { font-weight: 500; color: var(--as-text-2); margin: 0 0 16px; }

@media (max-width: 860px) {
    .as-why { grid-template-columns: minmax(0, 1fr); }
    .as-why__art { max-width: 420px; order: -1; }
}

/* ================================================================== FAQ */
.as-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }

@media (max-width: 760px) {
    .as-faq { grid-template-columns: minmax(0, 1fr); }
}