.design-style-smart_security_guardian_web_design_concept_wgu{
  --bg:oklch(0.15 0.03 201);
  --surface:oklch(0.21 0.045 201);
  --surface-2:oklch(0.235 0.045 201);
  --primary:oklch(0.72 0.11 201);
  --secondary:oklch(0.62 0.11 261);
  --accent:oklch(0.78 0.13 36);
  --accent-2:oklch(0.90 0.09 36);
  --text:oklch(0.94 0.02 201);
  --muted:oklch(0.63 0.03 201);
  --line:color-mix(in oklab,var(--primary) 22%,transparent);
  --line-soft:color-mix(in oklab,var(--primary) 14%,transparent);
  --container:1140px;--container-lg:1400px;--container-xl:1660px;--gutter:clamp(14px,2.2vw,28px);
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:22px;--sp-6:30px;--sp-7:44px;--sp-8:60px;
  --r-xs:10px;--r-sm:14px;--r-md:20px;--r-lg:26px;--r-pill:999px;
  --sh-1:0 1px 0 rgba(255,255,255,.05) inset,0 2px 8px rgba(0,0,0,.35);
  --sh-2:0 1px 0 rgba(255,255,255,.06) inset,0 12px 30px rgba(0,0,0,.45);
  --sh-3:0 1px 0 rgba(255,255,255,.08) inset,0 26px 64px rgba(0,0,0,.55);
  --fs-xs:clamp(.72rem,.7rem + .1vw,.78rem);--fs-sm:clamp(.82rem,.8rem + .15vw,.9rem);--fs-md:clamp(.95rem,.9rem + .25vw,1.06rem);--fs-lg:clamp(1.14rem,1.05rem + .5vw,1.38rem);--fs-xl:clamp(1.5rem,1.3rem + 1vw,1.98rem);--fs-2xl:clamp(1.9rem,1.5rem + 2vw,2.85rem);--fs-3xl:clamp(2.4rem,1.8rem + 3vw,3.55rem);
  --lh-tight:1.1;--lh-snug:1.32;--lh-body:1.6;
  --ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--t-fast:.15s;--t-base:.25s;--t-slow:.45s;
  --nm-out:8px 8px 20px rgba(0,0,0,.55),-8px -8px 20px rgba(255,255,255,.045);
  --nm-out-sm:5px 5px 12px rgba(0,0,0,.5),-5px -5px 12px rgba(255,255,255,.04);
  --nm-in:inset 6px 6px 14px rgba(0,0,0,.6),inset -6px -6px 14px rgba(255,255,255,.05);
  --nm-in-sm:inset 4px 4px 9px rgba(0,0,0,.55),inset -4px -4px 9px rgba(255,255,255,.05);
  --font:ui-sans-serif,"Helvetica Neue","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  display:block;position:relative;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh-body);
  overflow-wrap:break-word;word-break:break-word;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.design-style-smart_security_guardian_web_design_concept_wgu *,
.design-style-smart_security_guardian_web_design_concept_wgu *::before,
.design-style-smart_security_guardian_web_design_concept_wgu *::after{box-sizing:border-box;min-width:0;}
.design-style-smart_security_guardian_web_design_concept_wgu img{max-width:100%;height:auto;display:block;}
.design-style-smart_security_guardian_web_design_concept_wgu h1,
.design-style-smart_security_guardian_web_design_concept_wgu h2,
.design-style-smart_security_guardian_web_design_concept_wgu h3,
.design-style-smart_security_guardian_web_design_concept_wgu h4,
.design-style-smart_security_guardian_web_design_concept_wgu p,
.design-style-smart_security_guardian_web_design_concept_wgu ul,
.design-style-smart_security_guardian_web_design_concept_wgu ol,
.design-style-smart_security_guardian_web_design_concept_wgu figure{margin:0;padding:0;list-style:none;}
.design-style-smart_security_guardian_web_design_concept_wgu a{color:inherit;text-decoration:none;}
.design-style-smart_security_guardian_web_design_concept_wgu :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm);}

