/* =====================================================================
   MSTS v3 — components.css
   Header, navigation, intro, hero and every page section.
   Demo internals (CCTV, Wi-Fi, conferencing, intercom, access, fire)
   and the network diagram styles are kept from v2 and restyled at the
   container level, so all existing behaviour keeps working.
   ===================================================================== */

/* ---------- Scroll progress ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 1001; pointer-events: none; }
.progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); background: linear-gradient(90deg, var(--blue), var(--ice)); }

/* ---------- Buttons ---------- */
.btn {
  --mx: 0px; --my: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 54px; padding: 0 1.6rem; border: 1px solid transparent; border-radius: var(--r2);
  font: 600 .92rem/1 var(--f-body); letter-spacing: .01em; text-decoration: none; white-space: nowrap; overflow: hidden; isolation: isolate;
  transform: translate(var(--mx), var(--my));
  transition: background-color var(--dur) var(--ease), color var(--dur), border-color var(--dur), box-shadow 500ms var(--ease), transform 450ms var(--ease);
}
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform 900ms var(--ease); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translate(var(--mx), var(--my)) scale(.97); transition-duration: 90ms; }
.btn .ico { width: 1.05em; height: 1.05em; }
.btn__arrow { overflow: visible; transition: transform 450ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--primary { background: var(--blue); color: var(--navy); }
.btn--primary:hover { background: #7DBDDB; box-shadow: 0 18px 40px -16px rgba(96,170,205,.9); }
.btn--glass { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); color: var(--white); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn--glass::after { background: linear-gradient(105deg, transparent 30%, rgba(96,170,205,.25) 50%, transparent 70%); }
.btn--glass:hover { border-color: rgba(96,170,205,.7); background: rgba(96,170,205,.1); }
.btn--line { border-color: var(--t-line2, var(--line-d2)); color: var(--t-1, var(--white)); background: transparent; }
.btn--line:hover { border-color: var(--blue); background: var(--blue-soft); }
.btn--sm { min-height: 42px; padding: 0 1.1rem; font-size: .84rem; }

.link-arrow { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2rem; padding-bottom: 6px; font: 600 .92rem var(--f-body); color: var(--t-1); text-decoration: none; position: relative; }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--t-line2); }
.link-arrow::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1; background: var(--a, var(--blue)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 600ms var(--ease); }
.link-arrow:hover::before, .link-arrow:focus-visible::before { transform: scaleX(1); }
.link-arrow .ico { width: 1em; height: 1em; transition: transform 450ms var(--ease); }
.link-arrow:hover .ico { transform: translateX(5px); }
.link-arrow--dark { color: var(--white); }

/* =====================================================================
   HEADER + NAVIGATION
   ===================================================================== */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--header-h); color: var(--on-dark); transition: background-color 500ms var(--ease), transform 600ms var(--ease), height 500ms var(--ease), box-shadow 500ms; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(167,200,230,.22), transparent); opacity: 0; transition: opacity 500ms; }
.site-header.is-solid { --header-h: 70px; background: rgba(8, 24, 43, .78); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.site-header.is-solid::after { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }
.header__row { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: .85rem; min-width: 0; flex: 0 1 auto; color: var(--white); text-decoration: none; }
.brand__plate { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r2); background: var(--white); box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 10px 26px -12px rgba(96,170,205,.9); overflow: hidden; transition: transform 700ms var(--ease); }
.brand__plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%); mix-blend-mode: overlay; transform: translateX(-120%); transition: transform 1s var(--ease); }
.brand:hover .brand__plate::after { transform: translateX(120%); }
.brand__plate img { width: 38px; height: 38px; object-fit: contain; }
.brand__name { display: block; min-width: 0; padding-left: .85rem; border-left: 1px solid var(--line-d2); font: 500 .72rem/1.3 var(--f-tech); letter-spacing: .16em; }
.brand__line { display: block; white-space: nowrap; }

.nav { position: relative; display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: .15rem; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link { position: relative; display: inline-flex; align-items: center; height: var(--header-h); padding: 0 .9rem; font: 500 .9rem var(--f-body); color: var(--on-dark-2); text-decoration: none; transition: color var(--dur), height 500ms var(--ease); }
.nav__link:hover, .nav__link.is-active { color: var(--white); }
.nav__indicator { position: absolute; left: 0; bottom: calc(50% - 16px); height: 1px; width: var(--ind-w, 0px); background: var(--blue); box-shadow: 0 0 12px rgba(96,170,205,.9); transform: translateX(var(--ind-x, 0px)); opacity: var(--ind-o, 0); transition: transform 650ms var(--ease), width 650ms var(--ease), opacity 300ms; pointer-events: none; }
.nav__mobile-contact { display: none; }
.header__cta { flex: none; }
.nav-toggle { display: none; position: relative; width: 48px; height: 48px; border-radius: var(--r2); border: 1px solid var(--line-d2); background: rgba(255,255,255,.04); color: var(--white); }
.nav-toggle__bars { position: absolute; inset: 0; display: grid; place-items: center; }
.nav-toggle__bars span { position: absolute; width: 20px; height: 1.5px; background: currentColor; transition: transform 500ms var(--ease), width 500ms var(--ease); }
.nav-toggle__bars span:first-child { transform: translateY(-4px); }
.nav-toggle__bars span:last-child { transform: translateY(4px); width: 13px; margin-left: 7px; }
.nav-open .nav-toggle__bars span:first-child { transform: rotate(45deg); }
.nav-open .nav-toggle__bars span:last-child { transform: rotate(-45deg); width: 20px; margin-left: 0; }

/* ---------- Mega menu (desktop) ---------- */
.msts-mega__toggle { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: -.6rem; padding: 0; border: 0; border-radius: var(--r1); background: transparent; color: var(--on-dark-2); transition: color var(--dur), background var(--dur); }
.msts-mega__toggle .ico { width: 13px; height: 13px; stroke-width: 2; transition: transform 500ms var(--ease); }
.msts-mega__toggle:hover { color: var(--white); background: rgba(255,255,255,.08); }
.msts-mega.is-open .msts-mega__toggle .ico { transform: rotate(180deg); }
.msts-mega__panel { position: absolute; top: calc(100% - 10px); left: 0; z-index: 1000; width: min(1140px, calc(100vw - 32px)); padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(14px); clip-path: inset(0 0 100% 0 round 8px);
  transition: opacity 300ms var(--ease), transform 600ms var(--ease), clip-path 600ms var(--ease), visibility 0s linear 600ms; color: var(--on-dark); text-align: left; white-space: normal; }
.msts-mega.is-open .msts-mega__panel { opacity: 1; visibility: visible; transform: none; clip-path: inset(0 0 0 0 round 8px); transition-delay: 0s; }
.msts-mega__inner { position: relative; display: grid; grid-template-columns: 1.05fr 2.6fr; overflow: hidden; background: rgba(10, 29, 51, .94); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); border-radius: var(--r3); border: 1px solid var(--line-d2); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .8); max-height: calc(100vh - var(--header-h) - 20px); overflow-y: auto; overscroll-behavior: contain; }
.msts-mega__inner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--blue), transparent); }
.msts-mega__priority { grid-row: span 2; display: flex; flex-direction: column; gap: .3rem; padding: 1.5rem; background: rgba(5, 15, 28, .55); border-right: 1px solid var(--line-d); color: var(--on-dark-2); }
.msts-mega__kicker { margin: 0 0 .7rem .2rem; font: 500 .68rem var(--f-tech); letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.msts-mega__feature { display: grid; grid-template-columns: 38px 1fr; gap: .15rem .85rem; align-items: start; padding: .8rem; border-radius: var(--r2); color: inherit; text-decoration: none; border: 1px solid transparent; transition: background var(--dur), border-color var(--dur), transform 450ms var(--ease); }
.msts-mega__feature:hover, .msts-mega__feature:focus-visible { background: rgba(96,170,205,.07); border-color: var(--line-d2); transform: translateX(3px); }
.msts-mega__feature .msts-mega__ico { grid-row: span 2; width: 38px; height: 38px; border-radius: var(--r2); display: grid; place-items: center; border: 1px solid var(--line-d2); color: var(--blue); }
.msts-mega__feature.is-top { border-color: rgba(242,178,52,.32); background: rgba(242,178,52,.05); }
.msts-mega__feature.is-top .msts-mega__ico { border-color: rgba(242,178,52,.5); color: var(--gold); }
.msts-mega__ftitle { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font: 500 .9rem/1.3 var(--f-display); color: var(--white); letter-spacing: -.01em; }
.msts-mega__tag { padding: .2rem .4rem; border-radius: var(--r1); background: var(--gold); color: var(--navy); font: 500 .6rem/1 var(--f-tech); letter-spacing: .12em; text-transform: uppercase; }
.msts-mega__fdesc { font-size: .78rem; line-height: 1.45; color: var(--on-dark-3); }
.msts-mega__ico .ico { width: 18px; height: 18px; }
.msts-mega__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.75rem; padding: 1.6rem 1.75rem 1rem; }
.msts-mega__group-title { margin: 0 0 .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line-d); font: 500 .66rem var(--f-tech); letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-3); }
.msts-mega__cat { margin-bottom: 1rem; }
.msts-mega__cat > a { display: flex; align-items: center; gap: .65rem; font: 500 .88rem/1.3 var(--f-display); letter-spacing: -.01em; color: var(--white); text-decoration: none; transition: color var(--dur); }
.msts-mega__cat > a .msts-mega__ico { flex: none; width: 28px; height: 28px; border-radius: var(--r2); display: grid; place-items: center; border: 1px solid var(--line-d); color: var(--blue); transition: background var(--dur), color var(--dur), border-color var(--dur); }
.msts-mega__cat > a .msts-mega__ico .ico { width: 15px; height: 15px; }
.msts-mega__cat > a:hover { color: var(--blue); }
.msts-mega__cat > a:hover .msts-mega__ico { background: var(--blue); color: var(--navy); border-color: var(--blue); }
.msts-mega__cat ul { margin: .35rem 0 0 calc(28px + .65rem); display: grid; gap: .1rem; }
.msts-mega__cat li a { font-size: .8rem; line-height: 1.55; color: var(--on-dark-3); text-decoration: none; transition: color var(--dur); }
.msts-mega__cat li a:hover { color: var(--white); }
.msts-mega__foot { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.75rem; border-top: 1px solid var(--line-d); font-size: .84rem; color: var(--on-dark-2); }
.msts-mega__foot a { font-weight: 700; color: var(--white); text-decoration: none; }
.msts-mega__foot a:hover { color: var(--blue); }

/* =====================================================================
   INTRO (structure; the timeline lives in animations.css)
   ===================================================================== */
