/*
 * 浅色系主题：浅灰白底 + 柔和侧向晕染；主色仍为青绿 / 蓝 / 紫，保证可读与层次
 */
:root{
  --bg-deep:#eef1f8;
  --bg:#f5f7fc;
  --bg-card:#ffffff;
  --bg-card2:#fafbfe;
  --panel:#eef2f9;
  --text:#131826;
  --text-soft:#2c3548;
  --muted:#5a6478;
  --line:rgba(15,23,42,.09);
  --line-strong:rgba(13,148,136,.35);
  --accent:#0d9488;
  --accent-dim:#0f766e;
  --accent-blue:#2563eb;
  --accent-blue-dim:#4f46e5;
  --accent-violet:#7c3aed;
  --accent-violet-dim:#6d28d9;
  --accent-amber:#d97706;
  --accent-amber-dim:#b45309;
  --accent-coral:#e11d48;
  --accent-sky:#0891b2;
  --gold:#b45309;
  --gold-soft:rgba(217,119,6,.12);
  --shadow:0 18px 48px rgba(15,23,42,.08);
  --shadow-soft:0 10px 32px rgba(15,23,42,.06);
  --glow:0 8px 32px rgba(13,148,136,.12);
  --glow-blue:0 8px 32px rgba(37,99,235,.12);
  --glow-violet:0 8px 32px rgba(124,58,237,.11);
  --radius:16px;
  --radius-sm:12px;
  --mesh-base:linear-gradient(180deg, #fafbff 0%, #f0f4fc 45%, #e8edf7 100%);
  --mesh-side-violet:rgba(124,58,237,.14);
  --mesh-side-teal:rgba(13,148,136,.11);
  --mesh-side-blue:rgba(37,99,235,.11);
  --mesh-side-amber:rgba(217,119,6,.10);
}

*{box-sizing:border-box}
html{
  margin:0;padding:0;
  min-height:100%;
  background-color:#e8ecf6;
}
body{
  margin:0;padding:0;
  color:var(--text);
  font:16px/1.75 "PingFang SC","Microsoft YaHei UI",system-ui,-apple-system,sans-serif;
  min-height:100vh;
  position:relative;
  isolation:isolate;
  background-color:transparent;
  background-image:
    radial-gradient(ellipse 52% 120% at -15% 50%, var(--mesh-side-violet), transparent 55%),
    radial-gradient(ellipse 40% 85% at -8% 72%, var(--mesh-side-blue), transparent 50%),
    radial-gradient(ellipse 50% 118% at 115% 48%, var(--mesh-side-teal), transparent 54%),
    radial-gradient(ellipse 38% 80% at 108% 22%, rgba(8,145,178,.12), transparent 48%),
    radial-gradient(ellipse 420px 360px at 0% 0%, rgba(225,29,72,.06), transparent 55%),
    radial-gradient(ellipse 380px 300px at 100% 100%, var(--mesh-side-amber), transparent 52%),
    radial-gradient(ellipse 900px 480px at 50% -5%, rgba(124,58,237,.07), transparent 60%),
    radial-gradient(ellipse 880px 520px at 12% -10%, rgba(13,148,136,.06), transparent 58%),
    radial-gradient(ellipse 760px 440px at 88% 5%, rgba(37,99,235,.07), transparent 52%),
    linear-gradient(90deg,
      rgba(124,58,237,.08) 0%,
      rgba(255,255,255,0) clamp(120px, 18vw, 340px),
      rgba(255,255,255,0) calc(100% - clamp(120px, 18vw, 340px)),
      rgba(13,148,136,.08) 100%),
    var(--mesh-base);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* 顶栏 */
.topbar{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(250,251,255,.88) 100%);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9),
    0 10px 40px rgba(15,23,42,.06);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;min-height:68px}
.brand{display:flex;gap:14px;align-items:center}
.logo{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg, var(--accent) 0%, #2dd4bf 45%, var(--accent-blue) 72%, var(--accent-violet) 100%);
  box-shadow:var(--glow), var(--shadow-soft);
  position:relative;
}
.logo-auto{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--logo-c1, var(--accent)) 0%, var(--logo-c2, #2dd4bf) 45%, var(--logo-c3, var(--accent-blue)) 100%);
}
.logo-auto span{
  font-weight:950;
  letter-spacing:.02em;
  font-size:14px;
  color:rgba(255,255,255,.96);
  text-shadow:0 2px 10px rgba(15,23,42,.22);
  user-select:none;
  line-height:1;
}
.logo-img{
  display:block;
  object-fit:cover;
  background:#fff;
}
.logo::after{
  content:"";position:absolute;inset:2px;border-radius:10px;
  border:1px solid rgba(255,255,255,.45);
}
.logo-img::after{display:none}
.brand-title{font-weight:800;font-size:1.05rem;letter-spacing:.02em;color:var(--text)}
.brand-sub{font-size:13px;color:var(--muted);margin-top:2px}
.nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav a{
  color:var(--text-soft);padding:10px 14px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;
  transition:background .2s,color .2s,box-shadow .2s;
}
.nav a:nth-child(1):hover{
  background:rgba(13,148,136,.12);color:var(--accent-dim);
  box-shadow:none;
}
.nav a:nth-child(2):hover{
  background:rgba(37,99,235,.1);color:var(--accent-blue);
}
.nav a:nth-child(3):hover{
  background:rgba(124,58,237,.1);color:var(--accent-violet);
}
.nav a:nth-child(n+4):hover{background:var(--gold-soft);color:var(--gold)}

