@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#172620;
  --ink-deep:#0d1a14;
  --mint:#b4fde1;
  --sky:#add8e6;
  --mint-deep:#7defc4;
  --sky-deep:#8ec9e4;
  --paper:#f4fffa;
  --clay:inset -3px -4px 10px rgba(13,26,20,.18), inset 3px 4px 10px rgba(255,255,255,.6), 8px 10px 22px rgba(0,0,0,.42);
  --clay-dark:inset -3px -4px 10px rgba(0,0,0,.42), inset 3px 4px 12px rgba(180,253,225,.16), 6px 8px 20px rgba(0,0,0,.5);
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  overflow-x:hidden;
  min-height:100vh;
  font:400 17px/1.75 'Jost',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:#dff8ee;
  letter-spacing:.012em;
  background:
    radial-gradient(760px 620px at 88% -8%, #22493a 0%, rgba(34,73,58,0) 62%),
    radial-gradient(620px 540px at -6% 56%, #17424a 0%, rgba(23,66,74,0) 66%),
    linear-gradient(180deg,#0f1e18 0%,#172620 38%,#101f1a 100%);
  background-attachment:fixed;
}

h1,h2,h3,h4{
  font-family:'Bodoni Moda','Songti SC',"Noto Serif SC",serif;
  font-weight:600;
  letter-spacing:.012em;
}

a{color:inherit}
img{max-width:100%}

:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:12px}

/* ---------- 左侧固定导航 ---------- */
.dock{
  position:fixed;
  left:22px;
  top:22px;
  z-index:40;
  width:238px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.drawer{
  color:var(--ink);
  padding:10px;
  border:3px solid rgba(23,38,32,.55);
  border-radius:26px;
  background:linear-gradient(158deg,var(--mint) 0%,#c8f1f7 48%,var(--sky) 100%);
  box-shadow:var(--clay), 6px 8px 20px rgba(0,0,0,.45);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:7px 10px;
  cursor:pointer;
  list-style:none;
  border-radius:18px;
  font-weight:600;
  letter-spacing:.02em;
}
.brand::-webkit-details-marker{display:none}
.brand::after{
  content:'';
  width:10px;
  height:10px;
  margin-left:auto;
  border-right:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .22s ease-out;
}
.drawer[open] .brand::after{transform:rotate(-135deg) translateY(-2px)}

.mark{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:50%;
  border:3px solid var(--ink);
  background:radial-gradient(circle at 32% 28%, #ffffff 0%, var(--mint) 38%, var(--sky-deep) 100%);
  box-shadow:inset -2px -3px 6px rgba(23,38,32,.35);
}

.brandName{
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.menuWrap{margin-top:8px}
.menu{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
  max-height:calc(100vh - 250px);
  overflow:auto;
  padding-right:2px;
}
.menu a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:9px 14px;
  border-radius:16px;
  border:2px solid rgba(23,38,32,.16);
  background:#eafff8;
  color:var(--ink);
  font-weight:500;
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  box-shadow:3px 4px 0 rgba(23,38,32,.32);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease-out, background .2s ease-out;
}
.menu a:hover{
  background:#ffffff;
  transform:translate(-2px,-2px);
  box-shadow:5px 6px 0 rgba(23,38,32,.34);
}
.menu a:active{transform:translate(1px,2px);box-shadow:1px 2px 0 rgba(23,38,32,.34)}

.call{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 16px;
  border-radius:18px;
  border:3px solid rgba(180,253,225,.5);
  background:linear-gradient(160deg,#22443a,#14231d);
  color:var(--mint);
  font-weight:600;
  font-size:16px;
  text-decoration:none;
  box-shadow:var(--clay-dark);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.call:hover{transform:translateY(-2px)}

/* ---------- 布局骨架 ---------- */
.wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 18px;
}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-end;
  text-align:right;
  padding:110px 0 78px;
  overflow:hidden;
  border-radius:0 0 48% 48% / 0 0 96px 96px;
}

.heroArt{
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  overflow:hidden;
}
.heroArt::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(13,26,20,.15) 0%,rgba(13,26,20,.42) 46%,rgba(13,26,20,.86) 100%);
}
.heroArt img,.heroImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.heroEmpty{
  background:linear-gradient(150deg,#20493a 0%,#172620 55%,#123039 100%);
}

.heroNum{
  position:relative;
  z-index:1;
  align-self:flex-end;
  margin-bottom:auto;
  margin-right:clamp(8px,3vw,40px);
  font-family:'Bodoni Moda',serif;
  font-size:clamp(110px,24vw,280px);
  line-height:.78;
  letter-spacing:-.05em;
  color:rgba(180,253,225,.16);
  pointer-events:none;
  user-select:none;
}

.heroTxt{
  position:relative;
  z-index:2;
  padding-bottom:8px;
  max-width:22ch;
}
.heroEyebrow{
  display:inline-block;
  margin:0 0 16px;
  padding:6px 16px;
  border-radius:999px;
  border:2px solid rgba(180,253,225,.62);
  background:rgba(180,253,225,.14);
  color:var(--mint);
  font-size:15px;
  letter-spacing:.2em;
}
.hero h1{
  margin:0;
  font-size:clamp(34px,6.2vw,76px);
  line-height:1.16;
  color:#f6fffc;
  text-shadow:0 6px 26px rgba(0,0,0,.5);
}

/* ---------- 正文区 ---------- */
.body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 268px;
  gap:26px;
  align-items:start;
  margin-top:44px;
}

.prose{
  grid-column:1;
  padding:clamp(18px,3.2vw,42px);
  border-radius:34px;
  border:3px solid rgba(23,38,32,.4);
  background:linear-gradient(158deg,#f6fffb 0%,#e4fbf2 56%,#e9f7fd 100%);
  color:#16241e;
  font-size:17px;
  line-height:1.85;
  box-shadow:var(--clay), 10px 14px 30px rgba(0,0,0,.42);
  overflow-wrap:break-word;
}

.prose div{
  background:rgba(255,255,255,.62);
  border-radius:28px;
  padding:22px 24px;
  margin-bottom:18px;
  scroll-margin-top:96px;
}
.prose div:last-child{margin-bottom:0}

.prose h2{
  margin:.1em 0 .1em;
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.35;
  color:#0d1f18;
}
.prose h3{
  margin:1.1em 0 .3em;
  font-size:20px;
  line-height:1.45;
  color:#123027;
}
.prose p{margin:0 0 .95em}
.prose p:last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.35em}
.prose li{margin-bottom:.4em}

.prose a{
  color:#0a6a50;
  font-weight:500;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.prose a:hover{color:#084f3d}

.prose img{
  display:block;
  margin:16px 0;
  border-radius:20px;
  height:auto;
}

.prose blockquote{
  margin:16px 0;
  padding:14px 18px;
  border-radius:18px;
  border-left:6px solid var(--mint-deep);
  background:rgba(180,253,225,.32);
  color:#16302a;
}
.prose blockquote p:last-child{margin-bottom:0}

.prose strong{color:#0a3b2d}

.prose code,.prose pre{
  font-family:'Jost',ui-monospace,monospace;
  background:rgba(23,38,32,.1);
  border-radius:10px;
  padding:1px 6px;
}

hr{
  border:0;
  height:5px;
  width:72px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--mint-deep),var(--sky-deep));
  margin:12px 0 18px;
}

/* ---------- 右侧栏 ---------- */
.side{
  grid-column:2;
  position:sticky;
  top:24px;
  padding:18px;
  border-radius:28px;
  border:3px solid rgba(23,38,32,.42);
  background:linear-gradient(160deg,#d9f2ff 0%,var(--sky) 60%,#c6eefa 100%);
  color:var(--ink);
  box-shadow:var(--clay), 6px 10px 22px rgba(0,0,0,.36);
  font-size:16px;
}
.side h2{
  margin:0;
  font-size:19px;
  line-height:1.4;
  color:#0e211a;
}
.side hr{margin:10px 0 14px;background:linear-gradient(90deg,#2f7f64,#3a7f95)}
.side ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:7px;
}
.side a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:8px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.66);
  color:#12241d;
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  transition:background .2s ease-out, transform .2s ease-out;
}
.side a:hover{background:#ffffff;transform:translateX(-2px)}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:48px;
  padding:38px 0 26px;
  border-top:3px dashed rgba(180,253,225,.28);
}
.footTop{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
  gap:28px;
  align-items:start;
}
.foot address{
  font-style:normal;
  display:block;
}
.footBrand{
  display:block;
  font-family:'Bodoni Moda','Songti SC',serif;
  font-weight:600;
  font-size:clamp(36px,7.4vw,100px);
  line-height:1.02;
  letter-spacing:.01em;
  color:transparent;
  background:linear-gradient(96deg,var(--mint) 0%,#d6f6ff 48%,var(--sky) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  overflow-wrap:break-word;
}
.footDesc{
  display:block;
  margin-top:14px;
  max-width:48ch;
  font-size:16px;
  line-height:1.8;
  color:rgba(223,248,238,.74);
}
.footLinks{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:4px;
  justify-items:end;
  text-align:right;
}
.footLinks a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:6px 2px;
  color:var(--mint);
  font-size:16px;
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease-out,color .2s ease-out;
}
.footLinks a:hover{border-color:rgba(180,253,225,.6);color:#ffffff}

.footBottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-top:26px;
  padding-top:16px;
  border-top:2px solid rgba(180,253,225,.16);
  font-size:15px;
  color:rgba(223,248,238,.62);
}
.footBottom a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:rgba(223,248,238,.86);
  text-decoration:none;
}
.footBottom a:hover{color:var(--mint)}

/* ---------- 滚动显现 ---------- */
.reveal{opacity:0;transform:translateY(22px)}
.in{
  opacity:1;
  transform:none;
  transition:opacity .62s ease-out, transform .62s cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 断点 ---------- */
@media (max-width:1040px){
  .body{grid-template-columns:1fr}
  .side{grid-column:1;position:static;margin-top:4px}
  .footTop{grid-template-columns:1fr;gap:18px}
  .footLinks{justify-items:start;text-align:left}
}

@media (min-width:861px){
  .wrap{padding-left:292px}
}

@media (max-width:860px){
  .dock{left:12px;right:12px;top:12px;width:auto}
  .drawer{padding:8px}
  .menu{max-height:min(62vh,420px)}
  .wrap{padding:0 14px}
  .hero{min-height:92vh;padding-top:104px;padding-bottom:56px;border-radius:0 0 40% 40% / 0 0 64px 64px}
  .heroTxt{max-width:none}
  .body{margin-top:32px}
  .foot{margin-top:36px}
}

@media (max-width:420px){
  body{font-size:16px}
  .prose{font-size:16px;border-radius:26px}
  .prose div{padding:18px 16px;border-radius:24px}
  .footBottom{flex-direction:column;align-items:flex-start;gap:4px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .in{transition:none}
  .menu a,.call,.side a{transition:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}