/* ─────────────────────────────────────────────────────────────────────────
   Premium liquid-glass pass · 2026-10-09 · 液态白底玻璃
   Loaded last — every rule here is the single source of truth for the new
   surface system: a bright ice-white field with translucent glass surfaces,
   refractive inner edges and a soft liquid sheen.
   ───────────────────────────────────────────────────────────────────────── */

/* Ambient field: ice-white base with drifting cyan / ice-blue auras.
   Two fixed layers so gradients never re-tile while scrolling. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(54% 42% at 88% 4%, rgba(125, 211, 252, .30), transparent 62%),
    radial-gradient(48% 40% at 4% 30%, rgba(153, 246, 228, .26), transparent 60%),
    radial-gradient(44% 38% at 96% 82%, rgba(165, 243, 252, .24), transparent 64%),
    linear-gradient(180deg, #f7fbff 0%, #f2f9fd 44%, #eef7fb 100%);
}

/* Micro grid fades in from the top for a technical undertone */
body::before {
  z-index: -1;
  opacity: 1;
  background:
    linear-gradient(rgba(23, 101, 186, .045) 1px, transparent 1px) 0 0 / 100% 76px,
    linear-gradient(90deg, rgba(23, 101, 186, .045) 1px, transparent 1px) 0 0 / 76px 100%;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 68%, transparent 98%);
}

/* ── Header: frosted liquid glass ───────────────────────────────────────── */
.site-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(244, 251, 255, .66));
  border-bottom: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 1px 0 rgba(23, 101, 186, .07);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
