/* 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 {
    --logo-mark-w: calc(43 * var(--home-unit));
    --logo-mark-h: calc(18 * var(--home-unit));
    --logo-mark-top: calc(1 * var(--home-unit));
    --logo-gap: calc(8 * var(--home-unit));
    --logo-word-w: calc(166 * var(--home-unit));
    --logo-word-h: calc(24 * var(--home-unit));
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--logo-gap);
    height: var(--logo-word-h);
    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: var(--logo-mark-w);
    height: var(--logo-mark-h);
    margin-top: var(--logo-mark-top);
    object-fit: contain;
}

.nav-wordmark {
    width: var(--logo-word-w);
    height: var(--logo-word-h);
}

/* Logo 悬停扫光：用 logo 图形本身做遮罩，光只落在笔画上。
   两层都铺满整个 logo，渐变坐标一致，看起来是同一道光依次扫过图形和文字。
   文字本身是白色，白光看不出，所以文字层用品牌黄。移开时不加过渡，直接复位。
   光晕挂在外层 .nav-logo-glow 上：filter 会被同元素的遮罩裁掉，必须放在遮罩外面。 */
.home-page .nav-logo-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-page .nav-logo-glow-mark { --glow-color: rgba(255, 255, 255, .9); }
.home-page .nav-logo-glow-word { --glow-color: rgba(255, 214, 0, .9); }

.home-page .nav-logo-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 32%, var(--shine-color) 46%, #fff 50%, var(--shine-color) 54%, transparent 68%) 100% 0 / 300% 100% no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.home-page .nav-logo-shine-mark {
    --shine-color: #fff;
    -webkit-mask-image: url('../images/hero/brand.png');
    mask-image: url('../images/hero/brand.png');
    -webkit-mask-size: var(--logo-mark-w) var(--logo-mark-h);
    mask-size: var(--logo-mark-w) var(--logo-mark-h);
    -webkit-mask-position: 0 var(--logo-mark-top);
    mask-position: 0 var(--logo-mark-top);
}

.home-page .nav-logo-shine-word {
    --shine-color: #FFD600;
    -webkit-mask-image: url('../images/hero/wordmark.svg');
    mask-image: url('../images/hero/wordmark.svg');
    -webkit-mask-size: var(--logo-word-w) var(--logo-word-h);
    mask-size: var(--logo-word-w) var(--logo-word-h);
    -webkit-mask-position: calc(var(--logo-mark-w) + var(--logo-gap)) 0;
    mask-position: calc(var(--logo-mark-w) + var(--logo-gap)) 0;
}

/* 黄底导航时字是黑的，黄光会让字融进底色，改用白光 */
.home-page .nav.nav-brand .nav-logo-shine-word { --shine-color: #fff; }
.home-page .nav.nav-brand .nav-logo-glow { --glow-color: rgba(255, 255, 255, .95); }

.home-page .nav-logo:hover .nav-logo-shine,
.home-page .nav-logo:focus-visible .nav-logo-shine {
    background-position: 0 0;
    transition: background-position 900ms cubic-bezier(.4, 0, .2, 1);
}

.home-page .nav-logo:hover .nav-logo-glow,
.home-page .nav-logo:focus-visible .nav-logo-glow {
    animation: nav-logo-glow 960ms ease-out;
}

@keyframes nav-logo-glow {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    12.5%, 80% { filter: drop-shadow(0 0 calc(6 * var(--home-unit)) var(--glow-color)); }
}

.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;
}

/* 悬停反馈: 文字下面划出一条同色下划线 (颜色跟着当前底色走, 深色 / 浅色 / 品牌黄底都看得见)。
   style.css 里原来的 :hover 在深色、品牌黄底上和平时同色, 等于没有悬停效果。 */
.home-page .nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-7 * var(--home-unit));
    height: calc(2 * var(--home-unit));
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s var(--ease-out);
}

.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;
    /* 右侧黄色底板在 1440 设计稿里的位置 (无单位)。底板自己和下载卡片都从这里取值,
       卡片的左边 / 下边才能一直和底板的左边 / 下边对齐, 不会改一边忘了另一边。 */
    --backdrop-left: 903.5945;
    --backdrop-top: 183.4818;
    --backdrop-width: 357.7099;
    --backdrop-height: 427.3524;
}

.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;
}

/* 副标题用真实文字渲染（原为 Figma 导出的 subtitle.svg，改文案需重新导出，故改为
   同字体 Home PuHuiTi 的实时文字；字距/行高/色值沿用设计稿） */
.home-page .hero-subtitle {
    width: calc(450 * 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));
    /* -2px 的字距同样压缩了词间空格，西文与中文之间会黏在一起，这里补回来 */
    word-spacing: calc(2 * var(--home-unit));
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* 高亮词是西文：不吃中文的 -2px 字距、不额外加词距，且整词不拆行 */
.hero-subtitle-copy strong {
    letter-spacing: 0;
    word-spacing: 0;
    white-space: nowrap;
}

.hero-subtitle strong {
    font-weight: 700;
    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(var(--backdrop-left) * var(--home-unit));
    top: calc(var(--backdrop-top) * var(--home-unit));
    width: calc(var(--backdrop-width) * var(--home-unit));
    height: calc(var(--backdrop-height) * 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));
}

