:root{
  --primary:#ff5a36;
  --primary-dark:#e0431f;
  --primary-light:#ff9a3c;
  --accent:#7c5cff;
  --accent-2:#22d3ee;
  --text:#1a1a1a;
  --text-light:#555;
  --text-muted:#999;
  --bg:#ffffff;
  --bg-soft:#fff7f4;
  --bg-elevated:#ffffff;
  --border:#eee;
  --border-strong:#ffd9cc;
  --glass:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.6);
  --shadow-sm:0 4px 16px rgba(255,90,54,.06);
  --shadow:0 6px 24px rgba(255,90,54,.08);
  --shadow-lg:0 18px 48px rgba(255,90,54,.16);
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:24px;
  --radius-pill:999px;
  --gradient:linear-gradient(135deg,#ff5a36 0%,#ff9a3c 100%);
  --gradient-soft:linear-gradient(160deg,#fff7f4 0%,#fff 60%);
  --gradient-hero:linear-gradient(135deg,#ff5a36 0%,#ff9a3c 45%,#7c5cff 100%);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.3s;
  --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
}

@media(prefers-color-scheme:dark){
  :root{
    --text:#f2f2f2;
    --text-light:#c2c2c2;
    --text-muted:#8b8b8b;
    --bg:#111114;
    --bg-soft:#191a20;
    --bg-elevated:#1c1d24;
    --border:#2a2b33;
    --border-strong:#4a3a34;
    --glass:rgba(28,29,36,.72);
    --glass-border:rgba(255,255,255,.08);
    --shadow-sm:0 4px 16px rgba(0,0,0,.35);
    --shadow:0 6px 24px rgba(0,0,0,.4);
    --shadow-lg:0 18px 48px rgba(0,0,0,.55);
    --gradient-soft:linear-gradient(160deg,#1a1418 0%,#111114 60%);
  }
}

*{margin:0;padding:0;box-sizing:border-box}

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

body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.85;
  font-size:16px;
  overflow-x:hidden;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}

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

h1,h2,h3,h4{line-height:1.35;letter-spacing:-.3px}

::selection{background:var(--primary);color:#fff}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--primary)}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ===== Header ===== */
header.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--border);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}

header.site-header:hover{box-shadow:var(--shadow-sm)}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
  gap:16px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:20px;
  color:var(--primary);
  flex-shrink:0;
  transition:transform var(--dur) var(--ease);
}

.logo:hover{transform:scale(1.03)}

.logo .mark{
  width:36px;
  height:36px;
  border-radius:var(--radius-sm);
  background:var(--gradient);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:18px;
  font-weight:900;
  box-shadow:0 4px 14px rgba(255,90,54,.35);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}

.logo:hover .mark{transform:rotate(-8deg) scale(1.08);box-shadow:0 8px 22px rgba(255,90,54,.5)}

.nav ul{
  display:flex;
  gap:26px;
  list-style:none;
  font-size:15px;
}

.nav ul a{
  color:var(--text-light);
  position:relative;
  padding:4px 0;
  transition:color var(--dur) var(--ease);
}

.nav ul a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:2px;
  border-radius:2px;
  background:var(--gradient);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur) var(--ease);
}

.nav ul a:hover{color:var(--primary)}
.nav ul a:hover::after{transform:scaleX(1)}

.nav-actions{display:flex;gap:10px;align-items:center}

/* ===== Buttons ===== */
.btn{
  padding:9px 20px;
  border-radius:var(--radius-pill);
  font-size:14px;
  font-weight:600;
  font-family:inherit;
  border:none;
  cursor:pointer;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),color var(--dur) var(--ease);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-120%);
  transition:transform .6s var(--ease);
}

.btn:hover::before{transform:translateX(120%)}

.btn:active{transform:scale(.97)}

.btn-primary{
  background:var(--gradient);
  color:#fff;
  box-shadow:0 4px 14px rgba(255,90,54,.32);
}

.btn-primary:hover{
  background:var(--gradient);
  box-shadow:0 8px 24px rgba(255,90,54,.48);
  transform:translateY(-2px);
}

.btn-ghost{
  background:var(--bg-soft);
  color:var(--primary);
  border:1px solid transparent;
}

.btn-ghost:hover{
  border-color:var(--border-strong);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}

