:root{
    --green:#48ac9e;
    --ink:#143b37;
    --muted:#61736f;
    --pale:#eef8f6;
    --line:#dce9e6;
    --white:#fff;
    --shadow:0 18px 48px #173e3720;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#fff;
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:16px;
    line-height:1.6;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}

/* ========================================================
   Header
   ======================================================== */

.site-header{
    height:72px;
    max-width:1200px;
    margin:auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    position:relative;
    z-index:5;
}

.logo{
    font-weight:750;
    font-size:19px;
    letter-spacing:-.03em;
    white-space:nowrap;
}

.logo span{
    color:var(--green);
    font-size:22px;
    margin-right:6px;
}

.site-header nav{
    display:flex;
    gap:24px;
    align-items:center;
    font-size:14px;
    color:#39534f;
}

.site-header nav a:hover,
.language:hover{
    color:var(--green);
}

.header-actions{
    display:flex;
    align-items:center;
    gap:15px;
    font-size:14px;
}

.language{
    color:#39534f;
}

.small-cta,
.button{
    background:var(--green);
    color:white;
    border-radius:999px;
    padding:10px 17px;
    font-weight:650;
    font-size:14px;
    box-shadow:0 6px 18px #48ac9e2a;
}

.small-cta{
    white-space:nowrap;
}

.menu{
    display:none;
    border:0;
    background:transparent;
    color:var(--ink);
    font-size:24px;
    padding:4px;
}

/* ========================================================
   Common
   ======================================================== */

.eyebrow{
    font-size:12px;
    letter-spacing:.13em;
    color:var(--green);
    font-weight:750;
    margin:0 0 14px;
}

.button-row{
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:30px;
    flex-wrap:wrap;
}

.button{
    border:0;
    cursor:pointer;
    display:inline-block;
}

.button.secondary{
    background:var(--ink);
}

.text-link{
    font-weight:700;
    color:var(--ink);
    font-size:14px;
}

.text-link b,
.article-card b,
.related b{
    color:var(--green);
    font-size:18px;
    margin-left:4px;
}

/* ========================================================
   Hero
   ======================================================== */

.hero{
    min-height:650px;
    max-width:1200px;
    margin:auto;
    padding:96px 24px 72px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:40px;
}

.hero h1{
    font-size:clamp(46px,7vw,84px);
    letter-spacing:-.075em;
    line-height:.95;
    margin:0;
}

.hero h2{
    font-size:clamp(28px,4vw,47px);
    letter-spacing:-.055em;
    line-height:1.05;
    margin:20px 0;
}

.hero>div>p:not(.eyebrow),
.page-hero p,
.section-head>p:not(.eyebrow),
.cta p{
    font-size:18px;
    color:var(--muted);
    max-width:590px;
    margin:0;
}

.hero-art{
    min-height:480px;
    position:relative;
    display:grid;
    place-items:center;
}

