*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;font-family:Inter,sans-serif;overflow-x:hidden}body[data-theme=civic]{--bg:#fff;--bg2:#f5f5f0;--surface:#fff;--ink:#1a1919;--ink2:#4a4a4a;--muted:#777c7b;--line:#e8e8e4;--teal:#18b193;--teal-dark:#12917a;--teal-tint:#edf7f5;--hero-bg:#18b193;--hero-fg:#fff;--nav-bg:#ffffffeb;--chip-bg:#fff3;--chip-fg:#fff}body[data-theme=night]{--bg:#111210;--bg2:#181917;--surface:#1e1f1d;--ink:#f0f0ec;--ink2:#c8c9c4;--muted:#6b7170;--line:#ffffff14;--teal:#1ccfae;--teal-dark:#18b193;--teal-tint:#18b1931f;--hero-bg:#111210;--hero-fg:#f0f0ec;--nav-bg:#111210e0;--chip-bg:#1ccfae26;--chip-fg:#1ccfae}body{background:var(--bg);color:var(--ink);transition:background .35s,color .35s}nav{z-index:100;background:var(--nav-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:64px;padding:0 40px;transition:background .35s,border-color .35s;display:flex;position:fixed;top:0;left:0;right:0}.nav-logo{align-items:center;gap:10px;text-decoration:none;display:flex}.nav-logo-mark{border-radius:8px;width:32px;height:32px;display:block;overflow:hidden}.nav-logo-name{color:var(--ink);letter-spacing:-.3px;font-family:DM Sans,sans-serif;font-size:17px;font-weight:800}.nav-links{align-items:center;gap:32px;display:flex}.nav-links a{color:var(--muted);font-size:14px;font-weight:500;text-decoration:none;transition:color .2s}.nav-links a:hover{color:var(--teal)}.nav-links .zh{font-size:12px}.nav-cta{background:var(--teal);color:#fff;cursor:pointer;border:none;border-radius:100px;padding:10px 20px;font-family:Inter,sans-serif;font-size:13px;font-weight:700;text-decoration:none;transition:background .2s,transform .1s}.nav-cta:hover{background:var(--teal-dark);transform:translateY(-1px)}.theme-toggle{background:var(--bg2);border:1px solid var(--line);border-radius:100px;align-items:center;gap:2px;padding:3px;transition:background .3s,border-color .3s;display:flex}.theme-btn{cursor:pointer;border:none;border-radius:100px;align-items:center;gap:5px;padding:6px 14px;font-family:Inter,sans-serif;font-size:12px;font-weight:700;transition:background .2s,color .2s;display:flex}.theme-btn.active{background:var(--ink);color:#fff}.theme-btn.inactive{color:var(--muted);background:0 0}.hero-wrapper{background:var(--hero-bg);transition:background .35s}.hero{color:var(--hero-fg);grid-template-columns:1fr 420px;align-items:center;gap:80px;max-width:1280px;min-height:100vh;margin:0 auto;padding:120px 40px 80px;display:grid}.hero-eyebrow{background:var(--chip-bg);color:var(--chip-fg);letter-spacing:1.5px;text-transform:uppercase;border:1px solid var(--chip-fg);border-radius:100px;align-items:center;gap:8px;margin-bottom:28px;padding:6px 14px;font-size:11px;font-weight:700;display:inline-flex}body[data-theme=civic] .hero-eyebrow{border-color:#fff6}body[data-theme=night] .hero-eyebrow{border-color:var(--chip-fg)}.hero h1{letter-spacing:-2px;margin-bottom:12px;font-family:DM Sans,sans-serif;font-size:clamp(44px,5.5vw,72px);font-weight:800;line-height:1}.hero h1 em{color:var(--teal);font-style:normal}body[data-theme=civic] .hero h1 em{color:#ffffffbf}.hero-zh{opacity:.55;letter-spacing:2px;margin-bottom:28px;font-size:clamp(18px,2vw,26px);font-weight:600;line-height:1.4}.hero-sub{opacity:.75;max-width:500px;margin-bottom:40px;font-size:18px;line-height:1.6}.hero-sub .zh-sub{opacity:.6;letter-spacing:.5px;margin-top:6px;font-size:14px;display:block}.hero-actions{flex-wrap:wrap;gap:14px;display:flex}.btn-primary{background:var(--teal);color:#fff;cursor:pointer;border:none;border-radius:100px;align-items:center;gap:8px;padding:16px 32px;font-family:Inter,sans-serif;font-size:16px;font-weight:700;text-decoration:none;transition:transform .1s,box-shadow .2s;display:inline-flex;box-shadow:0 8px 24px #18b19359}body[data-theme=civic] .btn-primary{color:var(--teal);background:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px #18b19373}.btn-ghost{color:var(--hero-fg);cursor:pointer;background:0 0;border:1px solid #ffffff40;border-radius:100px;align-items:center;gap:8px;padding:16px 28px;font-family:Inter,sans-serif;font-size:16px;font-weight:600;text-decoration:none;transition:border-color .2s,background .2s;display:inline-flex}body[data-theme=civic] .btn-ghost{color:#fff;border-color:#ffffff80}.btn-ghost:hover{background:#ffffff14;border-color:#fff9}.phone-wrap{justify-content:center;display:flex;position:relative}.phone-outer{background:#1a1919;border-radius:38px;width:280px;height:580px;padding:10px;position:relative;overflow:hidden;box-shadow:0 60px 120px #00000080,0 0 0 1px #ffffff14,inset 0 0 0 1px #ffffff0a}.phone-notch{z-index:10;background:#1a1919;border-radius:0 0 18px 18px;width:100px;height:28px;position:absolute;top:10px;left:50%;transform:translate(-50%)}.phone-screen{background:#fff;border-radius:30px;width:100%;height:100%;overflow:hidden}.phone-glow{pointer-events:none;z-index:-1;background:radial-gradient(circle,#18b19366 0%,#0000 70%);border-radius:50%;width:340px;height:340px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.stats-strip{background:var(--teal);padding:40px;transition:background .35s}.stats-inner{grid-template-columns:repeat(4,1fr);gap:40px;max-width:1280px;margin:0 auto;display:grid}.stat-item{color:#fff}.stat-num{letter-spacing:-2px;margin-bottom:6px;font-family:DM Sans,sans-serif;font-size:clamp(32px,4vw,52px);font-weight:800;line-height:1}.stat-label{opacity:.8;font-size:13px;font-weight:500;line-height:1.4}.stat-label .zh{opacity:.65;letter-spacing:.5px;margin-top:3px;font-size:11px;display:block}section{padding:100px 40px}.section-inner{max-width:1280px;margin:0 auto}.section-label{letter-spacing:2px;text-transform:uppercase;color:var(--teal);align-items:center;gap:8px;margin-bottom:16px;font-size:11px;font-weight:700;display:flex}.section-label:before{content:"";background:var(--teal);width:24px;height:2px;display:block}.section-title{letter-spacing:-1.5px;color:var(--ink);margin-bottom:8px;font-family:DM Sans,sans-serif;font-size:clamp(32px,4vw,52px);font-weight:800;line-height:1.05}.section-zh{color:var(--muted);letter-spacing:1.5px;margin-bottom:24px;font-size:clamp(16px,2vw,22px);font-weight:600}.section-sub{color:var(--ink2);max-width:560px;font-size:17px;line-height:1.7}.problem-grid{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px;display:grid}.problem-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px;transition:background .35s,border-color .35s,transform .2s,box-shadow .2s}.problem-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px #00000014}.problem-num{color:var(--teal);letter-spacing:-3px;opacity:.25;margin-bottom:12px;font-family:DM Sans,sans-serif;font-size:56px;font-weight:800;line-height:1}.problem-title{color:var(--ink);letter-spacing:-.3px;margin-bottom:10px;font-family:DM Sans,sans-serif;font-size:20px;font-weight:800}.problem-title-zh{color:var(--muted);letter-spacing:1px;margin-bottom:12px;font-size:13px;font-weight:600}.problem-body{color:var(--ink2);font-size:14px;line-height:1.7}.how-section{background:var(--bg2);transition:background .35s}.how-steps{grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;display:grid;position:relative}.how-steps:before{content:"";background:linear-gradient(90deg, var(--teal) 0%, var(--teal) 100%);opacity:.2;height:2px;position:absolute;top:36px;left:12%;right:12%}.step{text-align:center;flex-direction:column;align-items:center;padding:0 20px;display:flex;position:relative}.step-icon{background:var(--teal);z-index:1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:72px;height:72px;margin-bottom:20px;display:flex;position:relative;box-shadow:0 8px 24px #18b1934d}.step-num{background:var(--ink);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:11px;font-weight:700;display:flex;position:absolute;top:-6px;right:-6px}.step-title{color:var(--ink);letter-spacing:-.2px;margin-bottom:6px;font-family:DM Sans,sans-serif;font-size:17px;font-weight:800}.step-title-zh{color:var(--muted);letter-spacing:1px;margin-bottom:10px;font-size:11px;font-weight:600}.step-body{color:var(--ink2);font-size:13px;line-height:1.6}.tech-grid{grid-template-columns:1fr 1fr;align-items:center;gap:60px;margin-top:60px;display:grid}.tech-cards{flex-direction:column;gap:20px;display:flex}.tech-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;align-items:flex-start;gap:20px;padding:24px;transition:background .35s,border-color .35s;display:flex}.tech-icon{background:var(--teal-tint);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.tech-title{color:var(--ink);margin-bottom:4px;font-family:DM Sans,sans-serif;font-size:17px;font-weight:700}.tech-title-zh{color:var(--muted);letter-spacing:1px;margin-bottom:8px;font-size:11px;font-weight:600}.tech-body{color:var(--ink2);font-size:13px;line-height:1.6}.tech-badge{background:var(--teal-tint);color:var(--teal);border-radius:100px;align-items:center;gap:6px;margin-top:10px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-flex}.arch-diagram{background:var(--surface);border:1px solid var(--line);border-radius:20px;margin-top:48px;padding:32px;transition:background .35s,border-color .35s}.arch-node{background:var(--bg2);border:1px solid var(--line);color:var(--ink);text-align:center;border-radius:10px;padding:12px 16px;font-size:12px;font-weight:600;transition:background .35s}.arch-node-highlighted{background:var(--teal-tint);border-color:var(--teal)}.arch-arrow{text-align:center;color:var(--teal);margin:4px 0;font-size:20px}.arch-grid{grid-template-columns:repeat(6,1fr);align-items:center;gap:8px;display:grid}.arch-divider{background:var(--line);border-top:2px dashed var(--line);flex:1;height:2px}.arch-label{letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:20px;font-size:11px;font-weight:700}.arch-footnote{align-items:center;gap:8px;margin-top:8px;display:flex}.app-section{background:var(--hero-bg);transition:background .35s}.app-inner{grid-template-columns:1fr 1fr;align-items:center;gap:80px;max-width:1280px;margin:0 auto;display:grid}.app-content{color:var(--hero-fg)}.app-content .section-label{color:var(--teal)}body[data-theme=civic] .app-content .section-label{color:#ffffffb3}body[data-theme=civic] .app-content .section-label:before{background:#ffffffb3}.app-content .section-title{color:var(--hero-fg)}.app-content .section-zh{color:#ffffff73}body[data-theme=civic] .app-content .section-zh{color:#ffffff8c}.app-content .section-sub{color:#ffffffb3}.app-phones{justify-content:center;align-items:flex-end;gap:24px;display:flex}.app-phone-sm{background:#1a1919;border-radius:24px;width:160px;height:320px;padding:6px;overflow:hidden;transform:translateY(30px);box-shadow:0 30px 60px #00000080,0 0 0 1px #ffffff12}.app-phone-sm .phone-screen{border-radius:19px}.app-phone-lg{background:#1a1919;border-radius:28px;width:200px;height:400px;padding:7px;overflow:hidden;box-shadow:0 40px 80px #0009,0 0 0 1px #ffffff17}.app-phone-lg .phone-screen{border-radius:22px}.app-phone-sm-low{transform:translateY(50px)}.feature-list{flex-direction:column;gap:14px;margin-top:32px;display:flex}.feature-item{align-items:flex-start;gap:12px;display:flex}.feature-dot{background:var(--teal);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;margin-top:2px;display:flex}.feature-text{color:#fffc;font-size:15px;line-height:1.5}body[data-theme=city] .feature-text{color:var(--ink2)}.feature-text-zh{color:#ffffff73;letter-spacing:.5px;margin-top:2px;font-size:12px;display:block}body[data-theme=city] .feature-text-zh{color:var(--muted)}footer{background:var(--ink);color:#ffffff80;padding:60px 40px 40px;transition:background .35s}.footer-inner{max-width:1280px;margin:0 auto}.footer-top{justify-content:space-between;align-items:flex-start;margin-bottom:48px;display:flex}.footer-brand{flex-direction:column;gap:12px;display:flex}.footer-brand-row{align-items:center;gap:10px;display:flex}.footer-brand-name{color:#fff;letter-spacing:-.5px;font-family:DM Sans,sans-serif;font-size:20px;font-weight:800}.footer-tagline{max-width:300px;font-size:13px;line-height:1.6}.footer-links{gap:60px;display:flex}.footer-col h4{letter-spacing:1.5px;text-transform:uppercase;color:#ffffff59;margin-bottom:16px;font-size:12px;font-weight:700}.footer-col a{color:#ffffff8c;margin-bottom:10px;font-size:14px;text-decoration:none;transition:color .2s;display:block}.footer-col a:hover{color:#fff}.footer-bottom{border-top:1px solid #ffffff14;justify-content:space-between;align-items:center;padding-top:28px;font-size:12px;display:flex}.footer-teal{color:var(--teal);font-weight:600}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes blobDrift{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-28px)scale(1.06)}}@keyframes pulseGlow{0%,to{box-shadow:0 8px 24px #18b19359}50%{box-shadow:0 8px 44px #18b193b3,0 0 80px #18b1932e}}@keyframes eyebrowPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}.reveal{opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transform:translateY(28px)}.reveal.revealed{opacity:1;transform:translateY(0)}.reveal-delay-1{transition-delay:.12s}.reveal-delay-2{transition-delay:.22s}.reveal-delay-3{transition-delay:.32s}@media (prefers-reduced-motion:reduce){.reveal,.reveal-delay-1,.reveal-delay-2,.reveal-delay-3{opacity:1;transition:none;transform:none}}.hero-wrapper{position:relative;overflow:hidden}.hero-blob{filter:blur(72px);pointer-events:none;border-radius:50%;animation:linear infinite blobDrift;position:absolute}.hero-blob-1{width:520px;height:520px;animation-duration:9s;top:-8%;right:-6%}.hero-blob-2{width:300px;height:300px;animation-duration:11s;animation-direction:reverse;bottom:4%;left:-4%}.hero-blob-3{width:200px;height:200px;animation-duration:14s;animation-delay:-4s;top:58%;right:28%}body[data-theme=civic] .hero-blob-1{background:#ffffff24}body[data-theme=civic] .hero-blob-2{background:#0000001f}body[data-theme=civic] .hero-blob-3{background:#ffffff12}body[data-theme=night] .hero-blob-1{background:#1ccfae2e}body[data-theme=night] .hero-blob-2{background:#1ccfae12}body[data-theme=night] .hero-blob-3{background:#1ccfae0d}.hero-grid-lines{pointer-events:none;background-image:linear-gradient(var(--hero-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid-color) 1px, transparent 1px);background-size:64px 64px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(90% 90%,#0000 25%,#000 100%);mask-image:radial-gradient(90% 90%,#0000 25%,#000 100%)}body[data-theme=civic]{--hero-grid-color:#ffffff0d}body[data-theme=night]{--hero-grid-color:#1ccfae0d}.hero-content>*{animation:.8s cubic-bezier(.16,1,.3,1) both fadeInUp}.hero-content>:first-child{animation-delay:80ms}.hero-content>:nth-child(2){animation-delay:.18s}.hero-content>:nth-child(3){animation-delay:.26s}.hero-content>:nth-child(4){animation-delay:.34s}.hero-content>:nth-child(5){animation-delay:.42s}@media (prefers-reduced-motion:reduce){.hero-content>*{opacity:1;animation:none}}.phone-wrap{animation:1s cubic-bezier(.16,1,.3,1) .3s both fadeInUp}.phone-outer{animation:6s ease-in-out infinite float}@media (prefers-reduced-motion:reduce){.phone-wrap,.phone-outer{animation:none}}.eyebrow-dot{animation:2s ease-in-out infinite eyebrowPulse}.hero .btn-primary{animation:3.5s ease-in-out infinite pulseGlow}.hero .btn-primary:hover{animation:none}@media (prefers-reduced-motion:reduce){.hero .btn-primary{animation:none}}body[data-theme=night] .hero h1{background:linear-gradient(175deg,#f0f0ec 20%,#f0f0ec8c 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}body[data-theme=night] .hero h1 em{background:linear-gradient(135deg,#1ccfae 0%,#18b193 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}body[data-theme=civic] .hero h1 em{filter:brightness(1.15)}.section-label:before{background:linear-gradient(90deg, var(--teal) 0%, transparent 100%);width:32px}.stats-strip{background:linear-gradient(135deg,#18b193 0%,#12917a 60%,#0f7564 100%)}body[data-theme=night] .stats-strip{background:linear-gradient(135deg,#1ccfae 0%,#18b193 60%,#12917a 100%)}.stat-num{background:linear-gradient(#fff 0%,#ffffffbf 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}#problem{background-image:radial-gradient(circle, var(--line) 1.5px, transparent 1.5px);background-size:28px 28px}.problem-card{border-top:3px solid #0000;transition:background .35s,border-color .35s,transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;position:relative}.problem-card:before{content:"";background:linear-gradient(135deg, var(--teal), transparent 60%);opacity:0;pointer-events:none;z-index:-1;border-radius:21px 21px 20px 20px;transition:opacity .3s;position:absolute;inset:-3px -1px -1px}.problem-card:hover{transform:translateY(-6px)}.problem-card:hover:before{opacity:1}body[data-theme=civic] .problem-card:hover{box-shadow:0 24px 56px #0000001a,0 0 0 1px #18b19326}body[data-theme=night] .problem-card:hover{box-shadow:0 24px 56px #0006,0 0 24px #1ccfae1a}.problem-num{opacity:.1;font-size:72px;line-height:1}.how-section{background-image:radial-gradient(circle, var(--line) 1.5px, transparent 1.5px);background-size:24px 24px}.step-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}.step:hover .step-icon{transform:scale(1.14)translateY(-4px);box-shadow:0 16px 40px #18b1938c}.tech-card{transition:background .35s,border-color .35s,transform .25s,box-shadow .25s;position:relative;overflow:hidden}.tech-card:after{content:"";background:linear-gradient(180deg, var(--teal) 0%, transparent 100%);opacity:0;border-radius:0 2px 2px 0;width:3px;transition:opacity .25s;position:absolute;top:16px;bottom:16px;left:0}.tech-card:hover{transform:translateY(-3px)}.tech-card:hover:after{opacity:1}body[data-theme=civic] .tech-card:hover{box-shadow:0 12px 36px #00000017}body[data-theme=night] .tech-card:hover{box-shadow:0 12px 36px #0006,0 0 20px #1ccfae12}body[data-theme=night] .app-section{background-image:radial-gradient(70% 70% at 65%,#1ccfae12 0%,#0000 70%)}body[data-theme=civic] .app-section{background-image:radial-gradient(70% 70% at 65%,#ffffff14 0%,#0000 70%)}.phone-glow{background:radial-gradient(circle,#18b1938c 0%,#0000 70%);animation:5s ease-in-out infinite float}body[data-theme=night] .phone-glow{background:radial-gradient(circle,#1ccfae73 0%,#0000 70%)}footer{background:linear-gradient(175deg,#1a1919 0%,#111210 100%)}body[data-theme=night] footer{background:linear-gradient(175deg,#0d0e0c 0%,#080907 100%)}@media (width<=900px){nav{padding:0 20px}.nav-links{display:none}.hero{grid-template-columns:1fr;gap:40px;padding:100px 20px 60px}.phone-wrap{display:none}.stats-inner{grid-template-columns:1fr 1fr;gap:24px}.problem-grid{grid-template-columns:1fr}.how-steps{grid-template-columns:1fr 1fr}.how-steps:before{display:none}.tech-grid,.app-inner{grid-template-columns:1fr}.app-phones{display:none}.footer-top{flex-direction:column;gap:40px}.footer-links{gap:30px}section{padding:60px 20px}.stats-strip{padding:40px 20px}}