/* Hero */
.hero{padding:44px 0 8px}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:start}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.h1{
  font-size:clamp(1.75rem, 4vw, 2.35rem);
  line-height:1.25;margin:0 0 16px;font-weight:800;letter-spacing:.02em;
  background:linear-gradient(125deg, #0f172a 0%, #1e3a5f 28%, var(--accent-dim) 52%, var(--accent-blue) 72%, var(--accent-violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.h1-fallback{color:var(--text)}
@supports not (background-clip:text){
  .h1{color:var(--text);background:none;-webkit-background-clip:unset;background-clip:unset}
}
.sub{color:var(--muted);margin:0 0 22px;font-size:1.02rem;max-width:36em}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 22px;border-radius:999px;font-weight:700;font-size:15px;
  border:1px solid var(--line);background:var(--bg-card);color:var(--text-soft);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.btn:not(.btn-primary):hover{
  transform:translateY(-2px);
  border-color:rgba(37,99,235,.28);
  background:#f8faff;
  box-shadow:0 6px 20px rgba(37,99,235,.1);
}
.btn-primary{
  background:linear-gradient(135deg, #14b8a6, var(--accent-dim));
  border:0;color:#ffffff;
  box-shadow:0 8px 28px rgba(13,148,136,.28);
}
.btn-primary:hover{box-shadow:0 10px 32px rgba(13,148,136,.38)}

.hero-side-card{
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(124,58,237,.08), transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(13,148,136,.07), transparent 50%),
    linear-gradient(165deg, var(--bg-card) 0%, var(--panel) 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  overflow:hidden;position:relative;
}
.hero-side-card.tilt-card.is-tilting{
  transform:perspective(980px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-5px);
}
.hero-side-card .card-pad{
  transform:translateZ(calc(var(--tz) * .7));
  transition:transform .14s ease;
}
.hero-side-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-sky), #f59e0b, var(--accent-blue), var(--accent-violet));
}
.hero-card-shell{
  perspective:1100px;
  perspective-origin:50% 50%;
}
.hero-side-card.hero-card-interactive{
  overflow:visible;
  transform:translate3d(0,0,0);
  transform-style:preserve-3d;
  transition:transform .32s cubic-bezier(0.25,0.9,0.35,1), box-shadow .32s ease, border-color .32s ease;
}
.hero-side-card.hero-card-interactive .card-pad{
  transform:none;
  transition:none;
}
.hero-card-heading{
  margin:14px 0 8px;
  font-size:18px;
  font-weight:800;
  line-height:1.35;
  color:var(--text);
}
.hero-card-copy{
  margin:0 0 12px;
  line-height:1.65;
}
.hero-card-copy--last{
  margin-bottom:16px;
}
.hero-card-cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hero-card-cta .btn{
  flex:1 1 auto;
  min-width:120px;
  justify-content:center;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .hero-side-card.hero-card-interactive:hover{
    transform:translateY(-6px) rotateX(2.5deg) rotateY(-3deg);
    box-shadow:0 20px 44px rgba(15,23,42,.14);
    border-color:rgba(13,148,136,.22);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero-side-card.hero-card-interactive:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(15,23,42,.1);
  }
}
@media (hover:none){
  .hero-side-card.hero-card-interactive:active{
    transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(15,23,42,.12);
  }
}
.hero-media{
  margin-top:12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
  overflow:hidden;
  position:relative;
  height:176px;
}
.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  filter:none;
  object-position:center;
}
/* 默认渐变衬在图片下方；勿用 z-index 压盖 .hero-photo，否则无 has-photo 时 SVG 会被挡死 */
.hero-media::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(13,148,136,.16), transparent 58%),
    radial-gradient(120% 90% at 100% 0%, rgba(37,99,235,.15), transparent 54%),
    linear-gradient(120deg, rgba(255,255,255,.88), rgba(238,244,255,.74));
  z-index:0;
}
.hero-media::after{
  content:"";
  position:absolute;left:20px;right:20px;bottom:18px;height:7px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(15,23,42,.08), rgba(15,23,42,.02));
  z-index:2;
}

