:root {
    --pc-stage-scale: 1;
    --pc-stage-left: 0px;
    --pc-stage-top: 0px;
    --mobile-stage-scale: 1;
    --mobile-stage-left: 0px;
    --mobile-stage-height: 812px;
    --mobile-hit-height: 47.837px;
    --mobile-hit-top: 0px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    min-height: 100%;
    background: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

img {
    display: block;
    border: 0;
    user-select: none;
    -webkit-user-drag: none;
}

.wrap-body,
.landing-shell,
.desktop-scene,
.mobile-scene {
    width: 100%;
    min-height: 100%;
}

.landing-shell {
    position: relative;
    background: #000;
}

.spinner-container {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .92);
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 216, 0, .22);
    border-top-color: #ffd800;
    border-radius: 50%;
    animation: aiporn-spin .8s linear infinite;
}

@keyframes aiporn-spin {
    to { transform: rotate(360deg); }
}

.scene-layer,
.contact-link,
.pc-brand,
.pc-qr-panel,
.qrcode-container,
.mobile-download-cluster {
    position: absolute;
}

.desktop-scene {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #000;
}

.desktop-bleed {
    position: absolute;
    inset: 0;
    background: #000 url('../images/aiporn/bg-pc.webp?v=20260924-2') center center / cover no-repeat;
}

.desktop-stage {
    position: absolute;
    left: var(--pc-stage-left);
    top: var(--pc-stage-top);
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    transform: scale(var(--pc-stage-scale));
    transform-origin: left top;
    background: #000;
}

.pc-bg {
    inset: 0;
    z-index: 0;
    width: 1920px;
    height: 1080px;
}

.pc-bottom-fade {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 660px;
    width: 1920px;
    height: 421px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .66));
    pointer-events: none;
}

.pc-hero {
    z-index: 2;
    left: 669px;
    top: 21px;
    width: 631px;
    height: 1059px;
}

.pc-title {
    z-index: 5;
    left: 12px;
    top: 283px;
    width: 801px;
    height: 471px;
}

.pc-promo {
    z-index: 5;
    left: 1195px;
    top: 269px;
    width: 686.5px;
    height: 436px;
}

.pc-features {
    z-index: 7;
    left: 1006.71px;
    top: 864px;
    width: 860.81px;
    height: 74px;
}

.pc-brand {
    z-index: 8;
    left: 48px;
    top: 46px;
    width: 402px;
    height: 130px;
    display: flex;
    align-items: flex-start;
}

.pc-brand-icon {
    width: 130px;
    height: 130px;
    flex: 0 0 auto;
}

.pc-brand-copy {
    position: relative;
    margin-left: 16px;
    padding-top: 0;
    width: 256px;
    height: 127px;
}

.pc-brand-copy strong {
    display: block;
    height: 73px;
    font-size: 54px;
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.pc-brand-copy span {
    display: block;
    color: #9f9f9f;
    font-size: 29px;
    line-height: 41px;
    white-space: nowrap;
}

.pc-brand-copy i {
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 256px;
    height: 1px;
    background: #ffd800;
}

.contact-link {
    z-index: 9;
    display: block;
    transition: filter .18s ease, transform .18s ease;
}

.contact-link:hover {
    filter: brightness(1.16);
}

.contact-link:active {
    transform: translateY(1px);
}

.contact-link img {
    width: 100%;
    height: 100%;
}

.pc-business {
    left: 1472px;
    top: 76.99px;
    width: 190px;
    height: 72.5px;
}

.pc-group {
    left: 1691px;
    top: 76.99px;
    width: 190px;
    height: 72.5px;
}

.pc-qr-panel {
    z-index: 8;
    left: 84px;
    top: 768.075px;
    width: 601.823px;
    height: 225.987px;
}

.pc-qr-panel img {
    width: 100%;
    height: 100%;
}

.qrcode-container {
    z-index: 10;
    left: 108.747px;
    top: 782.74px;
    width: 188.799px;
    height: 188.799px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #fff;
}

.qrcode-container canvas,
.qrcode-container img {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.mobile-scene {
    display: none;
}

@media (max-width: 767px) {
    body {
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .desktop-scene {
        display: none;
    }

    .mobile-scene {
        display: block;
        position: relative;
        min-height: 100dvh;
        overflow: visible;
        background: #000;
    }

    .mobile-bleed {
        position: fixed;
        z-index: 0;
        inset: -20px;
        background: #000 url('../images/aiporn/bg-mobile.webp?v=20260924-2') center top / cover no-repeat;
        filter: blur(14px) brightness(.58);
        transform: scale(1.06);
        pointer-events: none;
    }

    .mobile-bleed::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, .08), rgba(0, 0, 0, .52));
    }

    .mobile-stage-wrap {
        position: relative;
        z-index: 1;
        width: 100%;
        height: var(--mobile-stage-height);
        min-height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow: visible;
    }

    .mobile-stage {
        position: absolute;
        left: var(--mobile-stage-left);
        top: 0;
        width: 375px;
        height: 812px;
        overflow: hidden;
        transform: scale(var(--mobile-stage-scale));
        transform-origin: left top;
        background: #000;
    }

    .mobile-bg {
        z-index: 0;
        inset: 0;
        width: 375px;
        height: 812px;
    }

    .mobile-bottom-fade {
        position: absolute;
        z-index: 1;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 19.95%, #000 100%);
        pointer-events: none;
    }

    .mobile-hero {
        z-index: 2;
        left: 15px;
        top: 65px;
        width: 284px;
        height: 569px;
    }

    .mobile-ribbon {
        z-index: 3;
        left: 269px;
        top: 185px;
        width: 85px;
        height: 207px;
    }

    .mobile-logo {
        z-index: 7;
        left: 10px;
        top: 17px;
        width: 131.43px;
        height: 45px;
    }

    .mobile-title {
        z-index: 5;
        left: 0;
        top: 391px;
        width: 375px;
        height: 195px;
    }

    .mobile-claims {
        z-index: 6;
        left: 30px;
        top: 598px;
        width: 307px;
        height: 71.18px;
    }

    .mobile-features {
        z-index: 8;
        left: 9.896px;
        top: 754.355px;
        width: 354.929px;
        height: 35.435px;
    }

    .mobile-business {
        left: 169px;
        top: 24.105px;
        width: 90px;
        height: 34.116px;
    }

    .mobile-group {
        left: 276px;
        top: 24.105px;
        width: 90px;
        height: 34.116px;
    }

    .mobile-download-cluster {
        z-index: 10;
        left: 16.906px;
        top: 691px;
        width: 341.447px;
        height: 47.837px;
    }

    .mobile-download-cluster > img {
        width: 100%;
        height: 100%;
    }

    .download-hit {
        position: absolute;
        top: var(--mobile-hit-top);
        height: var(--mobile-hit-height);
        border-radius: 7px;
    }

    .download-hit:focus-visible {
        outline: 2px solid #ffd800;
        outline-offset: 2px;
    }

    .download-ios {
        left: 0;
        width: 107.154px;
    }

    .download-android {
        left: 117.154px;
        width: 106.304px;
    }

    .download-android-backup {
        left: 233.458px;
        width: 107.643px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 1.6s; }
    .contact-link { transition: none; }
}