/* ============================================================
   首頁首圖 (.banner) — 需求 3 / 4 / 5
   ------------------------------------------------------------
   Additive stylesheet, loaded after style.css and only by
   index.html, so no other page is affected.

   需求 3  "SKYPAY" 變成上方小字，主標改為 H1
   需求 4  主標放大到約佔畫面一半
   需求 5  藍/綠對話氣泡（.banner_main1 / .banner_main2）已從
           index.html 移除，這裡不再需要對應樣式

   Uses the site's rem scale: 1rem = 5.208vw desktop, 13.333vw <=992px.
   ============================================================ */

/* The old headline sat over the darker left third of the photo. The new one is
   roughly 3x bigger and reaches into the bright middle of the frame, so it
   needs its own scrim — white-on-photo alone is not readable there. */
.banner_img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(
            96deg,
            rgba(8, 24, 42, 0.72) 0%,
            rgba(8, 24, 42, 0.58) 26%,
            rgba(8, 24, 42, 0.32) 46%,
            rgba(8, 24, 42, 0.08) 66%,
            rgba(8, 24, 42, 0) 82%
    );
}

/* style.css:38 leaves .banner_main unlayered; it has to clear the scrim */
.banner_img .banner_main {
    z-index: 2;
}

/* The small "SKYPAY" eyebrow that used to sit above the H1 has been removed —
   the logo already carries the brand in the header, so it was saying it twice.
   Its .banner_eyebrow rules are gone with it. */

/* ---------- CTA ----------
   style.css:69 hard-codes the button at 2.9rem, which was sized for the
   4-character 开始试用. A 6-character label only just squeezes in, so let the
   button hug its own label instead — it can then change again without clipping.
   fit-content, NOT auto: .banner_btn is block-level, so `auto` stretches it to
   the full width of .banner_main (~880px now, because of the big H1). */
.banner_main .banner_btn {
    width: fit-content;
    min-width: 2.9rem;
    padding: 0 0.4rem;
}

/* ---------- 需求 4：主標放大 ---------- */

/* 1.1rem = 110px at 1920. The longer line is 8 glyphs, so the block runs about
   880px — roughly half the viewport, which is what "佔畫面 50%" asks for.
   max-width is a guard, not the driver: it keeps the line from running under
   the header nav on ultra-wide screens. */
.banner_main .banner_h1 {
    margin: 0;
    font-family: "SourceHanSansSCBold" !important;
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #ffffff;
    max-width: 11rem;
    text-shadow: 0 0.04rem 0.24rem rgba(6, 20, 36, 0.35);
}

/* the description was tuned against a 0.3rem headline — give it room again */
.banner_main .banner_desc {
    margin-top: 0.36rem;
    font-size: 0.18rem;
    width: auto;
    max-width: 6.4rem;
    color: rgba(255, 255, 255, 0.94);
}

/* ---------- 手機 ---------- */

@media (max-width: 992px) {
    /* 8 glyphs at 0.8rem is ~85% of a 500px screen — the mobile equivalent of
       the desktop "half the screen" brief. */
    .banner_main .banner_h1 {
        font-size: 0.8rem;
        line-height: 1.18;
        max-width: none;
    }

    .banner_main .banner_desc {
        margin-top: 0.28rem;
        font-size: 0.26rem;
        max-width: none;
    }

    /* the copy fills the width here, so the scrim runs top-to-bottom */
    .banner_img::after {
        background-image: linear-gradient(
                180deg,
                rgba(8, 24, 42, 0.34) 0%,
                rgba(8, 24, 42, 0.12) 34%,
                rgba(8, 24, 42, 0.52) 72%,
                rgba(8, 24, 42, 0.72) 100%
        );
    }
}