/* ===== Breadcrumb ===== */
.breadcrumb{
  font-size:13.5px;
  color:var(--text-muted);
  padding:16px 0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2px;
}

.breadcrumb a{transition:color var(--dur) var(--ease)}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb span{margin:0 6px;opacity:.6}

/* ===== Hero ===== */
.hero{
  background:var(--gradient-soft);
  padding:64px 0 48px;
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  top:-180px;
  right:-140px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,54,.18),transparent 68%);
  filter:blur(20px);
  animation:floatOrb 14s ease-in-out infinite;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  bottom:-200px;
  left:-160px;
  width:480px;
  height:480px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.14),transparent 68%);
  filter:blur(20px);
  animation:floatOrb 18s ease-in-out infinite reverse;
  pointer-events:none;
}

@keyframes floatOrb{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-30px,26px) scale(1.08)}
}

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

.hero h1{
  font-size:40px;
  line-height:1.3;
  font-weight:900;
  letter-spacing:-.5px;
  margin-bottom:20px;
  animation:fadeUp .7s var(--ease) both;
}

.hero h1 em{
  color:var(--primary);
  font-style:normal;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero p.lead{
  font-size:17px;
  color:var(--text-light);
  margin-bottom:26px;
  max-width:560px;
  animation:fadeUp .7s var(--ease) .08s both;
}

.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:28px;
  animation:fadeUp .7s var(--ease) .16s both;
}

.tag{
  background:var(--glass);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:6px 14px;
  font-size:13px;
  color:var(--text-light);
  transition:transform var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
  cursor:default;
}

.tag:hover{
  transform:translateY(-3px);
  color:var(--primary);
  border-color:var(--border-strong);
  background:var(--bg-elevated);
}

.hero-cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  animation:fadeUp .7s var(--ease) .24s both;
}

.hero-visual{
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,233,224,.85));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--glass-border);
  animation:fadeUp .8s var(--ease) .2s both;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}

.hero-visual:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 26px 60px rgba(255,90,54,.22)}

.hero-visual svg{
  width:100%;
  height:auto;
  border-radius:16px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:44px;
  position:relative;
  z-index:1;
}

.stat{
  background:var(--glass);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 18px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

.stat:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:var(--border-strong);
}

.stat b{
  display:block;
  font-size:28px;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900;
  line-height:1.2;
}

.stat span{
  font-size:13px;
  color:var(--text-light);
}

/* ===== Sections ===== */
section{
  padding:64px 0;
  position:relative;
}

.bg-soft{
  background:var(--bg-soft);
  transition:background var(--dur) var(--ease);
}

.section-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 44px;
}

.section-head h2{
  font-size:30px;
  font-weight:900;
  margin-bottom:14px;
  position:relative;
  display:inline-block;
}

.section-head h2::after{
  content:"";
  display:block;
  width:56px;
  height:4px;
  margin:14px auto 0;
  border-radius:var(--radius-pill);
  background:var(--gradient);
}

.section-head p{
  color:var(--text-light);
  font-size:15px;
}

/* ===== Grids ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

/* ===== Cards ===== */
.card{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:var(--gradient);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease);
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--border-strong);
}

.card:hover::before{transform:scaleX(1)}

.card h3{
  font-size:18px;
  margin-bottom:10px;
  font-weight:800;
  transition:color var(--dur) var(--ease);
}

.card:hover h3{color:var(--primary)}

.card p{
  font-size:14.5px;
  color:var(--text-light);
}

.card .ico{
  width:48px;
  height:48px;
  border-radius:12px;
  background:var(--bg-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}

.card:hover .ico{
  transform:scale(1.08) rotate(-6deg);
  background:rgba(255,90,54,.12);
}

/* ===== Articles ===== */
.article-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.article-item{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
  position:relative;
}

.article-item:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
  border-color:var(--border-strong);
}

.article-item .meta{
  font-size:12.5px;
  color:var(--text-muted);
  margin-bottom:8px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.article-item h3{
  font-size:17px;
  margin-bottom:10px;
  font-weight:800;
  transition:color var(--dur) var(--ease);
}

.article-item:hover h3{color:var(--primary)}

.article-item p{
  font-size:14px;
  color:var(--text-light);
  margin-bottom:12px;
}

.readmore{
  color:var(--primary);
  font-size:13.5px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:gap var(--dur) var(--ease),color var(--dur) var(--ease);
}

.readmore:hover{gap:10px;color:var(--primary-dark)}

/* ===== FAQ ===== */
.faq-list{max-width:900px;margin:0 auto}

.faq-item{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:12px;
  overflow:hidden;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}

.faq-item:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}

