/* base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue',Helvetica,Arial,'Microsoft YaHei',sans-serif;color:#1a1a1a;background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:root{--orange:#FF6D3F;--pink:#FF3D83;--grad:linear-gradient(135deg,#FF6D3F 0%,#FF3D83 100%);--dark:#0e0e10;--gray:#6b7280;--line:rgba(0,0,0,.08)}

.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:8px;font-weight:800}
.logo-mark{width:32px;height:32px;border-radius:8px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:16px}
.logo-text{font-size:18px}
.nav-links{display:flex;gap:28px;font-size:14px;color:#4b5563}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--orange)}
@media(max-width:640px){.nav-links{gap:18px;font-size:13px}}

.hero{position:relative;padding:80px 24px 100px;overflow:hidden}
.hero-bg{position:absolute;inset:-20%;background:radial-gradient(60% 60% at 30% 30%,rgba(255,109,63,.35),transparent 60%),radial-gradient(50% 50% at 80% 70%,rgba(255,61,131,.3),transparent 60%),#fff;z-index:-2}
.hero-grain{position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.04) 1px,transparent 1px);background-size:3px 3px;opacity:.6;z-index:-1;pointer-events:none}
.hero-inner{max-width:1200px;margin:0 auto;text-align:center;position:relative}
.hero-tag{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.06);font-size:12px;color:#374151;margin-bottom:24px;letter-spacing:.1em}
.hero-title{font-size:clamp(36px,7vw,72px);line-height:1.1;letter-spacing:-0.03em;margin-bottom:20px}
.hero-title .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub-text{display:inline-block;font-size:clamp(22px,3.5vw,36px);font-weight:600;color:#1a1a1a;margin-top:8px}
.hero-desc{font-size:clamp(15px,2vw,18px);color:var(--gray);max-width:600px;margin:0 auto 36px}
.hide-sm{display:inline}
@media(max-width:640px){.hide-sm{display:none}}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:60px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .15s,box-shadow .2s;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 24px rgba(255,80,100,.32)}
.btn-primary:hover{box-shadow:0 12px 32px rgba(255,80,100,.4)}
.btn-ghost{background:rgba(255,255,255,.7);color:#1a1a1a;border:1px solid var(--line)}
.hero-stats{display:flex;gap:60px;justify-content:center;flex-wrap:wrap}
.hero-stats>div{display:flex;flex-direction:column;align-items:center;gap:4px}
.hero-stats b{font-size:32px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.hero-stats span{font-size:13px;color:var(--gray)}

.hero-mock{position:absolute;inset:0;pointer-events:none;z-index:-1}
.mock-card{position:absolute;border-radius:24px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.12);opacity:.5}
.mock-1{width:160px;height:220px;top:15%;left:5%;transform:rotate(-12deg);background:linear-gradient(135deg,#FFE8DD,#FFD0E1)}
.mock-2{width:140px;height:200px;top:10%;right:8%;transform:rotate(8deg);background:linear-gradient(135deg,#FFD0E1,#FFE8DD)}
.mock-3{width:120px;height:170px;bottom:8%;right:18%;transform:rotate(-5deg);background:linear-gradient(135deg,#FFE0B3,#FFCFE0)}
@media(max-width:900px){.hero-mock{display:none}}

.section{padding:100px 24px;max-width:1200px;margin:0 auto;position:relative}
.section-dark{background:var(--dark);color:#fff;max-width:100%;padding-left:24px;padding-right:24px}
.section-dark .section-inner,.section-dark .prod-grid{max-width:1200px;margin:0 auto}
.section-head{text-align:center;margin-bottom:60px}
.kicker{display:inline-block;font-size:12px;color:var(--orange);letter-spacing:.2em;font-weight:600;margin-bottom:12px;text-transform:uppercase}
.kicker.light{color:rgba(255,255,255,.8)}
.section-head h2{font-size:clamp(28px,4vw,44px);letter-spacing:-0.02em}

.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.how-grid{grid-template-columns:1fr}}
.how-card{padding:36px 28px;border-radius:24px;background:#fafafa;border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.how-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.how-num{font-size:48px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-0.04em;margin-bottom:12px}
.how-card h3{font-size:20px;margin-bottom:10px}
.how-card p{color:var(--gray);font-size:15px}

.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.prod-grid{grid-template-columns:1fr}}
.prod-card{border-radius:20px;overflow:hidden;background:#1a1a1c;border:1px solid rgba(255,255,255,.06);transition:transform .3s,border-color .3s}
.prod-card:hover{transform:translateY(-6px);border-color:rgba(255,109,63,.5)}
.prod-img{aspect-ratio:1;background-size:cover;background-position:center;position:relative}
.prod-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.4))}
.prod-tshirt{background:linear-gradient(135deg,#FF6D3F,#FF3D83)}
.prod-phone{background:linear-gradient(135deg,#8B5CF6,#06B6D4)}
.prod-figure{background:linear-gradient(135deg,#FFB129,#FF6D3F)}
.prod-bag{background:linear-gradient(135deg,#06B6D4,#3D7BFF)}
.prod-info{padding:20px}
.prod-info h3{font-size:18px;margin-bottom:6px}
.prod-info p{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:12px}
.prod-price{font-size:18px;font-weight:700;color:#FFB129}

.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.case-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.case-grid{grid-template-columns:1fr}}
.case-card{border-radius:20px;overflow:hidden;background:#f5f5f7;border:1px solid var(--line);transition:transform .3s}
.case-card:hover{transform:translateY(-4px)}
.case-cover{aspect-ratio:4/3;background-size:cover;background-position:center}
.c-1{background:linear-gradient(135deg,#FFE8DD,#FF6D3F)}
.c-2{background:linear-gradient(135deg,#FFD0E1,#FF3D83)}
.c-3{background:linear-gradient(135deg,#FFE0B3,#FFB129)}
.c-4{background:linear-gradient(135deg,#D6E5FF,#3D7BFF)}
.c-5{background:linear-gradient(135deg,#E5D6FF,#8B5CF6)}
.c-6{background:linear-gradient(135deg,#D6F5E8,#06B6D4)}
.case-meta{padding:18px}
.case-meta b{display:block;font-size:15px;margin-bottom:4px}
.case-meta span{font-size:13px;color:var(--gray)}

.cta{padding:100px 24px;background:var(--grad);color:#fff;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:24px 24px;opacity:.4}
.cta-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:center;position:relative}
@media(max-width:800px){.cta-inner{grid-template-columns:1fr;gap:40px;text-align:center}}
.cta-text h2{font-size:clamp(28px,4vw,44px);margin-bottom:16px;line-height:1.2}
.cta-text p{font-size:16px;opacity:.9;margin-bottom:24px}
.cta-bullets{display:flex;flex-direction:column;gap:8px;font-size:15px;opacity:.95}
@media(max-width:800px){.cta-bullets{align-items:center}}
.cta-qr{display:flex;flex-direction:column;align-items:center;gap:14px}
.qr-box{padding:14px;background:#fff;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.qr-placeholder{width:220px;height:220px;background:linear-gradient(135deg,#f5f5f7,#fff);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#1a1a1a;text-align:center;gap:8px}
.qr-placeholder span{font-size:15px;font-weight:600}
.qr-placeholder small{font-size:12px;color:var(--gray)}
.cta-qr p{font-size:14px;opacity:.85}

.footer{background:#0a0a0c;color:rgba(255,255,255,.6);padding:60px 24px 30px}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:60px;margin-bottom:40px}
@media(max-width:800px){.footer-inner{grid-template-columns:1fr;gap:40px}}
.footer-brand .logo{margin-bottom:14px;color:#fff}
.footer-brand p{font-size:14px}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:560px){.footer-cols{grid-template-columns:1fr 1fr}}
.footer-cols h4{font-size:14px;color:#fff;margin-bottom:14px}
.footer-cols a,.footer-cols p{display:block;font-size:13px;line-height:2;color:rgba(255,255,255,.5);transition:color .2s}
.footer-cols a:hover{color:var(--orange)}
.footer-bottom{max-width:1200px;margin:0 auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;font-size:12px;flex-wrap:wrap;gap:10px}
.footer-bottom a:hover{color:var(--orange)}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

.qr-img{width:220px;height:220px;display:block;border-radius:12px}