:root{
    --water-top:#d9f2e6;
    --water-mid:#a8dcec;
    --water-deep:#7cc3d8;
    --lotus:#8fcb6f;
    --lotus-dark:#5f9e4a;
    --frog:#3f8f72;
    --frog-deep:#2c6b55;
    --orange:#f5a05a;
    --orange-deep:#e07b3a;
    --ink:#1e3a33;
    --ink-soft:#3c5a51;
    --white-soft:rgba(255,255,255,0.72);
    --white-glass:rgba(255,255,255,0.55);
    --shadow:0 18px 40px rgba(30,80,70,0.16);
    --radius-lg:28px;
    --radius-md:22px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    color:var(--ink);
    background:linear-gradient(170deg,var(--water-top) 0%,var(--water-mid) 46%,var(--water-deep) 100%);
    background-attachment:fixed;
    min-height:100vh;
    line-height:1.7;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  h1,h2,h3,p{margin:0;}
  .wrap{width:min(1180px,92vw);margin:0 auto;}

  /* ---------- 顶条 ---------- */
  .topbar{
    position:sticky;top:0;z-index:60;
    background:rgba(255,255,255,0.42);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.6);
    transition:background .4s ease, box-shadow .4s ease;
  }
  .topbar.scrolled{
    background:rgba(230,248,242,0.62);
    box-shadow:0 6px 24px rgba(40,100,90,0.12);
  }
  .topbar-inner{
    display:flex;align-items:center;justify-content:space-between;
    height:58px;gap:12px;
  }
  .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px;}
  .brand img{height:32px;width:auto;border-radius:9px;}
  .brand span{font-size:1.06rem;color:var(--frog-deep);}
  .dl-fab{
    position:relative;
    width:42px;height:42px;border-radius:50%;
    border:none;cursor:pointer;
    background:linear-gradient(140deg,var(--frog) 0%,var(--orange) 100%);
    color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 18px rgba(50,120,100,0.3);
    transition:transform .25s ease;
  }
  .dl-fab:hover{transform:translateY(-2px) scale(1.05);}
  .dl-fab svg{width:20px;height:20px;}
  .dl-panel{
    position:absolute;right:0;top:52px;
    width:300px;max-width:86vw;
    background:rgba(255,255,255,0.94);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow);
    padding:18px;
    display:none;
    transform-origin:top right;
  }
  .dl-panel.open{display:block;animation:rippleIn .45s ease;}
  @keyframes rippleIn{
    from{transform:scale(.86);opacity:0;}
    to{transform:scale(1);opacity:1;}
  }
  .dl-panel h3{font-size:.95rem;color:var(--frog-deep);margin-bottom:10px;}
  .dl-opt{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:16px;
    background:rgba(143,203,111,0.16);
    margin-bottom:8px;font-size:.9rem;color:var(--ink-soft);
  }
  .dl-opt b{color:var(--ink);font-size:.94rem;}
  .dl-note{
    margin-top:10px;font-size:.78rem;color:var(--ink-soft);
    background:rgba(245,160,90,0.14);border-radius:12px;padding:8px 10px;
  }
  .dl-panel .dl-main{
    display:block;text-align:center;margin-top:12px;
    background:linear-gradient(120deg,var(--frog) 0%,var(--orange) 100%);
    color:#fff;border-radius:999px;padding:10px 0;font-size:.9rem;font-weight:600;
  }

  /* ---------- 左侧导航岛 ---------- */
  .nav-island{
    position:fixed;left:18px;top:50%;transform:translateY(-50%);
    z-index:50;display:flex;flex-direction:column;gap:14px;
  }
  .nav-island a{
    position:relative;
    width:74px;height:74px;border-radius:50% 46% 52% 48%;
    background:rgba(255,255,255,0.6);
    display:flex;align-items:center;justify-content:center;
    font-size:.78rem;color:var(--frog-deep);text-align:center;
    box-shadow:0 8px 20px rgba(40,100,90,0.14);
    transition:transform .3s ease, background .3s ease;
    padding:6px;
  }
  .nav-island a:hover{
    transform:translateX(6px) rotate(-4deg) scale(1.06);
    background:rgba(255,255,255,0.92);
  }
  .nav-island a::after{
    content:"";position:absolute;inset:-6px;border-radius:inherit;
    border:1px solid rgba(255,255,255,0.7);
    opacity:0;transition:opacity .3s ease;
  }
  .nav-island a:hover::after{opacity:1;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    padding:46px 0 80px;
    overflow:hidden;
    text-align:center;
  }
  .hero-glow{
    position:absolute;border-radius:50%;filter:blur(48px);opacity:.5;pointer-events:none;
  }
  .hero-glow.g1{width:320px;height:320px;background:#ffffff;top:-60px;left:8%;}
  .hero-glow.g2{width:260px;height:260px;background:#c9f0d8;bottom:0;right:6%;}
  .hero h1{
    font-size:clamp(1.9rem,4.2vw,3.1rem);
    line-height:1.25;
    letter-spacing:.5px;
    margin-bottom:16px;
    color:var(--ink);
  }
  .hero h1 .accent{
    color:var(--frog-deep);
    position:relative;
    display:inline-block;
  }
  .hero h1 .accent::after{
    content:"";position:absolute;left:0;right:0;bottom:2px;height:10px;
    background:linear-gradient(90deg,rgba(143,203,111,.55),rgba(245,160,90,.45));
    border-radius:8px;z-index:-1;
  }
  .hero-sub{
    font-size:clamp(.98rem,1.6vw,1.14rem);
    color:var(--ink-soft);
    max-width:640px;margin:0 auto 10px;
  }
  .hero-hint{
    font-size:.82rem;color:var(--ink-soft);opacity:.85;margin-bottom:38px;
  }
  .hero-stage{
    position:relative;
    display:flex;align-items:flex-end;justify-content:center;
    gap:clamp(10px,2vw,26px);
    flex-wrap:wrap;
  }
  .lotus-pad{
    position:relative;
    background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.85),rgba(143,203,111,.55) 58%,rgba(95,158,74,.55));
    border-radius:50% 48% 52% 46% / 52% 48% 52% 48%;
    box-shadow:0 22px 46px rgba(40,110,90,0.2);
    padding:22px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:10px;
  }
  .lotus-pad::before{
    content:"";position:absolute;inset:8px;border-radius:inherit;
    border:1px dashed rgba(255,255,255,.55);pointer-events:none;
  }
  .lotus-left,.lotus-right{width:min(238px,32vw);min-height:210px;}
  .lotus-center{width:min(340px,52vw);min-height:320px;padding:26px 20px;}
  .lotus-pad .pad-label{
    font-size:.8rem;color:var(--frog-deep);font-weight:600;letter-spacing:.5px;
  }
  .lotus-pad .pad-stat{font-size:1.5rem;font-weight:800;color:var(--ink);}
  .lotus-pad .pad-meta{font-size:.76rem;color:var(--ink-soft);}
  .pad-btn{
    display:inline-block;
    background:linear-gradient(120deg,var(--frog) 0%,var(--orange) 100%);
    color:#fff;font-size:.88rem;font-weight:600;
    padding:10px 22px;border-radius:999px 999px 999px 999px;
    box-shadow:0 10px 22px rgba(60,130,110,.28);
    transition:transform .25s ease;
  }
  .pad-btn:hover{transform:translateY(-3px);}
  .pad-btn.ghost{
    background:rgba(255,255,255,0.85);color:var(--frog-deep);box-shadow:0 8px 18px rgba(60,130,110,.16);
  }
  .phone-frame{
    width:100%;max-width:220px;
    background:#1e3a33;border-radius:28px;padding:8px;
    box-shadow:0 22px 44px rgba(20,60,50,.3);
  }
  .phone-screen{
    background:#f7fbf8;border-radius:22px;overflow:hidden;padding:12px 10px;
  }
  .phone-screen .strip{
    height:6px;border-radius:6px;background:rgba(95,158,74,.28);margin-bottom:8px;
  }
  .phone-screen .strip.s2{width:72%;background:rgba(245,160,90,.32);}
  .phone-screen .strip.s3{width:88%;}
  .phone-screen .thumb{
    height:64px;border-radius:14px;margin-bottom:8px;
    background:linear-gradient(130deg,#bfe6c9,#8fd0dc);
  }
  .bubble-tag{
    position:absolute;
    background:rgba(255,255,255,.9);
    border-radius:16px;
    font-size:.72rem;color:var(--ink-soft);
    padding:6px 12px;
    box-shadow:0 8px 18px rgba(40,100,90,.15);
    animation:floaty 5s ease-in-out infinite;
  }
  .bt1{top:-8px;left:2%;}
  .bt2{bottom:6px;right:-4%;animation-delay:1.2s;}
  .bt3{top:22%;right:6%;animation-delay:2.1s;}
  @keyframes floaty{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
  }
  .hero-waves{
    position:absolute;left:0;right:0;bottom:-2px;height:120px;
    background:
      radial-gradient(ellipse at 20% 100%,rgba(255,255,255,.5),transparent 60%),
      radial-gradient(ellipse at 65% 100%,rgba(255,255,255,.42),transparent 60%);
    pointer-events:none;
  }

  /* ---------- 通用区块 ---------- */
  section.block{padding:66px 0;position:relative;}
  .sec-head{text-align:center;margin-bottom:40px;}
  .sec-head h2{
    font-size:clamp(1.4rem,2.6vw,1.95rem);
    color:var(--ink);
    margin-bottom:10px;
  }
  .sec-head p{color:var(--ink-soft);font-size:.95rem;max-width:600px;margin:0 auto;}

  /* ---------- 分类荷叶群 ---------- */
  .cat-pond{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    align-items:start;
  }
  .cat-lotus{
    position:relative;
    background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.9),rgba(168,220,236,.6) 62%,rgba(124,195,216,.6));
    border-radius:50% 48% 52% 46%/54% 48% 52% 46%;
    padding:26px 20px;
    text-align:center;
    box-shadow:0 18px 38px rgba(40,100,110,.18);
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .cat-lotus:nth-child(2){margin-top:26px;}
  .cat-lotus:nth-child(4){margin-top:-14px;}
  .cat-lotus:hover{transform:scale(1.04) translateY(-6px);box-shadow:0 26px 50px rgba(40,100,110,.24);}
  .cat-lotus b{display:block;font-size:1.12rem;color:var(--frog-deep);margin-bottom:6px;}
  .cat-lotus span{font-size:.82rem;color:var(--ink-soft);}
  .cat-lotus .meter{
    margin-top:12px;height:6px;border-radius:6px;background:rgba(255,255,255,.7);
    overflow:hidden;
  }
  .cat-lotus .meter i{
    display:block;height:100%;border-radius:6px;
    background:linear-gradient(90deg,var(--lotus-dark),var(--orange));
  }
  .cat-grid{
    grid-column:1 / -1;
    display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
    margin-top:8px;
  }
  .cat-grid figure{
    margin:0;border-radius:18px;overflow:hidden;
    background:rgba(255,255,255,.7);
    box-shadow:0 12px 26px rgba(40,100,90,.14);
  }
  .cat-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;}
  .cat-grid figcaption{font-size:.76rem;padding:8px 10px;color:var(--ink-soft);}

  /* ---------- 浮标排行榜 ---------- */
  .rank-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .rank-item{text-align:center;}
  .buoy{
    width:10px;height:46px;margin:0 auto 8px;border-radius:8px;
    background:linear-gradient(180deg,var(--orange),var(--frog));
    position:relative;
  }
  .buoy::after{
    content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);
    width:34px;height:10px;border-radius:50%;
    background:rgba(255,255,255,.7);
    animation:rippleRing 2.6s ease-out infinite;
  }
  @keyframes rippleRing{
    0%{transform:translateX(-50%) scale(.6);opacity:.9;}
    100%{transform:translateX(-50%) scale(2.4);opacity:0;}
  }
  .rank-card{
    background:rgba(255,255,255,.8);
    border-radius:var(--radius-md);
    padding:12px;
    box-shadow:0 14px 30px rgba(40,100,90,.15);
    transition:transform .3s ease;
  }
  .rank-card:hover{transform:translateY(-6px);}
  .rank-card.gold{border:2px solid rgba(245,190,80,.8);}
  .rank-card.silver{border:2px solid rgba(190,200,210,.9);}
  .rank-card.bronze{border:2px solid rgba(205,150,110,.9);}
  .rank-card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;margin-bottom:10px;}
  .rank-seal{
    display:inline-block;font-size:.72rem;font-weight:700;color:#fff;
    background:var(--frog-deep);border-radius:8px;padding:2px 8px;margin-bottom:6px;
  }
  .rank-card h3{font-size:.9rem;color:var(--ink);margin-bottom:4px;}
  .rank-card p{font-size:.74rem;color:var(--ink-soft);}

  /* ---------- 涟漪推荐 ---------- */
  .ripple-zone{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    align-items:center;
  }
  .ripple-item{
    position:relative;
    border-radius:50%;
    padding:16px;
    text-align:center;
    background:radial-gradient(circle at 40% 32%,rgba(255,255,255,.92),rgba(168,220,236,.5));
    box-shadow:0 18px 36px rgba(40,100,110,.16);
    transition:transform .35s ease;
  }
  .ripple-item.main{
    grid-column:span 2;
    justify-self:center;
    width:min(360px,100%);
  }
  .ripple-item:hover{transform:scale(1.05);}
  .ripple-item::before{
    content:"";position:absolute;inset:-14px;border-radius:50%;
    border:1px solid rgba(255,255,255,.75);
    animation:rippleRing 3.4s ease-out infinite;
  }
  .ripple-item img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:18px;margin-bottom:10px;}
  .ripple-item b{display:block;font-size:.92rem;color:var(--frog-deep);}
  .ripple-item span{font-size:.76rem;color:var(--ink-soft);}

  /* ---------- 气泡特色 ---------- */
  .bubble-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start;
  }
  .bubble{
    background:rgba(255,255,255,.55);
    border:1px solid rgba(255,255,255,.85);
    border-radius:26px;
    padding:22px 18px;
    box-shadow:0 16px 34px rgba(40,100,90,.14);
    transition:transform .3s ease;
  }
  .bubble:nth-child(2){margin-top:30px;}
  .bubble:nth-child(3){margin-top:10px;}
  .bubble:hover{transform:translateY(-8px);}
  .bubble .ico{font-size:1.5rem;margin-bottom:10px;}
  .bubble h3{font-size:1rem;color:var(--frog-deep);margin-bottom:6px;}
  .bubble p{font-size:.85rem;color:var(--ink-soft);}

  /* ---------- 会员王座 ---------- */
  .throne-wrap{
    position:relative;
    background:rgba(255,255,255,.62);
    border-radius:var(--radius-lg);
    padding:34px;
    display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:center;
    box-shadow:0 22px 46px rgba(40,100,90,.16);
  }
  .throne-wrap::before{
    content:"";position:absolute;left:50%;top:-26px;transform:translateX(-50%);
    width:70%;height:40px;border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(143,203,111,.6),transparent 70%);
  }
  .throne-wrap h2{font-size:1.4rem;margin-bottom:12px;}
  .throne-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .throne-list div{
    background:rgba(143,203,111,.18);border-radius:14px;padding:10px 12px;font-size:.85rem;color:var(--ink-soft);
  }
  .throne-cta{text-align:center;}
  .throne-cta .price{font-size:.82rem;color:var(--ink-soft);margin-bottom:12px;}
  .drop-btn{
    display:inline-block;
    background:linear-gradient(120deg,var(--frog-deep),var(--orange));
    color:#fff;font-weight:600;font-size:.92rem;
    padding:12px 34px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
    box-shadow:0 12px 26px rgba(60,130,110,.3);
    transition:transform .25s ease;
  }
  .drop-btn:hover{transform:translateY(-3px) scale(1.03);}

  /* ---------- 浮萍全端 ---------- */
  .duck-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .duck{
    background:rgba(255,255,255,.6);
    border-radius:44% 56% 50% 50%/52% 48% 52% 48%;
    padding:24px 18px;text-align:center;
    box-shadow:0 14px 30px rgba(40,100,90,.14);
    transition:transform .4s ease;
  }
  .duck:hover{transform:rotate(-3deg) translateY(-5px);}
  .duck .ico{font-size:1.4rem;margin-bottom:8px;}
  .duck b{display:block;font-size:.95rem;color:var(--frog-deep);margin-bottom:6px;}
  .duck p{font-size:.8rem;color:var(--ink-soft);}

  /* ---------- 下载区 ---------- */
  .splash{
    position:relative;
    background:radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.85),rgba(168,220,236,.55));
    border-radius:36px;
    padding:46px 34px;
    display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;
    box-shadow:0 22px 46px rgba(40,100,110,.18);
    overflow:hidden;
  }
  .splash h2{font-size:1.5rem;margin-bottom:12px;}
  .splash p{font-size:.92rem;color:var(--ink-soft);margin-bottom:18px;}
  .store-row{display:flex;gap:12px;flex-wrap:wrap;}
  .store-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(120deg,var(--frog),var(--orange));
    color:#fff;font-size:.88rem;font-weight:600;
    padding:11px 22px;border-radius:26px;
    box-shadow:0 10px 22px rgba(60,130,110,.26);
    transition:transform .25s ease;
  }
  .store-btn:hover{transform:translateY(-3px);}
  .qr-box{
    text-align:center;
    background:rgba(255,255,255,.85);
    border-radius:24px;padding:22px;
    box-shadow:0 14px 30px rgba(40,100,90,.14);
  }
  .qr-box .qr-square{
    width:140px;height:140px;margin:0 auto 12px;border-radius:16px;
    background:
      repeating-linear-gradient(0deg,rgba(46,90,80,.55) 0 6px,transparent 6px 12px),
      repeating-linear-gradient(90deg,rgba(46,90,80,.55) 0 6px,transparent 6px 12px),
      #f4fbf7;
  }
  .qr-box p{font-size:.8rem;color:var(--ink-soft);}

  /* ---------- Footer ---------- */
  footer{
    background:linear-gradient(180deg,rgba(30,64,56,.9),rgba(16,40,36,.97));
    color:#d8ece4;
    padding:56px 0 26px;
    margin-top:40px;
    position:relative;
    overflow:hidden;
  }
  .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;margin-bottom:34px;}
  .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
  .footer-brand img{height:30px;width:auto;border-radius:8px;}
  .footer-brand span{font-weight:700;color:#fff;}
  .footer-top p{font-size:.84rem;color:#b7d4ca;line-height:1.8;}
  .footer-col h3{font-size:.9rem;color:#fff;margin-bottom:10px;}
  .footer-col ul{list-style:none;padding:0;margin:0;}
  .footer-col li{font-size:.82rem;color:#a8c8bd;margin-bottom:7px;}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.14);
    padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
    font-size:.76rem;color:#93b4a9;
  }
  .footer-bottom time{color:#93b4a9;}

  /* ---------- 响应式 ---------- */
  @media (max-width:1024px){
    .nav-island{display:none;}
    .cat-pond{grid-template-columns:repeat(2,1fr);}
    .cat-grid{grid-template-columns:repeat(3,1fr);}
    .rank-row{grid-template-columns:repeat(2,1fr);}
    .bubble-row{grid-template-columns:repeat(2,1fr);}
    .duck-row{grid-template-columns:repeat(2,1fr);}
    .ripple-zone{grid-template-columns:repeat(2,1fr);}
    .ripple-item.main{grid-column:span 2;}
    .throne-wrap{grid-template-columns:1fr;}
    .splash{grid-template-columns:1fr;}
    .footer-top{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:768px){
    .hero-stage{flex-direction:column;align-items:center;}
    .lotus-left,.lotus-right,.lotus-center{width:min(320px,88vw);}
    .cat-pond{grid-template-columns:repeat(2,1fr);gap:14px;}
    .cat-grid{grid-template-columns:repeat(2,1fr);}
    .rank-row{grid-template-columns:1fr;}
    .bubble-row{grid-template-columns:1fr;}
    .duck-row{grid-template-columns:repeat(2,1fr);}
    .ripple-zone{grid-template-columns:1fr;}
    .ripple-item.main{grid-column:span 1;}
    .throne-list{grid-template-columns:1fr;}
    .footer-top{grid-template-columns:1fr;}
    .hero-hint{margin-bottom:26px;}
  }
  /* 移动端导航浮萍条 */
  @media (max-width:768px){
    .nav-island{
      display:flex;flex-direction:row;
      left:50%;top:auto;bottom:12px;transform:translateX(-50%);
      background:rgba(255,255,255,.7);
      padding:8px;border-radius:999px;
      gap:8px;box-shadow:0 10px 24px rgba(40,100,90,.18);
    }
    .nav-island a{width:52px;height:52px;font-size:.66rem;}
  }