*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      -webkit-tap-highlight-color:transparent;
    }

    html{
      min-height:100%;
      background:var(--deep);
    }

    body{
      min-height:100vh;
      color:var(--text);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
                  "Microsoft YaHei",Arial,sans-serif;
      background:
        radial-gradient(circle at 12% 18%,rgba(30,239,216,.18),transparent 28%),
        radial-gradient(circle at 86% 20%,rgba(0,153,171,.18),transparent 30%),
        radial-gradient(circle at 55% 90%,rgba(22,125,142,.25),transparent 38%),
        linear-gradient(155deg,#00191f 0%,#002f38 46%,#001319 100%);
      overflow-x:hidden;
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.22;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
      background-size:32px 32px;
      mask-image:linear-gradient(to bottom,#000,transparent 85%);
    }

    .orb{
      position:fixed;
      border-radius:50%;
      filter:blur(2px);
      pointer-events:none;
      opacity:.45;
      animation:float 8s ease-in-out infinite;
    }

    .orb.one{
      width:180px;
      height:180px;
      top:8%;
      left:-80px;
      background:rgba(25,226,208,.18);
    }

    .orb.two{
      width:240px;
      height:240px;
      right:-130px;
      bottom:7%;
      background:rgba(4,133,153,.22);
      animation-delay:-4s;
    }

    @keyframes float{
      0%,100%{transform:translate3d(0,0,0) scale(1)}
      50%{transform:translate3d(0,-22px,0) scale(1.06)}
    }

    .page{
      position:relative;
      z-index:2;
      width:min(1180px,100%);
      min-height:100vh;
      margin:0 auto;
      padding:
        calc(22px + env(safe-area-inset-top))
        28px
        calc(28px + env(safe-area-inset-bottom));
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:34px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .brand-logo{
      width:52px;
      height:52px;
      object-fit:contain;
      border-radius:14px;
      background:rgba(255,255,255,.08);
      border:1px solid var(--glass-border);
      box-shadow:0 10px 30px rgba(0,0,0,.22);
    }

    .brand-copy strong{
      display:block;
      font-size:20px;
      letter-spacing:.8px;
    }

    .brand-copy span{
      display:block;
      margin-top:3px;
      font-size:12px;
      color:var(--muted);
      letter-spacing:1.8px;
    }

    .service-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:106px;
      height:42px;
      padding:0 16px;
      color:#eaffff;
      text-decoration:none;
      font-size:14px;
      border-radius:999px;
      background:rgba(255,255,255,.07);
      border:1px solid var(--glass-border);
      backdrop-filter:blur(14px);
      box-shadow:inset 0 1px rgba(255,255,255,.08);
      transition:.2s;
    }

    .service-link:active{
      transform:scale(.97);
    }

    .hero{
      display:grid;
      grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);
      align-items:center;
      gap:64px;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 13px;
      margin-bottom:20px;
      color:var(--cyan-soft);
      font-size:13px;
      border:1px solid rgba(68,255,232,.24);
      border-radius:999px;
      background:rgba(21,205,187,.09);
      box-shadow:inset 0 0 18px rgba(44,240,216,.05);
    }

    .eyebrow::before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:#3affd8;
      box-shadow:0 0 12px #3affd8;
    }

    h1{
      font-size:clamp(40px,5.2vw,72px);
      line-height:1.05;
      letter-spacing:-2px;
      margin-bottom:20px;
      text-shadow:0 8px 28px rgba(0,0,0,.25);
    }

    h1 .gradient{
      display:block;
      color:transparent;
      background:linear-gradient(90deg,#fff 0%,#aafff6 55%,#41e8d8 100%);
      -webkit-background-clip:text;
      background-clip:text;
    }

    .subtitle{
      max-width:590px;
      color:var(--muted);
      font-size:17px;
      line-height:1.9;
      margin-bottom:30px;
    }

    .download-list{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
      max-width:560px;
    }

    .download-btn{
      position:relative;
      min-height:74px;
      display:flex;
      align-items:center;
      gap:13px;
      padding:13px 17px;
      border:0;
      border-radius:18px;
      color:#fff;
      text-decoration:none;
      cursor:pointer;
      overflow:hidden;
      transition:.22s ease;
      box-shadow:0 13px 30px rgba(0,0,0,.22);
    }

    .download-btn::after{
      content:"";
      position:absolute;
      top:-70%;
      left:-35%;
      width:42%;
      height:240%;
      transform:rotate(22deg);
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
      animation:shine 4.5s ease-in-out infinite;
    }

    @keyframes shine{
      0%,70%{left:-50%}
      100%{left:125%}
    }

    .download-btn.android{
      background: linear-gradient(#3abfdb, #158197);
      border:1px solid rgba(105,255,230,.3);
    }

    .download-btn.ios{
      color:#fff;
      background: linear-gradient(#3abfdb, #158197);
      border:1px solid rgba(255,239,156,.65);
    }

    .download-btn:hover{
      transform:translateY(-3px);
      box-shadow:0 18px 38px rgba(0,0,0,.28);
    }

    .download-icon{
      flex:0 0 auto;
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:13px;
      font-size:25px;
      background:rgba(255,255,255,.14);
    }
    .download-icon img{
    width:24px;
    height:24px;
    object-fit:contain;
    display:block;
}
    .download-btn.ios .download-icon{
      background:rgba(0,33,40,.1);
    }

    .download-copy{
      position:relative;
      z-index:2;
      text-align:left;
    }

    .download-copy small{
      display:block;
      font-size:11px;
      opacity:.78;
      margin-bottom:3px;
    }

    .download-copy strong{
      display:block;
      font-size:18px;
      letter-spacing:.5px;
    }

    .tips{
      display:flex;
      flex-wrap:wrap;
      gap:12px 20px;
      margin-top:22px;
      color:#fff;
      font-size:13px;
    }

    .tips span::before{
      content:"✓";
      margin-right:6px;
      color:#52f2d9;
    }

    .device-stage{
      position:relative;
      min-height:590px;
      display:grid;
      place-items:center;
    }

    .halo{
      position:absolute;
      width:420px;
      height:420px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(43,235,214,.25),rgba(6,87,100,.08) 52%,transparent 72%);
      filter:blur(3px);
      animation:pulse 4s ease-in-out infinite;
    }

    @keyframes pulse{
      0%,100%{transform:scale(.96);opacity:.65}
      50%{transform:scale(1.06);opacity:1}
    }

    .phone{
      position:relative;
      z-index:3;
      width:275px;
      aspect-ratio:9/18.5;
      padding:9px;
      border-radius:43px;
      background:linear-gradient(145deg,#11323a,#00080b);
      border:1px solid rgba(255,255,255,.24);
      box-shadow:
        0 35px 80px rgba(0,0,0,.48),
        inset 0 0 0 2px rgba(255,255,255,.05);
      transform:rotate(5deg);
    }

    .phone::before{
      content:"";
      position:absolute;
      top:16px;
      left:50%;
      width:78px;
      height:23px;
      transform:translateX(-50%);
      z-index:4;
      border-radius:20px;
      background:#02090b;
    }

    .screen{
      position:relative;
      height:100%;
      overflow:hidden;
      border-radius:35px;
      background:
        radial-gradient(circle at 50% 15%,rgba(72,237,218,.28),transparent 30%),
        linear-gradient(180deg,#004653,#002128 55%,#001216);
    }

    .screen::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 35%);
      pointer-events:none;
    }

    .screen-logo{
      position:absolute;
      top:72px;
      left:50%;
      width:92px;
      height:92px;
      transform:translateX(-50%);
      object-fit:contain;
      border-radius:24px;
      background:rgba(255,255,255,.07);
      box-shadow:0 16px 35px rgba(0,0,0,.24);
    }

    .screen-title{
      position:absolute;
      top:180px;
      left:0;
      right:0;
      text-align:center;
      font-size:21px;
      font-weight:700;
      letter-spacing:1px;
    }

    .screen-subtitle{
      position:absolute;
      top:213px;
      left:0;
      right:0;
      text-align:center;
      color:rgba(226,255,252,.62);
      font-size:11px;
      letter-spacing:2px;
    }

    .screen-cards{
      position:absolute;
      left:17px;
      right:17px;
      top:265px;
      display:grid;
      gap:12px;
    }

    .screen-card{
      height:74px;
      border-radius:16px;
      background:rgba(255,255,255,.075);
      border:1px solid rgba(255,255,255,.09);
      box-shadow:inset 0 1px rgba(255,255,255,.04);
    }

    .screen-card:nth-child(2){
      height:94px;
    }

    .qr-card{
      position:absolute;
      z-index:5;
      right:-4px;
      bottom:68px;
      width:158px;
      padding:14px;
      border-radius:22px;
      color:#002128;
      text-align:center;
      background:rgba(247,255,254,.94);
      box-shadow:0 18px 50px rgba(0,0,0,.3);
      transform:rotate(-4deg);
    }

    #qrcode{
      width:126px;
      height:126px;
      margin:0 auto 9px;
      padding:7px;
      border-radius:13px;
      background:#fff;
    }

    #qrcode img,
    #qrcode canvas{
      width:100%!important;
      height:100%!important;
      display:block;
    }

    .qr-card strong{
      display:block;
      font-size:14px;
    }

    .qr-card span{
      display:block;
      margin-top:3px;
      color:#557076;
      font-size:10px;
    }

    .feature-bar{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
      margin-top:45px;
    }

    .feature{
      padding:18px;
      border:1px solid var(--glass-border);
      border-radius:20px;
      background:var(--glass);
      backdrop-filter:blur(16px);
      box-shadow:inset 0 1px rgba(255,255,255,.06);
    }

    .feature b{
      display:block;
      margin-bottom:7px;
      font-size:15px;
    }

    .feature p{
      color:#8dfff0;
      font-size:12px;
      line-height:1.65;
    }

    .footer{
      margin-top:25px;
      text-align:center;
      color:#ffffff;
      font-size:12px;
    }

    .mask{
      position:fixed;
      z-index:99;
      inset:0;
      display:none;
      align-items:flex-end;
      justify-content:center;
      padding:18px;
      background:rgba(0,10,13,.72);
      backdrop-filter:blur(9px);
    }

    .mask.show{
      display:flex;
    }

    .dialog{
      width:min(430px,100%);
      padding:5px 15px 20px;
      border-radius:25px;
      text-align:center;
      background:linear-gradient(160deg,#07515d,#002a32);
      border:1px solid rgba(154,255,243,.2);
      box-shadow:0 30px 80px rgba(0,0,0,.48);
    }

    .dialog-icon{
      font-size:42px;
      margin-bottom:10px;
    }

    .dialog h3{
      margin-bottom:9px;
      font-size:20px;
    }

    .dialog p{
      color:rgba(226,255,252,.65);
      font-size:14px;
      line-height:1.8;
    }

    .dialog button{
      width:100%;
      height:48px;
      margin-top:18px;
      border:0;
      border-radius:14px;
      color:#00353d;
      font-size:15px;
      font-weight:700;
      background:linear-gradient(90deg,#5dffe5,#d0fff8);
      cursor:pointer;
    }

    @media (max-width:900px){
      .page{
        padding-left:20px;
        padding-right:20px;
      }

      .hero{
        grid-template-columns:1fr;
        gap:26px;
      }

      .hero-copy{
        text-align:center;
      }

      .eyebrow{
        margin-left:auto;
        margin-right:auto;
      }

      .subtitle,
      .download-list{
        margin-left:auto;
        margin-right:auto;
      }

      .tips{
        justify-content:center;
      }

      .device-stage{
        min-height:520px;
      }

      .phone{
        width:238px;
      }

      .qr-card{
        right:calc(50% - 210px);
        bottom:35px;
        width:143px;
      }

      #qrcode{
        width:111px;
        height:111px;
      }
    }

    @media (max-width:600px){
      .page{
        padding-top:calc(15px + env(safe-area-inset-top));
        padding-left:15px;
        padding-right:15px;
      }

      .topbar{
        margin-bottom:28px;
      }

      .brand-logo{
        width:44px;
        height:44px;
        border-radius:12px;
      }

      .brand-copy strong{
        font-size:17px;
      }

      .brand-copy span{
        font-size:10px;
      }

      .service-link{
        min-width:82px;
        height:38px;
        padding:0 12px;
        font-size:13px;
      }

      h1{
        font-size:39px;
        letter-spacing:-1px;
      }

      .subtitle{
        font-size:14px;
        line-height:1.75;
        margin-bottom:24px;
      }

      .download-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
        width:88%;
        max-width:100%;
      }

      .download-btn{
        min-width:0;
        min-height:57px;
        gap:13px;
        padding:10px 9px;
        border-radius:15px;
      }

      .download-icon{
        width:34px;
        height:34px;
        border-radius:10px;
        font-size:20px;
      }

      .download-copy{
        min-width:0;
      }

      .download-copy small{
        font-size:8px;
        white-space:nowrap;
      }

      .download-copy strong{
        font-size:16px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }

      .device-stage{
        min-height:475px;
      }

      .halo{
        width:340px;
        height:340px;
      }

      .phone{
        width:218px;
      }

      .screen-logo{
        top:61px;
        width:78px;
        height:78px;
      }

      .screen-title{
        top:151px;
        font-size:18px;
      }

      .screen-subtitle{
        top:180px;
      }

      .screen-cards{
        top:226px;
      }

      .qr-card{
        right:4px;
        bottom:30px;
        width:126px;
        padding:11px;
      }

      #qrcode{
        width:104px;
        height:104px;
      }

      .feature-bar{
        grid-template-columns:1fr;
        margin-top:24px;
      }

      .feature{
        padding:16px;
      }
    }

    @media (max-width:370px){
      .qr-card{
        right:-2px;
        transform:scale(.9) rotate(-4deg);
        transform-origin:right bottom;
      }
    }
  
    /* Safari 全屏引导层 */
    .mask{
      position:fixed;
      z-index:99999;
      inset:0;
      display:none;
      align-items:stretch;
      justify-content:stretch;
      padding:
        calc(18px + env(safe-area-inset-top))
        18px
        calc(18px + env(safe-area-inset-bottom));
      background:
        radial-gradient(circle at 82% 8%,rgba(80,255,231,.18),transparent 24%),
        rgba(0,15,19,.94);
      backdrop-filter:blur(16px);
    }

    .mask.show{
      display:flex;
    }

    .dialog{
      position:relative;
      width:100%;
      max-width:none;
      min-height:100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:96px 22px 26px;
      border-radius:28px;
      text-align:center;
      background:
        linear-gradient(160deg,rgba(5,79,91,.82),rgba(0,33,40,.9));
      border:1px solid rgba(154,255,243,.2);
      box-shadow:
        inset 0 1px rgba(255,255,255,.08),
        0 30px 80px rgba(0,0,0,.5);
      overflow:hidden;
    }

    .dialog::before{
      content:"";
      position:absolute;
      width:200px;
      height:200px;
      top:-110px;
      right:-100px;
      border-radius:50%;
      background:rgba(45,240,218,.12);
      filter:blur(4px);
    }

    .safari-arrow{
      position:absolute;
      top:14px;
      right:14px;
      width:112px;
      height:112px;
      pointer-events:none;
      animation:arrowBounce 1.15s ease-in-out infinite;
    }

    .safari-arrow::before{
      content:"";
      position:absolute;
      right:18px;
      top:12px;
      width:62px;
      height:62px;
      border-top:5px solid #71ffea;
      border-right:5px solid #71ffea;
      border-radius:0 16px 0 0;
      filter:drop-shadow(0 0 9px rgba(113,255,234,.65));
    }

    .safari-arrow::after{
      content:"";
      position:absolute;
      right:24px;
      top:18px;
      width:74px;
      height:5px;
      border-radius:999px;
      background:#71ffea;
      transform:rotate(-45deg);
      transform-origin:right center;
      box-shadow:0 0 10px rgba(113,255,234,.65);
    }

    @keyframes arrowBounce{
      0%,100%{transform:translate(0,0)}
      50%{transform:translate(-7px,7px)}
    }

    .dialog-icon{
      width:74px;
      height:74px;
      display:grid;
      place-items:center;
      margin-bottom:17px;
      border-radius:22px;
      font-size:40px;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 16px 38px rgba(0,0,0,.24);
    }

    .dialog h3{
      margin-bottom:12px;
      font-size:25px;
      letter-spacing:.5px;
    }

    .dialog p{
      max-width:460px;
      color:rgba(226,255,252,.72);
      font-size:15px;
      line-height:1.9;
    }

    .guide-steps{
      width:min(460px,100%);
      display:grid;
      gap:10px;
      margin-top:22px;
      text-align:left;
    }

    .guide-step{
      display:flex;
      align-items:center;
      gap:12px;
      padding:13px 14px;
      border-radius:15px;
      background:rgba(255,255,255,.065);
      border:1px solid rgba(255,255,255,.08);
    }

    .guide-step i{
      flex:0 0 auto;
      width:28px;
      height:28px;
      display:grid;
      place-items:center;
      border-radius:50%;
      color:#00333a;
      font-size:13px;
      font-style:normal;
      font-weight:800;
      background:#72ffe9;
    }

    .guide-step span{
      color:#eaffff;
      font-size:14px;
      line-height:1.55;
    }

    .dialog-actions{
      width:min(460px,100%);
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
      margin-top:22px;
    }

    .dialog button{
      width:100%;
      height:50px;
      margin-top:0;
      border:0;
      border-radius:15px;
      font-size:15px;
      font-weight:700;
      cursor:pointer;
    }

    .copy-btn{
      color:#00353d;
      background:linear-gradient(90deg,#5dffe5,#d0fff8);
      box-shadow:0 12px 26px rgba(29,225,205,.18);
    }

    .close-btn{
      color:#eaffff;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.1)!important;
    }

    .copy-status{
      min-height:20px;
      margin-top:10px;
      color:#8dfff0;
      font-size:13px;
    }

    @media (min-width:700px){
      .mask{
        align-items:center;
        justify-content:center;
        padding:28px;
      }

      .dialog{
        width:min(520px,100%);
        min-height:auto;
        padding:105px 30px 30px;
      }
    }
.hero-logo{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:10px auto 28px;
}

.hero-logo img{
    width:100px;
    max-width:80%;
    display:block;
    object-fit:contain;

    filter:
        drop-shadow(0 0 15px rgba(0,255,220,.35))
        drop-shadow(0 0 35px rgba(0,255,220,.15));

    animation:logoFloat 3.5s ease-in-out infinite;
}

@keyframes logoFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}