:root{
  --brand:#1f2a44;
  --brand-2:#2f3e63;
  --accent:#ffb703;
  --accent-2:#fb8500;
  --bg:#f7f8fb;
  --bg-soft:#eef1f8;
  --card:#ffffff;
  --card-glass:rgba(255,255,255,.72);
  --text:#1c2230;
  --muted:#5a6478;
  --line:#e3e7ef;
  --line-soft:rgba(31,42,68,.08);
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:22px;
  --shadow:0 10px 30px rgba(31,42,68,.08);
  --shadow-hover:0 18px 44px rgba(31,42,68,.16);
  --shadow-glass:0 8px 32px rgba(31,42,68,.12);
  --glass-border:rgba(255,255,255,.45);
  --grad-hero:linear-gradient(135deg,#1f2a44 0%,#2f3e63 45%,#3c4f7d 100%);
  --grad-accent:linear-gradient(135deg,#ffb703 0%,#fb8500 100%);
  --grad-card:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.55));
  --max:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html[data-theme="dark"]{
  --brand:#0f1524;
  --brand-2:#1b2540;
  --accent:#ffc93c;
  --accent-2:#ff9f1c;
  --bg:#0b0f1a;
  --bg-soft:#111726;
  --card:#141a29;
  --card-glass:rgba(20,26,41,.72);
  --text:#e8ecf5;
  --muted:#a3adc2;
  --line:#243049;
  --line-soft:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-hover:0 18px 44px rgba(0,0,0,.6);
  --shadow-glass:0 8px 32px rgba(0,0,0,.5);
  --glass-border:rgba(255,255,255,.12);
  --grad-hero:linear-gradient(135deg,#0b0f1a 0%,#141c33 45%,#1f2a44 100%);
  --grad-card:linear-gradient(160deg,rgba(20,26,41,.92),rgba(20,26,41,.6));
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(900px 500px at 100% -5%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 60%),
    radial-gradient(700px 420px at -10% 10%,color-mix(in srgb,var(--brand-2) 10%,transparent),transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.75;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

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

a{
  color:inherit;
  text-decoration:none;
  transition:color .25s var(--ease),opacity .25s var(--ease);
}

a:hover{
  color:var(--accent-2);
}

ul,
ol{
  padding-left:1.2em;
}

h1,
h2,
h3,
h4{
  line-height:1.35;
  margin:0 0 .6em;
  font-weight:800;
  letter-spacing:-.01em;
}

h1{
  font-size:clamp(1.7rem,3.4vw,2.5rem);
}

h2{
  font-size:clamp(1.35rem,2.4vw,1.8rem);
  margin-top:1.6em;
}

h3{
  font-size:clamp(1.1rem,1.8vw,1.3rem);
  margin-top:1.3em;
}

h4{
  font-size:1rem;
  margin-top:1.1em;
}

p{
  margin:0 0 1em;
}

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

::selection{
  background:color-mix(in srgb,var(--accent) 55%,transparent);
  color:var(--text);
}

::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-track{
  background:var(--bg-soft);
}

::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--muted) 45%,transparent);
  border-radius:999px;
  border:2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--muted) 70%,transparent);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--accent);
  color:#111;
  padding:.6em 1em;
  z-index:9999;
  border-radius:0 0 10px 0;
  font-weight:700;
}

.skip-link:focus{
  left:8px;
  top:8px;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
}

/* ===== 顶栏 ===== */
.topbar{
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#dfe6f5;
  font-size:.85rem;
  position:relative;
  overflow:hidden;
}

.topbar::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(600px 120px at 85% 120%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);
  pointer-events:none;
}

.topbar .wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  align-items:center;
  justify-content:space-between;
  padding:8px 18px;
  position:relative;
  z-index:1;
}

.topbar a{
  color:#dfe6f5;
  border-bottom:1px dashed transparent;
}

.topbar a:hover{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

.topbar .meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  align-items:center;
  margin:0;
}

/* ===== 头部导航 ===== */
header.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--card-glass);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}

