/* ================================================
   趣拆拆 — Premium Apple-Style Landing Page v2
   Light theme · Indigo-Violet · Cinematic
   ================================================ */

/* ---- Reset ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    font-family:-apple-system,"SF Pro Display","SF Pro Text","PingFang SC","Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color:#1d1d1f;
    background:#fff;
    line-height:1.47059;
    overflow-x:hidden;
    letter-spacing:-0.022em;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
button{border:none;background:none;cursor:pointer;font:inherit}

/* ---- Tokens ---- */
:root{
    --indigo:#4A00E0;
    --violet:#8E2DE2;
    --accent:#6C63FF;
    --pink:#E040FB;

    --gradient-text:linear-gradient(135deg,#4A00E0 0%,#8E2DE2 40%,#E040FB 100%);
    --gradient-btn:linear-gradient(135deg,#4A00E0,#8E2DE2);
    --gradient-btn-hover:linear-gradient(135deg,#3B00C0,#7B1FD2);

    --bg-primary:#FFFFFF;
    --bg-ambient:#F5F5F7;
    --bg-card:#FFFFFF;
    --bg-glass:rgba(255,255,255,0.72);
    --bg-glass-border:rgba(255,255,255,0.5);

    --text-primary:#1d1d1f;
    --text-secondary:#6e6e73;
    --text-tertiary:#aeaeb2;

    --border:rgba(0,0,0,0.06);
    --border-light:rgba(0,0,0,0.04);

    --shadow-subtle:0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:0 2px 8px rgba(0,0,0,0.06);
    --shadow-md:0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg:0 8px 40px rgba(0,0,0,0.1);
    --shadow-xl:0 20px 60px rgba(0,0,0,0.12);
    --shadow-2xl:0 30px 80px rgba(0,0,0,0.16);
    --shadow-device:
        0 0 0 1px rgba(0,0,0,0.04),
        0 4px 12px rgba(0,0,0,0.06),
        0 12px 36px rgba(0,0,0,0.08),
        0 36px 100px rgba(0,0,0,0.14);
    --shadow-device-hover:
        0 0 0 1px rgba(0,0,0,0.04),
        0 8px 20px rgba(0,0,0,0.08),
        0 20px 50px rgba(0,0,0,0.1),
        0 50px 120px rgba(0,0,0,0.18);
    --shadow-glow:0 0 120px rgba(74,0,224,0.08);

    --radius-sm:12px;
    --radius-md:20px;
    --radius-lg:28px;
    --radius-xl:40px;
    --radius-2xl:48px;

    --ease:cubic-bezier(0.25,0.1,0.25,1);
    --ease-spring:cubic-bezier(0.34,1.56,0.64,1);

    --nav-h:56px;
    --max-w:1200px;
    --px:48px;
}

/* ---- Nav ---- */
.nav{
    position:fixed;top:0;left:0;right:0;
    z-index:1000;
    height:56px;
    background:rgba(255,255,255,0.65);
    backdrop-filter:saturate(180%) blur(24px);
    -webkit-backdrop-filter:saturate(180%) blur(24px);
    border-bottom:1px solid rgba(0,0,0,0.06);
    transition:background 0.3s,box-shadow 0.3s;
}
.nav.scrolled{
    background:rgba(255,255,255,0.88);
    box-shadow:0 1px 12px rgba(0,0,0,0.06);
}
.nav-inner{
    max-width:var(--max-w);margin:0 auto;padding:0 var(--px);
    height:100%;display:flex;align-items:center;
}
.nav-logo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;flex-shrink:0}
.nav-logo img{border-radius:7px}
.nav-center{flex:1;display:flex;justify-content:center}
.nav-links{display:flex;gap:28px}
.nav-links a{
    font-size:13px;color:var(--text-secondary);font-weight:400;
    transition:color 0.2s;letter-spacing:-0.01em;
}
.nav-links a:hover{color:var(--text-primary)}
.nav-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.nav-cta{
    font-size:12px;font-weight:500;
    color:#fff;
    background:var(--gradient-btn);
    padding:7px 18px;
    border-radius:980px;
    transition:transform 0.2s var(--ease),box-shadow 0.2s;
}
.nav-cta:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(74,0,224,0.25);
}
.nav-burger{display:none;flex-direction:column;gap:5px;width:18px;padding:4px 0}
.nav-burger span{display:block;height:1.5px;background:var(--text-primary);border-radius:1px;transition:transform 0.3s var(--ease)}
.nav-burger.open span:first-child{transform:rotate(45deg) translateY(3.25px)}
.nav-burger.open span:last-child{transform:rotate(-45deg) translateY(-3.25px)}

/* ---- Hero ---- */
.hero{
    position:relative;
    min-height:100vh;
    display:flex;align-items:center;
    padding:calc(var(--nav-h) + 80px) 0 60px;
    background:#fff;
    overflow:hidden;
}
.hero-ambient{
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse 60% 50% at 70% 50%,rgba(142,45,226,0.04),transparent),
        radial-gradient(ellipse 40% 40% at 30% 60%,rgba(74,0,224,0.03),transparent);
    pointer-events:none;
}
.hero-inner{
    position:relative;z-index:2;
    max-width:var(--max-w);margin:0 auto;padding:0 var(--px);
    display:flex;align-items:center;gap:40px;
    width:100%;
}

