/* roulang page: index */
:root{
  --pine:#1E3B32;
  --moss:#3F6B58;
  --paper:#F5F2EA;
  --paper-2:#EBE6DA;
  --paper-3:#FBF8F2;
  --ink:#111512;
  --muted:#5E665F;
  --lime:#C9E265;
  --line:rgba(17,21,18,.12);
  --line-strong:rgba(17,21,18,.24);
  --radius:6px;
  --radius-img:10px;
  --shadow:0 24px 60px -40px rgba(17,21,18,.35);
  --shell:1240px;
  --gutter:24px;
  --section:112px;
  --nav-h:72px;
  --font-body:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  --font-title:"Songti SC","Noto Serif SC","Source Han Serif SC",serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
::selection{background:var(--lime);color:var(--ink);}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}
.shell{width:min(calc(100% - var(--gutter) * 2), var(--shell));margin-inline:auto;}
.section{padding:var(--section) 0;}
.section-alt{background:var(--paper-2);}
.serif{font-family:var(--font-title);letter-spacing:-.02em;}
.mono-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.eyebrow{
  display:flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.18em;color:var(--muted);
  text-transform:none;
}
.eyebrow .dot{width:6px;height:6px;border-radius:999px;background:var(--lime);box-shadow:0 0 0 1px rgba(17,21,18,.12);flex:none;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
  margin-bottom:40px;
}
.section-head .head-main{display:flex;flex-direction:column;gap:8px;}
.section-num{font-size:12px;letter-spacing:.18em;color:var(--muted);font-variant-numeric:tabular-nums;}
.section-head h2{
  font-family:var(--font-title);
  font-size:clamp(28px,4vw,40px);
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:600;
}
.section-head .head-note{max-width:320px;color:var(--muted);font-size:14px;line-height:1.75;}

/* Header */
.site-header{
  position:sticky;top:0;z-index:60;
  height:var(--nav-h);
  background:rgba(245,242,234,.82);
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.site-header.scrolled{background:var(--paper);border-bottom-color:var(--line);}
.nav-inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none;font-weight:700;letter-spacing:.01em;}
.brand-mark{width:22px;height:22px;position:relative;display:inline-block;flex:none;}
.brand-mark i{position:absolute;display:block;background:var(--pine);border-radius:2px;}
.brand-mark i:first-child{width:22px;height:7px;left:0;top:2px;}
.brand-mark i:last-child{width:7px;height:11px;left:15px;bottom:2px;background:var(--lime);}
.brand-text{font-size:16px;line-height:1;white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:34px;height:100%;}
.nav-link{
  position:relative;height:100%;display:inline-flex;align-items:center;
  font-size:14px;color:var(--muted);transition:color .2s ease;white-space:nowrap;
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:16px;height:2px;width:0;
  background:var(--ink);transition:width .2s ease;
}
.nav-link:hover{color:var(--ink);}
.nav-link:hover::after{width:100%;}
.nav-link.active{color:var(--ink);font-weight:600;}
.nav-link.active::after{width:100%;}
.nav-cta{flex:none;}
.mobile-top-cta{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:999px;background:var(--paper-3);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 24px;border-radius:var(--radius);
  border:1px solid transparent;font-size:14px;font-weight:600;line-height:1;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
  white-space:nowrap;
}
.btn svg{transition:transform .2s ease;}
.btn:hover svg{transform:translateX(4px);}
.btn:active{transform:scale(.99);}
.btn-primary{background:var(--pine);color:var(--paper);border-color:var(--pine);}
.btn-primary:hover{background:#152d25;border-color:#152d25;transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--ink);border-color:rgba(17,21,18,.34);}
.btn-outline:hover{background:rgba(17,21,18,.04);border-color:var(--ink);transform:translateY(-1px);}
.btn-lime{background:var(--lime);color:var(--ink);border-color:var(--lime);}
.btn-lime:hover{background:#d8ef84;border-color:#d8ef84;transform:translateY(-1px);}
.text-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;border-bottom:1px solid var(--line-strong);
  padding-bottom:2px;transition:border-color .2s ease,color .2s ease;
}
.text-link:hover{border-bottom-width:2px;border-bottom-color:var(--lime);color:var(--ink);}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border:1px solid var(--line);border-radius:999px;
  font-size:11px;line-height:1.4;color:var(--muted);background:rgba(255,255,255,.24);
  white-space:nowrap;
}
.tag-accent{background:var(--lime);border-color:var(--lime);color:var(--ink);}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border:1px solid var(--line-strong);border-radius:999px;
  font-size:12px;color:var(--muted);background:transparent;white-space:nowrap;
}
.pill::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--moss);}

/* Hero */
.hero{
  position:relative;
  min-height:calc(88vh - var(--nav-h));
  display:flex;align-items:center;
  background-color:var(--paper);
  background-image:repeating-linear-gradient(90deg,transparent 0 79px,rgba(17,21,18,.035) 79px 80px);
  border-bottom:1px solid var(--line);
  padding:56px 0 48px;
}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center;}
.hero-copy{max-width:660px;}
.hero h1{
  margin:18px 0 20px;
  font-family:var(--font-title);
  font-size:clamp(38px,5.2vw,64px);
  line-height:1.05;
  letter-spacing:-.02em;
  font-weight:600;
}
.hero-sub{max-width:530px;color:var(--muted);font-size:clamp(16px,1.6vw,19px);line-height:1.8;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.micro-proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px;font-size:12px;color:var(--muted);}
.micro-proof i{font-style:normal;color:rgba(17,21,18,.32);}
.hero-visual{position:relative;justify-self:end;width:min(100%,420px);}
.hero-frame{
  position:relative;margin:0;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius-img);background:var(--paper-2);aspect-ratio:4/5;
  box-shadow:var(--shadow);
}
.hero-frame img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.82);transition:transform .6s ease;}
.hero-frame:hover img{transform:scale(1.03);}
.hero-corner{
  position:absolute;right:12px;top:12px;
  padding:5px 9px;border:1px solid rgba(245,242,234,.42);
  background:rgba(17,21,18,.48);color:var(--paper);
  font-size:11px;line-height:1.4;border-radius:999px;
  backdrop-filter:blur(2px);
}
.hero-data{
  position:absolute;left:-20px;bottom:28px;width:196px;
  background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:4px;
}
.hero-data .data-label{font-size:11px;letter-spacing:.14em;color:var(--muted);}
.hero-data strong{font-family:var(--font-title);font-size:28px;line-height:1;letter-spacing:-.02em;}
.hero-data span:last-child{font-size:11px;color:var(--muted);}

/* Quick jump */
.quick-jump{border-bottom:1px solid var(--line);background:rgba(255,255,255,.22);}
.jump-inner{display:flex;align-items:center;gap:16px;padding:14px 0;overflow-x:auto;scrollbar-width:none;}
.jump-inner::-webkit-scrollbar{display:none;}
.jump-label{font-size:11px;letter-spacing:.16em;color:var(--muted);white-space:nowrap;flex:none;}
.jump-links{display:flex;align-items:center;gap:8px;min-width:max-content;}
.jump-link{
  font-size:12px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;
  color:var(--muted);transition:background .2s ease,color .2s ease,border-color .2s ease;
  white-space:nowrap;
}
.jump-link:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}

/* Bento */
.bento-grid{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:stretch;}
.bento-side{display:grid;gap:24px;}
.bento-card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.32);padding:28px;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
  min-width:0;
}
.bento-card:hover{transform:translateY(-2px);border-color:var(--line-strong);background:rgba(255,255,255,.45);}
.bento-main{min-height:380px;display:flex;flex-direction:column;justify-content:space-between;padding:36px;}
.bento-card .card-index{
  font-family:var(--font-title);font-size:30px;line-height:1;
  color:var(--moss);letter-spacing:-.02em;
}
.bento-card h3{font-family:var(--font-title);font-size:24px;line-height:1.35;letter-spacing:-.02em;margin:14px 0 10px;font-weight:600;}
.bento-card p{color:var(--muted);font-size:14px;line-height:1.85;max-width:44ch;}
.bento-mini{display:flex;gap:18px;align-items:flex-start;}
.bento-mini .mini-num{font-family:var(--font-title);font-size:20px;color:var(--moss);line-height:1.2;flex:none;}
.number-list{margin-top:32px;border-top:1px solid var(--line);}
.number-row{
  display:grid;grid-template-columns:56px 1.15fr 2fr 40px;gap:24px;align-items:center;
  padding:24px 8px;border-bottom:1px solid var(--line);
  transition:background .2s ease,padding .2s ease;
}
.number-row:hover{background:rgba(255,255,255,.32);padding-left:14px;padding-right:14px;}
.number-row .num{font-family:var(--font-title);font-size:18px;color:var(--moss);font-variant-numeric:tabular-nums;}
.number-row .row-title{font-family:var(--font-title);font-size:20px;line-height:1.4;letter-spacing:-.01em;font-weight:600;}
.number-row .row-desc{font-size:14px;color:var(--muted);line-height:1.75;max-width:56ch;}
.number-row .arrow{font-size:20px;color:var(--muted);text-align:right;transition:transform .2s ease,color .2s ease;}
.number-row:hover .arrow{transform:translateX(4px);color:var(--ink);}

/* Demo */
.demo-grid{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start;}
.demo-sticky{position:sticky;top:calc(var(--nav-h) + 28px);align-self:start;}
.demo-sticky h3{font-family:var(--font-title);font-size:clamp(24px,2.6vw,32px);line-height:1.3;letter-spacing:-.02em;margin:14px 0 12px;font-weight:600;}
.demo-sticky p{color:var(--muted);font-size:14px;line-height:1.85;max-width:40ch;}
.demo-tabs{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;}
.demo-tab{
  padding:8px 0;border-bottom:1px solid transparent;
  font-size:13px;color:var(--muted);transition:color .2s ease,border-color .2s ease;
}
.demo-tab:hover{color:var(--ink);}
.demo-tab.is-active{color:var(--ink);font-weight:600;border-bottom-color:var(--lime);}
.browser-frame{
  border:1px solid var(--line);border-radius:var(--radius-img);
  background:var(--paper-3);overflow:hidden;
}
.browser-bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 12px;border-bottom:1px solid var(--line);
  background:rgba(235,230,218,.6);
}
.browser-bar span{width:7px;height:7px;border-radius:999px;background:rgba(17,21,18,.2);display:block;}
.browser-bar em{font-style:normal;font-size:11px;color:var(--muted);margin-left:8px;letter-spacing:.04em;}
.browser-frame img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s ease;}
.browser-frame:hover img{transform:scale(1.03);}
.demo-caption{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.7;}