header.site-header.stuck{
  box-shadow:var(--shadow-glass);
  background:color-mix(in srgb,var(--card) 86%,transparent);
}

.nav{
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 18px;
  max-width:var(--max);
  margin:0 auto;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.5px;
  white-space:nowrap;
  transition:transform .3s var(--ease);
}

.logo:hover{
  transform:translateY(-1px);
  color:inherit;
}

.logo svg{
  width:38px;
  height:38px;
  border-radius:10px;
  flex:0 0 auto;
  box-shadow:0 4px 14px rgba(31,42,68,.25);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}

.logo:hover svg{
  transform:rotate(-6deg) scale(1.05);
  box-shadow:0 8px 22px rgba(251,133,0,.35);
}

.logo .name{
  font-size:1.08rem;
  color:var(--text);
  line-height:1.2;
}

.logo .name small{
  display:block;
  font-size:.68rem;
  color:var(--muted);
  font-weight:500;
  letter-spacing:0;
}

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

.nav-links a{
  padding:8px 11px;
  border-radius:9px;
  font-size:.92rem;
  color:var(--muted);
  font-weight:600;
  position:relative;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}

.nav-links a:hover{
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  color:var(--text);
  transform:translateY(-1px);
}

.nav-links a[aria-current="page"]{
  background:var(--grad-accent);
  color:#161616;
}

.nav-tools{
  display:flex;
  align-items:center;
  gap:8px;
}

.search-form{
  display:flex;
  align-items:center;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 4px 4px 12px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}

.search-form:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);
}

.search-form input{
  border:0;
  background:transparent;
  color:var(--text);
  outline:none;
  width:130px;
  font-size:.9rem;
  padding:6px 0;
  font-family:inherit;
}

.search-form input::placeholder{
  color:var(--muted);
}

.search-form button{
  border:0;
  background:var(--grad-accent);
  color:#1a1a1a;
  font-weight:700;
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
  font-size:.85rem;
  font-family:inherit;
  transition:filter .25s var(--ease),transform .25s var(--ease);
}

.search-form button:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

.icon-btn{
  background:var(--bg-soft);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  font-size:.85rem;
  font-weight:600;
  font-family:inherit;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}

.icon-btn:hover{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  transform:translateY(-1px);
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 22%,transparent);
}

.menu-toggle{
  display:none;
}

/* ===== Hero 渐变 Banner ===== */
.hero{
  position:relative;
  background:var(--grad-hero);
  color:#eef2fb;
  padding:56px 0 40px;
  overflow:hidden;
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-40% -10% auto -10%;
  height:120%;
  background:
    radial-gradient(620px 300px at 12% 8%,color-mix(in srgb,var(--accent) 40%,transparent),transparent 62%),
    radial-gradient(560px 300px at 88% 0%,color-mix(in srgb,var(--accent-2) 30%,transparent),transparent 60%),
    radial-gradient(700px 360px at 50% 120%,color-mix(in srgb,#6d8bff 26%,transparent),transparent 65%);
  filter:blur(6px);
  z-index:-1;
  animation:heroFloat 16s ease-in-out infinite alternate;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 30%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 20%,transparent 78%);
  z-index:-1;
  pointer-events:none;
}

@keyframes heroFloat{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(0,-18px,0) scale(1.04);}
}

.hero .wrap{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:34px;
  align-items:center;
  position:relative;
  z-index:1;
}

.hero h1{
  color:#fff;
  margin-bottom:.4em;
  text-shadow:0 2px 24px rgba(0,0,0,.22);
}

.hero .kicker{
  display:inline-block;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  border-radius:999px;
  padding:5px 14px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.4px;
  margin-bottom:14px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}

.hero p.lead{
  color:#dbe3f4;
  font-size:1.03rem;
  max-width:56ch;
}

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

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:11px;
  padding:12px 20px;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  font-size:.95rem;
  font-family:inherit;
  position:relative;
  overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease);
}

.btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);
  transition:left .6s var(--ease);
  pointer-events:none;
}

.btn:hover::after{
  left:130%;
}