.faq-item[open]{
  border-color:var(--border-strong);
  box-shadow:var(--shadow);
}

.faq-item summary{
  cursor:pointer;
  padding:18px 22px;
  font-weight:700;
  font-size:15.5px;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  transition:color var(--dur) var(--ease);
}

.faq-item summary:hover{color:var(--primary)}

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

.faq-item summary::after{
  content:"+";
  color:var(--primary);
  font-size:20px;
  font-weight:900;
  flex-shrink:0;
  transition:transform var(--dur) var(--ease);
}

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

.faq-item .ans{
  padding:0 22px 20px;
  color:var(--text-light);
  font-size:14.5px;
  animation:fadeUp .35s var(--ease) both;
}

/* ===== HowTo ===== */
.howto{max-width:900px;margin:0 auto}

.howto h3{
  font-size:19px;
  margin:28px 0 12px;
  color:var(--text);
  position:relative;
  padding-left:16px;
}

.howto h3::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:5px;
  height:18px;
  border-radius:var(--radius-pill);
  background:var(--gradient);
}

.howto h3:first-child{margin-top:0}

.howto ol{padding-left:22px}

.howto ol li{
  margin-bottom:16px;
  color:var(--text-light);
  font-size:15px;
  transition:transform var(--dur) var(--ease);
}

.howto ol li:hover{transform:translateX(4px)}

.howto ol li b{color:var(--text)}

.howto p{
  color:var(--text-light);
  font-size:15px;
}

/* ===== Contact ===== */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.contact-card{
  background:var(--glass);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

.contact-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:var(--border-strong);
}

.contact-card h4{
  font-size:15px;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:6px;
}

.contact-card p{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  word-break:break-word;
}

/* ===== Footer ===== */
footer.site-footer{
  background:#1a1a1a;
  color:#bbb;
  padding:56px 0 28px;
  font-size:14px;
  position:relative;
  overflow:hidden;
}

footer.site-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:var(--gradient);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:36px;
  margin-bottom:36px;
}

footer h4{
  color:#fff;
  font-size:15px;
  margin-bottom:14px;
  position:relative;
  padding-bottom:10px;
}

footer h4::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:28px;
  height:2px;
  border-radius:2px;
  background:var(--gradient);
}

footer ul{list-style:none}

footer ul li{
  margin-bottom:9px;
  transition:transform var(--dur) var(--ease);
}

footer ul li:hover{transform:translateX(4px)}

footer a{transition:color var(--dur) var(--ease)}
footer a:hover{color:var(--primary)}

.footer-bottom{
  border-top:1px solid #2c2c2c;
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:13px;
  color:#888;
}

/* ===== Back to top ===== */
.back-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--gradient);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(255,90,54,.4);
  cursor:pointer;
  z-index:99;
  font-size:20px;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),opacity var(--dur) var(--ease);
}

.back-top:hover{
  transform:translateY(-4px) scale(1.08);
  box-shadow:0 12px 30px rgba(255,90,54,.55);
}

.back-top:active{transform:scale(.95)}

/* ===== Animations ===== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

section .card,
section .article-item,
section .contact-card,
section .faq-item,
section .stat,
section .howto{
  animation:fadeUp .6s var(--ease) both;
}

.grid-3 > *:nth-child(1),
.grid-2 > *:nth-child(1),
.article-list > *:nth-child(1),
.contact-grid > *:nth-child(1),
.stats > *:nth-child(1){animation-delay:.04s}
.grid-3 > *:nth-child(2),
.grid-2 > *:nth-child(2),
.article-list > *:nth-child(2),
.contact-grid > *:nth-child(2),
.stats > *:nth-child(2){animation-delay:.1s}
.grid-3 > *:nth-child(3),
.article-list > *:nth-child(3),
.contact-grid > *:nth-child(3),
.stats > *:nth-child(3){animation-delay:.16s}
.article-list > *:nth-child(4),
.contact-grid > *:nth-child(4),
.stats > *:nth-child(4){animation-delay:.22s}
.article-list > *:nth-child(5),
.contact-grid > *:nth-child(5){animation-delay:.28s}
.article-list > *:nth-child(6),
.contact-grid > *:nth-child(6){animation-delay:.34s}
.article-list > *:nth-child(7){animation-delay:.4s}
.article-list > *:nth-child(8){animation-delay:.46s}
.article-list > *:nth-child(9){animation-delay:.52s}
.article-list > *:nth-child(10){animation-delay:.58s}

@supports(animation-timeline:view()){
  section .card,
  section .article-item,
  section .contact-card,
  section .faq-item,
  section .stat{
    animation:fadeUp .6s var(--ease) both;
    animation-timeline:view();
    animation-range:entry 0% cover 28%;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===== Responsive ===== */