/* Proof */
.proof-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);padding-top:24px;}
.stat{min-width:0;}
.stat .stat-num{font-family:var(--font-title);font-size:clamp(40px,5vw,56px);line-height:1;letter-spacing:-.03em;}
.stat .stat-label{display:block;margin-top:10px;font-size:11px;letter-spacing:.16em;color:var(--muted);line-height:1.6;}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;}
.quote-card{
  border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.28);
  padding:30px;display:flex;flex-direction:column;justify-content:space-between;gap:22px;
}
.quote-card .quote-mark{font-family:var(--font-title);font-size:54px;line-height:.7;color:var(--moss);}
.quote-card blockquote{font-family:var(--font-title);font-size:20px;line-height:1.8;letter-spacing:-.01em;}
.quote-card cite{font-style:normal;font-size:12px;color:var(--muted);}
.logo-wall{
  border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.18);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;
}
.logo-word{
  display:flex;align-items:center;justify-content:center;min-height:82px;
  font-family:var(--font-title);font-size:17px;letter-spacing:-.01em;
  color:var(--ink);opacity:.55;transition:opacity .2s ease,background .2s ease;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.logo-word:nth-child(3n){border-right:0;}
.logo-word:nth-last-child(-n+3){border-bottom:0;}
.logo-word:hover{opacity:1;background:rgba(255,255,255,.38);}
.compliance-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:stretch;}
.price-card{
  border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.32);
  padding:32px;display:flex;flex-direction:column;gap:24px;min-width:0;
}
.price-card-dark{background:var(--pine);color:var(--paper);border-color:var(--pine);}
.price-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.price-head h3{font-family:var(--font-title);font-size:26px;line-height:1.3;letter-spacing:-.02em;font-weight:600;}
.price-head p{font-size:12px;color:var(--muted);margin-top:6px;}
.price-card-dark .price-head p{color:rgba(245,242,234,.65);}
.price-slot{font-family:var(--font-title);font-size:clamp(32px,4vw,44px);line-height:1.05;letter-spacing:-.03em;}
.price-slot small{font-family:var(--font-body);font-size:12px;letter-spacing:.02em;color:var(--muted);display:block;margin-top:8px;}
.price-card-dark .price-slot small{color:rgba(245,242,234,.55);}
.price-feature{display:grid;gap:12px;margin:0;padding:0;list-style:none;}
.price-feature li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.7;color:var(--muted);}
.price-feature li svg{flex:none;margin-top:3px;stroke:var(--moss);}
.price-card-dark .price-feature li{color:rgba(245,242,234,.82);}
.price-card-dark .price-feature li svg{stroke:var(--lime);}
.price-card .btn{margin-top:auto;align-self:flex-start;}
.price-card-dark .btn-primary{background:var(--lime);color:var(--ink);border-color:var(--lime);}
.price-card-dark .btn-primary:hover{background:#d8ef84;border-color:#d8ef84;}
.recommend-tag{background:var(--lime);color:var(--ink);border-color:var(--lime);}
.dimension-table{
  margin-top:32px;border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.22);overflow:hidden;
}
.dim-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line);}
.dim-row:last-child{border-bottom:0;}
.dim-cell{padding:18px 20px;border-right:1px solid var(--line);min-width:0;}
.dim-cell:last-child{border-right:0;}
.dim-cell strong{display:block;font-size:14px;line-height:1.6;font-weight:600;}
.dim-cell span{display:block;font-size:12px;color:var(--muted);line-height:1.7;margin-top:3px;}
.dim-label{display:none;}

/* News */
.news-layout{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:start;}
.news-featured{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:rgba(255,255,255,.3);transition:transform .25s ease,border-color .25s ease;
}
.news-featured:hover{transform:translateY(-2px);border-color:var(--line-strong);}
.news-featured > a{display:block;}
.news-featured .featured-media{overflow:hidden;background:var(--paper-2);}
.news-featured img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s ease;}
.news-featured:hover img{transform:scale(1.03);}
.news-featured .featured-body{padding:24px;display:flex;flex-direction:column;gap:12px;}
.news-featured h3{font-family:var(--font-title);font-size:clamp(20px,2.2vw,26px);line-height:1.4;letter-spacing:-.02em;font-weight:600;}
.news-featured h3 a:hover{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:4px;}
.news-featured .summary{font-size:14px;color:var(--muted);line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;color:var(--muted);}
.news-meta .meta-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.news-meta .arrow{font-size:18px;transition:transform .2s ease;}
.news-featured:hover .arrow{transform:translateX(4px);}
.news-side{border-top:1px solid var(--line);}
.news-row{display:block;padding:20px 4px;border-bottom:1px solid var(--line);transition:padding .2s ease,background .2s ease;}
.news-row:hover{padding-left:10px;padding-right:10px;background:rgba(255,255,255,.26);}
.news-row h3{font-family:var(--font-title);font-size:18px;line-height:1.45;letter-spacing:-.01em;font-weight:600;margin-bottom:6px;}
.news-row:hover h3{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:4px;}
.news-row p{font-size:13px;color:var(--muted);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px;}
.news-row .news-meta{font-size:12px;}
.news-empty{
  grid-column:1 / -1;border:1px dashed var(--line-strong);border-radius:var(--radius);
  background:rgba(255,255,255,.2);padding:56px 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.news-empty svg{color:var(--moss);}
.news-empty p{font-size:15px;color:var(--muted);}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:4fr 8fr;gap:48px;align-items:start;}
.faq-side{position:sticky;top:calc(var(--nav-h) + 28px);align-self:start;}
.faq-side h2{font-family:var(--font-title);font-size:clamp(28px,3.8vw,40px);line-height:1.2;letter-spacing:-.02em;margin:10px 0 14px;font-weight:600;}
.faq-side p{font-size:14px;color:var(--muted);line-height:1.85;max-width:30ch;}
.faq-support{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted);}
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  min-height:64px;padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;
  cursor:pointer;list-style:none;font-size:16px;font-weight:600;line-height:1.6;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item .plus{
  font-size:22px;line-height:1;color:var(--moss);flex:none;
  transition:transform .22s ease,color .22s ease;
}
.faq-item[open] .plus{transform:rotate(45deg);color:var(--ink);}
.faq-answer{padding:0 0 22px;}
.faq-answer p{
  background:rgba(235,230,218,.7);border-left:2px solid var(--lime);
  padding:16px 20px;font-size:15px;line-height:1.9;color:var(--muted);max-width:68ch;
}

/* CTA band */
.cta-band{background:var(--pine);color:var(--paper);padding:72px 0;position:relative;overflow:hidden;}
.cta-char{
  position:absolute;right:4%;bottom:-14%;font-family:var(--font-title);
  font-size:clamp(160px,26vw,300px);line-height:1;color:rgba(245,242,234,.08);
  pointer-events:none;user-select:none;
}
.cta-inner{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;}
.cta-copy{max-width:660px;}
.cta-copy h2{
  font-family:var(--font-title);font-size:clamp(28px,4vw,44px);line-height:1.2;
  letter-spacing:-.02em;font-weight:600;
}
.cta-copy p{margin-top:14px;color:rgba(245,242,234,.7);font-size:14px;line-height:1.8;max-width:50ch;}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;flex:none;}
.cta-band .btn-outline{color:var(--paper);border-color:rgba(245,242,234,.42);}
.cta-band .btn-outline:hover{background:rgba(245,242,234,.1);border-color:rgba(245,242,234,.8);}

/* Footer */
.footer{background:#111512;color:var(--paper);padding:64px 0 0;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.25fr;gap:40px;}
.footer-brand .brand-text{font-size:17px;}
.footer-brand p{font-size:13px;line-height:1.8;color:rgba(245,242,234,.64);margin-top:16px;max-width:34ch;}
.footer-brand .footer-compliance{font-size:12px;color:rgba(245,242,234,.48);border-top:1px solid rgba(245,242,234,.12);padding-top:14px;margin-top:18px;}
.footer-col h3{font-size:11px;letter-spacing:.16em;color:rgba(245,242,234,.5);margin-bottom:14px;font-weight:500;}
.footer-col a{
  display:inline-block;font-size:13px;line-height:1.5;padding:4px 0;
  color:rgba(245,242,234,.82);border-bottom:1px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.footer-col a:hover{border-bottom-color:rgba(245,242,234,.72);color:var(--paper);}
.footer-col p{font-size:12px;line-height:1.8;color:rgba(245,242,234,.48);margin-top:12px;max-width:28ch;}
.footer-bottom{
  margin-top:48px;border-top:1px solid rgba(245,242,234,.12);
  padding:20px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  font-size:12px;color:rgba(245,242,234,.48);
}
.footer-bottom .footer-tech{color:rgba(245,242,234,.38);}

/* Float CTA */
.float-cta{
  position:fixed;right:24px;bottom:24px;z-index:55;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 18px;border-radius:999px;
  background:var(--pine);color:var(--paper);border:1px solid var(--pine);
  box-shadow:var(--shadow);font-size:13px;font-weight:600;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,background .2s ease;
}
.float-cta.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.float-cta:hover{background:var(--moss);}
.float-cta.is-hidden{opacity:0;transform:translateY(10px);pointer-events:none;}

/* Mobile tabbar */
.mobile-tabbar{display:none;}

/* Reveal */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease;}
.js .reveal.in-view{opacity:1;transform:none;}

/* Responsive */
@media (max-width:1024px){
  :root{--gutter:20px;--section:88px;}
  .nav-links{gap:22px;}
  .hero-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .hero-data{left:-8px;}
  .demo-grid{gap:32px;}
  .proof-grid{gap:20px;}
  .faq-grid{gap:32px;}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr;row-gap:32px;}
  .footer-grid .footer-col:last-child{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;}
  .footer-grid .footer-col:last-child h3{width:100%;margin-bottom:0;}
  .footer-grid .footer-col:last-child p{margin-top:0;max-width:none;width:100%;}
}
@media (max-width:767px){
  :root{--section:72px;--nav-h:64px;--gutter:20px;}
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .mobile-top-cta{display:inline-flex;}
  .brand-text{font-size:15px;}
  main{padding-bottom:88px;}
  .hero{padding:40px 0 44px;min-height:auto;background-image:none;}
  .hero-grid{grid-template-columns:1fr;gap:32px;}
  .hero-copy{max-width:none;}
  .hero h1{font-size:clamp(34px,9vw,44px);}
  .hero-sub{font-size:15.5px;max-width:none;}
  .hero-actions{gap:10px;}
  .hero-actions .btn{flex:1 1 auto;}
  .hero-visual{justify-self:stretch;width:100%;max-width:440px;margin-inline:auto;}
  .hero-frame{aspect-ratio:4/5;}
  .hero-data{left:12px;bottom:12px;width:172px;padding:13px;}
  .hero-data strong{font-size:24px;}
  .section-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:28px;}
  .section-head .head-note{max-width:none;font-size:13px;}
  .bento-grid{grid-template-columns:1fr;}
  .bento-main{min-height:auto;padding:26px;}
  .bento-card{padding:22px;}
  .number-row{grid-template-columns:40px 1fr 32px;gap:12px;padding:20px 4px;}
  .number-row .row-desc{grid-column:2 / 4;font-size:13px;margin-top:-4px;}
  .number-row .row-title{font-size:18px;}
  .number-row .arrow{grid-column:3;grid-row:1;align-self:start;}
  .demo-grid{grid-template-columns:1fr;gap:28px;}
  .demo-sticky{position:static;}
  .demo-sticky p{max-width:none;}
  .demo-tabs{gap:8px 14px;}
  .proof-stats{grid-template-columns:1fr 1fr;gap:20px 16px;}
  .proof-grid{grid-template-columns:1fr;gap:16px;margin-top:28px;}
  .logo-wall{grid-template-columns:1fr 1fr;}
  .logo-word{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;min-height:68px;font-size:15px;}
  .logo-word:nth-child(2n){border-right:0!important;}
  .logo-word:nth-last-child(-n+2){border-bottom:0!important;}
  .pricing-grid{grid-template-columns:1fr;gap:16px;}
  .price-card{padding:24px;}
  .price-card .btn{width:100%;}
  .dim-row{grid-template-columns:1fr;}
  .dim-cell{border-right:0;border-bottom:1px solid var(--line);padding:14px 16px;}
  .dim-cell:last-child{border-bottom:0;}
  .dim-label{display:block;font-size:11px;letter-spacing:.12em;color:var(--muted);margin-bottom:2px;}
  .news-layout{grid-template-columns:1fr;gap:24px;}
  .news-featured .featured-body{padding:18px;}
  .news-row{padding:18px 0;}
  .faq-grid{grid-template-columns:1fr;gap:28px;}
  .faq-side{position:static;}
  .faq-side p{max-width:none;}
  .faq-item summary{font-size:15px;gap:16px;}
  .faq-answer p{font-size:14px;line-height:1.85;}
  .cta-band{padding:52px 0;}
  .cta-inner{flex-direction:column;align-items:flex-start;gap:28px;}
  .cta-copy{max-width:none;}
  .cta-actions{width:100%;}
  .cta-actions .btn{flex:1 1 auto;}
  .footer{padding-top:48px;padding-bottom:calc(64px + env(safe-area-inset-bottom) + 20px);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px;}
  .footer-brand{grid-column:1 / -1;}
  .footer-grid .footer-col:last-child{grid-column:1 / -1;}
  .footer-col a{padding:5px 0;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;margin-top:32px;}
  .float-cta{
    left:20px;right:20px;bottom:calc(64px + env(safe-area-inset-bottom) + 10px);
    height:52px;min-height:52px;border-radius:6px;justify-content:center;z-index:55;
  }
  .mobile-tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    height:calc(64px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:var(--paper);border-top:1px solid var(--line);
  }
  .tab-item{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-width:0;height:64px;font-size:10px;line-height:1.2;color:var(--muted);
    transition:color .2s ease,background .2s ease;
  }
  .tab-item svg{width:20px;height:20px;stroke-width:1.5;fill:none;stroke:currentColor;transition:fill .2s ease,stroke .2s ease;}
  .tab-item.active{color:var(--ink);font-weight:600;}
  .tab-item.active::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;background:var(--lime);}
  .tab-item.active svg{fill:var(--lime);stroke:var(--ink);}
  .tab-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