.btn-primary{
  background:var(--grad-accent);
  color:#161616;
  box-shadow:0 8px 22px rgba(251,133,0,.35);
}

.btn-primary:hover{
  color:#111;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(251,133,0,.45);
}

.btn-ghost{
  border-color:rgba(255,255,255,.38);
  color:#fff;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.btn-ghost:hover{
  background:rgba(255,255,255,.16);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.25);
}

.hero-facts{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:26px;
}

.hero-facts div{
  transition:transform .3s var(--ease);
}

.hero-facts div:hover{
  transform:translateY(-3px);
}

.hero-facts div strong{
  display:block;
  font-size:1.5rem;
  color:#fff;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

.hero-facts div span{
  font-size:.82rem;
  color:#c7d1e8;
}

/* ===== 轮播 ===== */
.carousel{
  position:relative;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-lg);
  padding:16px;
  min-height:290px;
  overflow:hidden;
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 20px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}

.carousel:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 60px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.32);
}

.slides{
  position:relative;
  min-height:250px;
}

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.slide.active{
  opacity:1;
  transform:none;
  position:relative;
  pointer-events:auto;
}

.slide .thumb{
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  transition:transform .5s var(--ease);
}

.slide .thumb svg{
  transition:transform .6s var(--ease);
}

.slide:hover .thumb svg{
  transform:scale(1.04);
}

.slide h2{
  font-size:1.05rem;
  color:#fff;
  margin:6px 0 0;
}

.slide p{
  color:#cfd8ee;
  font-size:.88rem;
  margin:0;
}

.dots{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:14px;
}

.dots button{
  width:9px;
  height:9px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  padding:0;
  transition:width .3s var(--ease),background .3s var(--ease);
}

.dots button:hover{
  background:rgba(255,255,255,.6);
}

.dots button[aria-current="true"]{
  background:var(--grad-accent);
  width:22px;
  border-radius:999px;
}

/* ===== 面包屑 ===== */
.crumb{
  background:var(--card-glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}

.crumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none;
  padding:10px 0;
  margin:0;
  font-size:.85rem;
  color:var(--muted);
}

.crumb li+li::before{
  content:"›";
  margin-right:6px;
  color:var(--muted);
}

.crumb a:hover{
  color:var(--accent-2);
}

/* ===== 通用区块 ===== */
section{
  padding:48px 0;
  position:relative;
}

.section-head{
  max-width:74ch;
  margin-bottom:28px;
}

.section-head .tag{
  display:inline-block;
  background:color-mix(in srgb,var(--accent) 24%,transparent);
  color:var(--text);
  font-weight:700;
  font-size:.76rem;
  border-radius:999px;
  padding:4px 12px;
  margin-bottom:10px;
  letter-spacing:.4px;
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
}

.grid{
  display:grid;
  gap:18px;
}

.g2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.g3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.g4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

/* ===== 卡片（毛玻璃 + hover） ===== */
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--grad-card);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-hover);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
}

.card:hover::before{
  opacity:.5;
}

.card h3{
  margin-top:0;
  position:relative;
}

.card p,
.card ul,
.card h4{
  position:relative;
}

.card .ico{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  margin-bottom:12px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}

.card:hover .ico{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 30%,transparent);
}

.muted{
  color:var(--muted);
}

.small{
  font-size:.87rem;
}

/* ===== 文章列表 ===== */
.article-list{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.post{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow:var(--shadow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  overflow:hidden;
}

.post::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--grad-accent);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s var(--ease);
}

.post:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-hover);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
}

.post:hover::after{
  transform:scaleY(1);
}

.post .post-meta{
  font-size:.8rem;
  color:var(--muted);
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.post h3{
  margin:0;
  font-size:1.06rem;
  transition:color .25s var(--ease);
}

.post:hover h3{
  color:var(--accent-2);
}

.post .more{
  font-weight:700;
  color:var(--accent-2);
  font-size:.9rem;
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:gap .25s var(--ease);
}

.post:hover .more{
  gap:9px;
}

/* ===== FAQ ===== */
.faq details{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:10px;
  box-shadow:var(--shadow);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}

.faq details:hover{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
}

.faq details[open]{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 12px 32px color-mix(in srgb,var(--accent) 16%,transparent);
}

.faq summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  transition:color .25s var(--ease);
}