/* Hero Content */
.hero-content{
    flex:1;
    max-width:540px;
    padding:40px 0;
}
.hero-eyebrow{
    font-size:13px;font-weight:500;
    color:var(--text-tertiary);
    letter-spacing:0.06em;text-transform:uppercase;
    margin-bottom:24px;
}
.hero-title{
    font-size:clamp(64px,10vw,96px);
    font-weight:800;
    line-height:0.95;
    letter-spacing:-0.05em;
    margin-bottom:24px;
    background:var(--gradient-text);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-tagline{
    font-size:clamp(28px,4vw,40px);
    font-weight:700;
    line-height:1.2;
    letter-spacing:-0.03em;
    color:var(--text-primary);
    margin-bottom:16px;
}
.hero-desc{
    font-size:17px;font-weight:400;
    color:var(--text-secondary);
    margin-bottom:40px;
    letter-spacing:0;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---- Buttons ---- */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    font-size:15px;font-weight:500;
    border-radius:980px;
    transition:all 0.25s var(--ease);
}
.btn-primary{
    background:var(--gradient-btn);
    color:#fff;
    padding:15px 32px;
    box-shadow:0 4px 20px rgba(74,0,224,0.2);
}
.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 32px rgba(74,0,224,0.3);
    background:var(--gradient-btn-hover);
}
.btn-ghost{
    color:var(--text-secondary);
    padding:15px 28px;
    border:1px solid var(--border);
    background:#fff;
}
.btn-ghost:hover{
    color:var(--text-primary);
    border-color:rgba(0,0,0,0.12);
    box-shadow:var(--shadow-sm);
}

/* ---- Hero Phone (iPhone 16 Pro Max Mockup) ---- */
.hero-phone{
    position:relative;
    width:340px;flex-shrink:0;
    perspective:1400px;
}
.hero-phone-shadow{
    position:absolute;
    bottom:-30px;left:10%;right:10%;
    height:60%;
    background:radial-gradient(ellipse 100% 100% at 50% 100%,rgba(0,0,0,0.12),transparent 70%);
    filter:blur(30px);
    pointer-events:none;
    z-index:0;
}
.hero-phone-wrapper{
    position:relative;z-index:2;
    transform:rotateY(-12deg) rotateX(4deg);
    transform-style:preserve-3d;
    transition:transform 0.8s var(--ease);
}
.hero-phone-wrapper:hover{
    transform:rotateY(-4deg) rotateX(1deg);
}
.hero-phone-frame{
    position:relative;
    background:#1a1a1a;
    border-radius:50px;
    padding:10px;
    box-shadow:var(--shadow-device);
    transition:box-shadow 0.6s var(--ease);
    overflow:hidden;
    outline:1.5px solid rgba(255,255,255,0.12);
    outline-offset:-1.5px;
}
.hero-phone-frame:hover{box-shadow:var(--shadow-device-hover)}
.hero-phone-bezel{
    position:absolute;inset:0;
    border-radius:50px;
    border:1.5px solid rgba(255,255,255,0.15);
    pointer-events:none;z-index:5;
}
.hero-phone-notch{
    position:absolute;
    top:10px;left:50%;transform:translateX(-50%);
    width:110px;height:30px;
    background:#1a1a1a;
    border-radius:0 0 18px 18px;
    z-index:10;
}
.hero-phone-screen{
    border-radius:40px;overflow:hidden;
    position:relative;
}
.hero-phone-screen img{display:block;width:100%}
.hero-phone-highlight{
    position:absolute;
    top:0;left:0;right:0;height:45%;
    background:linear-gradient(180deg,rgba(255,255,255,0.06),transparent);
    border-radius:40px 40px 0 0;
    pointer-events:none;z-index:6;
}
.hero-phone-edge{
    position:absolute;
    inset:-1px;
    border-radius:51px;
    background:linear-gradient(160deg,rgba(200,200,210,0.25),rgba(160,160,170,0.08) 30%,transparent 60%);
    pointer-events:none;z-index:7;
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    padding:2px;
}