.intro { display: none; }
.intro-on { overflow: hidden; }
.intro-on .intro { display: block; position: fixed; inset: 0; z-index: 5000; pointer-events: none; color: var(--on-dark); }
.intro__veil { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, #0D2540, var(--navy) 72%); }
.intro__grid { position: absolute; inset: 0; opacity: 0;
  background-image: linear-gradient(rgba(167,200,230,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(167,200,230,.07) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 55%); mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 55%); }
.intro__ring { position: absolute; left: 50%; top: 50%; width: min(78vh, 94vw); height: min(78vh, 94vw); transform: translate(-50%, -50%); overflow: visible; opacity: 0; }
.intro__ring-dash { fill: none; stroke: rgba(167,200,230,.28); stroke-width: .8; stroke-dasharray: 1.5 7; transform-origin: center; }
.intro__ring-scan { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-dasharray: 150 1020; stroke-linecap: round; transform-origin: center; filter: drop-shadow(0 0 6px rgba(96,170,205,.9)); }
.intro__ticks path { stroke: rgba(167,200,230,.5); stroke-width: 1; }
.intro__hud { position: absolute; display: flex; align-items: center; gap: .8rem; font: 500 .66rem/1 var(--f-tech); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3); opacity: 0; }
.intro__hud--tl { left: var(--gutter); top: calc(var(--gutter) + 6px); }
.intro__hud--tl span:first-child { color: var(--white); }
.intro__hud--tr { right: var(--gutter); top: calc(var(--gutter) + 6px); font-variant-numeric: tabular-nums; }
.intro__hud--bl { left: var(--gutter); bottom: calc(var(--gutter) + 6px); color: var(--on-dark-2); }
.intro__lockup { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 1.1rem; transform: translate(-50%, -50%); text-align: center; }
.intro__mark { position: relative; width: 200px; height: 200px; display: grid; place-items: center; }
.intro__arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro__arc { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 190; stroke-dashoffset: 190; }
.intro__arc--blue { stroke: var(--blue); } .intro__arc--green { stroke: var(--green); } .intro__arc--red { stroke: var(--red); }
.intro__plate { position: relative; display: grid; place-items: center; width: 140px; height: 140px; border-radius: 50%; background: var(--white); overflow: hidden; clip-path: circle(0% at 50% 50%);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 0 0 1px rgba(154,169,184,.6) inset, 0 0 90px -10px rgba(96,170,205,.75); }
.intro__plate img { width: 116px; height: 116px; object-fit: contain; }
.intro__sheen { position: absolute; inset: -10%; background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.95) 48%, rgba(96,170,205,.5) 52%, transparent 62%); mix-blend-mode: overlay; transform: translateX(-110%); }
.intro__blades { position: absolute; left: 50%; top: 50%; width: 152px; height: 152px; margin: -76px 0 0 -76px; border-radius: 50%; overflow: hidden; opacity: 0; }
.intro__blades i { position: absolute; left: 50%; top: 50%; width: 160px; height: 90px; margin-top: -90px; transform-origin: 0 100%; background: linear-gradient(180deg, #17375C, #0B2036); border-bottom: 1px solid rgba(167,200,230,.35); }
.intro__blades i:nth-child(1) { transform: rotate(0deg) skewX(-30deg); }  .intro__blades i:nth-child(2) { transform: rotate(60deg) skewX(-30deg); }
.intro__blades i:nth-child(3) { transform: rotate(120deg) skewX(-30deg); } .intro__blades i:nth-child(4) { transform: rotate(180deg) skewX(-30deg); }
.intro__blades i:nth-child(5) { transform: rotate(240deg) skewX(-30deg); } .intro__blades i:nth-child(6) { transform: rotate(300deg) skewX(-30deg); }
.intro__name { font: 400 clamp(.82rem, .7rem + .4vw, 1rem)/1.3 var(--f-tech); letter-spacing: .42em; text-transform: uppercase; color: var(--white); opacity: 0; padding-left: .42em; }
.intro__name span { color: var(--on-dark-2); }
.intro__tag { display: flex; gap: .7rem; font: 300 clamp(1.3rem, 1rem + 1.2vw, 2rem)/1.1 var(--f-display); letter-spacing: -.02em; }
.intro__tag span { display: inline-block; opacity: 0; transform: translateY(16px); }
.intro__tag span:nth-child(1) { color: var(--blue); } .intro__tag span:nth-child(2) { color: #8BCB83; } .intro__tag span:nth-child(3) { color: #F68B71; }
.intro__target { position: absolute; left: 0; top: 0; --s: 1; opacity: 0; transition: opacity 400ms var(--ease-soft); will-change: transform; }
.intro__target.is-on { opacity: 1; }
.intro__target-ring { position: absolute; left: -50px; top: -50px; width: 100px; height: 100px; border-radius: 50%; border: 1px dashed rgba(207,234,247,.35); scale: var(--s); transition: border-color 400ms; animation: spin 14s linear infinite; will-change: transform, scale; }
.intro__target-ring i { position: absolute; width: 12px; height: 12px; border: 0 solid var(--ice); }
.intro__target-ring i:nth-child(1) { left: -6px; top: -6px; border-left-width: 1.5px; border-top-width: 1.5px; }
.intro__target-ring i:nth-child(2) { right: -6px; top: -6px; border-right-width: 1.5px; border-top-width: 1.5px; }
.intro__target-ring i:nth-child(3) { right: -6px; bottom: -6px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.intro__target-ring i:nth-child(4) { left: -6px; bottom: -6px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.intro__target-label { position: absolute; left: 0; top: 0; translate: calc(var(--s) * 50px + 16px) calc(var(--s) * -50px - 8px); padding: .35rem .55rem; white-space: nowrap; border-radius: var(--r1); background: rgba(8,24,43,.8); border: 1px solid var(--line-d2); font: 500 .6rem/1 var(--f-tech); letter-spacing: .18em; text-transform: uppercase; color: var(--ice); font-variant-numeric: tabular-nums; transition: color 300ms, border-color 300ms; }
.intro__target-label::before { content: ""; position: absolute; right: 100%; top: 50%; width: 14px; height: 1px; background: var(--line-d2); }
.intro__target.is-left .intro__target-label { translate: calc(-100% - var(--s) * 50px - 16px) calc(var(--s) * -50px - 8px); }
.intro__target.is-left .intro__target-label::before { right: auto; left: 100%; }
.intro__target.is-lock .intro__target-ring { border-style: solid; border-color: rgba(133,201,123,.6); }
.intro__target.is-lock .intro__target-ring i { border-color: #9BE08F; }
.intro__target.is-lock .intro__target-label { color: #CDEBC7; border-color: rgba(133,201,123,.6); }
.intro__target.is-blip .intro__target-label { animation: blip 500ms var(--ease); }
.intro__flash { position: absolute; inset: 0; overflow: hidden; pointer-events: none; --fx: 50vw; --fy: 30vh; }
.intro__flash-core { position: absolute; left: var(--fx); top: var(--fy); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: radial-gradient(circle, #fff 0, rgba(207,234,247,.95) 20%, rgba(96,170,205,.45) 45%, transparent 70%); opacity: 0; }
.intro__flash-streak { position: absolute; left: var(--fx); top: var(--fy); width: 0; height: 2px; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, rgba(96,170,205,.6) 20%, #fff 50%, rgba(96,170,205,.6) 80%, transparent); box-shadow: 0 0 18px 2px rgba(150,210,240,.8); opacity: 0; }
.intro__flash-ring { position: absolute; left: var(--fx); top: var(--fy); width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 1.5px solid rgba(207,234,247,.9); opacity: 0; }
.intro__mirror { position: absolute; left: 50%; top: calc(50% + 74px); width: 140px; height: 140px; margin-left: -70px; display: grid; place-items: center; border-radius: 50%; background: var(--white); transform: scaleY(-1); opacity: 0; filter: blur(1.2px);
  -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,.55), transparent 55%); mask-image: linear-gradient(0deg, rgba(0,0,0,.55), transparent 55%); }
.intro__mirror img { width: 116px; height: 116px; object-fit: contain; }
.intro__loader { width: min(340px, 72vw); margin-top: 1.4rem; opacity: 0; transform: translateY(12px); }
.intro__bar { position: relative; height: 2px; background: rgba(167,200,230,.16); overflow: hidden; border-radius: 2px; }
.intro__bar span { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--blue), var(--ice)); box-shadow: 0 0 12px rgba(96,170,205,.9); }
.intro__bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: bar-shine 1.6s var(--ease-io) infinite; }
.intro__load-meta { display: flex; justify-content: space-between; margin-top: .8rem; font: 500 .62rem/1 var(--f-tech); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3); font-variant-numeric: tabular-nums; }
.intro__load-meta [data-intro-pct] { color: var(--white); }
.intro__vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(3,9,18,.75) 100%); }
.intro__bars i { position: absolute; left: 0; right: 0; height: 8vh; background: #03080f; transform: scaleY(0); transition: transform 1.2s var(--ease); }
.intro__bars i:first-child { top: 0; transform-origin: 50% 0; }
.intro__bars i:last-child { bottom: 0; transform-origin: 50% 100%; }
.intro__caption { position: absolute; left: 50%; bottom: calc(8vh + clamp(2.2rem, 5vh, 3.6rem)); display: grid; justify-items: center; gap: .7rem; transform: translateX(-50%); text-align: center; pointer-events: none; }
.intro__cap-k { font: 500 .66rem/1 var(--f-tech); letter-spacing: .32em; text-transform: uppercase; color: var(--blue); opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-soft), transform .8s var(--ease); }
.intro__cap-t { font: 300 clamp(1.5rem, 1rem + 1.8vw, 2.7rem)/1.1 var(--f-display); letter-spacing: -.035em; color: var(--white); white-space: nowrap; opacity: 0; filter: blur(8px); transform: translateY(14px); transition: opacity .7s var(--ease-soft), transform 1s var(--ease), filter .9s var(--ease-soft); text-shadow: 0 2px 30px rgba(3,9,18,.8); }
.intro__caption.is-in .intro__cap-k { opacity: 1; transform: none; }
.intro__caption.is-in .intro__cap-t { opacity: 1; transform: none; filter: none; transition-delay: .08s; }
.intro__skip { position: absolute; right: var(--gutter); bottom: calc(var(--gutter) - 4px); pointer-events: auto; padding: .7rem 1rem; border: 1px solid var(--line-d2); border-radius: var(--r2); background: rgba(8,24,43,.5); color: var(--on-dark-2); font: 500 .68rem var(--f-tech); letter-spacing: .18em; text-transform: uppercase; opacity: 0; transition: color var(--dur), border-color var(--dur), opacity 600ms; }
.intro__skip:hover { color: var(--white); border-color: var(--blue); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 2rem) 0 5.5rem; color: var(--on-dark); background: var(--navy); overflow: hidden; }
.hero__stage { position: absolute; inset: 0; z-index: -1; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__fallback { display: none; }
.no-webgl .hero__canvas { display: none; }
.no-webgl .hero__fallback { position: absolute; inset: 0; display: grid; place-items: center end; padding-right: max(var(--gutter), 6vw); background: radial-gradient(60% 70% at 72% 50%, rgba(96,170,205,.16), transparent 70%); }
.hero__fallback svg { width: min(46vw, 560px); height: auto; filter: drop-shadow(0 0 60px rgba(96,170,205,.35)); }
.fb__lines { transform-origin: center; animation: fb-spin 40s linear infinite; }
.fb__orbit { transform-origin: center; animation: spin 60s linear infinite; }
.hero__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,24,43,.88) 0%, rgba(8,24,43,.55) 32%, rgba(8,24,43,0) 58%), linear-gradient(0deg, var(--navy) 0%, rgba(8,24,43,0) 22%); }
.track { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease); will-change: transform; }
.track.is-on { opacity: 1; }
.track__box { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; animation: track-breathe 2.8s var(--ease-io) infinite; }
.track__box i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--ice); }
.track__box i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.track__box i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.track__box i:nth-child(3) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.track__box i:nth-child(4) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.track.is-left .track__label { left: auto; right: 44px; }
.track__label { position: absolute; left: 44px; top: -44px; padding: .3rem .5rem; white-space: nowrap; font: 500 .6rem/1 var(--f-tech); letter-spacing: .18em; text-transform: uppercase; color: var(--navy); background: var(--ice); border-radius: var(--r1); }
.hero__hud { position: absolute; inset: 0; pointer-events: none; }
.hud-chip { position: absolute; display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .7rem; border: 1px solid var(--line-d2); border-radius: var(--r1); background: rgba(8,24,43,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 .62rem/1 var(--f-tech); letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-2); opacity: 0; }
.hud-chip--a { right: 30vw; top: calc(var(--header-h) + 2.5rem); }
.hud-chip--b { right: calc(var(--gutter) + 3vw); top: 58%; }
.hud-chip--c { right: 34%; bottom: 8.5rem; }
.rec { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: blink 1.4s steps(2) infinite; }

.hero__layout { position: relative; }
.hero__copy { max-width: 860px; }
.hero__title, .hero__lead, .hero__actions, .hero__status { position: relative; }
.hero__status { margin-bottom: 2rem; color: var(--on-dark-2); }
.hero__title { font-size: var(--fs-hero); font-weight: 300; line-height: .98; letter-spacing: -.055em; color: var(--white); }
.hero__title em { display: block; font-style: normal; color: var(--blue); }
.hero__lead { margin-top: 2rem; max-width: 42ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--on-dark-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.6rem; }
.hero__foot { position: absolute; left: 0; right: 0; bottom: 2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-inline: auto; }
.hero__scroll, .hero__call { display: inline-flex; align-items: center; gap: .8rem; font: 500 .66rem/1 var(--f-tech); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3); text-decoration: none; transition: color var(--dur); }
.hero__scroll:hover, .hero__call:hover { color: var(--white); }
.hero__call .ico { width: 14px; height: 14px; color: var(--blue); }
.hero__scroll-line { position: relative; width: 1px; height: 40px; background: var(--line-d2); overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--blue); animation: scroll-line 2.2s var(--ease-io) infinite; }

/* ---------- Ticker ---------- */
.ticker { position: relative; overflow: hidden; padding-block: 1.15rem; background: var(--navy); border-top: 1px solid var(--line-d); }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 14vw; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--navy), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--navy), transparent); }
.ticker__track { display: flex; width: max-content; }
.ticker__list { display: flex; flex: none; }
.ticker__list li { display: flex; align-items: center; }
.ticker__list li::after { content: ""; width: 4px; height: 4px; margin: 0 2.2rem; border-radius: 50%; background: var(--blue); opacity: .55; }
.ticker__list a { font: 500 .74rem var(--f-tech); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3); text-decoration: none; white-space: nowrap; transition: color var(--dur); }
.ticker__list a:hover { color: var(--white); }

/* =====================================================================
   ABOUT
   ===================================================================== */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem clamp(3rem, 7vw, 7rem); align-items: end; }
