/* ─── Android Hero Section ─── */

/* =========================
   OUTER WRAPPER
========================= */
.android-hero {
    width: 100% !important;
    /* shared section width across all sections */
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 80px 24px !important;
    box-sizing: border-box !important;
    font-family: 'Open Sans', sans-serif !important;
}

/* =========================
   MAIN BOX
========================= */
.android-hero__box {
    width: 100% !important;
    height: 392px !important;
    border: 1px solid #DDDDDD !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: none !important;
    /* background: #fff !important; */
}

/* =========================
   LEFT PANEL
========================= */
.android-hero__left {
    /* shrinkable (0 1) so the copy panel yields width to the image instead of
       overflowing the box on laptop widths (1025–1240px) */
    flex: 0 1 628px !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 37px 0 36px !important;
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

.android-hero__left-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Badge */
.android-hero__badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* compact pill that wraps its text (no forced single line), with a
       little left/right breathing room */
    width: fit-content !important;
    max-width: 300px !important;
    min-height: 57px !important;
    margin-top: 18px !important;
    padding: 10px 26px !important;
    border-radius: 160px !important;
    background: linear-gradient(94.83deg, #35B6FF 5.75%, #1877F2 88.58%) !important;
    margin-bottom: 4px !important;
    border: none !important;
    box-shadow: none !important;
}

.android-hero__badge-text {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    text-align: center !important;
}

/* Title */
.android-hero__title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 40px !important;
    line-height: 110% !important;
    color: #191919 !important;
    margin: 18px 0 18px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Description */
.android-hero__desc {
    font-family: 'Google Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: #778AA9 !important;
    margin: 0 0 0 !important;
    padding: 0 0 13px 0 !important;
}

/* CTA Button */
.android-hero__btn,
.android-hero__btn:link,
.android-hero__btn:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    min-width: 240px !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 60px !important;
    line-height: 1 !important;
    padding: 8px 24px !important;
    box-sizing: border-box !important;
    border-radius: 30px !important;
    background: linear-gradient(240.87deg, #EDF8FF 4.57%, #35B6FF 106.19%) !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    margin-top: 12px !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    box-shadow: none !important;
    outline: none !important;
}

.android-hero__btn:hover,
.android-hero__btn:focus {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
    background: linear-gradient(240.87deg, #EDF8FF 4.57%, #35B6FF 106.19%) !important;
    color: #191919 !important;
}

.android-hero__btn::before,
.android-hero__btn::after {
    display: none !important;
    content: none !important;
}

.android-hero__btn-text {
    font-family: 'Google Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    color: #191919 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.android-hero__btn-arrow {
    display: flex !important;
    align-items: center !important;
    color: #191919 !important;
    line-height: 1 !important;
}

.android-hero__btn-arrow svg {
    display: block !important;
}

/* =========================
   RIGHT IMAGE PANEL
========================= */
.android-hero__right {
    flex: 1 1 0 !important;
    position: relative !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

.android-hero__right-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right center !important;
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-shadow: none !important;
}

/* White fade — left edge of image blends into text panel */
.android-hero__right-fade {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 302px !important;
    height: 100% !important;
    background: linear-gradient(274.74deg, rgba(255,255,255,0) 3.83%, #FFFFFF 96.17%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* =========================
   DESKTOP ROW LAYOUT (≥ 1241px)
   Box grows to the image so the WHOLE image is shown — never cropped.
   Fixed height becomes a minimum; a shorter image is centered, a taller
   image makes the box grow to fit it fully.
   Below 1241px the image was too small beside the copy, so 1025–1240 now uses
   the stacked layout (image first, full width — see the ≤1240 block).
========================= */
@media (min-width: 1241px) {
    .android-hero__box {
        height: auto !important;
        min-height: 392px !important;
    }
    .android-hero__right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        overflow: visible !important;
    }
    .android-hero__right-img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: right center !important;
    }

    /* CTA button — compact pill, per the Figma.
       .android-hero__left-inner is a flex COLUMN, whose default
       `align-items: stretch` was pulling the button across the entire copy
       column (~555px). `min-width` is only a floor, so it never pushed back.
       Anchoring the button to the start lets it size to its own content again;
       the floor below is the Figma's ~19.6% of the card width.
       Desktop only — the ≤1240px stacked layout keeps its current button. */
    .android-hero__btn,
    .android-hero__btn:link,
    .android-hero__btn:visited {
        align-self: flex-start !important;
        width: fit-content !important;
        min-width: 275px !important;
    }
}

/* =========================
   RESPONSIVE — Laptop (≤ 1180px)
========================= */
@media (max-width: 1180px) {
    .android-hero {
        padding: 70px 32px !important;
    }
    .android-hero__left {
        flex: 0 1 500px !important;
        min-width: 0 !important;
        padding: 0 32px 0 48px !important;
    }
    .android-hero__box {
        height: auto !important;
        min-height: 360px !important;
    }
    .android-hero__desc {
        font-size: 19px !important;
    }
}

/* =========================
   RESPONSIVE — Tablet / laptop (≤ 1240px)
   Stacked layout: image FIRST (full width, so it's large) then the copy below.
   Extended up from ≤1024px because on 1025–1240px laptops the side-by-side
   image was too small.
========================= */
@media (max-width: 1240px) {
    .android-hero {
        padding: 60px 30px !important;
    }
    .android-hero__box {
        flex-direction: column !important;
        height: auto !important;
        border-radius: 30px !important;
        border: none !important;
        overflow: hidden !important;
    }
    /* Image panel: auto height so the full image is never cropped */
    .android-hero__right {
        order: 1 !important;
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    .android-hero__right-img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center top !important;
    }
    .android-hero__right-fade {
        display: none !important;
    }
    .android-hero__left {
        order: 2 !important;
        flex: none !important;
        width: 100% !important;
        padding: 28px 30px 40px 30px !important;
        align-items: flex-start !important;
        background: #ffffff !important;
    }
    .android-hero__badge-text { font-size: 17px !important; }
    .android-hero__title      { font-size: 30px !important; }
    .android-hero__desc       { font-size: 17px !important; }
    .android-hero__btn        { min-width: 230px !important; height: auto !important; min-height: 56px !important; }
}

/* =========================
   RESPONSIVE — Mobile (≤ 768px)
========================= */
@media (max-width: 768px) {
    .android-hero {
        padding: 40px 20px !important;
    }
    .android-hero__box {
        border-radius: 24px !important;
    }
    .android-hero__left  { padding: 24px 20px 36px 20px !important; }
    .android-hero__badge { width: 185px !important; height: 50px !important; }
    .android-hero__badge-text { font-size: 15px !important; }
    .android-hero__title      { font-size: 26px !important; }
    .android-hero__desc       { font-size: 15px !important; }
    .android-hero__btn        { min-width: 200px !important; height: auto !important; min-height: 50px !important; border-radius: 25px !important; }
}

/* =========================
   RESPONSIVE — Small Mobile (≤ 480px)
========================= */
@media (max-width: 480px) {
    .android-hero {
        padding: 32px 16px !important;
    }
    .android-hero__box {
        border-radius: 20px !important;
    }
    .android-hero__left  { padding: 20px 16px 28px 16px !important; }
    .android-hero__title { font-size: 22px !important; }
    .android-hero__desc  { font-size: 13px !important; }
    .android-hero__btn   { min-width: 180px !important; max-width: 100% !important; height: auto !important; min-height: 46px !important; border-radius: 23px !important; gap: 10px !important; }
    .android-hero__btn-text { font-size: 13px !important; }
    .android-hero__badge { width: 168px !important; height: 46px !important; }
    .android-hero__badge-text { font-size: 13px !important; }
}

/* =========================
   SCROLL-REVEAL — "Converge" entrance
   Copy block slides in from the LEFT, image/mockup slides in from
   the RIGHT; both fade + settle together with a slight stagger.
   Slow & elegant. opacity + transform only (no layout shift).
========================= */

/* ========================================================
   Scroll-reveal entrance — "Rise, Focus & Tilt"  (premium, new)
   `.android-hero-reveal` is server-rendered (hidden from the first
   paint, no flicker); JS adds `.android-hero-in` once the hero is on
   screen — in EVERY state. The copy column rises up and focuses in
   from a soft blur; the visual settles up out of a gentle 3D tilt +
   scale. Animating the WHOLE __left / __right blocks (not their
   children) keeps the button's own fast hover transition intact.
   ======================================================== */
.android-hero.android-hero-reveal .android-hero__left,
.android-hero.android-hero-reveal .android-hero__right {
    opacity: 0 !important;
    will-change: opacity, transform, filter;
    transition:
        opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Copy column: rises up and focuses in from a soft blur. */
.android-hero.android-hero-reveal .android-hero__left {
    transform: translateY(38px) !important;
    filter: blur(9px);
    transition-delay: 0.06s !important;
}

/* Visual: settles up out of a gentle 3D tilt + scale, a beat later. */
.android-hero.android-hero-reveal .android-hero__right {
    transform: perspective(1300px) rotateY(-9deg) translateY(30px) scale(0.9) !important;
    transform-origin: 60% 50%;
    transition-delay: 0.22s !important;
}

/* Revealed resting state (added by IntersectionObserver). */
.android-hero.android-hero-in .android-hero__left,
.android-hero.android-hero-in .android-hero__right {
    opacity: 1 !important;
    transform: none !important;
    filter: blur(0) !important;
}

/* Reduced-motion: no travel/tilt/blur — appear in place. */
@media (prefers-reduced-motion: reduce) {
    .android-hero.android-hero-reveal .android-hero__left,
    .android-hero.android-hero-reveal .android-hero__right,
    .android-hero.android-hero-in .android-hero__left,
    .android-hero.android-hero-in .android-hero__right {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}