@media(max-width:1024px){
  .hero h1{font-size:34px}
  .nav ul{gap:18px;font-size:14px}
}

@media(max-width:960px){
  .hero-grid,
  .grid-3,
  .grid-2,
  .article-list,
  .contact-grid,
  .stats,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .nav ul{display:none}

  .hero{padding:44px 0 36px}
  .hero h1{font-size:30px}
  .hero p.lead{font-size:16px}
  .hero-visual{max-width:520px;margin:0 auto}

  section{padding:48px 0}
  .section-head h2{font-size:24px}

  .stats{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:32px}
  .stat{padding:18px 14px}
  .stat b{font-size:24px}

  footer.site-footer{padding:44px 0 24px}
  .footer-grid{gap:28px}
}

@media(max-width:600px){
  body{font-size:15px}
  .wrap{padding:0 16px}

  .nav{height:60px}
  .logo{font-size:17px}
  .logo .mark{width:32px;height:32px;font-size:16px}
  .nav-actions .btn{padding:8px 14px;font-size:13px}
  .nav-actions .btn-ghost{display:none}

  .hero h1{font-size:25px}
  .hero p.lead{font-size:15px}
  .hero-tags{gap:8px}
  .tag{font-size:12px;padding:5px 11px}
  .hero-cta .btn{flex:1;text-align:center}

  .section-head h2{font-size:21px}
  .section-head p{font-size:14px}

  .card,.article-item,.contact-card{padding:20px}
  .card h3,.article-item h3{font-size:16.5px}

  .stats{grid-template-columns:1fr 1fr}

  .faq-item summary{padding:15px 16px;font-size:14.5px}
  .faq-item .ans{padding:0 16px 16px;font-size:14px}

  .howto h3{font-size:17px}
  .howto ol{padding-left:18px}
  .howto ol li,.howto p{font-size:14.5px}

  .back-top{right:16px;bottom:16px;width:42px;height:42px;font-size:18px}

  .footer-bottom{flex-direction:column;gap:6px;font-size:12px}
}

@media(max-width:380px){
  .hero h1{font-size:22px}
  .stats{grid-template-columns:1fr}
  .hero-cta{flex-direction:column}
}

/* ===== Dark mode explicit support via class ===== */
body.dark-mode{
  --text:#f2f2f2;
  --text-light:#c2c2c2;
  --text-muted:#8b8b8b;
  --bg:#111114;
  --bg-soft:#191a20;
  --bg-elevated:#1c1d24;
  --border:#2a2b33;
  --border-strong:#4a3a34;
  --glass:rgba(28,29,36,.72);
  --glass-border:rgba(255,255,255,.08);
  --shadow-sm:0 4px 16px rgba(0,0,0,.35);
  --shadow:0 6px 24px rgba(0,0,0,.4);
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);
  --gradient-soft:linear-gradient(160deg,#1a1418 0%,#111114 60%);
}

body.dark-mode .hero-visual{
  background:linear-gradient(135deg,rgba(40,32,36,.9),rgba(60,36,30,.85));
}

body.dark-mode .hero-visual svg rect[fill="#fff"]{fill:#1c1d24}

/* ===== Print ===== */
@media print{
  header.site-header,.back-top,.hero-visual,.hero-cta,.nav-actions{display:none !important}
  body{background:#fff;color:#000}
  section{padding:20px 0}
  .card,.article-item,.contact-card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  a{text-decoration:underline}
}
</style>