.about__head .eyebrow { margin-bottom: 2rem; }
.about__statement { font: 300 clamp(1.3rem, 1rem + 1vw, 1.85rem)/1.42 var(--f-display); letter-spacing: -.02em; color: var(--ink); max-width: 34ch; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem); margin-top: clamp(4.5rem, 9vw, 8rem); }
.stat { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 1rem; padding-top: 1.6rem; }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-l2); }
.stat::after { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 3px; background: var(--a); transform-origin: 0 50%; }
.stat dd { font: 300 clamp(3.4rem, 1.8rem + 4.4vw, 7rem)/.9 var(--f-display); letter-spacing: -.06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat dd sup { color: var(--a-ink); font-weight: 400; }
.stat dt { font-size: .92rem; line-height: 1.45; color: var(--ink-2); max-width: 24ch; }
.about__foot { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem 4rem; margin-top: clamp(4rem, 8vw, 6.5rem); padding-top: 2.5rem; border-top: 1px solid var(--line-l); }
.about__foot .eyebrow { margin-bottom: 1.1rem; }
.clients { display: flex; flex-wrap: wrap; gap: .5rem 0; }
.clients li { font: 300 clamp(1.3rem, 1rem + 1vw, 2rem) var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.clients li:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: .8em; margin: 0 1.1rem; vertical-align: -.05em; background: var(--line-l2); transform: rotate(18deg); }
.about__brand { color: var(--ink-2); font-size: 1.02rem; max-width: 34ch; }
.about__brand strong { color: var(--ink); font-weight: 700; }

/* =====================================================================
   ECOSYSTEM
   ===================================================================== */
.eco { overflow: hidden; }
.eco__layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.eco__copy .eyebrow { margin-bottom: 2rem; }
.eco__copy .lead { margin-top: 1.5rem; }
.eco__legend { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
.eco__legend a { position: relative; display: flex; align-items: center; gap: .85rem; padding: .78rem .2rem; border-bottom: 1px solid var(--line-d); color: var(--on-dark-2); text-decoration: none; font-weight: 500; font-size: .93rem; transition: color var(--dur), padding var(--dur) var(--ease); }
.eco__legend a .ico { margin-left: auto; width: .95em; height: .95em; opacity: 0; transform: translateX(-8px); transition: opacity var(--dur), transform var(--dur) var(--ease); }
.eco__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 0 var(--a); transition: box-shadow 400ms; }
.eco__legend a:hover, .eco__legend a:focus-visible, .eco__legend a.is-hot { color: var(--white); padding-left: .6rem; }
.eco__legend a:hover .ico, .eco__legend a.is-hot .ico, .eco__legend a:focus-visible .ico { opacity: 1; transform: none; }
.eco__legend a.is-hot .eco__dot { box-shadow: 0 0 0 5px color-mix(in srgb, var(--a) 25%, transparent); }
.eco__stage { position: relative; }
.eco__rings { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.eco__rings i { position: absolute; border-radius: 50%; border: 1px solid rgba(96,170,205,.1); transform: translate(-50%, -50%); }
.eco__rings i:nth-child(1) { width: 52vmin; height: 52vmin; max-width: 560px; max-height: 560px; }
.eco__rings i:nth-child(2) { width: 72vmin; height: 72vmin; max-width: 760px; max-height: 760px; border-style: dashed; border-color: rgba(96,170,205,.08); animation: spin-c 120s linear infinite; }
.eco__rings i:nth-child(3) { width: 26vmin; height: 26vmin; max-width: 260px; max-height: 260px; background: radial-gradient(circle, rgba(96,170,205,.14), transparent 70%); border: 0; }
.eco__diagram { position: relative; width: 100%; }

/* =====================================================================
   SERVICES — overview + chapters
   ===================================================================== */
.svc-intro__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 2rem 4rem; align-items: end; }
.svc-intro__head .eyebrow { grid-column: 1 / -1; }
.svc-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; margin-top: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--line-l2); }
.svc-index li { border-bottom: 1px solid var(--line-l); }
.svc-index a { display: flex; align-items: baseline; gap: 1.1rem; padding: 1.05rem 0; color: var(--ink); text-decoration: none; font: 400 1rem/1.35 var(--f-display); letter-spacing: -.01em; transition: color var(--dur), transform 500ms var(--ease); }
.svc-index a span { font: 500 .7rem var(--f-tech); letter-spacing: .12em; color: var(--ink-3); transition: color var(--dur); }
.svc-index a:hover { color: var(--blue-ink); transform: translateX(6px); }
.svc-index a:hover span { color: var(--blue-ink); }