.faq summary:hover{
  color:var(--accent-2);
}

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

.faq summary::after{
  content:"+";
  font-size:1.2rem;
  color:var(--accent-2);
  flex:0 0 auto;
  transition:transform .3s var(--ease);
}

.faq details[open] summary::after{
  content:"−";
  transform:rotate(180deg);
}

.faq details p{
  margin:12px 0 0;
  color:var(--muted);
  animation:fadeSlide .35s var(--ease);
}

@keyframes fadeSlide{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:none;}
}

/* ===== 步骤 ===== */
.steps{
  counter-reset:step;
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:14px;
}

.steps li{
  counter-increment:step;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px 16px 62px;
  position:relative;
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}

.steps li:hover{
  transform:translateX(4px);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  box-shadow:var(--shadow-hover);
}

.steps li::before{
  content:counter(step);
  position:absolute;
  left:16px;
  top:16px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--grad-accent);
  color:#161616;
  font-weight:800;
  display:grid;
  place-items:center;
  font-size:.9rem;
  box-shadow:0 6px 16px rgba(251,133,0,.35);
  transition:transform .3s var(--ease);
}

.steps li:hover::before{
  transform:scale(1.1) rotate(-8deg);
}

.steps li strong{
  display:block;
  margin-bottom:4px;
}

/* ===== 表格 ===== */
table{
  width:100%;
  border-collapse:collapse;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  font-size:.92rem;
  box-shadow:var(--shadow);
}

th,
td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}

th{
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  font-weight:700;
}

tbody tr{
  transition:background .25s var(--ease);
}

tbody tr:hover{
  background:color-mix(in srgb,var(--accent) 8%,transparent);
}

tr:last-child td{
  border-bottom:0;
}

/* ===== 案例 ===== */
.case{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.case .card{
  border-left:4px solid var(--accent);
}

.case .card:hover{
  border-left-color:var(--accent-2);
}

/* ===== 引用 ===== */
blockquote{
  margin:0;
  background:var(--card);
  border:1px dashed var(--line);
  border-radius:12px;
  padding:18px;
  position:relative;
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}

blockquote::before{
  content:"”";
  position:absolute;
  top:2px;
  right:16px;
  font-size:3rem;
  line-height:1;
  color:color-mix(in srgb,var(--accent) 45%,transparent);
  font-family:Georgia,serif;
}

blockquote:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 50%,var(--line));
  box-shadow:var(--shadow-hover);
}

blockquote footer{
  margin-top:10px;
  font-size:.85rem;
  color:var(--muted);
}

/* ===== 联系 ===== */
.contact-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
}

.info-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}

.info-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:8px 10px;
  border-radius:10px;
  transition:background .25s var(--ease),transform .25s var(--ease);
}

.info-list li:hover{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  transform:translateX(3px);
}

.info-list svg{
  flex:0 0 auto;
  margin-top:3px;
}

/* ===== 网站地图 ===== */
.sitemap-cols{
  columns:2;
  column-gap:26px;
}

.sitemap-cols a{
  display:block;
  padding:4px 0;
  color:var(--muted);
  transition:color .25s var(--ease),padding-left .25s var(--ease);
}

.sitemap-cols a:hover{
  color:var(--accent-2);
  padding-left:6px;
}

/* ===== 页脚 ===== */
footer.site-footer{
  position:relative;
  background:linear-gradient(160deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#c9d3e8;
  padding:48px 0 20px;
  margin-top:20px;
  overflow:hidden;
}

footer.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(700px 260px at 85% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 65%);
  pointer-events:none;
}

footer.site-footer .wrap{
  position:relative;
  z-index:1;
}

footer.site-footer h3{
  color:#fff;
  font-size:1rem;
  margin-top:0;
}