.site-header[data-elevated='true'] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(246, 252, 255, .82));
  box-shadow: 0 10px 34px -18px rgba(23, 80, 130, .28), 0 1px 0 rgba(255, 255, 255, .9);
  border-bottom-color: rgba(190, 222, 236, .6);
}
.primary-nav a { color: #3d5a72; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: #0e7490; }
.primary-nav a[aria-current='true'] { color: #0891b2; }
.brand-name, .brand-text .brand-name { color: #123a56; }
.brand-sub { color: #5c7c92; }
.nav-toggle { background: rgba(255, 255, 255, .6); border-color: rgba(170, 205, 224, .8); }
.nav-toggle-bar { background: #1d4258; }
@media (max-width: 720px), (max-width: 860px) and (min-width: 721px) {
  .primary-nav {
    background: linear-gradient(160deg, rgba(255, 255, 255, .88), rgba(240, 249, 253, .8));
    border-color: rgba(255, 255, 255, .9);
    box-shadow: 0 24px 44px -22px rgba(23, 80, 130, .35), inset 0 1px rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
  }
  .primary-nav a { color: #33526a; }
  .primary-nav li + li { border-top-color: rgba(23, 101, 186, .08); }
}

/* ── Hero: luminous ice field over the campus photo ─────────────────────── */
.hero { background-color: #e9f4fb; }
.hero::after {
  background:
    radial-gradient(52% 68% at 78% 30%, rgba(125, 211, 252, .28), transparent 62%),
    linear-gradient(90deg, rgba(244, 251, 255, .94) 0%, rgba(244, 251, 255, .82) 38%, rgba(244, 251, 255, .38) 68%, rgba(244, 251, 255, .08) 100%);
}
@media (max-width: 620px) {
  .hero::after {
    background:
      radial-gradient(90% 44% at 50% 100%, rgba(125, 211, 252, .22), transparent 66%),
      linear-gradient(180deg, rgba(244, 251, 255, .92) 0%, rgba(244, 251, 255, .62) 56%, rgba(244, 251, 255, .18) 100%);
  }
}
/* Liquid sheen searchlight following the pointer */
.hero--observatory::before {
  background: radial-gradient(
    360px circle at var(--hero-x, 62%) var(--hero-y, 42%),
    rgba(255, 255, 255, .55),
    rgba(125, 211, 252, .12) 46%,
    transparent 72%
  );
  mix-blend-mode: soft-light;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px 7px 12px;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(227, 244, 251, .5));
  box-shadow: inset 0 1px rgba(255, 255, 255, .95), 0 8px 22px -12px rgba(23, 101, 186, .3);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  font-size: 12px;
  letter-spacing: .14em;
  color: #0b7285;
  text-shadow: none;
}
.hero-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0ebed0;
  box-shadow: 0 0 0 4px rgba(14, 190, 208, .14), 0 0 12px rgba(14, 190, 208, .75);
}
.display { color: #0e3350; text-shadow: 0 1px 2px rgba(255, 255, 255, .75); }
.display-line--accent {
  background: linear-gradient(94deg, #0e9fc4 0%, #0891b2 52%, #155e9e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: none;
}
.lede { color: #33566d; text-shadow: 0 1px 2px rgba(255, 255, 255, .7); }
.hero-location { color: #4c7089; }
.hero-location > span { border-color: #0e9fc4; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { border-radius: 9px; }
.btn-primary {
  background: linear-gradient(135deg, #0fb4cf 0%, #0a86b8 100%);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  text-shadow: 0 1px 2px rgba(4, 60, 82, .35);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .42),
    inset 0 -1px rgba(4, 60, 82, .2),
    0 12px 28px -10px rgba(8, 145, 178, .55),
    0 2px 6px -2px rgba(23, 80, 130, .3);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1cc4de 0%, #0d93c6 100%);
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .5),
    inset 0 -1px rgba(4, 60, 82, .2),
    0 18px 36px -12px rgba(8, 145, 178, .65),
    0 4px 10px -4px rgba(23, 80, 130, .35);
}
.btn-soft, .btn-ghost {
  background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(232, 246, 252, .52));
  border-color: rgba(255, 255, 255, .95);
  color: #14506e;
  box-shadow: inset 0 1px rgba(255, 255, 255, .95), 0 8px 20px -12px rgba(23, 101, 186, .3);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}
.btn-soft:hover, .btn-ghost:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(238, 250, 253, .72));
  border-color: rgba(103, 199, 226, .8);
  color: #0b617f;
  transform: translateY(-2px);
  box-shadow: inset 0 1px rgba(255, 255, 255, 1), 0 12px 26px -12px rgba(23, 101, 186, .38);
}
.hero--observatory .btn-soft { background: linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(232, 246, 252, .48)); }
.hero--observatory .btn-soft:hover { background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(238, 250, 253, .7)); border-color: rgba(103, 199, 226, .8); }

/* ── Section tag & titles ───────────────────────────────────────────────── */
.section-tag { color: #0e86a8; text-shadow: none; }
.section-tag::before { background: #17b3c9; }
.section-tag::after { border-color: #17b3c9; }
.section-title .title-accent {
  margin-left: .25em;
  background: linear-gradient(94deg, #0e9fc4, #155e9e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: none;
  filter: none;
}
.section-lede { color: #4c6a80; }

/* Sections become transparent so the ambient field flows through */
.services, .solutions, .process, .about, .project-scenes,
.security-ops, .services--bento {
  background: transparent;
}
.services::before, .services--bento::before { display: none; }
.security-ops::before { display: none; }

/* ── Service cards: liquid white glass ──────────────────────────────────── */
.services--bento .service-card.card-border-glow,
.services--bento .service-card {
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .66), rgba(233, 246, 252, .44) 52%, rgba(219, 239, 247, .4));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 1),
    inset 0 -1px rgba(23, 101, 186, .06),
    0 22px 44px -26px rgba(23, 80, 130, .4);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease;
}
.services--bento .service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(103, 199, 226, .95);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 1),
    inset 0 -1px rgba(23, 101, 186, .08),
    0 30px 54px -26px rgba(23, 80, 130, .5),
    0 0 44px -14px rgba(56, 189, 224, .45);
}
.services--bento .service-card h3 { color: #10374f; }
.services--bento .service-card p { color: #46687d; }
.services--bento .service-card-list { border-top-color: rgba(23, 101, 186, .12); }
.services--bento .service-card-list li { color: #3f637a; }
.services--bento .service-card-list li::before { background: #12b7cb; }
.services--bento .service-card-num,
.services--bento .service-card.card-border-glow .service-card-num {
  border-bottom-color: rgba(23, 101, 186, .22);
  color: #4a87a5;
}
.services--bento .service-card-icon,
.services--bento .service-card.card-border-glow .service-card-icon {
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(224, 245, 252, .85), rgba(195, 231, 244, .6));
  color: #0c7d99;
  box-shadow: inset 0 1px rgba(255, 255, 255, .95), 0 8px 20px -12px rgba(23, 101, 186, .4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.services--bento .service-card:hover .service-card-icon {
  color: #0891b2;
  background: linear-gradient(145deg, rgba(207, 240, 250, .95), rgba(178, 224, 240, .7));
  transform: scale(1.05);
}

/* Featured card: deep cyan glass — the one saturated anchor on the page */
.services--bento .service-card--assessment,
.services--bento .service-card--assessment.card-border-glow {
  border: 1px solid rgba(125, 224, 238, .7);
  border-top-color: rgba(190, 246, 252, .9);
  background: linear-gradient(155deg, rgba(14, 116, 144, .92), rgba(8, 74, 110, .95));
  box-shadow:
    inset 0 1px rgba(190, 246, 252, .3),
    inset 0 -1px rgba(3, 40, 60, .35),
    0 26px 50px -24px rgba(8, 74, 110, .65),
    0 0 56px -16px rgba(34, 190, 220, .5);
}
.services--bento .service-card--assessment:hover {
  border-color: rgba(165, 243, 252, .95);
  background: linear-gradient(155deg, rgba(17, 132, 162, .95), rgba(10, 86, 126, .97));
  box-shadow:
    inset 0 1px rgba(190, 246, 252, .4),
    0 32px 58px -24px rgba(8, 74, 110, .7),
    0 0 72px -16px rgba(34, 190, 220, .65);
}
.services--bento .service-card--assessment h3 { color: #f0fcff; }
.services--bento .service-card--assessment p,
.services--bento .service-card--assessment li { color: rgba(207, 240, 248, .95); }
.services--bento .service-card--assessment .service-card-list { border-top-color: rgba(165, 243, 252, .28); }
.services--bento .service-card--assessment li::before { background: #5eead4; }
.services--bento .service-card--assessment .service-card-num,
.services--bento .service-card--assessment.card-border-glow .service-card-num {
  color: #a5e8f2;
  border-bottom-color: rgba(165, 243, 252, .4);
}
.services--bento .service-card--assessment .service-card-icon,
.services--bento .service-card--assessment.card-border-glow .service-card-icon {
  border-color: rgba(165, 243, 252, .5);
  background: rgba(103, 232, 249, .14);
  color: #a5f3fc;
}
/* Data card keeps a cooler mint cast */
.services--bento .service-card--data,
.services--bento .service-card--data.card-border-glow {
  background: linear-gradient(155deg, rgba(255, 255, 255, .7), rgba(224, 245, 242, .48) 55%, rgba(204, 236, 233, .44));
}
.services--bento .service-card--data .service-card-icon,
.services--bento .service-card--data.card-border-glow .service-card-icon {
  background: linear-gradient(145deg, rgba(214, 245, 240, .9), rgba(183, 231, 226, .65));
  border-color: rgba(255, 255, 255, .95);
  color: #0b857f;
}

/* Spotlight tint for the light glass system */
.card-spotlight { --spotlight-color: rgba(103, 199, 226, .22); }
.service-card--assessment.card-spotlight { --spotlight-color: rgba(165, 243, 252, .22); }
.service-card--data.card-spotlight { --spotlight-color: rgba(94, 234, 212, .2); }

/* ── Photos: liquid glass frames ────────────────────────────────────────── */
.photo-frame {
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 14px;
  background: rgba(255, 255, 255, .5);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .9),
    0 20px 40px -22px rgba(23, 80, 130, .4);
}
.photo-frame:hover {
  transform: translateY(-3px);
  border-color: rgba(103, 199, 226, .9);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 1),
    0 28px 52px -24px rgba(23, 80, 130, .48),
    0 0 40px -14px rgba(56, 189, 224, .4);
}
.scene-photo figcaption strong { color: #143c55; }
.scene-photo figcaption span,
.security-view-feature figcaption span,
.security-view-card figcaption { color: #5c7d93; }
.solution-index, .process-num {
  border: 1px solid rgba(255, 255, 255, .95);
  background: linear-gradient(135deg, rgba(255, 255, 255, .75), rgba(227, 244, 251, .55));
  box-shadow: inset 0 1px rgba(255, 255, 255, .95), 0 6px 14px -10px rgba(23, 101, 186, .35);
  color: #0b7f9d;
}
.solution-row h3, .process-step h3 { color: #123a56; }
.solution-row p, .process-step p, .about-copy > p { color: #4c6a80; }
.process-step { border-top-color: rgba(23, 101, 186, .14); }
.company-address { border-left-color: #17b3c9; }
.company-address > span { color: #123a56; }
.company-address address { color: #4c6a80; }

/* ── Contact: deep cyan panel closing the page ──────────────────────────── */
.contact { background: linear-gradient(160deg, #0c5a78 0%, #084b6e 48%, #063a58 100%); color: #e6f7fc; }
.contact .section-tag { color: #8fe4ee; }
.contact .section-tag::before, .contact .section-tag::after { border-color: #5eead4; background: #5eead4; }
.contact-title { color: #f2fcff; }
.contact-title span {
  background: linear-gradient(94deg, #99f6e4, #67e8f9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.contact-lede { color: rgba(202, 236, 245, .92); }
.contact .btn-primary {
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(224, 246, 252, .9));
  border-color: rgba(255, 255, 255, .9);
  color: #075985;
  text-shadow: none;
  box-shadow: inset 0 1px rgba(255, 255, 255, 1), 0 14px 32px -12px rgba(2, 30, 46, .6);
}
.contact .btn-primary:hover {
  background: #fff;
  border-color: #fff;
  color: #075985;
  box-shadow: inset 0 1px rgba(255, 255, 255, 1), 0 20px 40px -14px rgba(2, 30, 46, .7);
}
.contact .btn-ghost {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(190, 240, 250, .5);
  color: #eafdff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .15);
}
.contact .btn-ghost:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(190, 240, 250, .85);
  color: #fff;
}

/* ── Footer: frosted ice glass ──────────────────────────────────────────── */
.site-footer {
  background: linear-gradient(180deg, rgba(247, 252, 255, .85), rgba(238, 248, 252, .8));
  border-top: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 -1px 0 rgba(23, 101, 186, .06);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}
.footer-brand .brand-name { color: #123a56; }
.footer-tag, .footer-meta-list li, .footer-nav a, .footer-meta p { color: #4c6a80; }
.footer-meta-key { color: #7595a9; }
.footer-title { color: #123a56; }
.footer-nav a:hover { color: #0891b2; }
.footer-meta .footer-fine { color: #7595a9; }
.footer-meta .footer-fine a { color: #0b7f9d; }

/* ── Misc readability ───────────────────────────────────────────────────── */
::selection { background: rgba(56, 189, 224, .3); color: #07333f; }
html { scrollbar-color: rgba(80, 150, 180, .5) #eef7fb; }

/* Field glass signature: the featured service keeps the approved real-scene
   material instead of a flat cyan fill. The image remains subordinate to the
   copy so the card reads as glass, not as another photograph. */
.services--bento .service-card--assessment,
.services--bento .service-card--assessment.card-border-glow {
  background-image:
    linear-gradient(135deg, rgba(31, 111, 132, .78), rgba(5, 50, 75, .92) 68%),
    url('assets/security-field-generated-20261009.webp');
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, normal;
}
.services--bento .service-card--assessment:hover,
.services--bento .service-card--assessment.card-border-glow:hover {
  background-image:
    linear-gradient(135deg, rgba(48, 133, 149, .82), rgba(7, 63, 89, .92) 68%),
    url('assets/security-field-generated-20261009.webp');
}

/* ── Security field: white grid + restrained perimeter scan ───────────────
   The generated field supplies the quiet security topology; the inline SVG
   keeps the moving signal deterministic and crisp at every viewport. */
.services--bento {
  isolation: isolate;
  overflow: hidden;
  background: transparent;
}
.services--bento::before {
  display: none;
}
.services--bento::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: transparent;
}
.services-security-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .9;
}
.security-flow-track,
.security-flow-light {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.security-flow-track {
  stroke: rgba(61, 153, 181, .13);
  stroke-width: 1;
}
.security-flow-light {
  stroke-width: 2.1;
  stroke-dasharray: 3 44 22 50;
  stroke-dashoffset: 0;
  animation: security-grid-scan 11s linear infinite;
}
.security-flow-light--a,
.security-flow-light--b { stroke: url(#security-flow-a); }
.security-flow-light--c,
.security-flow-light--d { stroke: url(#security-flow-b); animation-duration: 13s; }
.services--bento > .container { position: relative; z-index: 1; }
.services--bento .service-card.card-border-glow { z-index: 2; }

/* A quiet index and four independently rendered optical-glass service icons. */
.services--bento .service-card.card-border-glow .service-card-num {
  position: absolute;
  top: 27px;
  left: 32px;
  right: auto;
  z-index: 3;
  min-height: 25px;
  margin: 0;
  padding: 2px 12px 4px 0;
  border-bottom: 1px solid rgba(68, 143, 166, .32);
  color: #3e7a91;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .16em;
  line-height: 1.35;
}
.services--bento .service-card--assessment.card-border-glow .service-card-num {
  border-bottom-color: rgba(164, 231, 231, .38);
  color: #b5e2e4;
}
.services--bento .service-card.card-border-glow h3 { margin-top: 26px; margin-right: 86px; }
.services--bento .service-card.card-border-glow .service-card-icon {
  width: 72px;
  height: 72px;
  top: 25px;
  right: 27px;
  border: 0;
  border-radius: 0;
  position: absolute;
  isolation: isolate;
  overflow: visible;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.services--bento .service-card.card-border-glow .service-card-icon::before,
.services--bento .service-card.card-border-glow .service-card-icon::after { content: none; }
.services--bento .service-card.card-border-glow .service-card-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 5px rgba(24, 83, 103, .2));
}
.services--bento .service-card--assessment.card-border-glow .service-card-icon {
  background: transparent;
  box-shadow: none;
}
.services--bento .service-card.card-border-glow:hover .service-card-icon {
  transform: translateY(-1px) scale(1.04);
}
.services--bento .service-grid { row-gap: 34px; }

/* The eyebrow's decorative point competed with the copy in the hero. */
.hero-eyebrow::before { display: none; }

@keyframes security-grid-scan {
  to { stroke-dashoffset: -240; }
}
@media (max-width: 620px) {
  .services--bento .service-card.card-border-glow .service-card-num { top: 22px; left: 24px; }
  .services--bento .service-card.card-border-glow h3 { margin-top: 23px; }
  .services--bento .service-card.card-border-glow .service-card-icon { top: 19px; right: 21px; width: 62px; height: 62px; }
  .services--bento .service-grid { row-gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .security-flow-light { animation: none; }
}

/* ── Site-wide security field ─────────────────────────────────────────────
   The same white topology now continues behind every light section. Real
   campus and workspace photographs stay opaque, while text sections share a
   quiet, continuous signal field. */
body {
  isolation: isolate;
  background: #f7fbfd;
}
body::after {
  background:
    linear-gradient(180deg, rgba(248, 252, 254, .78), rgba(244, 250, 253, .9)),
    url('assets/security-grid-field-20261009.webp') center top / cover fixed no-repeat;
}
.global-security-flow {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: .58;
}
.global-flow-track,
.global-flow-light {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.global-flow-track { stroke: rgba(61, 153, 181, .09); stroke-width: 1; }
.global-flow-light {
  stroke: rgba(42, 177, 196, .58);
  stroke-width: 1.7;
  stroke-dasharray: 4 56 28 192;
  animation: global-security-scan 15s linear infinite;
}
.global-flow-light--b { animation-duration: 18s; animation-direction: reverse; stroke: rgba(83, 196, 204, .46); }
.global-flow-light--c { animation-duration: 20s; stroke: rgba(74, 177, 201, .4); }
.global-flow-light--middle { stroke: rgba(46, 168, 188, .74); stroke-width: 2; stroke-dasharray: 5 45 35 195; }
.global-flow-light--d { animation-delay: -3.75s; }
.global-flow-light--e { animation-delay: -7.5s; }
.global-flow-light--f { animation-delay: -11.25s; }
.global-flow-light--g { animation-duration: 20s; animation-delay: -5s; }
.global-flow-light--h { animation-duration: 20s; animation-delay: -10s; animation-direction: reverse; }
.global-flow-core { stroke: rgba(255,255,255,.92); stroke-width: .8; stroke-dasharray: 2 56 22 200; }
@media (max-width: 720px) {
  .global-flow-track--inner, .global-flow-light--g, .global-flow-light--h { display: none; }
}

/* Final section: a light glass close that belongs to the rest of the page. */
.contact {
  isolation: isolate;
  overflow: hidden;
  color: #173c56;
  border-top: 1px solid rgba(178, 211, 224, .5);
  border-bottom: 1px solid rgba(178, 211, 224, .42);
  background: rgba(247, 252, 254, .22);
  box-shadow: inset 0 1px rgba(255, 255, 255, .95), inset 0 -1px rgba(116, 177, 197, .08);
}
.contact-circuit {
  z-index: 0;
  opacity: .25;
  background:
    linear-gradient(90deg, rgba(239, 250, 253, .48), rgba(255, 255, 255, .05)),
    url('assets/security-circuit.svg') center / 1200px 600px no-repeat;
  mix-blend-mode: multiply;
}
.contact-inner { z-index: 1; }
.contact-copy { max-width: 760px; }
.contact .section-tag,
.contact .section-tag--light { color: #0b7f9d; }
.contact .section-tag::before,
.contact .section-tag::after { border-color: #2ca9b5; background: #2ca9b5; }
.contact-title { color: #123a56; text-shadow: 0 1px 1px rgba(255, 255, 255, .8); }
.contact-title span {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #0b8cad;
  color: #0b8cad;
}
.contact-lede { color: #4c6a80; }
.contact .btn-primary {
  background: linear-gradient(135deg, #0fb4cf, #0a86b8);
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .45), 0 14px 30px -15px rgba(8, 125, 161, .55);
}
.contact .btn-primary:hover { background: linear-gradient(135deg, #1cc4de, #0d93c6); color: #fff; }
.contact .btn-ghost {
  background: rgba(255, 255, 255, .56);
  border-color: rgba(122, 177, 194, .58);
  color: #14506e;
  box-shadow: inset 0 1px rgba(255, 255, 255, .85);
}
.contact .btn-ghost:hover { background: rgba(255, 255, 255, .88); border-color: rgba(45, 161, 181, .7); color: #0b617f; }

@keyframes global-security-scan {
  to { stroke-dashoffset: -280; }
}
@media (max-width: 720px) {
  .global-security-flow { opacity: .38; }
  .contact { background-position: 58% center; }
}
@media (prefers-reduced-motion: reduce) {
  .global-flow-light { animation: none; }
}

/* ── Security view: clear glass gallery with a quiet navigation rail ────── */
.security-console {
  --console-ink: #244357;
  --console-muted: #566f80;
  --console-line: rgba(122, 155, 174, .2);
  --console-accent: #0e748a;
  position: relative;
  display: grid;
  grid-template-columns: 204px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .96);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(241, 248, 251, .54));
  box-shadow:
    0 0 0 1px rgba(115, 155, 177, .18),
    0 28px 60px -36px rgba(37, 73, 92, .32),
    inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  backdrop-filter: blur(24px) saturate(120%);
}
.security-console::before { display: none; }
.security-console-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 14px 22px;
  border-right: 1px solid var(--console-line);
  background: linear-gradient(160deg, rgba(232, 243, 248, .62), rgba(232, 244, 246, .28));
  isolation: isolate;
}
.security-console-eyebrow {
  margin: 0 14px 26px;
  color: #617889;
  font: 500 12px/1.5 var(--font-sans);
  letter-spacing: .12em;
}
.security-console-workspace { min-width: 0; }
.security-console .security-console-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  min-height: 0;
  overflow: visible;
  padding: 0;
  border: 0;
  background: none;
  isolation: isolate;
}
.security-console .security-console-tab {
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: 14px;
  min-height: 50px;
  padding: 12px 15px;
  border-radius: 10px;
  color: #526b7b;
  background: transparent;
  font: 500 14px/1.5 var(--font-sans);
  letter-spacing: .02em;
  box-shadow: none;
  transition: color .2s ease;
}
.security-console .security-console-tab:hover { color: #164558; }
.security-console .security-console-tab:focus-visible { outline-offset: -3px; }
.security-console .security-console-tab[aria-selected='true'] {
  color: #164b60;
  background: transparent;
  font-weight: 650;
  box-shadow: none;
}
.security-console .security-tab-index {
  color: #7a909e;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0;
}
.security-console .security-console-tab[aria-selected='true'] .security-tab-index { color: #14798c; }
.security-console .tabs__indicator {
  top: 0;
  left: 0;
  bottom: auto;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, .98);
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .55));
  box-shadow: 0 3px 10px -4px rgba(53, 88, 108, .16), 0 0 0 1px rgba(128, 165, 180, .12);
  transition: transform .26s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.security-console .security-console-motion-strip {
  position: relative;
  flex: 1;
  min-height: 100px;
  margin: 24px -14px 0;
  border: 0;
  opacity: .3;
  background: url('assets/security-field-generated-20261009.webp') center / cover no-repeat;
  filter: grayscale(1) invert(1);
  mix-blend-mode: multiply;
  mask-image: linear-gradient(180deg, transparent, #000 35%, #000 66%, transparent);
}
.security-console .security-console-motion-strip::after { display: none; }
.security-console .security-console-motion {
  opacity: 1;
  mix-blend-mode: normal;
}
.security-console-rail-caption {
  margin: 10px 14px 0;
  color: #607f90;
  font: 400 11px/1.6 var(--font-sans);
  letter-spacing: .08em;
}
.security-console-bar {
  min-height: 70px;
  padding-inline: 26px;
  border: 0;
  background: transparent;
}
.security-console-label {
  color: #29485b;
  font: 600 16px/1.5 var(--font-sans);
  letter-spacing: .025em;
}
.security-console-expand {
  min-height: 36px;
  gap: 8px;
  color: #526d7e;
  font: 400 12px/1.5 var(--font-sans);
  letter-spacing: 0;
}
.security-console-expand svg { width: 15px; height: 15px; }
.security-console-expand:hover,
.security-console-expand:focus-visible { color: #087a91; }
.security-console-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  aspect-ratio: 1.49;
  margin: 0 18px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgba(223, 234, 241, .22);
}
.security-console-stage::before { display: none; }
.security-console-panel {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
}
.security-console-panel::after { display: none; }
.security-console-panel img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(108, 135, 155, .1), 0 8px 20px -12px rgba(54, 75, 93, .25);
}
.security-console-note {
  min-height: 64px;
  padding: 16px 26px;
  gap: 24px;
  background: transparent;
  color: #536d80;
}
.security-console-note p { color: #536d80; font: 400 12px/1.8 var(--font-sans); }
.security-console-note > span { color: #627b8b; font: 400 11px/1.5 var(--font-mono); letter-spacing: .08em; }
@media (max-width: 1060px) and (min-width: 861px) {
  .security-console { grid-template-columns: 180px minmax(0, 1fr); }
  .security-console-rail { padding-inline: 10px; }
  .security-console .security-console-tab { gap: 10px; padding-inline: 12px; }
}
@media (max-width: 860px) {
  .security-console { grid-template-columns: minmax(0, 1fr); }
  .security-console-rail { padding: 12px; border: 0; border-bottom: 1px solid var(--console-line); }
  .security-console-eyebrow,
  .security-console-rail-caption,
  .security-console .security-console-motion-strip { display: none; }
  .security-console .security-console-tabs {
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding: 2px;
    scrollbar-width: none;
  }
  .security-console-tabs::-webkit-scrollbar { display: none; }
  .security-console .security-console-tab { flex: 1 0 auto; justify-content: center; gap: 8px; padding-inline: 14px; min-height: 44px; font-size: 13px; }
  .security-console-bar { min-height: 62px; padding-inline: 22px; }
  .security-console-stage { margin-inline: 14px; }
  .security-console-note { padding: 14px 22px; }
}
@media (max-width: 620px) {
  .security-console { border-radius: 16px; }
  .security-console-rail { padding: 8px; }
  .security-console .security-console-tab { font-size: 12px; padding-inline: 12px; }
  .security-console-bar { min-height: 60px; padding-inline: 16px; }
  .security-console-label { font-size: 15px; }
  .security-console-expand { font-size: 11px; }
  .security-console-stage { margin-inline: 8px; }
  .security-console-panel { border-radius: 5px; }
  .security-console-note { flex-direction: row; align-items: baseline; gap: 12px; min-height: 70px; padding: 15px 16px 18px; }
  .security-console-note p { font-size: 12px; }
  .security-console-note > span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .security-console .tabs__indicator,
  .security-console .security-console-tab { transition: none; }
  .security-console .security-console-motion { display: none; }
}

/* ── Closing visual: generated glass guardian on the right ──────────────── */
.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr);
  gap: clamp(34px, 7vw, 110px);
  align-items: center;
}
.contact-visual {
  position: relative;
  min-width: 0;
  margin: -24px 0;
  justify-self: end;
  width: min(100%, 500px);
}
.contact-visual::before {
  content: '';
  position: absolute;
  inset: 20% 10% 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(101, 221, 225, .22), transparent 67%);
  filter: blur(12px);
}
.contact-visual img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: normal;
  filter: drop-shadow(0 26px 28px rgba(34, 118, 145, .16));
}
.contact-visual figcaption {
  position: absolute;
  right: 11%;
  bottom: 8%;
  color: rgba(40, 120, 139, .64);
  font: 10px/1.4 var(--font-mono);
  letter-spacing: .14em;
}

/* Defer layout and paint for sections below the fold. Content remains in the
   document, keeps its intrinsic space, and renders as soon as it approaches
   the viewport, so the visual composition is unchanged while first paint is
   lighter on mobile devices. */
@supports (content-visibility: auto) {
  .services,
  .solutions,
  .security-ops,
  .process,
  .about {
    content-visibility: auto;
    contain-intrinsic-size: 760px;
  }
}
@media (max-width: 860px) {
  .contact-inner { grid-template-columns: 1fr; gap: 24px; }
  .contact-visual { width: min(100%, 420px); margin: -8px auto -26px; justify-self: center; }
}
@media (max-width: 620px) {
  .contact-visual { width: min(100%, 340px); }
  .contact-visual figcaption { right: 5%; bottom: 7%; font-size: 9px; }
}