@media (max-width:520px){
  .hero h1{font-size:clamp(32px,9.6vw,40px);}
  .hero-actions .btn{width:100%;}
  .micro-proof{font-size:11px;gap:8px;}
  .section-head h2{font-size:clamp(26px,8vw,32px);}
  .footer-grid{grid-template-columns:1fr;}
  .footer-brand{grid-column:auto;}
  .footer-grid .footer-col:last-child{grid-column:auto;display:block;}
  .footer-grid .footer-col:last-child p{width:auto;}
  .logo-wall{grid-template-columns:1fr;}
  .logo-word{border-right:0!important;border-bottom:1px solid var(--line)!important;}
  .logo-word:last-child{border-bottom:0!important;}
  .proof-stats{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .js .reveal{opacity:1;transform:none;}
  .hero-frame:hover img,.browser-frame:hover img,.news-featured:hover img{transform:none;}
}

/* roulang page: article */
:root{
  --pine:#1E3B32;
  --pine-deep:#152B25;
  --moss:#3F6B58;
  --bone:#F5F2EA;
  --bone-2:#EBE6DA;
  --paper:#FBFAF6;
  --ink:#111512;
  --ink-soft:#5E665F;
  --lime:#C9E265;
  --line:rgba(17,21,18,.12);
  --line-strong:rgba(17,21,18,.24);
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",serif;
  --sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  --radius:6px;
  --radius-img:10px;
  --shadow:0 24px 60px -40px rgba(17,21,18,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:700;letter-spacing:-.02em;line-height:1.25}
p{margin:0}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.shell{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}

/* ============ header ============ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(245,242,234,.92);
  border-bottom:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.site-header.is-scrolled{background:var(--bone);border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{display:inline-flex;gap:3px;align-items:flex-end}
.brand-mark i{display:block;width:8px;height:18px;background:var(--pine);border-radius:2px}
.brand-mark i:last-child{height:12px;background:var(--lime)}
.brand-text{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-link{
  position:relative;padding:8px 0;font-size:15px;color:var(--ink-soft);
  transition:color .2s var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--pine);transition:width .2s var(--ease);
}
.nav-link:hover{color:var(--ink)}
.nav-link:hover::after{width:100%}
.nav-link.active{color:var(--ink);font-weight:600}
.nav-link.active::after{width:100%;background:var(--lime)}
.header-actions{display:flex;align-items:center;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 24px;border-radius:var(--radius);
  font-size:15px;font-weight:600;white-space:nowrap;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn-primary{background:var(--pine);color:var(--bone)}
.btn-primary:hover{background:var(--pine-deep);transform:translateY(-1px)}
.btn-primary:active{transform:scale(.99)}
.btn-primary .arrow{transition:transform .2s var(--ease)}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-ghost{background:transparent;border:1px solid var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--pine);transform:translateY(-1px)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.icon-cta{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:var(--radius)}

/* ============ article hero ============ */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:12px;color:var(--ink-soft);padding:28px 0 0;
}
.breadcrumb .sep{color:rgba(17,21,18,.3)}
.breadcrumb a{transition:color .2s var(--ease)}
.breadcrumb a:hover{color:var(--pine);text-decoration:underline;text-underline-offset:3px}
.article-hero{padding-bottom:8px}
.pill{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;
  border-radius:999px;font-size:12px;letter-spacing:.08em;
  color:var(--moss);background:rgba(201,226,101,.18);
  border:1px solid rgba(63,107,88,.24);
}
.article-title{
  font-size:clamp(28px,4.4vw,46px);
  line-height:1.2;margin:18px 0 0;max-width:900px;
}
.article-lead{
  margin-top:18px;max-width:760px;font-size:16px;line-height:1.85;color:var(--ink-soft);
}
.meta-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  margin-top:24px;font-size:12px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.meta-row .dot{width:4px;height:4px;border-radius:50%;background:rgba(17,21,18,.25)}
.copy-btn{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--ink-soft);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.copy-btn:hover{border-color:var(--moss);color:var(--pine);background:rgba(63,107,88,.06)}
.cover-frame{
  margin-top:32px;border:1px solid var(--line);border-radius:var(--radius-img);
  overflow:hidden;background:var(--bone-2);box-shadow:var(--shadow);
}
.cover-frame img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--ease)}
.cover-frame:hover img{transform:scale(1.02)}
.cover-caption{font-size:12px;color:var(--ink-soft);margin-top:10px}

/* ============ article layout ============ */
.article-shell{padding:56px 0 72px}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.article-body{
  max-width:720px;font-size:17px;line-height:1.95;color:#1B211C;
  overflow-wrap:break-word;word-break:break-word;
}
.article-body > *:first-child{margin-top:0}
.article-body p{margin:0 0 1.35em}
.article-body h2{
  font-size:26px;line-height:1.4;margin:2.2em 0 .8em;
  padding-left:14px;border-left:3px solid var(--lime);
}
.article-body h3{font-size:20px;margin:1.8em 0 .6em}
.article-body h4{font-size:17px;margin:1.6em 0 .5em}
.article-body ul{margin:0 0 1.35em;padding-left:1.15em;list-style:none}
.article-body ul li{position:relative;margin:.45em 0}
.article-body ul li::before{
  content:"";position:absolute;left:-1.15em;top:.78em;
  width:6px;height:6px;border-radius:1px;background:var(--moss);
}
.article-body ol{margin:0 0 1.35em;padding-left:1.5em}
.article-body ol li{margin:.45em 0}
.article-body blockquote{
  margin:1.9em 0;padding:6px 0 6px 22px;
  border-left:2px solid var(--moss);
  font-family:var(--serif);font-size:18px;line-height:1.8;color:#28302a;
}
.article-body blockquote p{margin:0 0 .6em}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body a{color:var(--moss);text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:var(--pine);text-decoration-thickness:2px}
.article-body img{border-radius:8px;margin:1.6em 0}
.article-body figure{margin:1.6em 0}
.article-body figcaption{font-size:12px;color:var(--ink-soft);margin-top:8px;line-height:1.7}
.article-body table{width:100%;border-collapse:collapse;margin:1.7em 0;font-size:15px;font-variant-numeric:tabular-nums}
.article-body th,.article-body td{border-bottom:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.article-body th{background:var(--bone-2);font-size:13px;letter-spacing:.06em;font-weight:600}
.article-body code{background:var(--bone-2);padding:2px 6px;border-radius:4px;font-size:.9em}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

.empty-state{
  max-width:720px;padding:56px 24px;text-align:center;
  border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--paper);
}
.empty-state h2{font-size:22px;margin-bottom:10px}
.empty-state p{color:var(--ink-soft);font-size:15px;margin-bottom:20px}

/* ============ sidebar ============ */
.sidebar-inner{display:grid;gap:20px}
.sticky-col{position:relative}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;
}
.card-title{
  font-size:13px;letter-spacing:.14em;color:var(--moss);
  font-family:var(--sans);font-weight:600;margin-bottom:14px;
}
.tip-list{display:grid;gap:12px;list-style:none;padding:0}
.tip-list li{display:flex;gap:10px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.tip-list .num{
  flex:none;width:20px;height:20px;border-radius:4px;background:rgba(201,226,101,.35);
  color:var(--pine);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;margin-top:2px;
}
.side-link{
  display:flex;flex-direction:column;gap:4px;padding:12px 0;
  border-bottom:1px solid var(--line);transition:transform .2s var(--ease);
}
.side-link:last-child{border-bottom:0;padding-bottom:0}
.side-link .t{font-size:14px;font-weight:600;line-height:1.55;transition:color .2s var(--ease)}
.side-link .m{font-size:11px;color:var(--ink-soft);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.side-link:hover{transform:translateX(2px)}
.side-link:hover .t{color:var(--moss)}
.cta-card{
  background:var(--pine);color:var(--bone);border:1px solid var(--pine);
  border-radius:var(--radius);padding:24px;
}
.cta-card h3{font-size:19px;color:var(--bone);line-height:1.45}
.cta-card p{font-size:13px;line-height:1.8;color:rgba(245,242,234,.72);margin:10px 0 18px}
.cta-card .btn{width:100%;background:var(--lime);color:var(--pine-deep)}
.cta-card .btn:hover{background:#D6EE7C}

/* ============ related ============ */
.related{padding:0 0 88px}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.section-head h2{font-size:clamp(24px,3vw,32px)}
.section-head .sub{font-size:13px;color:var(--ink-soft);max-width:420px;line-height:1.8}
.text-link{
  position:relative;font-size:14px;font-weight:600;color:var(--pine);
  border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:color .2s var(--ease);
}
.text-link:hover{color:var(--moss);border-bottom-width:2px}
.related-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.rel-card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.rel-card:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 18px 40px -34px rgba(17,21,18,.55)}
.rel-card .cat{font-size:11px;letter-spacing:.12em;color:var(--moss)}
.rel-card h3{font-size:17px;line-height:1.5}
.rel-card .date{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-top:auto}
.rel-card .go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--pine)}
.rel-card:hover .go .arrow{transform:translateX(4px)}
.rel-card .arrow{transition:transform .2s var(--ease)}