.orb{
    width:390px;
    height:390px;
    border-radius:48% 52% 45% 55%;
    background:linear-gradient(145deg,#d3f0eb,#f9fefe);
    position:absolute;
    transform:rotate(-14deg);
}

.hero-shot{
    width:250px;
    position:relative;
    border-radius:35px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transform:rotate(5deg);
    background:#222;
}

.hero-shot img{
    width:100%;
    height:auto;
}

/* ========================================================
   Sections
   ======================================================== */

.effects,
.features,
.showcase,
.scenarios,
.devices,
.reading,
.faq-mini,
.detail-effect,
.content-block,
.related,
.faq-page{
    max-width:1200px;
    margin:0 auto;
    padding:104px 24px;
}

/* ========================================================
   Section Head
   所有区域统一：
   PIXNOVAAI
   标题
   描述
   ======================================================== */

.section-head{
    display:block;
    width:100%;
    max-width:660px;
    margin:0 auto 48px;
    text-align:center;
}

.section-head .eyebrow,
.section-head h2,
.section-head>p:not(.eyebrow){
    display:block;
    width:100%;
}

.section-head h2{
    font-size:clamp(31px,4vw,48px);
    line-height:1.1;
    letter-spacing:-.055em;
    margin:0 0 16px;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
}

.section-head>p:not(.eyebrow){
    font-size:18px;
    color:var(--muted);
    max-width:590px;
    margin:0 auto;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
}

.content-block h2,
.related h2{
    font-size:clamp(31px,4vw,48px);
    line-height:1.1;
    letter-spacing:-.055em;
    margin:0 0 16px;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
}

/* ========================================================
   Effects
   ======================================================== */

.effects{
    background:linear-gradient(180deg,#fff,#f9fcfb);
}

/* PC：4个功能同一行 */

.effect-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px;
}

.effect-grid article{
    min-width:0;
}

.effect-grid h3{
    font-size:22px;
    letter-spacing:-.04em;
    margin:0 0 7px;
}

.effect-grid p{
    color:var(--muted);
    margin:0 0 16px;
}

/* ========================================================
   Before / After
   ======================================================== */

.compare{
    position:relative;
    width:100%;

    /* 保持3:4竖图 */
    aspect-ratio:3 / 4;

    /* PC进一步缩小 */
    max-width:250px;

    /* 居中 */
    margin:0 auto 14px;

    overflow:hidden;
    border-radius:16px;
    background:#e7efed;
    isolation:isolate;
}

.compare .after,
.compare .before{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

.compare img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    user-select:none;
    -webkit-user-drag:none;
}

.compare .after{
    z-index:1;
}

.compare .before{
    z-index:2;
    clip-path:inset(
            0 calc(100% - var(--position)) 0 0
    );
}

.compare::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:var(--position);
    width:2px;
    background:#fff;
    box-shadow:0 0 8px #0003;
    z-index:4;
}

.compare input{
    appearance:none;
    cursor:ew-resize;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    opacity:0;
    z-index:10;
}

.handle{
    position:absolute;
    left:var(--position);
    top:50%;
    transform:translate(-50%,-50%);
    z-index:8;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    color:var(--green);
    box-shadow:0 3px 13px #0002;
    font-weight:bold;
    pointer-events:none;
}

.tag{
    position:absolute;
    z-index:6;
    top:10px;
    padding:4px 8px;
    border-radius:99px;
    background:#143b37cc;
    color:white;
    font-size:10px;
    font-weight:700;
    pointer-events:none;
}

.before-tag{
    left:10px;
}

.after-tag{
    right:10px;
}

/* ========================================================
   Transparent Matting
   ======================================================== */

.compare-matte{
    background-color:#fff;
    background-image:
            linear-gradient(
                    45deg,
                    #dce8e5 25%,
                    transparent 25%
            ),
            linear-gradient(
                    -45deg,
                    #dce8e5 25%,
                    transparent 25%
            ),
            linear-gradient(
                    45deg,
                    transparent 75%,
                    #dce8e5 75%
            ),
            linear-gradient(
                    -45deg,
                    transparent 75%,
                    #dce8e5 75%
            );
    background-size:24px 24px;
    background-position:
            0 0,
            0 12px,
            12px -12px,
            -12px 0;
}

/* ========================================================
   Features
   ======================================================== */

.features{
    background:var(--pale);
    max-width:none;
    padding-left:max(
            24px,
            calc((100vw - 1152px)/2)
    );
    padding-right:max(
            24px,
            calc((100vw - 1152px)/2)
    );
}

/* PC：4个核心功能同一行并居中 */

.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px;
    max-width:1000px;
    margin:0 auto;
}

.feature-grid a,
.scenario-grid a,
.devices article,
.tool-card{
    padding:25px;
    background:white;
    border:1px solid #e1efec;
    border-radius:18px;
    min-height:205px;
    display:flex;
    flex-direction:column;
    transition:
            .2s transform,
            .2s box-shadow;
}

.feature-grid a:hover,
.scenario-grid a:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px #163b3420;
}

.feature-grid span,
.scenario-grid span,
.steps span{
    font-size:12px;
    color:var(--green);
    font-weight:750;
}

.feature-grid h3,
.scenario-grid h3{
    font-size:18px;
    line-height:1.2;
    letter-spacing:-.035em;
    margin:20px 0 8px;
}

