:root{
    --cream:#fff7ec;
    --apricot:#ffd6bc;
    --coral:#ff7a5c;
    --forest:#3e7c5a;
    --ink:#2f2a26;
    --ink-soft:#6b615a;
    --radius-lg:24px;
    --radius-md:18px;
    --shadow:0 12px 30px rgba(190,120,80,.14);
    --shadow-soft:0 6px 18px rgba(190,120,80,.10);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  .wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px;}

  /* ---------- Header ---------- */
  .site-header{
    background:var(--cream);
    padding:18px 0 10px;
  }
  .brand-row{
    display:flex;align-items:center;gap:10px;
  }
  .brand-row img{height:34px;width:auto;}
  .brand-name{font-size:20px;font-weight:700;letter-spacing:.5px;}

  .nav-bar{
    background:var(--cream);
    border-top:0;
    padding:10px 0 12px;
  }
  .nav-scroll{
    display:flex;gap:8px;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
    padding:2px 0;
  }
  .nav-scroll::-webkit-scrollbar{display:none;}
  .nav-scroll a{
    flex:0 0 auto;
    font-size:11px;
    padding:6px 14px;
    border-radius:999px;
    color:var(--ink-soft);
    background:var(--apricot);
    white-space:nowrap;
    transition:background .25s,color .25s;
  }
  .nav-scroll a.active,
  .nav-scroll a:hover{
    background:var(--coral);
    color:#fff;
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    margin-top:16px;
    min-height:420px;
    display:flex;
    align-items:center;
    box-shadow:var(--shadow);
  }
  .hero-bg{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
  }
  .hero-mask{
    position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(255,247,236,.96) 0%,rgba(255,214,188,.82) 42%,rgba(255,122,92,.35) 100%);
  }
  .hero-inner{
    position:relative;z-index:2;
    padding:52px 40px;
    max-width:560px;
  }
  .hero-inner h1{
    font-size:38px;
    line-height:1.28;
    letter-spacing:1px;
    color:var(--ink);
  }
  .hero-inner p.lede{
    margin-top:16px;
    font-size:16px;
    color:#5c4d44;
  }
  .hero-actions{
    margin-top:26px;
    display:flex;flex-wrap:wrap;gap:12px;
  }
  .btn{
    display:inline-block;
    padding:13px 26px;
    border-radius:999px;
    font-size:15px;
    font-weight:600;
    transition:transform .2s,box-shadow .2s,background .2s;
  }
  .btn-primary{
    background:var(--coral);
    color:#fff;
    box-shadow:0 10px 22px rgba(255,122,92,.38);
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(255,122,92,.46);}
  .btn-ghost{
    background:rgba(255,255,255,.75);
    color:var(--forest);
    border:1px solid rgba(62,124,90,.28);
  }
  .btn-ghost:hover{background:#fff;transform:translateY(-2px);}
  .hero-tags{
    margin-top:26px;
    display:flex;flex-wrap:wrap;gap:10px;
  }
  .hero-tags span{
    font-size:12px;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.8);
    color:var(--forest);
  }

  /* ---------- Section base ---------- */
  section{padding:56px 0;}
  .sec-head{margin-bottom:28px;}
  .sec-head h2{
    font-size:26px;
    letter-spacing:.5px;
  }
  .sec-head p{
    margin-top:8px;
    font-size:15px;
    color:var(--ink-soft);
    max-width:640px;
  }

  /* ---------- 下饭 posters ---------- */
  .poster-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
  .poster-item{
    border-radius:var(--radius-md);
    overflow:hidden;
    background:#fff;
    box-shadow:var(--shadow-soft);
    transition:transform .25s;
  }
  .poster-item:hover{transform:translateY(-6px);}
  .poster-item img{
    width:100%;aspect-ratio:3/4;object-fit:cover;
  }
  .poster-item .cap{
    padding:12px 14px 16px;
    font-size:14px;
    font-weight:600;
  }
  .poster-item .cap small{
    display:block;font-weight:400;font-size:12px;color:var(--ink-soft);margin-top:3px;
  }

  /* ---------- 短剧 4:3 cards ---------- */
  .drama-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  .drama-card{
    background:#fff;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-soft);
    transition:transform .25s;
  }
  .drama-card:hover{transform:translateY(-5px);}
  .drama-card img{
    width:100%;aspect-ratio:4/3;object-fit:cover;
  }
  .drama-body{padding:18px 20px 22px;}
  .drama-body h3{font-size:17px;margin-bottom:6px;}
  .drama-body p{font-size:14px;color:var(--ink-soft);}

  /* ---------- 轻松看 左图右文 ---------- */
  .split{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:40px;
    align-items:center;
  }
  .split-media img{
    width:100%;border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
  }
  .split h2{font-size:26px;margin-bottom:16px;}
  .split p{font-size:15px;color:var(--ink-soft);margin-bottom:14px;}
  .feature-list{list-style:none;margin-top:10px;}
  .feature-list li{
    position:relative;
    padding-left:24px;
    margin-bottom:14px;
    font-size:15px;
  }
  .feature-list li::before{
    content:"";
    position:absolute;left:0;top:9px;
    width:10px;height:10px;border-radius:50%;
    background:var(--coral);
  }
  .feature-list strong{color:var(--forest);}

  /* ---------- 评论 ---------- */
  .comments{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  .comment{
    background:var(--apricot);
    border-radius:var(--radius-md);
    padding:22px 22px 24px;
    box-shadow:var(--shadow-soft);
  }
  .comment .who{
    display:flex;align-items:center;gap:10px;margin-bottom:12px;
  }
  .avatar{
    width:38px;height:38px;border-radius:50%;
    background:var(--coral);
    color:#fff;font-size:15px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;
  }
  .who .name{font-size:14px;font-weight:600;}
  .who .tag{font-size:12px;color:#8a6a55;}
  .comment p{font-size:14px;color:#4b3f36;}

  /* ---------- 为什么 ---------- */
  .why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  .why-card{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:28px 24px 30px;
    box-shadow:var(--shadow-soft);
  }
  .why-card .num{
    font-size:13px;font-weight:700;color:var(--coral);
    letter-spacing:2px;margin-bottom:10px;
  }
  .why-card h3{font-size:19px;margin-bottom:10px;}
  .why-card p{font-size:14px;color:var(--ink-soft);}

  /* ---------- 问答 ---------- */
  .faq{max-width:820px;}
  .faq details{
    background:#fff;
    border-radius:var(--radius-md);
    padding:18px 22px;
    margin-bottom:14px;
    box-shadow:var(--shadow-soft);
  }
  .faq summary{
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:16px;
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{
    content:"+";
    font-size:20px;color:var(--coral);
    transition:transform .2s;
  }
  .faq details[open] summary::after{transform:rotate(45deg);}
  .faq details p{
    margin-top:12px;font-size:14px;color:var(--ink-soft);
  }

  /* ---------- 下载 ---------- */
  .download-banner{
    background:linear-gradient(120deg,var(--coral) 0%,#ff9a6d 55%,var(--apricot) 100%);
    border-radius:var(--radius-lg);
    padding:48px 40px;
    color:#fff;
    box-shadow:0 18px 40px rgba(255,122,92,.30);
    text-align:center;
  }
  .download-banner h2{
    font-size:28px;margin-bottom:12px;
  }
  .download-banner p{
    font-size:15px;opacity:.95;margin-bottom:28px;
  }
  .download-buttons{
    display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  }
  .download-buttons .btn{
    background:#fff;color:var(--coral);
    box-shadow:0 10px 24px rgba(160,60,40,.22);
    min-width:150px;
    text-align:center;
  }
  .download-buttons .btn:hover{transform:translateY(-3px);}

  /* ---------- Footer ---------- */
  .site-footer{
    padding:36px 0 44px;
    text-align:center;
    color:#a99a8e;
    font-size:12px;
  }
  .site-footer p{margin-bottom:6px;}
  .site-footer a{color:#a99a8e;text-decoration:underline;}
  .site-footer time{font-size:12px;}

  /* ---------- Responsive ---------- */
  @media (max-width:1024px){
    .hero-inner{padding:44px 30px;}
    .hero-inner h1{font-size:32px;}
    .poster-row{grid-template-columns:repeat(4,1fr);gap:14px;}
    .drama-grid,.comments,.why-grid{gap:16px;}
    .split{gap:28px;}
  }

  @media (max-width:768px){
    .site-header{padding:14px 0 6px;}
    .nav-bar{
      position:sticky;top:0;z-index:50;
      box-shadow:0 4px 12px rgba(190,120,80,.10);
    }
    .hero{min-height:0;margin-top:10px;}
    .hero-inner{padding:34px 22px;}
    .hero-inner h1{font-size:26px;}
    .hero-inner p.lede{font-size:14px;}
    .hero-actions .btn{padding:11px 20px;font-size:14px;}
    section{padding:40px 0;}
    .sec-head h2{font-size:22px;}
    .poster-row{
      grid-template-columns:repeat(2,1fr);
      gap:14px;
    }
    .drama-grid{grid-template-columns:1fr;}
    .split{grid-template-columns:1fr;gap:22px;}
    .comments{grid-template-columns:1fr;}
    .why-grid{grid-template-columns:1fr;}
    .download-banner{padding:34px 22px;}
    .download-banner h2{font-size:22px;}
    .download-buttons .btn{min-width:0;flex:1 1 100%;}
  }