/* ============ cta block ============ */
.cta-block{
  background:var(--pine);color:var(--bone);border-radius:8px;
  padding:48px 40px;display:grid;gap:28px;align-items:center;
  position:relative;overflow:hidden;
}
.cta-block::after{
  content:"爱";position:absolute;right:-10px;bottom:-70px;
  font-family:var(--serif);font-size:220px;line-height:1;
  color:rgba(245,242,234,.07);pointer-events:none;
}
.cta-block h2{font-size:clamp(24px,3.2vw,34px);line-height:1.3;max-width:560px}
.cta-block p{font-size:14px;line-height:1.9;color:rgba(245,242,234,.75);margin-top:12px;max-width:560px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;position:relative;z-index:1}
.cta-actions .btn-primary{background:var(--lime);color:var(--pine-deep)}
.cta-actions .btn-primary:hover{background:#D6EE7C}
.cta-actions .btn-ghost{border-color:rgba(245,242,234,.4);color:var(--bone)}
.cta-actions .btn-ghost:hover{border-color:var(--lime);color:var(--lime)}

/* ============ footer ============ */
.footer{background:#111512;color:#EDEAE1;padding:64px 0 0;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px;padding-bottom:48px}
.footer .brand-text{color:#EDEAE1;font-size:17px}
.footer .brand-mark i{background:#EDEAE1}
.footer .brand-mark i:last-child{background:var(--lime)}
.footer-brand p{font-size:13px;line-height:1.9;color:rgba(237,234,225,.62);margin-top:14px;max-width:280px}
.footer-compliance{color:rgba(237,234,225,.45)!important;font-size:12px!important}
.footer-col h3{
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.18em;color:rgba(237,234,225,.5);margin:0 0 14px;
}
.footer-col a,.footer-col p{
  display:inline-block;position:relative;
  font-size:14px;line-height:1.9;color:rgba(237,234,225,.82);
  padding:4px 0;
}
.footer-col a::after{
  content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;
  background:var(--lime);transition:width .22s var(--ease);
}
.footer-col a:hover::after{width:100%}
.footer-col p{display:block;font-size:12px;color:rgba(237,234,225,.45);margin-top:10px;max-width:240px;line-height:1.8}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(237,234,225,.14);padding-top:20px;padding-bottom:26px;
  font-size:12px;color:rgba(237,234,225,.45);
}
.footer-tech{font-variant-numeric:tabular-nums}

/* ============ mobile tab bar ============ */
.tabbar{display:none}
@media (max-width:900px){
  .nav-links{display:none}
  .header-actions .btn-primary{display:none}
  .icon-cta{display:inline-flex}
  body{padding-bottom:88px}
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:grid;grid-template-columns:repeat(5,1fr);
    background:rgba(245,242,234,.98);
    border-top:1px solid var(--line);
    height:64px;padding-bottom:env(safe-area-inset-bottom);
  }
  .tab-item{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:10.5px;color:var(--ink-soft);letter-spacing:.02em;
  }
  .tab-item svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .tab-item.active{color:var(--pine);font-weight:600}
  .tab-item.active svg{fill:rgba(201,226,101,.85);stroke:var(--pine)}
  .tab-item.active::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:2px;background:var(--lime);border-radius:0 0 2px 2px;
  }
}

/* ============ responsive ============ */
@media (min-width:640px){
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .article-grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:56px}
  .sticky-col{position:sticky;top:96px}
  .related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cta-block{grid-template-columns:minmax(0,1fr) auto;padding:56px 56px}
}
@media (max-width:768px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .footer{padding-top:48px}
  .cta-block{padding:36px 24px}
  .article-shell{padding:40px 0 56px}
  .related{padding-bottom:64px}
  .article-body{font-size:16px}
  .article-body h2{font-size:22px}
  .article-body h3{font-size:18px}
  .article-body table{display:block;overflow-x:auto;white-space:nowrap}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .footer-bottom{justify-content:flex-start}
  .shell{padding:0 20px}
  .header-inner{height:64px}
  .brand-text{font-size:16px}
  .cover-frame{border-radius:8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .cover-frame:hover img{transform:none}
  .rel-card:hover{transform:none}
}

/* roulang page: category1 */
:root{
  --pine:#1E3B32;
  --pine-deep:#142A22;
  --moss:#3F6B58;
  --bone:#F5F2EA;
  --bone-2:#EBE6DA;
  --ink:#111512;
  --ink-2:#5E665F;
  --lime:#C9E265;
  --line:rgba(17,21,18,.12);
  --line-strong:rgba(17,21,18,.26);
  --r-sm:4px;
  --r-card:6px;
  --r-img:10px;
  --shadow-soft:0 24px 60px -40px rgba(17,21,18,.55);
  --font-serif:"Songti SC","Noto Serif SC","Source Han Serif SC",serif;
  --font-sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  --font-num:ui-monospace,"SFMono-Regular",Menlo,monospace;
  --section-gap:112px;
  --shell-w:1240px;
  --header-h:72px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:2px;}
.shell{width:100%;max-width:var(--shell-w);margin:0 auto;padding:0 24px;}

/* ---------- 顶部导航 ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease;
}
.site-header.is-stuck{
  background:rgba(245,242,234,.97);
  border-bottom:1px solid var(--line);
}
.header-inner{
  height:var(--header-h);
  display:flex;align-items:center;gap:32px;
}
.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-mark{
  width:26px;height:26px;border-radius:7px;background:var(--pine);
  display:inline-flex;align-items:center;justify-content:center;gap:2px;
  transform:rotate(-8deg);
}
.brand-mark i{display:block;width:3px;border-radius:2px;background:var(--lime);}
.brand-mark i:nth-child(1){height:9px;}
.brand-mark i:nth-child(2){height:15px;}
.brand-text{
  font-family:var(--font-serif);
  font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
}
.nav-links{display:flex;align-items:center;gap:30px;margin-left:auto;}
.nav-link{
  position:relative;padding:6px 0;font-size:14.5px;color:var(--ink-2);
  transition:color .2s ease;white-space:nowrap;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--pine);transform:scaleX(0);transform-origin:left center;
  transition:transform .2s ease;
}
.nav-link:hover{color:var(--ink);}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}
.nav-link.active{color:var(--ink);font-weight:600;}
.header-cta{flex-shrink:0;}
.header-icon-cta{
  display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--line);
  border-radius:50%;align-items:center;justify-content:center;color:var(--pine);
  background:rgba(245,242,234,.7);
}
.header-icon-cta svg{width:19px;height:19px;}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 24px;border-radius:var(--r-card);
  font-size:14.5px;font-weight:600;letter-spacing:.01em;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;transition:transform .22s ease;}
.btn:hover svg{transform:translateX(4px);}
.btn:active{transform:scale(.99);}
.btn-primary{background:var(--pine);color:var(--bone);border:1px solid var(--pine);}
.btn-primary:hover{background:var(--pine-deep);border-color:var(--pine-deep);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px);}
.btn-light{background:var(--bone);color:var(--pine);border:1px solid var(--bone);}
.btn-light:hover{background:#fff;transform:translateY(-1px);}
.btn-outline-light{background:transparent;color:var(--bone);border:1px solid rgba(245,242,234,.4);}
.btn-outline-light:hover{border-color:var(--bone);transform:translateY(-1px);}
.link-arrow{
  display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--pine);
  border-bottom:1px solid var(--pine);padding-bottom:2px;transition:border-color .2s,color .2s;
}
.link-arrow svg{width:14px;height:14px;transition:transform .22s ease;}
.link-arrow:hover{border-bottom-width:2px;}
.link-arrow:hover svg{transform:translateX(4px);}

/* ---------- 主区域 ---------- */
.page-main{padding-top:var(--header-h);}
.breadcrumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-2);letter-spacing:.02em;padding-top:24px;
}
.breadcrumb a{transition:color .2s;}
.breadcrumb a:hover{color:var(--pine);}
.breadcrumb span[aria-current]{color:var(--ink);}

/* ---------- Hero ---------- */
.page-hero{padding:24px 0 88px;}
.hero-grid{
  display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;
  padding-top:36px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.18em;color:var(--moss);margin-bottom:20px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(201,226,101,.24);}
.page-hero h1{
  font-family:var(--font-serif);
  font-size:clamp(30px,4.1vw,50px);
  line-height:1.15;letter-spacing:-.02em;font-weight:700;
  color:var(--ink);max-width:15em;
}
.hero-sub{
  margin-top:22px;font-size:17px;line-height:1.8;color:var(--ink-2);max-width:34em;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
.mini-facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:0;
  margin-top:30px;font-size:12px;color:var(--ink-2);letter-spacing:.06em;
}
.mini-facts span{display:inline-flex;align-items:center;}
.mini-facts span+span::before{content:"/";margin:0 12px;color:var(--line-strong);}
.hero-figure{
  position:relative;margin:0;
  padding:10px;border:1px solid var(--line);border-radius:var(--r-img);
  background:#fff;box-shadow:var(--shadow-soft);
}
.hero-figure img{
  width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;
  filter:saturate(.86) contrast(1.02);
  transition:transform .6s ease;
}
.hero-figure{overflow:hidden;}
.hero-figure:hover img{transform:scale(1.03);}
.figure-tag{
  position:absolute;left:22px;bottom:22px;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;background:rgba(245,242,234,.94);
  border:1px solid var(--line);font-size:11px;letter-spacing:.08em;color:var(--pine);
}

/* ---------- 通用板块 ---------- */
.section{padding:var(--section-gap) 0;}
.section-head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:20px;
  padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:52px;
}
.section-no{
  font-family:var(--font-num);font-size:12px;letter-spacing:.16em;color:var(--moss);
  padding-bottom:8px;
}
.section-head h2{
  font-family:var(--font-serif);font-size:clamp(26px,3vw,38px);
  line-height:1.25;letter-spacing:-.02em;font-weight:700;
}
.section-note{font-size:13.5px;color:var(--ink-2);max-width:22em;line-height:1.7;padding-bottom:6px;}

/* ---------- 步骤时间线 ---------- */
.steps-section{background:var(--bone);}
.steps-grid{display:grid;grid-template-columns:3fr 9fr;gap:48px;align-items:start;}
.steps-index{position:sticky;top:104px;}
.index-title{
  font-size:12px;letter-spacing:.16em;color:var(--ink-2);margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.index-link{
  display:flex;align-items:flex-start;gap:12px;padding:11px 0;
  font-size:14px;color:var(--ink-2);transition:color .2s ease;
}
.index-link span{
  font-family:var(--font-num);font-size:12px;color:var(--moss);
  padding-top:3px;transition:color .2s ease;
}
.index-link:hover{color:var(--ink);}
.index-link.active{color:var(--ink);font-weight:600;}
.index-link.active span{color:var(--pine);}
.index-help{
  margin-top:26px;padding:16px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--bone-2);font-size:12.5px;line-height:1.8;color:var(--ink-2);
}
.index-help a{color:var(--pine);border-bottom:1px solid var(--pine);}
.timeline{position:relative;padding-left:4px;}
.timeline::before{
  content:"";position:absolute;left:15px;top:10px;bottom:14px;width:1px;background:var(--line);
}
.step{position:relative;padding:0 0 44px 46px;}
.step:last-child{padding-bottom:0;}
.step-no{
  position:absolute;left:0;top:0;width:31px;height:31px;border-radius:50%;
  background:var(--bone);border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-num);font-size:11.5px;color:var(--pine);
  transition:border-color .2s,background .2s;
}
.step:hover .step-no{border-color:var(--pine);background:rgba(201,226,101,.28);}
.step h3{
  font-family:var(--font-serif);font-size:21px;line-height:1.4;font-weight:700;
  letter-spacing:-.01em;margin-bottom:10px;
}
.step p{font-size:15px;line-height:1.9;color:var(--ink-2);max-width:40em;}
.tip{
  margin-top:14px;display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--r-card);background:var(--bone-2);
  border-left:2px solid var(--moss);
  font-size:13px;line-height:1.8;color:var(--ink-2);
}
.tip svg{width:15px;height:15px;flex-shrink:0;margin-top:4px;color:var(--moss);}
.step-tag{
  display:inline-block;padding:3px 10px;border-radius:999px;
  border:1px solid var(--line);font-size:11px;letter-spacing:.08em;
  color:var(--ink-2);margin-bottom:12px;
}

/* ---------- 双端入口 ---------- */
.entry-section{background:var(--bone-2);}
.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.entry-card{
  background:var(--bone);border:1px solid var(--line);border-radius:var(--r-card);
  padding:32px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
  display:flex;flex-direction:column;
}
.entry-card:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--shadow-soft);}
.entry-icon{
  width:46px;height:46px;border-radius:10px;background:rgba(30,59,50,.07);
  display:flex;align-items:center;justify-content:center;color:var(--pine);margin-bottom:22px;
}
.entry-icon svg{width:22px;height:22px;}
.entry-card h3{
  font-family:var(--font-serif);font-size:22px;font-weight:700;letter-spacing:-.01em;
  margin-bottom:12px;
}
.entry-card p{font-size:14.5px;line-height:1.9;color:var(--ink-2);margin-bottom:20px;}
.entry-list{margin-bottom:26px;}
.entry-list li{
  position:relative;padding-left:16px;font-size:13.5px;line-height:1.9;color:var(--ink-2);
}
.entry-list li::before{
  content:"";position:absolute;left:0;top:11px;width:5px;height:5px;
  background:var(--lime);border:1px solid var(--moss);border-radius:1px;
}
.entry-card .link-arrow{margin-top:auto;align-self:flex-start;}

/* ---------- 自检清单 ---------- */
.check-grid{display:grid;grid-template-columns:5fr 7fr;gap:52px;align-items:center;}
.check-figure{margin:0;position:relative;border:1px solid var(--line);border-radius:var(--r-img);overflow:hidden;background:var(--bone-2);}
.check-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.9);transition:transform .6s ease;}
.check-figure:hover img{transform:scale(1.03);}
.check-figure figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-size:12px;
  color:var(--bone);background:linear-gradient(180deg,rgba(20,42,34,0),rgba(20,42,34,.78));
}
.checklist{display:grid;grid-template-columns:1fr;gap:0;}
.check-item{
  display:flex;gap:14px;align-items:flex-start;padding:18px 0;
  border-bottom:1px solid var(--line);
}
.check-item:first-child{border-top:1px solid var(--line);}
.check-icon{
  width:22px;height:22px;border-radius:50%;background:var(--pine);color:var(--lime);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;
}
.check-icon svg{width:12px;height:12px;}
.check-item h4{font-size:15px;font-weight:600;margin-bottom:3px;letter-spacing:0;}
.check-item p{font-size:13.5px;line-height:1.8;color:var(--ink-2);}