/* ===== 顶部提示条 ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-notice{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;
  padding:var(--sp-2) var(--gutter);
  background:linear-gradient(90deg,color-mix(in oklab,var(--primary) 18%,var(--surface)),var(--surface) 62%);
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;
}
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-notice .dot{
  width:9px;height:9px;border-radius:var(--r-pill);background:var(--accent);flex:none;
  box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 22%,transparent);
  animation:wgu-pulse 2.6s var(--ease) infinite;
}
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-notice .tag{
  background:var(--nm-in-sm);border-radius:var(--r-pill);padding:2px var(--sp-3);
  color:var(--accent-2);font-size:var(--fs-xs);font-weight:700;flex:none;
}
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-notice p{color:var(--text);min-width:0;}
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-notice p b{color:var(--accent-2);}

/* ===== 顶栏导航 ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-nav{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-5);
  padding:var(--sp-3) var(--gutter);background:color-mix(in oklab,var(--bg) 88%,transparent);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-nav .brand{display:flex;align-items:center;gap:var(--sp-3);font-weight:900;letter-spacing:-.02em;font-size:var(--fs-lg);min-width:0;}
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-nav .brand .mark{
  width:38px;height:38px;border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--nm-out-sm);
  display:grid;place-items:center;flex:none;
}
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-nav .brand .mark svg{width:20px;height:20px;}
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-nav .links{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-left:auto;min-width:0;}
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-nav .links a{
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;
  color:var(--muted);background:var(--surface);box-shadow:var(--nm-out-sm);
  transition:color var(--t-base) var(--ease),transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-nav .links a:hover{color:var(--text);transform:translateY(-2px);box-shadow:var(--nm-out);}
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-nav .links a:active{box-shadow:var(--nm-in-sm);transform:translateY(0);}
.design-style-smart_security_guardian_web_design_concept_wgu .wgu-nav .links a:focus-visible{outline-offset:2px;}

/* ===== 容器 ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}

/* ===== Hero 网格拼图全景 + blob ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .hero{position:relative;overflow:hidden;padding:var(--sp-7) 0 var(--sp-8);}
.design-style-smart_security_guardian_web_design_concept_wgu .blob{
  position:absolute;border-radius:44% 56% 62% 38%/48% 42% 58% 52%;filter:blur(46px);opacity:.5;pointer-events:none;z-index:0;
}
.design-style-smart_security_guardian_web_design_concept_wgu .blob.b1{width:360px;height:340px;left:-90px;top:-70px;background:color-mix(in oklab,var(--primary) 42%,transparent);animation:wgu-float 16s var(--ease) infinite;}
.design-style-smart_security_guardian_web_design_concept_wgu .blob.b2{width:300px;height:300px;right:-70px;top:40px;background:color-mix(in oklab,var(--secondary) 34%,transparent);animation:wgu-float 21s var(--ease) infinite reverse;}
.design-style-smart_security_guardian_web_design_concept_wgu .blob.b3{width:260px;height:260px;left:38%;bottom:-120px;background:color-mix(in oklab,var(--accent) 22%,transparent);animation:wgu-float 19s var(--ease) infinite;}
.design-style-smart_security_guardian_web_design_concept_wgu .hero .wrap{position:relative;z-index:1;}
.design-style-smart_security_guardian_web_design_concept_wgu .hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-4);align-items:center;}
.design-style-smart_security_guardian_web_design_concept_wgu .hero-copy{grid-column:span 7;display:flex;flex-direction:column;gap:var(--sp-4);justify-content:center;min-width:0;}
.design-style-smart_security_guardian_web_design_concept_wgu .kicker{
  display:inline-flex;align-items:center;gap:var(--sp-2);align-self:flex-start;max-width:100%;
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);background:var(--surface);
  box-shadow:var(--nm-in-sm);font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);
}
.design-style-smart_security_guardian_web_design_concept_wgu .hero h1{
  font-size:var(--fs-3xl);line-height:var(--lh-tight);font-weight:900;letter-spacing:-.035em;
  text-shadow:0 2px 0 rgba(0,0,0,.35);
}
.design-style-smart_security_guardian_web_design_concept_wgu .hero h1 em{
  font-style:normal;color:var(--primary);
}
.design-style-smart_security_guardian_web_design_concept_wgu .hero p.lead{color:var(--muted);font-size:var(--fs-md);max-width:56ch;}
.design-style-smart_security_guardian_web_design_concept_wgu .hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;}
.design-style-smart_security_guardian_web_design_concept_wgu .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:800;letter-spacing:.01em;background:var(--surface);color:var(--text);
  box-shadow:var(--nm-out-sm);border:1px solid transparent;min-height:44px;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.design-style-smart_security_guardian_web_design_concept_wgu .btn:hover{transform:translateY(-3px);box-shadow:var(--nm-out);}
.design-style-smart_security_guardian_web_design_concept_wgu .btn:active{transform:translateY(0);box-shadow:var(--nm-in-sm);}
.design-style-smart_security_guardian_web_design_concept_wgu .btn.solid{
  background:linear-gradient(160deg,color-mix(in oklab,var(--primary) 88%,var(--surface)),color-mix(in oklab,var(--primary) 62%,var(--bg)));
  color:oklch(0.16 0.03 201);border-color:color-mix(in oklab,var(--primary) 60%,transparent);
}
.design-style-smart_security_guardian_web_design_concept_wgu .btn.solid:hover{border-color:color-mix(in oklab,var(--primary) 78%,transparent);}
.design-style-smart_security_guardian_web_design_concept_wgu .btn.ghost{color:var(--accent-2);}
.design-style-smart_security_guardian_web_design_concept_wgu .btn.ghost:hover{color:var(--accent-2);border-color:color-mix(in oklab,var(--accent) 34%,transparent);}

.design-style-smart_security_guardian_web_design_concept_wgu .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-2);}
.design-style-smart_security_guardian_web_design_concept_wgu .stat{
  background:var(--surface);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);box-shadow:var(--nm-out-sm);
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);min-width:0;
}
.design-style-smart_security_guardian_web_design_concept_wgu .stat:hover{transform:translateY(-3px);box-shadow:var(--nm-out);}
.design-style-smart_security_guardian_web_design_concept_wgu .stat b{display:block;font-size:var(--fs-xl);font-weight:900;letter-spacing:-.02em;color:var(--accent);line-height:1.1;}
.design-style-smart_security_guardian_web_design_concept_wgu .stat span{font-size:var(--fs-xs);color:var(--muted);}

/* Hero 图集拼图 */
.design-style-smart_security_guardian_web_design_concept_wgu .hero-mosaic{grid-column:span 5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--sp-3);min-width:0;}
.design-style-smart_security_guardian_web_design_concept_wgu .tile{
  position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--surface);box-shadow:var(--nm-out-sm);
  aspect-ratio:4/3;min-width:0;transition:transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out);
}
.design-style-smart_security_guardian_web_design_concept_wgu .tile img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform var(--t-slow) var(--ease-out),opacity var(--t-slow) var(--ease-out);}
.design-style-smart_security_guardian_web_design_concept_wgu .tile figcaption{
  position:absolute;left:var(--sp-2);bottom:var(--sp-2);right:var(--sp-2);font-size:var(--fs-xs);font-weight:700;
  padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);background:color-mix(in oklab,var(--bg) 72%,transparent);
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);color:var(--text);
  overflow-wrap:break-word;
}
.design-style-smart_security_guardian_web_design_concept_wgu .tile:hover{transform:translateY(-4px);box-shadow:var(--nm-out);}
.design-style-smart_security_guardian_web_design_concept_wgu .tile:hover img{transform:scale(1.05);opacity:1;}
.design-style-smart_security_guardian_web_design_concept_wgu .tile.tall{grid-row:span 2;aspect-ratio:auto;}

