/* Migrated from the supplied smart-security-access source; all selectors are article-scoped. */
.smart-security-access-page{

  --paper: #06101d;
  --paper-2: #0a1727;
  --paper-3: #0f1f32;
  --paper-4: #12253b;
  --ink: #f5f7fa;
  --ink-2: #aab6c5;
  --ink-3: #7e8b9b;
  --ink-4: #5a6675;
  --line: rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.18);


  --pass: #35c3d4;
  --pass-2: #5de4df;
  --pass-deep: #1b7a88;
  --status: #ffb020;
  --alarm: #ff5a5f;
  --alarm-deep: #b32d32;


  --blue: #2f7cf6;
  --blue-hover: #4d8df7;
  --blue-action: #1764d8;


  --wall: #081522;
  --wall-2: #0f1f32;
  --wall-line: rgba(255,255,255,.12);


  --en-disp: "Space Grotesk", "PingFang SC", system-ui, sans-serif;
  --cn-disp: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", serif;
  --sans: "PingFang SC", "Source Han Sans SC", "Noto Sans SC",
          "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas,
          "Liberation Mono", monospace;


  --page: 1380px;
  --gutter: clamp(20px, 4.5vw, 60px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}
.smart-security-access-page *, .smart-security-access-page *::before, .smart-security-access-page *::after{ box-sizing:border-box }
.smart-security-access-page, .smart-security-access-page{ margin:0; padding:0 }
.smart-security-access-page figure, .smart-security-access-page blockquote, .smart-security-access-page fieldset{ margin:0; padding:0; border:0 }
.smart-security-access-page svg{ shape-rendering:geometricPrecision }
.smart-security-access-page{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
.smart-security-access-page{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
.smart-security-access-page img, .smart-security-access-page svg{ display:block; max-width:100% }
.smart-security-access-page img{ height:auto }
.smart-security-access-page a{ color:inherit; text-decoration:none }
.smart-security-access-page button{ font:inherit; cursor:pointer }
.smart-security-access-page hr{ border:0; border-top:1px solid var(--line); margin:0 }
.smart-security-access-page ::selection{ background:var(--pass); color:#fff }
.smart-security-access-page::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 40%, transparent 95%);
}
.smart-security-access-page .page{ position:relative; z-index:1 }
.smart-security-access-page .wrap{
  max-width:var(--page);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.smart-security-access-page .eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--ink-3); text-transform:uppercase;
}
.smart-security-access-page .eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--pass);
  box-shadow:0 0 0 0 rgba(106,180,176,.6);
  animation:ssa-pulse 2.2s var(--ease-io) infinite;
}
@keyframes ssa-pulse{
  0%{ box-shadow:0 0 0 0 rgba(106,180,176,.6) }
  70%{ box-shadow:0 0 0 12px rgba(106,180,176,0) }
  100%{ box-shadow:0 0 0 0 rgba(106,180,176,0) }
}
@keyframes ssa-flowDown{
  to{ stroke-dashoffset:-40 }
}
@keyframes ssa-flowProgress{
  from{ stroke-dashoffset:680 }
  to{ stroke-dashoffset:0 }
}
.smart-security-access-page .arch-flow path{ animation:ssa-flowDown 1.6s linear infinite }
.smart-security-access-page .arch-flow path:nth-child(2){ animation-delay:.2s }
.smart-security-access-page .arch-flow path:nth-child(3){ animation-delay:.4s }
.smart-security-access-page .arch-flow path:nth-child(4){ animation-delay:.6s }
@keyframes ssa-streamUp{
  from{ transform:translateY(0) }
  to{ transform:translateY(-50%) }
}
.smart-security-access-page .display, .smart-security-access-page h1, .smart-security-access-page h2, .smart-security-access-page h3{ letter-spacing:-.01em; margin:0 }
.smart-security-access-page .cn-display{
  font-family:var(--cn-disp); font-weight:600; line-height:1.15;
  font-feature-settings:"kern" 1;
}
.smart-security-access-page .mono-num{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.smart-security-access-page h1.hero-title{
  font-family:var(--cn-disp); font-weight:600;
  font-size:clamp(40px, 6.6vw, 84px);
  line-height:1.06; letter-spacing:-.015em;
}
.smart-security-access-page h1.hero-title em{
  font-style:normal; position:relative;
  background:linear-gradient(transparent 62%, rgba(255,176,32,.42) 62%);
}
.smart-security-access-page h2.section-title{
  font-family:var(--cn-disp); font-weight:600;
  font-size:clamp(28px, 3.6vw, 48px);
  line-height:1.18; letter-spacing:-.012em;
}
.smart-security-access-page h3.card-title{
  font-family:var(--cn-disp); font-weight:600;
  font-size:clamp(18px, 1.4vw, 22px);
  line-height:1.35;
}
.smart-security-access-page .lede{
  font-size:clamp(16px, 1.2vw, 18px);
  color:var(--ink-2); max-width:64ch; line-height:1.75;
}
.smart-security-access-page .nav{
  position:sticky; top:0; z-index:50;
  background:rgba(6,16,29,.72);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.smart-security-access-page .nav.is-stuck{
  border-color:var(--line);
  background:rgba(6,16,29,.94);
}
.smart-security-access-page .nav-inner{
  display:flex; align-items:center; gap:36px;
  height:68px;
}
.smart-security-access-page .brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--cn-disp); font-weight:600; font-size:17px;
  color:var(--ink); letter-spacing:.01em;
}
.smart-security-access-page .brand-mark{
  width:30px; height:30px; border-radius:6px;
  background:linear-gradient(135deg, var(--blue-action) 0%, var(--pass) 100%);
  position:relative; overflow:hidden;
}
.smart-security-access-page .brand-mark::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:var(--pass); box-shadow:0 -8px 0 -1px var(--status);
}
.smart-security-access-page .brand small{
  display:block; font-family:var(--mono); font-size:10px;
  color:var(--ink-3); letter-spacing:.18em; text-transform:uppercase;
  margin-top:2px;
}
.smart-security-access-page .nav-links{
  display:flex; align-items:center; gap:6px; margin-left:auto;
}
.smart-security-access-page .nav-links a{
  font-size:14px; color:var(--ink-2);
  padding:8px 12px; border-radius:8px;
  transition:color .2s, background .2s;
}
.smart-security-access-page .nav-links a:hover{ color:var(--ink); background:var(--paper-2) }
.smart-security-access-page .nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px; border-radius:8px;
  background:var(--pass); color:#04121a; font-size:13px;
  border:1px solid var(--pass);
  transition:background .2s, color .2s;
}
.smart-security-access-page .nav-cta:hover{ background:var(--pass-2); border-color:var(--pass-2) }
.smart-security-access-page .menu-btn{ display:none; background:transparent; border:0; padding:8px }
.smart-security-access-page .menu-btn span{ display:block; width:22px; height:1.5px; background:var(--ink); margin:5px 0 }
.smart-security-access-page .btn{
  display:inline-flex; align-items:center; gap:10px;
  height:48px; padding:0 22px; border-radius:8px;
  font-size:15px; font-weight:500; letter-spacing:.02em;
  border:1px solid transparent; position:relative; overflow:hidden;
  transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.smart-security-access-page .btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 0 30%, rgba(255,255,255,.35) 50%, transparent 70% 100%);
  transform:translateX(-120%); transition:transform .8s var(--ease);
}
.smart-security-access-page .btn:hover::after{ transform:translateX(120%) }
.smart-security-access-page .btn:hover{ transform:translateY(-1px) }
.smart-security-access-page .btn-primary{ background:var(--pass); color:#04121a; border-color:var(--pass); font-weight:600 }
.smart-security-access-page .btn-primary:hover{ background:var(--pass-2); border-color:var(--pass-2) }
.smart-security-access-page .btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--line-2);
}
.smart-security-access-page .btn-ghost:hover{ background:var(--pass); color:#04121a; border-color:var(--pass) }
.smart-security-access-page .btn .arrow{ display:inline-block; transition:transform .25s }
.smart-security-access-page .btn:hover .arrow{ transform:translateX(3px) }
.smart-security-access-page section{ position:relative; scroll-margin-top:80px }
.smart-security-access-page .sec-head{ display:grid; grid-template-columns: 1.1fr 1fr; gap:32px; margin-bottom:30px; align-items:end }
.smart-security-access-page .sec-head .head-eyebrow{ margin-bottom:18px }
.smart-security-access-page .sec-head .head-meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--ink-3); text-transform:uppercase;
  display:flex; align-items:center; gap:14px;
}
.smart-security-access-page .sec-head .head-meta .tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border:1px solid var(--line-2); border-radius:4px;
  color:var(--ink-2); background:var(--paper-2);
}
.smart-security-access-page .sec-head .head-meta b{ color:var(--ink); font-weight:600 }
@media (max-width: 880px){.smart-security-access-page .sec-head{ grid-template-columns:1fr; gap:24px }

}
.smart-security-access-page .hero{
  position:relative; display:flex; align-items:stretch;
  min-height:calc(100svh - var(--ssa-header-height));
  padding:clamp(32px, 6vh, 72px) 0 48px;
  overflow:hidden; isolation:isolate;
  background:var(--paper);
}
.smart-security-access-page .hero-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:55% center;
  filter:brightness(.54) saturate(.78) contrast(1.06);
}
.smart-security-access-page .hero-backdrop{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(3,12,20,.30) 0%, rgba(3,12,20,.26) 32%, rgba(3,12,20,.70) 78%, rgba(3,12,20,.92) 100%),
    linear-gradient(90deg, rgba(3,12,20,.88) 0%, rgba(3,12,20,.56) 42%, rgba(3,12,20,.24) 75%, rgba(3,12,20,.38) 100%);
}
.smart-security-access-page .hero > .wrap{
  position:relative; z-index:2; width:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.smart-security-access-page .hero-grid{
  width:100%; flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap:36px; align-items:end;
}
.smart-security-access-page .hero-grid > div:first-child{ min-width:0; align-self:end }
.smart-security-access-page .hero-media{
  width:100%; max-width:560px; margin-left:auto; align-self:end;
}
.smart-security-access-page .hero-tags{
  display:flex; flex-wrap:wrap; gap:8px; margin: 22px 0 28px;
}
.smart-security-access-page .tag-chip{
  display:inline-flex; align-items:center; gap:8px;
  height:30px; padding:0 12px; border-radius:999px;
  background:var(--paper-2); border:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink-2);
}
.smart-security-access-page .tag-chip::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--pass);
}
.smart-security-access-page .tag-chip.is-status::before{ background:var(--status) }
.smart-security-access-page .tag-chip.is-alarm::before{ background:var(--alarm) }
.smart-security-access-page .hero-cta{ display:flex; gap:12px; flex-wrap:wrap }
.smart-security-access-page .hero-figure{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:var(--wall);
  aspect-ratio: 16/10;
  box-shadow:
    0 30px 60px -20px rgba(15, 25, 35, .35),
    0 0 0 1px var(--wall-line);
}
.smart-security-access-page .hero-figure .wall-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: brightness(.9) contrast(1.05);
}
.smart-security-access-page .hero-figure .wall-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,18,26,.55) 0%, rgba(10,18,26,.15) 50%, rgba(10,18,26,.55) 100%);
  pointer-events:none;
}
.smart-security-access-page .hero-figure .scan{
  position:absolute; left:0; right:0; top:0;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--pass), transparent);
  box-shadow:0 0 12px 1px var(--pass);
  animation:ssa-scan 6s var(--ease-io) infinite;
  opacity:.85;
}
@keyframes ssa-scan{
  0%, 4%{ transform:translateY(0) }
  50%, 54%{ transform:translateY(calc(100% + 280px)) }
  100%{ transform:translateY(calc(100% + 280px)) }
}
.smart-security-access-page .hero-figure .hud{
  position:absolute; color: rgba(255,255,255,.92);
  font-family:var(--mono); font-size:11px; letter-spacing:.05em;
}
.smart-security-access-page .hud-tl{ top:14px; left:14px; display:flex; gap:8px; align-items:center }
.smart-security-access-page .hud-tl .live{ color:var(--pass-2); display:inline-flex; align-items:center; gap:6px }
.smart-security-access-page .hud-tl .live::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--pass);
  animation:ssa-pulse 1.8s var(--ease-io) infinite;
}
.smart-security-access-page .hud-tl .stamp{
  padding:3px 8px; border:1px solid rgba(255,255,255,.25); border-radius:3px;
  background:rgba(0,0,0,.4);
}
.smart-security-access-page .hud-tr{ top:14px; right:14px; text-align:right }
.smart-security-access-page .hud-tr .clock{ font-size:14px; font-weight:600 }
.smart-security-access-page .hud-bl{ bottom:14px; left:14px; right:14px; display:flex; gap:18px; flex-wrap:wrap }
.smart-security-access-page .hud-bl .stat{ display:flex; flex-direction:column; gap:2px }
.smart-security-access-page .hud-bl .stat .k{ font-size:10px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.18em }
.smart-security-access-page .hud-bl .stat .v{ font-size:16px; font-weight:600; color:#fff }
.smart-security-access-page .hud-bl .stat .v.pass{ color:var(--pass-2) }
.smart-security-access-page .hud-bl .stat .v.alarm{ color:#ff7b7f }
.smart-security-access-page .hud-bl .stat .v.status{ color:#ffc24d }
.smart-security-access-page .pin{
  position:absolute; width:14px; height:14px; pointer-events:none;
}
.smart-security-access-page .pin .ring{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--pass); opacity:.65;
  animation:ssa-ring 2.8s var(--ease-io) infinite;
}
.smart-security-access-page .pin .core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:5px; height:5px; border-radius:50%; background:var(--pass);
  box-shadow:0 0 6px var(--pass);
}
@keyframes ssa-ring{
  0%{ transform:scale(.4); opacity:.85 }
  100%{ transform:scale(2.2); opacity:0 }
}
.smart-security-access-page .pin.is-alarm .ring{ border-color:var(--alarm); animation-delay:.7s }
.smart-security-access-page .pin.is-alarm .core{ background:var(--alarm); box-shadow:0 0 6px var(--alarm) }
.smart-security-access-page .pin.is-status .ring{ border-color:var(--status); animation-delay:1.4s }
.smart-security-access-page .pin.is-status .core{ background:var(--status); box-shadow:0 0 6px var(--status) }
.smart-security-access-page .event-stream{
  position:absolute; top:52px; right:14px; width:46%; height:54%;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.smart-security-access-page .event-stream .stream-track{
  display:flex; flex-direction:column;
  animation:ssa-streamUp 18s linear infinite;
  will-change:transform;
}
.smart-security-access-page .stream-row{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px;
  font-family:var(--mono); font-size:10px;
  color:rgba(255,255,255,.85); letter-spacing:.04em;
  white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.smart-security-access-page .stream-row .t{ color:rgba(255,255,255,.45); flex-shrink:0 }
.smart-security-access-page .stream-row .dot{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.smart-security-access-page .stream-row .dot.pass{ background:var(--pass); box-shadow:0 0 6px var(--pass) }
.smart-security-access-page .stream-row .dot.alarm{ background:var(--alarm); box-shadow:0 0 6px var(--alarm) }
.smart-security-access-page .stream-row .dot.status{ background:var(--status); box-shadow:0 0 6px var(--status) }
.smart-security-access-page .stream-row .msg{ color:rgba(255,255,255,.78); overflow:hidden; text-overflow:ellipsis }
@media (max-width: 1024px){.smart-security-access-page .event-stream{ display:none }
 }
.smart-security-access-page .hero-caption{
  margin-top:12px; display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; font-family:var(--mono); font-size:11px; color:rgba(245,247,250,.72); letter-spacing:.05em;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.smart-security-access-page .hero-caption span:first-child{ text-transform:uppercase }
@media (max-width: 1024px){.smart-security-access-page .hero-grid{ grid-template-columns:1fr; gap:36px }
.smart-security-access-page .hero-figure{ aspect-ratio: 16/10 }

}
.smart-security-access-page .trust{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding: 36px 0;
}
.smart-security-access-page .trust-row{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:20px;
}
.smart-security-access-page .trust .cell{ display:flex; flex-direction:column; gap:6px }
.smart-security-access-page .trust .k{
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  letter-spacing:.16em; text-transform:uppercase;
}
.smart-security-access-page .trust .v{
  font-family:var(--en-disp); font-weight:600;
  font-size:clamp(28px, 3.6vw, 44px); line-height:1;
  color:var(--ink);
}
.smart-security-access-page .trust .v small{
  font-family:var(--en-disp); font-weight:500; font-size:.5em;
  color:var(--ink-3); margin-left:6px;
}
.smart-security-access-page .trust .sub{ color:var(--ink-3); font-size:13px; margin-top:4px }
@media (max-width: 760px){.smart-security-access-page .trust-row{ grid-template-columns: repeat(2, 1fr); gap:24px }

}
.smart-security-access-page .deliver-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.smart-security-access-page .cap{
  position:relative; padding:22px;
  background:var(--paper-3);
  border:1px solid var(--line);
  transition:background .25s var(--ease), transform .35s var(--ease), border-color .25s;
}
.smart-security-access-page .cap:hover{ background:var(--paper-4); border-color:var(--line-2) }
.smart-security-access-page .cap .idx{
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  letter-spacing:.18em;
}
.smart-security-access-page .cap .glyph{
  width:42px; height:42px; border-radius:8px;
  background:var(--paper-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--pass); margin: 14px 0 18px;
}
.smart-security-access-page .cap h3{ margin-bottom:6px }
.smart-security-access-page .cap p{ color:var(--ink-2); font-size:15px; line-height:1.68; margin:0 }
.smart-security-access-page .cap .sub-list{
  margin-top:18px; padding-top:18px; border-top:1px dashed var(--line-2);
  display:flex; flex-wrap:wrap; gap:6px;
}
.smart-security-access-page .cap .sub-list span{
  font-family:var(--mono); font-size:10px; color:var(--ink-3);
  letter-spacing:.04em; padding:4px 8px; border-radius:3px;
  background:var(--paper-2); border:1px solid var(--line);
}
@media (max-width: 1024px){.smart-security-access-page .deliver-grid{ grid-template-columns: repeat(2, 1fr) }

}
@media (max-width: 620px){.smart-security-access-page .deliver-grid{ grid-template-columns: 1fr }

}
.smart-security-access-page .arch{
  background:var(--wall);
  color:var(--ink);
  border-radius:14px;
  padding: clamp(28px, 4vw, 56px);
  overflow:hidden; position:relative;
}
.smart-security-access-page .arch::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.smart-security-access-page .arch .sec-head{ color:var(--ink) }
.smart-security-access-page .arch .sec-head h2{ color:var(--ink) }
.smart-security-access-page .arch .sec-head .head-meta{ color:rgba(255,255,255,.6) }
.smart-security-access-page .arch .sec-head .head-meta .tag{
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.12);
}
.smart-security-access-page .arch .sec-head .head-meta b{ color:var(--pass-2) }
.smart-security-access-page .arch .lede{ color:rgba(255,255,255,.7) }
.smart-security-access-page .arch-canvas{
  position:relative; width:100%;
  aspect-ratio: 16/9;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
@media (max-width: 760px){.smart-security-access-page .arch-canvas{
    aspect-ratio:auto;
    overflow-x:auto;
    overflow-y:hidden;
  }
.smart-security-access-page .arch-canvas > .arch-svg, .smart-security-access-page .arch-canvas > svg{
    min-width:760px;
    height:auto;
  }

}
.smart-security-access-page .arch-svg{ position:absolute; inset:0; width:100%; height:100% }
.smart-security-access-page .arch-tag{
  position:absolute; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; color:rgba(255,255,255,.55); text-transform:uppercase;
}
.smart-security-access-page .arch-tag.tl{ top:14px; left:16px }
.smart-security-access-page .arch-tag.tr{ top:14px; right:16px }
.smart-security-access-page .arch-tag.bl{ bottom:14px; left:16px }
.smart-security-access-page .arch-tag.br{ bottom:14px; right:16px }
.smart-security-access-page .arch-legend{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:14px; margin-top:24px;
}
.smart-security-access-page .arch-legend .li{
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:16px;
  background:rgba(255,255,255,.03);
}
.smart-security-access-page .arch-legend .li .k{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--pass-2); text-transform:uppercase; margin-bottom:6px;
}
.smart-security-access-page .arch-legend .li h4{
  font-family:var(--cn-disp); font-weight:600; font-size:17px;
  margin:0 0 8px; color:#fff;
}
.smart-security-access-page .arch-legend .li p{ margin:0; font-size:13px; color:rgba(255,255,255,.65); line-height:1.55 }
@media (max-width: 760px){.smart-security-access-page .arch-legend{ grid-template-columns: repeat(2, 1fr) }

}
@media (max-width: 480px){.smart-security-access-page .arch-legend{ grid-template-columns: 1fr }

}
.smart-security-access-page .sce-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:24px;
}
.smart-security-access-page .sce{
  position:relative; overflow:hidden;
  border-radius:14px; border:1px solid var(--line);
  background:var(--paper-3); display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.smart-security-access-page .sce:hover{ transform:translateY(-3px); box-shadow:0 18px 36px -18px rgba(15,25,35,.22) }
.smart-security-access-page .sce .photo{
  position:relative; aspect-ratio: 16/8.4; overflow:hidden;
  isolation:isolate;
}
.smart-security-access-page .sce .photo img{
  width:100%; height:100%; object-fit:cover;
  filter: brightness(.88) contrast(1.05);
  transition:transform .6s var(--ease);
}
.smart-security-access-page .sce:hover .photo img{ transform:scale(1.04) }
.smart-security-access-page .sce .photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(15,22,28,.7));
}
.smart-security-access-page .sce .badge{
  position:absolute; left:14px; top:14px; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:4px;
  background:rgba(15,22,28,.78); color:#fff;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  backdrop-filter:blur(6px);
}
.smart-security-access-page .sce .badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--pass); box-shadow:0 0 0 2px rgba(106,180,176,.25);
}
.smart-security-access-page .sce .body{ padding:18px; flex:1; display:flex; flex-direction:column; gap:12px }
.smart-security-access-page .sce h3{ font-size:21px }
.smart-security-access-page .sce p{ color:var(--ink-2); font-size:15px; line-height:1.7; margin:0 }
.smart-security-access-page .sce .pts{
  margin-top:6px; padding-top:14px; border-top:1px dashed var(--line-2);
  display:grid; grid-template-columns:1fr 1fr; gap:8px 16px;
  font-size:13px; color:var(--ink-2);
}
.smart-security-access-page .sce .pts .p{ display:flex; gap:8px; align-items:flex-start }
.smart-security-access-page .sce .pts .p::before{
  content:"›"; font-family:var(--mono); color:var(--pass); font-weight:700;
  margin-top:-1px;
}
@media (max-width: 760px){.smart-security-access-page .sce-grid{ grid-template-columns: 1fr }
 }