/* ---- Float Cards ---- */
.hero-float-card{
    position:absolute;
    display:flex;align-items:center;gap:10px;
    background:#fff;
    border:1px solid var(--border);
    padding:12px 16px;
    border-radius:16px;
    font-size:13px;
    z-index:20;
    animation:float-card 5s ease-in-out infinite;
    box-shadow:var(--shadow-lg);
}
.float-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.float-dot-green{background:#34c759}
.float-dot-blue{background:var(--accent)}
.float-text strong{display:block;font-size:13px;font-weight:600;color:var(--text-primary)}
.float-text span{font-size:11px;color:var(--text-tertiary)}
.hero-float-card-1{top:18%;left:-22%;animation-delay:0s}
.hero-float-card-2{bottom:22%;right:-18%;animation-delay:2.5s}
@keyframes float-card{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---- Section Shared ---- */
.section-header{margin-bottom:64px}
.section-header-center{text-align:center}
.section-label{
    display:inline-block;
    font-size:12px;font-weight:600;
    background:linear-gradient(135deg,#FF6B9D,#E040FB);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    letter-spacing:0.1em;text-transform:uppercase;
    margin-bottom:16px;
}
.section-title{
    font-size:clamp(36px,5vw,56px);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-0.035em;
    background:var(--gradient-text);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:0;
}
.section-desc{
    font-size:18px;font-weight:400;
    color:var(--text-secondary);
    margin-top:16px;
    letter-spacing:-0.01em;
}
.section-header-center .section-desc{max-width:480px;margin:16px auto 0}

/* ---- Features ---- */
.features{
    position:relative;
    padding:160px 0;
    background:#fff;
    overflow:hidden;
}
.features::before{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(ellipse 50% 50% at 0% 0%,rgba(255,107,157,0.07),transparent),
        radial-gradient(ellipse 40% 40% at 100% 100%,rgba(142,45,226,0.06),transparent),
        radial-gradient(ellipse 30% 30% at 60% 20%,rgba(255,138,101,0.05),transparent);
    pointer-events:none;
}
.features-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--px);position:relative;z-index:2}
.features-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}
.feature-card{
    text-align:center;
    transition:transform 0.5s var(--ease);
}
.feature-card:hover{transform:translateY(-6px)}
.feature-card-phone{
    display:flex;justify-content:center;
    margin-bottom:20px;
}
.feature-card-phone-frame{
    width:180px;
    background:#1a1a1a;
    border-radius:32px;
    padding:8px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.04),
        0 8px 24px rgba(0,0,0,0.1),
        0 24px 60px rgba(0,0,0,0.08);
    transition:box-shadow 0.5s var(--ease);
    overflow:hidden;
}
.feature-card:hover .feature-card-phone-frame{
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.04),
        0 12px 32px rgba(0,0,0,0.12),
        0 32px 80px rgba(0,0,0,0.12);
}
.feature-card-phone-frame img{border-radius:24px;display:block;width:100%}
.feature-card-body{padding:0 8px}
.feature-tag{
    display:inline-block;
    font-size:10px;font-weight:600;
    background:linear-gradient(135deg,rgba(255,107,157,0.9),rgba(224,64,251,0.9));
    color:#fff;
    padding:4px 12px;
    border-radius:980px;
    margin-bottom:10px;
    letter-spacing:0.06em;text-transform:uppercase;
}
.feature-card-body h3{font-size:18px;font-weight:600;color:var(--text-primary);letter-spacing:-0.02em;margin-bottom:4px}
.feature-card-body p{font-size:13px;color:var(--text-tertiary);line-height:1.5}

