:root{
    --primary:#2980FE;
    --primary-soft:#EAF3FF;
    --primary-light:#F5F9FF;
    --white:#FFFFFF;
    --bg:#F7FAFE;
    --bg-2:#EEF5FF;
    --gray-50:#F8FAFC;
    --gray-100:#EEF2F7;
    --gray-200:#E3E8EF;
    --gray-300:#CBD5E1;
    --gray-500:#64748B;
    --gray-700:#334155;
    --gray-900:#111827;
    --shadow:0 18px 55px rgba(41,128,254,.10);
    --shadow-card:0 14px 35px rgba(15,23,42,.07);
    --radius:24px;
    --radius-sm:18px;
    --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
    color:var(--gray-700);
    background:linear-gradient(180deg,#fff 0%,var(--bg) 42%,#fff 100%);
    line-height:1.72;
    overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 16px}
h1,h2,h3{margin:0;color:var(--gray-900);line-height:1.25}
h1{font-size:34px;letter-spacing:-.8px}
h2{font-size:26px;margin-bottom:14px}
h3{font-size:18px;margin-bottom:10px}
ul,ol{margin:0;padding-left:20px}
li{margin:8px 0}
.container{
    width:min(var(--container),calc(100% - 32px));
    margin:0 auto;
}
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--gray-200);
}
.header-inner{
    width:min(var(--container),calc(100% - 28px));
    margin:0 auto;
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--gray-900)}
.logo-img{width:36px;height:36px;border-radius:12px;object-fit:cover;box-shadow:0 8px 20px rgba(41,128,254,.18)}
.brand-text{font-size:18px;letter-spacing:.2px}
.nav-toggle{
    border:1px solid var(--gray-200);
    background:#fff;
    border-radius:12px;
    width:42px;
    height:42px;
    color:var(--gray-900);
    font-size:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.site-nav{
    position:absolute;
    left:14px;
    right:14px;
    top:70px;
    display:none;
    flex-direction:column;
    padding:12px;
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:18px;
    box-shadow:var(--shadow-card);
}
.site-nav.open{display:flex}
.site-nav a{
    padding:10px 12px;
    border-radius:12px;
    font-size:14px;
    color:var(--gray-700);
}
.site-nav a:hover,.site-nav a.active{
    background:var(--primary-soft);
    color:var(--primary);
}
.section{padding:60px 0}
.section-soft{background:linear-gradient(180deg,var(--primary-light),#fff)}
.section-head{max-width:760px;margin:0 auto 28px;text-align:center}
.section-head .eyebrow,.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border:1px solid rgba(41,128,254,.18);
    border-radius:999px;
    color:var(--primary);
    background:#fff;
    font-size:13px;
    font-weight:700;
    margin-bottom:12px;
}
.section-head p{color:var(--gray-500)}
.download-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    min-width:142px;
    padding:13px 24px;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    font-weight:800;
    box-shadow:0 12px 26px rgba(41,128,254,.24);
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
    border:none;
    cursor:pointer;
}
.download-btn:hover{transform:translateY(-2px);box-shadow:0 18px 32px rgba(41,128,254,.28);background:#1E72EA}
.app-hero{
    position:relative;
    padding:54px 0 34px;
    overflow:hidden;
}
.app-hero:before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-190px;
    top:-130px;
    background:radial-gradient(circle,rgba(41,128,254,.18),rgba(41,128,254,0) 65%);
    pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
.hero-content p{font-size:16px;color:var(--gray-500)}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 24px}
.hero-tags span{
    padding:8px 12px;
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:999px;
    color:var(--gray-700);
    font-size:13px;
}
.hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hero-note{font-size:13px;color:var(--gray-500)}
.app-visual{
    position:relative;
    background:linear-gradient(145deg,#fff,var(--primary-light));
    border:1px solid var(--gray-200);
    border-radius:32px;
    padding:22px;
    min-height:420px;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:center;
}
.app-visual .phone-img{
    width:min(72%,330px);
    margin:auto;
    filter:drop-shadow(0 24px 38px rgba(15,23,42,.13));
}
.floating-card{
    background:rgba(255,255,255,.94);
    border:1px solid var(--gray-200);
    border-radius:18px;
    padding:13px 15px;
    box-shadow:var(--shadow-card);
    color:var(--gray-700);
    font-size:13px;
}
.floating-card strong{display:block;color:var(--gray-900);font-size:14px;margin-bottom:4px}
.floating-card .dot{
    width:8px;height:8px;border-radius:999px;background:var(--primary);display:inline-block;margin-right:6px;
}
.float-asset,.float-cold,.float-swap,.float-dapp{position:static;margin-top:10px;width:100%}
.ability-bar{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:26px;
}
.ability-item{
    padding:18px;
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:20px;
    box-shadow:0 10px 28px rgba(15,23,42,.04);
}
.ability-item span{
    display:inline-flex;
    width:32px;height:32px;border-radius:12px;
    align-items:center;justify-content:center;
    color:#fff;background:var(--primary);
    font-weight:800;margin-bottom:10px;
}
.ability-item h3{font-size:16px}
.ability-item p{color:var(--gray-500);font-size:14px;margin:0}
.feature-showcase{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
}
.feature-card{
    overflow:hidden;
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:var(--radius);
    padding:20px;
    box-shadow:var(--shadow-card);
    display:grid;
    gap:18px;
}
.feature-card img{
    border-radius:20px;
    background:var(--primary-light);
    border:1px solid var(--gray-100);
    max-height:260px;
    width:100%;
    object-fit:cover;
}
.link-arrow{color:var(--primary);font-weight:800;display:inline-flex;margin-top:4px}
.product-section{
    padding:28px;
    border:1px solid var(--gray-200);
    border-radius:30px;
    background:#fff;
    box-shadow:var(--shadow-card);
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    align-items:center;
}
.product-section.reverse{background:linear-gradient(145deg,var(--primary-light),#fff)}
.product-section .media-wrap{
    border-radius:26px;
    padding:18px;
    background:linear-gradient(145deg,#fff,var(--bg-2));
    border:1px solid var(--gray-200);
}
.product-section .media-wrap img{border-radius:22px;margin:auto;max-height:390px;object-fit:contain}
.point-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin:20px 0;
}
.point{
    padding:14px;
    border:1px solid var(--gray-200);
    background:var(--gray-50);
    border-radius:16px;
}
.point strong{display:block;color:var(--gray-900);margin-bottom:4px}
.panel-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.panel-links a{
    padding:8px 12px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary);
    font-weight:700;
    font-size:14px;
}
.cold-wallet-panel{background:linear-gradient(145deg,#F7FBFF,#fff)}
.swap-panel{background:#fff}
.dapp-panel{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
}
.dapp-note-card{
    border:1px solid var(--gray-200);
    border-radius:20px;
    padding:18px;
    background:linear-gradient(145deg,#fff,var(--primary-light));
}
.process-steps{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}
.step-card{
    position:relative;
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:22px;
    padding:20px;
    box-shadow:0 12px 30px rgba(15,23,42,.04);
}
.step-no{
    display:inline-flex;
    width:36px;height:36px;
    align-items:center;justify-content:center;
    background:var(--primary);
    color:#fff;
    border-radius:14px;
    font-weight:900;
    margin-bottom:12px;
}
.risk-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}
.risk-card{
    background:#fff;
    border:1px solid var(--gray-200);
    border-top:4px solid var(--primary);
    border-radius:20px;
    padding:18px;
    box-shadow:0 10px 26px rgba(15,23,42,.04);
}
.risk-card strong{display:block;color:var(--gray-900);margin-bottom:8px}
.ecosystem-grid,.category-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}
.eco-card,.category-card{
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:22px;
    padding:20px;
    box-shadow:0 10px 26px rgba(15,23,42,.04);
}
.eco-card h3,.category-card h3{display:flex;align-items:center;gap:8px}
.eco-card h3:before,.category-card h3:before{
    content:"";
    width:8px;height:8px;border-radius:999px;background:var(--primary);
}
.faq-list{display:grid;grid-template-columns:1fr;gap:14px}
.faq-item{
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:20px;
    padding:18px;
}
.faq-item h3{font-size:17px}
.cta-section{
    text-align:center;
    padding:46px 24px;
    background:linear-gradient(135deg,var(--primary-soft),#fff);
    border:1px solid var(--gray-200);
    border-radius:30px;
    box-shadow:var(--shadow-card);
}
.cta-section p{max-width:680px;margin:0 auto 22px;color:var(--gray-500)}
.page-hero{
    padding:56px 0 24px;
}
.page-hero-box{
    background:linear-gradient(145deg,#fff,var(--primary-light));
    border:1px solid var(--gray-200);
    border-radius:30px;
    padding:28px;
    box-shadow:var(--shadow-card);
}
.page-hero p{max-width:860px;color:var(--gray-500)}
.badge{
    display:inline-flex;
    padding:6px 12px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary);
    font-weight:800;
    font-size:13px;
    margin-bottom:12px;
}
.content-layout{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
    align-items:start;
}
.article-card{
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:24px;
    padding:24px;
    box-shadow:var(--shadow-card);
}
.article-card + .article-card{margin-top:18px}
.side-panel{
    background:linear-gradient(145deg,#fff,var(--primary-light));
    border:1px solid var(--gray-200);
    border-radius:24px;
    padding:20px;
    position:sticky;
    top:88px;
}
.tip-box,.checklist,.notice-box{
    border:1px solid var(--gray-200);
    border-radius:20px;
    padding:18px;
    background:var(--gray-50);
    margin:18px 0;
}
.tip-box{border-left:4px solid var(--primary);background:#fff}
.checklist li::marker{color:var(--primary)}
.download-panel{
    margin-top:22px;
    display:flex;
    justify-content:flex-start;
}
.download-page-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
}
.download-steps{
    counter-reset:step;
    display:grid;
    gap:12px;
}
.download-step{
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:20px;
    padding:18px;
}
.download-step:before{
    counter-increment:step;
    content:counter(step);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;height:32px;
    background:var(--primary);
    color:#fff;
    border-radius:12px;
    font-weight:900;
    margin-bottom:10px;
}
.site-footer{
    margin-top:60px;
    padding:44px 0 0;
    background:#fff;
    border-top:1px solid var(--gray-200);
}
.footer-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--gray-900);margin-bottom:12px}
.footer-brand img{width:34px;height:34px;border-radius:12px}
.site-footer h3{font-size:15px}
.site-footer a{
    display:block;
    margin:8px 0;
    color:var(--gray-500);
    font-size:14px;
}
.site-footer a:hover{color:var(--primary)}
.footer-bottom{
    margin-top:28px;
    border-top:1px solid var(--gray-200);
    text-align:center;
    padding:18px;
    color:var(--gray-500);
    font-size:13px;
}
@media (min-width:640px){
    h1{font-size:42px}
    .ability-bar{grid-template-columns:repeat(2,1fr)}
    .feature-showcase{grid-template-columns:repeat(2,1fr)}
    .point-grid{grid-template-columns:repeat(2,1fr)}
    .process-steps{grid-template-columns:repeat(2,1fr)}
    .risk-grid{grid-template-columns:repeat(2,1fr)}
    .ecosystem-grid,.category-grid{grid-template-columns:repeat(2,1fr)}
    .download-page-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:920px){
    h1{font-size:54px}
    h2{font-size:34px}
    .nav-toggle{display:none}
    .site-nav{
        position:static;
        display:flex !important;
        flex-direction:row;
        align-items:center;
        gap:2px;
        padding:0;
        background:transparent;
        border:0;
        border-radius:0;
        box-shadow:none;
    }
    .site-nav a{font-size:14px;padding:8px 10px}
    .app-hero{padding:82px 0 42px}
    .hero-grid{grid-template-columns:1.02fr .98fr;gap:50px}
    .app-visual{min-height:540px}
    .float-asset{position:absolute;left:24px;top:64px;width:190px}
    .float-cold{position:absolute;right:22px;top:84px;width:196px}
    .float-swap{position:absolute;left:38px;bottom:78px;width:196px}
    .float-dapp{position:absolute;right:34px;bottom:56px;width:196px}
    .ability-bar{grid-template-columns:repeat(5,1fr)}
    .feature-card{grid-template-columns:1.1fr .9fr;align-items:center;min-height:290px}
    .product-section{grid-template-columns:1fr 1fr;padding:34px}
    .product-section.reverse .section-text{order:2}
    .product-section.reverse .media-wrap{order:1}
    .dapp-panel{grid-template-columns:1fr 1fr;align-items:center}
    .process-steps{grid-template-columns:repeat(3,1fr)}
    .risk-grid{grid-template-columns:repeat(3,1fr)}
    .ecosystem-grid{grid-template-columns:repeat(4,1fr)}
    .content-layout{grid-template-columns:minmax(0,1fr) 320px}
    .footer-grid{grid-template-columns:1.4fr repeat(3,1fr)}
    .download-page-grid{grid-template-columns:1.2fr .8fr}
}
@media (min-width:1180px){
    .site-nav a{padding:8px 12px}
}