:root{
    --pink-900:#5c1538;
    --pink-700:#a8265c;
    --pink-500:#e84c88;
    --pink-300:#ff9ec4;
    --pink-100:#ffe4ef;
    --pink-50:#fff3f8;
    --ink:#3a1224;
    --ink-soft:#7a4a60;
    --white:#ffffff;
    --radius:18px;
    --shadow:0 14px 36px rgba(168,38,92,.14);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    background:var(--pink-50);
    color:var(--ink);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}

  /* ---------- header ---------- */
  .site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,243,248,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--pink-100);
  }
  .header-inner{
    max-width:1160px;margin:0 auto;padding:12px 20px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:.5px;color:var(--pink-900);}
  .brand img{height:34px;width:auto;border-radius:8px;}
  .nav-links{display:flex;gap:22px;font-size:15px;color:var(--ink-soft);}
  .nav-links a{transition:color .2s;}
  .nav-links a:hover{color:var(--pink-500);}
  .header-cta{
    display:inline-block;background:var(--pink-500);color:#fff;
    padding:9px 20px;border-radius:999px;font-size:14px;font-weight:700;
    box-shadow:0 8px 18px rgba(232,76,136,.35);
    transition:transform .2s,background .2s;
  }
  .header-cta:hover{background:var(--pink-700);transform:translateY(-2px);}

  /* ---------- hero ---------- */
  .hero{
    position:relative;overflow:hidden;
    background:
      radial-gradient(circle at 88% 8%, #ffd3e4 0%, transparent 46%),
      radial-gradient(circle at 6% 92%, #ffe9f2 0%, transparent 42%),
      linear-gradient(160deg,#fff8fb 0%,#ffe9f3 100%);
    padding:56px 20px 70px;
  }
  .hero-inner{
    max-width:1160px;margin:0 auto;
    display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  }
  .hero-tag{
    display:inline-block;font-size:13px;font-weight:700;color:var(--pink-700);
    background:#fff;border:1px solid var(--pink-300);
    padding:5px 14px;border-radius:999px;margin-bottom:18px;
  }
  .hero h1{
    font-size:clamp(28px,4.2vw,46px);line-height:1.28;
    color:var(--pink-900);font-weight:900;letter-spacing:.5px;
  }
  .hero h1 em{font-style:normal;color:var(--pink-500);}
  .hero p.lead{
    margin-top:18px;font-size:16.5px;color:var(--ink-soft);max-width:520px;
  }
  .hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
  .btn-primary{
    display:inline-block;background:linear-gradient(135deg,var(--pink-500),var(--pink-700));
    color:#fff;font-weight:800;padding:14px 32px;border-radius:999px;font-size:16px;
    box-shadow:0 12px 26px rgba(168,38,92,.34);
    transition:transform .2s,box-shadow .2s;
  }
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(168,38,92,.42);}
  .btn-ghost{
    display:inline-block;padding:13px 26px;border-radius:999px;font-weight:700;
    color:var(--pink-700);background:#fff;border:1.5px solid var(--pink-300);
    transition:background .2s;
  }
  .btn-ghost:hover{background:var(--pink-100);}
  .hero-stats{
    margin-top:34px;display:flex;flex-wrap:wrap;gap:28px;
  }
  .hero-stats div{font-size:14px;color:var(--ink-soft);}
  .hero-stats strong{display:block;font-size:20px;color:var(--pink-700);font-weight:900;}

  .hero-visual{position:relative;display:flex;justify-content:center;}
  .phone-card{
    width:min(300px,82vw);border-radius:30px;overflow:hidden;
    border:7px solid #fff;box-shadow:var(--shadow);background:#fff;
    transform:rotate(-2.5deg);
  }
  .phone-card img{width:100%;height:auto;}
  .float-cover{
    position:absolute;right:-10px;bottom:-20px;width:118px;border-radius:14px;
    border:4px solid #fff;box-shadow:var(--shadow);overflow:hidden;
    transform:rotate(6deg);
  }
  .float-cover img{width:100%;height:auto;}

  /* ---------- section base ---------- */
  section{padding:68px 20px;}
  .wrap{max-width:1160px;margin:0 auto;}
  .sec-head{text-align:center;margin-bottom:44px;}
  .sec-head .kicker{
    font-size:13px;font-weight:800;letter-spacing:2px;color:var(--pink-500);
    text-transform:uppercase;display:block;margin-bottom:10px;
  }
  .sec-head h2{
    font-size:clamp(23px,3vw,32px);color:var(--pink-900);font-weight:900;
  }
  .sec-head p{margin-top:12px;color:var(--ink-soft);font-size:15.5px;}

  /* ---------- intro / 简介 ---------- */
  .intro{background:var(--white);}
  .intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .intro-card{
    background:var(--pink-50);border-radius:var(--radius);padding:28px 24px;
    border:1px solid #ffe0ec;transition:transform .25s,box-shadow .25s;
  }
  .intro-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
  .intro-card .num{
    width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--pink-300),var(--pink-500));
    color:#fff;font-weight:900;font-size:18px;margin-bottom:16px;
  }
  .intro-card h3{font-size:18px;color:var(--pink-900);margin-bottom:8px;font-weight:800;}
  .intro-card p{font-size:15px;color:var(--ink-soft);}

  /* ---------- 分类 ---------- */
  .genres{background:linear-gradient(180deg,#fff3f8,#ffe4ef);}
  .genre-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .genre-tile{
    position:relative;border-radius:16px;overflow:hidden;background:#fff;
    box-shadow:0 8px 20px rgba(168,38,92,.10);transition:transform .25s;
  }
  .genre-tile:hover{transform:scale(1.03);}
  .genre-tile img{width:100%;aspect-ratio:3/4;object-fit:cover;}
  .genre-tile span{
    position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;
    background:linear-gradient(transparent,rgba(92,21,56,.85));
    color:#fff;font-weight:800;font-size:15px;
  }

  /* ---------- 漫画库 ---------- */
  .library{background:var(--white);}
  .shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .book{
    background:var(--pink-50);border-radius:16px;overflow:hidden;
    border:1px solid #ffe0ec;transition:transform .25s,box-shadow .25s;
  }
  .book:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
  .book img{width:100%;aspect-ratio:3/4;object-fit:cover;}
  .book-body{padding:14px 14px 18px;}
  .book-body strong{display:block;font-size:15px;color:var(--pink-900);margin-bottom:4px;}
  .book-body small{font-size:13px;color:var(--ink-soft);}
  .book-body .tag{
    display:inline-block;margin-top:10px;font-size:12px;font-weight:700;
    color:var(--pink-700);background:var(--pink-100);
    padding:3px 10px;border-radius:999px;
  }

  /* ---------- 更新日历 ---------- */
  .calendar{background:linear-gradient(180deg,#ffe4ef,#fff3f8);}
  .week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-bottom:36px;}
  .day{
    background:#fff;border-radius:14px;padding:16px 8px;text-align:center;
    border:1px solid #ffd2e4;
  }
  .day b{display:block;font-size:16px;color:var(--pink-900);}
  .day em{font-style:normal;font-size:12.5px;color:var(--ink-soft);}
  .day.today{background:linear-gradient(135deg,var(--pink-500),var(--pink-700));border-color:transparent;}
  .day.today b,.day.today em{color:#fff;}
  .update-row{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  }
  .update-item{
    background:#fff;border-radius:16px;padding:18px;display:flex;gap:14px;
    border:1px solid #ffe0ec;align-items:center;
  }
  .update-item img{
    width:64px;height:86px;object-fit:cover;border-radius:10px;flex:none;
  }
  .update-item h3{font-size:15px;color:var(--pink-900);margin-bottom:4px;}
  .update-item p{font-size:13.5px;color:var(--ink-soft);}

  /* ---------- App 内页展示 ---------- */
  .appshow{background:var(--white);}
  .shot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:end;}
  .shot{border-radius:22px;overflow:hidden;border:6px solid #ffe4ef;box-shadow:var(--shadow);background:#fff;}
  .shot img{width:100%;height:auto;}
  .shot:nth-child(2),.shot:nth-child(4){transform:translateY(22px);}

  /* ---------- 用户评价 ---------- */
  .reviews{background:linear-gradient(180deg,#fff3f8,#ffe4ef);}
  .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .review{
    background:#fff;border-radius:var(--radius);padding:26px 24px;
    box-shadow:0 8px 20px rgba(168,38,92,.08);
  }
  .review .stars{color:var(--pink-500);letter-spacing:3px;font-size:15px;margin-bottom:12px;}
  .review p{font-size:15px;color:var(--ink-soft);}
  .review .who{margin-top:16px;display:flex;align-items:center;gap:10px;}
  .review .avatar{
    width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--pink-300),var(--pink-500));
    display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;
  }
  .review .who span{font-size:13.5px;color:var(--pink-900);font-weight:700;}

  /* ---------- FAQ ---------- */
  .faq{background:var(--white);}
  .faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
  .faq-item{
    background:var(--pink-50);border:1px solid #ffe0ec;border-radius:14px;overflow:hidden;
  }
  .faq-item summary{
    cursor:pointer;padding:18px 22px;font-weight:800;font-size:15.5px;color:var(--pink-900);
    list-style:none;position:relative;padding-right:48px;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
    color:var(--pink-500);font-size:22px;font-weight:700;
  }
  .faq-item[open] summary::after{content:"–";}
  .faq-item p{padding:0 22px 20px;font-size:14.5px;color:var(--ink-soft);}

  /* ---------- download band ---------- */
  .download{
    background:linear-gradient(135deg,var(--pink-700),var(--pink-500) 60%,#ff7fb0);
    text-align:center;color:#fff;
  }
  .download h2{font-size:clamp(22px,3vw,30px);font-weight:900;margin-bottom:14px;}
  .download p{opacity:.92;font-size:15.5px;max-width:560px;margin:0 auto 28px;}
  .download .btn-primary{
    background:#fff;color:var(--pink-700);box-shadow:0 12px 26px rgba(0,0,0,.18);
  }
  .download .btn-primary:hover{background:var(--pink-100);}

  /* ---------- footer ---------- */
  .site-footer{
    background:#fff5f9;border-top:1px solid #ffe0ec;
    padding:36px 20px 30px;font-size:12.5px;color:#b08898;
  }
  .footer-inner{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;}
  .footer-inner p{max-width:560px;line-height:1.7;}
  .footer-inner a{color:#b08898;text-decoration:underline;}
  .footer-meta{display:flex;flex-direction:column;gap:6px;text-align:right;}

  /* ---------- responsive ---------- */
  @media (max-width:1024px){
    .hero-inner{grid-template-columns:1fr;gap:40px;}
    .hero-visual{order:-1;}
    .intro-grid{grid-template-columns:1fr 1fr;}
    .genre-grid{grid-template-columns:repeat(3,1fr);}
    .shelf{grid-template-columns:repeat(3,1fr);}
    .update-row{grid-template-columns:1fr 1fr;}
    .shot-grid{grid-template-columns:repeat(2,1fr);}
    .shot:nth-child(2),.shot:nth-child(4){transform:none;}
    .review-grid{grid-template-columns:1fr 1fr;}
    .nav-links{display:none;}
  }
  @media (max-width:768px){
    section{padding:48px 16px;}
    .header-inner{padding:10px 16px;}
    .brand{font-size:16px;}
    .brand img{height:28px;}
    .header-cta{padding:8px 16px;font-size:13px;}
    .hero{padding:36px 16px 54px;}
    .hero p.lead{font-size:15.5px;}
    .intro-grid{grid-template-columns:1fr;}
    .genre-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
    .shelf{grid-template-columns:repeat(2,1fr);gap:14px;}
    .week-strip{grid-template-columns:repeat(4,1fr);gap:8px;}
    .day{padding:12px 4px;}
    .day b{font-size:14px;}
    .update-row{grid-template-columns:1fr;}
    .review-grid{grid-template-columns:1fr;}
    .footer-inner{flex-direction:column;align-items:flex-start;}
    .footer-meta{text-align:left;}
    .float-cover{width:92px;right:0;}
  }