/* ---------- FAQ ---------- */
.faq-section{background:var(--bone);}
.faq-grid{display:grid;grid-template-columns:4fr 8fr;gap:52px;align-items:start;}
.faq-side{position:sticky;top:104px;}
.faq-side h2{
  font-family:var(--font-serif);font-size:clamp(26px,2.8vw,34px);line-height:1.3;
  letter-spacing:-.02em;font-weight:700;margin-bottom:16px;
}
.faq-side p{font-size:14px;line-height:1.9;color:var(--ink-2);margin-bottom:20px;max-width:20em;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;padding:16px 0;cursor:pointer;list-style:none;
  font-size:16px;font-weight:600;line-height:1.6;color:var(--ink);
  transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--pine);}
.faq-plus{
  position:relative;width:20px;height:20px;flex-shrink:0;
  transition:transform .22s ease;
}
.faq-plus::before,.faq-plus::after{
  content:"";position:absolute;background:var(--moss);border-radius:1px;
}
.faq-plus::before{left:9px;top:3px;width:2px;height:14px;}
.faq-plus::after{left:3px;top:9px;width:14px;height:2px;}
.faq-item[open] .faq-plus{transform:rotate(45deg);}
.faq-item[open] summary{color:var(--pine);}
.faq-body{
  padding:0 40px 22px 0;font-size:15px;line-height:1.9;color:var(--ink-2);
  animation:fadeIn .22s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

/* ---------- 结尾 CTA ---------- */
.cta-section{background:var(--pine);color:var(--bone);position:relative;overflow:hidden;}
.cta-section::before{
  content:"登";position:absolute;right:-40px;bottom:-90px;
  font-family:var(--font-serif);font-size:340px;line-height:1;
  color:rgba(245,242,234,.08);pointer-events:none;user-select:none;
}
.cta-inner{
  position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;
  gap:48px;align-items:center;padding:96px 0;
}
.cta-inner h2{
  font-family:var(--font-serif);font-size:clamp(28px,3.4vw,44px);line-height:1.22;
  letter-spacing:-.02em;font-weight:700;color:var(--bone);
}
.cta-inner p{margin-top:18px;font-size:15px;line-height:1.9;color:rgba(245,242,234,.76);max-width:30em;}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end;}
.cta-section :focus-visible{outline-color:var(--lime);}

/* ---------- 页脚 ---------- */
.footer{background:var(--ink);color:var(--bone);padding:72px 0 0;}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;
  padding-bottom:48px;border-bottom:1px solid rgba(245,242,234,.14);
}
.footer-brand .brand{margin-bottom:18px;}
.footer-brand .brand-mark{background:var(--lime);}
.footer-brand .brand-mark i{background:var(--pine);}
.footer-brand .brand-text{color:var(--bone);}
.footer-brand p{font-size:13.5px;line-height:1.9;color:rgba(245,242,234,.66);max-width:24em;}
.footer-compliance{margin-top:12px;font-size:12px;color:rgba(245,242,234,.46);}
.footer-col h3{
  font-size:12px;letter-spacing:.16em;color:rgba(245,242,234,.52);
  margin-bottom:16px;font-weight:500;
}
.footer-col a{
  display:block;font-size:13.5px;color:rgba(245,242,234,.8);padding:6px 0;
  width:fit-content;border-bottom:1px solid transparent;transition:border-color .2s,color .2s;
}
.footer-col a:hover{border-bottom-color:rgba(245,242,234,.6);color:#fff;}
.footer-col p{font-size:12.5px;line-height:1.9;color:rgba(245,242,234,.5);margin-top:8px;max-width:22em;}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;
  padding:20px 0 26px;font-size:12px;color:rgba(245,242,234,.5);
}
.footer-tech{font-family:var(--font-num);letter-spacing:.04em;}

/* ---------- 浮动 CTA ---------- */
.float-cta{
  position:fixed;right:24px;bottom:24px;z-index:75;
  display:inline-flex;align-items:center;gap:8px;
  height:48px;padding:0 20px;border-radius:999px;
  background:var(--pine);color:var(--bone);
  font-size:13.5px;font-weight:600;
  box-shadow:0 18px 40px -22px rgba(17,21,18,.7);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease,background .2s ease;
}
.float-cta svg{width:16px;height:16px;}
.float-cta.is-visible{opacity:1;pointer-events:auto;transform:none;}
.float-cta:hover{background:var(--pine-deep);}

/* ---------- 移动底部 Tab ---------- */
.tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(245,242,234,.98);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  position:relative;height:64px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  font-size:10.5px;color:var(--ink-2);letter-spacing:.02em;
  transition:color .2s ease;
}
.tab svg{width:20px;height:20px;stroke-width:1.5;transition:fill .2s ease,stroke .2s ease;}
.tab.active{color:var(--pine);font-weight:600;}
.tab.active svg{stroke:var(--pine);fill:rgba(201,226,101,.85);}
.tab.active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2px;background:var(--pine);border-radius:0 0 2px 2px;
}

/* ---------- 动效 ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease;}
.reveal.is-in{opacity:1;transform:none;}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  :root{--section-gap:88px;}
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .hero-figure{order:-1;}
  .page-hero h1{max-width:none;}
  .steps-grid{grid-template-columns:1fr;gap:32px;}
  .steps-index{position:static;}
  .index-link{padding:9px 0;}
  .check-grid{grid-template-columns:1fr;gap:36px;}
  .faq-grid{grid-template-columns:1fr;gap:28px;}
  .faq-side{position:static;}
  .cta-inner{grid-template-columns:1fr;gap:32px;padding:72px 0;}
  .cta-actions{justify-content:flex-start;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .section-head{grid-template-columns:auto 1fr;}
  .section-note{grid-column:1 / -1;max-width:none;padding-bottom:0;}
}
@media (max-width:767px){
  .nav-links{display:none;}
  .header-cta{display:none;}
  .header-icon-cta{display:inline-flex;}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);}
  body{padding-bottom:88px;}
  .page-main{padding-top:var(--header-h);}
  .page-hero{padding:10px 0 64px;}
  .section{padding:72px 0;}
  .entry-grid{grid-template-columns:1fr;}
  .entry-card{padding:26px;}
  .float-cta{right:16px;bottom:calc(64px + env(safe-area-inset-bottom) + 14px);height:46px;padding:0 18px;font-size:13px;}
  .footer{padding-top:56px;}
  .footer-bottom{font-size:11.5px;}
  .step{padding-left:40px;}
  .step h3{font-size:19px;}
  .faq-body{padding-right:0;}
  .cta-section::before{font-size:220px;right:-30px;bottom:-60px;}
}
@media (max-width:520px){
  .shell{padding:0 20px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;}
  .footer-grid{grid-template-columns:1fr;}
  .mini-facts{font-size:11.5px;}
  .mini-facts span+span::before{margin:0 8px;}
  .cta-actions{flex-direction:column;align-items:stretch;}
  .cta-actions .btn{width:100%;}
  .figure-tag{left:14px;bottom:14px;font-size:10.5px;padding:5px 10px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
  .hero-figure:hover img,.check-figure:hover img{transform:none;}
}

/* roulang page: category2 */
:root{
  --pine:#1E3B32;
  --pine-deep:#162C25;
  --moss:#3F6B58;
  --bone:#F5F2EA;
  --bone-2:#EBE6DA;
  --ink:#111512;
  --muted:#5E665F;
  --accent:#C9E265;
  --line:rgba(17,21,18,.12);
  --line-strong:rgba(17,21,18,.24);
  --radius:6px;
  --radius-img:10px;
  --shadow-hero:0 24px 60px -40px rgba(17,21,18,.55);
  --font-serif:"Songti SC","Noto Serif SC","Source Han Serif SC",serif;
  --font-sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  --container:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background-color:var(--bone);
  background-image:repeating-linear-gradient(90deg,rgba(17,21,18,.022) 0 1px,transparent 1px 120px);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
::selection{background:var(--accent);color:var(--pine)}

.shell{max-width:var(--container);margin:0 auto;padding:0 24px}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(245,242,234,0);
  border-bottom:1px solid transparent;
  transition:background-color .3s ease,border-color .3s ease;
}
.site-header.is-scrolled{
  background:rgba(245,242,234,.97);
  border-bottom:1px solid var(--line);
}
.header-inner{
  height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand-mark{position:relative;width:22px;height:22px;display:inline-block;flex:none}
.brand-mark i{position:absolute;width:10px;height:10px;border-radius:2px;background:var(--pine)}
.brand-mark i:first-child{left:0;top:0}
.brand-mark i:last-child{right:0;bottom:0;background:var(--accent)}
.brand-text{font-family:var(--font-serif);font-size:18px;font-weight:600;letter-spacing:.02em;color:var(--ink)}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{
  position:relative;padding:8px 12px;font-size:15px;color:var(--muted);
  transition:color .2s ease;
}
.nav-link::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;
  background:var(--moss);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.nav-link:hover{color:var(--ink)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link.active{color:var(--ink);font-weight:600}
.nav-link.active::after{transform:scaleX(1);background:var(--accent)}

.header-cta-mobile{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--pine)}
.header-cta-mobile svg{width:19px;height:19px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 24px;border-radius:var(--radius);
  border:1px solid transparent;font-size:15px;font-weight:600;
  cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn svg{width:16px;height:16px;transition:transform .2s ease}
.btn:active{transform:scale(.99)}
.btn-primary{background:var(--pine);color:var(--bone)}
.btn-primary:hover{background:var(--pine-deep);transform:translateY(-1px)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--pine);background:var(--bone-2)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-accent{background:var(--accent);color:var(--pine)}
.btn-accent:hover{background:#d6ec86;transform:translateY(-1px)}
.btn-outline-light{border-color:rgba(245,242,234,.4);color:var(--bone);background:transparent}
.btn-outline-light:hover{border-color:var(--bone);background:rgba(245,242,234,.08)}

/* ---------- Hero ---------- */
.hero{padding:64px 0 0;overflow:hidden}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.18em;color:var(--muted);
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(201,226,101,.22);flex:none;
}
.hero-title{
  font-size:clamp(38px,5.4vw,58px);
  line-height:1.06;
  margin-top:22px;
  max-width:16em;
}
.hero-sub{
  margin-top:22px;max-width:56ch;
  font-size:17px;line-height:1.8;color:var(--muted);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.micro-proof{
  display:flex;flex-wrap:wrap;gap:12px;row-gap:6px;
  margin-top:34px;font-size:12px;letter-spacing:.06em;color:var(--muted);
}
.micro-proof span:not(:first-child)::before{
  content:"/";margin-right:12px;color:rgba(17,21,18,.28);
}
.hero-media{
  position:relative;margin-top:52px;
  border:1px solid var(--line);border-radius:var(--radius-img);
  overflow:hidden;background:var(--bone-2);
  aspect-ratio:21/9;
  box-shadow:var(--shadow-hero);
}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:saturate(.94)}
.hero-badge{
  position:absolute;left:16px;top:16px;
  background:rgba(245,242,234,.94);
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 12px;font-size:11px;letter-spacing:.14em;color:var(--pine);
}

/* ---------- Sections ---------- */
.section{padding:112px 0}
.section-alt{background:var(--bone-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  margin-bottom:52px;max-width:860px;
}
.section-index{
  font-family:var(--font-serif);font-size:14px;letter-spacing:.16em;
  color:var(--moss);padding-top:10px;flex:none;
}
.section-head h2{font-size:clamp(28px,3.6vw,40px);line-height:1.18}
.section-desc{margin-top:14px;color:var(--muted);font-size:16px;line-height:1.8;max-width:52ch}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.bento-card{
  grid-column:span 4;
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.28);
  padding:30px 28px 32px;
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .25s ease,transform .25s ease,background-color .25s ease;
}
.bento-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.card-num{
  font-family:var(--font-serif);font-size:13px;letter-spacing:.16em;color:var(--moss);
}
.bento-card h3{font-size:22px;line-height:1.3}
.bento-card p{font-size:15px;line-height:1.85;color:var(--muted)}
.bento-card.is-dark{
  background:var(--pine);border-color:var(--pine);color:var(--bone);
}
.bento-card.is-dark .card-num{color:var(--accent)}
.bento-card.is-dark h3{color:var(--bone)}
.bento-card.is-dark p{color:rgba(245,242,234,.76)}
.bento-card.is-dark:hover{border-color:var(--pine-deep)}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}

/* ---------- Preview ---------- */
.preview-frame{
  border:1px solid var(--line);border-radius:var(--radius-img);
  overflow:hidden;background:rgba(255,255,255,.35);
}
.frame-bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;border-bottom:1px solid var(--line);
  background:rgba(245,242,234,.7);
}
.frame-bar span{width:8px;height:8px;border-radius:50%;background:rgba(17,21,18,.18)}
.frame-bar em{
  margin-left:10px;font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--muted);
}
.preview-frame img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform .6s ease;
}
.preview-frame:hover img{transform:scale(1.03)}
.preview-frame figcaption{
  padding:14px 16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);letter-spacing:.02em;
}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;
}
.stat{
  border-top:2px solid var(--pine);padding-top:20px;
}
.stat-num{
  font-family:var(--font-serif);font-size:clamp(36px,4vw,52px);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--pine);
  letter-spacing:-.03em;
}
.stat-unit{font-size:15px;color:var(--muted);margin-left:6px;font-family:var(--font-sans)}
.stat-label{
  display:block;margin-top:12px;font-size:12px;letter-spacing:.16em;color:var(--muted);
}
.stat p{margin-top:8px;font-size:14px;line-height:1.8;color:var(--muted)}

