:root{
  --bg:#FAFAF9; --surface:#FFFFFF; --ink:#111111; --ink-2:#555555; --ink-3:#8A8A8A;
  --line:#E7E5E4; --accent:#9D0522; --accent-dark:#7C0210; --accent-soft:#F6E6E9;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --s25:2px;--s50:4px;--s75:8px;--s100:12px;--s200:16px;--s300:24px;--s400:32px;--s500:40px;--s600:48px;--s700:64px;--s800:80px;--s900:96px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Geist","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* text styles */
.heading-1{font-size:60px;line-height:60px;font-weight:600;text-wrap:balance}
.heading-2{font-size:48px;line-height:48px;font-weight:600;text-wrap:balance}
.heading-3{font-size:36px;line-height:40px;font-weight:600;text-wrap:balance}
.heading-4{font-size:30px;line-height:36px;font-weight:600;text-wrap:balance}
.heading-6{font-size:20px;line-height:28px;font-weight:600}
.title-2{font-size:18px;line-height:28px;font-weight:500}
.title-3{font-size:16px;line-height:24px;font-weight:500}
.title-4{font-size:14px;line-height:20px;font-weight:500}
.body-2{font-size:16px;line-height:24px;font-weight:500}
.body-3{font-size:16px;line-height:24px;font-weight:400;text-wrap:pretty}
.body-6{font-size:14px;line-height:20px;font-weight:400;text-wrap:pretty}
.button-md{font-size:16px;line-height:24px;font-weight:600}
.button-sm{font-size:14px;line-height:20px;font-weight:600}
.caption-3{font-size:12px;line-height:16px;font-weight:600}
.caption-4{font-size:12px;line-height:16px;font-weight:500}
.caption-5{font-size:12px;line-height:16px;font-weight:400}
.muted{color:var(--ink-2)}
.quiet{color:var(--ink-3)}

.skip{position:absolute;left:var(--s200);top:-64px;background:var(--ink);color:#fff;padding:var(--s75) var(--s100);border-radius:8px;z-index:100;transition:transform 300ms var(--ease)}
.skip:focus{transform:translateY(80px)}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s300)}
section{padding:var(--s900) 0}

/* nav */
.nav{position:fixed;top:var(--s200);left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:var(--s300);padding:var(--s75) var(--s75) var(--s75) var(--s200);background:rgba(255,255,255,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:16px;white-space:nowrap}
.brand{display:flex;align-items:center;gap:var(--s75)}
.nav-links{display:flex;gap:var(--s200)}
.nav-links a{color:var(--ink-2);transition:color 300ms var(--ease)}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}