/* 真实照片：半透明罩层叠在图上（与公司简介区观感一致） */
.hero-media.has-photo::before{
  z-index:2;
  opacity:.18;
}
.hero-media.has-photo::after{
  opacity:.12;
  z-index:3;
}
.hero-media.has-photo .hero-ball,
.hero-media.has-photo .hero-metric,
.hero-media.has-photo .hero-lines{display:none}
/* 全幅装饰底图（hero-banner.svg）：去掉 HTML 假 UI，避免与插画里「灰条」叠成双份骨架 */
.hero-media.hero-clean-banner .hero-ball,
.hero-media.hero-clean-banner .hero-metric,
.hero-media.hero-clean-banner .hero-lines{display:none}
.hero-media.has-photo .hero-domain{
  background:rgba(255,255,255,.92);
  border-color:rgba(15,23,42,.12);
}
.hero-media.is-blue::before{
  background:
    radial-gradient(120% 90% at 10% 10%, rgba(37,99,235,.16), transparent 55%),
    radial-gradient(120% 90% at 100% 0%, rgba(124,58,237,.16), transparent 55%),
    linear-gradient(120deg, rgba(255,255,255,.88), rgba(238,244,255,.74));
}
.hero-media.is-violet::before{
  background:
    radial-gradient(120% 90% at 10% 10%, rgba(124,58,237,.16), transparent 55%),
    radial-gradient(120% 90% at 100% 0%, rgba(225,29,72,.13), transparent 55%),
    linear-gradient(120deg, rgba(255,255,255,.88), rgba(241,237,255,.76));
}
.hero-media.is-amber::before{
  background:
    radial-gradient(120% 90% at 10% 10%, rgba(217,119,6,.16), transparent 55%),
    radial-gradient(120% 90% at 100% 0%, rgba(13,148,136,.12), transparent 55%),
    linear-gradient(120deg, rgba(255,255,255,.9), rgba(255,247,234,.78));
}
.hero-domain{
  position:absolute;left:14px;top:12px;z-index:2;
  display:inline-flex;align-items:center;
  max-width:calc(100% - 28px);
  padding:7px 11px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.01em;
  color:#0f172a;background:rgba(255,255,255,.86);
  border:1px solid rgba(15,23,42,.1);
  box-shadow:0 6px 14px rgba(15,23,42,.08);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-ball{
  position:absolute;left:20px;top:68px;z-index:2;
  width:64px;height:64px;border-radius:999px;
  background:
    radial-gradient(circle at 35% 30%, #ffffff 0%, #ffffff 56%, #f1f5f9 57%, #e2e8f0 100%);
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 10px 26px rgba(15,23,42,.14);
}
.hero-ball span{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:6px;
  background:rgba(15,23,42,.2);
}
.hero-metric{
  position:absolute;z-index:2;height:8px;border-radius:999px;
  background:rgba(15,23,42,.13);
}
.hero-metric.m1{left:100px;top:84px;width:58%}
.hero-metric.m2{left:100px;top:102px;width:46%}
.hero-metric.m3{left:100px;top:120px;width:54%}
.hero-lines{
  position:absolute;left:18px;right:18px;bottom:24px;z-index:2;
  display:grid;gap:9px;
}
.hero-lines span{
  display:block;height:10px;border-radius:999px;
  background:rgba(15,23,42,.1);
}
.hero-lines span:nth-child(1){width:78%}
.hero-lines span:nth-child(2){width:64%}
.hero-lines span:nth-child(3){width:71%}
.hero-media.is-amber .hero-lines span{background:rgba(120,53,15,.18)}
.hero-media.is-violet .hero-lines span{background:rgba(49,46,129,.16)}
.hero-media.is-blue .hero-lines span{background:rgba(30,64,175,.16)}
.hero-media.is-teal .hero-lines span{background:rgba(13,116,100,.16)}
.card-pad{padding:22px}

/* 区块标题 */
.section{padding:36px 0}
.section-head{margin-bottom:20px}
.section-title{
  font-size:1.35rem;font-weight:800;margin:0 0 8px;
  display:flex;align-items:center;gap:12px;
  color:var(--text);
}
.section-title::before{
  content:"";width:4px;height:1.15em;border-radius:2px;
  background:linear-gradient(180deg, #f59e0b, var(--accent));
}
.container > section.section:nth-child(2) .section-title::before{
  background:linear-gradient(180deg, var(--accent-amber), var(--accent));
}
.container > section.section:nth-child(3) .section-title::before{
  background:linear-gradient(180deg, var(--accent-blue), var(--accent-violet));
}
.container > section.section:nth-child(4) .section-title::before{
  background:linear-gradient(180deg, var(--accent-sky), var(--accent-blue-dim));
}
.container > section.section:nth-child(5) .section-title::before{
  background:linear-gradient(180deg, #f59e0b, var(--accent-coral));
}
.container > section.section:nth-child(6) .section-title::before{
  background:linear-gradient(180deg, var(--accent-violet), var(--accent-sky));
}
.container > section.section:nth-child(7) .section-title::before{
  background:linear-gradient(180deg, var(--accent), var(--accent-blue));
}
.section-desc{color:var(--muted);font-size:15px;margin:0;max-width:52em}

/* 四列特点 */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1024px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}}
.feature-card{
  padding:18px;border-radius:var(--radius);
  border:1px solid var(--line);
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.feature-icon{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.75);
  box-shadow:0 8px 20px rgba(15,23,42,.06);
  margin-bottom:12px;
}
.feature-icon img{width:28px;height:28px;display:block}
.feature-card:nth-child(4n+1){
  background:linear-gradient(160deg, #ffffff 0%, #f4fdfa 100%);
  border-top:2px solid rgba(13,148,136,.35);
}
.feature-card:nth-child(4n+2){
  background:linear-gradient(160deg, #ffffff 0%, #f5f8ff 100%);
  border-top:2px solid rgba(37,99,235,.32);
}
.feature-card:nth-child(4n+3){
  background:linear-gradient(160deg, #ffffff 0%, #f9f5ff 100%);
  border-top:2px solid rgba(124,58,237,.3);
}
.feature-card:nth-child(4n+4){
  background:linear-gradient(160deg, #ffffff 0%, #fffbf5 100%);
  border-top:2px solid rgba(217,119,6,.32);
}
.feature-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.feature-card:nth-child(4n+1):hover{box-shadow:var(--glow)}
.feature-card:nth-child(4n+2):hover{box-shadow:var(--glow-blue)}
.feature-card:nth-child(4n+3):hover{box-shadow:var(--glow-violet)}
.feature-card:nth-child(4n+4):hover{box-shadow:0 8px 28px rgba(217,119,6,.12)}
.feature-card h4{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--text)}
.feature-card:nth-child(4n+2) h4{color:#1e3a5f}
.feature-card:nth-child(4n+3) h4{color:#4c1d95}
.feature-card:nth-child(4n+4) h4{color:#92400e}
.feature-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.65}

/* 网格 */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.grid3{grid-template-columns:1fr}}

.card{
  background:linear-gradient(165deg, var(--bg-card2), var(--bg-card));
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 2px 16px rgba(15,23,42,.04);
  transition:border-color .2s, box-shadow .2s;
}
.card-media{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(238,244,255,.6));
  margin-bottom:12px;
}
.card-media img{
  width:100%;
  height:120px;
  display:block;
  object-fit:cover;
  object-position:center;
}
.grid3 .card:nth-child(3n+1):hover{
  border-color:rgba(13,148,136,.35);box-shadow:var(--glow);
}
.grid3 .card:nth-child(3n+2):hover{
  border-color:rgba(37,99,235,.32);box-shadow:var(--glow-blue);
}
.grid3 .card:nth-child(3n+3):hover{
  border-color:rgba(124,58,237,.3);box-shadow:var(--glow-violet);
}
.card:hover{
  border-color:rgba(15,23,42,.12);
  box-shadow:0 8px 28px rgba(15,23,42,.08);
}
.grid3 .card{
  position:relative;
  overflow:hidden;
}
.grid3 .card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(13,148,136,.08), rgba(37,99,235,.06) 50%, rgba(124,58,237,.08));
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}
.grid3 .card:hover::after{opacity:1}
.grid3 .card .card-media img{
  transition:transform .28s ease, filter .28s ease;
}
.grid3 .card:hover .card-media img{
  transform:scale(1.04);
  filter:saturate(1.06);
}
.grid3 .card .card-pad{position:relative; z-index:1}

/* Mouse-follow 3D tilt (desktop only; touch disabled via media query) */
.tilt-card{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .14s ease, box-shadow .2s ease, border-color .2s ease;
}
.tilt-card[data-tilt="1"]{--rx:0deg;--ry:0deg;--tz:0px}
.tilt-card.is-tilting{
  transform:perspective(980px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);
  box-shadow:0 16px 38px rgba(15,23,42,.16);
}
.tilt-card .card-media,
.tilt-card .card-title,
.tilt-card .card-text{
  transform:translateZ(var(--tz));
  transition:transform .14s ease;
}
@media (hover:none){
  .tilt-card{transform:none !important}
}
.card-pad-mini{padding:18px}
.card-title{font-weight:800;margin:0 0 8px;font-size:16px;color:var(--text)}
.grid3 .card:nth-child(3n+2) .card-title{color:#1e40af}
.grid3 .card:nth-child(3n+3) .card-title{color:#5b21b6}
.card-text{margin:0;font-size:14px;color:var(--muted);line-height:1.65}

/* 信赖 5 列 */
.grid-trust{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:1100px){.grid-trust{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-trust{grid-template-columns:1fr}}
.trust-item{
  padding:16px;border-radius:var(--radius-sm);
  border:1px solid var(--line);
  transition:transform .15s,border-color .2s, box-shadow .2s;
  background:var(--bg-card);
}
.grid-trust .trust-item:nth-child(5n+2){
  background:linear-gradient(145deg, #ffffff, #f4f8ff);
  border-color:rgba(37,99,235,.15);
}
.grid-trust .trust-item:nth-child(5n+3){
  background:linear-gradient(145deg, #ffffff, #f9f5ff);
  border-color:rgba(124,58,237,.12);
}
.grid-trust .trust-item:nth-child(5n+4){
  background:linear-gradient(145deg, #ffffff, #fffbeb);
  border-color:rgba(217,119,6,.15);
}
.grid-trust .trust-item:nth-child(5n+5){
  background:linear-gradient(145deg, #ffffff, #f0fdfa);
  border-color:rgba(8,145,178,.15);
}
.trust-item:hover{
  transform:translateY(-2px);
  border-color:rgba(15,23,42,.14);
  box-shadow:var(--shadow-soft);
}
.trust-item strong{display:block;color:var(--text-soft);font-size:14px;margin-bottom:6px}
.grid-trust .trust-item:nth-child(5n+2) strong{color:#1e40af}
.grid-trust .trust-item:nth-child(5n+3) strong{color:#5b21b6}
.grid-trust .trust-item:nth-child(5n+4) strong{color:#92400e}
.grid-trust .trust-item:nth-child(5n+5) strong{color:#0e7490}

/* 安全 三层 */
.security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:800px){.security-grid{grid-template-columns:1fr}}
.security-box{
  padding:20px;border-radius:var(--radius);
  border:1px solid var(--line);
  transform:translate3d(0,0,0);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.security-grid .security-box:nth-child(1){
  background:radial-gradient(120% 85% at 0% 0%, rgba(37,99,235,.12), transparent 62%), var(--bg-card);
  border-color:rgba(37,99,235,.18);
}
.security-grid .security-box:nth-child(2){
  background:radial-gradient(120% 85% at 100% 0%, rgba(13,148,136,.12), transparent 58%), var(--bg-card);
  border-color:rgba(13,148,136,.1);
}
.security-grid .security-box:nth-child(3){
  background:radial-gradient(120% 85% at 50% 100%, rgba(124,58,237,.1), transparent 55%), var(--bg-card);
  border-color:rgba(124,58,237,.15);
}
.security-box h5{margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.security-grid .security-box:nth-child(1) h5{color:var(--accent-blue)}
.security-grid .security-box:nth-child(2) h5{color:var(--accent-dim)}
.security-grid .security-box:nth-child(3) h5{color:var(--accent-violet)}
.security-box .tag{font-size:12px;color:var(--muted);margin-bottom:10px}
.security-box p{margin:0;font-size:14px;color:var(--text-soft)}
/* 悬停互动：不依赖 hover:hover，避免触控优先/部分环境下整块规则被跳过 */
@media (prefers-reduced-motion:no-preference){
  .security-box:hover{
    transform:translateY(-6px);
  }
  .security-grid .security-box:nth-child(1):hover{
    box-shadow:0 16px 38px rgba(37,99,235,.2);
    border-color:rgba(37,99,235,.38);
  }
  .security-grid .security-box:nth-child(2):hover{
    box-shadow:0 16px 38px rgba(13,148,136,.18);
    border-color:rgba(13,148,136,.32);
  }
  .security-grid .security-box:nth-child(3):hover{
    box-shadow:0 16px 38px rgba(124,58,237,.18);
    border-color:rgba(124,58,237,.34);
  }
}
@media (prefers-reduced-motion:reduce){
  .security-box:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(15,23,42,.12);
  }
  .security-grid .security-box:nth-child(1):hover{
    border-color:rgba(37,99,235,.35);
  }
  .security-grid .security-box:nth-child(2):hover{
    border-color:rgba(13,148,136,.3);
  }
  .security-grid .security-box:nth-child(3):hover{
    border-color:rgba(124,58,237,.32);
  }
}
.security-box:active{
  transform:translateY(-3px);
}
@media (prefers-reduced-motion:no-preference){
  .security-grid .security-box:nth-child(1):active{
    box-shadow:0 12px 28px rgba(37,99,235,.16);
  }
  .security-grid .security-box:nth-child(2):active{
    box-shadow:0 12px 28px rgba(13,148,136,.14);
  }
  .security-grid .security-box:nth-child(3):active{
    box-shadow:0 12px 28px rgba(124,58,237,.14);
  }
}

/* 时间线 */
.timeline{max-width:820px}
.timeline-item{
  padding-left:22px;border-left:2px solid rgba(13,148,136,.45);
  margin-bottom:20px;padding-bottom:4px;
}
.timeline-item:nth-child(3n+2){border-left-color:rgba(37,99,235,.45)}
.timeline-item:nth-child(3n+3){border-left-color:rgba(124,58,237,.45)}
.timeline-item:last-child{border-left-color:transparent}
.timeline-date{font-size:13px;font-weight:700}
.timeline-item:nth-child(3n+1) .timeline-date{color:var(--accent-amber)}
.timeline-item:nth-child(3n+2) .timeline-date{color:var(--accent-sky)}
.timeline-item:nth-child(3n+3) .timeline-date{color:var(--accent-violet)}
.timeline-item h4{margin:6px 0 8px;font-size:16px;color:var(--text)}
.timeline-item ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px}

/* 版本更新页（深色时间线卡片） */
.changelog-dark{
  margin-top:10px;
  border-radius:18px;
  padding:18px 16px;
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(13,148,136,.22), transparent 55%),
    radial-gradient(120% 120% at 90% 0%, rgba(124,58,237,.22), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #101a2a 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 26px 90px rgba(15,23,42,.22);
}
.changelog-list{max-width:980px;margin:0 auto}
.changelog-item{
  position:relative;
  padding-left:20px;
  margin:0 0 18px 0;
  transition:transform .18s ease;
}
.changelog-item::before{
  content:"";
  position:absolute;
  left:8px;top:8px;bottom:-10px;
  width:2px;
  background:linear-gradient(180deg, rgba(245,158,11,.95), rgba(245,158,11,.08));
}
.changelog-item:last-child::before{bottom:14px}
.changelog-item::after{
  content:"";
  position:absolute;
  left:2px;top:8px;
  width:14px;height:14px;border-radius:999px;
  background:rgba(245,158,11,.95);
  box-shadow:0 0 0 4px rgba(245,158,11,.14);
  transition:transform .18s ease, box-shadow .18s ease;
}
.changelog-date{
  color:rgba(245,158,11,.95);
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  margin:2px 0 10px;
}
.changelog-card{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  will-change:transform;
}
.changelog-title{
  color:#ffffff;
  font-weight:900;
  font-size:15px;
  margin:0 0 10px;
}
.changelog-ul{
  margin:0;
  padding-left:18px;
  color:rgba(226,232,240,.88);
  font-size:13.5px;
  line-height:1.7;
}
.changelog-ul li{margin:6px 0}

@keyframes changelogPulse{
  0%{transform:scale(1); box-shadow:0 0 0 4px rgba(245,158,11,.14)}
  50%{transform:scale(1.08); box-shadow:0 0 0 7px rgba(245,158,11,.18)}
  100%{transform:scale(1); box-shadow:0 0 0 4px rgba(245,158,11,.14)}
}
.changelog-item:hover{transform:translateY(-2px)}
.changelog-item:hover::after{
  animation:changelogPulse .75s ease-in-out infinite;
}
.changelog-item:hover .changelog-card{
  transform:translateY(-2px) scale(1.01);
  border-color:rgba(245,158,11,.22);
  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    0 0 0 1px rgba(245,158,11,.10) inset,
    0 0 0 1px rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
}

@media (prefers-reduced-motion: reduce){
  .changelog-item, .changelog-item::after, .changelog-card{transition:none !important}
  .changelog-item:hover::after{animation:none !important}
}

/* 反馈 */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.quote-grid{grid-template-columns:1fr}}
.quote{
  padding:18px;border-radius:var(--radius);
  font-size:14px;color:var(--text-soft);line-height:1.65;
  transition:border-color .2s, box-shadow .2s, transform .15s;
  background:var(--bg-card);
  position:relative;
  overflow:hidden;
}
.quote::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-sky), #f59e0b, var(--accent-blue), var(--accent-violet));
  opacity:.65;
  pointer-events:none;
}
.quote:nth-child(3n+1){
  background:linear-gradient(165deg, #ffffff, #f4fdfa);
  border:1px solid rgba(13,148,136,.18);
}
.quote:nth-child(3n+2){
  background:linear-gradient(165deg, #ffffff, #f4f8ff);
  border:1px solid rgba(37,99,235,.18);
}
.quote:nth-child(3n+3){
  background:linear-gradient(165deg, #ffffff, #f9f5ff);
  border:1px solid rgba(124,58,237,.16);
}
.quote:hover{box-shadow:var(--shadow-soft); transform:translateY(-1px)}
.quote:nth-child(3n+1):hover{box-shadow:var(--glow)}
.quote:nth-child(3n+2):hover{box-shadow:var(--glow-blue)}
.quote:nth-child(3n+3):hover{box-shadow:var(--glow-violet)}
.quote .who{margin-top:12px;font-weight:700;color:var(--muted);font-size:13px}

/* 公司简介页 */
.about-grid{
  display:grid;
  grid-template-columns:1.05fr 1.35fr;
  gap:16px;
  align-items:stretch;
}
.about-photo{position:relative;overflow:hidden;min-height:260px}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
.about-badge{
  position:absolute;left:12px;bottom:12px;
  padding:6px 10px;border-radius:999px;
  font-size:12px;font-weight:700;color:#0f172a;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(15,23,42,.12);
}
.about-main{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
}
.about-points{display:grid;gap:10px}
.about-point{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:#fff;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.about-point::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(13,148,136,.08), rgba(37,99,235,.06) 50%, rgba(124,58,237,.08));
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.about-point:hover{
  transform:translateY(-2px);
  border-color:rgba(37,99,235,.28);
  box-shadow:0 12px 28px rgba(15,23,42,.10);
}
.about-point:hover::after{opacity:1}
.about-point > *{position:relative; z-index:1}
.about-ico{
  width:30px;height:30px;border-radius:10px;
  background:#f6f8ff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex:0 0 30px;
  transition:transform .18s ease, box-shadow .2s ease;
}
.about-point:hover .about-ico{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 8px 18px rgba(37,99,235,.18);
}
.about-ico img{width:20px;height:20px;display:block}
.about-title{font-weight:800;color:var(--text-soft);margin-bottom:4px}
.about-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.about-stat{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:14px;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.about-stat::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(13,148,136,.08), rgba(37,99,235,.06) 50%, rgba(124,58,237,.08));
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.about-stat:hover{
  transform:translateY(-2px);
  border-color:rgba(37,99,235,.26);
  box-shadow:0 12px 28px rgba(15,23,42,.10);
}
.about-stat:hover::after{opacity:1}
.about-stat > *{position:relative; z-index:1}
.about-stat-k{font-size:13px;color:var(--muted);margin-bottom:6px}
.about-stat-v{font-size:24px;font-weight:900;color:var(--accent-dim);line-height:1.2;margin-bottom:6px}
.about-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.about-values .about-value{
  position:relative;
  overflow:hidden;
  transform:translate3d(0,0,0);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.about-values .about-value::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-blue), var(--accent-violet));
  opacity:.75;
  pointer-events:none;
}
.about-values .about-value:nth-child(4n+1){
  background:linear-gradient(160deg, #ffffff 0%, #f4fdfa 100%);
  border-top:2px solid rgba(13,148,136,.28);
}
.about-values .about-value:nth-child(4n+2){
  background:linear-gradient(160deg, #ffffff 0%, #f4f8ff 100%);
  border-top:2px solid rgba(37,99,235,.26);
}
.about-values .about-value:nth-child(4n+3){
  background:linear-gradient(160deg, #ffffff 0%, #f9f5ff 100%);
  border-top:2px solid rgba(124,58,237,.24);
}
.about-values .about-value:nth-child(4n+4){
  background:linear-gradient(160deg, #ffffff 0%, #fffbf5 100%);
  border-top:2px solid rgba(217,119,6,.26);
}
@media (prefers-reduced-motion:no-preference){
  .about-values .about-value:hover{
    transform:translateY(-6px);
  }
  .about-values .about-value:nth-child(4n+1):hover{
    box-shadow:0 16px 38px rgba(13,148,136,.18);
    border-color:rgba(13,148,136,.3);
  }
  .about-values .about-value:nth-child(4n+2):hover{
    box-shadow:0 16px 38px rgba(37,99,235,.16);
    border-color:rgba(37,99,235,.28);
  }
  .about-values .about-value:nth-child(4n+3):hover{
    box-shadow:0 16px 38px rgba(124,58,237,.16);
    border-color:rgba(124,58,237,.3);
  }
  .about-values .about-value:nth-child(4n+4):hover{
    box-shadow:0 16px 38px rgba(217,119,6,.16);
    border-color:rgba(245,158,11,.28);
  }
}
@media (prefers-reduced-motion:reduce){
  .about-values .about-value:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(15,23,42,.1);
  }
}
.about-values .about-value:active{
  transform:translateY(-3px);
}
.about-app-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;align-items:start}
.about-app-badges{display:flex;gap:8px;flex-wrap:wrap}
.about-app{position:relative; overflow:hidden}
.about-app.about-app-has-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--about-app-bg);
  background-size:cover;
  background-position:center;
  filter:blur(6px);
  transform:scale(1.05);
  opacity:.72;
  pointer-events:none;
}
.about-app.about-app-has-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.42));
  pointer-events:none;
}
.about-app.about-app-has-bg > *{position:relative; z-index:1}
.about-shields{display:grid;gap:10px}
.about-shield{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:12px;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.about-shield::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(13,148,136,.08), rgba(37,99,235,.06) 50%, rgba(124,58,237,.08));
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.about-shield:hover{
  transform:translateY(-2px);
  border-color:rgba(13,148,136,.28);
  box-shadow:0 12px 28px rgba(15,23,42,.12);
}
.about-shield:hover::after{opacity:1}
.about-shield > *{position:relative; z-index:1}
.about-shield-k{
  font-weight:800;
  margin-bottom:4px;
  color:var(--text-soft);
}
.about-shield .meta{color:#475569}
.about-shield-k .gradtext{display:block; max-width:100%}
.about-shield-k .gradtext text{paint-order:stroke; stroke:rgba(255,255,255,.65); stroke-width:.6}
@media (max-width:900px){
  .about-grid,.about-app-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr}
}
@media (max-width:760px){
  .about-values{grid-template-columns:1fr}
}

/* 资讯 */
.news-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:768px){.news-list{grid-template-columns:1fr}}
.news-item{
  display:block;padding:18px;border-radius:var(--radius);
  background:var(--bg-card);
  border:1px solid var(--line);
  transition:border-color .2s, transform .15s, box-shadow .2s;
  box-shadow:0 2px 12px rgba(15,23,42,.04);
}
.news-list .news-item:nth-child(odd):hover{
  border-color:rgba(13,148,136,.35);transform:translateY(-2px);box-shadow:var(--glow);
}
.news-list .news-item:nth-child(even):hover{
  border-color:rgba(37,99,235,.35);transform:translateY(-2px);box-shadow:var(--glow-blue);
}
.news-item .date{font-size:12px;font-weight:700;margin-bottom:6px}
.news-list .news-item:nth-child(odd) .date{color:var(--accent-amber)}
.news-list .news-item:nth-child(even) .date{color:var(--accent-sky)}
.news-title{font-weight:800;margin:0 0 8px;font-size:16px;line-height:1.4;color:var(--text)}
.news-excerpt{font-size:14px;color:var(--muted);margin:0 0 12px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.link-more{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--accent-dim)}
.news-list .news-item:nth-child(even) .link-more{color:var(--accent-blue)}

.pill{
  display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  background:linear-gradient(135deg, rgba(217,119,6,.12), rgba(13,148,136,.1));
  color:var(--gold);border:1px solid rgba(217,119,6,.22);
}

.footer{
  margin-top:0;
  padding:20px 0 26px;
  background:linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.62));
  border-top:1px solid var(--line);
}
.footer.footer-has-bg{
  background-color:#0b1220;
  background-image:none;
  /* remove hard divider line on photo */
  border-top:0;
}
.footer.footer-has-bg .container::before{
  /* pixel-perfect seam cover between sections */
  content:"";
  position:absolute;
  left:0; right:0;
  top:-2px;
  height:3px;
  background:#f5f7fc;
  z-index:3;
  pointer-events:none;
}
.footer.footer-has-bg::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  z-index:0;
  /* lighter veil so the photo stays crisp */
  background-image:
    var(--footer-bg),
    linear-gradient(
      180deg,
      rgba(18,24,38,.36) 0%,
      rgba(18,24,38,.18) 46%,
      rgba(18,24,38,.34) 100%
    );
  background-size:cover, auto;
  background-position:center 58%, center;
  background-repeat:no-repeat, no-repeat;
  /* slight blur only on background image layer */
  filter:blur(3px);
  transform:scale(1.015);
  transform-origin:center;
  pointer-events:none;
}
.footer.footer-has-bg::after{
  /* hard-mask at the very top so the photo never leaks (then fade out) */
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  z-index:1;
  height:140px;
  /* keep a solid cap at the seam, then fade */
  background:linear-gradient(180deg,
    #f5f7fc 0%,
    #f5f7fc 60%,
    rgba(245,247,252,.82) 78%,
    rgba(245,247,252,0) 100%);
  pointer-events:none;
}
.footer{position:relative; overflow:hidden}
.footer .container{position:relative; z-index:2}
.footer-panel{
  border:1px solid rgba(255,255,255,.22);
  border-radius:16px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(13,148,136,.06), transparent 55%),
    radial-gradient(120% 100% at 100% 0%, rgba(124,58,237,.06), transparent 55%),
    rgba(245,247,252,.23);
  background-size:cover, cover, auto;
  background-position:center, center, center;
  box-shadow:0 20px 70px rgba(15,23,42,.14);
  padding:16px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(14px);
}
.footer-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(13,148,136,.09), transparent 52%),
    radial-gradient(120% 100% at 100% 0%, rgba(124,58,237,.09), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.10) 42%, rgba(255,255,255,.30) 100%);
  z-index:1;
  pointer-events:none;
}
.footer-panel > *{position:relative; z-index:2}
.footer-main{max-width:760px}
.footer-brand{
  font-size:15px;
  font-weight:800;
  color:var(--text);
  margin-bottom:6px;
}
.footer-desc{
  color:rgba(44,53,72,.92);
  font-size:13px;
  line-height:1.65;
}
.footer-meta{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:220px;
}
.footer-meta-title{
  font-size:13px;
  font-weight:950;
  letter-spacing:.06em;
  color:#0f172a;
  text-transform:uppercase;
  margin-bottom:2px;
}
.footer-chip{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(245,247,252,.29);
  border-radius:12px;
  padding:8px 10px;
  font-size:12.5px;
  color:var(--text-soft);
  box-shadow:0 8px 22px rgba(15,23,42,.10);
}
.footer-chip b{
  margin-right:8px;
  color:var(--accent-dim);
  font-weight:800;
}
.footer-copy{
  margin-top:10px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}
.footer-links{
  margin-top:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  color:var(--text-soft);
  font-size:13px;
}
.footer-links a{font-weight:800}
.footer-copy{font-weight:700}
.footer.footer-has-bg .footer-links,
.footer.footer-has-bg .footer-copy{
  color:rgba(15,23,42,.88);
  text-shadow:
    0 1px 0 rgba(255,255,255,.82),
    0 2px 10px rgba(255,255,255,.28);
}
.footer-bottom{
  width:100%;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.footer-bottom .footer-links{margin-top:0}
.footer-bottom .footer-copy{margin-top:0}
.footer-links a{
  color:var(--text-soft);
  transition:color .2s;
}
.footer-links a:hover{color:var(--accent-blue)}
.footer-links .sep{
  margin:0 8px;
  color:rgba(15,23,42,.55);
}
@media (max-width:760px){
  .footer-panel{padding:14px}
  .footer-meta{width:100%;min-width:0}
}

.crumb{color:var(--muted);font-size:13px;margin:14px 0}
.article h1{font-size:28px;margin:0 0 8px;color:var(--text)}
.article img{max-width:100%;border-radius:var(--radius);border:1px solid var(--line);margin:16px 0}
.pager{display:flex;gap:10px;justify-content:center;margin:20px 0;flex-wrap:wrap}
.pager a{
  padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--bg-card);color:var(--muted);font-weight:600;
}
.pager a.active{color:var(--accent-dim);border-color:var(--line-strong);background:#f4fdfa}

.readmore-section{
  margin-top:32px;padding-top:26px;border-top:1px solid var(--line);
}
.readmore-title{
  margin:0 0 8px;font-size:1.15rem;font-weight:800;color:var(--text);
}
.readmore-desc{
  margin:0 0 16px;font-size:13px;color:var(--muted);line-height:1.5;
}
.readmore-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  perspective:960px;
}
@media (max-width:768px){
  .readmore-grid{grid-template-columns:1fr}
}
.readmore-item{
  display:block;padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--bg-card);
  text-decoration:none;color:inherit;
  transform-style:preserve-3d;
  transform:translate3d(0,0,0) rotateX(0) rotateY(0);
  transition:border-color .2s ease, box-shadow .2s ease, transform .32s cubic-bezier(0.25,0.9,0.35,1);
}
@media (prefers-reduced-motion:no-preference){
  .readmore-item:hover{
    border-color:rgba(13,148,136,.28);
    box-shadow:0 10px 26px rgba(13,148,136,.12);
    transform:perspective(900px) rotateX(2.2deg) rotateY(-4deg) translateY(-3px) translateZ(6px);
  }
}
@media (prefers-reduced-motion:reduce){
  .readmore-item:hover{
    border-color:rgba(13,148,136,.28);
    box-shadow:0 8px 22px rgba(13,148,136,.1);
    transform:translateY(-2px);
  }
}
.readmore-item-title{
  font-weight:700;font-size:15px;color:var(--text-soft);line-height:1.4;
}