/* ---------- Matrix ---------- */
.matrix{width:100%;border-collapse:collapse;font-size:15px}
.matrix th{
  text-align:left;font-family:var(--font-sans);font-size:12px;
  letter-spacing:.14em;color:var(--muted);font-weight:600;
  padding:0 16px 14px;border-bottom:1px solid var(--line-strong);
}
.matrix td{
  padding:22px 16px;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--muted);line-height:1.8;
}
.matrix td:first-child{
  font-weight:600;color:var(--ink);width:24%;
  font-family:var(--font-serif);font-size:17px;
}
.matrix tbody tr{transition:background-color .2s ease}
.matrix tbody tr:hover{background:rgba(30,59,50,.035)}

/* ---------- Path ---------- */
.path-wrap{display:grid;grid-template-columns:1fr;gap:0}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.tag{
  display:inline-flex;align-items:center;height:30px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:999px;
  font-size:13px;color:var(--pine);background:rgba(255,255,255,.35);
}
.step-bar{
  display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:start;
  padding:26px 0;border-top:1px solid var(--line);
}
.step-bar:last-child{border-bottom:1px solid var(--line)}
.step-idx{
  font-family:var(--font-serif);font-size:15px;color:var(--moss);
  letter-spacing:.1em;padding-top:3px;min-width:36px;
}
.step-bar h3{font-size:20px;line-height:1.4}
.step-bar p{margin-top:8px;font-size:15px;line-height:1.85;color:var(--muted);max-width:60ch}
.step-arrow{color:var(--moss);padding-top:6px;transition:transform .2s ease}
.step-bar:hover .step-arrow{transform:translateX(4px)}

/* ---------- FAQ ---------- */
.faq-layout{display:grid;grid-template-columns:4fr 8fr;gap:56px;align-items:start}
.faq-aside{position:sticky;top:104px}
.faq-aside h2{font-size:clamp(28px,3.4vw,38px);line-height:1.18}
.faq-aside p{margin-top:16px;color:var(--muted);font-size:15px;line-height:1.85;max-width:32ch}
.faq-aside a{
  display:inline-flex;align-items:center;gap:6px;margin-top:22px;
  font-size:14px;font-weight:600;color:var(--pine);
  border-bottom:1px solid var(--line-strong);padding-bottom:3px;
  transition:border-color .2s ease,color .2s ease;
}
.faq-aside a:hover{border-color:var(--accent);color:var(--moss)}

.faq{display:block}
.faq details{border-bottom:1px solid var(--line);transition:background-color .22s ease}
.faq details:first-child{border-top:1px solid var(--line)}
.faq details[open]{background:rgba(235,230,218,.55)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:64px;padding:18px 8px;cursor:pointer;list-style:none;
  font-size:17px;font-weight:600;line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none}
.plus{position:relative;width:16px;height:16px;flex:none;transition:transform .22s ease}
.plus::before,.plus::after{
  content:"";position:absolute;background:var(--pine);border-radius:1px;
}
.plus::before{left:0;top:7px;width:16px;height:1.6px}
.plus::after{left:7px;top:0;width:1.6px;height:16px}
.faq details[open] .plus{transform:rotate(45deg)}
.faq-body{
  padding:0 8px 24px;font-size:15px;line-height:1.9;color:var(--muted);max-width:70ch;
}

/* ---------- CTA ---------- */
.cta{
  position:relative;overflow:hidden;background:var(--pine);color:var(--bone);
  padding:96px 0;
}
.cta::after{
  content:"登";position:absolute;right:1%;bottom:-18%;
  font-family:var(--font-serif);font-size:clamp(180px,26vw,340px);
  line-height:1;color:rgba(245,242,234,.07);pointer-events:none;
}
.cta-inner{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:40px;
}
.cta-copy h2{font-size:clamp(28px,4vw,44px);line-height:1.22;color:var(--bone)}
.cta-copy p{margin-top:18px;font-size:16px;line-height:1.8;color:rgba(245,242,234,.72);max-width:46ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Footer ---------- */
.footer{background:#111512;color:var(--bone)}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;
  padding:72px 0 48px;
}
.footer .brand-text{color:var(--bone)}
.footer .brand-mark i:first-child{background:var(--bone)}
.footer .brand-mark i:last-child{background:var(--accent)}
.footer-brand p{
  margin-top:16px;font-size:14px;line-height:1.85;color:rgba(245,242,234,.66);max-width:34ch;
}
.footer-compliance{
  margin-top:14px !important;font-size:12px !important;
  color:rgba(245,242,234,.44) !important;
}
.footer-col h3{
  font-family:var(--font-sans);font-size:12px;letter-spacing:.16em;
  color:rgba(245,242,234,.5);margin-bottom:16px;font-weight:600;
}
.footer-col a{
  display:block;width:fit-content;padding:6px 0;
  font-size:14px;color:rgba(245,242,234,.82);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .25s ease,color .2s ease;
}
.footer-col a:hover{background-size:100% 1px;color:var(--bone)}
.footer-col p{
  margin-top:12px;font-size:12px;line-height:1.8;color:rgba(245,242,234,.44);max-width:30ch;
}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  padding:20px 0 30px;border-top:1px solid rgba(245,242,234,.14);
  font-size:12px;color:rgba(245,242,234,.48);
}
.footer-tech{letter-spacing:.04em}

/* ---------- Float CTA ---------- */
.float-cta{
  position:fixed;right:24px;bottom:24px;z-index:50;
  display:inline-flex;align-items:center;gap:10px;
  height:48px;padding:0 20px;border-radius:999px;
  background:var(--pine);color:var(--bone);
  font-size:14px;font-weight:600;
  box-shadow:0 18px 40px -24px rgba(17,21,18,.8);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,background-color .2s ease;
}
.float-cta.is-visible{opacity:1;transform:none;pointer-events:auto}
.float-cta:hover{background:var(--pine-deep)}
.float-cta svg{width:17px;height:17px}

/* ---------- Tabbar (mobile) ---------- */
.tabbar{display:none}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1279px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
}

@media (max-width:1023px){
  .nav-links{display:none}
  .header-cta{display:none}
  .header-cta-mobile{display:inline-flex}
  body{padding-bottom:88px}

  .bento-card,.span-3,.span-4,.span-5,.span-6{grid-column:span 12}
  .bento{gap:16px}
  .section{padding:72px 0}
  .hero{padding:40px 0 0}
  .hero-media{margin-top:36px;aspect-ratio:16/10}
  .section-head{margin-bottom:36px}
  .faq-layout{grid-template-columns:1fr;gap:28px}
  .faq-aside{position:static}
  .faq-aside p{max-width:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;padding:56px 0 36px}
  .footer-brand{grid-column:1 / -1}
  .cta{padding:72px 0}
  .cta-inner{flex-direction:column;align-items:flex-start}

  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    height:64px;padding-bottom:env(safe-area-inset-bottom);
    background:rgba(245,242,234,.98);
    border-top:1px solid var(--line);
  }
  .tab{
    position:relative;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;
    font-size:10.5px;letter-spacing:.02em;color:var(--muted);
    transition:color .2s ease;
  }
  .tab svg{width:20px;height:20px;stroke-width:1.5;fill:none;stroke:currentColor}
  .tab.active{color:var(--pine);font-weight:600}
  .tab.active::before{
    content:"";position:absolute;top:0;left:24%;right:24%;height:2px;
    background:var(--accent);
  }
  .float-cta{display:none}
}

@media (max-width:767px){
  .shell{padding:0 20px}
  .section{padding:64px 0}
  .section-head{grid-template-columns:1fr;gap:10px}
  .section-index{padding-top:0}
  .hero-title{font-size:clamp(30px,8vw,38px);max-width:none}
  .hero-sub{font-size:15.5px}
  .hero-actions .btn{flex:1 1 auto;min-width:150px}
  .hero-media{aspect-ratio:4/3}
  .bento-card{padding:24px 20px 26px}
  .bento-card h3{font-size:20px}

  .stats{grid-template-columns:1fr;gap:28px}
  .stat-num{font-size:40px}

  .matrix thead{display:none}
  .matrix,.matrix tbody,.matrix tr,.matrix td{display:block;width:100%}
  .matrix tr{padding:18px 0;border-bottom:1px solid var(--line)}
  .matrix td{border:none;padding:4px 0}
  .matrix td:first-child{width:auto;font-size:18px;margin-bottom:6px}
  .matrix td[data-label]::before{
    content:attr(data-label);display:block;
    font-size:11px;letter-spacing:.14em;color:rgba(94,102,95,.8);margin-bottom:2px;
  }

  .step-bar{grid-template-columns:auto 1fr;gap:14px;padding:22px 0}
  .step-arrow{display:none}

  .faq summary{font-size:16px;padding:16px 6px}
  .faq-body{padding:0 6px 20px;font-size:14.5px}

  .cta{padding:60px 0}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1 1 100%}

  .footer-grid{grid-template-columns:1fr;gap:28px;padding:48px 0 32px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;padding:18px 0 26px}
}