.btn{display:inline-flex;align-items:center;gap:var(--s75);padding:var(--s75) var(--s100);border-radius:8px;background:var(--accent);color:#fff;border:1px solid var(--accent);cursor:pointer;transition:background-color 300ms var(--ease),transform 300ms var(--ease)}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn:active{transform:scale(.98)}
.btn.lg{padding:var(--s100) var(--s300)}
.btn[aria-disabled="true"]{background:var(--line);border-color:var(--line);color:var(--ink-3);cursor:not-allowed}
.btn[aria-disabled="true"]:active{transform:none}

.ph{background:var(--accent-soft);color:var(--accent);border-radius:4px;padding:0 var(--s50);font-family:"Geist",monospace}

/* hero */
.hero{padding-top:160px;padding-bottom:var(--s800)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s700);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s75);padding:var(--s50) var(--s100);border:1px solid var(--line);border-radius:999px;background:var(--surface);margin-bottom:var(--s300)}
.dot{width:8px;height:8px;border-radius:999px;background:var(--accent)}
.nw{white-space:nowrap}
.hero h1{max-width:680px;background:linear-gradient(90deg,#000 0%,#666 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{max-width:680px;margin-top:var(--s300)}
.hero .cta{display:flex;align-items:center;gap:var(--s300);margin-top:var(--s500);flex-wrap:wrap}
.proof{display:flex;align-items:center;gap:var(--s75);margin-top:var(--s400)}

.stall{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:var(--s200)}
.stall-head{display:flex;justify-content:space-between;align-items:center;padding:var(--s75) var(--s75) var(--s200)}
.stall-item{display:flex;gap:var(--s200);align-items:flex-start;padding:var(--s200);border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.stall-item+.stall-item{margin-top:var(--s75)}
.ico{flex:none;width:40px;height:40px;border-radius:8px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent)}
.tag{display:inline-block;padding:var(--s25) var(--s75);border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:var(--surface)}
.tag.hot{border-color:var(--accent);color:var(--accent)}

/* tagline reveal */
.reveal-text{max-width:760px}
.reveal-text .w{color:rgba(17,17,17,.3);transition:color 500ms var(--ease)}
.reveal-text .w.on{color:var(--ink)}

/* sections */
.sec-head{max-width:680px;margin-bottom:var(--s600)}
.sec-head p{margin-top:var(--s200)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s300)}
.card .tag{align-self:flex-start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s300);display:flex;flex-direction:column;gap:var(--s200);transition:transform 500ms var(--ease)}
.card:hover{transform:translateY(-4px)}
.card .meta{margin-top:auto;padding-top:var(--s200);border-top:1px solid var(--line);display:grid;gap:var(--s75)}
.card .meta div{display:flex;justify-content:space-between;gap:var(--s200)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s300);counter-reset:s}
.step{padding:var(--s300);border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.step .n{font-family:"Geist",monospace;color:var(--accent);margin-bottom:var(--s200)}
.step p{margin-top:var(--s75)}

.tool{display:grid;grid-template-columns:1fr 1fr;gap:var(--s700);align-items:center;background:var(--ink);color:#fff;border-radius:24px;padding:var(--s700)}
.tool .muted{color:#B5B5B5}
.tool ul{list-style:none;display:grid;gap:var(--s200)}
.tool li{display:flex;gap:var(--s100)}
.tool li svg{flex:none;margin-top:var(--s25);color:#F08AA0}
.tool .tag{background:transparent;border-color:#555;color:#ddd}

.faq{max-width:760px}
.faq details{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:var(--s200) var(--s300)}
.faq details+details{margin-top:var(--s100)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s200)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;transition:transform 500ms var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{margin-top:var(--s100)}

.final{text-align:center}
.final .heading-3{max-width:680px;margin:0 auto}
.final p{max-width:560px;margin:var(--s200) auto 0}
.final .cta{margin-top:var(--s500);display:flex;flex-direction:column;align-items:center;gap:var(--s100)}

footer{border-top:1px solid var(--line);padding:var(--s500) 0}
footer .row{display:flex;justify-content:space-between;gap:var(--s300);flex-wrap:wrap}
footer p+p{margin-top:var(--s75)}

/* scroll reveal */
.rise{opacity:0;transform:translateY(32px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{transform:none;transition:opacity 300ms linear}
  .reveal-text .w{color:var(--ink);transition:none}
  .card:hover{transform:none}
  html{scroll-behavior:auto}
}

@media (max-width:900px){
  .hero-grid,.tool{grid-template-columns:1fr}
  .cards,.steps{grid-template-columns:1fr}
  .tool{padding:var(--s400)}
}
@media (max-width:640px){
  .nw{white-space:normal}
  .heading-2{font-size:36px;line-height:40px}
  .nav-links{display:none}
  .nav{gap:var(--s200)}
  .heading-1{font-size:36px;line-height:40px}
  .heading-3{font-size:30px;line-height:36px}
  .hero{padding-top:128px}
  section{padding:var(--s700) 0}
  .wrap{padding:0 var(--s200)}
}

/* detail pages */
.crumb{display:inline-flex;align-items:center;gap:var(--s75);color:var(--ink-2);transition:color 300ms var(--ease)}
.crumb:hover{color:var(--accent)}
.detail-hero{padding-top:144px;padding-bottom:var(--s600)}
.detail-hero h1{max-width:760px;margin-top:var(--s300)}
.detail-hero .lead{max-width:680px;margin-top:var(--s200)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s200);margin-top:var(--s500)}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s200)}
.fact p+p{margin-top:var(--s50)}
.doc{display:grid;grid-template-columns:1fr 280px;gap:var(--s700);align-items:start;padding-bottom:var(--s900)}
.doc section{padding:0}
.doc section+section{margin-top:var(--s600)}
.doc h2{margin-bottom:var(--s200)}
.doc p+p{margin-top:var(--s100)}
.doc ol,.doc ul{padding-left:var(--s300);display:grid;gap:var(--s100)}
.doc li::marker{color:var(--accent);font-weight:600}
.doc code,.code{font-family:"Geist Mono",ui-monospace,Menlo,monospace;font-size:14px;line-height:20px;background:#F1EFEE;border-radius:4px;padding:0 var(--s50)}
.doc .code{display:block;padding:var(--s100) var(--s200);border-radius:8px;white-space:pre-wrap;word-break:break-all;margin:var(--s100) 0 var(--s200)}
.note{border:1px solid var(--accent);background:var(--accent-soft);border-radius:16px;padding:var(--s200) var(--s300)}
.note p+p{margin-top:var(--s75)}
.side{position:sticky;top:104px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s300);display:grid;gap:var(--s200)}
.side .btn{justify-content:center}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--bg);border-color:var(--ink-3)}
.toc{list-style:none;padding:0!important}
.card-link{display:inline-flex;align-items:center;gap:var(--s50);color:var(--accent);margin-top:var(--s75)}
@media (max-width:900px){.doc{grid-template-columns:1fr}.side{position:static}.facts{grid-template-columns:1fr 1fr}}