.smart-security-access-page .timeline{ position:relative; padding:24px 0 }
.smart-security-access-page .timeline .line{
  position:absolute; left:0; right:0; top:46px; height:1px;
  background:repeating-linear-gradient(to right, var(--line-2) 0 8px, transparent 8px 16px);
}
.smart-security-access-page .tl-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:14px;
}
.smart-security-access-page .tl-step{ position:relative; padding-top:80px }
.smart-security-access-page .tl-step .marker{
  position:absolute; left:0; top:36px; width:22px; height:22px;
  border-radius:50%; background:var(--paper); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; color:var(--ink); font-weight:600;
}
.smart-security-access-page .tl-step .marker::after{
  content:""; position:absolute; left:50%; top:-10px; transform:translateX(-50%);
  width:1px; height:8px; background:var(--ink-4);
}
.smart-security-access-page .tl-step .num{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-3);
  text-transform:uppercase; margin-bottom:6px;
}
.smart-security-access-page .tl-step h4{
  font-family:var(--cn-disp); font-weight:600; font-size:17px; margin:0 0 6px;
}
.smart-security-access-page .tl-step p{ margin:0; font-size:13px; color:var(--ink-2); line-height:1.6 }
@media (max-width: 1024px){.smart-security-access-page .tl-grid{ grid-template-columns: repeat(3, 1fr) }
.smart-security-access-page .timeline .line{ display:none }
 }
