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

:root{
  --hot:#FF5A3C;
  --ink:#1A1A1A;
  --sun:#FFD23F;
  --paper:#FFF4EC;
  --white:#FFFFFF;
  --line:3px solid var(--ink);
}

*{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  background:var(--paper);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:Rubik,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.72;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
}

h1,h2,h3,h4,.ghost,.mark{
  font-family:Outfit,Rubik,"PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.14;
  margin:0;
}

p{margin:0 0 18px;}
p:last-child{margin-bottom:0;}

a{color:var(--ink);text-decoration:none;}

img{max-width:100%;height:auto;display:block;border-radius:4px;}

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

.shell{position:relative;}

/* 角落品牌标 */
.mark{
  position:fixed;
  top:14px;
  left:14px;
  z-index:60;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  background:var(--sun);
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:4px;
  font-size:20px;
  line-height:1;
  transition:background 160ms ease,color 160ms ease;
}
.mark img{width:40px;height:40px;object-fit:contain;border-radius:0;}
.mark:hover{background:var(--hot);color:var(--sun);}

/* 主体骨架 */
main{
  display:flex;
  align-items:flex-start;
  gap:0;
}

section{
  flex:1 1 auto;
  min-width:0;
  counter-reset:sec;
  border-top:8px solid var(--hot);
}

section > article{
  position:relative;
  padding:52px 22px 52px 20px;
  background:var(--white);
  border-bottom:var(--line);
  scroll-margin-top:16px;
}

section > article:not(.hero){
  padding-left:76px;
}

section > article:not(.hero)::before{
  counter-increment:sec;
  content:counter(sec,decimal-leading-zero);
  position:absolute;
  left:18px;
  top:54px;
  font-family:Outfit,Rubik,sans-serif;
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:0;
  color:var(--hot);
  line-height:1;
}

section > article:nth-of-type(even){background:var(--paper);}

/* 首屏 */
.hero{
  min-height:100vh;
  min-height:100svh;
  background:var(--ink);
  color:var(--white);
  display:flex;
  align-items:center;
  padding:104px 22px 150px;
  overflow:hidden;
  border-bottom:8px solid var(--hot);
}

.ghost{
  position:absolute;
  right:-4%;
  bottom:6%;
  z-index:0;
  font-size:clamp(7rem,25vw,20rem);
  line-height:.8;
  letter-spacing:-0.05em;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:2px rgba(255,210,63,.42);
  pointer-events:none;
  will-change:transform;
}

.hero-inner{position:relative;z-index:1;max-width:760px;}

.hero h1{
  font-size:clamp(2.5rem,8.6vw,5.6rem);
  color:var(--hot);
  word-break:break-word;
}

.hero-rule{
  border:0;
  height:8px;
  width:88px;
  margin:22px 0 26px;
  background:var(--sun);
}

.hero .lead{
  max-width:44ch;
  font-size:1.06rem;
  color:#F3F3F3;
  margin-bottom:30px;
}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0;}

.hero-cta a{
  display:inline-block;
  padding:13px 22px;
  min-height:44px;
  border:3px solid var(--sun);
  color:var(--sun);
  font-weight:600;
  transition:background 160ms ease,color 160ms ease;
}
.hero-cta a:first-child{background:var(--sun);color:var(--ink);}
.hero-cta a:hover{background:var(--white);color:var(--ink);border-color:var(--white);}

/* 正文排版 */
section h2{font-size:clamp(1.55rem,4.2vw,2.3rem);margin:0 0 10px;}
section h3{font-size:clamp(1.2rem,2.6vw,1.45rem);margin:30px 0 10px;}
section h2 + hr,
section h3 + hr,
section hr{
  border:0;
  height:6px;
  width:64px;
  background:var(--hot);
  margin:14px 0 24px;
}
section p{max-width:66ch;}
section ul,section ol{max-width:66ch;padding-left:1.25em;}
section li{margin-bottom:8px;}
section a{
  color:var(--ink);
  border-bottom:3px solid var(--sun);
  transition:background 160ms ease;
}
section a:hover{background:var(--sun);}
section blockquote{
  margin:24px 0;
  padding:16px 20px;
  border-left:8px solid var(--hot);
  background:var(--sun);
  font-weight:500;
}
section blockquote p{max-width:none;margin:0;}
section code{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  background:var(--ink);
  color:var(--sun);
  padding:1px 6px;
  border-radius:4px;
  font-size:.92em;
}

/* 右侧栏 */
.rail{
  flex:0 0 252px;
  width:252px;
  align-self:stretch;
  position:sticky;
  top:0;
  max-height:100vh;
  overflow-y:auto;
  background:var(--sun);
  border-left:var(--line);
  padding:30px 16px 30px;
}