footer.site-footer a{
  color:#c9d3e8;
  transition:color .25s var(--ease),padding-left .25s var(--ease);
}

footer.site-footer a:hover{
  color:var(--accent);
  padding-left:4px;
}

.foot-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.2fr;
  gap:26px;
}

.foot-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:28px;
  padding-top:16px;
  font-size:.82rem;
  color:#a9b6d2;
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  justify-content:space-between;
}

/* ===== 返回顶部 ===== */
.to-top{
  position:fixed;
  right:18px;
  bottom:22px;
  z-index:80;
  background:var(--grad-accent);
  color:#161616;
  border:1px solid rgba(255,255,255,.3);
  border-radius:12px;
  padding:11px 13px;
  cursor:pointer;
  display:none;
  box-shadow:var(--shadow-glass);
  font-family:inherit;
  font-weight:700;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease);
}

.to-top.show{
  display:block;
  animation:popIn .35s var(--ease);
}

.to-top:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(251,133,0,.45);
  filter:brightness(1.06);
}

@keyframes popIn{
  from{opacity:0;transform:translateY(14px) scale(.9);}
  to{opacity:1;transform:none;}
}

/* ===== 滚动动画 ===== */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  will-change:opacity,transform;
}

.reveal.in{
  opacity:1;
  transform:none;
}

/* ===== 提示条 ===== */
.notice{
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  border-radius:12px;
  padding:14px 18px;
  font-size:.9rem;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}

.notice:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 24%,transparent);
}

/* ===== 响应式 ===== */
@media (max-width:980px){
  .hero{
    padding:44px 0 32px;
  }
  .hero .wrap{
    grid-template-columns:1fr;
    gap:26px;
  }
  .g4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .g3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .case{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .foot-grid{
    grid-template-columns:1fr 1fr;
  }
  .contact-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  body{
    font-size:15.5px;
  }
  .topbar{
    font-size:.78rem;
  }
  .topbar .wrap{
    justify-content:flex-start;
  }
  .nav{
    flex-wrap:wrap;
    gap:10px;
    padding:10px 14px;
  }
  .menu-toggle{
    display:inline-block;
    margin-left:auto;
  }
  .nav-links{
    display:none;
    width:100%;
    flex-direction:column;
    margin:8px 0 0;
    order:5;
    gap:2px;
    animation:fadeSlide .3s var(--ease);
  }
  .nav-links.open{
    display:flex;
  }
  .nav-links a{
    padding:10px 12px;
    background:color-mix(in srgb,var(--bg-soft) 70%,transparent);
  }
  .nav-tools{
    margin-left:auto;
    gap:6px;
  }
  .search-form input{
    width:92px;
  }
  .article-list{
    grid-template-columns:1fr;
  }
  .g2,
  .g3,
  .g4,
  .case{
    grid-template-columns:1fr;
  }
  .sitemap-cols{
    columns:1;
  }
  .foot-grid{
    grid-template-columns:1fr;
  }
  section{
    padding:34px 0;
  }
  .hero-facts{
    gap:16px;
  }
  .hero-facts div strong{
    font-size:1.28rem;
  }
  .carousel{
    min-height:auto;
    padding:14px;
  }
  .slides{
    min-height:220px;
  }
  .steps li{
    padding:14px 14px 14px 56px;
  }
  table{
    font-size:.85rem;
  }
  th,
  td{
    padding:10px 10px;
  }
  .to-top{
    right:12px;
    bottom:14px;
    padding:10px 12px;
  }
}

@media (max-width:420px){
  .search-form input{
    width:70px;
  }
  .logo .name small{
    display:none;
  }
  .hero .cta .btn{
    width:100%;
    justify-content:center;
  }
}

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

@media print{
  header.site-header,
  .topbar,
  .to-top,
  .carousel,
  .hero::before,
  .hero::after{
    display:none!important;
  }
  body{
    background:#fff;
    color:#000;
  }
  .card,
  .post,
  .faq details{
    box-shadow:none;
    border-color:#ccc;
  }
}