@media (max-width: 600px){.smart-security-access-page .tl-grid{ grid-template-columns: 1fr }
.smart-security-access-page .tl-step{ padding-top:0; padding-left:36px }
.smart-security-access-page .tl-step .marker{ left:0; top:0 }
 }
.smart-security-access-page .why-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.smart-security-access-page .why{ padding:22px; background:var(--paper-3) }
.smart-security-access-page .why .glyph{
  width:42px; height:42px; border-radius:8px;
  background:var(--paper-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  color:var(--ink);
}
.smart-security-access-page .why h3{ font-size:19px; margin-bottom:8px }
.smart-security-access-page .why p{ font-size:13px; color:var(--ink-2); margin:0 }
.smart-security-access-page .why .stat{
  margin-top:18px; padding-top:18px; border-top:1px dashed var(--line-2);
  display:flex; gap:14px; align-items:baseline;
}
.smart-security-access-page .why .stat .v{
  font-family:var(--en-disp); font-weight:600; font-size:28px; color:var(--ink);
  line-height:1;
}
.smart-security-access-page .why .stat .v small{ font-size:.5em; color:var(--ink-3); margin-left:4px; font-weight:500 }
.smart-security-access-page .why .stat .l{ font-size:12px; color:var(--ink-3) }
@media (max-width: 1024px){.smart-security-access-page .why-grid{ grid-template-columns: repeat(2, 1fr) }
 }
@media (max-width: 600px){.smart-security-access-page .why-grid{ grid-template-columns: 1fr }
 }
.smart-security-access-page .gal-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap:12px;
}
.smart-security-access-page .gal{
  position:relative; overflow:hidden; border-radius:10px;
  border:1px solid var(--line); background:var(--paper-2);
}
.smart-security-access-page .gal img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.smart-security-access-page .gal:hover img{ transform:scale(1.05) }
.smart-security-access-page .gal .lbl{
  position:absolute; left:12px; bottom:12px;
  padding:6px 10px; border-radius:4px;
  background:rgba(15,22,28,.78); color:#fff;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:8px;
}
.smart-security-access-page .gal .lbl::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--pass) }
.smart-security-access-page .gal.big{ grid-row: span 2 }
@media (max-width: 880px){.smart-security-access-page .gal-grid{ grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px }
.smart-security-access-page .gal.big{ grid-row:auto; grid-column: span 2 }

}
@media (max-width: 540px){.smart-security-access-page .gal-grid{ grid-template-columns: 1fr; grid-template-rows: repeat(5, 180px) }
.smart-security-access-page .gal.big{ grid-column:auto }

}
.smart-security-access-page .faq{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line) }
.smart-security-access-page .faq-item{ border-bottom:1px solid var(--line) }
.smart-security-access-page .faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:22px 4px; font-family:var(--cn-disp); font-weight:600; font-size:18px;
}
.smart-security-access-page .faq-item summary::-webkit-details-marker{ display:none }
.smart-security-access-page .faq-item summary .sign{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line-2);
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family:var(--mono); font-size:16px; color:var(--ink-2);
  transition:transform .3s var(--ease), background .3s, color .3s;
}
.smart-security-access-page .faq-item[open] summary .sign{ background:var(--ink); color:var(--paper); transform:rotate(45deg) }
.smart-security-access-page .faq-item .body{
  padding:0 4px 22px; color:var(--ink-2); font-size:15px; line-height:1.8;
  max-width:78ch;
}
.smart-security-access-page .cta-band{
  background:linear-gradient(135deg, #0f1f32 0%, #12253b 60%, #0a1727 100%); color:var(--ink);
  border-radius:14px; padding: clamp(36px, 5vw, 72px);
  display:grid; grid-template-columns: 1.4fr 1fr; gap:48px; align-items:center;
  position:relative; overflow:hidden;
}
.smart-security-access-page .cta-band::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events:none;
}
.smart-security-access-page .cta-band h2{ font-size:clamp(28px, 3.8vw, 44px); line-height:1.2; color:#fff }
.smart-security-access-page .cta-band p{ color:rgba(255,255,255,.7); margin:14px 0 0; font-size:16px; max-width:60ch }
.smart-security-access-page .cta-band .right{ display:flex; flex-direction:column; gap:14px; position:relative }
.smart-security-access-page .cta-band .info{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:16px 18px; border:1px solid rgba(255,255,255,.12); border-radius:10px;
  background:rgba(255,255,255,.04);
}
.smart-security-access-page .cta-band .info .k{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.55);
  text-transform:uppercase;
}
.smart-security-access-page .cta-band .info .v{ font-family:var(--cn-disp); font-weight:600; font-size:18px; color:#fff; margin-top:4px }
.smart-security-access-page .cta-band .btn-primary{ background:var(--pass); color:#04121a; border-color:var(--pass); font-weight:600 }
.smart-security-access-page .cta-band .btn-primary:hover{ background:var(--pass-2); color:#04121a }
.smart-security-access-page .cta-band .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.25) }
.smart-security-access-page .cta-band .btn-ghost:hover{ background:#fff; color:#04121a; border-color:#fff }
@media (max-width: 880px){.smart-security-access-page .cta-band{ grid-template-columns: 1fr; gap:28px }
 }
.smart-security-access-page .foot{
  margin-top: 48px; border-top:1px solid var(--line);
  padding: 48px 0 32px; color:var(--ink-3); font-size:13px;
}
.smart-security-access-page .foot-grid{
  display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap:48px;
}
.smart-security-access-page .foot h5{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 14px;
}
.smart-security-access-page .foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.smart-security-access-page .foot a:hover{ color:var(--ink) }
.smart-security-access-page .foot-bottom{
  margin-top:36px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
}
.smart-security-access-page .foot-bottom .meta{ display:flex; gap:18px; flex-wrap:wrap; color:var(--ink-4) }
@media (max-width: 880px){.smart-security-access-page .foot-grid{ grid-template-columns: 1fr 1fr; gap:28px }
 }
@media (max-width: 540px){.smart-security-access-page .foot-grid{ grid-template-columns: 1fr }
 }
.smart-security-access-page .reveal{
  opacity:1; transform:none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.smart-security-access-page .reveal.is-pre{
  opacity:0; transform:translateY(18px);
}
.smart-security-access-page .reveal.is-in{ opacity:1; transform:none }
.smart-security-access-page .hero-radar{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; opacity:.85; mix-blend-mode:screen;
}
.smart-security-access-page .hero-radar-sweep{
  transform-origin:200px 140px;
  animation:ssa-radarRotate 6s linear infinite;
  filter:drop-shadow(0 0 4px rgba(93,228,223,.6));
}
@keyframes ssa-radarRotate{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.smart-security-access-page .svc-chain{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:10px; overflow:hidden; margin-bottom:18px;
}
.smart-security-access-page .svc-chain .n{
  position:relative; background:var(--paper-3); overflow:hidden;
  padding:11px 13px; display:flex; flex-direction:column; gap:2px;
}
.smart-security-access-page .svc-chain .n::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--pass); transform:scaleX(0); transform-origin:left;
  animation:ssa-svcChain 9s var(--ease-io) infinite;
}
.smart-security-access-page .svc-chain .n:nth-child(2)::after{ animation-delay:.5s }
.smart-security-access-page .svc-chain .n:nth-child(3)::after{ animation-delay:1s }
.smart-security-access-page .svc-chain .n:nth-child(4)::after{ animation-delay:1.5s }
.smart-security-access-page .svc-chain .n:nth-child(5)::after{ animation-delay:2s }
.smart-security-access-page .svc-chain .n:nth-child(6)::after{ animation-delay:2.5s }
@keyframes ssa-svcChain{
  0%,8%{ transform:scaleX(0) } 16%,72%{ transform:scaleX(1) } 82%,100%{ transform:scaleX(0) }
}
.smart-security-access-page .svc-chain .n .i{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-3) }
.smart-security-access-page .svc-chain .n b{ font-size:14px; font-weight:600; color:var(--ink) }
.smart-security-access-page .svc-chain .n i{ font-style:normal; font-size:12px; color:var(--ink-2) }
.smart-security-access-page .svc-main{ display:grid; grid-template-columns:1.42fr 1fr; gap:18px; align-items:stretch }
.smart-security-access-page .svc-stage{
  position:relative; background:var(--paper-3); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; min-height:330px;
}
.smart-security-access-page .svc-stage svg{ width:100%; height:100%; display:block }
.smart-security-access-page .svc-list{
  display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.smart-security-access-page .svc-item{
  background:var(--paper-3); padding:13px 15px; flex:1;
  display:flex; gap:11px; align-items:flex-start;
  transition:background .25s var(--ease);
}
.smart-security-access-page .svc-item:hover{ background:var(--paper-4) }
.smart-security-access-page .svc-item .ic{
  width:28px; height:28px; border-radius:7px; flex-shrink:0;
  background:var(--paper-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--pass);
}
.smart-security-access-page .svc-item h4{ font-size:15px; font-weight:600; color:var(--ink); margin:0 0 3px }
.smart-security-access-page .svc-item p{ font-size:13px; line-height:1.62; color:var(--ink-2); margin:0 }
.smart-security-access-page .sv-tile{ animation:ssa-svTile 7s var(--ease-io) infinite }
.smart-security-access-page .sv-tile.d1{ animation-delay:.35s }
.smart-security-access-page .sv-tile.d2{ animation-delay:.7s }
.smart-security-access-page .sv-tile.d3{ animation-delay:1.05s }
.smart-security-access-page .sv-tile.d4{ animation-delay:1.4s }
.smart-security-access-page .sv-tile.d5{ animation-delay:1.75s }
.smart-security-access-page .sv-tile.d6{ animation-delay:2.1s }
.smart-security-access-page .sv-tile.d7{ animation-delay:2.45s }
@keyframes ssa-svTile{ 0%,58%{ opacity:1 } 74%,100%{ opacity:.4 } }
.smart-security-access-page .sv-scan{ animation:ssa-svScan 3.4s linear infinite }
@keyframes ssa-svScan{ 0%{ transform:translateY(0) } 100%{ transform:translateY(108px) } }
.smart-security-access-page .sv-alarm{ animation:ssa-svAlarm 2.2s var(--ease-io) infinite }
@keyframes ssa-svAlarm{ 0%,100%{ stroke-opacity:.18 } 50%{ stroke-opacity:1 } }
.smart-security-access-page .sv-blink{ animation:ssa-svBlink 1.5s var(--ease-io) infinite }
@keyframes ssa-svBlink{ 0%,100%{ opacity:1 } 50%{ opacity:.15 } }
.smart-security-access-page .sv-flow{ stroke-dasharray:5 7; animation:ssa-svFlow 1.3s linear infinite }
@keyframes ssa-svFlow{ to{ stroke-dashoffset:-24 } }
.smart-security-access-page .sv-rec{ animation:ssa-svRec 2.6s var(--ease-io) infinite }
@keyframes ssa-svRec{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
@media (max-width:960px){.smart-security-access-page .svc-main{ grid-template-columns:1fr }
.smart-security-access-page .svc-chain{ grid-template-columns:repeat(3, 1fr) }

}
@media (max-width:600px){.smart-security-access-page .svc-chain{ grid-template-columns:repeat(2, 1fr) }
 }
@media (prefers-reduced-motion: reduce){.smart-security-access-page .svc-chain .n::after, .smart-security-access-page .sv-tile, .smart-security-access-page .sv-scan, .smart-security-access-page .sv-alarm, .smart-security-access-page .sv-blink, .smart-security-access-page .sv-flow, .smart-security-access-page .sv-rec{ animation:none }

}
.smart-security-access-page .toast-host{
  position:fixed; right:18px; bottom:18px; z-index:80;
  display:flex; flex-direction:column-reverse; gap:8px;
  max-width:340px; pointer-events:none;
}
.smart-security-access-page .toast{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:10px;
  background:var(--paper-3); border:1px solid var(--line-2);
  color:var(--ink); font-size:13px;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.7);
  animation:ssa-toastIn .42s var(--ease);
  pointer-events:auto;
}
.smart-security-access-page .toast.is-out{ animation:ssa-toastOut .42s var(--ease) forwards }
.smart-security-access-page .toast .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0 }
.smart-security-access-page .toast .dot.pass{ background:var(--pass); box-shadow:0 0 10px var(--pass); animation:ssa-pulse 1.8s var(--ease-io) infinite }
.smart-security-access-page .toast .dot.alarm{ background:var(--alarm); box-shadow:0 0 10px var(--alarm) }
.smart-security-access-page .toast .dot.status{ background:var(--status); box-shadow:0 0 10px var(--status) }
.smart-security-access-page .toast .body{ flex:1; min-width:0 }
.smart-security-access-page .toast .k{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase; margin-bottom:2px }
.smart-security-access-page .toast .msg{ color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.smart-security-access-page .toast .time{ font-family:var(--mono); font-size:10px; color:var(--ink-3); flex-shrink:0 }
@keyframes ssa-toastIn{ from{ transform:translateX(28px); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes ssa-toastOut{ to{ transform:translateX(40px); opacity:0 } }
@media (max-width: 540px){.smart-security-access-page .toast-host{ left:12px; right:12px; max-width:none }
 }
.smart-security-access-page .access-flow{
  display:grid; grid-template-columns: 1.6fr 1fr;
  gap:18px; align-items:stretch;
}
.smart-security-access-page .access-flow .flow-stage{
  position:relative;
  background:var(--paper-3); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; min-height:280px;
}
.smart-security-access-page .access-flow .flow-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(53,195,212,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(53,195,212,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.smart-security-access-page .access-flow .flow-stage svg{ width:100%; height:100%; display:block }
.smart-security-access-page .flow-person{ animation: ssa-walkAcross 9s var(--ease-io) infinite }
.smart-security-access-page .flow-gate{ transform-origin:center; animation: ssa-gateOpen 9s var(--ease-io) infinite }
.smart-security-access-page .flow-terminal{ transform-origin:200px 200px; animation: ssa-terminalScan 9s linear infinite }
.smart-security-access-page .flow-step-light{ animation: ssa-stepPulse 9s linear infinite }
.smart-security-access-page .flow-step-light.s2{ animation-delay:1.8s }
.smart-security-access-page .flow-step-light.s3{ animation-delay:3.6s }
.smart-security-access-page .flow-step-light.s4{ animation-delay:5.4s }
.smart-security-access-page .flow-step-light.s5{ animation-delay:7.2s }
@keyframes ssa-walkAcross{
  0%{ transform:translateX(0) }
  8%{ transform:translateX(60px) }
  15%{ transform:translateX(140px) }
  22%, 38%{ transform:translateX(160px) }
  46%{ transform:translateX(260px) }
  58%{ transform:translateX(380px) }
  72%, 100%{ transform:translateX(680px) }
}
@keyframes ssa-gateOpen{
  0%, 35%{ transform:rotateY(0deg); opacity:.6 }
  40%, 65%{ transform:rotateY(-72deg); opacity:1 }
  70%, 100%{ transform:rotateY(0deg); opacity:.6 }
}
@keyframes ssa-terminalScan{
  0%, 18%{ opacity:0 }
  20%, 38%{ opacity:1 }
  40%, 100%{ opacity:0 }
}
@keyframes ssa-stepPulse{
  0%, 100%{ opacity:.3 }
  18%{ opacity:1 }
}
.smart-security-access-page .access-flow .flow-steps{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:14px;
}
.smart-security-access-page .access-flow .flow-step{
  padding:16px 18px; border-radius:10px;
  background:var(--paper-3); border:1px solid var(--line);
  display:flex; align-items:center; gap:14px;
  transition:border-color .4s var(--ease), background .4s;
  position:relative;
}
.smart-security-access-page .access-flow .flow-step::before{
  content:""; position:absolute; left:-1px; top:0; bottom:0; width:3px;
  background:var(--pass); opacity:0; transition:opacity .4s;
}
.smart-security-access-page .access-flow .flow-step.is-on{ border-color:var(--line-2); background:var(--paper-4) }
.smart-security-access-page .access-flow .flow-step.is-on::before{ opacity:1 }
.smart-security-access-page .access-flow .flow-step .n{
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  letter-spacing:.18em; width:32px; flex-shrink:0;
}
.smart-security-access-page .access-flow .flow-step .t{ font-family:var(--cn-disp); font-weight:600; color:var(--ink); font-size:17px }
.smart-security-access-page .access-flow .flow-step .m{ font-size:12px; color:var(--ink-2); margin-top:3px }
.smart-security-access-page .access-flow .flow-step.is-on .n{ color:var(--pass) }
.smart-security-access-page .flow-step.s1.is-on, .smart-security-access-page .flow-step.s2.is-on, .smart-security-access-page .flow-step.s3.is-on, .smart-security-access-page .flow-step.s4.is-on, .smart-security-access-page .flow-step.s5.is-on{

}
.smart-security-access-page .arch-canvas .arch-node{ animation: ssa-archNodePulse 2.8s var(--ease-io) infinite }
.smart-security-access-page .arch-canvas .arch-node.n2{ animation-delay:.4s }
.smart-security-access-page .arch-canvas .arch-node.n3{ animation-delay:.8s }
.smart-security-access-page .arch-canvas .arch-node.n4{ animation-delay:1.2s }
.smart-security-access-page .arch-canvas .arch-node.n5{ animation-delay:1.6s }
.smart-security-access-page .arch-canvas .arch-node.n6{ animation-delay:2.0s }
@keyframes ssa-archNodePulse{
  0%, 100%{ stroke:rgba(255,255,255,.18); stroke-width:1 }
  50%{ stroke:rgba(53,195,212,.55); stroke-width:1.4 }
}
.smart-security-access-page .sce .photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,22,28,.0) 40%, rgba(15,22,28,.75) 100%);
  pointer-events:none;
  z-index:1;
}
.smart-security-access-page .sce .photo::before{
  content:""; position:absolute; left:-100%; top:0; bottom:0; width:60%;
  background:linear-gradient(110deg, transparent 0%, rgba(53,195,212,.25) 50%, transparent 100%);
  transform:skewX(-15deg); transition:left .9s var(--ease); z-index:2; pointer-events:none;
}
.smart-security-access-page .sce:hover .photo::before{ left:160% }
.smart-security-access-page .timeline .line-track{
  position:absolute; left:0; right:0; top:46px; height:2px;
  background:rgba(255,255,255,.08); border-radius:1px;
}
.smart-security-access-page .timeline .line-fill{
  position:absolute; left:0; top:46px; height:2px; width:0;
  background:linear-gradient(90deg, var(--pass), var(--pass-2));
  box-shadow:0 0 8px var(--pass);
  transition: width .6s var(--ease);
}
.smart-security-access-page .timeline .line-dot{
  position:absolute; top:40px; width:14px; height:14px;
  border-radius:50%; background:var(--paper); border:2px solid var(--ink-4);
  transition:border-color .4s, background .4s, box-shadow .4s;
}
.smart-security-access-page .timeline .line-dot.is-on{ border-color:var(--pass); background:var(--pass); box-shadow:0 0 12px var(--pass) }
.smart-security-access-page .brand-mark::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--pass), var(--status), var(--alarm), var(--pass));
  background-size:300% 100%;
  animation:ssa-brandFlow 5s linear infinite;
}
@keyframes ssa-brandFlow{ to{ background-position:-300% 0 } }
.smart-security-access-page .brand-mark::before{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:14px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--pass); opacity:.85;
  box-shadow:0 0 8px var(--pass);
  animation:ssa-pulse 1.8s var(--ease-io) infinite;
}
.smart-security-access-page .cta-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:conic-gradient(from 0deg at 30% 50%, transparent 0% 60%, rgba(53,195,212,.08) 65% 75%, transparent 80%);
  animation:ssa-ctaSpin 18s linear infinite;
}
@keyframes ssa-ctaSpin{ to{ transform:rotate(360deg) } }
.smart-security-access-page .tag-chip::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, currentColor, transparent);
  opacity:0; transition:opacity .3s;
}
.smart-security-access-page .tag-chip:hover::after{ opacity:.5 }
.smart-security-access-page .eyebrow .dot{
  position:relative;
}
.smart-security-access-page .eyebrow .dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid currentColor; opacity:0;
  animation:ssa-pulseRing 2.2s var(--ease-io) infinite;
}
@keyframes ssa-pulseRing{
  0%{ transform:scale(.4); opacity:.65 }
  100%{ transform:scale(1.6); opacity:0 }
}
.smart-security-access-page .btn{ position:relative }
.smart-security-access-page .btn::before{
  content:""; position:absolute; inset:-2px; border-radius:10px;
  background:linear-gradient(135deg, var(--pass), var(--blue-action));
  opacity:0; transition:opacity .3s; z-index:-1; filter:blur(8px);
}
.smart-security-access-page .btn-primary:hover::before{ opacity:.55 }
.smart-security-access-page .reveal[data-d="1"]{ transition-delay:.08s }
.smart-security-access-page .reveal[data-d="2"]{ transition-delay:.16s }
.smart-security-access-page .reveal[data-d="3"]{ transition-delay:.24s }
.smart-security-access-page .reveal[data-d="4"]{ transition-delay:.32s }
.smart-security-access-page .reveal[data-d="5"]{ transition-delay:.4s }
.smart-security-access-page .reveal[data-d="6"]{ transition-delay:.48s }
@media (prefers-reduced-motion: reduce){.smart-security-access-page *, .smart-security-access-page *::before, .smart-security-access-page *::after{ animation:none !important; transition:none !important }
.smart-security-access-page .reveal{ opacity:1; transform:none }

}
@media (max-width: 880px){.smart-security-access-page .nav-links{ display:none }
.smart-security-access-page .menu-btn{ display:block }
.smart-security-access-page .nav-links.is-open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:68px; background:var(--paper);
    border-bottom:1px solid var(--line); padding:14px var(--gutter);
  }
