:root {
  color-scheme: dark;
  --bg: #090a0b;
  --bg-2: #111315;
  --ink: #f3f4f1;
  --muted: #b1b6bb;
  --dim: #929ba3;
  --line: #303438;
  --blue: #126dff;
  --cyan: #a8ccff;
  --pink: #ff7999;
  --green: #a0dbb8;
  /* Each stack names the native face of every platform, so the page looks at
     home on Windows, Apple, Android and Linux without loading a font. */
  --mono: "Cascadia Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  /* Type scale: every text size on the page is one of these six. They are in
     rem, so they follow the reader's browser font size, and none is under 13px
     at the default. Lead and the two headings grow with the viewport. */
  --text-label: 0.8125rem;
  --text-body: 1rem;
  --text-lead: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  --text-title: 1.25rem;
  --text-heading: clamp(1.875rem, 1.6rem + 1.4vw, 2.75rem);
  --text-display: clamp(2.5rem, 0.4rem + 3.75vw, 4.25rem);
  --gutter: clamp(22px, 5vw, 88px);
  --header-height: 88px;
}
/* Below this width the hero copy takes the full row, so its headline is sized
   against the whole viewport instead of the left column. */
@media (max-width: 900px) {
  :root { --text-display: clamp(2rem, 0.6rem + 7vw, 3.25rem); }
}
* { box-sizing: border-box; letter-spacing: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--pink); outline-offset: 5px; }
button { font: inherit; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 30; padding: 16px; background: var(--ink); color: var(--bg); }
.skip-link:focus { top: 12px; }
.page-field { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.page-field canvas { width: 100%; height: 100%; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 14px var(--gutter); min-height: 80px; background: transparent; border-bottom: 1px solid transparent; transition: background-color 160ms, border-color 160ms; }
.site-header.is-scrolled { background: #000; }
.brand { display: block; flex-shrink: 0; }
.brand img { display: block; width: 190px; height: 58px; object-fit: contain; }
nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px 24px; margin-left: auto; font: var(--text-label)/1.4 var(--mono); color: var(--muted); }
nav a { padding-block: 8px; }
nav a:last-child { color: var(--ink); border-bottom: 1px solid var(--pink); }
nav a:hover { color: var(--pink); }
.motion-toggle { flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.motion-toggle:hover { border-color: var(--pink); }
.hero-next { margin-left: -16px; }
.next-chevron { width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.motion-toggle img { grid-area: 1/1; filter: invert(1); }
.play-icon { display: none; }
.motion-toggle[aria-pressed="true"] .pause-icon { display: none; }
.motion-toggle[aria-pressed="true"] .play-icon { display: block; }
.section { position: relative; padding: 64px var(--gutter); overflow: clip; }
.hero { min-height: 100svh; height: auto; padding-top: calc(var(--header-height) + 48px); padding-bottom: 76px; display: flex; align-items: center; isolation: isolate; }
.hero-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ascii-surface canvas { width: 100%; height: 100%; display: block; opacity: 0; }
.ascii-ready canvas { opacity: 1; }
.ascii-ready > .ascii-fallback { visibility: hidden; }
.hero-poster { position: absolute; right: 3%; top: 15%; }
.hero-copy { position: relative; max-width: 650px; width: 52%; }
.eyebrow { color: var(--cyan); font: var(--text-label)/1.6 var(--mono); text-transform: uppercase; margin: 0 0 22px; }
h1, h2 { margin: 0; font-weight: 400; text-wrap: balance; }
h1 { font-size: var(--text-display); line-height: 1.1; }
h1 em { font-family: var(--serif); font-weight: 400; color: var(--pink); }
h2 { max-width: 900px; font: var(--text-heading)/1.15 var(--serif); }
h3 { margin: 0 0 15px; font-size: var(--text-title); line-height: 1.3; font-weight: 500; }
p { color: var(--muted); line-height: 1.65; font-size: var(--text-body); }
.hero-copy > p:not(.eyebrow) { max-width: 520px; margin: 24px 0 0; font-size: var(--text-lead); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 15px 20px; min-height: 48px; border: 1px solid #555b62; font: var(--text-label)/1.5 var(--mono); transition: background 160ms, border-color 160ms; }
.button.primary { color: #090a0b; background: var(--ink); border-color: var(--ink); }
.button:hover { border-color: var(--pink); background: #252126; }
.button.primary:hover { color: #090a0b; background: var(--pink); }
pre { margin: 0; font-family: var(--mono); white-space: pre; }
.observatory { padding-top: 64px; padding-bottom: 24px; }
.observatory-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; align-items: start; }
.observatory-copy .eyebrow { grid-column: 1/-1; }
/* The statement is the panel's only text: it spans both columns so each of its
   first two sentences stays on one line. */
.observatory-copy h2 { grid-column: 1 / -1; max-width: 760px; }
.observatory-copy p:not(.eyebrow) { max-width: 510px; margin: 0; }
.logo-plate { position: relative; aspect-ratio: 3.5; margin-top: 24px; }
.ascii-logo-plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 11px; line-height: 1.25; color: var(--ink); }
.section-head { margin-bottom: 32px; }
.section-head h2 { max-width: 800px; }
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 40px; }
.service-grid article { position: relative; min-width: 0; padding: 24px 0; }
.service-grid pre { color: var(--cyan); font: var(--text-label)/1.6 var(--mono); margin-bottom: 27px; max-width: 100%; overflow-x: auto; transition: color 240ms; }
.service-grid article:nth-child(2n) pre { color: var(--green); }
.service-grid article:nth-child(3n) pre { color: var(--pink); }
.service-grid article:hover pre { color: var(--ink); }
.service-grid p, .ops-card p, .method-list p { margin: 0; }
.ecosystem { background: #0b0d0f; padding-top: 56px; padding-bottom: 48px; }
.ecosystem .section-head { margin-bottom: 36px; }
.ecosystem h2 { font-family: var(--sans); font-size: var(--text-heading); }
.ecosystem .section-head p { max-width: 660px; margin-bottom: 0; }
.ecosystem-rows { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.ecosystem-lane, .ecosystem-track, .ecosystem-list { display: contents; }
.ecosystem-list { list-style: none; margin: 0; padding: 0; }
.ecosystem-list[aria-hidden] { display: none; }
.ecosystem-list li { min-width: 0; display: grid; place-items: center; height: 100px; }
.ecosystem-list img { width: 100%; max-width: 176px; height: 64px; object-fit: contain; opacity: .8; transition: opacity 180ms; }
.ecosystem-list li:hover img { opacity: 1; }
.ecosystem-list img[src$="/microsoft.png"] { height: 96px; }
.ecosystem-list img[src$="/aws.svg"] { height: 52px; }
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .ecosystem.is-ready .ecosystem-rows { display: block; }
  .ecosystem.is-ready .ecosystem-lane { display: block; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
  .ecosystem.is-ready .ecosystem-track { display: flex; width: max-content; animation: ecosystem-drift 160s linear infinite; }
  .ecosystem.is-ready .ecosystem-lane:nth-child(2) .ecosystem-track { animation-direction: reverse; }
  .ecosystem.is-ready .ecosystem-list { display: flex; flex: 0 0 auto; gap: 52px; padding-right: 52px; }
  .ecosystem.is-ready .ecosystem-list li { width: 176px; height: 120px; }
  .ecosystem.is-ready .ecosystem-lane:hover .ecosystem-track,
  :root[data-motion-paused="true"] .ecosystem.is-ready .ecosystem-track { animation-play-state: paused; }
}
@keyframes ecosystem-drift { to { transform: translateX(-50%); } }
@media (max-width: 999px) { .ecosystem-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ecosystem-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; } .ecosystem-list img { max-width: 148px; height: 56px; } }
.command-center { padding: 50px clamp(22px, 2.4vw, 48px) 32px; background: #080d10; }
.products-heading { margin: 0 30px 32px; }
.products-heading h2 { max-width: none; font-size: 3.25rem; text-wrap: normal; }
.products-heading .eyebrow { margin-bottom: 18px; font-size: .875rem; }
.products-intro { margin: 12px 0 0; font-size: 1.375rem; line-height: 1.5; }
.ops-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.ops-card { --product-accent: #369dff; --tag-border: #3976a3; position: relative; isolation: isolate; display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: 0; min-width: 0; padding: 28px 40px 240px; overflow: hidden; border: 1px solid #202a32; border-radius: 8px; background: #080d10; }
.radar-product { --product-accent: #ff354d; --tag-border: #a33a44; }
.product-number { position: absolute; top: 24px; right: 24px; color: var(--dim); font: 1rem/1 var(--mono); }
.product-brand { display: flex; align-items: center; gap: 20px; height: 76px; margin: 0 0 16px; font-size: 2.125rem; font-weight: 600; }
.product-brand a { display: block; max-width: 100%; }
.noqip-logo { display: block; width: 240px; max-width: 100%; height: auto; }
.product-mark { flex: 0 0 auto; width: 76px; height: 76px; object-fit: contain; }
.ops-card .product-category { display: flex; align-items: center; min-height: 42px; margin-bottom: 16px; color: #bdd8ed; font: .875rem/1.5 var(--mono); text-transform: uppercase; }
.ops-card .product-description { font-size: 1.125rem; line-height: 1.35; color: #b9c2cd; }
.product-tags { display: grid; grid-template-columns: repeat(3, max-content); align-content: start; gap: 8px; list-style: none; margin: 24px 0 0; padding: 0; }
.cloud-tags { grid-template-columns: repeat(4, max-content); }
.product-tags li { padding: 6px 16px; border: 1px solid var(--tag-border); border-radius: 2px; background: #080d10b3; box-shadow: inset 0 -2px 4px color-mix(in srgb, var(--product-accent) 12%, transparent); color: #e4eaf0; font: .8125rem/1.3 var(--sans); text-transform: uppercase; text-align: center; }
.product-art { position: absolute; z-index: -1; bottom: 0; left: 0; width: 100%; height: 330px; object-fit: cover; object-position: bottom; mask-image: linear-gradient(transparent, #000 18%); pointer-events: none; }
.product-scene { height: 270px; object-fit: contain; mix-blend-mode: screen; }
.cloud-providers { position: absolute; right: 24px; bottom: 80px; display: grid; gap: 14px; list-style: none; padding: 0; margin: 0; color: #cddce8; font: .6875rem/1.5 var(--mono); }
.cloud-providers li { display: flex; align-items: center; gap: 12px; }
.cloud-providers img { width: 28px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); }
.cloud-providers .oci-mark { height: 18px; object-fit: cover; object-position: left; }
.cloud-providers::after { content: "MULTI-CLOUD\A SECURITY"; white-space: pre; color: var(--dim); margin-top: 4px; }
@media (min-width: 1101px) and (max-width: 1399px) {
  .ops-card { padding: 34px 24px 240px; }
  .product-brand { gap: 12px; font-size: 1.5rem; }
  .product-mark { width: 56px; height: 56px; }
  .product-tags { display: flex; flex-wrap: wrap; align-content: start; }
  .product-tags li { padding-inline: 10px; }
  .product-number { top: 16px; right: 16px; }
}
@media (max-width: 1100px) {
  .ops-layout { grid-template-columns: 1fr; gap: 24px; max-width: 660px; margin-inline: auto; }
  .ops-card { grid-template-rows: repeat(4, auto); grid-row: auto; }
  .product-tags { display: flex; flex-wrap: wrap; }
  .products-heading h2 { font-size: 2.5rem; }
  .products-heading { margin-inline: 0; }
  .products-intro { font-size: 1.125rem; }
}
@media (max-width: 600px) {
  .section.command-center { padding: 48px 20px 32px; }
  .products-heading h2 { font-size: 2rem; }
  .products-heading .eyebrow { font-size: .75rem; }
  .products-intro { font-size: 1rem; }
  .ops-card { padding: 40px 22px 230px; }
  .product-number { top: 16px; right: 16px; font-size: .875rem; }
  .product-brand { font-size: 1.375rem; gap: 12px; height: 60px; }
  .product-mark { width: 48px; height: 48px; }
  .noqip-logo { width: 220px; }
  .ops-card .product-category { font-size: .8125rem; }
  .ops-card .product-description { font-size: 1rem; line-height: 1.5; }
  .product-tags li { padding-inline: 10px; font-size: .75rem; }
  .product-art { height: 250px; }
  .cloud-providers { right: 16px; bottom: 70px; gap: 10px; }
  .cloud-providers img { width: 22px; height: 16px; }
  .cloud-providers .oci-mark { height: 14px; }
}
.method-heading { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 80px; align-items: center; }
.method-heading .eyebrow { grid-column: 1 / -1; }
.method-heading h2 { max-width: 720px; }
.method-context { max-width: 440px; margin: 0; justify-self: end; }
.method-list { --step-gap: 36px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--step-gap); position: relative; isolation: isolate; list-style: none; margin: 76px 0 0; padding: 0; }
.method-list li { --step-accent: #78caff; position: relative; min-width: 0; padding: 40px 20px 28px; background: #0b0d0ef5; border: 1px solid var(--line); border-radius: 8px; transition: border-color 180ms; }
.method-list li:nth-child(even) { --step-accent: var(--pink); }
.method-list li:hover { border-color: color-mix(in srgb, var(--step-accent) 55%, var(--line)); }
.method-icon { position: absolute; top: -52px; left: calc(50% - 34px); width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid var(--step-accent); border-radius: 50%; color: var(--step-accent); background: var(--bg); box-shadow: 0 0 22px color-mix(in srgb, var(--step-accent) 10%, transparent); }
.method-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.method-number { display: block; margin-bottom: 8px; font: 1.125rem/1.3 var(--mono); color: var(--pink); }
.method-list h3 { min-height: 2.6em; margin: 0 0 18px; font-size: 1.125rem; line-height: 1.3; }
.method-list p { font-size: var(--text-body); line-height: 1.6; }
/* Each segment runs from one badge to the next, behind both card surfaces. */
.method-link { position: absolute; z-index: -1; top: -21px; left: 50%; width: calc(100% + var(--step-gap) + 2px); height: 32px; color: var(--step-accent); fill: none; overflow: visible; pointer-events: none; }
.method-link path { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }
.method-link circle { fill: currentColor; filter: drop-shadow(0 0 4px currentColor); }
@media (max-width: 1100px) {
  .method-heading { grid-template-columns: 1fr; gap: 0; }
  .method-context { justify-self: start; max-width: 560px; margin-top: 24px; }
  .method-list { --step-gap: 32px; grid-template-columns: 1fr; margin-top: 48px; padding-left: 32px; }
  .method-list li { padding: 26px 28px 28px 56px; }
  .method-icon { top: 24px; left: -33px; width: 64px; height: 64px; }
  .method-list h3 { min-height: 0; }
  .method-list li:not(:last-child)::after { content: ""; position: absolute; z-index: -1; left: -2px; top: 56px; height: calc(100% + var(--step-gap)); width: 1px; background: linear-gradient(var(--step-accent), var(--line)); }
  .method-list li:not(:last-child)::before { content: ""; position: absolute; left: -4px; bottom: -19px; width: 5px; height: 5px; border-radius: 50%; background: var(--step-accent); box-shadow: 0 0 6px color-mix(in srgb, var(--step-accent) 35%, transparent); }
  .method-link { display: none; }
}
.contact { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; background: #101214; }
.contact p { margin: 25px 0; }
.contact-details { display: grid; gap: 12px; margin-top: 28px; color: var(--muted); font-size: var(--text-body); font-style: normal; line-height: 1.65; }
.contact-details a { justify-self: start; padding-block: 6px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.trust-art { position: relative; height: 380px; min-width: 0; }
.contact-art { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 11px; line-height: 1.65; color: var(--green); }
.site-footer { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 24px var(--gutter); font: var(--text-label)/1.7 var(--mono); color: var(--dim); }
.site-footer a:first-child { color: var(--ink); }

@media (min-width: 1600px) {
  .hero-copy { max-width: 740px; }
  .hero-copy > p:not(.eyebrow) { max-width: 620px; }
}
@media (max-width: 1150px) {
  nav { gap: 10px 16px; }
  .hero-copy { width: 57%; }
  .service-grid { gap: 0 26px; }
  .contact { gap: 30px; }
}
@media (max-width: 860px) {
  .site-header { flex-wrap: wrap; gap: 8px 18px; padding-block: 10px; }
  .brand img { width: 158px; height: 46px; }
  nav { order: 3; flex-basis: 100%; justify-content: space-between; gap: 5px 12px; }
  .motion-toggle { margin-left: auto; }
  .hero-next { margin-left: -12px; }
  .hero { height: auto; min-height: 720px; }
  .hero-copy { width: 66%; }
  .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .observatory-copy { gap: 30px; }
  .ascii-logo-plate { font-size: 8px; }
  .contact { grid-template-columns: 1fr; }
  .trust-art { height: 300px; }
}
@media (max-width: 600px) {
  .section { padding: 40px var(--gutter); }
  .hero { padding-top: 245px; padding-bottom: 40px; min-height: 0; }
  .hero-copy { width: 100%; max-width: 460px; }
  .hero-art { height: 265px; }
  .hero-poster { right: 10%; top: 17%; }
  .eyebrow { margin-bottom: 17px; }
  .hero-copy > p:not(.eyebrow) { margin-top: 19px; }
  .hero-actions { gap: 10px; margin-top: 24px; }
  /* Side by side while both fit; otherwise each button fills its own row. */
  .button { padding: 13px 15px; flex: 1 1 auto; }
  .observatory-copy { grid-template-columns: 1fr; gap: 0; }
  .observatory-copy p:not(.eyebrow) { margin-top: 22px; }
  .ascii-logo-plate { font-size: 5px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid article { padding: 24px 0; }
  .section-head { margin-bottom: 30px; }
  .method-list li { padding: 26px 20px 26px 46px; }
  .contact-art { font-size: 12px; }
  .trust-art { height: 260px; }
}
@media (max-width: 360px) {
  .hero { padding-top: 220px; padding-bottom: 28px; }
  .hero-art { height: 240px; }
  nav { justify-content: flex-start; gap: 4px 15px; }
  .ascii-logo-plate { font-size: 4px; }
  .contact-art { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Fit the complete scene beneath the header and keep the floor visible. */
.hero-art { inset: 0; mask-image: linear-gradient(transparent, #000 6%, #000 88%, transparent); mask-size: 100% min(100%, calc(100vw * 941 / 1672)); mask-position: center; mask-repeat: no-repeat; }
.hero .hero-poster, .hero-led-overlay { inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; mask-image: linear-gradient(to right, transparent 22%, #0001 39%, #000 54%); }
.hero-led-overlay { position: absolute; pointer-events: none; opacity: 0; }
.hero-led-overlay.is-ready { opacity: 1; }
.hero-led-overlay[data-effects$="hero-architecture-lights.svg"], .hero-led-overlay[data-effects$="hero-horizon-lights.svg"] { mask-image: none; }
.hero-led { fill: none; stroke: #dcf5ff; stroke-width: 3.5; stroke-linecap: round; filter: url(#hero-led-bloom); opacity: .03; animation: hero-led-pulse 4s ease-in-out infinite; animation-play-state: paused; }
.hero-led:nth-of-type(2) { animation-delay: -1.4s; animation-duration: 4.6s; }
.hero-led:nth-of-type(3) { animation-delay: -2.8s; animation-duration: 3.8s; }
.hero-led:nth-of-type(4) { animation-delay: -.7s; animation-duration: 4.2s; }
.hero-led:nth-of-type(5) { animation-delay: -2s; animation-duration: 4.8s; }
.hero-led:nth-of-type(6) { animation-delay: -3.1s; animation-duration: 4.4s; }
.hero-led-beam { stroke-width: 1.4; opacity: .75; }
.hero-led-spill { stroke: #429eff; stroke-width: 9; opacity: .55; }
.cloud-beam { stroke: #ecc6ff; stroke-width: 2.3; filter: url(#cloud-beam-glow); }
.server-led-bank polygon { fill: none; stroke: none; }
.hero-status-led { opacity: .12; animation: hero-server-activity 2s steps(1, end) infinite; animation-play-state: paused; }
.hero-lightning { opacity: 0; fill: none; stroke: #dcf1ff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: url(#cloud-lightning-glow); animation: hero-sky-flash 18s linear infinite; animation-delay: -.3s; animation-play-state: paused; }
.hero-lightning:nth-child(2) { animation-delay: -4s; }
.hero-lightning:nth-child(3) { animation-delay: -7.6s; }
.hero-lightning:nth-child(4) { animation-delay: -11.2s; }
.hero-lightning:nth-child(5) { animation-delay: -14.8s; }
.signal-lanes-blue { color: #99e4ff; }
.signal-lanes-pink { color: #ffb9df; }
.hero-data-packet { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 200; opacity: 1; filter: url(#signal-packet-glow); animation: hero-data-travel 2.8s linear infinite alternate; animation-play-state: paused; }
.hero-data-packet:nth-child(2n) { animation-duration: 3.3s; animation-delay: -1.8s; animation-direction: alternate-reverse; }
.hero-data-packet:nth-child(3n) { animation-duration: 2.3s; animation-delay: -.9s; }
.hero-data-packet:nth-child(4n) { animation-delay: -3.6s; }
.signal-lanes-pink .hero-data-packet { animation-delay: -1.2s; }
.signal-lanes-pink .hero-data-packet:nth-child(2n) { animation-delay: -3.9s; }
.soc-monitors { fill: none; stroke: #8bd8ff; stroke-linecap: square; opacity: .8; }
.soc-chart-bar { stroke-width: 1.5; transform-box: fill-box; transform-origin: center bottom; animation: soc-chart-update 2.3s steps(4, end) infinite alternate; animation-play-state: paused; }
.soc-chart-bar:nth-child(2n) { stroke: #7cddb6; animation-duration: 1.7s; animation-delay: -.8s; }
.soc-chart-bar:nth-child(3n) { animation-duration: 2.7s; animation-delay: -1.4s; }
.soc-monitor-display:nth-child(2n) .soc-chart-bar { animation-direction: alternate-reverse; }
.soc-monitor-trace { stroke: #caecff; stroke-width: .6; stroke-dasharray: 22 9; animation: soc-monitor-refresh 1.8s steps(6, end) infinite; animation-play-state: paused; }
.soc-threat-state { color: #e5f3ff; animation: soc-threat-color 18s linear infinite; animation-play-state: paused; }
.soc-light-pulse { stroke: none; opacity: .06; animation: soc-threat-pulse 18s ease-in-out infinite; animation-play-state: paused; }
.soc-dome-material { isolation: isolate; }
.soc-dome-tint { mix-blend-mode: color-burn; opacity: .65; }
.soc-dome-light { mix-blend-mode: screen; opacity: .65; }
.soc-indicator { fill: currentColor; stroke: none; font: 500 12px/1 var(--mono); opacity: .25; }
.soc-indicator[data-threat] { opacity: .4; animation: soc-indicator-alert 18s ease-in-out infinite; animation-play-state: paused; }
.soc-floor-reflection { fill: currentColor; stroke: none; opacity: .82; }
.factory-strip { color: #ff3547; opacity: 0; animation: factory-strip-cycle 6.6s step-end infinite; }
.factory-strip:nth-child(2) { animation-delay: -.8s; animation-duration: 7.1s; }
.factory-strip:nth-child(3) { animation-delay: -2.3s; animation-duration: 6.2s; }
.factory-strip:nth-child(4) { animation-delay: -3.4s; animation-duration: 7.5s; }
.factory-strip:nth-child(5) { animation-delay: -1.5s; animation-duration: 6.9s; }
.factory-strip:nth-child(6) { animation-delay: -4.6s; animation-duration: 7.3s; }
.factory-strip:nth-child(7) { animation-delay: -2.9s; animation-duration: 6.4s; }
.factory-filament { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; filter: url(#factory-glow); }
.factory-reflection { fill: currentColor; opacity: .32; filter: url(#factory-floor-soften); mask: url(#factory-reflection-mask); }
.factory-wall-flash { fill: currentColor; color: #ff5963; opacity: 0; animation: factory-wall-flash 10.8s linear infinite; }
.factory-weld { opacity: 0; animation: factory-weld-cycle 4.8s ease-in-out infinite; }
.factory-weld-rays { fill: #e0f7ff; stroke: #c1edff; stroke-width: 1.2; stroke-linecap: round; transform-origin: 0 0; animation: factory-weld-spread 4.8s ease-out infinite; }
.factory-weld-drop { fill: none; stroke: #ffe1ac; stroke-width: 1.3; stroke-linecap: round; opacity: 0; offset-path: path("M1378 452 Q1302 422 1288 682"); offset-position: 0 0; offset-anchor: 0 0; animation: factory-weld-fall 4.8s linear infinite; }
.factory-weld-drop:nth-child(2) { offset-path: path("M1378 452 Q1384 430 1350 717"); animation-delay: .05s; }
.factory-weld-drop:nth-child(3) { offset-path: path("M1378 452 Q1438 433 1452 681"); animation-delay: .1s; }
.factory-short { fill: none; stroke: #d9efff; stroke-width: .75; stroke-linejoin: round; stroke-linecap: round; opacity: 0; animation: factory-short-cycle 8.8s linear infinite; }
.factory-falling-spark { fill: none; stroke: #ffe0b0; stroke-width: 1.8; stroke-linecap: round; opacity: 0; offset-path: path("M1498 194 Q1377 144 1258 850"); offset-position: 0 0; offset-anchor: 0 0; animation: factory-spark-fall 8.8s linear infinite; }
.factory-spark-impact { fill: none; stroke: #ffd5a0; stroke-width: 1; opacity: 0; animation: factory-spark-impact 8.8s linear infinite; }
.arch-smoke { fill: #91a8b9; filter: url(#arch-smoke-texture); opacity: .04; animation: arch-wind 24s linear infinite; animation-delay: -6s; }
.arch-smoke:nth-child(2) { animation-duration: 28s; animation-delay: -15s; }
.arch-smoke:nth-child(3) { animation-duration: 21s; animation-delay: -11s; }
.arch-drop { fill: #e1f7ff; fill-opacity: .28; stroke: #92c9ed; stroke-width: .2; stroke-opacity: .4; opacity: .18; transform: scale(.42, .55); animation: arch-condensation 12s cubic-bezier(.48,.02,.68,1) infinite; animation-delay: -3s; }
.arch-drop-stream:nth-child(2n) .arch-drop { animation-duration: 15s; animation-delay: -8s; }
.arch-drop-stream:nth-child(3n) .arch-drop { animation-duration: 10s; animation-delay: -5s; }
.arch-lightning { opacity: 0; animation: arch-storm 12s linear infinite; animation-delay: -2s; }
.arch-lightning:nth-child(2) { animation-delay: -7s; animation-duration: 13s; }
.arch-storm-fill { fill: #bddfff; opacity: .035; }
.arch-bolt { fill: none; stroke: #dbf1ff; stroke-width: .25; stroke-opacity: .65; stroke-linejoin: round; filter: url(#arch-bolt-glow); }
.arch-firelight { fill: #ff874e; opacity: .05; animation: arch-firelight 3.6s ease-in-out infinite alternate; }
.arch-flame { fill: url(#arch-flame-color); filter: url(#arch-flame-soften); opacity: .22; transform-origin: 0 0; animation: arch-flame 1.25s ease-in-out infinite; }
.arch-flame-site:nth-child(2n) .arch-flame { animation-delay: -.7s; animation-duration: .95s; }
.arch-flame-site:nth-child(3n) .arch-flame { animation-delay: -1.1s; animation-duration: 1.65s; }
.arch-ash { fill: #b5aaa0; opacity: 0; offset-position: 0 0; offset-anchor: 0 0; offset-path: path("M1369 591 Q1337 686 1347 815"); animation: arch-ash-fall 7s linear infinite; animation-delay: -2s; }
.arch-ash:nth-child(2) { fill: #efb098; offset-path: path("M1407 654 Q1401 728 1388 827"); animation-delay: -4s; animation-duration: 6.5s; }
.arch-ash:nth-child(3) { offset-path: path("M1390 714 Q1366 752 1332 840"); animation-delay: -5.5s; }
.arch-ash:nth-child(4) { offset-path: path("M1411 512 Q1455 672 1433 818"); animation-delay: -1s; animation-duration: 9s; }
.arch-ash:nth-child(5) { fill: #efb098; offset-path: path("M1373 735 Q1360 778 1350 835"); animation-delay: -3.7s; animation-duration: 5s; }
.arch-ash:nth-child(6) { offset-path: path("M1405 745 Q1421 780 1406 832"); animation-delay: -1.8s; animation-duration: 5.5s; }
.horizon-flight { offset-path: path("M982 676 C1015 645 1128 494 1146 438 C1168 371 1117 304 1100 294 C1064 276 1008 240 949 240 C904 239 835 289 792 329 C788 398 792 518 814 558 C838 606 919 644 982 676Z"); offset-position: 0 0; offset-anchor: 0 0; offset-rotate: 0deg; animation: horizon-route 22s linear infinite; }
.horizon-bearing { transform-origin: 0 0; animation: horizon-bearing 22s ease-in-out infinite; }
.horizon-bird { fill: #000; }
.horizon-grounded { opacity: 1; animation: horizon-grounded 22s linear infinite; }
.horizon-airborne { opacity: 0; animation: horizon-airborne 22s linear infinite; }
.horizon-wingbeat { transform-origin: 65px 62px; animation: horizon-wingbeat .44s ease-in-out infinite; }
.factory-animated, .arch-animated, .horizon-animated { animation-play-state: paused; }
.hero-led-overlay.is-active :is(.hero-led, .hero-status-led, .hero-lightning, .hero-data-packet, .soc-chart-bar, .soc-monitor-trace, .soc-threat-state, .soc-light-pulse, .soc-indicator[data-threat], .factory-animated, .arch-animated, .horizon-animated) { animation-play-state: running; }
:root[data-motion-paused="true"] :is(.hero-led, .hero-status-led, .hero-lightning, .hero-data-packet, .soc-chart-bar, .soc-monitor-trace, .soc-threat-state, .soc-light-pulse, .soc-indicator[data-threat], .factory-animated, .arch-animated, .horizon-animated) { animation-play-state: paused; }
@keyframes horizon-route {
  0%, 8% { offset-distance: 0%; }
  18% { offset-distance: 10%; }
  34% { offset-distance: 33%; }
  54% { offset-distance: 60%; }
  72% { offset-distance: 84%; }
  92%, 100% { offset-distance: 100%; }
}
@keyframes horizon-bearing {
  0%, 8%, 92%, 100% { transform: rotate(0deg) scale(1); }
  14% { transform: rotate(-18deg) scale(1); }
  27% { transform: rotate(-48deg) scale(.9); }
  34% { transform: rotate(-18deg) scale(.82); }
  38% { transform: rotate(0deg) scale(.1, .82); }
  42% { transform: rotate(14deg) scale(-.82, .82); }
  55% { transform: rotate(-12deg) scale(-.84, .84); }
  66% { transform: rotate(-35deg) scale(-.9, .9); }
  73% { transform: rotate(0deg) scale(-.08, .9); }
  77% { transform: rotate(25deg) scale(.9); }
  88% { transform: rotate(10deg) scale(1); }
}
@keyframes horizon-grounded { 0%, 8%, 94%, 100% { opacity: 1; } 9%, 92% { opacity: 0; } }
@keyframes horizon-airborne { 0%, 8%, 94%, 100% { opacity: 0; } 9%, 92% { opacity: 1; } }
@keyframes horizon-wingbeat {
  0%, 100% { transform: rotate(-8deg) scaleY(1); }
  50% { transform: rotate(12deg) scaleY(-.8); }
}
@keyframes arch-wind {
  0% { transform: translate(230px, 12px); opacity: 0; }
  20%, 75% { opacity: .18; }
  100% { transform: translate(-390px, -18px); opacity: 0; }
}
@keyframes arch-condensation {
  0% { transform: translateY(-40px) scale(.42, .55); opacity: 0; }
  10% { opacity: .42; }
  80% { opacity: .28; }
  100% { transform: translateY(510px) scale(.42, .55); opacity: 0; }
}
@keyframes arch-storm {
  0%, 10%, 16%, 100% { opacity: 0; }
  11% { opacity: .9; }
  12% { opacity: .12; }
  13% { opacity: .65; }
}
@keyframes arch-firelight { from { opacity: .035; } to { opacity: .12; } }
@keyframes arch-flame {
  0%, 100% { transform: skewX(-3deg) scale(.7, .75); opacity: .12; }
  19% { transform: skewX(2deg) scale(.85, 1.05); opacity: .42; }
  37% { transform: skewX(-5deg) scale(.6, .9); opacity: .2; }
  63% { transform: skewX(-2deg) scale(.8, 1.18); opacity: .38; }
  81% { transform: skewX(-6deg) scale(.55, 1); opacity: .18; }
}
@keyframes arch-ash-fall {
  0% { offset-distance: 0%; opacity: 0; }
  15% { opacity: .75; }
  75% { opacity: .4; }
  92% { offset-distance: 100%; opacity: .15; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes factory-strip-cycle {
  0%, 8%, 20%, 32%, 58%, 70%, 82%, 100% { opacity: 0; }
  4%, 16%, 28% { color: #ff3547; opacity: 1; }
  54%, 66%, 78% { color: #f0f8ff; opacity: 1; }
}
@keyframes factory-wall-flash {
  0%, 3%, 8%, 52%, 58%, 100% { opacity: 0; }
  4% { color: #ff5963; opacity: .55; }
  54% { color: #eff7ff; opacity: .65; }
}
@keyframes factory-weld-cycle {
  0%, 9%, 26%, 100% { opacity: 0; }
  12%, 14% { opacity: 1; }
  19% { opacity: .2; }
}
@keyframes factory-weld-spread {
  0%, 10% { transform: scale(.2); opacity: 0; }
  12% { opacity: 1; }
  24%, 100% { transform: scale(1.1); opacity: 0; }
}
@keyframes factory-short-cycle {
  0%, 8%, 11%, 15%, 100% { opacity: 0; }
  9%, 13% { opacity: .65; }
}
@keyframes factory-weld-fall {
  0%, 12% { offset-distance: 0%; opacity: 0; }
  13% { offset-distance: 0%; opacity: 1; }
  20% { offset-distance: 12%; opacity: .8; }
  29% { offset-distance: 45%; opacity: .45; }
  40%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes factory-spark-fall {
  0%, 12% { offset-distance: 0%; opacity: 0; }
  13% { offset-distance: 0%; opacity: 1; }
  29% { opacity: .9; }
  31% { offset-distance: 100%; opacity: .6; }
  32%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes factory-spark-impact {
  0%, 30%, 35%, 100% { opacity: 0; }
  31% { opacity: .6; }
}
@keyframes soc-chart-update { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes soc-monitor-refresh { to { stroke-dashoffset: -31; } }
@keyframes soc-threat-color {
  0%, 64%, 92%, 100% { color: #e5f3ff; }
  68%, 86% { color: #ff2028; }
}
@keyframes soc-threat-pulse {
  0%, 24%, 48%, 66%, 92%, 100% { opacity: .06; }
  12%, 36%, 60% { opacity: .14; }
  71%, 77%, 83% { opacity: .5; }
  68%, 74%, 80%, 86% { opacity: 1; }
}
@keyframes soc-indicator-alert {
  0%, 64%, 92%, 100% { opacity: .4; }
  68%, 86% { opacity: 1; }
}
@keyframes hero-data-travel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -99; } }
@keyframes hero-server-activity {
  0%, 78%, 100% { opacity: .12; }
  70% { opacity: 1; }
}
@keyframes hero-sky-flash {
  0%, 6%, 100% { opacity: 0; }
  1% { opacity: .85; }
  2% { opacity: .25; }
  3% { opacity: .65; }
}
@keyframes hero-led-pulse {
  0%, 100% { opacity: .03; }
  40%, 60% { opacity: 1; }
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; background: #000;
}
@media (min-width: 901px) {
  .hero-copy { width: 43%; max-width: 650px; }
}
@media (max-width: 900px) {
  .hero .hero-poster, .hero-led-overlay { object-fit: cover; mask-image: none; }
  .hero { height: auto; min-height: 100svh; padding-top: calc(var(--header-height) + 490px); padding-bottom: 70px; }
  .hero-art { top: var(--header-height); bottom: auto; height: 490px; mask-image: linear-gradient(transparent, #000 12%, #000 86%, transparent); mask-size: 100% 100%; }
  .hero-copy { width: 100%; max-width: 620px; }
}
@media (max-width: 600px) {
  .hero { padding-top: calc(var(--header-height) + 350px); padding-bottom: 64px; }
  .hero-art { height: 350px; }
}
@media (max-width: 360px) {
  .hero { padding-top: calc(var(--header-height) + 310px); }
  .hero-art { height: 310px; }
}