@media (max-width:520px){
  .hero-actions{gap:10px}
  .hero-actions .btn{width:100%}
  .micro-proof{font-size:11.5px;gap:8px}
  .micro-proof span:not(:first-child)::before{margin-right:8px}
  .tag{font-size:12px;height:28px;padding:0 12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .preview-frame img,.btn,.bento-card,.step-arrow,.nav-link::after{transition:none}
  .preview-frame:hover img{transform:none}
  .bento-card:hover{transform:none}
}

/* roulang page: category3 */
:root {
      --pine: #1E3B32;
      --pine-deep: #152B24;
      --moss: #3F6B58;
      --bone: #F5F2EA;
      --bone-2: #EBE6DA;
      --ink: #111512;
      --muted: #5E665F;
      --accent: #C9E265;
      --line: rgba(17, 21, 18, .12);
      --line-strong: rgba(17, 21, 18, .22);
      --danger: #9A4A3D;
      --radius: 6px;
      --radius-img: 10px;
      --shadow: 0 24px 60px -40px rgba(17, 21, 18, .38);
      --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
      --sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
      --ease: cubic-bezier(.22, .61, .36, 1);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--bone);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body,
    button,
    input,
    textarea,
    select {
      font-family: var(--sans);
    }

    h1, h2, h3, h4, p, ul, ol, figure {
      margin: 0;
    }

    ul, ol {
      padding: 0;
      list-style: none;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      display: block;
      max-width: 100%;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    ::selection {
      background: var(--accent);
      color: var(--ink);
    }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    .shell {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
      padding-left: 24px;
      padding-right: 24px;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 100;
      padding: 10px 14px;
      background: var(--pine);
      color: var(--bone);
      border-radius: var(--radius);
      transform: translateY(-160%);
      transition: transform .2s var(--ease);
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    /* Header */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background .25s var(--ease), border-color .25s var(--ease);
    }

    .site-header.is-scrolled {
      background: rgba(245, 242, 234, .97);
      border-bottom-color: var(--line);
    }

    .header-inner {
      height: 72px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      letter-spacing: .01em;
      white-space: nowrap;
    }

    .brand-mark {
      position: relative;
      width: 26px;
      height: 26px;
      flex: 0 0 auto;
      display: inline-block;
      border: 1.5px solid var(--pine);
      border-radius: 4px;
    }

    .brand-mark i:first-child {
      position: absolute;
      inset: 5px;
      display: block;
      background: var(--pine);
      border-radius: 2px;
    }

    .brand-mark i:last-child {
      position: absolute;
      right: -3px;
      bottom: -3px;
      width: 7px;
      height: 7px;
      display: block;
      background: var(--accent);
      border: 1.5px solid var(--bone);
      border-radius: 50%;
    }

    .brand-text {
      font-size: 16px;
      line-height: 1.2;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
    }

    .nav-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      height: 72px;
      padding: 0 12px;
      font-size: 14px;
      color: var(--muted);
      transition: color .2s var(--ease);
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 16px;
      height: 2px;
      background: var(--pine);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .2s var(--ease);
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--ink);
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      transform: scaleX(1);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: 12px;
    }

    .mobile-cta {
      display: none;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      color: var(--pine);
      background: transparent;
      transition: background .2s var(--ease), border-color .2s var(--ease);
    }

    .mobile-cta:hover {
      background: var(--bone-2);
      border-color: var(--pine);
    }

    .mobile-cta svg {
      width: 18px;
      height: 18px;
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 48px;
      padding: 0 24px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      font-size: 15px;
      line-height: 1;
      white-space: nowrap;
      transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
    }

    .btn svg {
      width: 16px;
      height: 16px;
      transition: transform .2s var(--ease);
    }

    .btn:hover svg {
      transform: translateX(4px);
    }

    .btn:active {
      transform: scale(.99);
    }

    .btn-primary {
      background: var(--pine);
      color: var(--bone);
      border-color: var(--pine);
    }

    .btn-primary:hover {
      background: var(--pine-deep);
      border-color: var(--pine-deep);
      transform: translateY(-1px);
    }

    .btn-ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--line-strong);
    }

    .btn-ghost:hover {
      border-color: var(--pine);
      background: rgba(235, 230, 218, .55);
      transform: translateY(-1px);
    }

    .btn-sm {
      height: 40px;
      padding: 0 18px;
      font-size: 13px;
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: var(--pine);
      border-bottom: 1px solid var(--line-strong);
      transition: border-color .2s var(--ease), color .2s var(--ease);
    }

    .text-link:hover {
      color: var(--moss);
      border-bottom-color: var(--pine);
    }

    .text-link svg {
      width: 14px;
      height: 14px;
    }

    /* Hero */
    .cat-hero {
      position: relative;
      padding: 132px 0 72px;
      overflow: hidden;
      background: var(--bone);
    }

    .cat-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(17, 21, 18, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 21, 18, .035) 1px, transparent 1px);
      background-size: 48px 48px;
      -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 86%);
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 86%);
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 24px;
      align-items: center;
    }

    .hero-copy {
      grid-column: span 7;
      min-width: 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      font-size: 12px;
      letter-spacing: .18em;
      color: var(--muted);
    }

    .eyebrow::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(201, 226, 101, .18);
    }

    .hero-copy h1 {
      max-width: 780px;
      font-family: var(--serif);
      font-size: clamp(38px, 5.6vw, 62px);
      line-height: 1.08;
      letter-spacing: -.02em;
      font-weight: 700;
    }

    .hero-lead {
      max-width: 620px;
      margin-top: 22px;
      font-size: 17px;
      line-height: 1.9;
      color: var(--muted);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-top: 30px;
    }

    .micro-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 26px;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .02em;
    }

    .micro-proof span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .micro-proof span:not(:last-child)::after {
      content: "/";
      color: var(--line-strong);
    }

    .hero-visual {
      grid-column: span 5;
      position: relative;
      min-width: 0;
    }

    .hero-frame {
      position: relative;
      aspect-ratio: 3 / 2;
      overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-img);
      background: var(--bone-2);
      box-shadow: var(--shadow);
    }

    .hero-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: saturate(.88);
      transition: transform .6s var(--ease);
    }

    .hero-frame:hover img {
      transform: scale(1.03);
    }

    .hero-tag {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 4px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(245, 242, 234, .94);
      color: var(--pine);
      font-size: 11px;
      letter-spacing: .08em;
    }

    .hero-data {
      position: absolute;
      left: 16px;
      bottom: 16px;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(245, 242, 234, .95);
    }

    .hero-data-item {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }

    .hero-data strong {
      font-family: var(--serif);
      font-size: 26px;
      line-height: 1;
      letter-spacing: -.03em;
    }

    .hero-data span {
      font-size: 11px;
      color: var(--muted);
    }

    /* Sections */
    .section {
      padding: 112px 0;
      scroll-margin-top: 96px;
    }

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 40px;
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      font-size: 12px;
      letter-spacing: .18em;
      color: var(--muted);
    }

    .kicker::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }

    .h2 {
      font-family: var(--serif);
      font-size: clamp(28px, 4vw, 40px);
      line-height: 1.2;
      letter-spacing: -.02em;
      font-weight: 700;
    }

    .section-note {
      max-width: 380px;
      font-size: 14px;
      line-height: 1.85;
      color: var(--muted);
    }

    /* Document layout */
    .doc-section {
      padding-top: 80px;
      padding-bottom: 80px;
    }

    .doc-layout {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 24px;
      align-items: start;
    }

    .doc-nav {
      grid-column: span 3;
      position: sticky;
      top: 96px;
      align-self: start;
      padding-left: 16px;
      border-left: 1px solid var(--line);
    }

    .doc-nav-title {
      margin-bottom: 12px;
      font-size: 12px;
      letter-spacing: .18em;
      color: var(--muted);
    }

    .doc-nav a {
      display: flex;
      align-items: baseline;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
      transition: color .2s var(--ease), padding-left .2s var(--ease);
    }

    .doc-nav a span {
      flex: 0 0 auto;
      font-family: var(--serif);
      font-size: 12px;
      color: var(--moss);
    }

    .doc-nav a:hover,
    .doc-nav a.active {
      padding-left: 4px;
      color: var(--pine);
    }

    .doc-nav a.active span {
      color: var(--pine);
    }

    .doc-body {
      grid-column: span 9;
      min-width: 0;
    }

    .chapter {
      padding: 38px 0 42px;
      border-top: 1px solid var(--line);
      scroll-margin-top: 100px;
    }

    .chapter:first-child {
      padding-top: 0;
      border-top: 0;
    }

    .chapter-head {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 16px;
    }

    .chapter-num {
      flex: 0 0 auto;
      padding-top: 2px;
      font-family: var(--serif);
      font-size: 38px;
      line-height: 1;
      letter-spacing: -.03em;
      color: var(--moss);
    }

    .chapter h2 {
      font-family: var(--serif);
      font-size: clamp(25px, 3vw, 32px);
      line-height: 1.25;
      letter-spacing: -.02em;
      font-weight: 700;
    }

    .chapter p {
      max-width: 720px;
      margin-bottom: 14px;
      font-size: 16px;
      line-height: 1.95;
      color: #2B322C;
    }

    .chapter p:last-child {
      margin-bottom: 0;
    }

    .callout {
      max-width: 720px;
      margin-top: 20px;
      padding: 14px 16px;
      border-left: 3px solid var(--accent);
      border-radius: 0 var(--radius) var(--radius) 0;
      background: rgba(235, 230, 218, .55);
      color: var(--muted);
      font-size: 14px;
      line-height: 1.85;
    }

    .callout strong {
      color: var(--ink);
    }

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: rgba(255, 255, 255, .3);
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .check-list {
      display: grid;
      gap: 12px;
      max-width: 720px;
      margin-top: 18px;
    }

    .check-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 15px;
      line-height: 1.8;
      color: #2B322C;
    }

    .check-list svg {
      flex: 0 0 auto;
      margin-top: 4px;
      width: 16px;
      height: 16px;
      color: var(--moss);
    }

    /* Evidence */
    .evidence-section {
      padding-top: 72px;
      padding-bottom: 96px;
      scroll-margin-top: 96px;
    }

    .evidence-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 16px;
    }

    .evidence-card {
      min-height: 180px;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .38);
      transition: transform .25s var(--ease), border-color .25s var(--ease);
    }

    .evidence-card:hover {
      transform: translateY(-2px);
      border-color: var(--line-strong);
    }

    .evidence-card.lg {
      grid-column: span 7;
    }

    .evidence-card.sm {
      grid-column: span 5;
    }

    .evidence-card.wide {
      grid-column: span 12;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 24px;
      align-items: center;
      min-height: 0;
      padding: 0;
      overflow: hidden;
    }

    .evidence-num {
      display: inline-block;
      margin-bottom: 14px;
      font-family: var(--serif);
      font-size: 13px;
      letter-spacing: .08em;
      color: var(--moss);
    }

    .evidence-card h3 {
      margin-bottom: 10px;
      font-family: var(--serif);
      font-size: 22px;
      line-height: 1.35;
      letter-spacing: -.01em;
    }

    .evidence-card p {
      font-size: 14px;
      line-height: 1.85;
      color: var(--muted);
    }

    .evidence-body {
      padding: 26px;
    }

    .evidence-body .pill-row {
      margin-top: 14px;
    }

    .media-figure {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 260px;
      overflow: hidden;
      background: var(--bone-2);
    }

    .media-figure img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s var(--ease);
    }

    .media-figure:hover img {
      transform: scale(1.03);
    }

    /* FAQ */
    .faq-section {
      padding: 96px 0;
      background: var(--bone-2);
      scroll-margin-top: 96px;
    }

    .faq-layout {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 24px;
      align-items: start;
    }

    .faq-side {
      grid-column: span 4;
      position: sticky;
      top: 96px;
      align-self: start;
    }

    .faq-side .h2 {
      margin-bottom: 14px;
    }

    .faq-side p {
      max-width: 320px;
      font-size: 14px;
      line-height: 1.85;
      color: var(--muted);
    }

    .faq-side .text-link {
      margin-top: 20px;
    }

    .faq-main {
      grid-column: span 8;
      min-width: 0;
      border-top: 1px solid var(--line-strong);
    }

    .faq-item {
      border-bottom: 1px solid var(--line-strong);
    }

    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 20px 0;
      list-style: none;
      cursor: pointer;
      font-size: 16px;
      line-height: 1.6;
      color: var(--ink);
      transition: color .2s var(--ease);
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::marker {
      content: "";
    }

    .faq-item summary:hover,
    .faq-item[open] summary {
      color: var(--pine);
    }

    .plus {
      position: relative;
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      transition: transform .22s var(--ease);
    }

    .plus::before,
    .plus::after {
      content: "";
      position: absolute;
      background: var(--pine);
      border-radius: 1px;
      transition: background .2s var(--ease);
    }

    .plus::before {
      left: 9px;
      top: 3px;
      width: 2px;
      height: 14px;
    }

    .plus::after {
      left: 3px;
      top: 9px;
      width: 14px;
      height: 2px;
    }

    .faq-item[open] .plus {
      transform: rotate(45deg);
    }

    .faq-item[open] .plus::before,
    .faq-item[open] .plus::after {
      background: var(--moss);
    }

    .faq-answer {
      max-width: 720px;
      padding: 0 0 20px;
      font-size: 15px;
      line-height: 1.9;
      color: var(--muted);
    }

    /* Consult */
    .consult-section {
      padding: 104px 0;
      scroll-margin-top: 96px;
    }

    .consult-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 24px;
      align-items: start;
    }

    .consult-copy {
      grid-column: span 5;
      min-width: 0;
    }

    .consult-copy .h2 {
      margin-bottom: 16px;
    }

    .consult-copy > p {
      max-width: 420px;
      font-size: 15px;
      line-height: 1.9;
      color: var(--muted);
    }

    .consult-points {
      display: grid;
      gap: 10px;
      margin-top: 22px;
    }

    .consult-points li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14px;
      line-height: 1.75;
      color: var(--muted);
    }

    .consult-points svg {
      flex: 0 0 auto;
      width: 15px;
      height: 15px;
      margin-top: 4px;
      color: var(--moss);
    }

    .consult-form {
      grid-column: span 7;
      min-width: 0;
    }

    .consult-card {
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .45);
    }

    .form-field {
      margin-bottom: 20px;
    }

    .form-field:last-of-type {
      margin-bottom: 22px;
    }

    .form-field label {
      display: block;
      margin-bottom: 6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
    }

    .form-field input,
    .form-field textarea {
      display: block;
      width: 100%;
      border: 0;
      border-bottom: 1px solid var(--line-strong);
      border-radius: 0;
      background: transparent;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.7;
      transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
    }

    .form-field input {
      height: 48px;
      padding: 10px 0;
    }

    .form-field textarea {
      min-height: 112px;
      padding: 10px 0;
      resize: vertical;
    }

    .form-field input:focus,
    .form-field textarea:focus {
      outline: 2px solid rgba(201, 226, 101, .9);
      outline-offset: 3px;
      border-bottom-color: var(--pine);
      box-shadow: 0 2px 0 0 var(--accent);
    }

    .helper {
      margin-top: 6px;
      font-size: 12px;
      line-height: 1.7;
      color: var(--muted);
    }

    .field-error {
      display: none;
      margin-top: 6px;
      font-size: 12px;
      line-height: 1.7;
      color: var(--danger);
    }

    .form-field.is-invalid input,
    .form-field.is-invalid textarea {
      border-bottom-color: var(--danger);
    }

    .form-field.is-invalid .field-error {
      display: block;
    }

    .form-note {
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
      font-size: 12px;
      line-height: 1.8;
      color: var(--muted);
    }

    .btn-submit {
      min-width: 148px;
    }

    /* Final CTA */
    .final-cta {
      position: relative;
      overflow: hidden;
      padding: 80px 0;
      background: var(--pine);
      color: var(--bone);
    }

    .final-cta::before {
      content: "安";
      position: absolute;
      right: 4%;
      top: -10%;
      font-family: var(--serif);
      font-size: 340px;
      line-height: 1;
      color: rgba(245, 242, 234, .06);
      pointer-events: none;
    }

    .cta-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 24px;
      align-items: center;
    }

    .cta-copy {
      grid-column: span 7;
      min-width: 0;
    }

    .cta-copy h2 {
      font-family: var(--serif);
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.2;
      letter-spacing: -.02em;
      color: var(--bone);
    }

    .cta-copy p {
      max-width: 560px;
      margin-top: 14px;
      font-size: 15px;
      line-height: 1.85;
      color: rgba(245, 242, 234, .72);
    }

    .cta-actions {
      grid-column: span 5;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 12px;
    }

    .btn-light {
      background: var(--bone);
      color: var(--pine);
      border-color: var(--bone);
    }

    .btn-light:hover {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--ink);
      transform: translateY(-1px);
    }

    .btn-outline-light {
      background: transparent;
      color: var(--bone);
      border-color: rgba(245, 242, 234, .34);
    }

    .btn-outline-light:hover {
      border-color: var(--bone);
      background: rgba(245, 242, 234, .08);
      transform: translateY(-1px);
    }

    /* Footer */
    .footer {
      padding: 64px 0 0;
      background: var(--ink);
      color: var(--bone);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2.2fr 1fr 1fr 1.5fr;
      gap: 32px;
      padding-bottom: 48px;
    }

    .footer .brand {
      margin-bottom: 16px;
      color: var(--bone);
    }

    .footer .brand-mark {
      border-color: rgba(245, 242, 234, .55);
    }

    .footer .brand-mark i:first-child {
      background: var(--bone);
    }

    .footer .brand-mark i:last-child {
      border-color: var(--ink);
    }

    .footer-brand p {
      max-width: 320px;
      margin-bottom: 10px;
      font-size: 13px;
      line-height: 1.85;
      color: rgba(245, 242, 234, .66);
    }

    .footer-brand .footer-compliance {
      max-width: 340px;
      font-size: 12px;
      color: rgba(245, 242, 234, .46);
    }

    .footer-col h3 {
      margin-bottom: 14px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .18em;
      color: rgba(245, 242, 234, .5);
    }

    .footer-col a,
    .footer-col p {
      display: block;
      width: fit-content;
      margin-bottom: 10px;
      font-size: 13px;
      line-height: 1.75;
      color: rgba(245, 242, 234, .78);
    }

    .footer-col a {
      background-image: linear-gradient(currentColor, currentColor);
      background-size: 0 1px;
      background-repeat: no-repeat;
      background-position: 0 100%;
      transition: background-size .2s var(--ease);
    }

    .footer-col a:hover {
      background-size: 100% 1px;
    }

    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 24px;
      padding: 18px 0 24px;
      border-top: 1px solid rgba(245, 242, 234, .14);
      font-size: 12px;
      line-height: 1.6;
      color: rgba(245, 242, 234, .48);
    }

    .footer-tech {
      margin-left: auto;
    }

    /* Mobile tabs */
    .mobile-tabs {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 60;
      display: none;
      grid-template-columns: repeat(5, 1fr);
      height: calc(64px + env(safe-area-inset-bottom));
      padding-bottom: env(safe-area-inset-bottom);
      background: rgba(245, 242, 234, .98);
      border-top: 1px solid var(--line);
      box-shadow: 0 -8px 30px -24px rgba(17, 21, 18, .3);
    }

    .tab {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      font-size: 10.5px;
      line-height: 1.2;
      color: var(--muted);
    }

    .tab svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
    }

    .tab.active {
      color: var(--pine);
      font-weight: 600;
    }

    .tab.active svg {
      fill: rgba(201, 226, 101, .58);
      stroke: var(--pine);
    }

    .tab.active::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 22px;
      height: 2px;
      background: var(--pine);
      transform: translateX(-50%);
    }

    /* Floating CTA */
    .float-cta {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 55;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      height: 48px;
      padding: 0 18px;
      border-radius: 999px;
      background: var(--pine);
      color: var(--bone);
      font-size: 13px;
      box-shadow: 0 16px 40px -24px rgba(17, 21, 18, .6);
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
      transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s var(--ease);
    }

    .float-cta.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .float-cta:hover {
      background: var(--pine-deep);
    }

    .float-cta svg {
      width: 16px;
      height: 16px;
    }

    /* Reveal motion */
    [data-reveal] {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .5s var(--ease), transform .5s var(--ease);
    }

    [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .nav-link {
        padding: 0 9px;
        font-size: 13px;
      }

      .nav-link::after {
        left: 9px;
        right: 9px;
      }

      .header-actions {
        margin-left: 6px;
      }

      .hero-copy h1 {
        font-size: clamp(38px, 5.2vw, 54px);
      }

      .doc-nav {
        grid-column: span 3;
      }

      .doc-body {
        grid-column: span 9;
      }
    }

    @media (max-width: 900px) {
      body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
      }

      .nav-links {
        display: none;
      }

      .header-cta-desktop {
        display: none;
      }

      .mobile-cta {
        display: inline-flex;
      }

      .header-actions {
        margin-left: auto;
      }

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

      .hero-copy,
      .hero-visual {
        grid-column: auto;
      }

      .hero-copy h1 {
        font-size: clamp(38px, 7.2vw, 52px);
      }

      .hero-visual {
        margin-top: 24px;
      }

      .hero-frame {
        aspect-ratio: 3 / 2;
      }

      .doc-layout,
      .faq-layout,
      .consult-grid {
        grid-template-columns: 1fr;
      }

      .doc-nav,
      .doc-body,
      .faq-side,
      .faq-main,
      .consult-copy,
      .consult-form {
        grid-column: auto;
      }

      .doc-nav,
      .faq-side {
        position: static;
        top: auto;
      }

      .doc-nav {
        margin-bottom: 28px;
        padding-left: 14px;
      }

      .faq-side {
        margin-bottom: 24px;
      }

      .faq-side p {
        max-width: 560px;
      }

      .faq-main {
        border-top: 1px solid var(--line-strong);
      }

      .mobile-tabs {
        display: grid;
      }

      .float-cta {
        left: 16px;
        right: 16px;
        bottom: calc(64px + env(safe-area-inset-bottom) + 10px);
        height: 52px;
        justify-content: center;
        border-radius: var(--radius);
        font-size: 14px;
      }

      .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
      }

      .footer-brand {
        grid-column: 1 / -1;
      }

      .cta-copy,
      .cta-actions {
        grid-column: auto;
      }

      .cta-actions {
        justify-content: flex-start;
      }
    }

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

      .cat-hero {
        padding: 112px 0 56px;
      }

      .section {
        padding: 72px 0;
      }

      .doc-section {
        padding-top: 56px;
        padding-bottom: 56px;
      }

      .evidence-section {
        padding-top: 56px;
        padding-bottom: 72px;
      }

      .faq-section,
      .consult-section {
        padding: 72px 0;
      }

      .section-head {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 30px;
      }

      .section-note {
        max-width: 100%;
      }

      .evidence-card.lg,
      .evidence-card.sm,
      .evidence-card.wide {
        grid-column: 1 / -1;
      }

      .evidence-card.wide {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .media-figure {
        order: -1;
        min-height: 220px;
        border-bottom: 1px solid var(--line);
      }

      .chapter {
        padding: 32px 0 36px;
      }

      .chapter-head {
        gap: 12px;
      }

      .chapter-num {
        font-size: 32px;
      }

      .chapter p {
        font-size: 15.5px;
      }

      .final-cta {
        padding: 64px 0;
      }

      .final-cta::before {
        right: -6%;
        top: 10%;
        font-size: 240px;
      }

      .footer {
        padding-top: 52px;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 24px;
      }

      .footer-brand {
        grid-column: 1 / -1;
      }

      .footer-tech {
        margin-left: 0;
      }

      .footer-bottom {
        gap: 10px 18px;
      }

      .hero-data {
        left: 12px;
        bottom: 12px;
        gap: 12px;
        padding: 10px 12px;
      }

      .hero-data strong {
        font-size: 22px;
      }

      .hero-data span {
        font-size: 10px;
      }
    }

    @media (max-width: 520px) {
      .brand-text {
        font-size: 15px;
      }

      .hero-copy h1 {
        font-size: clamp(34px, 9.4vw, 42px);
      }

      .hero-lead {
        font-size: 15.5px;
      }

      .hero-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .micro-proof {
        flex-direction: column;
        gap: 5px;
      }

      .micro-proof span:not(:last-child)::after {
        display: none;
      }

      .hero-frame {
        aspect-ratio: 4 / 3;
      }

      .hero-tag {
        top: 10px;
        left: 10px;
        font-size: 10px;
      }

      .hero-data {
        right: 10px;
        left: 10px;
        justify-content: space-between;
      }

      .hero-data-item {
        flex-direction: column;
        gap: 2px;
      }

      .consult-card {
        padding: 20px;
      }

      .form-field input {
        height: 46px;
      }

      .btn-submit {
        width: 100%;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .footer-brand {
        grid-column: auto;
      }

      .faq-item summary {
        padding: 18px 0;
        font-size: 15px;
      }

      .chapter-num {
        font-size: 28px;
      }

      .doc-nav a {
        font-size: 12.5px;
      }

      .cta-copy h2 {
        font-size: 28px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }

      [data-reveal] {
        opacity: 1;
        transform: none;
      }

      .hero-frame:hover img,
      .media-figure:hover img {
        transform: none;
      }
    }