:root{
      --bg:#05080f;
      --panel:#0b101a;
      --card:#111827;
      --card2:#151d2b;
      --text:#f5f7fb;
      --muted:#9ca3af;
      --line:rgba(255,255,255,.1);
      --brand:#f0b90b;
      --brand2:#ffd84d;
      --green:#22c55e;
      --red:#ef4444;
      --blue:#38bdf8;
      --radius:22px;
      --max:1180px;
      --shadow:0 20px 60px rgba(0,0,0,.38);
    }

    *{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(--text);
      background:
        radial-gradient(circle at 12% 4%,rgba(240,185,11,.22),transparent 28%),
        radial-gradient(circle at 85% 12%,rgba(56,189,248,.12),transparent 26%),
        linear-gradient(180deg,#05080f 0%,#090d16 48%,#060911 100%);
      line-height:1.75;
    }

    a{color:inherit;text-decoration:none}
    .wrap{width:min(var(--max),calc(100% - 32px));margin:auto}

    .topbar{
      position:sticky;
      top:0;
      z-index:99;
      backdrop-filter:blur(18px);
      background:rgba(5,8,15,.84);
      border-bottom:1px solid var(--line);
    }

    .nav{
      height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

    .logo{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:900;
    }

    .logo-mark{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:14px;
      background:linear-gradient(135deg,var(--brand),var(--brand2));
      color:#080b10;
      font-weight:900;
      box-shadow:0 12px 32px rgba(240,185,11,.26);
    }

    .logo small{
      display:block;
      color:var(--muted);
      font-size:12px;
      margin-top:-4px;
      font-weight:500;
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:16px;
      color:#dbe2ee;
      font-size:14px;
    }

    .nav-links a:hover{color:var(--brand)}

    .nav-cta{
      padding:10px 16px;
      border-radius:999px;
      background:linear-gradient(135deg,var(--brand),var(--brand2));
      color:#080b10;
      font-weight:900;
    }

    .menu-btn{display:none}

    .breadcrumb{
      padding:14px 0 0;
      color:var(--muted);
      font-size:13px;
    }

    .breadcrumb a{color:#ffe69b}

    .hero{
      padding:56px 0 40px;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:44px;
      align-items:center;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 13px;
      border:1px solid rgba(240,185,11,.34);
      border-radius:999px;
      background:rgba(240,185,11,.1);
      color:#ffe69b;
      font-size:13px;
      margin-bottom:18px;
    }

    h1{
      margin:0 0 18px;
      font-size:clamp(34px,5vw,64px);
      line-height:1.08;
      letter-spacing:-1.8px;
    }

    .gradient-text{
      background:linear-gradient(135deg,#fff 0%,#ffe69b 48%,#f0b90b 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .hero p{
      margin:0 0 18px;
      color:#cbd5e1;
      font-size:18px;
    }

    .update-time{
      color:#ffe69b;
      font-size:13px;
      margin:0 0 22px;
    }

    .hero-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin:28px 0 24px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:48px;
      padding:0 20px;
      border-radius:14px;
      border:1px solid transparent;
      font-weight:900;
      cursor:pointer;
      transition:.2s ease;
    }

    .btn:hover{transform:translateY(-2px)}

    .btn-primary{
      background:linear-gradient(135deg,var(--brand),var(--brand2));
      color:#080b10;
      box-shadow:0 14px 34px rgba(240,185,11,.22);
    }

    .btn-ghost{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.16);
      color:#fff;
    }

    .hero-note{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      color:var(--muted);
      font-size:13px;
    }

    .hero-note span{
      padding:6px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.045);
      border:1px solid var(--line);
    }

    .visual-card{
      padding:22px;
      border-radius:32px;
      background:
        linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),
        rgba(17,24,39,.76);
      border:1px solid rgba(255,255,255,.14);
      box-shadow:var(--shadow);
    }

    .mock{
      min-height:500px;
      padding:18px;
      border-radius:26px;
      background:#070a12;
      border:1px solid rgba(255,255,255,.1);
      overflow:hidden;
    }

    .mock-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:18px;
    }

    .mock-title{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .avatar{
      width:34px;
      height:34px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--brand),var(--brand2));
    }

    .pill{
      padding:6px 10px;
      border-radius:999px;
      color:#ffe69b;
      font-size:12px;
      background:rgba(240,185,11,.12);
      border:1px solid rgba(240,185,11,.24);
    }

    .token-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      margin-bottom:12px;
    }

    .token-row strong{display:block}
    .token-row small{color:var(--muted)}
    .up{color:var(--green)}
    .down{color:var(--red)}

    .chart{
      height:156px;
      margin:18px 0;
      border-radius:20px;
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(180deg,rgba(240,185,11,.13),transparent),
        repeating-linear-gradient(to right,rgba(255,255,255,.04) 0 1px,transparent 1px 38px),
        repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0 1px,transparent 1px 38px);
    }

    .chart:before{
      content:"";
      position:absolute;
      left:-12%;
      top:45%;
      width:124%;
      height:3px;
      background:linear-gradient(90deg,transparent,var(--brand),var(--brand2),transparent);
      transform:rotate(-8deg);
      box-shadow:0 0 25px rgba(240,185,11,.8);
    }

    .mock-bottom{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
    }

    .mini{
      padding:12px;
      border-radius:16px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      text-align:center;
      color:var(--muted);
      font-size:12px;
    }

    .mini b{
      display:block;
      color:#fff;
      font-size:16px;
    }

    section{padding:54px 0}

    .section-title{
      margin-bottom:24px;
      max-width:880px;
    }

    .section-title h2{
      margin:0;
      font-size:clamp(26px,3vw,38px);
      line-height:1.2;
      letter-spacing:-.8px;
    }

    .section-title p{
      margin:8px 0 0;
      color:var(--muted);
    }

    .risk{
      padding:20px;
      border-radius:var(--radius);
      background:linear-gradient(135deg,rgba(240,185,11,.13),rgba(239,68,68,.08));
      border:1px solid rgba(240,185,11,.28);
      color:#ffe69b;
    }

    .risk strong{color:#fff}

    .grid-4{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }

    .feature,
    .step,
    .faq-item,
    .app-card,
    .term,
    .time-item{
      border:1px solid var(--line);
      background:rgba(255,255,255,.055);
      border-radius:var(--radius);
    }

    .feature{
      padding:22px;
    }

    .feature i{
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      border-radius:15px;
      background:rgba(240,185,11,.13);
      color:var(--brand);
      font-style:normal;
      font-weight:900;
      margin-bottom:14px;
    }

    .feature h3,
    .step h3{
      margin:0 0 8px;
      font-size:18px;
    }

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

    .apps{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }

    .app-card{
      padding:22px;
      background:
        linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),
        rgba(17,24,39,.88);
      box-shadow:0 12px 35px rgba(0,0,0,.22);
      transition:.2s ease;
    }

    .app-card:hover{
      transform:translateY(-4px);
      border-color:rgba(240,185,11,.45);
    }

    .app-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px;
    }

    .app-logo{
      width:54px;
      height:54px;
      border-radius:18px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,var(--brand),var(--brand2));
      color:#080b10;
      font-weight:900;
    }

    .tag{
      display:inline-flex;
      padding:5px 9px;
      border-radius:999px;
      color:#ffe69b;
      font-size:12px;
      background:rgba(240,185,11,.08);
      border:1px solid rgba(240,185,11,.24);
      white-space:nowrap;
    }

    .app-card h3{
      margin:0 0 6px;
      font-size:21px;
    }

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

    .meta{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin:14px 0;
    }

    .meta div{
      padding:10px;
      border-radius:14px;
      background:rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.08);
      color:var(--muted);
      font-size:13px;
    }

    .meta b{
      display:block;
      color:#fff;
    }

    .steps{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
      counter-reset:step;
    }

    .step{
      padding:24px;
      min-height:190px;
    }

    .step:before{
      counter-increment:step;
      content:"0" counter(step);
      display:inline-grid;
      place-items:center;
      width:42px;
      height:42px;
      border-radius:14px;
      background:rgba(240,185,11,.13);
      color:var(--brand);
      font-weight:900;
      margin-bottom:14px;
    }

    .compare{
      overflow:auto;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:rgba(255,255,255,.045);
    }

    table{
      width:100%;
      min-width:780px;
      border-collapse:collapse;
    }

    th,td{
      padding:16px;
      border-bottom:1px solid var(--line);
      text-align:left;
      color:#dce3ee;
      font-size:14px;
      vertical-align:top;
    }

    th{
      color:#fff;
      background:rgba(255,255,255,.06);
    }

    tr:last-child td{border-bottom:none}
    td span{color:var(--muted)}

    .table-note{
      margin:12px 0 0;
      color:var(--muted);
      font-size:13px;
    }

    .timeline{
      display:grid;
      gap:14px;
    }

    .time-item{
      display:grid;
      grid-template-columns:140px 1fr;
      gap:16px;
      padding:18px;
    }

    .time-item b{color:var(--brand)}

    .terms{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
    }

    .term{
      padding:18px;
      border-radius:18px;
    }

    .term strong{
      display:block;
      margin-bottom:6px;
      color:#fff;
    }

    .term span{
      color:var(--muted);
      font-size:14px;
    }

    .download-panel{
      display:grid;
      grid-template-columns:1fr .78fr;
      gap:24px;
      align-items:center;
      padding:30px;
      border-radius:32px;
      background:
        linear-gradient(135deg,rgba(240,185,11,.16),rgba(56,189,248,.08)),
        rgba(255,255,255,.05);
      border:1px solid rgba(240,185,11,.28);
      box-shadow:var(--shadow);
    }

    .download-panel h2{
      margin:0 0 10px;
      font-size:32px;
    }

    .download-panel p{
      margin:0 0 20px;
      color:#cbd5e1;
    }

    .search-box{
      display:flex;
      gap:10px;
      padding:10px;
      border-radius:18px;
      background:rgba(0,0,0,.18);
      border:1px solid var(--line);
    }

    .search-box input{
      flex:1;
      min-width:0;
      background:transparent;
      border:0;
      outline:0;
      color:#fff;
      padding:0 8px;
      font-size:15px;
    }

    .search-box input::placeholder{color:#7f8794}

    .faq{
      display:grid;
      gap:12px;
    }

    .faq-item{
      overflow:hidden;
    }

    .faq-q{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:18px 20px;
      background:none;
      border:0;
      color:#fff;
      font-size:16px;
      font-weight:900;
      cursor:pointer;
      text-align:left;
    }

    .faq-q em{
      font-style:normal;
      color:var(--brand);
      font-size:22px;
    }

    .faq-a{
      display:none;
      padding:0 20px 20px;
      color:var(--muted);
      font-size:14px;
    }

    .faq-item.open .faq-a{display:block}

    .float-bar{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      z-index:80;
      width:min(720px,calc(100% - 24px));
      padding:10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      border-radius:20px;
      background:rgba(5,8,15,.9);
      border:1px solid rgba(255,255,255,.16);
      backdrop-filter:blur(18px);
      box-shadow:0 12px 40px rgba(0,0,0,.35);
    }

    .float-bar strong{font-size:14px}
    .float-bar small{display:block;color:var(--muted)}
    .float-bar .btn{min-height:42px;border-radius:14px}

    footer{
      padding:34px 0 86px;
      border-top:1px solid var(--line);
      color:var(--muted);
      font-size:13px;
    }

    .footer-grid{
      display:flex;
      justify-content:space-between;
      gap:20px;
      flex-wrap:wrap;
    }

    .modal{
      position:fixed;
      inset:0;
      z-index:200;
      display:none;
      align-items:center;
      justify-content:center;
      padding:20px;
      background:rgba(0,0,0,.62);
    }

    .modal.open{display:flex}

    .modal-card{
      width:min(560px,100%);
      padding:24px;
      border-radius:26px;
      background:#0b101a;
      border:1px solid rgba(255,255,255,.14);
      box-shadow:var(--shadow);
    }

    .modal-card h3{
      margin:0 0 10px;
      font-size:24px;
    }

    .modal-card p,
    .modal-card li{
      color:#cbd5e1;
    }

    .modal-card ul{
      margin:0 0 18px;
      padding-left:18px;
    }

    .modal-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    @media (max-width:980px){
      .hero-grid,
      .download-panel{grid-template-columns:1fr}
      .grid-4,
      .steps,
      .terms{grid-template-columns:repeat(2,1fr)}
      .apps{grid-template-columns:repeat(2,1fr)}
      .mock{min-height:auto}
    }

    @media (max-width:720px){
      .nav{height:64px}
      .nav-links{
        display:none;
        position:absolute;
        top:64px;
        left:16px;
        right:16px;
        flex-direction:column;
        align-items:stretch;
        padding:16px;
        border-radius:20px;
        background:#0b101a;
        border:1px solid var(--line);
      }
      .nav-links.show{display:flex}
      .menu-btn{
        display:inline-flex;
        border:1px solid var(--line);
        background:rgba(255,255,255,.06);
        color:#fff;
        border-radius:12px;
        padding:9px 12px;
      }
      .hero{padding-top:34px}
      .grid-4,
      .steps,
      .apps,
      .terms{grid-template-columns:1fr}
      .time-item{grid-template-columns:1fr}
      .float-bar{align-items:flex-start}
      .float-bar .btn{white-space:nowrap}
      .logo small{display:none}
    }