.smart-security-access-page .nav-links.is-open a{ padding:12px 14px; border-radius:6px }

}


.smart-security-access-page .ssa-inline-1{margin-top:18px}
.smart-security-access-page .ssa-inline-2{margin-top:20px}
.smart-security-access-page .ssa-inline-3{opacity:.55; font-size:10px; margin-top:3px}
.smart-security-access-page .ssa-inline-4{left:14%; top:42%}
.smart-security-access-page .ssa-inline-5{left:36%; top:68%}
.smart-security-access-page .ssa-inline-6{left:62%; top:30%}
.smart-security-access-page .ssa-inline-7{left:78%; top:58%}
.smart-security-access-page .ssa-inline-8{padding: clamp(46px, 6vw, 84px) 0}
.smart-security-access-page .ssa-inline-9{margin-top:14px}
.smart-security-access-page .ssa-inline-10{padding: clamp(46px, 6vw, 84px) 0; background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.smart-security-access-page .ssa-inline-11{margin-top:14px}
.smart-security-access-page .ssa-inline-12{transform-origin: 320px 240px;}
.smart-security-access-page .ssa-inline-13{transform-origin: 80px 240px;}
.smart-security-access-page .ssa-inline-14{animation:ssa-flowProgress 9s linear infinite}
.smart-security-access-page .ssa-inline-15{padding: 0 0 clamp(46px, 6vw, 84px)}
.smart-security-access-page .ssa-inline-16{color:#fff}
.smart-security-access-page .ssa-inline-17{padding: clamp(46px, 6vw, 84px) 0; background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.smart-security-access-page .ssa-inline-18{margin-top:14px}
.smart-security-access-page .ssa-inline-19{padding: clamp(46px, 6vw, 84px) 0}
.smart-security-access-page .ssa-inline-20{margin-top:14px}
.smart-security-access-page .ssa-inline-21{padding: clamp(46px, 6vw, 84px) 0; background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.smart-security-access-page .ssa-inline-22{margin-top:14px}
.smart-security-access-page .ssa-inline-23{padding: clamp(46px, 6vw, 84px) 0}
.smart-security-access-page .ssa-inline-24{margin-top:14px}
.smart-security-access-page .ssa-inline-25{padding: 0 0 clamp(46px, 6vw, 84px)}
.smart-security-access-page .ssa-inline-26{padding: 0 0 clamp(46px, 6vw, 84px)}
.smart-security-access-page .ssa-inline-27{padding: 0 0 clamp(46px, 6vw, 84px)}
.smart-security-access-page .ssa-inline-28{color:rgba(255,255,255,.7)}
.smart-security-access-page .ssa-inline-29{margin-top:14px}
.smart-security-access-page .ssa-inline-30{text-align:right}
.smart-security-access-page .ssa-inline-31{color:var(--pass-2)}
.smart-security-access-page .ssa-inline-32{text-align:right}
.smart-security-access-page .ssa-inline-33{font-size:15px}
.smart-security-access-page .ssa-inline-34{text-align:right}

/* Yuqi shell adapter: the source design stays inside the article only. */
.smart-security-access-page {
  --ssa-header-height: var(--f-header-height, 72px);
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow-wrap: anywhere;
}
.smart-security-access-page .hero { min-height: calc(100svh - var(--ssa-header-height)); }
.smart-security-access-page [id] { scroll-margin-top: calc(var(--ssa-header-height) + 18px); }
.smart-security-access-page.is-page-hidden *,
.smart-security-access-page.is-page-hidden *::before,
.smart-security-access-page.is-page-hidden *::after { animation-play-state: paused !important; }
@media (max-width: 640px) {
  .smart-security-access-page { --ssa-header-height: var(--f-header-height, 68px); }
  .smart-security-access-page .hero { min-height: calc(100svh - var(--ssa-header-height)); }
}
@media (max-width: 760px) {
  .smart-security-access-page .hero { padding-top:32px; padding-bottom:24px; }
  .smart-security-access-page .hero-grid { grid-template-columns:1fr; gap:0; }
  .smart-security-access-page .hero-media { display:none; }
  .smart-security-access-page .hero-caption { display:none; }
  .smart-security-access-page .toast-host { display:none; }
}