/* Homepage: Figma Frame 6 (7972:762), 1440 × 787.
   Keep these rules scoped so job pages and later sections retain their styles. */
@font-face {
    font-family: 'Home PuHuiTi';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../vendor/fonts/home-puhuiti-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Home PuHuiTi';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../vendor/fonts/home-puhuiti-semibold.ttf') format('truetype');
}

@font-face {
    font-family: 'Home PuHuiTi';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../vendor/fonts/home-puhuiti-extrabold.ttf') format('truetype');
}

.home-page {
    --home-unit: min(0.0694444444vw, 1px);
    --home-cjk: 'Home PuHuiTi', sans-serif;
}

.home-page .nav {
    height: calc(96 * var(--home-unit));
    padding: calc(36 * var(--home-unit)) max(calc(80 * var(--home-unit)), calc((100vw - 1440px) / 2 + 80px));
    align-items: flex-start;
}

.home-page .nav-logo {
    display: flex;
    align-items: flex-start;
    gap: calc(8 * var(--home-unit));
    height: calc(24 * var(--home-unit));
    color: #fff;
    font-size: calc(24 * var(--home-unit));
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.home-page .nav-brand-mark {
    width: calc(43 * var(--home-unit));
    height: calc(18 * var(--home-unit));
    margin-top: calc(1 * var(--home-unit));
    object-fit: contain;
}

.nav-wordmark {
    width: calc(166 * var(--home-unit));
    height: calc(24 * var(--home-unit));
}

.home-page .nav.nav-light .nav-wordmark,
.home-page .nav.nav-brand .nav-wordmark { filter: brightness(0); }
.home-page .nav.nav-brand .nav-brand-mark { filter: brightness(0); }

.home-page .nav-links {
    display: flex;
    flex: 0 0 calc(320 * var(--home-unit));
    width: calc(320 * var(--home-unit));
    gap: calc(40 * var(--home-unit));
}

.home-page .nav-links a {
    flex: 0 0 calc(32 * var(--home-unit));
    width: calc(32 * var(--home-unit));
    font-family: var(--home-cjk);
    font-size: calc(16 * var(--home-unit));
    font-weight: 400;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.home-page .hero {
    display: grid;
    align-items: center;
    min-height: 100svh;
    overflow: clip;
    background: #060505;
    isolation: isolate;
}

.hero-stage {
    position: relative;
    width: min(100%, 1440px);
    height: calc(787 * var(--home-unit));
    margin: 0 auto;
}

.hero-background {
    position: absolute;
    z-index: -1;
    top: calc(19 * var(--home-unit));
    left: 0;
    width: calc(1440.8668 * var(--home-unit));
    height: calc(922 * var(--home-unit));
    max-width: none;
    object-fit: cover;
    opacity: .71;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15625) 5%, rgba(0,0,0,.5) 10%, rgba(0,0,0,.84375) 15%, #000 20%, #000 80%, rgba(0,0,0,.84375) 85%, rgba(0,0,0,.5) 90%, rgba(0,0,0,.15625) 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15625) 5%, rgba(0,0,0,.5) 10%, rgba(0,0,0,.84375) 15%, #000 20%, #000 80%, rgba(0,0,0,.84375) 85%, rgba(0,0,0,.5) 90%, rgba(0,0,0,.15625) 95%, transparent 100%);
    pointer-events: none;
}

.home-page .hero-content {
    position: relative;
    z-index: 2;
    width: calc(491 * var(--home-unit));
    max-width: none;
    margin: 0;
    padding: calc(224 * var(--home-unit)) 0 0;
    margin-left: calc(140 * var(--home-unit));
    font-family: var(--home-cjk);
}

.home-page .hero-title {
    margin: 0;
    font-family: var(--home-cjk);
    font-size: calc(58 * var(--home-unit));
    font-weight: 800;
    line-height: 1;
    letter-spacing: calc(-2.9 * var(--home-unit));
}

.home-page .hero-title .line {
    overflow: visible;
    padding: 0;
    white-space: nowrap;
}

.home-page .hero-title .line + .line {
    margin-top: calc(8.032 * var(--home-unit));
}

.home-page .hero-title .line:first-child {
    /* Figma's layout box is fractional; the SVG export has whole-pixel bounds. */
    height: 1.004em;
}

.hero-headline {
    width: 7.9655172414em;
    height: auto;
    max-width: none;
}

.home-page .hero-title .line-inner {
    white-space: nowrap !important;
    transform: none;
    transition: none;
}

.home-page .hero-subtitle {
    width: calc(390 * var(--home-unit));
    height: calc(90.36 * var(--home-unit));
    max-width: none;
    margin: calc(36.376 * var(--home-unit)) 0 0;
    color: #dadadb;
    font-family: var(--home-cjk);
    font-size: calc(20 * var(--home-unit));
    font-weight: 400;
    line-height: calc(30 * var(--home-unit));
    letter-spacing: calc(-2 * var(--home-unit));
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.hero-subtitle-art {
    width: calc(390 * var(--home-unit));
    height: auto;
    max-width: none;
}

.hero-subtitle-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hero-subtitle strong,
.hero-subtitle .hero-latin {
    font-weight: 700;
}

.hero-subtitle strong { color: #ffd600; }

.home-page .hero-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: calc(12 * var(--home-unit));
    margin-top: calc(35 * var(--home-unit));
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.home-page .hero-actions .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: calc(7.5 * var(--home-unit));
    width: calc(150 * var(--home-unit));
    height: calc(54 * var(--home-unit));
    padding: 0;
    border: 0;
    border-radius: calc(86 * var(--home-unit));
    color: #0a0a0f;
    background: #fad600;
    font-family: var(--home-cjk);
    font-size: calc(17 * var(--home-unit));
    font-weight: 600;
    line-height: calc(18 * var(--home-unit));
    letter-spacing: calc(-1.19 * var(--home-unit));
    box-shadow: none;
}

.home-page .hero-actions .btn-ghost {
    width: calc(128 * var(--home-unit));
    border: 1px solid rgba(255,255,255,.34);
    color: #fefeff;
    background: rgba(255,255,255,.12);
}

.hero-action-arrow {
    font-size: 1em;
    line-height: 1;
    letter-spacing: normal;
}

.hero-visual { position: absolute; inset: 0; pointer-events: none; }

.hero-phone-backdrop {
    position: absolute;
    left: calc(903.5945 * var(--home-unit));
    top: calc(183.4818 * var(--home-unit));
    width: calc(357.7099 * var(--home-unit));
    height: calc(427.3524 * var(--home-unit));
    border-radius: calc(54.389 * var(--home-unit));
    /* t=a*x/W+b*y/H+c from the original Figma gradientTransform.
       CSS stop=(Figma stop-c)/(a+b); the first stop is negative. */
    background: linear-gradient(144.44361818443923deg,
        rgb(100% 96.63461446762085% 59.61538553237915%) -9.346643567032917%,
        rgb(100% 83.92156958580017% 0%) 41.489802638309556%,
        rgb(100% 71.66666388511658% 0%) 94.91684613546553%);
}

.hero-phone-layer {
    position: absolute;
    display: grid;
    place-items: center;
    left: calc(532.9449 * var(--home-unit));
    top: calc(-.4425 * var(--home-unit));
    width: calc(1122.2787 * var(--home-unit));
    height: calc(655.536 * var(--home-unit));
}

.hero-phone-viewport {
    position: relative;
    width: calc(1066.827 * var(--home-unit));
    height: calc(533.494 * var(--home-unit));
    transform: rotate(-6.77deg);
    overflow: hidden;
}

.hero-phone-viewport img {
    position: absolute;
    top: 0;
    left: -.01%;
    width: 100.02%;
    height: 149.98%;
    max-width: none;
}

.hero-phone-layer-masked {
    width: calc(1127.2037 * var(--home-unit));
    height: calc(697.0238 * var(--home-unit));
    /* 7984:896 is an unrotated mask in parent group 7984:895.
       Mask the outer layer, not the rotated image viewport. */
    -webkit-mask-image: url('../images/hero/phone-mask.svg');
    mask-image: url('../images/hero/phone-mask.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: calc(350.814 * var(--home-unit)) calc(182.072 * var(--home-unit));
    mask-position: calc(350.814 * var(--home-unit)) calc(182.072 * var(--home-unit));
    -webkit-mask-size: calc(389.463 * var(--home-unit)) calc(428.312 * var(--home-unit));
    mask-size: calc(389.463 * var(--home-unit)) calc(428.312 * var(--home-unit));
}

.hero-phone-layer-masked .hero-phone-viewport {
    height: calc(575.273 * var(--home-unit));
}

.hero-phone-layer-masked img { height: 139.09%; }

.hero-cart {
    position: absolute;
    left: calc(827 * var(--home-unit));
    top: calc(284 * var(--home-unit));
    width: calc(139.8425 * var(--home-unit));
    height: calc(150 * var(--home-unit));
    overflow: hidden;
}

.hero-cart img {
    position: absolute;
    left: -21.79%;
    top: 0;
    width: 324.49%;
    height: 128.98%;
    max-width: none;
}

.hero-product {
    position: absolute;
    /* Keep Figma's transparent PASS_THROUGH group out of the backdrop root.
       Only the painted glass and QR children need stacking positions. */
    z-index: auto;
    left: calc(724 * var(--home-unit));
    top: calc(489 * var(--home-unit));
    width: calc(273 * var(--home-unit));
    min-height: calc(151 * var(--home-unit));
    padding-top: calc(78 * var(--home-unit));
    font-family: var(--home-cjk);
    color: #fff;
}

.hero-product-info {
    position: absolute;
    z-index: 3;
    top: 0;
    width: 100%;
    height: calc(151 * var(--home-unit));
    border: calc(.992 * var(--home-unit)) solid rgba(225,199,101,.25);
    border-radius: calc(23.799 * var(--home-unit));
    background: rgba(40,39,32,.75);
    -webkit-backdrop-filter: blur(calc(11.899 * var(--home-unit)));
    backdrop-filter: blur(calc(11.899 * var(--home-unit)));
}

.hero-app-icon {
    position: absolute;
    left: calc(23.2636 * var(--home-unit));
    top: calc(19.4191 * var(--home-unit));
    width: calc(45.3842 * var(--home-unit));
    height: calc(45.3842 * var(--home-unit));
    border-radius: calc(9.077 * var(--home-unit));
    object-fit: cover;
}

.hero-product-name,
.hero-product-description {
    position: absolute;
    left: calc(79.5397 * var(--home-unit));
    white-space: nowrap;
    line-height: calc(16.338 * var(--home-unit));
}

.hero-product-name {
    top: calc(22.1428 * var(--home-unit));
    font-size: calc(18.154 * var(--home-unit));
    font-weight: 600;
}

.hero-product-description {
    top: calc(45.7424 * var(--home-unit));
    font-size: calc(14.523 * var(--home-unit));
    font-weight: 400;
    opacity: .81;
}

.hero-download {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    top: 0;
    width: calc(212 * var(--home-unit));
    height: calc(53 * var(--home-unit));
    border-radius: calc(10 * var(--home-unit));
    background: #fad600;
    color: #0a0a0f;
    text-align: center;
}

.hero-download-default-label,
.hero-download-label {
    display: block;
    font-size: calc(16.786 * var(--home-unit));
    font-weight: 600;
    line-height: calc(17.774 * var(--home-unit));
    letter-spacing: calc(-1.175 * var(--home-unit));
}

.hero-download-panel {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: calc(212 * var(--home-unit));
    height: calc(197 * var(--home-unit));
    border-radius: calc(10 * var(--home-unit));
    background: #fad600;
    visibility: hidden;
    pointer-events: none;
}

.hero-download-label { margin-top: calc(17.4528 * var(--home-unit)); }

.hero-download:focus-visible { height: calc(197 * var(--home-unit)); }
.hero-download:focus-visible .hero-download-panel {
    visibility: visible;
    pointer-events: auto;
}
.hero-download:focus-visible .hero-download-default-label { visibility: hidden; }

.hero-qr {
    position: absolute;
    left: calc(48 * var(--home-unit));
    top: calc(52 * var(--home-unit));
    width: calc(117 * var(--home-unit));
    height: calc(117 * var(--home-unit));
    overflow: hidden;
    mix-blend-mode: multiply;
}

.hero-qr img {
    display: block;
    width: 100%;
    height: 100%;
}

.home-page .nav a:focus-visible,
.home-page .hero a:focus-visible {
    outline: 3px solid #ffd600;
    outline-offset: 5px;
}

.home-page .nav.nav-brand a:focus-visible,
.home-page .nav.nav-light a:focus-visible { outline-color: #0a0a0f; }

.home-page .hero-actions .btn-primary:focus-visible,
.home-page .hero-download:focus-visible { outline-color: #fff; }

@media (hover: hover) {
    .home-page .hero-actions .btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
    .home-page .hero-actions .btn-ghost:hover { background: rgba(255,255,255,.2); }
    .hero-download:hover { height: calc(197 * var(--home-unit)); }
    .hero-download:hover .hero-download-panel {
        visibility: visible;
        pointer-events: auto;
    }
    .hero-download:hover .hero-download-default-label { visibility: hidden; }
}

/* Reserve the stacked layout for narrow portrait windows; square and wider
   windows keep the scaled desktop composition. */
@media (max-width: 767px) and (max-aspect-ratio: 4/5) {
    .home-page { --home-unit: 1px; }
    .home-page .hero { align-items: start; }
    .home-page .nav {
        height: auto;
        padding: 22px 24px 16px;
        gap: 20px;
        flex-wrap: wrap;
    }
    .home-page .nav-logo { font-size: 22px; height: 24px; gap: 8px; }
    .home-page .nav-brand-mark { width: 39.42px; height: 16.5px; margin-top: 1px; }
    .home-page .nav-links { display: flex; flex: 1 0 100%; width: 100%; justify-content: space-between; gap: 12px; }
    .home-page .nav-links a { flex: 0 1 auto; width: auto; font-size: 14px; line-height: 20px; }
    .hero-stage { height: auto; padding-bottom: 32px; }
    .hero-background { top: 0; width: 100%; height: max(100%, 100svh); object-fit: cover; object-position: 67% center; }
    .home-page .hero-content { width: auto; margin: 0 24px; padding-top: 146px; }
    .home-page .hero-title { font-size: clamp(30px, 7.7vw, 46px); letter-spacing: -.05em; }
    .home-page .hero-title .line + .line { margin-top: 10px; }
    .home-page .hero-subtitle { width: min(390px, 100%); height: auto; margin-top: 28px; font-size: 18px; line-height: 29px; letter-spacing: -1.2px; }
    .hero-subtitle-art { display: none; }
    .hero-subtitle-copy { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
    .home-page .hero-actions { margin-top: 28px; gap: 12px; }
    .home-page .hero-actions .btn { width: 150px; height: 54px; font-size: 17px; line-height: 18px; }
    .home-page .hero-actions .btn-ghost { width: 128px; }
    .hero-visual {
        --home-unit: min(.1666666667vw, .75px);
        position: relative;
        width: 100%;
        height: calc(460 * var(--home-unit));
        margin-top: 44px;
        overflow: visible;
    }
    .hero-phone-backdrop { left: calc(50% - 178.855 * var(--home-unit)); top: 0; }
    .hero-phone-layer { left: calc(50% - 549.5046 * var(--home-unit)); top: calc(-183.9243 * var(--home-unit)); }
    .hero-cart { left: calc(50% - 255.4495 * var(--home-unit)); top: calc(100.5182 * var(--home-unit)); }
    .hero-product {
        position: relative;
        left: auto;
        top: auto;
        margin: -58px auto 0;
        width: 273px;
    }
}

@media (min-width: 600px) and (max-width: 767px) and (max-aspect-ratio: 4/5) {
    .home-page .hero-content { margin-right: 48px; margin-left: 48px; padding-top: 124px; }
    .home-page .hero-title { font-size: 40px; }
    .home-page .hero-subtitle { width: min(560px, 100%); margin-top: 20px; line-height: 28px; }
    .home-page .hero-actions { margin-top: 20px; }
    .home-page .hero-actions .btn { height: 50px; }
    .hero-visual { --home-unit: .6px; margin-top: 24px; }
}

@media (max-width: 359px) and (max-aspect-ratio: 4/5) {
    .home-page .nav { padding-right: 20px; padding-left: 20px; }
    .home-page .hero-content { margin-right: 20px; margin-left: 20px; }
    .home-page .hero-title { font-size: 29px; }
    .home-page .hero-actions { gap: 10px; }
    .home-page .hero-actions .btn { width: 142px; }
    .home-page .hero-actions .btn-ghost { width: 124px; }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .hero a { transition: none; }
    .home-page .hero-actions .btn:hover { transform: none; }
}