/* 手机整体逆时针歪了 6.77°, 左下角会比黄色底板的下边多探出 2~3px。以前下载卡片盖在上面,
   卡片贴到底板下边以后这一角会露在卡片底下, 像根白色毛刺, 所以在底板下边处裁平。
   611.2767 = 底板下边到这一层顶边的距离 (183.9243 + 427.3524), 桌面 / 窄屏两套布局里都一样。 */
.hero-phone-layer:not(.hero-phone-layer-masked) {
    clip-path: inset(0 0 calc((655.536 - 611.2767) * var(--home-unit)) 0);
}

.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;
    --download-ease: cubic-bezier(.22, 1, .36, 1);
    --download-resize: 360ms;
    --download-size: calc(202 * var(--home-unit));
    --download-gap: calc(24 * var(--home-unit));
    --download-frame-size: calc(var(--download-size) + 2 * var(--download-gap));
    --product-height: 151;
    /* 左边按 Figma (节点 7928:74, x=774) 压在黄色底板左侧外面, 下边对齐底板的下边
       (展开扫码时卡片贴着下边往上长, 下边不动) */
    left: calc(774 * var(--home-unit));
    top: calc((var(--backdrop-top) + var(--backdrop-height) - var(--product-height)) * var(--home-unit));
    width: calc(273 * var(--home-unit));
    height: calc(var(--product-height) * var(--home-unit));
    font-family: var(--home-cjk);
    color: #fff;
}

.hero-product-info {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: calc(var(--product-height) * 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)));
    transform: translateX(-50%);
    transition: width var(--download-resize) var(--download-ease),
        height var(--download-resize) var(--download-ease);
}

.hero-product-info > * {
    transition: opacity 180ms ease, transform 380ms var(--download-ease);
}

.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: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    bottom: var(--download-gap);
    width: var(--download-size);
    height: calc(53 * var(--home-unit));
    border-radius: calc(10 * var(--home-unit));
    background: #fad600;
    color: #0a0a0f;
    text-align: center;
    transform: translateX(-50%);
    overflow: hidden;
    transition: height var(--download-resize) var(--download-ease);
}

.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: 100%;
    height: var(--download-size);
    visibility: hidden;
    opacity: 0;
    transform: translateY(calc(14 * var(--home-unit)));
    pointer-events: none;
}

.hero-download-default-label {
    position: absolute;
    top: calc(17.613 * var(--home-unit));
    width: 100%;
    transition: opacity 100ms ease;
}

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

/* Reveal the scan content after both surfaces reach the same inset. */
.hero-product:has(.hero-download:focus-visible) .hero-product-info {
    width: var(--download-frame-size);
    height: var(--download-frame-size);
    outline: 3px solid #ffd600;
    outline-offset: 5px;
}
.hero-product:has(.hero-download:focus-visible) .hero-product-info > * {
    opacity: 0;
    transform: translateY(calc(-12 * var(--home-unit)));
}
.hero-download:focus-visible { height: var(--download-size); }
.hero-download:focus-visible .hero-download-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: visibility 0s var(--download-resize),
        opacity 140ms ease var(--download-resize),
        transform 260ms var(--download-ease) var(--download-resize);
}
.hero-download:focus-visible .hero-download-default-label {
    opacity: 0;
    transition-delay: calc(var(--download-resize) - 100ms);
}

.hero-qr {
    position: absolute;
    left: calc(41 * var(--home-unit));
    top: calc(54 * var(--home-unit));
    width: calc(120 * var(--home-unit));
    height: calc(120 * 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 { outline-color: #fff; }
.home-page .hero .hero-download:focus-visible { outline: none; }

@media (hover: hover) {
    .home-page .nav-links a:hover::after { transform: scaleX(1); }
    /* 首屏是深色底、文字平时是白的, 悬停改成品牌黄 */
    .home-page .nav.nav-dark .nav-links a:hover { color: #ffd600; }
    .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-product:has(.hero-download:hover) .hero-product-info {
        width: var(--download-frame-size);
        height: var(--download-frame-size);
    }
    .hero-product:has(.hero-download:hover) .hero-product-info > * {
        opacity: 0;
        transform: translateY(calc(-12 * var(--home-unit)));
    }
    .hero-download:hover { height: var(--download-size); }
    .hero-download:hover .hero-download-panel {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition: visibility 0s var(--download-resize),
            opacity 140ms ease var(--download-resize),
            transform 260ms var(--download-ease) var(--download-resize);
    }
    .hero-download:hover .hero-download-default-label {
        opacity: 0;
        transition-delay: calc(var(--download-resize) - 100ms);
    }
}

/* 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 { --logo-mark-w: 39.42px; --logo-mark-h: 16.5px; --logo-mark-top: 1px; --logo-gap: 8px; --logo-word-h: 24px; font-size: 22px; }
    .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%); margin-top: 28px; font-size: 18px; line-height: 29px; letter-spacing: -1.2px; }
    .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,
    .home-page .nav-links a::after,
    .home-page .nav-logo-shine,
    .hero-product-info,
    .hero-product-info > *,
    .hero-download-default-label,
    .hero-download-panel { transition: none !important; }
    .home-page .hero-actions .btn:hover { transform: none; }
    .home-page .nav-logo-glow { animation: none !important; }
}