.rail-list{list-style:none;margin:0;padding:0;}

.rail-list a{
  display:block;
  padding:12px 8px;
  min-height:44px;
  font-weight:600;
  border-bottom:2px solid rgba(26,26,26,.24);
  transition:background 150ms ease,color 150ms ease,padding 150ms ease;
}
.rail-list a:hover{background:var(--ink);color:var(--sun);padding-left:14px;}

/* 页脚 */
footer{
  background:var(--ink);
  color:var(--white);
  border-top:8px solid var(--hot);
  padding:46px 22px 170px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px 22px;
}

footer p{font-size:16px;margin:0;}
footer small{font-size:15px;}

.f-brand{font-family:Outfit,Rubik,sans-serif;font-weight:700;font-size:1.3rem;}
.f-host{display:block;font-family:Rubik,sans-serif;font-weight:400;font-size:15px;color:var(--sun);word-break:break-all;}

.f-nav{display:flex;flex-direction:column;}
.f-nav a{padding:6px 0;min-height:36px;color:var(--white);border-bottom:2px solid rgba(255,255,255,.18);}
.f-nav a:hover{color:var(--sun);}

.f-sub{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.f-sub label{flex:0 0 100%;font-weight:600;color:var(--sun);}
.f-sub input{
  flex:1 1 110px;
  min-width:0;
  min-height:44px;
  padding:0 12px;
  font:inherit;
  font-size:16px;
  color:var(--white);
  background:var(--ink);
  border:2px solid var(--sun);
  border-radius:4px;
}
.f-sub button{
  min-height:44px;
  padding:0 16px;
  font:inherit;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  background:var(--sun);
  border:0;
  border-radius:4px;
  cursor:pointer;
  transition:background 150ms ease;
}
.f-sub button:hover{background:var(--hot);color:var(--white);}

.f-end{
  grid-column:1 / 3;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding-top:16px;
  border-top:2px solid var(--sun);
}
.f-end a{padding:6px 0;min-height:36px;color:var(--sun);}
.f-end a:hover{color:var(--white);}

footer small{
  grid-column:3 / 4;
  text-align:right;
  padding-top:18px;
  border-top:2px solid var(--sun);
  color:#CFCFCF;
}

/* 底部固定条 */
.dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:70;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:var(--ink);
  border-top:4px solid var(--hot);
}

.dock nav{
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.dock nav::-webkit-scrollbar{display:none;}

.dock ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;}

.dock a{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:46px;
  padding:11px 12px;
  font-size:16px;
  font-weight:600;
  color:var(--white);
  border-radius:4px;
  white-space:nowrap;
  transition:background 150ms ease,color 150ms ease;
}
.dock a:hover,
.dock a:focus-visible{background:var(--hot);color:var(--white);}

.dock .ico{display:block;flex:0 0 auto;}
.dock .ico svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.find{display:flex;gap:6px;flex:0 0 auto;}

.find input{
  width:132px;
  min-width:0;
  min-height:46px;
  padding:0 10px;
  font:inherit;
  font-size:16px;
  color:var(--white);
  background:var(--ink);
  border:2px solid var(--sun);
  border-radius:4px;
}

.find button{
  min-height:46px;
  padding:0 12px;
  font:inherit;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  background:var(--sun);
  border:0;
  border-radius:4px;
  cursor:pointer;
  transition:background 150ms ease;
}
.find button:hover{background:var(--hot);color:var(--white);}

/* 滚动揭示 */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 460ms ease,transform 460ms ease;}
.reveal.in{opacity:1;transform:none;}

.flash{background:var(--sun) !important;}

/* 响应式 */
@media (max-width:1080px){
  .rail{display:none;}
  section > article{padding-left:22px;}
  section > article:not(.hero){padding-left:70px;}
}

@media (max-width:720px){
  body{font-size:16px;}
  .hero{padding:90px 18px 140px;}
  section > article{padding:42px 18px;}
  section > article:not(.hero){padding-left:62px;}
  section > article:not(.hero)::before{left:16px;top:44px;font-size:1.25rem;}
  .ghost{bottom:10%;}
  .find input{width:88px;}
  .dock a{padding:11px 10px;}
  footer{grid-template-columns:1fr;padding:38px 18px 160px;}
  .f-end{grid-column:1 / -1;}
  footer small{grid-column:1 / -1;text-align:left;}
}

@media (max-width:430px){
  .find input{width:72px;}
  .find button{padding:0 10px;}
  .dock .txt{display:none;}
  .dock a{padding:11px 13px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .ghost{transform:none !important;}
}

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