/* ===== 跑马灯签名 ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .marquee{
  position:relative;overflow:hidden;border-block:1px solid var(--line);
  background:var(--surface);box-shadow:var(--nm-in-sm);border-radius:0;
}
.design-style-smart_security_guardian_web_design_concept_wgu .marquee .track{display:flex;width:max-content;animation:wgu-marquee 26s linear infinite;}
.design-style-smart_security_guardian_web_design_concept_wgu .marquee .track span{
  padding:var(--sp-3) var(--sp-5);font-weight:900;letter-spacing:-.02em;font-size:var(--fs-sm);
  color:var(--muted);white-space:nowrap;text-transform:uppercase;
}
.design-style-smart_security_guardian_web_design_concept_wgu .marquee .track span:nth-child(odd){color:var(--primary);}
.design-style-smart_security_guardian_web_design_concept_wgu .marquee .track span::after{content:"◆";color:var(--accent);margin-left:var(--sp-5);font-size:.7em;}

/* ===== 通用区块 ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .sec{padding:var(--sp-7) 0;}
.design-style-smart_security_guardian_web_design_concept_wgu .sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-4);margin-bottom:var(--sp-5);}
.design-style-smart_security_guardian_web_design_concept_wgu .sec-head > *{min-width:0;}
.design-style-smart_security_guardian_web_design_concept_wgu .sec-head h2{font-size:var(--fs-2xl);font-weight:900;letter-spacing:-.03em;line-height:var(--lh-tight);}
.design-style-smart_security_guardian_web_design_concept_wgu .sec-head .hint{color:var(--muted);font-size:var(--fs-sm);max-width:52ch;margin-left:auto;}
.design-style-smart_security_guardian_web_design_concept_wgu .eyebrow{font-size:var(--fs-xs);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);display:block;margin-bottom:var(--sp-2);}

/* ===== 工作流程步骤 ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3);}
.design-style-smart_security_guardian_web_design_concept_wgu .step{
  background:var(--surface);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--nm-out-sm);
  display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.design-style-smart_security_guardian_web_design_concept_wgu .step:hover{transform:translateY(-4px);box-shadow:var(--nm-out);}
.design-style-smart_security_guardian_web_design_concept_wgu .step .num{
  font-size:var(--fs-lg);font-weight:900;color:var(--accent);letter-spacing:-.02em;line-height:1.1;
}
.design-style-smart_security_guardian_web_design_concept_wgu .step h3{font-size:var(--fs-md);font-weight:800;letter-spacing:-.01em;}
.design-style-smart_security_guardian_web_design_concept_wgu .step p{font-size:var(--fs-sm);color:var(--muted);}
.design-style-smart_security_guardian_web_design_concept_wgu .step .kv{font-size:var(--fs-xs);color:var(--primary);font-weight:700;margin-top:auto;}

/* ===== 合作伙伴墙 ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);}
.design-style-smart_security_guardian_web_design_concept_wgu .partner{
  background:var(--surface);border-radius:var(--r-sm);padding:var(--sp-4);box-shadow:var(--nm-in-sm);
  display:flex;flex-direction:column;gap:var(--sp-1);align-items:flex-start;min-width:0;
  transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.design-style-smart_security_guardian_web_design_concept_wgu .partner:hover{box-shadow:var(--nm-out-sm);transform:translateY(-3px);}
.design-style-smart_security_guardian_web_design_concept_wgu .partner b{font-weight:900;letter-spacing:-.01em;font-size:var(--fs-sm);}
.design-style-smart_security_guardian_web_design_concept_wgu .partner span{font-size:var(--fs-xs);color:var(--muted);}

/* ===== 客户评价（瀑布流不等高） ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .wall{columns:3;column-gap:var(--sp-4);}
.design-style-smart_security_guardian_web_design_concept_wgu .quote{
  break-inside:avoid;margin-bottom:var(--sp-4);background:var(--surface);border-radius:var(--r-md);
  padding:var(--sp-4);box-shadow:var(--nm-out-sm);border-left:3px solid color-mix(in oklab,var(--primary) 70%,transparent);
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.design-style-smart_security_guardian_web_design_concept_wgu .quote:hover{transform:translateY(-3px);box-shadow:var(--nm-out);}
.design-style-smart_security_guardian_web_design_concept_wgu .quote p{font-size:var(--fs-sm);}
.design-style-smart_security_guardian_web_design_concept_wgu .quote .who{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line);}
.design-style-smart_security_guardian_web_design_concept_wgu .quote .who .av{width:34px;height:34px;border-radius:var(--r-pill);background:var(--nm-in-sm);display:grid;place-items:center;font-weight:900;color:var(--accent-2);font-size:var(--fs-sm);flex:none;}
.design-style-smart_security_guardian_web_design_concept_wgu .quote .who b{display:block;font-size:var(--fs-sm);}
.design-style-smart_security_guardian_web_design_concept_wgu .quote .who span{font-size:var(--fs-xs);color:var(--muted);}
.design-style-smart_security_guardian_web_design_concept_wgu .quote .metric{display:inline-block;margin-top:var(--sp-3);font-size:var(--fs-xs);font-weight:800;color:var(--accent);background:var(--nm-in-sm);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);}

/* ===== 价格档位 ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);align-items:stretch;}
.design-style-smart_security_guardian_web_design_concept_wgu .tier{
  background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--nm-out-sm);
  display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.design-style-smart_security_guardian_web_design_concept_wgu .tier:hover{transform:translateY(-5px);box-shadow:var(--nm-out);}
.design-style-smart_security_guardian_web_design_concept_wgu .tier.best{box-shadow:var(--nm-out),0 0 0 1px color-mix(in oklab,var(--accent) 42%,transparent);}
.design-style-smart_security_guardian_web_design_concept_wgu .tier .badge{align-self:flex-start;font-size:var(--fs-xs);font-weight:800;color:var(--accent-2);background:var(--nm-in-sm);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);}
.design-style-smart_security_guardian_web_design_concept_wgu .tier h3{font-size:var(--fs-lg);font-weight:900;letter-spacing:-.02em;}
.design-style-smart_security_guardian_web_design_concept_wgu .tier .price{font-size:var(--fs-2xl);font-weight:900;letter-spacing:-.03em;color:var(--accent);line-height:1.05;}
.design-style-smart_security_guardian_web_design_concept_wgu .tier .price small{font-size:var(--fs-xs);color:var(--muted);font-weight:600;letter-spacing:0;}
.design-style-smart_security_guardian_web_design_concept_wgu .tier ul{display:flex;flex-direction:column;gap:var(--sp-2);}
.design-style-smart_security_guardian_web_design_concept_wgu .tier li{font-size:var(--fs-sm);color:var(--muted);padding-left:var(--sp-5);position:relative;}
.design-style-smart_security_guardian_web_design_concept_wgu .tier li::before{content:"✓";position:absolute;left:0;top:0;color:var(--primary);font-weight:900;}
.design-style-smart_security_guardian_web_design_concept_wgu .tier .btn{margin-top:auto;justify-content:center;}

/* ===== 实用指导清单 ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .guide{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-5);align-items:start;}
.design-style-smart_security_guardian_web_design_concept_wgu .checklist{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;}
.design-style-smart_security_guardian_web_design_concept_wgu .check{
  background:var(--surface);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--nm-out-sm);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);
}
.design-style-smart_security_guardian_web_design_concept_wgu .check .idx{
  width:34px;height:34px;border-radius:var(--r-sm);background:var(--nm-in-sm);display:grid;place-items:center;
  font-weight:900;color:var(--accent);font-size:var(--fs-sm);flex:none;
}
.design-style-smart_security_guardian_web_design_concept_wgu .check h3{font-size:var(--fs-md);font-weight:800;}
.design-style-smart_security_guardian_web_design_concept_wgu .check p{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1);}
.design-style-smart_security_guardian_web_design_concept_wgu .check .kv{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2);}
.design-style-smart_security_guardian_web_design_concept_wgu .check .kv i{font-style:normal;font-size:var(--fs-xs);font-weight:700;color:var(--primary);background:var(--nm-in-sm);padding:2px var(--sp-3);border-radius:var(--r-pill);}
.design-style-smart_security_guardian_web_design_concept_wgu .guide .visual{position:sticky;top:78px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--nm-out);background:var(--surface);}
.design-style-smart_security_guardian_web_design_concept_wgu .guide .visual img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.design-style-smart_security_guardian_web_design_concept_wgu .guide .visual figcaption{padding:var(--sp-4);font-size:var(--fs-sm);color:var(--muted);}

/* ===== 图文混排特写 ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .feature{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-4);align-items:center;}
.design-style-smart_security_guardian_web_design_concept_wgu .feature .pic{grid-column:span 6;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--nm-out);position:relative;min-width:0;}
.design-style-smart_security_guardian_web_design_concept_wgu .feature .pic img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.design-style-smart_security_guardian_web_design_concept_wgu .feature .pic .float{
  position:absolute;left:var(--sp-4);bottom:var(--sp-4);right:var(--sp-4);z-index:2;max-width:max-content;background:color-mix(in oklab,var(--bg) 76%,transparent);
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);box-shadow:var(--nm-out-sm);
}
.design-style-smart_security_guardian_web_design_concept_wgu .feature .pic .float b{display:block;font-size:var(--fs-lg);font-weight:900;color:var(--accent);letter-spacing:-.02em;}
.design-style-smart_security_guardian_web_design_concept_wgu .feature .pic .float span{font-size:var(--fs-xs);color:var(--muted);}
.design-style-smart_security_guardian_web_design_concept_wgu .feature .txt{grid-column:span 6;display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;}
.design-style-smart_security_guardian_web_design_concept_wgu .feature .txt h2{font-size:var(--fs-2xl);font-weight:900;letter-spacing:-.03em;line-height:var(--lh-tight);}
.design-style-smart_security_guardian_web_design_concept_wgu .feature .txt p{color:var(--muted);font-size:var(--fs-sm);}
.design-style-smart_security_guardian_web_design_concept_wgu .mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-2);}
.design-style-smart_security_guardian_web_design_concept_wgu .mini{background:var(--surface);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);box-shadow:var(--nm-in-sm);min-width:0;}
.design-style-smart_security_guardian_web_design_concept_wgu .mini b{display:block;color:var(--primary);font-weight:900;font-size:var(--fs-md);}
.design-style-smart_security_guardian_web_design_concept_wgu .mini span{font-size:var(--fs-xs);color:var(--muted);}

/* ===== CTA 内嵌色带 ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .cta-band{
  margin:var(--sp-7) 0;border-radius:var(--r-lg);padding:var(--sp-6);
  background:linear-gradient(120deg,color-mix(in oklab,var(--secondary) 24%,var(--surface)),var(--surface) 58%,color-mix(in oklab,var(--primary) 20%,var(--surface)));
  box-shadow:var(--nm-out);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--sp-5);align-items:center;position:relative;overflow:hidden;
}
.design-style-smart_security_guardian_web_design_concept_wgu .cta-band > *{min-width:0;}
.design-style-smart_security_guardian_web_design_concept_wgu .cta-band h2{font-size:var(--fs-xl);font-weight:900;letter-spacing:-.03em;line-height:var(--lh-tight);}
.design-style-smart_security_guardian_web_design_concept_wgu .cta-band p{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-2);}
.design-style-smart_security_guardian_web_design_concept_wgu .cta-band .acts{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:flex-end;}

/* ===== 页脚 ===== */
.design-style-smart_security_guardian_web_design_concept_wgu .foot{border-top:1px solid var(--line);padding:var(--sp-6) 0 var(--sp-5);background:color-mix(in oklab,var(--bg) 92%,var(--surface));}
.design-style-smart_security_guardian_web_design_concept_wgu .foot .cols{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:var(--sp-5);}
.design-style-smart_security_guardian_web_design_concept_wgu .foot .cols > *{min-width:0;}
.design-style-smart_security_guardian_web_design_concept_wgu .foot h4{font-size:var(--fs-sm);font-weight:900;letter-spacing:.02em;margin-bottom:var(--sp-3);color:var(--text);}
.design-style-smart_security_guardian_web_design_concept_wgu .foot p,.design-style-smart_security_guardian_web_design_concept_wgu .foot li{font-size:var(--fs-xs);color:var(--muted);}
.design-style-smart_security_guardian_web_design_concept_wgu .foot li{padding:3px 0;}
.design-style-smart_security_guardian_web_design_concept_wgu .foot .legal{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;font-size:var(--fs-xs);color:var(--muted);}