.chapter { position: relative; padding-block: var(--section); overflow: clip; }
.chapter__layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; }
.chapter__layout--wide { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
.chapter__layout--flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.chapter__layout--flip .chapter__copy { order: 2; }
.chapter__kicker { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.6rem; font: 500 .72rem/1 var(--f-tech); letter-spacing: .18em; text-transform: uppercase; color: var(--t-2); }
.chapter__n { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 .4rem; border: 1px solid var(--a, var(--blue)); border-radius: var(--r1); color: var(--a-ink, var(--blue)); font-variant-numeric: tabular-nums; }
.theme-dark .chapter__n { color: var(--a, var(--blue)); }
.chapter__title { font-size: var(--fs-h3); font-weight: 300; line-height: 1.04; letter-spacing: -.045em; color: var(--t-1); }
.chapter__lead { margin: 1.4rem 0 2rem; font-size: 1.06rem; line-height: 1.65; color: var(--t-2); max-width: 44ch; }
.chapter__vis { position: relative; }

/* Frames around every visual: hairline metallic border, deep navy glass */
.vis-frame { position: relative; overflow: hidden; border-radius: var(--r3); aspect-ratio: 4 / 3; color: var(--on-dark);
  background: radial-gradient(90% 80% at 50% 0%, #133356, var(--navy) 72%); box-shadow: 0 50px 90px -50px rgba(8,24,43,.95), 0 0 0 1px rgba(8,24,43,.06); }
.vis-frame::before { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; padding: 1px; background: var(--metal); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.vis-frame--lg { aspect-ratio: 16 / 11; }
.vis-frame .demo__status { left: 18px; bottom: 16px; }
.vis-frame--lg .demo__status { top: 18px; bottom: auto; left: 18px; }
.vis-frame--lg .demo__replay { top: 18px; bottom: auto; right: 18px; }


/* ---------- Demo internals (kept from v2) ---------- */
.demo { position: absolute; inset: 0; }
.demo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo text { font: 500 9px var(--f-tech); letter-spacing: .1em; text-transform: uppercase; fill: var(--on-dark-3); text-anchor: middle; transition: fill 400ms; }
.demo__status { position: absolute; left: 22px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: .7rem; padding: .45rem .7rem; border-radius: var(--r1); background: rgba(8,24,43,.85); border: 1px solid var(--line-d2); color: var(--on-dark); font-size: .7rem; }
.demo__replay { position: absolute; right: 16px; bottom: 16px; z-index: 4; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border-radius: var(--r1); border: 1px solid var(--line-d2); background: rgba(8,24,43,.85); color: var(--on-dark-2); font: 500 .7rem var(--f-tech); letter-spacing: .12em; text-transform: uppercase; transition: color var(--dur), border-color var(--dur); }
.demo__replay .ico { width: 1em; height: 1em; transform: rotate(180deg); }
.demo__replay:hover { color: var(--white); border-color: var(--blue); }

/* Wi-Fi */
.wifi__waves circle { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: wave 3s var(--ease) infinite; }
.wifi__waves circle:nth-child(2) { animation-delay: 1s; } .wifi__waves circle:nth-child(3) { animation-delay: 2s; }
.wifi__links path { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 6; opacity: 0; transition: opacity 500ms; animation: dash 1s linear infinite; }
.wifi__disc { fill: #EAF1F8; stroke: #9FB3C6; }
.wifi__led { fill: var(--green); animation: blink 1.2s steps(2) infinite; }
.wifi__dev rect, .wifi__dev path { fill: rgba(16,42,71,.9); stroke: var(--on-dark-3); stroke-width: 1.5; transition: stroke 400ms; }
.signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.signal i { width: 3px; background: var(--line-d2); border-radius: 1px; transition: background 400ms; }
.signal i:nth-child(1) { height: 25%; } .signal i:nth-child(2) { height: 50%; } .signal i:nth-child(3) { height: 75%; } .signal i:nth-child(4) { height: 100%; }
.demo--wifi[data-step="1"] .wifi__links path:nth-child(1), .demo--wifi[data-step="2"] .wifi__links path:nth-child(-n+2), .demo--wifi[data-step="3"] .wifi__links path:nth-child(-n+3), .demo--wifi[data-step="4"] .wifi__links path { opacity: .9; }
.demo--wifi[data-step="1"] .wifi__dev[style*="--d:0"] :is(rect,path), .demo--wifi[data-step="2"] .wifi__dev:is([style*="--d:0"],[style*="--d:1"]) :is(rect,path), .demo--wifi[data-step="3"] .wifi__dev:not([style*="--d:3"]) :is(rect,path), .demo--wifi[data-step="4"] .wifi__dev :is(rect,path) { stroke: var(--green); }
.demo--wifi[data-step="1"] .signal i:nth-child(-n+1), .demo--wifi[data-step="2"] .signal i:nth-child(-n+2), .demo--wifi[data-step="3"] .signal i:nth-child(-n+3), .demo--wifi[data-step="4"] .signal i { background: var(--green); }

/* Video conferencing */
.vc__grid { position: absolute; inset: 22px 22px 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vc__tile { position: relative; border-radius: var(--r2); background: linear-gradient(160deg, #163A60, #0C223B); border: 1.5px solid transparent; overflow: hidden; transition: border-color 400ms, box-shadow 400ms; }
.vc__avatar { position: absolute; left: 50%; bottom: 0; width: 46%; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle at 50% 32%, #6E89A6 0 18%, transparent 19%), radial-gradient(ellipse 50% 40% at 50% 100%, #536F8E 0 99%, transparent 100%); opacity: .8; }
.vc__level { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.vc__level i { width: 4px; height: 25%; background: var(--green); border-radius: 1px; opacity: .3; }
.vc__tile.is-active { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(96,170,205,.18); }
.vc__tile.is-active .vc__level i { opacity: 1; animation: level 600ms var(--ease-io) infinite alternate; }
.vc__tile.is-active .vc__level i:nth-child(2) { animation-delay: .15s; } .vc__tile.is-active .vc__level i:nth-child(3) { animation-delay: .3s; } .vc__tile.is-active .vc__level i:nth-child(4) { animation-delay: .1s; }
.vc__chips { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .64rem; }
.vc__chips li { padding: .35rem .55rem; border-radius: var(--r1); border: 1px solid var(--line-d2); color: var(--on-dark-3); transition: color 400ms, border-color 400ms, background 400ms; }
.vc__chips li.is-on { color: var(--white); border-color: rgba(96,171,86,.6); background: rgba(96,171,86,.14); }

/* Intercom */
.ic__station rect, .ic__station circle, .ic__monitor > rect:first-child { fill: rgba(16,42,71,.9); stroke: var(--on-dark-3); stroke-width: 1.5; }
.ic__station .ic__btn { fill: var(--navy-3); stroke: var(--blue); transition: fill 300ms; }
.ic__screen { fill: #061220; stroke: var(--line-d2); transition: fill 500ms; }
.ic__head { fill: none; stroke: var(--blue); stroke-width: 2; opacity: 0; transition: opacity 500ms; }
.ic__line { fill: none; stroke: var(--line-d2); stroke-width: 1.5; stroke-dasharray: 3 6; }
.ic__packet { fill: var(--blue); opacity: 0; transition: opacity 300ms; }
.ic__rings circle { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ic__lock { display: inline-grid; color: var(--on-dark-3); transition: color 400ms; }
.ic__lock .ico { width: 14px; height: 14px; }
.demo--intercom[data-step="1"] .ic__btn, .demo--intercom[data-step="2"] .ic__btn { fill: var(--blue); }
.demo--intercom[data-step="1"] .ic__rings circle { animation: wave 1.4s var(--ease) infinite; }
.demo--intercom[data-step="1"] .ic__rings circle:nth-child(2) { animation-delay: .7s; }
.demo--intercom[data-step="1"] .ic__packet, .demo--intercom[data-step="2"] .ic__packet { opacity: 1; }
.demo--intercom:is([data-step="2"], [data-step="3"]) .ic__screen { fill: #0F3352; }
.demo--intercom:is([data-step="2"], [data-step="3"]) .ic__head { opacity: 1; }
.demo--intercom[data-step="3"] .ic__lock { color: var(--green); }
.scene__floor { fill: none; stroke: rgba(167,200,230,.25); stroke-width: 1.5; }
.demo .scene text { text-anchor: middle; }

/* Access control: card → reader → fingerprint → door opens */
.acc__frame { fill: #0A1B2E; stroke: rgba(167,200,230,.45); stroke-width: 2; }
.acc__opening { opacity: 0; transition: opacity 700ms var(--ease); }
.acc__leaf { transform-box: view-box; transform-origin: 306px 175px; transition: transform 1.1s var(--ease); }
.acc__panel { fill: none; stroke: rgba(167,200,230,.18); }
.acc__handle { fill: #C9D6E2; }
.acc__mag { fill: #22374F; stroke: rgba(167,200,230,.3); }
.acc__mag-led { fill: var(--red); transition: fill 300ms; }
.acc__screen { fill: #061220; stroke: rgba(96,170,205,.4); transition: fill 400ms, stroke 400ms; }
.acc__msg { opacity: 0; transition: opacity 300ms; }
.demo .acc__msg text { font: 600 8px var(--f-tech); letter-spacing: .08em; fill: var(--blue); }
.acc__ledbar { fill: rgba(167,200,230,.25); transition: fill 300ms; }
.acc__pad { fill: #0A1828; stroke: rgba(167,200,230,.35); }
.acc__ridges { fill: none; stroke: rgba(167,200,230,.45); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 0; transition: stroke 400ms; }
.acc__scanline { fill: var(--blue); opacity: 0; filter: drop-shadow(0 0 4px var(--blue)); }
.acc__nfc path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.acc__card { transform-box: view-box; transform-origin: 97px 158px; transform: translate(0, 34px) rotate(-9deg); filter: drop-shadow(0 16px 18px rgba(0,0,0,.5)); transition: transform 900ms var(--ease), opacity 600ms; }
.demo .acc__brand { font: 700 9px var(--f-display); letter-spacing: .08em; fill: var(--navy); text-anchor: end; }
.demo--access[data-step="0"] .acc__msg--0, .demo--access[data-step="1"] .acc__msg--1, .demo--access[data-step="2"] .acc__msg--2, .demo--access[data-step="3"] .acc__msg--3 { opacity: 1; }
.demo--access[data-step="1"] .acc__card { transform: translate(44px, -10px) rotate(0deg); }
.demo--access[data-step="1"] .acc__nfc path { animation: nfc 900ms var(--ease) infinite; }
.demo--access[data-step="1"] .acc__nfc path:nth-child(2) { animation-delay: .15s; } .demo--access[data-step="1"] .acc__nfc path:nth-child(3) { animation-delay: .3s; }
.demo--access:is([data-step="1"], [data-step="2"]) .acc__ledbar { fill: var(--blue); }
.demo--access:is([data-step="2"], [data-step="3"]) .acc__card { transform: translate(-6px, 40px) rotate(-12deg) scale(.9); opacity: .55; }
.demo--access[data-step="2"] .acc__scanline { opacity: 1; animation: pad-scan 1s var(--ease-io) infinite alternate; }
.demo--access[data-step="2"] .acc__ridges { stroke: var(--blue); animation: print-draw 1.6s var(--ease) forwards; }
.demo--access[data-step="3"] .acc__ridges { stroke: var(--green); }
.demo--access[data-step="3"] .acc__msg--3 text { fill: var(--green); }
.demo--access[data-step="3"] .acc__screen { fill: #0D2A1D; stroke: rgba(96,171,86,.6); }
.demo--access[data-step="3"] .acc__ledbar { fill: var(--green); }
.demo--access[data-step="3"] .acc__mag-led { fill: var(--green); }
.demo--access[data-step="3"] .acc__leaf { transform: perspective(600px) rotateY(-38deg); }
.demo--access[data-step="3"] .acc__opening { opacity: 1; }
.demo--access .status-dot { background: var(--blue); } .demo--access .status-dot::after { border-color: var(--blue); }
.demo--access[data-step="3"] .status-dot { background: var(--green); } .demo--access[data-step="3"] .status-dot::after { border-color: var(--green); }

/* Fire alarm: smoke → detection → alarm → reset */
.fire__alarm-wash { fill: var(--red); opacity: 0; }
.fire__bin { fill: #1B3550; stroke: rgba(167,200,230,.4); stroke-width: 1.5; }
.fire__smoke circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.fire__rings circle { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fire__det-led { fill: var(--green); animation: blink 2.4s steps(2) infinite; }
.fire__flash { opacity: 0; }
.fire__lens { fill: #E8E2DA; opacity: .55; }
.demo .fire__title { font: 700 7.5px var(--f-tech); letter-spacing: .12em; fill: #44566B; }
.fire__lcd { fill: #0D2A1D; stroke: #6B7D8F; transition: fill 300ms; }
.fire__msg { opacity: 0; transition: opacity 250ms; }
.demo .fire__msg text { font: 600 9px var(--f-tech); letter-spacing: .1em; fill: #8FE08A; }
.fire__zone rect { fill: #DDE5EC; stroke: #B3C1CE; transition: fill 300ms; }
.demo .fire__zone text { font: 600 8px var(--f-tech); letter-spacing: .1em; fill: #44566B; text-anchor: start; }
.fire__zone circle { fill: var(--green); transition: fill 300ms; }
.fire__lamp { fill: #C9D3DC; stroke: #A6B4C1; }
.fire__lamp--power { fill: var(--green); stroke: var(--green-ink); }
.demo .fire__lamp-txt { font: 700 7.5px var(--f-tech); letter-spacing: .12em; fill: #44566B; }
.demo--fire[data-step="0"] .fire__msg--0, .demo--fire[data-step="1"] .fire__msg--1, .demo--fire[data-step="2"] .fire__msg--2 { opacity: 1; }
.demo--fire:is([data-step="1"], [data-step="2"]) .fire__smoke circle { animation: smoke-rise 2.8s var(--ease) infinite; }
.demo--fire .fire__smoke circle:nth-child(2) { animation-delay: .55s !important; } .demo--fire .fire__smoke circle:nth-child(3) { animation-delay: 1.1s !important; }
.demo--fire .fire__smoke circle:nth-child(4) { animation-delay: 1.65s !important; } .demo--fire .fire__smoke circle:nth-child(5) { animation-delay: 2.2s !important; }
.demo--fire[data-step="1"] .fire__rings circle { animation: wave-sm 1.4s var(--ease) infinite; }
.demo--fire .fire__rings circle:nth-child(2) { animation-delay: .45s !important; } .demo--fire .fire__rings circle:nth-child(3) { animation-delay: .9s !important; }
.demo--fire[data-step="1"] .fire__det-led { fill: var(--gold); animation-duration: .8s; }
.demo--fire[data-step="1"] .fire__lcd { fill: #3A2C08; }
.demo--fire[data-step="1"] .fire__msg--1 text { fill: var(--gold); }
.demo--fire[data-step="1"] [data-zone="2"] rect { fill: #FBE7B5; }
.demo--fire[data-step="1"] [data-zone="2"] circle { fill: var(--gold); animation: blink .8s steps(2) infinite; }
.demo--fire[data-step="2"] .fire__rings circle { stroke: var(--red); animation: wave-sm 900ms var(--ease) infinite; }
.demo--fire[data-step="2"] .fire__det-led { fill: var(--red); animation-duration: .4s; }
.demo--fire[data-step="2"] .fire__lcd { fill: #3A0F08; }
.demo--fire[data-step="2"] .fire__msg--2 text { fill: #FF9C84; }
.demo--fire[data-step="2"] [data-zone="2"] rect { fill: #FFD2C6; animation: blink .6s steps(2) infinite; }
.demo--fire[data-step="2"] [data-zone="2"] circle { fill: var(--red); }
.demo--fire[data-step="2"] .fire__lamp--fire { fill: var(--red); stroke: var(--red-ink); animation: blink .6s steps(2) infinite; }
.demo--fire[data-step="2"] .fire__flash { animation: strobe .9s steps(1) infinite; }
.demo--fire[data-step="2"] .fire__lens { fill: #FFF2EC; opacity: 1; animation: blink .9s steps(2) infinite; }
.demo--fire[data-step="2"] .fire__alarm-wash { animation: wash 1.8s var(--ease-io) infinite; }
.demo--fire[data-step="1"] .status-dot { background: var(--gold); } .demo--fire[data-step="1"] .status-dot::after { border-color: var(--gold); }
.demo--fire[data-step="2"] .status-dot { background: var(--red); } .demo--fire[data-step="2"] .status-dot::after { border-color: var(--red); }

/* ---------- CCTV demo internals (kept from v2) ---------- */
.cctv { position: relative; --cam-w: 200px; }
.cctv__screen { position: relative; padding: 46px 14px 14px; border: 1px solid var(--line-d2); border-radius: var(--r3); background: linear-gradient(180deg, rgba(16,42,71,.85), rgba(8,24,43,.92)); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05); }
.cctv__bar { position: absolute; left: 22px; right: calc(var(--cam-w) * .8); top: 16px; display: flex; justify-content: space-between; gap: 1rem; font-size: .68rem; color: var(--on-dark-3); }
.cctv__rec { display: inline-flex; align-items: center; gap: .5rem; color: var(--on-dark-2); }
.cctv__rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: blink 1.4s steps(2) infinite; }
.cctv__plan { width: 100%; height: auto; border-radius: var(--r2); background: rgba(5, 14, 25, .55); }
.plan { opacity: 0; transform-box: view-box; transform-origin: 50% 50%; transform: scale(.96); filter: blur(4px); transition: opacity 500ms var(--ease), transform 700ms var(--ease), filter 500ms; }
.cctv[data-plan="office"] .plan[data-plan="office"], .cctv[data-plan="temple"] .plan[data-plan="temple"], .cctv[data-plan="commercial"] .plan[data-plan="commercial"] { opacity: 1; transform: none; filter: none; transition-delay: 120ms; }
.plan__walls { fill: none; stroke: rgba(167,200,230,.5); stroke-width: 2; stroke-linecap: square; }
.plan__vault { fill: rgba(242,178,52,.05); stroke: var(--gold); stroke-dasharray: 5 5; stroke-width: 1.5; }
.plan__deco { fill: rgba(167,200,230,.06); stroke: rgba(167,200,230,.28); stroke-width: 1; }
.plan__label { font: 500 9.5px var(--f-tech); letter-spacing: .12em; text-transform: uppercase; fill: var(--on-dark-3); }
.plan__cone { fill: var(--blue); opacity: .035; transition: opacity 600ms; }
.plan__beam { opacity: 0; }
.zone__br { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 60; stroke-dashoffset: 60; }
.zone__dot { fill: var(--on-dark-3); transition: fill 400ms; }
.zone__ring { fill: none; stroke: var(--green); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.zone__txt { font: 600 9.5px var(--f-tech); letter-spacing: .1em; text-transform: uppercase; fill: var(--green); text-anchor: middle; opacity: 0; }
.plan__ok { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ok__disc { fill: rgba(8,24,43,.94); stroke: rgba(96,171,86,.35); stroke-width: 8; }
.ok__ring { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-dasharray: 264; stroke-dashoffset: 264; transform: rotate(-90deg); }
.ok__tick { fill: none; stroke: var(--green); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }

.cam { position: absolute; z-index: 4; top: calc(var(--cam-w) * -.3); right: calc(var(--cam-w) * -.14); width: var(--cam-w); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 50%; }
.cam:focus-visible { outline-offset: -10px; }
.cam__svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 24px 30px rgba(0,0,0,.55)); }
.cam__head { transform-box: view-box; transform-origin: 236px 56px; transform: rotate(var(--cam-rot, 0deg)); transition: transform 700ms var(--ease); }
.cam__lens { transform-box: fill-box; transform-origin: center; transition: transform 600ms var(--ease); }
.cam__iris { transform-box: fill-box; transform-origin: center; transition: transform 600ms var(--ease); }
.cam__focus { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 400ms; }
.cam__glow { opacity: .25; transition: opacity 500ms; }
.cam__ir circle { fill: #3A2626; transition: fill 400ms; }
.cam__led { fill: var(--green); }
.cam:hover .cam__lens, .cam:focus-visible .cam__lens { transform: scale(1.06); }
.cam:hover .cam__iris, .cam:focus-visible .cam__iris { transform: scale(.7); }
.cam:hover .cam__focus, .cam:focus-visible .cam__focus { opacity: .9; animation: spin 6s linear infinite; }
.cam:hover .cam__glow, .cam:focus-visible .cam__glow { opacity: .9; }
.cam__hint { position: absolute; left: 6%; bottom: 2%; padding: .3rem .5rem; border-radius: var(--r1); background: var(--blue); color: var(--navy); font-size: .62rem; white-space: nowrap; animation: hint-bob 2.4s var(--ease-io) infinite; }
.cctv__pulses { position: absolute; left: 33.8%; top: 59%; width: 0; height: 0; pointer-events: none; }
.cctv__pulses span { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 1.5px solid var(--blue); opacity: 0; }

.cctv__panel { margin-top: 12px; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line-d2); border-radius: var(--r3); background: rgba(8, 24, 43, .8); }
.cctv__switch { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line-d); }
.cctv__tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--r2); background: rgba(5,14,25,.6); border: 1px solid var(--line-d); }
.cctv__tab { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border: 0; border-radius: 4px; background: transparent; color: var(--on-dark-2); font: 600 .84rem var(--f-body); overflow: hidden; transition: background var(--dur), color var(--dur); }
.cctv__tab .ico { width: 15px; height: 15px; }
.cctv__tab:hover { color: var(--white); background: rgba(96,170,205,.08); }
.cctv__tab[aria-selected="true"] { background: var(--blue); color: var(--navy); }
.cctv__tab-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--navy); transform-origin: 0 50%; transform: scaleX(0); opacity: .45; }
.cctv.is-touring .cctv__tab[aria-selected="true"] .cctv__tab-bar { animation: tab-progress var(--tour, 8s) linear forwards; }
.cctv__auto { gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--line-d2); border-radius: 4px; background: transparent; color: var(--on-dark-2); font-size: .66rem; transition: color var(--dur), border-color var(--dur); }
.cctv__auto:hover { color: var(--white); border-color: var(--blue); }
.cctv__auto-icon { position: relative; width: 10px; height: 10px; }
.cctv__auto-icon::before, .cctv__auto-icon::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: currentColor; }
.cctv__auto-icon::before { left: 1px; } .cctv__auto-icon::after { right: 1px; }
.cctv__auto[aria-pressed="false"] .cctv__auto-icon::before { left: 1px; width: 0; height: 0; background: none; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; }
.cctv__auto[aria-pressed="false"] .cctv__auto-icon::after { display: none; }
.cctv__auto[aria-pressed="true"] { color: var(--green); border-color: rgba(96,171,86,.5); }
.cctv__readout { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cctv__state { font-size: .82rem; color: var(--on-dark); letter-spacing: .18em; }
.cctv__pct { color: var(--on-dark-3); font-variant-numeric: tabular-nums; }
.cctv__progress { display: block; height: 3px; margin: .75rem 0 .85rem; background: var(--line-d); border-radius: 2px; overflow: hidden; }
.cctv__progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--blue), var(--green)); }
.cctv__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cctv__note { font-size: .8rem; color: var(--on-dark-3); }
[data-cctv-again][hidden] { display: none; }

/* ---------- CCTV chapter: the interactive demo, restyled ---------- */
.chapter--cctv { background: radial-gradient(90% 70% at 85% 30%, #0F2A49, var(--navy) 65%); }
.chapter__vis--cctv { padding-top: 3.5rem; }
.chapter__vis--cctv .cctv { --cam-w: 210px; }
.cctv__screen { border: 0 !important; background: linear-gradient(180deg, rgba(16,42,71,.75), rgba(5,15,28,.92)) !important; }
.cctv__screen::before, .cctv__panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--metal); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cctv__panel { position: relative; border: 0 !important; background: rgba(5,15,28,.7) !important; }

/* =====================================================================
   NETWORKING STORY
   ===================================================================== */
.netstory { padding-block: var(--section) calc(var(--section) * .75); background: var(--navy-2); overflow: clip; }
.netstory__intro { max-width: 760px; }
.netstory__intro .badge { margin-left: .2rem; }
.netstory__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.netstory__sticky { position: sticky; top: calc(var(--header-h) + 4vh); align-self: start; }
.netstory__panel { position: relative; padding: 46px 10px 10px; border-radius: var(--r3); background: radial-gradient(100% 80% at 80% 0%, rgba(96,170,205,.12), transparent 60%), var(--navy); box-shadow: 0 50px 90px -50px rgba(0,0,0,.9); }
.netstory__panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--metal); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.netstory__hud { position: absolute; left: 24px; right: 24px; top: 18px; display: flex; justify-content: space-between; font: 500 .64rem var(--f-tech); letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-3); }
.netstory__hud span { display: inline-flex; align-items: center; gap: .55rem; }
.netstory__hud [data-netstory-label] { color: var(--blue); }
.netstory__meter { height: 1px; margin: 1.1rem 2px 0; background: var(--line-d2); overflow: hidden; }
.netstory__meter span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--meter, 0)); background: linear-gradient(90deg, var(--blue), var(--ice)); transition: transform 700ms var(--ease); }
.step { display: flex; flex-direction: column; justify-content: center; min-height: 56vh; padding-block: 2rem; }
.step:last-child { min-height: 44vh; }
.step__num { font: 300 clamp(2.4rem, 1.6rem + 2vw, 3.6rem)/1 var(--f-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(96,170,205,.55); transition: color 600ms var(--ease); }
.step.is-active .step__num { color: var(--blue); -webkit-text-stroke-color: var(--blue); }
.step__title { margin: .9rem 0 1.2rem; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 300; letter-spacing: -.04em; color: var(--white); }
.netstory__cta { margin-top: 3rem; }

/* =====================================================================
   COMMUNICATION (three systems side by side)
   ===================================================================== */
.comms { overflow: clip; background: var(--navy); }
.comms__head { max-width: 760px; margin-bottom: clamp(3rem, 6vw, 5rem); }
.comms__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); }
.comm__vis { aspect-ratio: 4 / 3.3; }
.comm__copy { padding-top: 1.9rem; }
.comm__title { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); font-weight: 300; letter-spacing: -.035em; color: var(--white); }
.comm__lead { margin: .8rem 0 1.4rem; color: var(--on-dark-2); font-size: .97rem; }
.comm .caps li { font-size: .88rem; padding-block: .5rem; }
.comm .vc__grid { inset: 18px 18px 64px; }
.comm .vc__chips { left: 18px; right: 18px; bottom: 18px; }

/* =====================================================================
   FURTHER SOLUTIONS (editorial index)
   ===================================================================== */
.others__head { max-width: 760px; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.solutions { border-top: 1px solid var(--line-l2); }
.sol { position: relative; display: grid; grid-template-columns: 56px 54px minmax(0, 1.25fr) minmax(0, 1fr) 48px; gap: 1rem 2rem; align-items: center; padding: 2rem 1rem 2rem .25rem; border-bottom: 1px solid var(--line-l2); transition: background 500ms var(--ease), padding 500ms var(--ease); }
.sol::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--a); transform: scaleY(0); transform-origin: 50% 0; transition: transform 600ms var(--ease); }
.sol:hover, .sol:target { background: var(--mist); padding-left: 1.25rem; }
.sol:hover::before, .sol:target::before { transform: scaleY(1); }
.sol__n { font: 500 .74rem var(--f-tech); letter-spacing: .12em; color: var(--ink-3); }
.sol__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line-l2); color: var(--a-ink); transition: background 500ms, color 500ms, border-color 500ms, transform 700ms var(--ease); }
.sol__icon .ico { width: 22px; height: 22px; }
.sol:hover .sol__icon { background: var(--a); border-color: var(--a); color: var(--white); transform: rotate(-12deg); }
.sol__title { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); font-weight: 400; letter-spacing: -.03em; color: var(--ink); }
.sol__lead { margin-top: .45rem; color: var(--ink-2); font-size: .95rem; max-width: 52ch; }
.sol__items { display: flex; flex-wrap: wrap; gap: .35rem; }
.sol__items li { padding: .32rem .6rem; border: 1px solid var(--line-l2); border-radius: var(--r1); background: var(--white); font-size: .78rem; color: var(--ink); }
.sol__go { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-l2); color: var(--ink); text-decoration: none; transition: background var(--dur), color var(--dur), border-color var(--dur), transform 500ms var(--ease); }
.sol__go .ico { width: 18px; height: 18px; }
.sol__go:hover, .sol:hover .sol__go { background: var(--navy); border-color: var(--navy); color: var(--white); transform: rotate(-45deg); }

/* =====================================================================
   TEMPLE (pinned aperture scene)
   ===================================================================== */
.temple { --p: 1; background: radial-gradient(80% 70% at 75% 50%, #1A2A33, var(--navy) 65%); }
.temple.is-pinned { height: 240vh; }
.temple.is-pinned .temple__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.temple:not(.is-pinned) .temple__pin { padding-block: var(--section); }
.temple__layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.temple .chapter__lead { margin-bottom: 0; }
.temple__figure { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.4rem; margin: 2rem 0; padding: 1.4rem 0; border-block: 1px solid var(--line-d); }
.temple__num { font: 300 clamp(3.2rem, 2rem + 3.6vw, 5.4rem)/1 var(--f-display); letter-spacing: -.06em; color: var(--gold); }
.temple__figure > span:last-child { color: var(--on-dark-2); max-width: 24ch; line-height: 1.45; }
.temple__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin-top: 2.2rem; }
.temple__actions .link-arrow { margin-top: 0; }
.temple__media { position: relative; justify-self: center; width: 100%; max-width: 470px; }
.temple__frame { position: relative; aspect-ratio: 630 / 900; max-height: 76vh; margin-inline: auto; overflow: hidden; border-radius: var(--r3); background: var(--navy-3); clip-path: circle(calc(10% + var(--p) * 80%) at 50% 50%); }
.temple.is-pinned .temple__frame { height: 76vh; width: auto; }
.temple__frame picture, .temple__frame img { width: 100%; height: 100%; }
.temple__frame img { object-fit: cover; object-position: center 30%; transform: scale(calc(1.3 - var(--p) * .3)); }
.temple__cover { position: absolute; inset: 0; width: 100%; height: 100%; opacity: clamp(0, calc((var(--p) - .55) * 3), 1); }
.cone path { fill: rgba(96,170,205,.18); stroke: rgba(150,210,240,.6); stroke-width: 1.5; }
.cone { transform-box: view-box; animation: sweep 6s var(--ease-io) infinite alternate; }
.cone--a { transform-origin: 40px 860px; } .cone--b { transform-origin: 600px 820px; animation-delay: -2s; } .cone--c { transform-origin: 315px 880px; animation-delay: -4s; }
.cone--c path { fill: rgba(96,171,86,.14); stroke: rgba(140,210,130,.55); }
.cam-dot { fill: var(--white); stroke: var(--blue); stroke-width: 4; }
.temple__scan { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(180deg, transparent, rgba(96,170,205,.25) 92%, rgba(170,225,250,.8) 99%, transparent); opacity: clamp(0, calc((var(--p) - .6) * 3), 1); animation: scan-y 4.5s linear infinite; }
.temple__chips { position: absolute; left: 18px; bottom: 18px; z-index: 3; display: grid; gap: .4rem; font-size: .62rem; opacity: clamp(0, calc((var(--p) - .75) * 4), 1); }
.temple__chips li { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; padding: .4rem .6rem; border-radius: var(--r1); background: rgba(8,24,43,.85); color: var(--white); }
.temple__media figcaption { margin-top: 1rem; text-align: center; font-size: .78rem; color: var(--on-dark-3); }

/* =====================================================================
   PROJECTS (pinned horizontal gallery)
   ===================================================================== */
.projects { padding-top: var(--section); background: var(--abyss); }
.projects:has(.hscroll.is-pinned) { padding-top: 0; }
.projects__bg { z-index: 0; }
.hscroll__sticky { position: relative; }
.hscroll__head { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.hscroll__head .eyebrow { margin-bottom: 1.6rem; }
.hscroll__meta { display: grid; gap: 1.2rem; justify-items: start; }
.hscroll__count { font: 300 1.6rem var(--f-display); letter-spacing: -.03em; color: var(--on-dark-3); font-variant-numeric: tabular-nums; }
.hscroll__count span { color: var(--white); }
.hscroll__progress { grid-column: 1 / -1; height: 1px; background: var(--line-d2); overflow: hidden; }
.hscroll__progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--hp, 0)); background: linear-gradient(90deg, var(--blue), var(--ice)); }
.hscroll__viewport { position: relative; z-index: 1; }
.hscroll__track { display: grid; gap: 1.75rem; padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.hscroll.is-pinned .hscroll__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--header-h) * .55); }
.hscroll.is-pinned .hscroll__track { display: flex; width: max-content; will-change: transform; }
.hscroll.is-pinned .project { flex: none; width: min(980px, 70vw); height: min(560px, calc(100vh - 280px)); }
.project { --rx: 0deg; --ry: 0deg; position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; border-radius: var(--r3); background: linear-gradient(160deg, #0E243D, #081A2E); transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 700ms var(--ease); }
.project::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 1px; background: var(--metal); opacity: .6; pointer-events: none; transition: opacity 500ms;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.project:hover::before { opacity: 1; }
.project__media { position: relative; min-height: 260px; overflow: hidden; display: grid; place-items: center; background: var(--navy-3); }
.project__media picture, .project__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.project__media img { object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease), filter 700ms; filter: saturate(.85); }
.project:hover .project__media img { transform: scale(1.13); filter: saturate(1.05); }
.project__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,24,43,.75), transparent 50%); pointer-events: none; }
.project__media--contain { background: #F6C445; }
.project__media--contain img { object-fit: contain; padding: 1.4rem; transform: none; }
.project__media--contain::after { display: none; }
.project__media--icon { background: radial-gradient(100% 80% at 50% 40%, color-mix(in srgb, var(--a) 24%, transparent), transparent 70%), var(--navy); }
.project__radar { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.project__radar i { position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--a) 60%, transparent); opacity: 0; animation: wave-sm 3.6s var(--ease) infinite; }
.project__radar i:nth-child(2) { animation-delay: 1.2s; } .project__radar i:nth-child(3) { animation-delay: 2.4s; }
.project__glyph { position: relative; width: 76px; height: 76px; stroke-width: 1; color: var(--white); transition: transform 800ms var(--ease); }
.project:hover .project__glyph { transform: scale(1.1); }
.project__tag { position: absolute; left: 1.1rem; top: 1.1rem; z-index: 2; padding: .4rem .6rem; border-radius: var(--r1); background: rgba(8,24,43,.85); color: var(--white); font: 500 .6rem/1 var(--f-tech); letter-spacing: .16em; text-transform: uppercase; }
.project__body { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.6vw, 2.5rem); overflow: auto; scrollbar-width: thin; }
.project__title { margin-bottom: 1.2rem; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem); font-weight: 300; letter-spacing: -.045em; color: var(--white); }
.project__meta { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.1rem; margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-d); font-size: .88rem; }
.project__meta dt { font: 500 .64rem/2 var(--f-tech); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); }
.project__meta dd { color: var(--on-dark); font-weight: 500; }
.project__scope { margin-bottom: 1.1rem; font-size: .92rem; line-height: 1.6; color: var(--on-dark-2); }
.project .tags { margin-bottom: 1.1rem; }
.project__recog { display: flex; gap: .7rem; align-items: flex-start; margin-top: auto; padding: .9rem 1rem; border-radius: var(--r2); border: 1px solid rgba(242,178,52,.3); background: rgba(242,178,52,.06); font-size: .84rem; line-height: 1.5; color: var(--on-dark); }
.project__recog .ico { margin-top: .1rem; color: var(--gold); }

.more { position: relative; padding-block: clamp(3.5rem, 6vw, 5rem) var(--section); }
.more .eyebrow { margin-bottom: 1.5rem; }
.more__list { border-top: 1px solid var(--line-d); }
.more__row { display: grid; grid-template-columns: 48px minmax(0, .8fr) minmax(0, 1.4fr); gap: 1rem 2rem; align-items: center; padding: 1.5rem .4rem; border-bottom: 1px solid var(--line-d); transition: background 500ms, padding 500ms var(--ease); }
.more__row:hover { background: rgba(96,170,205,.05); padding-left: 1rem; }
.more__icon { color: var(--a); }
.more__icon .ico { width: 24px; height: 24px; stroke-width: 1.4; }
.more__title { font-size: 1.25rem; font-weight: 300; color: var(--white); letter-spacing: -.03em; }
.more__row p { color: var(--on-dark-2); font-size: .93rem; }

/* =====================================================================
   CREDENTIALS
   ===================================================================== */
.creds__layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); }
.creds__head { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; }
.creds__head .eyebrow { margin-bottom: 2rem; }
.creds__head .lead { margin-top: 1.5rem; }
.creds__footnote { margin-top: 1.5rem; font-size: .84rem; color: var(--ink-3); }
.creds { display: grid; gap: 3.5rem; }
.creds__h { display: flex; margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-l); color: var(--ink-3); }
.creds__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cred { position: relative; display: flex; align-items: center; gap: 1.15rem; padding: 1.25rem 1.3rem; border-radius: var(--r3); background: linear-gradient(160deg, #FFFFFF, var(--mist)); transition: transform 600ms var(--ease), box-shadow 600ms var(--ease); }
.cred::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--metal-l); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cred::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%); opacity: 0; transform: translateX(-60%); transition: transform 1.1s var(--ease), opacity 400ms; pointer-events: none; }
.cred:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(8,24,43,.45); }
.cred:hover::after { opacity: 1; transform: translateX(60%); }
.seal { position: relative; flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; color: var(--navy); background: radial-gradient(circle at 35% 30%, #FFE7A8, var(--gold) 60%, #C98D10); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 10px 20px -10px rgba(180,125,6,.7); }
.seal--navy { color: var(--white); background: radial-gradient(circle at 35% 30%, #2F5F99, #0B2545 66%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.2), 0 10px 20px -10px rgba(11,37,69,.7); }
.seal--green { color: var(--white); background: radial-gradient(circle at 35% 30%, #86C97C, var(--green-ink) 70%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3), 0 10px 20px -10px rgba(58,122,51,.7); }
.seal__orbit { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); fill: none; stroke: var(--steel); stroke-width: 1; stroke-dasharray: 2 6; opacity: .7; transition: transform 1.6s var(--ease); }
.cred:hover .seal__orbit { transform: rotate(160deg); }
.seal__txt { position: relative; font: 500 .64rem/1.05 var(--f-tech); letter-spacing: .05em; text-align: center; }
.seal__txt .ico { width: 22px; height: 22px; }
.cred__name { display: block; font: 500 1rem/1.25 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.cred__desc { display: block; margin-top: .25rem; font-size: .84rem; line-height: 1.45; color: var(--ink-2); }

/* =====================================================================
   CONTACT, FORM, MODAL
   ===================================================================== */
.contact { padding-block: var(--section); overflow: hidden; background: radial-gradient(80% 70% at 20% 10%, #0F2A49, var(--navy) 60%); }
.contact__bg .bg-canvas { opacity: .7; }
.contact__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.contact__info .eyebrow { margin-bottom: 2rem; }
.contact__info .lead { margin-top: 1.5rem; }
.contact__lines { display: grid; gap: .1rem; margin-top: 3rem; border-top: 1px solid var(--line-d); }
.contact__lines li { border-bottom: 1px solid var(--line-d); }
.contact__lines a { display: flex; align-items: center; gap: 1rem; padding: .95rem 0; color: var(--on-dark); text-decoration: none; font: 300 clamp(1.15rem, 1rem + .6vw, 1.5rem) var(--f-display); letter-spacing: -.02em; transition: color var(--dur), padding 500ms var(--ease); }
.contact__lines a .ico { width: 18px; height: 18px; color: var(--blue); }
.contact__lines a:hover { color: var(--white); padding-left: .6rem; }
.contact__phone--main { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem) !important; letter-spacing: -.045em !important; color: var(--white) !important; }
.contact__mail { word-break: break-word; }
.form { position: relative; padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: var(--r3); background: linear-gradient(180deg, rgba(16,42,71,.72), rgba(8,24,43,.9)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 60px 100px -50px rgba(0,0,0,.9); }
.form::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--metal); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.form__title { margin-bottom: 1.6rem; font-size: 1.5rem; font-weight: 300; letter-spacing: -.03em; color: var(--white); }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field { margin-bottom: 1.15rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.field-row .field { margin-bottom: .3rem; }
.field label { display: block; margin-bottom: .5rem; font: 500 .66rem var(--f-tech); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); }
.field input, .field textarea, .select select { width: 100%; min-height: 52px; padding: .85rem 1rem; border-radius: var(--r2); background: rgba(5, 14, 25, .55); border: 1px solid var(--line-d2); color: var(--white); transition: border-color var(--dur), box-shadow var(--dur), background var(--dur); }
.field textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.field input:hover, .field textarea:hover, .select select:hover { border-color: rgba(167,200,230,.42); }
.field input:focus, .field textarea:focus, .select select:focus { outline: none; border-color: var(--blue); background: rgba(5, 14, 25, .75); box-shadow: 0 0 0 4px rgba(96,170,205,.16); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select select option { background: var(--navy); color: var(--white); }
.select .ico { position: absolute; right: 1rem; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; color: var(--on-dark-2); }
.field__error { margin-top: .4rem; font-size: .84rem; color: #FF9C84; }
.field__error:empty { display: none; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #FF8A6E; }
.field.is-valid input, .field.is-valid textarea { border-color: rgba(133, 201, 123, .6); }
.field__hint { margin: 0 0 1.15rem; font-size: .82rem; color: var(--on-dark-3); }
.form__submit { width: 100%; margin-top: .4rem; }
.form__submit[aria-busy="true"] { opacity: .7; pointer-events: none; }
.form__note { margin-top: 1rem; font-size: .82rem; line-height: 1.5; color: var(--on-dark-3); }
.form__status { display: none; margin-bottom: 1.25rem; padding: .9rem 1rem; border-radius: var(--r2); font-size: .92rem; line-height: 1.5; }
.form__status.is-success { display: block; background: rgba(96,171,86,.14); border: 1px solid rgba(133,201,123,.4); color: #CDEBC7; }
.form__status.is-error { display: block; background: rgba(241,94,60,.12); border: 1px solid rgba(255,138,110,.45); color: #FFD2C6; }
.form__status.is-info { display: block; background: rgba(96,170,205,.12); border: 1px solid rgba(96,170,205,.4); color: #D3E9F4; }

.modal { width: min(440px, calc(100vw - 32px)); padding: 2.4rem 2rem 2rem; border: 0; border-radius: var(--r3); background: var(--white); color: var(--ink); text-align: center; box-shadow: 0 50px 100px -30px rgba(0,0,0,.6); }
.modal::backdrop { background: rgba(5, 15, 28, .75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal[open] { animation: modal-in 600ms var(--ease); }
.modal[open]::backdrop { animation: fade-in 400ms var(--ease); }
.modal__icon { width: 64px; height: 64px; margin: 0 auto 1.2rem; }
.modal__icon svg { width: 100%; height: 100%; fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.modal__icon circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw 800ms var(--ease) 150ms forwards; }
.modal__icon path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 500ms var(--ease) 700ms forwards; }
.modal__title { font-size: 1.5rem; font-weight: 400; color: var(--ink); }
.modal__text { margin: .8rem 0 1.6rem; color: var(--ink-2); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { position: relative; isolation: isolate; padding-block: clamp(5rem, 9vw, 8rem) 2rem; background: var(--abyss); overflow: hidden; }
.footer__net { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; }
.footer__net path { fill: none; stroke: rgba(96,170,205,.16); stroke-width: 1; stroke-dasharray: 1400; stroke-dashoffset: 1400; vector-effect: non-scaling-stroke; }
.footer__net path:nth-child(2) { stroke: rgba(96,171,86,.1); } .footer__net path:nth-child(3) { stroke: rgba(96,170,205,.1); }
.footer__words { margin-bottom: clamp(3.5rem, 7vw, 6rem); font: 300 clamp(2.8rem, .8rem + 8vw, 10rem)/.92 var(--f-display); letter-spacing: -.065em; }
.footer__words span { display: inline-block; color: var(--white); transition: color 600ms var(--ease), transform 600ms var(--ease); }
.footer__words span:nth-child(1):hover { color: var(--blue); } .footer__words span:nth-child(2):hover { color: var(--green); } .footer__words span:nth-child(3):hover { color: var(--red); }
.footer__words span:hover { transform: translateY(-6px); }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line-d); }
.footer__brand { display: inline-flex; align-items: center; gap: 1.1rem; color: var(--white); text-decoration: none; }
.brand__plate--lg { width: 64px; height: 64px; border-radius: var(--r3); }
.brand__plate--lg img { width: 56px; height: 56px; }
.footer__name { font: 500 clamp(.85rem, .8rem + .3vw, 1rem)/1.35 var(--f-tech); letter-spacing: .18em; }
.footer__tag { max-width: 44ch; color: var(--on-dark-2); font-size: .95rem; }
.footer__cols { display: grid; grid-template-columns: .8fr 1.2fr 1.4fr 1fr; gap: 2.5rem 2rem; padding-block: 3.5rem; }
.footer__h { margin-bottom: 1.2rem; font: 500 .66rem var(--f-tech); letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-3); }
.footer__cols ul { display: grid; gap: .6rem; }
.footer__cols a { font-size: .92rem; color: var(--on-dark-2); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color var(--dur), background-size 500ms var(--ease); }
.footer__cols a:hover { color: var(--white); background-size: 100% 1px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; padding-top: 1.75rem; border-top: 1px solid var(--line-d); font: 500 .66rem var(--f-tech); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }

.to-top { position: fixed; right: clamp(14px, 2.5vw, 28px); bottom: clamp(14px, 2.5vw, 28px); z-index: 900; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(8,24,43,.8); border: 1px solid var(--line-d2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--white); box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 300ms, transform 500ms var(--ease), visibility 0s linear 300ms, background var(--dur); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { transform: translateY(-3px); background: var(--blue); color: var(--navy); }


/* =====================================================================
   NETWORK DIAGRAMS (js/network.js)
   ===================================================================== */
.msts-net { --n-link: #1B4A80; --n-label: var(--ink); --n-halo: rgba(255,255,255,.92); --n-sub: var(--ink-2); --n-fill: #fff; --n-core: var(--navy); --n-core-text: #fff; position: relative; width: 100%; }
[data-msts-theme="dark"] .msts-net { --n-link: #8CC3E8; --n-label: #fff; --n-halo: rgba(8,24,43,.9); --n-sub: var(--on-dark-2); --n-fill: var(--navy-2); --n-core: #fff; --n-core-text: var(--navy); }
.msts-net svg { display: block; width: 100%; height: 100%; overflow: visible; }
.msts-net .link { fill: none; stroke: var(--n-link); stroke-opacity: .24; stroke-width: 1.5; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke 300ms, stroke-opacity 300ms, stroke-width 300ms; }
.msts-net .link.trunk { stroke-width: 2.4; stroke-opacity: .4; }
.msts-net.is-in .link { animation: draw 1.4s var(--ease) forwards; animation-delay: var(--d, 0ms); }
.msts-net .link.is-hot { stroke: var(--_hot, var(--red)); stroke-opacity: .95; stroke-width: 2.6; }
.msts-net .flow { fill: none; stroke: var(--n-link); stroke-width: 1.5; stroke-dasharray: 2 10; stroke-opacity: 0; transition: stroke-opacity 300ms; }
.msts-net .flow.is-hot { stroke: var(--_hot); stroke-opacity: .9; animation: dash-fast .6s linear infinite; }
.msts-net.has-focus .link:not(.is-hot) { stroke-opacity: .07; }
.msts-net .port { fill: var(--n-link); opacity: 0; transform-box: fill-box; transform-origin: center; }
.msts-net.is-in .port { animation: port 2.8s var(--ease) infinite; animation-delay: var(--d, 0ms); }
.msts-net .packet { filter: drop-shadow(0 0 5px currentColor); }
.msts-net.has-focus .packet:not(.is-hot), .msts-net.has-focus .trail:not(.is-hot) { opacity: .1; }
.msts-net .node { cursor: pointer; outline: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.msts-net.is-in .node { animation: pop 800ms var(--ease) forwards; animation-delay: var(--d, 0ms); }
.msts-net .node-body { fill: var(--n-fill); stroke: var(--_c); stroke-width: 2; transition: fill 260ms; }
.msts-net .node-ring { fill: none; stroke: var(--_c); stroke-width: 1; stroke-dasharray: 3 5; opacity: .45; transform-box: fill-box; transform-origin: center; }
.msts-net.is-in .node-ring { animation: spin 18s linear infinite; }
.msts-net .node-icon { fill: none; stroke: var(--_c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 260ms; }
.msts-net .node-pulse { fill: none; stroke: var(--_c); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.msts-net.is-in .node-pulse { animation: wave-sm 3.2s var(--ease) infinite; animation-delay: calc(var(--d, 0ms) + 900ms); }
.msts-net .node-label { font: 600 13.5px var(--f-display); letter-spacing: -.01em; fill: var(--n-label); paint-order: stroke; stroke: var(--n-halo); stroke-width: 4px; stroke-linejoin: round; text-anchor: middle; opacity: 0; transform: translateY(6px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--d, 0ms) + 300ms); }
.msts-net.is-in .node-label { opacity: 1; transform: none; }
.msts-net .node-sub { font: 500 10px var(--f-tech); letter-spacing: .1em; text-transform: uppercase; fill: var(--n-sub); text-anchor: middle; opacity: 0; transform: translateY(-4px); transition: opacity 300ms, transform 300ms var(--ease); paint-order: stroke; stroke: var(--n-halo); stroke-width: 3px; }
.msts-net .node.is-hot .node-body, .msts-net .node:focus-visible .node-body { fill: var(--_c); }
.msts-net .node.is-hot .node-icon, .msts-net .node:focus-visible .node-icon { stroke: #fff; }
.msts-net .node.is-hot .node-sub, .msts-net .node:focus-visible .node-sub { opacity: 1; transform: none; }
.msts-net .node.is-hot .node-ring { opacity: 1; stroke-dasharray: none; }
.msts-net .node:focus-visible .node-body { stroke: var(--gold); stroke-width: 3; }
.msts-net.has-focus .node:not(.is-hot):not(.hub) { opacity: .35 !important; }
.msts-net .hub-ring, .msts-net .hub-orbit { transform-box: fill-box; transform-origin: center; }
.msts-net.is-in .hub-ring { animation: spin 40s linear infinite; }
.msts-net .hub-orbit { fill: none; stroke: var(--n-link); stroke-opacity: .4; stroke-width: 1; stroke-dasharray: 1 7; }
.msts-net.is-in .hub-orbit { animation: spin 24s linear infinite reverse; }
.msts-net .hub-core { fill: var(--n-core); }
.msts-net .hub-text { font: 700 14px var(--f-display); letter-spacing: .12em; fill: var(--n-core-text); text-anchor: middle; }

/* =====================================================================
   PAGE EFFECTS (js/effects.js)
   ===================================================================== */
/* Cursor ring — precise pointers only; the native cursor stays visible */
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 7000; pointer-events: none; border-radius: 50%; opacity: 0; mix-blend-mode: difference; transition: opacity 300ms; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.cursor-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.75); transition: transform 450ms var(--ease), background 300ms, border-color 300ms; }
.cursor-dot.is-on, .cursor-ring.is-on { opacity: 1; }
.cursor-ring.is-link::before { transform: scale(1.7); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.95); }
.cursor-ring.is-field::before { transform: scale(.45); }
.cursor-ring.is-down::before { transform: scale(.8); }
.intro-on .cursor-dot, .intro-on .cursor-ring { opacity: 0 !important; }

/* Dark sections arrive as an inset card and expand to full width */
[data-expand] { will-change: clip-path; }

/* Outline type bands */
.band { position: relative; overflow: hidden; padding-block: clamp(1.6rem, 3vw, 2.6rem); }
.band--light { background: var(--white); border-top: 1px solid var(--line-l); }
.band--dark { background: var(--navy); }
.band__track { display: flex; align-items: center; width: max-content; will-change: transform; }
.band span { padding: 0 clamp(1.2rem, 2.5vw, 2.6rem); font: 400 clamp(2.6rem, 1.4rem + 4.6vw, 6.6rem)/1 var(--f-display); letter-spacing: -.05em; white-space: nowrap; color: var(--ink); }
.band--dark span { color: #fff; }
.band span:nth-of-type(5n+1), .band span:nth-of-type(5n+3) { background: linear-gradient(100deg, var(--blue-ink), var(--blue) 60%, #8CCBE6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band--dark span:nth-of-type(5n+1), .band--dark span:nth-of-type(5n+3) { background: linear-gradient(100deg, var(--blue), var(--ice)); -webkit-background-clip: text; background-clip: text; }
.band i { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--blue); box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 6px var(--blue); }
.band--dark i { box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 6px var(--blue); }

/* Pointer spotlight */
.spot { position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 500ms var(--ease-soft);
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(96,170,205,.16), transparent 45%); }
.has-spot:hover > .spot { opacity: 1; }
.theme-light .spot, .theme-mist .spot, .creds .spot { background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 50%), rgba(96,170,205,.14), transparent 50%); }

/* Section rail */
.rail { position: fixed; right: clamp(14px, 1.6vw, 26px); top: 50%; z-index: 900; display: grid; gap: .35rem; transform: translateY(-50%); mix-blend-mode: difference; opacity: 0; pointer-events: none; transition: opacity 800ms var(--ease-soft) 1s; }
.hero-in .rail { opacity: 1; pointer-events: auto; }
.intro-on .rail { opacity: 0 !important; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; padding: .35rem 0; color: rgba(255,255,255,.55); text-decoration: none; font: 500 .6rem/1 var(--f-tech); letter-spacing: .18em; text-transform: uppercase; }
.rail__line { width: 14px; height: 1px; background: currentColor; transition: width 600ms var(--ease); }
.rail__label { order: -1; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 600ms var(--ease), opacity 400ms; }
.rail__n { order: 1; font-variant-numeric: tabular-nums; }
.rail a:hover, .rail a.is-active { color: #fff; }
.rail a.is-active .rail__line { width: 34px; }
.rail a:hover .rail__label, .rail a:focus-visible .rail__label { max-width: 120px; opacity: 1; }

/* =====================================================================
   LIVE CCTV FEED (real photo, camera grading, neutral AI scan)
   ===================================================================== */
.feed { --ok: #7BD36B; --warn: #F2B234; --hud: rgba(255,255,255,.92); }
.feed__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r3); background: #0A0D11; box-shadow: 0 60px 100px -50px rgba(0,0,0,.9); }
.feed__screen::before { content: ""; position: absolute; inset: 0; z-index: 9; border-radius: inherit; padding: 1px; background: var(--metal); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.feed__img { position: absolute; inset: 0; background: linear-gradient(160deg, #1A222B, #0A0D11); }
.feed__img img, .live img { color: transparent; font-size: 0; }
.feed__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); filter: saturate(.55) contrast(1.12) brightness(.82) sepia(.06); transition: opacity 1s var(--ease-soft), transform 9s linear; }
.feed[data-scene="office"] img[data-scene-img="office"], .feed[data-scene="commercial"] img[data-scene-img="commercial"] { opacity: 1; transform: scale(1.0); }
.feed__grain { position: absolute; inset: -50%; z-index: 2; opacity: .13; mix-blend-mode: overlay; pointer-events: none; animation: grain 1s steps(6) infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.feed__lines { position: absolute; inset: 0; z-index: 2; opacity: .28; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }
.feed__vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(120% 95% at 50% 50%, transparent 55%, rgba(0,0,0,.6)); }
.feed__sweep { position: absolute; left: 0; right: 0; top: -18%; height: 18%; z-index: 4; opacity: 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255,255,255,.06) 70%, rgba(255,255,255,.55) 98%, rgba(255,255,255,.9)); }
.feed[data-stage="scan"] .feed__sweep, .feed[data-stage="init"] .feed__sweep { opacity: 1; animation: sweep-y 1.6s linear infinite; }
.feed__top, .feed__bottom { position: absolute; left: 16px; right: 16px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font: 500 .66rem/1 var(--f-tech); letter-spacing: .16em; text-transform: uppercase; color: var(--hud); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.feed__top { top: 14px; } .feed__bottom { bottom: 14px; color: rgba(255,255,255,.75); }
.feed__rec { display: inline-flex; align-items: center; gap: .45rem; color: #fff; }
.feed__rec i { width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 8px #FF3B30; animation: blink 1.2s steps(2) infinite; }
.feed__clock { font-variant-numeric: tabular-nums; }
.feed__boxes { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.det { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); opacity: 0; transform: scale(1.12); border: 1px solid rgba(255,255,255,.55); transition: opacity .5s var(--ease-soft), transform .7s var(--ease), border-color .5s, left .8s var(--ease), top .8s var(--ease), width .8s var(--ease), height .8s var(--ease); }
.det::before, .det::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid currentColor; color: #fff; }
.det::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.det::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.det b, .det i { position: absolute; top: -20px; font: 600 .58rem/1 var(--f-tech); letter-spacing: .12em; text-transform: uppercase; font-style: normal; padding: .3rem .4rem; white-space: nowrap; }
.det b { left: -1px; background: #fff; color: #0A0D11; }
.det i { left: auto; right: -1px; background: rgba(10,13,17,.75); color: #fff; }
.feed[data-stage="analyze"] .det, .feed[data-stage="secure"] .det { opacity: 1; transform: none; transition-delay: calc(var(--z) * .33s); animation: det-track 3.2s var(--ease-io) calc(var(--z) * .4s) infinite alternate; }
.feed[data-stage="analyze"] .det { border-color: var(--warn); }
.feed[data-stage="analyze"] .det::before, .feed[data-stage="analyze"] .det::after { color: var(--warn); }
.feed[data-stage="analyze"] .det b { background: var(--warn); }
.feed[data-stage="secure"] .det { border-color: rgba(123,211,107,.85); transition-delay: 0s; }
.feed[data-stage="secure"] .det::before, .feed[data-stage="secure"] .det::after { color: var(--ok); }
.feed[data-stage="secure"] .det b { background: var(--ok); }
.feed__ok { position: absolute; left: 50%; bottom: 46px; z-index: 7; display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .9rem .55rem .65rem; border-radius: 999px; background: rgba(10,13,17,.72); border: 1px solid rgba(123,211,107,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #DFF5DA; font: 600 .7rem/1 var(--f-tech); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translate(-50%, 10px); transition: opacity .6s var(--ease-soft), transform .8s var(--ease); }
.feed__ok svg { width: 18px; height: 18px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.feed[data-stage="secure"] .feed__ok { opacity: 1; transform: translate(-50%, 0); transition-delay: .4s; }
.feed[data-stage="secure"] .feed__ok svg { animation: draw .6s var(--ease) .7s forwards; }
.feed__panel { position: relative; margin-top: 1rem; padding: 1.1rem 1.2rem 1rem; border-radius: var(--r3); background: rgba(5,15,28,.7); border: 1px solid var(--line-d2); }
.feed__switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.feed__tabs { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r2); background: rgba(255,255,255,.04); border: 1px solid var(--line-d); }
.feed__tab { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border: 0; border-radius: 3px; background: transparent; color: var(--on-dark-2); font: 500 .86rem var(--f-body); transition: background var(--dur), color var(--dur); }
.feed__tab .ico { width: 16px; height: 16px; }
.feed__tab[aria-selected="true"] { background: #fff; color: var(--navy); }
.feed__tab:hover:not([aria-selected="true"]) { color: #fff; background: rgba(255,255,255,.06); }
.feed__run { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; border-radius: var(--r2); border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; font: 600 .82rem var(--f-body); transition: background var(--dur), border-color var(--dur); }
.feed__run:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.feed__run-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 0 3px rgba(255,59,48,.2); }
.feed__readout { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; }
.feed__state { font: 600 .74rem var(--f-tech); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.feed[data-stage="secure"] .feed__state { color: var(--ok); }
.feed__pct { font: 500 .74rem var(--f-tech); color: var(--on-dark-3); font-variant-numeric: tabular-nums; }
.feed__progress { display: block; height: 2px; margin-top: .6rem; background: rgba(255,255,255,.1); overflow: hidden; }
.feed__progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: #fff; transition: background .4s; }
.feed[data-stage="secure"] .feed__progress span { background: var(--ok); }
.feed__note { margin-top: .8rem; font-size: .78rem; color: var(--on-dark-3); }

/* =====================================================================
   LIVE PHOTO CARDS (Wi-Fi, conferencing, door station)
   ===================================================================== */
.live { position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; border-radius: var(--r3); background: linear-gradient(160deg, #1A2430, #0A1220); color: #fff; }
.live::before { content: ""; position: absolute; inset: 0; z-index: 8; border-radius: inherit; padding: 1px; background: var(--metal); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.live img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease), filter .8s; filter: saturate(.9) contrast(1.04); }
.live.is-live img { animation: kenburns 22s ease-in-out infinite alternate; }
.live:hover img { filter: saturate(1.05) contrast(1.06); }
.live__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,12,22,.6), transparent 32%, transparent 52%, rgba(5,12,22,.88)); }
.live__top { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 3; display: flex; justify-content: space-between; align-items: center; font: 500 .62rem/1 var(--f-tech); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.7); font-variant-numeric: tabular-nums; }
.live__badge { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .55rem; border-radius: 999px; background: rgba(10,16,24,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.live__badge i { width: 6px; height: 6px; border-radius: 50%; background: #7BD36B; box-shadow: 0 0 0 0 rgba(123,211,107,.6); animation: live-pulse 1.8s ease-out infinite; }
.live__badge--red i { background: #FF3B30; box-shadow: 0 0 0 0 rgba(255,59,48,.6); animation-name: live-pulse-red; }
.live__stats { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.live__stats > span { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .6rem; border-radius: var(--r2); background: rgba(10,16,24,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.14); font: 500 .66rem/1 var(--f-tech); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.live__stats b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.live__bars, .live__eq { gap: 2px !important; align-items: flex-end !important; height: 28px; }
.live__bars i, .live__eq i { display: block; width: 3px; border-radius: 1px; background: #7BD36B; }
.live__bars i:nth-child(1) { height: 5px; } .live__bars i:nth-child(2) { height: 8px; } .live__bars i:nth-child(3) { height: 11px; } .live__bars i:nth-child(4) { height: 14px; opacity: .45; }
.live.is-live .live__bars i:nth-child(4) { animation: bar-flick 2.4s steps(2) infinite; }
.live__eq i { height: 6px; background: #fff; }
.live.is-live .live__eq i { animation: eq .9s ease-in-out infinite alternate; }
.live__eq i:nth-child(2) { animation-delay: -.3s !important; } .live__eq i:nth-child(3) { animation-delay: -.6s !important; } .live__eq i:nth-child(4) { animation-delay: -.15s !important; } .live__eq i:nth-child(5) { animation-delay: -.45s !important; }
.live__rings { position: absolute; left: 50%; top: 42%; z-index: 2; width: 0; height: 0; }
.live__rings i { position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); opacity: 0; }
.live.is-live .live__rings i { animation: ring-out 3.6s var(--ease) infinite; }
.live__rings i:nth-child(2) { animation-delay: 1.2s !important; } .live__rings i:nth-child(3) { animation-delay: 2.4s !important; }
.live--door img { transform: scale(1.14); }
.live__fisheye { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(75% 85% at 50% 50%, transparent 60%, rgba(0,0,0,.72) 100%); }
.live__door { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: flex; justify-content: space-between; align-items: center; }
.live__door-state { padding: .5rem .75rem; border-radius: var(--r2); background: rgba(10,16,24,.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.16); font: 600 .68rem/1 var(--f-tech); letter-spacing: .14em; text-transform: uppercase; transition: border-color .4s, color .4s; }
.live__lock { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(10,16,24,.66); border: 1px solid rgba(242,178,52,.7); transition: border-color .4s, background .4s; }
.live__lock svg { width: 20px; height: 20px; fill: none; stroke: #F2B234; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transition: stroke .4s; }
.lock-shackle { transform-origin: 15.5px 11px; transition: transform .5s var(--ease); }
.live[data-door="call"] .live__door-state { border-color: rgba(255,255,255,.5); }
.live[data-door="open"] .live__door-state { border-color: rgba(123,211,107,.7); color: #DFF5DA; }
.live[data-door="open"] .live__lock { border-color: rgba(123,211,107,.8); background: rgba(40,80,40,.5); }
.live[data-door="open"] .live__lock svg { stroke: #7BD36B; }
.live[data-door="open"] .lock-shackle { transform: translateY(-2.5px) rotate(28deg); }

/* =====================================================================
   AI ENQUIRY FORM
   ===================================================================== */
.form__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; min-height: 92px; margin-bottom: 1.1rem; padding-right: 172px; }
.form__head .form__title { margin-bottom: .35rem; }
.form__sub { font-size: .85rem; color: var(--on-dark-3); }
.form__meter { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem; }
.form__meter-track { flex: 1; height: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.form__meter-track span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #60AACD, #7BD36B); transition: transform .7s var(--ease); }
.form__meter em { font: 500 .62rem var(--f-tech); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); font-variant-numeric: tabular-nums; }
.ai-field { position: relative; }
.ai-box { position: relative; }
.ai-ret { position: absolute; inset: -5px; pointer-events: none; opacity: 0; transform: scale(1.03); transition: opacity .35s var(--ease-soft), transform .5s var(--ease); }
.ai-ret i { position: absolute; width: 10px; height: 10px; border: 0 solid #fff; transition: border-color .35s; }
.ai-ret i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.ai-ret i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.ai-ret i:nth-child(3) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.ai-ret i:nth-child(4) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.ai-focus .ai-ret, .ai-ok .ai-ret, .ai-warn .ai-ret { opacity: 1; transform: none; }
.ai-ok .ai-ret i { border-color: #7BD36B; }
.ai-warn .ai-ret i { border-color: #F2B234; }
.ai-ok:not(.ai-focus) .ai-ret { opacity: .55; }
.ai-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 22%; pointer-events: none; opacity: 0; border-radius: var(--r2); background: linear-gradient(90deg, transparent, rgba(255,255,255,.05) 60%, rgba(255,255,255,.4) 97%, rgba(255,255,255,.9)); }
.ai-scanning .ai-scan { animation: field-scan .55s linear; }
.ai-chip { position: absolute; right: 0; top: 0; font: 600 .58rem/1.4 var(--f-tech); letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(3px); transition: opacity .3s, transform .4s var(--ease), color .3s; }
.ai-scanning .ai-chip, .ai-ok .ai-chip, .ai-warn .ai-chip { opacity: 1; transform: none; }
.ai-ok .ai-chip { color: #8FDB82; }
.ai-warn .ai-chip { color: #F6C65B; }
.ai-ok .ai-box input, .ai-ok .ai-box textarea, .ai-ok .ai-box select { border-color: rgba(123,211,107,.5); }
.form.ai-verifying::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255,255,255,.04) 80%, rgba(255,255,255,.5) 99%, transparent); background-size: 100% 30%; background-repeat: no-repeat; animation: form-sweep 1.3s linear; }
.form.ai-verifying .form__submit span { opacity: .7; }
.form.ai-verified .form__meter-track span { background: #7BD36B; }
.ai-ready .form__submit { box-shadow: 0 0 0 1px rgba(123,211,107,.5), 0 18px 40px -16px rgba(123,211,107,.55); }


/* ---------- Access control: real photo + reader terminal overlay ---------- */
.live--access { aspect-ratio: 4 / 3.4; }
.live--access img { object-position: 50% 45%; }
.axs__glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 0 rgba(123,211,107,0); transition: box-shadow .8s var(--ease-soft); }
.live[data-access="granted"] .axs__glow { box-shadow: inset 0 0 0 2px rgba(123,211,107,.75), inset 0 0 90px rgba(123,211,107,.22); }
.axs { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .7rem .8rem .7rem .7rem; border-radius: var(--r2); background: rgba(8,12,18,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 18px 40px -18px rgba(0,0,0,.8); transition: border-color .5s; }
.live[data-access="granted"] .axs { border-color: rgba(123,211,107,.55); }
.axs__well { position: relative; width: 52px; height: 52px; border-radius: 12px; background: radial-gradient(circle at 40% 30%, #222B36, #070A0F 75%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); overflow: hidden; }
.axs__ico { position: absolute; inset: 9px; width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.85); transition: opacity .4s, transform .5s var(--ease); }
.axs__ico--finger { inset: 8px 10px; width: 32px; height: 36px; stroke-width: 3.4; stroke: rgba(255,255,255,.8); }
.axs__ico--ok { stroke: #7BD36B; stroke-width: 2.6; }
.axs__chip { fill: #E2B04A; stroke: none; }
.live[data-access="present"] .axs__ico--card, .live[data-access="read"] .axs__ico--card,
.live[data-access="finger"] .axs__ico--finger, .live[data-access="granted"] .axs__ico--ok { opacity: 1; transform: none; }
.axs__wave { opacity: .25; }
.live.is-live[data-access="present"] .axs__wave { animation: axs-wave 1.2s ease-in-out infinite; }
.live.is-live[data-access="present"] .axs__wave--2 { animation-delay: .25s; }
.live[data-access="read"] .axs__wave { opacity: 1; stroke: #F2B234; }
.axs__scan { fill: #F2B234; stroke: none; opacity: 0; }
.live.is-live[data-access="finger"] .axs__scan { opacity: .95; animation: axs-scan 1s ease-in-out infinite alternate; }
.live.is-live[data-access="finger"] .axs__ico--finger path { stroke: #F6D27A; }
.axs__body { display: grid; gap: .42rem; min-width: 0; }
.axs__state { font: 600 .78rem/1 var(--f-tech); letter-spacing: .14em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live[data-access="granted"] .axs__state { color: #A6E89A; }
.axs__steps { display: flex; gap: 4px; }
.axs__steps i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.16); transition: background .35s; }
.live[data-access="present"] .axs__steps i:nth-child(-n+1),
.live[data-access="read"] .axs__steps i:nth-child(-n+2),
.live[data-access="finger"] .axs__steps i:nth-child(-n+3) { background: #F2B234; }
.live[data-access="granted"] .axs__steps i { background: #7BD36B; }
.axs__log { font: 500 .6rem/1.2 var(--f-tech); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.live[data-access="granted"] .live__lock { border-color: rgba(123,211,107,.8); background: rgba(40,80,40,.5); }
.live[data-access="granted"] .live__lock svg { stroke: #7BD36B; }
.live[data-access="granted"] .lock-shackle { transform: translateY(-2.5px) rotate(28deg); }
.axs__lock .lock-shackle { transform-origin: 15.5px 11px; transition: transform .5s var(--ease); }

/* ---------- Enquiry form: wall-mounted surveillance camera that follows the caret ---------- */
.sv { position: absolute; top: -7px; right: 22px; z-index: 6; width: 40px; height: 34px; pointer-events: none; transform-origin: 100% 0; }
.sv__mount { position: absolute; inset: 0; width: 40px; height: 34px; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.sv__head { position: absolute; left: -102px; top: 20px; width: 150px; height: 60px; transform-origin: 122px 9px; rotate: -14deg; will-change: rotate; }
.sv__cam { width: 150px; height: 60px; overflow: visible; filter: drop-shadow(0 10px 12px rgba(0,0,0,.5)); }
.sv__brand { font: 700 7px var(--f-tech); letter-spacing: .14em; fill: #6B7783; text-anchor: middle; }
.sv__led { fill: #FF3B30; animation: blink 1.4s steps(2) infinite; }
.sv.is-ok .sv__led { fill: #7BD36B; animation: none; }
.sv__ir circle { fill: #3A1418; }
.sv.is-tracking .sv__ir circle { fill: #8A2A2E; }
.sv__iris { transform-box: fill-box; transform-origin: center; transition: transform .4s var(--ease); }
.sv.is-tracking .sv__iris { transform: scale(.55); }
.sv__label { display: inline-flex; align-items: center; gap: .45rem; margin-top: .7rem; font: 500 .58rem/1 var(--f-tech); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); white-space: nowrap; }
.sv__label i { width: 6px; height: 6px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 6px #FF3B30; animation: blink 1.4s steps(2) infinite; }
.sv-cone { position: absolute; left: 0; top: 0; z-index: 5; width: 0; height: 84px; margin-top: -42px; pointer-events: none; transform-origin: 0 50%; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255,250,235,.34), rgba(255,250,235,.12) 70%, rgba(255,250,235,.2));
  clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%); filter: blur(1.5px); transition: opacity .45s var(--ease-soft); }
.sv-spot { position: absolute; left: 0; top: 0; z-index: 5; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,250,235,.55), rgba(255,250,235,.12) 45%, transparent 70%); transition: opacity .45s var(--ease-soft); }
.sv-spot::before, .sv-spot::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,.7); }
.sv-spot::before { width: 14px; height: 1px; margin: 0 0 0 -7px; }
.sv-spot::after { width: 1px; height: 14px; margin: -7px 0 0 0; }
.form.is-watching .sv-cone, .form.is-watching .sv-spot { opacity: 1; }
.form.is-watching.cam-ok .sv-cone { background: linear-gradient(90deg, rgba(190,255,180,.34), rgba(190,255,180,.1) 70%, rgba(190,255,180,.2)); }
.form.is-watching.cam-warn .sv-cone { background: linear-gradient(90deg, rgba(255,215,140,.36), rgba(255,215,140,.1) 70%, rgba(255,215,140,.2)); }