/* ---- Preview ---- */
.preview{
    position:relative;
    padding:160px 0;
    background:#fff;
    overflow:hidden;
}
.preview::before{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(ellipse 45% 45% at 20% 30%,rgba(105,240,174,0.08),transparent),
        radial-gradient(ellipse 40% 40% at 80% 70%,rgba(255,107,157,0.07),transparent),
        radial-gradient(ellipse 30% 30% at 50% 10%,rgba(64,196,255,0.06),transparent);
    pointer-events:none;
}
.preview-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--px);position:relative;z-index:2}
.preview-stage{position:relative;padding:40px 0}
.preview-glow{
    position:absolute;
    top:50%;left:50%;transform:translate(-50%,-50%);
    width:80%;height:60%;
    background:radial-gradient(ellipse at center,rgba(142,45,226,0.06),transparent 70%);
    pointer-events:none;
}
.preview-screens{
    display:flex;justify-content:center;flex-wrap:wrap;gap:28px;
}
.preview-screen{text-align:center;flex:0 0 auto;width:220px}
.preview-screen-center{margin-top:-24px}
.preview-screen-frame{
    background:#1a1a1a;
    border-radius:36px;
    padding:9px;
    margin-bottom:14px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.04),
        0 8px 24px rgba(0,0,0,0.1),
        0 24px 60px rgba(0,0,0,0.08);
    transition:transform 0.6s var(--ease),box-shadow 0.6s;
    overflow:hidden;
}
.preview-screen:hover .preview-screen-frame{
    transform:translateY(-8px);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.04),
        0 12px 32px rgba(0,0,0,0.12),
        0 32px 80px rgba(0,0,0,0.12),
        var(--shadow-glow);
}
.preview-screen-frame img{border-radius:27px;display:block;width:100%}
.preview-screen span{
    font-size:13px;color:var(--text-secondary);font-weight:500;
    letter-spacing:-0.01em;
}

/* ---- Download ---- */
.download{
    position:relative;
    padding:180px 0;
    background:linear-gradient(160deg,#FFF0F5 0%,#F0E6FF 25%,#E6F7FF 50%,#FFF8E1 75%,#F0FFF4 100%);
    overflow:hidden;
}
.download-ambient{
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse 60% 60% at 80% 40%,rgba(224,64,251,0.12),transparent),
        radial-gradient(ellipse 50% 50% at 10% 60%,rgba(74,0,224,0.1),transparent),
        radial-gradient(ellipse 40% 40% at 50% 90%,rgba(255,138,101,0.1),transparent),
        radial-gradient(ellipse 30% 30% at 30% 10%,rgba(0,182,255,0.08),transparent);
    pointer-events:none;
}
.download-inner{
    position:relative;z-index:2;
    max-width:var(--max-w);margin:0 auto;padding:0 var(--px);
    display:flex;align-items:center;gap:80px;
}
.download-content{flex:1}
.download-title{
    font-size:clamp(44px,6vw,64px);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-0.04em;
    margin-bottom:20px;
    background:var(--gradient-text);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.download-desc{
    font-size:19px;font-weight:400;
    color:var(--text-secondary);
    margin-bottom:40px;
}
.download-btns{display:flex;gap:12px;flex-wrap:wrap}
.store-btn{
    display:flex;align-items:center;gap:12px;
    background:#fff;
    border:1px solid var(--border);
    color:var(--text-primary);
    padding:14px 24px;
    border-radius:var(--radius-sm);
    transition:transform 0.25s var(--ease),box-shadow 0.25s;
}
.store-btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-lg);
}
.store-btn i{display:block;font-size:10px;color:var(--text-tertiary);font-style:normal;line-height:1.2;letter-spacing:0.04em}
.store-btn b{display:block;font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-0.01em}
.download-phone{position:relative;width:300px;flex-shrink:0}
.download-phone-shadow{
    position:absolute;
    bottom:-20px;left:5%;right:5%;
    height:50%;
    background:radial-gradient(ellipse 100% 100% at 50% 100%,rgba(0,0,0,0.1),transparent 70%);
    filter:blur(24px);
    pointer-events:none;
}
.download-phone-frame{
    position:relative;
    background:#1a1a1a;
    border-radius:50px;
    padding:10px;
    box-shadow:var(--shadow-device);
    outline:1.5px solid rgba(255,255,255,0.12);
    outline-offset:-1.5px;
}
.download-phone-frame img{border-radius:40px}