.feature-grid p,
.scenario-grid p{
    font-size:13px;
    line-height:1.5;
    color:var(--muted);
    margin:0;
}

.feature-grid b{
    margin-top:auto;
    color:var(--green);
    font-size:20px;
}

/* ========================================================
   Showcase
   ======================================================== */

.shot-rail{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:20px;
    overflow:visible;
    padding:14px 5px 28px;
}

.shot{
    flex:0 0 180px;
    width:180px;
    padding:0;
    border:0;
    border-radius:22px;
    background:#222;
    overflow:hidden;
    box-shadow:var(--shadow);
    cursor:zoom-in;
}

.shot img{
    width:100%;
    height:auto;
}

/* ========================================================
   Real Scenarios / use-cases
   ======================================================== */

#use-cases{
    background:#fbfdfc;
    max-width:none;
    padding-left:max(
            24px,
            calc((100vw - 1152px)/2)
    );
    padding-right:max(
            24px,
            calc((100vw - 1152px)/2)
    );
}

#use-cases .scenario-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:16px;
    width:100%;
    max-width:1100px;
    margin:0 auto;
}

#use-cases .scenario-grid a{
    flex:0 0 250px;
    width:250px;
    min-width:0;
    min-height:180px;
    padding:25px;
    justify-content:flex-end;
    background:linear-gradient(
            145deg,
            #fff,
            #eff9f7
    );
    border:1px solid #e1efec;
    border-radius:18px;
}

/* ========================================================
   Apple Devices
   ======================================================== */

.devices{
    background:#fff;
}

/*
    不再单独覆盖 .section-head。

    Apple Devices 与其他 section：
    PIXNOVAAI
    标题
    描述

    使用完全统一的 .section-head。
*/

/*
    Apple Devices 卡片区域：
    PC端整体居中
*/

.devices>div:not(.section-head){
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:16px;
    width:100%;
    max-width:1100px;
    margin:0 auto;
}

.tool-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:16px;
    width:100%;
    max-width:1100px;
    margin:0 auto;
}

.devices article{
    flex:0 0 250px;
    width:250px;
    min-height:180px;
    justify-content:flex-end;
    background:linear-gradient(
            145deg,
            #ebf8f5,
            #fff
    );
}

.tool-card{
    flex:0 0 250px;
    width:250px;
    min-height:180px;
    justify-content:flex-end;
    background:linear-gradient(
            145deg,
            #ebf8f5,
            #fff
    );
}

.devices article b{
    font-size:28px;
    letter-spacing:-.06em;
}

.devices article p{
    font-size:14px;
    color:var(--muted);
    margin:6px 0 0;
}

.tool-card h3{
    font-size:22px;
    line-height:1.2;
    letter-spacing:-.045em;
    margin:0 0 8px;
}

.tool-card p{
    font-size:14px;
    color:var(--muted);
    margin:0;
}

/* ========================================================
   Reading
   ======================================================== */

.reading{
    padding-top:45px;
}

.article-card{
    display:block;
    max-width:700px;
    margin:auto;
    border-radius:22px;
    padding:42px;
    background:var(--ink);
    color:#fff;
}

.article-card span{
    color:#9edbd1;
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
}

.article-card h3{
    font-size:30px;
    line-height:1.15;
    letter-spacing:-.05em;
    margin:14px 0;
}

.article-card p{
    color:#c5d6d2;
    margin:0;
}

/* ========================================================
   FAQ
   ======================================================== */

.faq-mini{
    padding-top:80px;
}

.faq-list{
    max-width:760px;
    margin:0 auto;
}

.faq-list details{
    border-bottom:1px solid var(--line);
    padding:18px 0;
}

.faq-list summary{
    list-style:none;
    cursor:pointer;
    font-weight:700;
    padding-right:28px;
    position:relative;
}

.faq-list summary::after{
    content:"+";
    position:absolute;
    right:2px;
    color:var(--green);
    font-size:21px;
}

.faq-list details[open] summary::after{
    content:"–";
}

.faq-list p{
    color:var(--muted);
    margin:12px 0 0;
}

.faq-mini>.text-link{
    display:block;
    text-align:center;
    margin-top:25px;
}