/* ===== 动画（加载即播，默认可见） ===== */
@keyframes wgu-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wgu-float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14px,-18px,0) scale(1.06)}}
@keyframes wgu-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.86)}}
@keyframes wgu-rise{from{transform:translateY(16px)}to{transform:translateY(0)}}
.design-style-smart_security_guardian_web_design_concept_wgu .rise{animation:wgu-rise .6s var(--ease-out) both;}
.design-style-smart_security_guardian_web_design_concept_wgu .rise.d1{animation-delay:.06s}
.design-style-smart_security_guardian_web_design_concept_wgu .rise.d2{animation-delay:.12s}
.design-style-smart_security_guardian_web_design_concept_wgu .rise.d3{animation-delay:.18s}
.design-style-smart_security_guardian_web_design_concept_wgu .rise.d4{animation-delay:.24s}

/* ===== 响应式 ===== */
@media (min-width:1600px){
  .design-style-smart_security_guardian_web_design_concept_wgu .wrap{max-width:var(--container-lg);}
  .design-style-smart_security_guardian_web_design_concept_wgu .flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4);}
  .design-style-smart_security_guardian_web_design_concept_wgu .partners{grid-template-columns:repeat(6,minmax(0,1fr));}
}
@media (min-width:1900px){
  .design-style-smart_security_guardian_web_design_concept_wgu .wrap{max-width:var(--container-xl);}
  .design-style-smart_security_guardian_web_design_concept_wgu{font-size:calc(var(--fs-md) * 1.04);}
  .design-style-smart_security_guardian_web_design_concept_wgu .sec{padding:calc(var(--sp-7) * 1.08) 0;}
  .design-style-smart_security_guardian_web_design_concept_wgu .hero{padding:calc(var(--sp-7) * 1.08) 0 var(--sp-8);}
}
@media (max-width:1024px){
  .design-style-smart_security_guardian_web_design_concept_wgu .hero-copy{grid-column:span 12;}
  .design-style-smart_security_guardian_web_design_concept_wgu .hero-mosaic{grid-column:span 12;}
  .design-style-smart_security_guardian_web_design_concept_wgu .flow{grid-template-columns:repeat(2,minmax(0,1fr));}
  .design-style-smart_security_guardian_web_design_concept_wgu .wall{columns:2;}
  .design-style-smart_security_guardian_web_design_concept_wgu .tiers{grid-template-columns:repeat(2,minmax(0,1fr));}
  .design-style-smart_security_guardian_web_design_concept_wgu .guide{grid-template-columns:1fr;}
  .design-style-smart_security_guardian_web_design_concept_wgu .guide .visual{position:static;}
  .design-style-smart_security_guardian_web_design_concept_wgu .feature .pic,.design-style-smart_security_guardian_web_design_concept_wgu .feature .txt{grid-column:span 12;}
  .design-style-smart_security_guardian_web_design_concept_wgu .cta-band{grid-template-columns:1fr;}
  .design-style-smart_security_guardian_web_design_concept_wgu .cta-band .acts{justify-content:flex-start;}
  .design-style-smart_security_guardian_web_design_concept_wgu .foot .cols{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .design-style-smart_security_guardian_web_design_concept_wgu .wgu-nav{flex-wrap:wrap;gap:var(--sp-3);}
  .design-style-smart_security_guardian_web_design_concept_wgu .wgu-nav .links{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--sp-1);-webkit-overflow-scrolling:touch;}
  .design-style-smart_security_guardian_web_design_concept_wgu .wgu-nav .links a{flex:none;}
  .design-style-smart_security_guardian_web_design_concept_wgu .hero-stats{grid-template-columns:1fr;}
  .design-style-smart_security_guardian_web_design_concept_wgu .flow{grid-template-columns:1fr;}
  .design-style-smart_security_guardian_web_design_concept_wgu .wall{columns:1;}
  .design-style-smart_security_guardian_web_design_concept_wgu .tiers{grid-template-columns:1fr;}
  .design-style-smart_security_guardian_web_design_concept_wgu .mini-grid{grid-template-columns:1fr;}
  .design-style-smart_security_guardian_web_design_concept_wgu .foot .cols{grid-template-columns:1fr;}
  .design-style-smart_security_guardian_web_design_concept_wgu .sec{padding:var(--sp-6) 0;}
  .design-style-smart_security_guardian_web_design_concept_wgu .sec-head .hint{margin-left:0;}
}
@media (max-width:380px){
  .design-style-smart_security_guardian_web_design_concept_wgu .wrap{padding-inline:var(--sp-3);}
  .design-style-smart_security_guardian_web_design_concept_wgu .hero{padding:var(--sp-5) 0 var(--sp-6);}
  .design-style-smart_security_guardian_web_design_concept_wgu .hero h1{font-size:var(--fs-2xl);}
  .design-style-smart_security_guardian_web_design_concept_wgu .tier,.design-style-smart_security_guardian_web_design_concept_wgu .check,.design-style-smart_security_guardian_web_design_concept_wgu .step,.design-style-smart_security_guardian_web_design_concept_wgu .quote,.design-style-smart_security_guardian_web_design_concept_wgu .partner{padding:var(--sp-3);}
  .design-style-smart_security_guardian_web_design_concept_wgu .hero-mosaic{grid-template-columns:1fr;}
  .design-style-smart_security_guardian_web_design_concept_wgu .tile.tall{grid-row:auto;aspect-ratio:4/3;}
  .design-style-smart_security_guardian_web_design_concept_wgu .wgu-notice{font-size:var(--fs-xs);}
  .design-style-smart_security_guardian_web_design_concept_wgu .cta-band{padding:var(--sp-4);}
  .design-style-smart_security_guardian_web_design_concept_wgu .btn{padding:var(--sp-2) var(--sp-4);}
}
@media (prefers-reduced-motion:reduce){
  .design-style-smart_security_guardian_web_design_concept_wgu .blob,
  .design-style-smart_security_guardian_web_design_concept_wgu .marquee .track,
  .design-style-smart_security_guardian_web_design_concept_wgu .wgu-notice .dot,
  .design-style-smart_security_guardian_web_design_concept_wgu .rise{animation:none !important;}
  .design-style-smart_security_guardian_web_design_concept_wgu *{transition-duration:.01ms !important;}
}
@media (hover:none){
  .design-style-smart_security_guardian_web_design_concept_wgu .btn:hover,
  .design-style-smart_security_guardian_web_design_concept_wgu .tile:hover,
  .design-style-smart_security_guardian_web_design_concept_wgu .stat:hover,
  .design-style-smart_security_guardian_web_design_concept_wgu .step:hover,
  .design-style-smart_security_guardian_web_design_concept_wgu .quote:hover,
  .design-style-smart_security_guardian_web_design_concept_wgu .tier:hover,
  .design-style-smart_security_guardian_web_design_concept_wgu .partner:hover{transform:none;}
}