/* ---- Contact ---- */
.contact{
    position:relative;
    padding:160px 0;
    background:#fff;
    overflow:hidden;
}
.contact::before{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(ellipse 50% 50% at 20% 50%,rgba(142,45,226,0.05),transparent),
        radial-gradient(ellipse 40% 40% at 80% 30%,rgba(255,107,157,0.04),transparent);
    pointer-events:none;
}
.contact-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--px);position:relative;z-index:2}
.contact-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
    max-width:960px;margin:0 auto;
}
.contact-card{
    background:var(--bg-ambient);
    border:1px solid var(--border-light);
    border-radius:var(--radius-lg);
    padding:36px 24px;
    text-align:center;
    transition:transform 0.4s var(--ease),box-shadow 0.4s;
}
.contact-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
}
.contact-card-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;
    background:linear-gradient(135deg,rgba(255,107,157,0.1),rgba(142,45,226,0.1));
    border-radius:14px;
    margin-bottom:16px;
    color:var(--violet);
}
.contact-card h4{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.contact-card p{font-size:13px;color:var(--text-secondary)}

/* ---- Footer ---- */
.footer{padding:24px 0;background:#fff;border-top:1px solid var(--border-light)}
.footer-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--px)}
.footer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.footer-brand{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600}
.footer-brand img{border-radius:6px}
.footer-nav{display:flex;gap:24px}
.footer-nav a{font-size:13px;color:var(--text-tertiary);transition:color 0.2s}
.footer-nav a:hover{color:var(--text-secondary)}
.footer-bottom{font-size:11px;color:var(--text-tertiary);padding-top:16px;border-top:1px solid var(--border-light)}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s var(--ease),transform 0.8s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ---- Responsive ---- */
@media(max-width:1024px){
    :root{--px:32px}
    .hero-inner{gap:32px}
    .hero-phone{width:300px}
    .features-grid{grid-template-columns:repeat(2,1fr);gap:20px}
    .feature-card-phone-frame{width:160px}
    .experience-grid{grid-template-columns:repeat(2,1fr)}
    .preview-screens{gap:20px}
    .preview-screen{width:200px}
}
@media(max-width:768px){
    :root{--nav-h:48px;--px:20px}
    .nav{height:48px}
    .nav-inner{padding:0 20px}
    .nav-links{
        display:none;position:fixed;top:0;left:0;right:0;bottom:0;
        background:rgba(255,255,255,0.96);
        backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
        flex-direction:column;align-items:center;justify-content:center;
        gap:28px;z-index:999;
    }
    .nav-links.open{display:flex}
    .nav-links a{font-size:24px;font-weight:600;color:var(--text-primary)}
    .nav-cta{display:none}
    .nav-burger{display:flex}

    .hero{min-height:auto;padding:calc(var(--nav-h) + 48px) 0 48px}
    .hero-inner{flex-direction:column;text-align:center;gap:48px}
    .hero-content{max-width:100%;padding:0}
    .hero-actions{justify-content:center}
    .hero-phone{width:260px}
    .hero-phone-wrapper{transform:rotateY(0) rotateX(0)}
    .hero-float-card{display:none}

    .features,.preview{padding:100px 0}
    .features-grid{grid-template-columns:repeat(2,1fr);gap:16px}
    .feature-card-phone-frame{width:140px;border-radius:26px;padding:6px}
    .feature-card-phone-frame img{border-radius:20px}
    .preview-screens{gap:16px}
    .preview-screen{width:160px}
    .preview-screen-frame{padding:7px;border-radius:28px}
    .preview-screen-frame img{border-radius:21px}

    .download{padding:100px 0}
    .download-inner{flex-direction:column;text-align:center;gap:48px}
    .download-phone{width:240px}
    .download-btns{justify-content:center}

    .contact-grid{grid-template-columns:repeat(2,1fr)}

    .footer-top{flex-direction:column;text-align:center}
}
@media(max-width:480px){
    .hero-title{font-size:52px}
    .hero-tagline{font-size:24px}
    .section-title{font-size:32px}
    .preview-screens{gap:14px}
    .preview-screen{width:140px}
    .preview-screen-frame{padding:6px;border-radius:24px}
    .preview-screen-frame img{border-radius:18px}
    .download-title{font-size:36px}
}