/* ========================================================
   CTA
   ======================================================== */

.cta{
    background:var(--ink);
    color:white;
    text-align:center;
    padding:90px 24px;
    margin-top:40px;
}

.cta h2{
    font-size:clamp(31px,4vw,52px);
    line-height:1.06;
    letter-spacing:-.06em;
    margin:0 0 15px;
}

.cta p{
    color:#c7d9d5;
    margin:auto;
}

.cta .button-row{
    justify-content:center;
}

.cta .secondary{
    background:#fff;
    color:var(--ink);
}

.cta small{
    display:block;
    color:#b9cfca;
    margin-top:18px;
}

/* ========================================================
   Footer
   ======================================================== */

footer{
    background:#0e2926;
    color:#d0e0dc;
    padding:56px max(
            24px,
            calc((100vw - 1152px)/2)
    ) 26px;
}

.footer-main{
    display:grid;
    grid-template-columns:2fr repeat(2,1fr);
    gap:26px;
}

.footer-main>div{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:13px;
}

.footer-main strong{
    color:#fff;
    margin-bottom:8px;
}

.footer-main a:hover,
.footer-bottom a:hover{
    color:#72c9bd;
}

.footer-bottom{
    border-top:1px solid #31514c;
    margin-top:46px;
    padding-top:18px;
    display:flex;
    gap:13px;
    flex-wrap:wrap;
    font-size:12px;
    color:#a8c1bc;
}

/* ========================================================
   Page Hero / Detail
   ======================================================== */

.breadcrumb{
    max-width:1152px;
    margin:26px auto 0;
    padding:0 24px;
    font-size:13px;
    color:var(--muted);
}

.breadcrumb a{
    color:var(--green);
}

.page-hero{
    max-width:850px;
    text-align:center;
    padding:102px 24px 82px;
    margin:auto;
}

.page-hero h1{
    font-size:clamp(43px,6vw,72px);
    line-height:1;
    letter-spacing:-.07em;
    margin:0 0 20px;
    white-space:normal;
    overflow-wrap:anywhere;
}

.page-hero p{
    margin:auto;
}

.page-hero .button{
    margin-top:30px;
}

.page-hero.short{
    padding-bottom:35px;
}

.detail-effect{
    padding-top:48px;
    max-width:900px;
}

.content-block{
    max-width:880px;
    padding-top:45px;
    padding-bottom:80px;
}

.content-block>p{
    font-size:18px;
    color:var(--muted);
}

/* ========================================================
   Steps
   ======================================================== */

.steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:34px;
}

.steps article{
    border-top:2px solid var(--green);
    padding:18px 5px;
}

.steps h3{
    font-size:17px;
    margin:14px 0 5px;
}

.steps p{
    font-size:14px;
    color:var(--muted);
    margin:0;
}

/* ========================================================
   Related
   ======================================================== */

.related{
    text-align:center;
    background:var(--pale);
    max-width:none;
}

.related a{
    display:inline-block;
    background:white;
    border:1px solid var(--line);
    border-radius:99px;
    padding:10px 15px;
    margin:5px;
    font-size:14px;
    font-weight:650;
}

/* ========================================================
   FAQ Page
   ======================================================== */

.faq-page{
    padding-top:35px;
}

/* ========================================================
   Article
   ======================================================== */

.article{
    max-width:780px;
    margin:auto;
    padding:72px 24px;
}

.article h1{
    font-size:clamp(42px,6vw,64px);
    letter-spacing:-.065em;
    line-height:1.03;
    margin:0 0 20px;
}

.article .lead{
    font-size:20px;
    color:var(--muted);
}

.article h2{
    font-size:29px;
    letter-spacing:-.045em;
    line-height:1.15;
    margin:56px 0 14px;
}

.article p,
.article li{
    color:#3e5652;
}

.article li+li{
    margin-top:6px;
}

.article .compare{
    margin:24px auto;
}

/* ========================================================
   Lightbox
   ======================================================== */

.lightbox{
    max-width:min(92vw,550px);
    padding:0;
    border:0;
    border-radius:22px;
    background:#111;
}

