/* roulang page: index */
:root{
      --color-ink:#1c2420;
      --color-ink-soft:#43524a;
      --color-muted:#748078;
      --color-primary:#0f6a55;
      --color-primary-dark:#0a493d;
      --color-secondary:#d69d3d;
      --color-secondary-soft:#f2d89d;
      --color-bg:#faf7ef;
      --color-bg-2:#f3efe4;
      --color-card:#fffdf8;
      --color-line:rgba(37,58,49,.12);
      --color-line-strong:rgba(15,106,85,.22);
      --color-success:#1f8a62;
      --color-danger:#bd4b3e;
      --gradient-brand:linear-gradient(135deg,#0f6a55 0%,#2d8767 42%,#d69d3d 100%);
      --gradient-soft:linear-gradient(135deg,rgba(15,106,85,.12),rgba(214,157,61,.16));
      --gradient-dark:linear-gradient(135deg,#102a24 0%,#173a31 55%,#6d5525 100%);
      --shadow-sm:0 8px 24px rgba(28,36,32,.07);
      --shadow-md:0 16px 46px rgba(28,36,32,.11);
      --shadow-lg:0 26px 70px rgba(28,36,32,.16);
      --radius-sm:12px;
      --radius-md:18px;
      --radius-lg:26px;
      --radius-xl:34px;
      --radius-pill:999px;
      --container:1240px;
      --header-h:78px;
      --transition:220ms ease;
      --font-system:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;text-size-adjust:100%}
    body{
      margin:0;
      font-family:var(--font-system);
      color:var(--color-ink);
      line-height:1.75;
      background:
        radial-gradient(circle at 8% 8%,rgba(214,157,61,.16),transparent 31%),
        radial-gradient(circle at 92% 14%,rgba(15,106,85,.12),transparent 34%),
        linear-gradient(180deg,var(--color-bg) 0%,#fffdf7 48%,var(--color-bg-2) 100%);
      overflow-x:hidden;
    }
    body.menu-open{overflow:hidden}
    a{color:inherit;text-decoration:none;transition:color var(--transition),background var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition)}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    button{border:0;cursor:pointer}
    input,textarea,select{width:100%}
    ::selection{background:rgba(214,157,61,.32);color:var(--color-ink)}
    :focus-visible{outline:3px solid rgba(214,157,61,.42);outline-offset:3px;border-radius:10px}

    .container{
      width:min(calc(100% - 40px),var(--container));
      margin-inline:auto;
    }
    .section{padding:92px 0;position:relative}
    .section.compact{padding:64px 0}
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:28px;
      margin-bottom:34px;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 13px;
      border:1px solid var(--color-line-strong);
      border-radius:var(--radius-pill);
      color:var(--color-primary-dark);
      background:rgba(255,253,248,.72);
      font-size:13px;
      font-weight:700;
      letter-spacing:.04em;
    }
    .section-kicker::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--gradient-brand);
      box-shadow:0 0 0 5px rgba(15,106,85,.08);
    }
    h1,h2,h3,p{margin-top:0}
    h1{
      font-size:clamp(40px,6vw,72px);
      line-height:1.06;
      letter-spacing:-.05em;
      margin-bottom:24px;
      font-weight:900;
    }
    h2{
      font-size:clamp(28px,3.4vw,46px);
      line-height:1.16;
      letter-spacing:-.035em;
      margin-bottom:12px;
      font-weight:850;
    }
    h3{
      font-size:22px;
      line-height:1.35;
      letter-spacing:-.015em;
      margin-bottom:10px;
      font-weight:820;
    }
    .lead{
      color:var(--color-ink-soft);
      font-size:18px;
      max-width:680px;
    }
    .muted{color:var(--color-muted)}
    .text-gradient{
      background:var(--gradient-brand);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:80;
      height:var(--header-h);
      display:flex;
      align-items:center;
      background:rgba(250,247,239,.86);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(37,58,49,.09);
      transition:height var(--transition),box-shadow var(--transition),background var(--transition);
    }
    .site-header.is-scrolled{
      height:66px;
      box-shadow:0 10px 30px rgba(28,36,32,.08);
      background:rgba(250,247,239,.94);
    }
    .nav-wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      height:100%;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
      font-weight:900;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:15px;
      display:grid;
      place-items:center;
      color:#fff;
      background:var(--gradient-brand);
      box-shadow:0 12px 28px rgba(15,106,85,.24);
      font-size:15px;
      letter-spacing:-.02em;
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      line-height:1.12;
    }
    .brand-name{
      font-size:20px;
      letter-spacing:-.02em;
    }
    .brand-sub{
      font-size:12px;
      color:var(--color-muted);
      font-weight:700;
      margin-top:4px;
    }
    .main-nav{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      flex:1;
    }
    .nav-item{
      position:relative;
    }
    .nav-link,.mega-toggle{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 16px;
      border-radius:var(--radius-pill);
      color:var(--color-ink-soft);
      font-size:15px;
      font-weight:750;
      background:transparent;
    }
    .nav-link:hover,.mega-toggle:hover,.nav-link.active,.mega-toggle.active{
      color:var(--color-primary-dark);
      background:rgba(15,106,85,.08);
    }
    .mega-toggle .chev{
      width:7px;
      height:7px;
      border-right:2px solid currentColor;
      border-bottom:2px solid currentColor;
      transform:rotate(45deg) translateY(-2px);
      transition:transform var(--transition);
    }
    .nav-item:hover .mega-toggle .chev,
    .nav-item.is-open .mega-toggle .chev{transform:rotate(225deg) translateY(-1px)}
    .mega-panel{
      position:absolute;
      top:calc(100% + 14px);
      left:50%;
      transform:translateX(-50%) translateY(8px);
      width:min(720px,calc(100vw - 36px));
      padding:18px;
      border-radius:24px;
      border:1px solid var(--color-line);
      background:rgba(255,253,248,.96);
      box-shadow:var(--shadow-lg);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity var(--transition),transform var(--transition),visibility var(--transition);
    }
    .nav-item:hover .mega-panel,.nav-item.is-open .mega-panel{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translateX(-50%) translateY(0);
    }
    .mega-grid{
      display:grid;
      grid-template-columns:1fr 1fr 1.08fr;
      gap:14px;
    }
    .mega-card{
      padding:18px;
      border-radius:18px;
      border:1px solid var(--color-line);
      background:linear-gradient(180deg,#fffdf8,rgba(243,239,228,.72));
    }
    .mega-card strong{display:block;margin-bottom:6px;font-size:15px}
    .mega-card span{display:block;color:var(--color-muted);font-size:13px;line-height:1.6}
    .mega-card.highlight{
      background:var(--gradient-dark);
      color:#fff;
      border-color:rgba(255,255,255,.12);
    }
    .mega-card.highlight span{color:rgba(255,255,255,.72)}
    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .mobile-toggle{
      display:none;
      width:44px;
      height:44px;
      border-radius:15px;
      background:rgba(15,106,85,.08);
      color:var(--color-primary-dark);
      align-items:center;
      justify-content:center;
      flex-direction:column;
      gap:5px;
    }
    .mobile-toggle span{
      width:20px;
      height:2px;
      background:currentColor;
      border-radius:999px;
      transition:transform var(--transition),opacity var(--transition);
    }
    .mobile-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .mobile-toggle.active span:nth-child(2){opacity:0}
    .mobile-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:46px;
      padding:12px 20px;
      border-radius:var(--radius-pill);
      font-weight:820;
      font-size:15px;
      white-space:nowrap;
      border:1px solid transparent;
      transition:transform var(--transition),box-shadow var(--transition),background var(--transition),border-color var(--transition),color var(--transition),opacity var(--transition);
    }
    .btn-primary{
      color:#fff;
      background:var(--gradient-brand);
      box-shadow:0 14px 32px rgba(15,106,85,.23);
    }
    .btn-primary:hover{
      transform:translateY(-3px);
      box-shadow:0 20px 42px rgba(15,106,85,.30);
      background:linear-gradient(135deg,#0a493d 0%,#1d7e61 42%,#e0ac52 100%);
    }
    .btn-secondary{
      color:var(--color-primary-dark);
      background:rgba(255,253,248,.72);
      border-color:var(--color-line-strong);
    }
    .btn-secondary:hover{
      transform:translateY(-3px);
      background:rgba(15,106,85,.08);
      box-shadow:var(--shadow-sm);
    }
    .btn:active{transform:translateY(0) scale(.98)}
    .btn[disabled],.btn.disabled{
      opacity:.55;
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
    }
    .btn-full{width:100%}

    .hero{
      padding:72px 0 82px;
      position:relative;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:42px auto auto 50%;
      width:720px;
      height:720px;
      border:1px solid rgba(15,106,85,.10);
      border-radius:50%;
      transform:translateX(-8%);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
      gap:54px;
      align-items:center;
    }
    .hero-copy{
      padding-top:16px;
    }
    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:9px 14px;
      margin-bottom:22px;
      border-radius:var(--radius-pill);
      background:rgba(255,253,248,.82);
      border:1px solid var(--color-line);
      color:var(--color-primary-dark);
      font-weight:820;
      box-shadow:var(--shadow-sm);
    }
    .hero-badge .dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--color-secondary);
      box-shadow:0 0 0 6px rgba(214,157,61,.16);
    }
    .hero-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin:32px 0 28px;
    }
    .data-row{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:14px;
      max-width:640px;
    }
    .data-pill{
      padding:16px 18px;
      border-radius:20px;
      background:rgba(255,253,248,.78);
      border:1px solid var(--color-line);
      box-shadow:var(--shadow-sm);
    }
    .data-pill strong{
      display:block;
      font-size:26px;
      line-height:1;
      color:var(--color-primary-dark);
      letter-spacing:-.03em;
    }
    .data-pill span{
      display:block;
      margin-top:8px;
      color:var(--color-muted);
      font-size:13px;
      font-weight:700;
    }
    .hero-visual{
      min-height:560px;
      position:relative;
    }
    .visual-board{
      position:absolute;
      inset:28px 0 0 36px;
      border-radius:38px;
      background:var(--gradient-dark);
      overflow:hidden;
      box-shadow:var(--shadow-lg);
      border:1px solid rgba(255,255,255,.18);
    }
    .visual-board::before{
      content:"";
      position:absolute;
      inset:-120px -90px auto auto;
      width:340px;
      height:340px;
      border-radius:50%;
      background:rgba(214,157,61,.28);
      filter:blur(10px);
    }
    .visual-board::after{
      content:"";
      position:absolute;
      inset:auto auto -120px -100px;
      width:320px;
      height:320px;
      border-radius:50%;
      background:rgba(15,106,85,.48);
      filter:blur(12px);
    }
    .arc-lines{
      position:absolute;
      inset:42px;
      border-radius:30px;
      background:
        repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 52px),
        repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 52px);
      opacity:.68;
    }
    .floating-card{
      position:absolute;
      z-index:3;
      background:rgba(255,253,248,.94);
      border:1px solid rgba(255,255,255,.65);
      box-shadow:var(--shadow-md);
      border-radius:24px;
      padding:20px;
      color:var(--color-ink);
    }
    .floating-card.main{
      left:0;
      top:82px;
      width:292px;
    }
    .floating-card.side{
      right:12px;
      bottom:58px;
      width:255px;
    }
    .floating-card.small{
      right:52px;
      top:0;
      width:154px;
      height:154px;
      display:grid;
      place-items:center;
      text-align:center;
      background:linear-gradient(145deg,#fffdf8,#f5e2b5);
    }
    .big-97{
      display:block;
      font-size:54px;
      line-height:1;
      font-weight:950;
      color:var(--color-primary-dark);
      letter-spacing:-.08em;
    }
    .floating-card small{color:var(--color-muted);font-weight:800}
    .progress-list{
      display:grid;
      gap:12px;
      margin-top:16px;
    }
    .progress-item{
      display:grid;
      grid-template-columns:56px 1fr;
      gap:12px;
      align-items:center;
      color:var(--color-muted);
      font-size:13px;
      font-weight:760;
    }
    .bar{
      height:9px;
      border-radius:999px;
      background:rgba(15,106,85,.12);
      overflow:hidden;
    }
    .bar i{
      display:block;
      height:100%;
      border-radius:inherit;
      background:var(--gradient-brand);
    }

    .tag,.badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 11px;
      border-radius:var(--radius-pill);
      font-size:12px;
      font-weight:820;
      color:var(--color-primary-dark);
      background:rgba(15,106,85,.09);
      border:1px solid rgba(15,106,85,.12);
    }
    .tag.gold,.badge.gold{
      color:#7b5515;
      background:rgba(214,157,61,.16);
      border-color:rgba(214,157,61,.26);
    }
    .tag.dark{
      color:#fff;
      background:rgba(255,255,255,.14);
      border-color:rgba(255,255,255,.2);
    }

    .card{
      border-radius:var(--radius-lg);
      background:rgba(255,253,248,.82);
      border:1px solid var(--color-line);
      box-shadow:var(--shadow-sm);
      transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition),background var(--transition);
    }
    .card:hover{
      transform:translateY(-6px);
      box-shadow:var(--shadow-md);
      border-color:rgba(15,106,85,.24);
      background:#fffdf8;
    }

    .intro-strip{
      padding:0 0 32px;
    }
    .strip-card{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:28px;
      align-items:center;
      padding:28px;
      border-radius:30px;
      background:#fffdf8;
      border:1px solid var(--color-line);
      box-shadow:var(--shadow-sm);
    }
    .strip-points{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .strip-point{
      padding:16px;
      border-radius:18px;
      background:var(--gradient-soft);
      border:1px solid rgba(15,106,85,.10);
      font-weight:820;
      color:var(--color-primary-dark);
      min-height:88px;
      display:flex;
      align-items:flex-end;
    }

    .highlight-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-template-areas:
        "a b"
        "c b"
        "c d";
      gap:20px;
    }
    .highlight-card{
      padding:30px;
      min-height:240px;
      position:relative;
      overflow:hidden;
    }
    .highlight-card:nth-child(1){grid-area:a}
    .highlight-card:nth-child(2){grid-area:b;min-height:500px;background:linear-gradient(145deg,#14382f,#1f5f4c);color:#fff}
    .highlight-card:nth-child(3){grid-area:c;min-height:360px}
    .highlight-card:nth-child(4){grid-area:d}
    .highlight-card:nth-child(2) .muted{color:rgba(255,255,255,.72)}
    .highlight-icon{
      width:52px;
      height:52px;
      border-radius:18px;
      display:grid;
      place-items:center;
      margin-bottom:22px;
      background:var(--gradient-soft);
      color:var(--color-primary-dark);
      font-size:24px;
      font-weight:900;
    }
    .highlight-card:nth-child(2) .highlight-icon{
      background:rgba(255,255,255,.14);
      color:#f5d99c;
    }
    .number-watermark{
      position:absolute;
      right:22px;
      bottom:-4px;
      font-size:96px;
      line-height:1;
      font-weight:950;
      letter-spacing:-.08em;
      color:rgba(15,106,85,.08);
    }
    .highlight-card:nth-child(2) .number-watermark{color:rgba(255,255,255,.12)}

    .news-section{
      border-radius:42px;
      margin:40px auto;
      width:min(calc(100% - 40px),1320px);
      background:linear-gradient(180deg,rgba(255,253,248,.88),rgba(243,239,228,.82));
      border:1px solid var(--color-line);
      box-shadow:var(--shadow-sm);
      overflow:hidden;
    }
    .news-inner{padding:58px}
    .news-layout{
      display:grid;
      grid-template-columns:.42fr .58fr;
      gap:34px;
      align-items:start;
    }
    .news-aside{
      position:sticky;
      top:96px;
      padding:28px;
      border-radius:28px;
      background:var(--gradient-dark);
      color:#fff;
      overflow:hidden;
    }
    .news-aside::after{
      content:"97";
      position:absolute;
      right:-8px;
      bottom:-22px;
      font-size:118px;
      font-weight:950;
      letter-spacing:-.08em;
      color:rgba(255,255,255,.08);
    }
    .news-aside p{color:rgba(255,255,255,.74)}
    .news-list{
      display:grid;
      gap:14px;
    }
    .news-item{
      display:grid;
      grid-template-columns:1fr auto;
      gap:16px;
      padding:22px;
      border-radius:24px;
      background:#fffdf8;
      border:1px solid var(--color-line);
      box-shadow:0 10px 24px rgba(28,36,32,.05);
      transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
    }
    .news-item:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-md);
      border-color:rgba(15,106,85,.22);
    }
    .news-item h3{
      margin:10px 0 8px;
      font-size:20px;
    }
    .news-item p{
      color:var(--color-muted);
      margin-bottom:0;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .news-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
    }
    .news-date{
      color:var(--color-muted);
      font-size:13px;
      font-weight:760;
    }
    .news-link{
      align-self:center;
      min-width:94px;
      color:var(--color-primary-dark);
      font-weight:850;
      display:inline-flex;
      align-items:center;
      gap:7px;
    }
    .news-link::after{content:"→";transition:transform var(--transition)}
    .news-item:hover .news-link::after{transform:translateX(4px)}
    .empty-state{
      padding:42px;
      border-radius:28px;
      background:
        radial-gradient(circle at 20% 20%,rgba(214,157,61,.16),transparent 34%),
        #fffdf8;
      border:1px dashed rgba(15,106,85,.28);
      text-align:center;
    }
    .empty-graphic{
      width:84px;
      height:84px;
      margin:0 auto 18px;
      border-radius:28px;
      background:var(--gradient-soft);
      display:grid;
      place-items:center;
      color:var(--color-primary-dark);
      font-size:32px;
      font-weight:950;
    }

    .case-grid{
      columns:3 280px;
      column-gap:20px;
    }
    .case-card{
      break-inside:avoid;
      margin:0 0 20px;
      overflow:hidden;
      border-radius:28px;
      background:#fffdf8;
      border:1px solid var(--color-line);
      box-shadow:var(--shadow-sm);
      transition:transform var(--transition),box-shadow var(--transition);
    }
    .case-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
    .case-cover{
      height:190px;
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(135deg,rgba(15,106,85,.9),rgba(214,157,61,.72)),
        repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 1px,transparent 1px 18px);
    }
    .case-card.tall .case-cover{height:270px}
    .case-card.short .case-cover{height:145px}
    .case-cover::after{
      content:"久久97";
      position:absolute;
      right:18px;
      bottom:12px;
      color:rgba(255,255,255,.42);
      font-size:38px;
      font-weight:950;
      letter-spacing:-.06em;
    }
    .case-body{padding:24px}
    .case-result{
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:center;
      margin-top:18px;
      padding-top:16px;
      border-top:1px solid var(--color-line);
    }
    .case-result strong{font-size:24px;color:var(--color-primary-dark);letter-spacing:-.04em}

    .process-wrap{
      display:grid;
      grid-template-columns:.86fr 1.14fr;
      gap:34px;
      align-items:start;
    }
    .process-panel{
      padding:34px;
      border-radius:32px;
      background:#fffdf8;
      border:1px solid var(--color-line);
      box-shadow:var(--shadow-sm);
    }
    .steps{
      display:grid;
      gap:16px;
      counter-reset:step;
    }
    .step{
      counter-increment:step;
      display:grid;
      grid-template-columns:62px 1fr;
      gap:18px;
      padding:22px;
      border-radius:24px;
      background:rgba(255,253,248,.78);
      border:1px solid var(--color-line);
      transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
    }
    .step:hover{transform:translateX(6px);box-shadow:var(--shadow-sm);border-color:rgba(15,106,85,.2)}
    .step::before{
      content:counter(step,decimal-leading-zero);
      width:62px;
      height:62px;
      display:grid;
      place-items:center;
      border-radius:20px;
      background:var(--gradient-brand);
      color:#fff;
      font-weight:950;
    }

    .plan-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
      align-items:stretch;
    }
    .plan-card{
      padding:30px;
      position:relative;
      display:flex;
      flex-direction:column;
      min-height:520px;
    }
    .plan-card.featured{
      background:var(--gradient-dark);
      color:#fff;
      transform:translateY(-10px);
    }
    .plan-card.featured:hover{transform:translateY(-16px)}
    .plan-card.featured .muted,
    .plan-card.featured li{color:rgba(255,255,255,.76)}
    .plan-price{
      margin:18px 0 22px;
      font-size:38px;
      line-height:1;
      font-weight:950;
      letter-spacing:-.05em;
      color:var(--color-primary-dark);
    }
    .plan-card.featured .plan-price{color:#f5d99c}
    .feature-list{
      list-style:none;
      padding:0;
      margin:0 0 28px;
      display:grid;
      gap:12px;
    }
    .feature-list li{
      display:flex;
      gap:10px;
      color:var(--color-ink-soft);
    }
    .feature-list li::before{
      content:"✓";
      flex:0 0 22px;
      width:22px;
      height:22px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:rgba(15,106,85,.10);
      color:var(--color-primary);
      font-weight:900;
      font-size:13px;
      margin-top:2px;
    }
    .plan-card.featured .feature-list li::before{
      background:rgba(255,255,255,.14);
      color:#f5d99c;
    }
    .plan-card .btn{margin-top:auto}

    .faq-layout{
      display:grid;
      grid-template-columns:.36fr .64fr;
      gap:34px;
      align-items:start;
    }
    .faq-list{
      display:grid;
      gap:14px;
    }
    .faq-item{
      border-radius:22px;
      background:#fffdf8;
      border:1px solid var(--color-line);
      box-shadow:0 8px 22px rgba(28,36,32,.05);
      overflow:hidden;
    }
    .faq-question{
      width:100%;
      padding:22px 24px;
      background:transparent;
      color:var(--color-ink);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      text-align:left;
      font-weight:850;
    }
    .faq-question:hover{background:rgba(15,106,85,.05)}
    .faq-icon{
      flex:0 0 28px;
      width:28px;
      height:28px;
      border-radius:50%;
      background:rgba(15,106,85,.09);
      position:relative;
      transition:transform var(--transition),background var(--transition);
    }
    .faq-icon::before,.faq-icon::after{
      content:"";
      position:absolute;
      background:var(--color-primary-dark);
      border-radius:999px;
      left:8px;
      right:8px;
      top:13px;
      height:2px;
    }
    .faq-icon::after{
      top:8px;
      bottom:8px;
      left:13px;
      right:auto;
      width:2px;
      height:auto;
    }
    .faq-item.active .faq-icon{
      transform:rotate(180deg);
      background:rgba(214,157,61,.18);
    }
    .faq-item.active .faq-icon::after{opacity:0}
    .faq-answer{
      max-height:0;
      overflow:hidden;
      transition:max-height 260ms ease;
    }
    .faq-answer div{
      padding:0 24px 22px;
      color:var(--color-muted);
    }

    .contact-section{
      padding-bottom:110px;
    }
    .contact-card{
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      gap:24px;
      padding:26px;
      border-radius:38px;
      background:linear-gradient(135deg,#fffdf8,rgba(243,239,228,.82));
      border:1px solid var(--color-line);
      box-shadow:var(--shadow-md);
    }
    .contact-info{
      padding:34px;
      border-radius:30px;
      background:var(--gradient-dark);
      color:#fff;
      position:relative;
      overflow:hidden;
    }
    .contact-info::after{
      content:"长期·稳定·97";
      position:absolute;
      left:34px;
      bottom:22px;
      color:rgba(255,255,255,.08);
      font-size:44px;
      font-weight:950;
      letter-spacing:-.06em;
    }
    .contact-info p{color:rgba(255,255,255,.76)}
    .contact-methods{
      display:grid;
      gap:14px;
      margin-top:28px;
      position:relative;
      z-index:1;
    }
    .contact-method{
      padding:16px;
      border-radius:18px;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.13);
    }
    .contact-method strong{display:block;color:#f5d99c;margin-bottom:3px}
    .contact-method span{color:rgba(255,255,255,.74);font-size:14px}
    .form-card{
      padding:34px;
      border-radius:30px;
      background:#fffdf8;
      border:1px solid var(--color-line);
    }
    .form-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }
    .form-field{display:grid;gap:8px;margin-bottom:16px}
    .form-field.full{grid-column:1/-1}
    .form-field label{
      font-weight:820;
      color:var(--color-ink-soft);
      font-size:14px;
    }
    .form-control{
      min-height:50px;
      padding:13px 15px;
      border-radius:16px;
      border:1px solid rgba(37,58,49,.16);
      background:rgba(250,247,239,.62);
      color:var(--color-ink);
      transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);
    }
    textarea.form-control{min-height:132px;resize:vertical}
    .form-control:hover{border-color:rgba(15,106,85,.28);background:#fffdf8}
    .form-control:focus{
      outline:0;
      border-color:var(--color-primary);
      box-shadow:0 0 0 4px rgba(15,106,85,.12);
      background:#fffdf8;
    }
    .form-control.invalid{
      border-color:var(--color-danger);
      box-shadow:0 0 0 4px rgba(189,75,62,.10);
    }
    .form-hint{
      color:var(--color-muted);
      font-size:13px;
      margin-top:10px;
    }

    .site-footer{
      background:#16251f;
      color:#fff;
      padding:64px 0 24px;
      position:relative;
      overflow:hidden;
    }
    .site-footer::before{
      content:"";
      position:absolute;
      inset:-120px -120px auto auto;
      width:360px;
      height:360px;
      border-radius:50%;
      background:rgba(214,157,61,.14);
      filter:blur(8px);
    }
    .footer-grid{
      position:relative;
      display:grid;
      grid-template-columns:1.3fr .7fr .8fr .9fr;
      gap:34px;
      padding-bottom:38px;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .footer-brand .brand-mark{box-shadow:none}
    .footer-brand .brand-name{color:#fff}
    .footer-brand .brand-sub{color:rgba(255,255,255,.62)}
    .footer-text{
      color:rgba(255,255,255,.68);
      margin:18px 0 0;
      max-width:360px;
    }
    .footer-col h3{
      font-size:16px;
      color:#f5d99c;
      margin-bottom:16px;
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:10px;
    }
    .footer-links a,.footer-col p{
      color:rgba(255,255,255,.68);
      font-size:14px;
      margin:0;
    }
    .footer-links a:hover{color:#f5d99c}
    .footer-bottom{
      position:relative;
      display:flex;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
      padding-top:24px;
      color:rgba(255,255,255,.56);
      font-size:13px;
    }

    .to-top{
      position:fixed;
      right:22px;
      bottom:22px;
      width:48px;
      height:48px;
      display:grid;
      place-items:center;
      border-radius:16px;
      background:var(--gradient-brand);
      color:#fff;
      box-shadow:var(--shadow-md);
      opacity:0;
      visibility:hidden;
      transform:translateY(10px);
      z-index:60;
    }
    .to-top.show{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }
    .to-top:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

    @media (max-width:1100px){
      .hero-grid{grid-template-columns:1fr;gap:30px}
      .hero-visual{min-height:470px}
      .visual-board{inset:28px 0 0 0}
      .strip-card,.news-layout,.process-wrap,.faq-layout,.contact-card{grid-template-columns:1fr}
      .news-aside{position:relative;top:auto}
      .plan-grid{grid-template-columns:1fr 1fr}
      .plan-card.featured{transform:none}
      .plan-card.featured:hover{transform:translateY(-6px)}
      .footer-grid{grid-template-columns:1fr 1fr}
    }

    @media (max-width:860px){
      :root{--header-h:68px}
      .container{width:min(calc(100% - 28px),var(--container))}
      .section{padding:68px 0}
      .section-head{display:block}
      .section-head .lead{margin-top:12px}
      .mobile-toggle{display:flex}
      .nav-actions .btn{display:none}
      .main-nav{
        position:fixed;
        left:14px;
        right:14px;
        top:78px;
        display:grid;
        gap:10px;
        padding:16px;
        border-radius:24px;
        background:rgba(255,253,248,.98);
        border:1px solid var(--color-line);
        box-shadow:var(--shadow-lg);
        transform:translateY(-12px);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity var(--transition),transform var(--transition),visibility var(--transition);
      }
      body.menu-open .main-nav{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);
      }
      .nav-link,.mega-toggle{width:100%;justify-content:space-between;border-radius:16px}
      .mega-panel{
        position:static;
        width:100%;
        transform:none;
        box-shadow:none;
        margin-top:8px;
        display:none;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        padding:12px;
      }
      .nav-item:hover .mega-panel{display:none;transform:none}
      .nav-item.is-open .mega-panel{display:block;transform:none}
      .mega-grid{grid-template-columns:1fr}
      .hero{padding:46px 0 60px}
      .data-row,.strip-points,.highlight-grid,.plan-grid,.form-grid{grid-template-columns:1fr}
      .highlight-grid{grid-template-areas:none}
      .highlight-card:nth-child(n){grid-area:auto;min-height:auto}
      .case-grid{columns:2 260px}
      .news-inner{padding:34px 22px}
      .news-item{grid-template-columns:1fr}
      .news-link{justify-self:start}
      .footer-grid{grid-template-columns:1fr}
    }

    @media (max-width:560px){
      .container{width:min(calc(100% - 22px),var(--container))}
      h1{font-size:38px}
      h2{font-size:28px}
      .brand-mark{width:38px;height:38px;border-radius:13px}
      .brand-name{font-size:18px}
      .brand-sub{display:none}
      .hero-actions .btn{width:100%}
      .hero-visual{min-height:390px}
      .floating-card.main{width:245px;top:64px}
      .floating-card.side{width:220px;right:0;bottom:34px}
      .floating-card.small{width:118px;height:118px;right:18px}
      .big-97{font-size:42px}
      .case-grid{columns:1}
      .strip-card,.process-panel,.contact-info,.form-card{padding:24px}
      .contact-card{padding:14px;border-radius:28px}
      .footer-bottom{display:grid}
      .to-top{right:14px;bottom:14px}
    }

/* roulang page: article */
:root{
      --bg:#f6f2eb;
      --bg-soft:#fbf8f3;
      --surface:#fffdf9;
      --surface-2:#f3eee6;
      --line:#e1d6c7;
      --line-strong:#cdbfae;
      --text:#1f1b17;
      --muted:#6d665f;
      --muted-2:#8a8277;
      --brand:#1f5e4b;
      --brand-2:#2b7a62;
      --accent:#c9973e;
      --accent-2:#e0b867;
      --shadow:0 18px 50px rgba(56, 41, 20, .08);
      --shadow-strong:0 24px 60px rgba(34, 44, 36, .14);
      --radius-xl:28px;
      --radius-lg:24px;
      --radius-md:18px;
      --radius-sm:14px;
      --container:1240px;
      --ease:cubic-bezier(.2,.8,.2,1);
      --header-h:78px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 12%, rgba(31,94,75,.08), transparent 24%),
        radial-gradient(circle at 88% 10%, rgba(201,151,62,.10), transparent 24%),
        radial-gradient(circle at 80% 80%, rgba(31,94,75,.05), transparent 20%),
        linear-gradient(180deg, #f9f6f0 0%, #f6f2eb 42%, #f3eee7 100%);
      min-height:100vh;
      line-height:1.7;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    body::before,
    body::after{
      content:"";
      position:fixed;
      inset:auto;
      pointer-events:none;
      z-index:-1;
      opacity:.55;
    }
    body::before{
      width:480px;height:480px;left:-160px;top:220px;
      background:radial-gradient(circle, rgba(31,94,75,.10) 0%, rgba(31,94,75,0) 68%);
      filter:blur(6px);
    }
    body::after{
      width:540px;height:540px;right:-180px;bottom:-180px;
      background:radial-gradient(circle, rgba(201,151,62,.10) 0%, rgba(201,151,62,0) 68%);
      filter:blur(8px);
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    :focus-visible{
      outline:3px solid rgba(31,94,75,.22);
      outline-offset:2px;
    }
    ::selection{background:rgba(31,94,75,.16);color:var(--text)}
    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      backdrop-filter:saturate(150%) blur(12px);
      background:rgba(251,248,243,.78);
      border-bottom:1px solid rgba(225,214,199,.74);
      box-shadow:0 10px 30px rgba(74,58,30,.04);
    }
    .header-inner{
      min-height:var(--header-h);
      display:flex;
      align-items:center;
      gap:22px;
      padding:14px 0;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:14px;
      min-width:0;
      flex:0 0 auto;
    }
    .brand-mark{
      width:46px;height:46px;
      border-radius:16px;
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:800;
      letter-spacing:.06em;
      background:linear-gradient(135deg,var(--brand) 0%, #276854 52%, var(--accent) 100%);
      box-shadow:0 12px 30px rgba(31,94,75,.22);
      position:relative;
      overflow:hidden;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:-40%;
      background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.25) 50%, transparent 65%);
      transform:translateX(-40%) rotate(12deg);
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      min-width:0;
      gap:2px;
    }
    .brand-name{
      font-size:1.05rem;
      font-weight:800;
      letter-spacing:.02em;
      white-space:nowrap;
    }
    .brand-sub{
      font-size:.84rem;
      color:var(--muted);
      white-space:nowrap;
    }
    .main-nav{
      margin-left:auto;
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .nav-link,
    .mega-toggle{
      position:relative;
      border:1px solid transparent;
      background:transparent;
      color:var(--text);
      font-size:.96rem;
      font-weight:650;
      padding:12px 16px;
      border-radius:999px;
      transition:transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
    }
    .nav-link:hover,
    .mega-toggle:hover,
    .nav-link:focus-visible,
    .mega-toggle:focus-visible{
      background:rgba(31,94,75,.08);
      border-color:rgba(31,94,75,.12);
      color:var(--brand);
      box-shadow:0 10px 24px rgba(31,94,75,.08);
      transform:translateY(-1px);
    }
    .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg,var(--brand), #2b6f59 58%, var(--accent) 128%);
      box-shadow:0 12px 26px rgba(31,94,75,.18);
    }
    .nav-item{
      position:relative;
    }
    .mega-toggle{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--text);
      border-color:rgba(225,214,199,.9);
      background:rgba(255,255,255,.48);
    }
    .mega-toggle .chev{
      width:9px;height:9px;
      border-right:2px solid currentColor;
      border-bottom:2px solid currentColor;
      transform:rotate(45deg) translateY(-2px);
      transition:transform .22s var(--ease);
      opacity:.75;
    }
    .nav-item:hover .mega-toggle .chev,
    .nav-item.is-open .mega-toggle .chev{
      transform:rotate(225deg) translateY(2px);
    }
    .mega-panel{
      position:absolute;
      top:calc(100% + 14px);
      right:0;
      width:min(740px, calc(100vw - 24px));
      opacity:0;
      visibility:hidden;
      transform:translateY(10px);
      transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
      pointer-events:none;
    }
    .nav-item:hover .mega-panel,
    .nav-item:focus-within .mega-panel,
    .nav-item.is-open .mega-panel{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
      pointer-events:auto;
    }
    .mega-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:14px;
      padding:16px;
      border-radius:24px;
      background:rgba(255,253,249,.96);
      border:1px solid rgba(225,214,199,.92);
      box-shadow:var(--shadow-strong);
    }
    .mega-card{
      display:flex;
      flex-direction:column;
      gap:8px;
      min-height:122px;
      padding:18px;
      border-radius:20px;
      border:1px solid rgba(225,214,199,.88);
      background:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,241,232,.95));
      transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
    }
    .mega-card strong{
      font-size:1rem;
      letter-spacing:.01em;
    }
    .mega-card span{
      color:var(--muted);
      font-size:.92rem;
      line-height:1.55;
    }
    .mega-card:hover{
      transform:translateY(-4px);
      box-shadow:0 16px 30px rgba(31,94,75,.08);
      border-color:rgba(31,94,75,.18);
    }
    .mega-card.highlight{
      background:linear-gradient(135deg, rgba(31,94,75,.12), rgba(201,151,62,.16));
      border-color:rgba(31,94,75,.18);
    }
    .reading-progress{
      position:fixed;
      inset:0 0 auto 0;
      height:3px;
      z-index:1200;
      background:rgba(255,255,255,.25);
      pointer-events:none;
    }
    .reading-progress span{
      display:block;
      height:100%;
      width:0%;
      background:linear-gradient(90deg,var(--brand), var(--accent));
      box-shadow:0 0 12px rgba(31,94,75,.35);
      transition:width .08s linear;
    }
    main{
      padding:34px 0 84px;
    }
    .article-intro{
      padding:30px 0 20px;
    }
    .intro-shell{
      background:
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(248,242,233,.92)),
        radial-gradient(circle at right top, rgba(201,151,62,.10), transparent 36%),
        radial-gradient(circle at left bottom, rgba(31,94,75,.08), transparent 32%);
      border:1px solid rgba(225,214,199,.9);
      border-radius:32px;
      box-shadow:var(--shadow);
      padding:28px;
      overflow:hidden;
      position:relative;
    }
    .intro-shell::after{
      content:"";
      position:absolute;
      inset:auto -100px -100px auto;
      width:280px;height:280px;
      background:radial-gradient(circle, rgba(31,94,75,.11), transparent 70%);
      pointer-events:none;
    }
    .meta-strip{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:16px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(31,94,75,.08);
      color:var(--brand);
      border:1px solid rgba(31,94,75,.10);
      font-size:.88rem;
      font-weight:650;
      letter-spacing:.01em;
    }
    .chip.accent{
      background:rgba(201,151,62,.10);
      color:#91610f;
      border-color:rgba(201,151,62,.18);
    }
    .crumbs{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px;
      color:var(--muted);
      font-size:.93rem;
      margin-bottom:18px;
    }
    .crumbs a{
      color:var(--brand);
      border-bottom:1px solid transparent;
    }
    .crumbs a:hover{
      border-bottom-color:rgba(31,94,75,.35);
    }
    .crumbs .sep{
      opacity:.45;
    }
    .article-head{
      display:grid;
      grid-template-columns:minmax(0,1fr) 300px;
      gap:24px;
      align-items:end;
    }
    .article-title{
      margin:0;
      font-size:clamp(2rem, 4vw, 3.2rem);
      line-height:1.16;
      letter-spacing:-.02em;
    }
    .article-summary{
      margin:16px 0 0;
      max-width:68ch;
      font-size:1.06rem;
      line-height:1.9;
      color:var(--muted);
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:8px 12px;
      background:rgba(255,255,255,.76);
      border:1px solid rgba(225,214,199,.88);
      color:var(--text);
      font-size:.9rem;
      box-shadow:0 8px 18px rgba(56,41,20,.04);
    }
    .tag.dot::before{
      content:"";
      width:8px;height:8px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--brand),var(--accent));
      flex:0 0 auto;
    }
    .meta-card{
      border-radius:24px;
      padding:18px;
      background:linear-gradient(180deg, rgba(31,94,75,.10), rgba(255,255,255,.68));
      border:1px solid rgba(31,94,75,.12);
      box-shadow:0 16px 28px rgba(31,94,75,.08);
    }
    .meta-card h3{
      margin:0 0 12px;
      font-size:.98rem;
      color:var(--brand);
    }
    .meta-list{
      display:grid;
      gap:10px;
    }
    .meta-list .row{
      display:flex;
      justify-content:space-between;
      gap:12px;
      padding-bottom:10px;
      border-bottom:1px dashed rgba(225,214,199,.9);
      color:var(--muted);
      font-size:.92rem;
    }
    .meta-list .row strong{
      color:var(--text);
      font-weight:650;
      text-align:right;
    }
    .article-highlights{
      padding:8px 0 20px;
    }
    .highlight-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr 1fr;
      gap:16px;
    }
    .mini-card{
      border-radius:24px;
      padding:22px;
      border:1px solid rgba(225,214,199,.9);
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,242,233,.95));
      box-shadow:var(--shadow);
      min-height:160px;
      transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
    }
    .mini-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-strong);
      border-color:rgba(31,94,75,.14);
    }
    .mini-card .mini-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px;
    }
    .icon-badge{
      width:42px;height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg,var(--brand),var(--accent));
      box-shadow:0 10px 22px rgba(31,94,75,.18);
      flex:0 0 auto;
      font-size:1.04rem;
    }
    .mini-card h3{
      margin:0;
      font-size:1.04rem;
    }
    .mini-card p{
      margin:12px 0 0;
      color:var(--muted);
      line-height:1.8;
      font-size:.96rem;
    }
    .mini-stat{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      font-size:.84rem;
      color:var(--brand);
      background:rgba(31,94,75,.08);
      border:1px solid rgba(31,94,75,.10);
      white-space:nowrap;
    }
    .article-shell{
      padding:14px 0 28px;
    }
    .article-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) 320px;
      gap:20px;
      align-items:start;
    }
    .content-panel,
    .sidebar-card,
    .section-card,
    .empty-shell{
      border:1px solid rgba(225,214,199,.92);
      background:rgba(255,253,249,.94);
      border-radius:28px;
      box-shadow:var(--shadow);
    }
    .content-panel{
      padding:30px;
      min-height:320px;
    }
    .content-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      margin-bottom:20px;
      padding-bottom:18px;
      border-bottom:1px solid rgba(225,214,199,.9);
    }
    .content-head h2{
      margin:0;
      font-size:1.15rem;
    }
    .content-head .small{
      color:var(--muted);
      font-size:.92rem;
    }
    .content-body{
      font-size:1.02rem;
      line-height:1.95;
      color:var(--text);
      word-break:break-word;
      overflow-wrap:anywhere;
    }
    .content-body > *:first-child{margin-top:0}
    .content-body h2,
    .content-body h3,
    .content-body h4{
      line-height:1.3;
      margin:1.9em 0 .8em;
      letter-spacing:-.01em;
    }
    .content-body h2{font-size:1.5rem}
    .content-body h3{font-size:1.22rem}
    .content-body h4{font-size:1.08rem}
    .content-body p{
      margin:0 0 1.1em;
      color:var(--text);
    }
    .content-body ul,
    .content-body ol{
      padding-left:1.35em;
      margin:0 0 1.1em;
    }
    .content-body li{
      margin:0 0 .55em;
      padding-left:.2em;
    }
    .content-body blockquote{
      margin:1.4em 0;
      padding:18px 20px;
      border-left:4px solid var(--brand);
      background:linear-gradient(180deg, rgba(31,94,75,.07), rgba(255,255,255,.8));
      border-radius:18px;
      color:#3a403b;
    }
    .content-body hr{
      border:0;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(201,151,62,.5), transparent);
      margin:1.8em 0;
    }
    .content-body a{
      color:var(--brand);
      text-decoration:none;
      border-bottom:1px solid rgba(31,94,75,.25);
      transition:color .2s var(--ease), border-color .2s var(--ease);
    }
    .content-body a:hover{
      color:#194a3b;
      border-bottom-color:rgba(31,94,75,.45);
    }
    .content-body img{
      border-radius:20px;
      margin:1.4em 0;
      box-shadow:0 16px 34px rgba(56,41,20,.08);
    }
    .content-body table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      margin:1.4em 0;
      overflow:hidden;
      border-radius:18px;
      border:1px solid rgba(225,214,199,.92);
      background:#fff;
    }
    .content-body th,
    .content-body td{
      padding:12px 14px;
      border-bottom:1px solid rgba(225,214,199,.78);
      text-align:left;
      vertical-align:top;
    }
    .content-body th{
      background:#f7f2ea;
      color:var(--text);
    }
    .content-body code{
      padding:.16em .45em;
      border-radius:8px;
      background:rgba(31,94,75,.08);
      color:#17493a;
      font-size:.94em;
    }
    .content-body pre{
      margin:1.4em 0;
      padding:18px 20px;
      overflow:auto;
      border-radius:20px;
      background:#0f1513;
      color:#eef4f0;
      box-shadow:0 18px 34px rgba(10,12,11,.16);
    }
    .article-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:26px;
      padding-top:22px;
      border-top:1px solid rgba(225,214,199,.9);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:700;
      transition:transform .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease), border-color .24s var(--ease), color .24s var(--ease), opacity .24s var(--ease);
      white-space:nowrap;
    }
    .btn:hover,
    .btn:focus-visible{
      transform:translateY(-2px);
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg,var(--brand) 0%, #2e765f 52%, var(--accent) 132%);
      box-shadow:0 16px 26px rgba(31,94,75,.18);
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      box-shadow:0 20px 34px rgba(31,94,75,.22);
    }
    .btn-ghost{
      color:var(--brand);
      background:rgba(31,94,75,.08);
      border-color:rgba(31,94,75,.10);
    }
    .btn-ghost:hover,
    .btn-ghost:focus-visible{
      background:rgba(31,94,75,.11);
    }
    .btn-line{
      color:var(--text);
      border-color:rgba(225,214,199,.92);
      background:rgba(255,255,255,.64);
    }
    .btn-line:hover,
    .btn-line:focus-visible{
      border-color:rgba(31,94,75,.16);
      color:var(--brand);
      box-shadow:0 12px 22px rgba(56,41,20,.05);
    }
    .sidebar{
      display:grid;
      gap:16px;
      position:sticky;
      top:108px;
    }
    .sidebar-card{
      padding:20px;
    }
    .sidebar-card h3{
      margin:0 0 14px;
      font-size:1rem;
    }
    .info-list{
      display:grid;
      gap:12px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .info-list li{
      display:flex;
      justify-content:space-between;
      gap:12px;
      padding-bottom:12px;
      border-bottom:1px dashed rgba(225,214,199,.9);
      font-size:.93rem;
      color:var(--muted);
    }
    .info-list strong{
      color:var(--text);
      font-weight:650;
      text-align:right;
    }
    .quick-links{
      display:grid;
      gap:10px;
    }
    .quick-links a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(225,214,199,.92);
      background:rgba(255,255,255,.7);
      color:var(--text);
      transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), color .22s var(--ease);
    }
    .quick-links a:hover{
      transform:translateY(-2px);
      border-color:rgba(31,94,75,.16);
      box-shadow:0 12px 20px rgba(31,94,75,.06);
      color:var(--brand);
    }
    .arrow{
      width:8px;height:8px;
      border-top:2px solid currentColor;
      border-right:2px solid currentColor;
      transform:rotate(45deg);
      opacity:.7;
      flex:0 0 auto;
    }
    .sidebar-note{
      color:var(--muted);
      line-height:1.8;
      font-size:.95rem;
    }
    .sidebar-accent{
      background:linear-gradient(135deg, rgba(31,94,75,.12), rgba(201,151,62,.14));
    }
    .extend-section,
    .faq-section,
    .cta-section{
      padding:10px 0 26px;
    }
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:16px;
    }
    .section-head h2{
      margin:0;
      font-size:1.5rem;
      letter-spacing:-.01em;
    }
    .section-head p{
      margin:0;
      color:var(--muted);
      font-size:.96rem;
      max-width:64ch;
      line-height:1.8;
    }
    .three-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:16px;
    }
    .feature-card{
      padding:22px;
      border-radius:26px;
      border:1px solid rgba(225,214,199,.9);
      background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,242,233,.96));
      box-shadow:var(--shadow);
      transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
    }
    .feature-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-strong);
      border-color:rgba(31,94,75,.14);
    }
    .feature-card .num{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:56px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(31,94,75,.08);
      color:var(--brand);
      font-weight:800;
      margin-bottom:14px;
    }
    .feature-card h3{
      margin:0 0 10px;
      font-size:1.05rem;
    }
    .feature-card p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
      font-size:.96rem;
    }
    .faq-list{
      display:grid;
      gap:12px;
    }
    .faq-item{
      border:1px solid rgba(225,214,199,.92);
      border-radius:22px;
      background:rgba(255,253,249,.95);
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:18px 20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      font-weight:700;
      color:var(--text);
      transition:background .2s var(--ease), color .2s var(--ease);
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:hover{
      background:rgba(31,94,75,.05);
      color:var(--brand);
    }
    .faq-item summary .mark{
      width:28px;height:28px;
      border-radius:50%;
      border:1px solid rgba(225,214,199,.88);
      display:grid;
      place-items:center;
      flex:0 0 auto;
      background:#fff;
      color:var(--brand);
      font-size:1rem;
      line-height:1;
      transition:transform .22s var(--ease), background .22s var(--ease);
    }
    .faq-item[open] summary .mark{
      transform:rotate(45deg);
      background:rgba(31,94,75,.08);
    }
    .faq-body{
      padding:0 20px 18px;
      color:var(--muted);
      line-height:1.85;
    }
    .cta-shell{
      padding:24px 0 10px;
    }
    .cta-panel{
      border-radius:32px;
      background:
        linear-gradient(135deg, rgba(31,94,75,.96), rgba(39,107,87,.92) 50%, rgba(201,151,62,.88) 122%);
      color:#fff;
      padding:28px;
      overflow:hidden;
      position:relative;
      box-shadow:0 26px 60px rgba(31,94,75,.20);
    }
    .cta-panel::before,
    .cta-panel::after{
      content:"";
      position:absolute;
      border-radius:50%;
      background:rgba(255,255,255,.09);
      pointer-events:none;
    }
    .cta-panel::before{
      width:240px;height:240px;
      right:-90px;top:-100px;
    }
    .cta-panel::after{
      width:180px;height:180px;
      left:-70px;bottom:-80px;
    }
    .cta-grid{
      display:grid;
      grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
      gap:18px;
      align-items:center;
      position:relative;
      z-index:1;
    }
    .cta-panel h2{
      margin:0 0 10px;
      font-size:1.75rem;
      line-height:1.25;
    }
    .cta-panel p{
      margin:0;
      color:rgba(255,255,255,.88);
      line-height:1.85;
      max-width:64ch;
    }
    .cta-list{
      display:grid;
      gap:10px;
      margin-top:18px;
      padding:0;
      list-style:none;
    }
    .cta-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:rgba(255,255,255,.92);
      font-size:.96rem;
    }
    .cta-list li::before{
      content:"";
      width:9px;height:9px;
      border-radius:50%;
      background:#fff;
      margin-top:.52em;
      flex:0 0 auto;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:flex-end;
    }
    .cta-actions .btn{
      min-width:140px;
      border-color:rgba(255,255,255,.16);
    }
    .cta-actions .btn-primary{
      background:linear-gradient(135deg,#ffffff 0%, #f3ead7 52%, #e3b96f 132%);
      color:#1c2c26;
      box-shadow:none;
    }
    .cta-actions .btn-line{
      background:rgba(255,255,255,.08);
      color:#fff;
      border-color:rgba(255,255,255,.28);
    }
    .empty-shell{
      padding:40px 26px;
      text-align:center;
      margin-top:10px;
    }
    .empty-icon{
      width:72px;height:72px;
      border-radius:24px;
      margin:0 auto 16px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(31,94,75,.12), rgba(201,151,62,.14));
      color:var(--brand);
      font-size:1.6rem;
      box-shadow:0 14px 30px rgba(31,94,75,.08);
    }
    .empty-shell h2{
      margin:0 0 10px;
      font-size:1.35rem;
    }
    .empty-shell p{
      margin:0 auto 22px;
      max-width:54ch;
      color:var(--muted);
      line-height:1.85;
    }
    .site-footer{
      background:linear-gradient(180deg, #211f1b 0%, #191713 100%);
      color:#f2ede4;
      padding:44px 0 20px;
      position:relative;
      overflow:hidden;
    }
    .site-footer::before{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at 12% 0%, rgba(31,94,75,.24), transparent 28%), radial-gradient(circle at 90% 0%, rgba(201,151,62,.20), transparent 22%);
      pointer-events:none;
      opacity:.8;
    }
    .site-footer .container{
      position:relative;
      z-index:1;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.35fr .8fr .8fr .95fr;
      gap:24px;
      align-items:start;
    }
    .site-footer .brand-name,
    .site-footer .brand-sub{
      color:#fff;
    }
    .site-footer .brand-sub{opacity:.78}
    .footer-text{
      margin:16px 0 0;
      color:rgba(242,237,228,.78);
      line-height:1.85;
    }
    .footer-col h3{
      margin:0 0 14px;
      font-size:1.02rem;
      color:#fff;
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:10px;
    }
    .footer-links a,
    .footer-col p{
      color:rgba(242,237,228,.78);
      line-height:1.7;
      transition:color .2s var(--ease), opacity .2s var(--ease);
    }
    .footer-links a:hover{
      color:#fff;
    }
    .footer-bottom{
      margin-top:30px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.10);
      display:flex;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
      color:rgba(242,237,228,.68);
      font-size:.92rem;
    }
    .back-top{
      position:fixed;
      right:18px;
      bottom:18px;
      width:48px;
      height:48px;
      border-radius:50%;
      border:1px solid rgba(225,214,199,.95);
      background:rgba(255,253,249,.92);
      color:var(--brand);
      display:grid;
      place-items:center;
      box-shadow:var(--shadow);
      opacity:0;
      pointer-events:none;
      transform:translateY(10px);
      transition:opacity .22s var(--ease), transform .22s var(--ease), background .22s var(--ease);
      z-index:900;
    }
    .back-top.show{
      opacity:1;
      pointer-events:auto;
      transform:translateY(0);
    }
    .back-top:hover{
      background:#fff;
      transform:translateY(-2px);
    }
    .back-top .arrow-up{
      width:12px;height:12px;
      border-left:2px solid currentColor;
      border-top:2px solid currentColor;
      transform:rotate(45deg) translateY(2px);
    }
    @media (max-width: 1279px){
      .article-head,
      .cta-grid{
        grid-template-columns:1fr;
      }
      .article-layout{
        grid-template-columns:1fr 290px;
      }
      .highlight-grid,
      .three-grid,
      .footer-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .footer-grid{
        row-gap:18px;
      }
      .footer-brand{
        grid-column:1 / -1;
      }
    }
    @media (max-width: 1023px){
      .article-layout{
        grid-template-columns:1fr;
      }
      .sidebar{
        position:static;
      }
      .mega-panel{
        width:min(680px, calc(100vw - 24px));
      }
      .highlight-grid,
      .three-grid{
        grid-template-columns:1fr;
      }
      .cta-actions{
        justify-content:flex-start;
      }
    }
    @media (max-width: 767px){
      :root{--header-h:72px}
      .header-inner{
        gap:12px;
        align-items:flex-start;
        flex-direction:column;
      }
      .main-nav{
        width:100%;
        justify-content:flex-start;
        gap:8px;
      }
      .nav-link,
      .mega-toggle{
        padding:10px 14px;
        font-size:.92rem;
      }
      .mega-panel{
        position:static;
        width:100%;
        display:none;
        opacity:1;
        visibility:visible;
        transform:none;
        pointer-events:auto;
        margin-top:10px;
      }
      .nav-item.is-open .mega-panel{
        display:block;
      }
      .mega-grid{
        grid-template-columns:1fr;
      }
      main{
        padding-top:24px;
        padding-bottom:70px;
      }
      .intro-shell,
      .content-panel,
      .sidebar-card,
      .mini-card,
      .feature-card,
      .cta-panel,
      .empty-shell{
        border-radius:22px;
        padding:20px;
      }
      .article-title{
        font-size:clamp(1.65rem, 8vw, 2.2rem);
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .footer-grid,
      .footer-bottom{
        grid-template-columns:1fr;
      }
      .footer-bottom{
        flex-direction:column;
      }
    }
    @media (max-width: 520px){
      .container{
        width:min(var(--container), calc(100% - 20px));
      }
      .brand-mark{
        width:42px;height:42px;border-radius:14px;
      }
      .brand-sub{
        font-size:.8rem;
      }
      .intro-shell{
        padding:18px;
      }
      .meta-strip,
      .tag-row,
      .article-actions,
      .cta-actions{
        gap:10px;
      }
      .btn{
        width:100%;
      }
      .article-summary{
        font-size:1rem;
      }
      .content-panel{
        padding:18px;
      }
      .content-body{
        font-size:1rem;
        line-height:1.9;
      }
      .footer-text,
      .footer-links a,
      .footer-col p,
      .sidebar-note{
        font-size:.94rem;
      }
    }