.admin-wrap{padding:22px 0}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
input,textarea,select{
  padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--bg-card);color:var(--text);
}
textarea{min-height:120px}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{color:var(--muted);font-weight:600;text-align:left;padding:0 10px}
.table td{padding:12px 10px;background:var(--bg-card);border:1px solid var(--line)}
.table tr td:first-child{border-radius:14px 0 0 14px}
.table tr td:last-child{border-radius:0 14px 14px 0}
.danger{color:#e11d48}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
@media (max-width:768px){.kpis{grid-template-columns:1fr}}
.kpi{
  padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--line);
  transform:translate3d(0,0,0);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.kpi:nth-child(3n+1){
  background:linear-gradient(135deg, rgba(13,148,136,.1), #ffffff);
  border-color:rgba(13,148,136,.2);
}
.kpi:nth-child(3n+2){
  background:linear-gradient(135deg, rgba(37,99,235,.1), #ffffff);
  border-color:rgba(37,99,235,.18);
}
.kpi:nth-child(3n+3){
  background:linear-gradient(135deg, rgba(124,58,237,.09), #ffffff);
  border-color:rgba(124,58,237,.18);
}
@media (prefers-reduced-motion:no-preference){
  .kpi:hover{
    transform:translateY(-6px);
  }
  .kpi:nth-child(3n+1):hover{
    box-shadow:0 16px 38px rgba(13,148,136,.18);
    border-color:rgba(13,148,136,.34);
  }
  .kpi:nth-child(3n+2):hover{
    box-shadow:0 16px 38px rgba(37,99,235,.16);
    border-color:rgba(37,99,235,.32);
  }
  .kpi:nth-child(3n+3):hover{
    box-shadow:0 16px 38px rgba(124,58,237,.16);
    border-color:rgba(124,58,237,.32);
  }
}
@media (prefers-reduced-motion:reduce){
  .kpi:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(15,23,42,.1);
  }
  .kpi:nth-child(3n+1):hover{
    border-color:rgba(13,148,136,.32);
  }
  .kpi:nth-child(3n+2):hover{
    border-color:rgba(37,99,235,.3);
  }
  .kpi:nth-child(3n+3):hover{
    border-color:rgba(124,58,237,.3);
  }
}
.kpi:active{
  transform:translateY(-3px);
}
.kpi b{display:block;margin-bottom:6px;font-size:14px;color:var(--text-soft)}
.kpi:nth-child(3n+1) b{color:var(--accent-dim)}
.kpi:nth-child(3n+2) b{color:#1e40af}
.kpi:nth-child(3n+3) b{color:#5b21b6}
.meta{color:var(--muted);font-size:13px}

/* ===========================
   H5 / Mobile responsive tune
   =========================== */
@media (max-width:560px){
  .container{padding:0 14px}
  .topbar-inner{
    min-height:60px;
    align-items:flex-start;
    flex-wrap:wrap;
    padding:8px 0;
    gap:8px;
  }
  .brand{gap:10px}
  .brand{width:100%}
  .logo{width:38px;height:38px;border-radius:11px}
  .logo::after{border-radius:9px}
  .logo-auto span{font-size:13px}
  .brand-title{font-size:1rem}
  .brand-sub{font-size:12px}

  .nav{
    flex-wrap:nowrap;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    gap:6px;
    width:100%;
    max-width:none;
    padding-bottom:2px;
    justify-content:flex-start;
  }
  .nav a{padding:8px 10px; font-size:13px; white-space:nowrap}

  .hero{padding:28px 0 6px}
  .sub{font-size:.98rem}
  .cta .btn{padding:12px 18px}

  .section{padding:28px 0}
  .section-title{font-size:1.18rem}

  .card-pad{padding:18px}
  .card-pad-mini{padding:16px}

  .about-photo{min-height:210px}
  .about-main{padding:16px}
  .about-point{padding:10px}

  .about-stat{padding:12px}
  .about-stat-v{font-size:22px}

  .quote{padding:16px}

  .about-app .card-pad{padding:18px}
  .about-app-badges{gap:6px}
  .pill{padding:5px 10px;font-size:11.5px}

  .footer{padding:16px 0 20px}
  .footer-panel{padding:14px}
  .footer-main{max-width:none}
  .footer-desc{font-size:12.5px}
  .footer-meta{width:100%}
  .footer-chip{font-size:12px}
  .footer-links{font-size:12.5px}
}

@media (max-width:420px){
  .container{padding:0 12px}
  .footer-links{gap:2px}
  .footer-links .sep{margin:0 6px}
}

/* Touch devices: avoid sticky hover states */
@media (hover:none){
  .feature-card:hover,
  .quote:hover,
  .news-item:hover,
  .about-point:hover,
  .about-stat:hover,
  .about-values .about-value:hover,
  .about-shield:hover{
    transform:none;
    box-shadow:inherit;
  }
  .about-point:hover::after,
  .about-stat:hover::after,
  .about-shield:hover::after{opacity:0}
}