.lightbox::backdrop{
    background:#000b;
}

.lightbox button{
    position:fixed;
    right:20px;
    top:20px;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:#fff;
    font-size:28px;
    cursor:pointer;
}

.lightbox img{
    max-height:88vh;
    width:auto;
}

/* ========================================================
   Tablet / Mobile
   ======================================================== */

@media(max-width:800px){

    .site-header{
        height:62px;
        padding:0 18px;
    }

    .site-header nav{
        display:none;
    }

    .small-cta{
        display:none;
    }

    .menu{
        display:block;
    }

    .menu-open .site-header nav{
        display:flex;
        position:absolute;
        top:58px;
        left:12px;
        right:12px;
        padding:18px;
        flex-direction:column;
        align-items:stretch;
        background:#fff;
        border:1px solid var(--line);
        border-radius:15px;
        box-shadow:var(--shadow);
    }

    .hero{
        grid-template-columns:1fr;
        padding:65px 24px 36px;
        row-gap:46px;
        min-height:0;
    }

    .hero-art{
        min-height:360px;
    }

    .orb{
        width:290px;
        height:290px;
    }

    .hero-shot{
        width:190px;
    }

    /* 手机：一个功能一行 */

    .effect-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    /* 手机保持3:4 */

    .compare{
        width:100%;
        max-width:320px;
        aspect-ratio:3 / 4;
    }

    .feature-grid{
        grid-template-columns:1fr 1fr;
    }

    .feature-grid a{
        min-height:180px;
    }

    .feature-grid a:last-child{
        grid-column:auto;
    }

    .scenario-grid{
        grid-template-columns:1fr 1fr;
    }

    #use-cases .scenario-grid{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:16px;
        max-width:720px;
    }

    #use-cases .scenario-grid a{
        flex:0 0 auto;
        width:100%;
        max-width:360px;
        min-height:130px;
    }

    /* ====================================================
       Showcase
       手机：5张截图纵向居中
       ==================================================== */

    .shot-rail{
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:20px;
        overflow:visible;
    }

    .shot{
        flex:0 0 auto;
        width:160px;
    }

    /* ====================================================
       Apple Devices
       手机：设备卡片纵向居中
       ==================================================== */

    .devices>div:not(.section-head){
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:16px;
        max-width:720px;
    }

    .tool-grid{
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:16px;
        max-width:720px;
    }

    .devices article{
        flex:0 0 auto;
        width:100%;
        max-width:360px;
        min-height:130px;
    }

    .tool-card{
        flex:0 0 auto;
        width:100%;
        max-width:360px;
        min-height:130px;
    }

    /* ====================================================
       Common Sections
       ==================================================== */

    .section-head{
        margin-bottom:32px;
    }

    .effects,
    .features,
    .showcase,
    .scenarios,
    .devices,
    .reading,
    .faq-mini{
        padding-top:72px;
        padding-bottom:72px;
    }

    .footer-main{
        grid-template-columns:1fr 1fr;
    }

    .footer-main>.logo{
        grid-column:span 2;
    }

    .page-hero{
        padding:75px 24px 58px;
    }

    .article{
        padding-top:48px;
    }

    .article h2{
        margin-top:42px;
    }
}

/* ========================================================
   Small Phone
   ======================================================== */

@media(max-width:420px){

    .feature-grid,
    .scenario-grid,
    #use-cases .scenario-grid{
        grid-template-columns:1fr;
    }

    .footer-main{
        grid-template-columns:1fr;
    }

    .footer-main>.logo{
        grid-column:auto;
    }

    .footer-bottom{
        display:block;
    }

    .footer-bottom span{
        display:block;
        margin-top:7px;
    }

    .hero h1{
        font-size:52px;
    }

    .button-row{
        gap:15px;
    }

    /* 小手机保持3:4 */

    .compare{
        width:100%;
        max-width:300px;
        aspect-ratio:3 / 4;
        border-radius:16px;
    }

    .devices .section-head{
        max-width:100%;
    }

    .devices .section-head h2{
        font-size:clamp(31px,9vw,42px);
    }

    .devices .section-head>p:not(.eyebrow){
        max-width:560px;
    }
}