/* WideFlows v2 — airy editorial layout, native animations, no remote font/CDN.
   Aptos is used when installed; font files are intentionally not bundled. */
:root {
  --font: Aptos, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --ink: #112f45; --muted: #617381; --blue: #0678ed; --teal: #009caf;
  --green: #6fb444; --paper: #f9fcfd; --line: #dfe8ee; --white: #ffffff;
  --ease: cubic-bezier(.22,1,.36,1); --radius: 24px;
  --section: clamp(88px, 9vw, 144px); --max: 1296px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { max-width: 100%; display: block; }
figure, h1, h2, h3, h4, p { margin: 0; }
button, fieldset { border: 0; }
fieldset { margin: 0; padding: 0; min-width: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #078cd0; outline-offset: 5px; border-radius: 5px; }
::selection { background: #bfeaed; color: #092d43; }
.wrap { width: min(var(--max), calc(100% - 112px)); margin-inline: auto; }
.section { padding-block: var(--section); }
section[id] { scroll-margin-top: 100px; }
h1, h2, h3 { letter-spacing: -.045em; line-height: 1.12; }
h1 { font-size: clamp(50px, 5.7vw, 84px); font-weight: 640; }
h2 { font-size: clamp(36px, 3.6vw, 54px); font-weight: 600; }
h3 { font-size: 25px; font-weight: 620; }
p { color: var(--muted); }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .17em; line-height: 1.6; color: var(--teal); text-transform: uppercase; margin-bottom: 22px; }
.micro { font-size: 10px; letter-spacing: .11em; font-weight: 650; line-height: 1.5; text-transform: uppercase; color: var(--muted); }
.gradient-text { background: linear-gradient(110deg,#317e46 3%,#00a397 42%,#037def 95%); color: transparent; -webkit-background-clip: text; background-clip: text; }
.text-muted { color: #82929e; }
.text-light { color: #a7c9ce; }
.intro { font-size: 17px; line-height: 1.8; max-width: 405px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 60px; margin-bottom: 52px; }
.section-head h2 { max-width: 770px; }
.section-head .intro { padding-bottom: 4px; flex: 0 1 390px; }
.section-tail { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-top: 40px; }
.section-tail p { font-size: 15px; }
.section-tail strong { font-weight: 500; color: var(--ink); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 26px; border-radius: 12px; padding: 17px 24px; font-size: 14px; font-weight: 600; line-height: 1.5; border: 1px solid transparent; transition: transform .3s var(--ease), background .25s, box-shadow .25s; }
.button span { transition: transform .3s var(--ease); }
.button:hover span { transform: translate(3px,-2px); }
.button:hover { transform: translateY(-2px); }
.primary { color: white; background: var(--ink); box-shadow: 0 4px 10px #17394b08; }
.primary:hover { background: #075a6b; box-shadow: 0 8px 28px #123c4b21; }
.secondary { background: white; color: var(--ink); border-color: var(--line); }
.secondary:hover { background: #f0f7fb; }
.small { padding: 13px 17px; font-size: 12px; border-radius: 10px; gap: 18px; }
.text-link { display: inline-flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 650; line-height: 1.5; }
.text-link span { transition: transform .3s; }
.text-link:hover span { transform: translateX(5px); }
.text-link:hover { color: var(--teal); }
.fineprint, .visual-note { font-size: 12px; line-height: 1.75; color: #778994; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 12px; padding: 12px 24px; z-index: 1000; background: white; transform: translateY(-150%); border-radius: 10px; }
.skip-link:focus { transform: none; }
/* Header and navigation */
.reading-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 150; pointer-events: none; }
.reading-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#89bc35,#04aaa0,#0088f4); transform: scaleX(0); transform-origin: left; }
.site-header { position: sticky; top: 0; z-index: 100; background: #f9fcfdec; backdrop-filter: blur(20px); border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s; }
.site-header.scrolled { border-color: #e2eaee; box-shadow: 0 5px 30px #17344605; }
.nav-shell { height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { width: 181px; flex-shrink: 0; }
.brand img { width: 181px; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: 27px; }
.desktop-nav a { padding-block: 14px; position: relative; font-size: 13px; font-weight: 500; color: #405a6b; }
.desktop-nav a::after { position: absolute; content: ''; height: 2px; background: var(--teal); left: 0; right: 0; bottom: 5px; transform: scaleX(0); transition: transform .3s; transform-origin: left; }
.desktop-nav a:hover::after, .desktop-nav a.active::after { transform: scaleX(1); }
.desktop-nav sup { font-size: 8px; color: #6690a6; margin-left: 2px; }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.menu-toggle { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 9px; background: white; display: none; position: relative; }
.menu-toggle span { position: absolute; left: 11px; width: 18px; height: 2px; background: var(--ink); top: 15px; transition: transform .3s; }
.menu-toggle span+span { top: 24px; }
.menu-toggle[aria-expanded=true] span { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span+span { transform: translateY(-4.5px) rotate(-45deg); }
.mobile-nav { padding: 12px 28px 24px; border-top: 1px solid var(--line); background: #fff; }
.mobile-nav a { display: block; padding: 12px 0; font-size: 16px; }
/* Main stage: procedural 3D, soft depth and scroll parallax */
.hero { display: grid; grid-template-columns: 47% 53%; align-items: center; min-height: min(820px,calc(100svh - 94px)); padding-top: 55px; padding-bottom: 70px; position: relative; }
.hero-copy { z-index: 2; padding-block: 16px; }
.hero h1 { line-height: 1.055; letter-spacing: -.065em; }
.hero .eyebrow { font-size: 10px; margin-bottom: 28px; color: #42746e; }
.hero-subtitle { margin-top: 30px; color: var(--ink); font-size: 22px; line-height: 1.45; letter-spacing: -.02em; }
.hero-description { font-size: 16px; max-width: 405px; margin-top: 17px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 32px; }
.hero-actions .text-link { font-size: 12px; }
.hero-footnote { margin-top: 31px; display: flex; align-items: center; gap: 14px; color: #6c8285; font-size: 11px; }
.color-spectrum { display: inline-flex; gap: 3px; }
.color-spectrum i { height: 14px; width: 4px; border-radius: 5px; background: #0785ef; }
.color-spectrum i:nth-child(2) { background: #00b2b5; }.color-spectrum i:nth-child(3) { background: #7850d1; }.color-spectrum i:nth-child(4) { background: #ea832a; }.color-spectrum i:nth-child(5) { background: #64ae35; }.color-spectrum i:nth-child(6) { background: #d33888; }.color-spectrum i:nth-child(7) { background: #5b63d0; }
.hero-visual { min-width: 0; position: relative; height: 626px; margin-right: -30px; margin-left: -30px; }
.hero-orbit { position: absolute; inset: 40px -10px 30px; border-radius: 50%; background: radial-gradient(ellipse,#d6f3ec66 0%,#dfeff944 45%,transparent 70%); border: 1px solid #d8e9ed4d; transform: rotate(-10deg); }
.hero-orbit::after { content: ''; position: absolute; inset: 50px -10px; border: 1px dashed #bfdcdf60; border-radius: 50%; transform: rotate(35deg); }
.scene-host { position: absolute; inset: 0 -30px 0 -30px; }
#network-canvas { width: 100%; height: 100%; display: block; }
.scene-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; z-index: 1; }
.scene-fallback img { width: 180px; }
.scene-fallback span { color: #5d8c94; font-size: 13px; }
.scene-host.is-ready .scene-fallback { display: none; }
.floating-note { position: absolute; background: #ffffffee; box-shadow: 0 15px 45px #3659600a; border: 1px solid #deebef; border-radius: 12px; padding: 14px 19px; display: flex; gap: 5px; flex-direction: column; font-size: 12px; z-index: 3; pointer-events: none; animation: float-note 6s ease-in-out infinite; }
.floating-note strong { font-size: 12px; font-weight: 500; }.floating-note .micro { font-size: 8px; color: #769094; }
.note-top { right: 30px; top: 23px; transform: rotate(3deg); }
.note-left { left: 2px; bottom: 111px; flex-direction: row; align-items: center; gap: 9px; animation-delay: -2s; }
.note-bottom { right: 8px; bottom: 49px; animation-delay: -4s; }
.status-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #75b83b; box-shadow: 0 0 0 4px #ecf6e8; }
.hero-visual-caption { position: absolute; inset: auto 27px 0; display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .14em; color: #688590; }
@keyframes float-note { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.hero-in { animation: enter-up 1.15s var(--ease) both; }.hero-in:nth-child(2) { animation-delay:.10s }.hero-in:nth-child(3){animation-delay:.18s}.hero-in:nth-child(4){animation-delay:.25s}.hero-in:nth-child(5){animation-delay:.32s}.hero-in:nth-child(6){animation-delay:.39s}
@keyframes enter-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.trust-strip { border-block: 1px solid var(--line); background: #f1f7f9; }
.trust-strip>.wrap { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding-block: 30px; }
.trust-strip>.wrap>div { display: flex; align-items: center; gap: 16px; }
.trust-number { font-size: 21px; white-space: nowrap; font-weight: 560; letter-spacing: -.04em; color: #2f7d87; }
.trust-strip p { display: flex; flex-direction: column; font-size: 10px; gap: 3px; line-height: 1.7; }.trust-strip strong { font-size: 12px; color: #25465a; font-weight: 600; }
.brand-strip { display: grid; grid-template-columns: repeat(7,1fr); align-items: center; gap: 40px; padding-block: 42px; border-bottom: 1px solid var(--line); }
.brand-strip a { min-width:0; height:62px; display:flex; align-items:center; justify-content:center; transition: transform .3s; }.brand-strip a:hover { transform: translateY(-4px); }.brand-strip img { max-height:60px; object-fit:contain; max-width:100%; }
/* Product catalogue */
.filters { display:flex; align-items:center; gap:8px; margin-bottom:30px; flex-wrap:wrap; }
.filters button, .architecture-toolbar button, .diagram-tabs button { padding:12px 19px; border-radius:50px; color:#566e7c; font-size:12px; font-weight:550; background:transparent; border:1px solid transparent; transition: background .25s, color .25s, border-color .25s; }
.filters button:hover, .architecture-toolbar button:hover { background:#eaf2f5; }
.filters button.active, .architecture-toolbar button.active { background:var(--ink); color:white; }
.filters button span { font-size:9px; margin-left:8px; opacity:.7; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.product-card { min-width:0; padding:27px 25px 0; border:1px solid var(--line); background:var(--white); border-radius:20px; display:flex; flex-direction:column; position:relative; overflow:hidden; transition: border-color .3s, box-shadow .5s var(--ease), transform .5s var(--ease); }
.product-card:hover { box-shadow:0 16px 45px #20455c0c; border-color:color-mix(in srgb,var(--accent),white 55%); transform:translateY(-6px); }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }.card-top .micro { font-size:8px; letter-spacing:.07em; }
.card-color { width:6px; height:6px; border-radius:50%; flex-shrink:0; background:var(--accent); }
.card-logo { height:134px; display:flex; align-items:center; padding-block:22px; }.card-logo img { max-width:100%; max-height:82px; width:auto; object-fit:contain; }
.product-card h3 { font-size:22px; letter-spacing:-.035em; line-height:1.25; min-height:55px; }
.product-card>p { font-size:13px; line-height:1.8; margin-top:14px; margin-bottom:24px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; }.tags span { background:var(--soft,#eff5f6); color:var(--accent,#416877); border-radius:5px; padding:4px 7px; font-size:9px; font-weight:550; }
.product-card .tags { margin-top:auto; padding-bottom:25px; }
.card-link { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #eaf0f3; padding-block:19px; font-size:12px; font-weight:600; margin-top:auto; }.card-link span { transition:transform .3s; }.card-link:hover { color:var(--accent); }.card-link:hover span { transform:translate(3px,-3px); }
.suite-card { padding:30px 28px; background:linear-gradient(140deg,#e6f3ed,#e7f3f9); border-radius:20px; display:flex; flex-direction:column; justify-content:space-between; min-height:395px; }.suite-card h3 { font-size:25px; line-height:1.25; margin:25px 0 20px; color:#287267; }.suite-card p { font-size:13px; line-height:1.9; color:#5d7b7d; margin-bottom:25px; }.suite-card .text-link { font-size:12px; }
/* Native scroll narrative: sticky on desktop, normal document flow on small screens. */
.dark-section { color:#edf6f9; background:#102f40; }.dark-section p { color:#a7bdc8; }.dark-section .eyebrow { color:#82c9c7; }
.journey { padding-block:var(--section); position:relative; overflow:clip; background:radial-gradient(ellipse at 15% 30%,#1a4b5666,transparent 55%),#102f40; }
.journey .section-head { margin-bottom:80px; }.journey .intro { color:#9fb8c3; }
.journey-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:92px; align-items:start; }
.journey-sticky { position:sticky; top:126px; }
.journey-screen { background:#173c4c; border:1px solid #345766; border-radius:22px; overflow:hidden; position:relative; box-shadow:0 30px 100px #061b3130; }
.window-bar { padding:18px 24px; display:flex; justify-content:space-between; align-items:center; gap:15px; font-size:9px; font-weight:550; letter-spacing:.12em; border-bottom:1px solid #345461; }
.journey-screen .window-bar .micro { color:#83a4ad; font-size:8px; }.journey-art { position:relative; height:300px; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 65%,#b9e8de1c,transparent 65%); }
.journey-art>img { width:82%; height:95%; object-fit:contain; z-index:2; position:relative; transition:opacity .22s, transform .55s var(--ease); filter:drop-shadow(0 20px 20px #071a2230); }.journey-art>img.switching { opacity:0; transform:translateY(12px) scale(.95); }
.journey-halo { position:absolute; width:65%; height:65%; border-radius:50%; border:1px dashed #5babb939; transform:rotate(-22deg); }
.journey-circuit { position:absolute; inset:0; width:100%; height:100%; fill:none; pointer-events:none; }.journey-circuit path { stroke:#5ca9b46b; stroke-width:1.3; stroke-dasharray:5 12; animation:dash-flow 14s linear infinite; }
.journey-art-tag { position:absolute; bottom:11px; left:24px; font-size:10px; letter-spacing:.04em; color:#add6da; }
.journey-output { padding:22px 25px; border-block:1px solid #315464; background:#ffffff04; }.journey-output .micro { color:#84a7b2; font-size:8px; }.journey-output p { font-size:16px; color:#d7eef0; margin-top:7px; font-weight:550; }
.journey-control { padding:17px 19px 19px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.journey-control button { color:#91acb9; padding:9px 8px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-size:9px; line-height:1.5; text-align:left; background:transparent; border:1px solid #2d5362; border-radius:7px; transition:color .3s, background .3s; }
.journey-control button span { font-size:10px; color:#7396a4; }.journey-control button.active { border-color:#6eada6; background:#6dcbb413; color:#d8f2e9; }.journey-control button.active span { color:#95d1c7; }
.journey-progress { height:3px; background:#244b59; }.journey-progress span { display:block; height:100%; width:100%; transform:scaleX(.16); transform-origin:left; background:linear-gradient(90deg,#8ab343,#35b4c6); transition:transform .4s; }
.journey-sticky>.visual-note { padding:16px 10px 0; color:#83a1ac; font-size:10px; }
.journey-steps { position:relative; }.journey-steps::before { content:''; position:absolute; width:1px; left:19px; inset-block:12% 12%; background:#41636f; }
.journey-step { min-height:430px; display:flex; align-items:center; gap:28px; padding:62px 0; opacity:.52; transition:opacity .45s; position:relative; }.journey-step.active { opacity:1; }.journey-step:first-child { padding-top:20px; }
.step-index { display:flex; align-items:center; justify-content:center; align-self:flex-start; margin-top:8px; flex-shrink:0; width:39px; height:39px; color:#8aa8b4; border:1px solid #466574; border-radius:50%; background:#153745; font-size:11px; position:relative; z-index:1; transition:color .4s, background .4s; }
.journey-step.active .step-index { color:#e4f5ea; border-color:#78bbaa; background:#287064; }
.journey-step .eyebrow { font-size:10px; margin-bottom:18px; }.journey-step h3 { font-size:34px; letter-spacing:-.035em; line-height:1.25; }.journey-step p:not(.eyebrow) { font-size:15px; line-height:1.9; margin-top:20px; }
.step-app { margin-top:25px; display:inline-block; color:#91d1c0; font-size:11px; padding-bottom:6px; border-bottom:1px solid #6f9a954d; }
/* NMS: explanatory, user-triggered simulation; never connected to equipment. */
.nms-layout { display:grid; grid-template-columns:.8fr 1.2fr; align-items:start; gap:95px; }
.nms-copy { padding-top:25px; }.nms-copy h3 { font-size:32px; line-height:1.2; }.nms-copy>p:not(.eyebrow) { margin-top:23px; font-size:15px; line-height:1.9; }.nms-copy>.text-link { margin-top:30px; }.nms-copy>p.fineprint { font-size:12px; }
.nms-points { margin-top:28px; }.nms-points>div { padding:18px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:5px; }.nms-points strong { font-size:14px; font-weight:650; }.nms-points span { font-size:13px; color:var(--muted); }
.nms-console { background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 16px 60px #10354d07; overflow:hidden; }.nms-console .window-bar { color:#6d8592; border-bottom:1px solid var(--line); background:#f4f8fb; }.demo-badge { color:#527680; background:#e9f2f1; padding:3px 7px; border-radius:4px; font-size:8px; letter-spacing:.06em; }
.console-title { padding:27px 29px 16px; }.console-title h3 { font-size:25px; margin-top:6px; }.console-title p { font-size:11px; margin-top:9px; }
.nms-stages { padding:8px 29px; }.nms-stage { padding:18px 0; display:grid; grid-template-columns:33px 1fr auto; gap:16px; align-items:start; border-top:1px solid #e7eef2; transition: opacity .3s; }.nms-number { width:29px; height:29px; display:flex; align-items:center; justify-content:center; border:1px solid #d5e2e9; border-radius:8px; font-size:10px; color:#7e919c; transition:background .3s; }
.nms-stage strong { font-size:13px; font-weight:620; }.nms-stage p { font-size:11px; line-height:1.8; margin-top:4px; }.nms-state { font-size:9px; color:#7e909a; white-space:nowrap; padding-top:5px; }.nms-stage.running .nms-number { color:#096ca5; background:#e4f5fe; border-color:#93c9df; }.nms-stage.running .nms-state { color:#008aa5; }.nms-stage.done .nms-number { color:#277458; background:#e7f6ed; border-color:#b6dcca; }.nms-stage.done .nms-state { color:#277458; }
.console-bottom { padding:24px 29px 28px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }.console-bottom .button { font-size:12px; padding:13px 17px; gap:18px; }.console-bottom>span { font-size:10px; color:#6d8d87; }
/* Four zones; connectors are drawn only for the allowed paths. */
.architecture-section { background:#f0f5f8; border-block:1px solid #e2ebf0; }
.architecture-toolbar { display:flex; justify-content:center; gap:8px; margin-bottom:30px; flex-wrap:wrap; }
.architecture-board { background:#fff; border:1px solid #dce6ed; border-radius:24px; padding:36px; box-shadow:0 24px 80px #203d4c05; }
.architecture-diagram { position:relative; padding:0; }
.zone-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px 96px; position:relative; z-index:2; }.zone { padding:25px 28px; border-radius:16px; text-align:left; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--zone-line,#cddfee); background:var(--zone-bg,#f6faff); transition:opacity .35s, transform .4s var(--ease), box-shadow .4s; min-width:0; }.zone:hover { transform:translateY(-4px); box-shadow:0 10px 20px #153e4710; }.zone[aria-pressed=true] { outline:2px solid #4a98b6; outline-offset:4px; }.zone.dimmed { opacity:.35; }
.dmz1 { --zone-bg:#f4f9fe; --zone-line:#c9ddf0; }.dmz2 { --zone-bg:#f0fafa; --zone-line:#c4e5e2; }.dmz3 { --zone-bg:#f5f4fb; --zone-line:#ddd9ef; }.dmz4 { --zone-bg:#f5faf2; --zone-line:#d9e6ca; }
.zone-audience { font-size:9px; color:#728593; letter-spacing:.02em; margin-bottom:17px; }.zone-number { font-size:26px; font-weight:600; letter-spacing:-.04em; display:flex; align-items:center; gap:14px; color:#317f97; }.zone-number small { font-size:10px; font-weight:500; letter-spacing:0; color:#748997; }.zone>strong { font-size:18px; font-weight:610; letter-spacing:-.02em; margin-top:10px; }.zone-desc { font-size:12px; color:#6d8390; line-height:1.85; margin-top:11px; }.zone-more { font-size:10px; font-weight:600; color:#5c8193; margin-top:18px; display:flex; justify-content:space-between; width:100%; }
.connector-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:1; }.connector-base { fill:none; stroke:#c6dce4; stroke-width:1.5; }.connector-flow { fill:none; stroke:#3799b3; stroke-width:2; stroke-dasharray:4 12; animation:dash-flow 5s linear infinite; opacity:.85; }.connector-end { fill:#3799b3; }.connector-line.dimmed { opacity:.16; }.connector-line { transition:opacity .4s; }
@keyframes dash-flow { to { stroke-dashoffset:-160; } }
.zone-detail { margin-top:33px; border-top:1px solid var(--line); padding:28px 10px 2px; display:grid; grid-template-columns:.7fr 1.3fr; gap:8px 42px; min-height:145px; }.zone-detail .eyebrow { grid-column:1/-1; margin-bottom:0; font-size:9px; }.zone-detail h3 { font-size:23px; line-height:1.25; }.zone-detail p { font-size:12px; line-height:1.9; }
.security-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:54px; }.security-grid article { padding:0 15px 0 0; }.security-grid h3 { font-size:25px; margin-top:13px; }.security-grid p { font-size:14px; line-height:1.9; margin-top:17px; }
.standards-panel { background:#fff; padding:45px; border:1px solid #dfe7ed; border-radius:22px; margin-top:68px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }.standards-panel h3 { font-size:33px; }.standards-panel p:not(.eyebrow) { margin-top:21px; font-size:14px; line-height:1.9; }.standards-panel .eyebrow { font-size:9px; }
.domain-stack { display:flex; flex-direction:column; gap:11px; perspective:1000px; }.domain-stack>div { padding:17px 19px; border:1px solid #dfebef; border-radius:10px; background:linear-gradient(110deg,#f2f8fa,#fafcfc); display:flex; flex-direction:column; gap:6px; transition:transform .4s var(--ease), box-shadow .4s; }.domain-stack>div:hover { transform:translateX(-8px) rotateY(-3deg); box-shadow:10px 8px 22px #1d4d5010; }.domain-stack span { font-size:8px; letter-spacing:.12em; color:#5c8993; }.domain-stack strong { font-size:12px; font-weight:550; }
.standards-note { border-top:1px solid #d9e3ea; margin-top:34px; padding-top:21px; font-size:12px; color:#788c97; }.standards-note summary { cursor:pointer; width:fit-content; color:#4d6b7a; padding:8px 0; }.standards-note p { max-width:1040px; margin-top:18px; line-height:1.9; }.reference-links { display:flex; gap:25px; flex-wrap:wrap; margin-top:18px; }.reference-links a { color:#37788e; text-decoration:underline; text-underline-offset:3px; }
/* Interactive functional diagrams */
.diagram-explorer { background:white; border:1px solid var(--line); border-radius:24px; overflow:hidden; }
.diagram-tabs { display:flex; gap:15px; border-bottom:1px solid var(--line); padding:20px 32px; background:#f7fafb; }.diagram-tabs button { border-radius:9px; }.diagram-tabs button[aria-selected=true] { color:#085e80; border-color:#cfe1e9; background:#fff; box-shadow:0 3px 10px #1b516405; }
.diagram-panel { padding:38px 40px 28px; }.diagram-panel-heading { display:flex; justify-content:space-between; align-items:start; gap:60px; }.diagram-panel-heading h3 { font-size:29px; max-width:330px; }.diagram-panel-heading p { max-width:520px; font-size:13px; line-height:1.9; }
.flow-diagram { position:relative; padding:42px 0 35px; }.flow-nodes { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:72px 74px; }
.flow-node { min-width:0; min-height:132px; background:#fbfdfe; border:1px solid #d6e5ed; border-radius:14px; padding:22px 20px 18px; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; box-shadow:0 8px 25px #0f385806; transition:transform .4s, box-shadow .4s; }.flow-node:hover { transform:translateY(-4px); box-shadow:0 16px 28px #0f385811; }.flow-node img { height:56px; max-width:165px; object-fit:contain; margin-bottom:8px; }.node-wordmark { font-size:20px; font-weight:600; letter-spacing:-.03em; color:#2a5c70; }.flow-node p { font-size:11px; line-height:1.6; margin-top:6px; color:#6c818e; }.node-title { font-size:0; }
.diagram-panel>.visual-note { padding-top:12px; font-size:11px; }
/* Contact: local brief or configured email/backend. */
.contact-section { background:linear-gradient(120deg,#eaf4ee,#e7f1f8); border-top:1px solid #dfe9e7; }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:120px; align-items:start; }
.contact-copy { padding-top:40px; }.contact-copy h2 { font-size:clamp(48px,4.8vw,68px); line-height:1.1; letter-spacing:-.055em; }.contact-copy h2 span { color:#2e958c; }.contact-copy>p:not(.eyebrow) { font-size:17px; line-height:1.85; max-width:360px; margin-top:30px; }
.contact-promise { display:grid; grid-template-columns:27px 1fr; gap:22px 15px; margin-top:44px; align-items:center; }.contact-promise span { font-size:10px; color:#589189; }.contact-promise p { color:#45687a; font-size:13px; }
.contact-form { padding:39px; border:1px solid #d7e6e9; border-radius:23px; background:#ffffffec; box-shadow:0 22px 70px #1e4a4607; }.contact-form h3 { font-size:28px; margin-top:10px; }.form-help { font-size:13px; margin-top:12px; margin-bottom:29px; }
.contact-form label { display:flex; flex-direction:column; gap:9px; font-size:12px; font-weight:550; margin-bottom:21px; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.contact-form input:not([type=checkbox]),.contact-form textarea { width:100%; border:1px solid #dce6eb; background:#fcfdfe; border-radius:8px; padding:12px 13px; font-size:13px; color:var(--ink); outline-offset:3px; }.contact-form input::placeholder, .contact-form textarea::placeholder { color:#9aa7af; font-weight:400; }.contact-form textarea { resize:vertical; min-height:100px; }.contact-form fieldset { margin-bottom:23px; }.contact-form legend { font-size:12px; font-weight:550; margin-bottom:12px; }.choices { display:flex; gap:7px; flex-wrap:wrap; }.contact-form .choice { position:relative; display:inline-block; margin:0; cursor:pointer; }.choice input { position:absolute; width:1px; height:1px; opacity:0; }.choice span { display:block; padding:8px 11px; border:1px solid #dce6eb; border-radius:6px; font-size:10px; color:#6c818d; background:#fcfefe; transition:background .2s; }.choice input:checked+span { color:#126e75; background:#e9f6f1; border-color:#8fc9b6; }.choice input:focus-visible+span { outline:3px solid var(--blue); outline-offset:2px; }.honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.contact-form>.button { width:100%; margin:3px 0 15px; }.contact-form>.fineprint { font-size:10px; line-height:1.8; }.form-result { margin-top:25px; border-top:1px solid var(--line); padding-top:25px; }.form-result h4 { font-size:18px; letter-spacing:-.02em; }.form-result p { font-size:12px; margin:10px 0 16px; }.form-result textarea { font-size:11px; font-family:var(--font); }.result-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:13px; }.result-actions .button { font-size:11px; padding:10px 15px; }
/* Detailed product pages and matching dialog */
.product-page { padding-top:40px; }.breadcrumb { display:inline-block; font-size:11px; color:#778d9a; margin-bottom:30px; }
.product-detail-hero { padding:45px 0 70px; display:grid; grid-template-columns:1.13fr .87fr; gap:60px; align-items:center; }.product-detail-hero .eyebrow { color:var(--accent); }.detail-logo { min-height:100px; height:110px; max-width:330px; display:flex; align-items:center; margin-bottom:30px; }.detail-logo img { max-height:100%; max-width:100%; object-fit:contain; }.product-detail-hero h1 { font-size:clamp(40px,4vw,62px); line-height:1.12; }.product-detail-hero p:not(.eyebrow) { font-size:16px; margin-top:27px; line-height:1.9; }.product-detail-hero .tags { margin-top:25px; }.product-detail-hero .button { margin-top:30px; font-size:13px; }.detail-art { padding:25px; background:radial-gradient(ellipse,var(--soft),transparent 70%); border-radius:40%; }.detail-art img { width:100%; max-height:460px; object-fit:contain; animation:float-note 8s ease-in-out infinite; }.detail-art figcaption { font-size:9px; color:var(--accent); letter-spacing:.18em; text-align:center; margin-top:25px; }
.detail-section { padding-block:75px; border-top:1px solid var(--line); }.detail-section .section-head { margin-bottom:38px; }.detail-section h2 { font-size:43px; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }.feature-card { border:1px solid var(--line); border-radius:16px; padding:30px; background:white; }.feature-card>.micro { color:var(--accent); }.feature-card h3 { font-size:22px; line-height:1.3; margin-top:20px; }.feature-card p { font-size:13px; line-height:1.95; margin-top:16px; }
.process-flow { display:grid; grid-template-columns:repeat(5,1fr); margin-top:43px; gap:24px; position:relative; }.process-flow::before { content:''; position:absolute; top:21px; height:1px; left:0; right:20px; background:var(--line); }.process-step { min-width:0; position:relative; display:flex; flex-direction:column; align-items:flex-start; }.process-number { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--soft); border:1px solid color-mix(in srgb,var(--accent),white 78%); color:var(--accent); font-size:12px; position:relative; z-index:1; }.process-step strong { font-size:18px; margin-top:23px; letter-spacing:-.02em; }.process-step small { font-size:11px; color:var(--muted); margin-top:8px; line-height:1.8; }
.io-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:45px; }.io-grid>div { background:#f0f5f8; border:1px solid #e1e9ee; border-radius:12px; padding:24px; }.io-grid p { font-size:13px; margin-top:12px; line-height:1.9; }
.detail-case { padding:46px; background:var(--soft); border-radius:23px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; margin-block:18px 60px; }.detail-case h2 { font-size:34px; line-height:1.2; }.detail-case .eyebrow { font-size:9px; color:var(--accent); }.detail-case>p { font-size:15px; line-height:1.9; }.detail-linktext { max-width:780px; font-size:15px; line-height:1.9; margin-top:26px; }.related-grid { margin-top:35px; display:grid; grid-template-columns:repeat(4,1fr); gap:21px; }.related-product { border:1px solid var(--line); border-radius:13px; padding:22px; background:white; display:flex; flex-direction:column; gap:16px; transition:transform .3s; }.related-product:hover { transform:translateY(-4px); }.related-product img { height:60px; max-width:100%; object-fit:contain; object-position:left; }.related-product span { font-size:11px; color:var(--muted); }.related-product span:last-child { color:var(--accent); align-self:end; }
.oxygen-families { background:#fff8ef; border:1px solid #f1e0cb; border-radius:16px; padding:30px; margin-top:30px; }.oxygen-families .eyebrow { color:#a97339; margin-bottom:16px; }.oxygen-families>div { display:flex; gap:10px; flex-wrap:wrap; }.oxygen-families span { padding:9px 12px; background:white; border:1px solid #edddcd; border-radius:6px; font-size:12px; color:#8e6238; }.oxygen-families p:last-child { font-size:12px; margin-top:18px; }
.page-cta { padding:20px 0 90px; display:flex; align-items:center; justify-content:space-between; gap:30px; }.page-cta h2 { font-size:34px; }
.product-dialog { width:min(1170px,calc(100vw - 48px)); max-height:calc(100dvh - 44px); height:calc(100dvh - 44px); border:1px solid #dbe5eb; border-radius:23px; padding:0; background:var(--paper); color:var(--ink); overflow:auto; box-shadow:0 30px 140px #031c4560; }.product-dialog::backdrop,.legal-dialog::backdrop { background:#0b233bd0; backdrop-filter:blur(8px); }.dialog-bar { position:sticky; top:0; z-index:10; background:#ffffffef; backdrop-filter:blur(20px); display:flex; justify-content:space-between; align-items:center; padding:17px 32px; border-bottom:1px solid var(--line); }.dialog-bar>a { font-size:11px; color:#4d7b8d; }.dialog-close { background:#edf3f6; padding:10px 15px; border-radius:8px; font-size:12px; color:#496371; }.dialog-close:hover { background:#e0edf0; }
#product-dialog-content { padding:12px 50px 30px; }.product-dialog .product-detail-hero { gap:35px; }.product-dialog .product-detail-hero h1 { font-size:46px; }.product-dialog .product-detail-hero p:not(.eyebrow) { font-size:14px; }.product-dialog .detail-logo { height:85px; }.product-dialog .detail-section { padding-block:55px; }.product-dialog .detail-section h2 { font-size:36px; }.product-dialog .feature-grid { grid-template-columns:repeat(2,1fr); }.product-dialog .detail-section .intro { font-size:14px; }.product-dialog .process-step strong { font-size:16px; }.product-dialog .related-product { padding:17px; }
.legal-dialog { border:1px solid var(--line); border-radius:20px; color:var(--ink); background:white; padding:36px; width:min(610px,calc(100% - 30px)); }.legal-dialog .dialog-close { float:right; margin-bottom:25px; }.legal-dialog h2 { clear:both; font-size:31px; }.legal-dialog p { margin-top:21px; font-size:14px; line-height:1.9; }
body.dialog-open { overflow:hidden; }.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#123f4d; color:white; border:1px solid #80b9b0; padding:13px 23px; border-radius:11px; z-index:1000; font-size:13px; box-shadow:0 10px 40px #0a244929; }
/* Footer */
.site-footer { padding:66px 0 25px; border-top:1px solid #e0e9ee; background:#f8fbfc; }
.footer-main { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:50px; }.footer-brand img { width:200px; height:auto; }.footer-brand p { font-size:16px; margin-top:25px; line-height:1.7; }.footer-brand>span { display:block; font-size:8px; letter-spacing:.13em; margin-top:23px; color:#71909a; }.footer-main h3 { font-size:12px; font-weight:650; letter-spacing:0; margin-bottom:23px; }.footer-main>div:not(.footer-brand)>a { display:block; font-size:12px; color:#6d8290; margin-bottom:11px; }.footer-main>div:not(.footer-brand)>a:hover { color:var(--teal); }
.footer-bottom { border-top:1px solid var(--line); padding-top:24px; margin-top:50px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:10px; color:#78919e; }.footer-bottom button { padding:0; background:transparent; font-size:10px; color:#648391; }
/* Animation system: enhancement only. Content remains readable without JavaScript. */
.reveal { transition:opacity .85s var(--ease), translate .85s var(--ease); transition-delay:var(--reveal-delay,0ms); }
.reveal.is-pending { opacity:0; translate:0 30px; }
.reveal.in-view { opacity:1; translate:0 0; }
.motion-paused *, .motion-paused *::before,.motion-paused *::after { animation-play-state:paused !important; }
.motion-paused .reveal.is-pending { opacity:1; translate:0 0; }
.motion-paused .reveal { transition:none; }.motion-paused .hero-in { animation:none; opacity:1; transform:none; }.motion-paused .journey-art>img { transition:none; }
/* Responsive layouts */
@media (min-width:1700px) { :root { --max:1450px; }.hero { grid-template-columns:48% 52%; }.hero h1 { font-size:92px; }.hero-visual { height:680px; }.hero { min-height:870px; } }
@media (max-width:1270px) { .wrap { width:calc(100% - 80px); }.desktop-nav { gap:18px; }.desktop-nav a { font-size:11px; }.brand,.brand img { width:158px; }.nav-shell { gap:20px; }.nav-actions .small { font-size:10px; }.hero-visual { margin-right:-22px; }.hero h1 { font-size:67px; }.hero-actions { gap:18px; }.hero-actions .button { padding:15px 19px; font-size:12px; }.hero-actions .text-link { font-size:10px; }.hero-visual { height:580px; }.product-card { padding:24px 20px 0; }.product-card h3 { font-size:21px; }.product-grid { gap:18px; }.suite-card { padding:26px 22px; }.suite-card h3 { font-size:24px; }.journey-layout { gap:60px; }.contact-layout { gap:75px; }.nms-layout { gap:64px; }.trust-strip>.wrap { gap:18px; }.trust-strip>.wrap>div { gap:11px; }.trust-number { font-size:19px; }.trust-strip strong { font-size:10px; }.trust-strip p { font-size:9px; }.standards-panel { gap:55px; } }
@media (max-width:1080px) { .desktop-nav { display:none; }.menu-toggle { display:block; }.nav-actions .small { font-size:12px; }.hero { padding-top:30px; min-height:740px; }.hero h1 { font-size:58px; }.hero-subtitle { font-size:20px; }.hero .eyebrow { font-size:8px; }.hero-description { font-size:14px; }.hero-visual { height:535px; margin-left:-35px; }.scene-host { inset:0 -20px; }.note-left { bottom:65px; left:0; font-size:9px; padding:12px; }.note-bottom { right:0; bottom:30px; padding:12px; }.note-top { top:25px; right:0; }.hero-visual-caption { font-size:6px; inset-inline:0; bottom:-10px; }.floating-note .micro { font-size:7px; }.floating-note strong { font-size:10px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:15px; }.brand-strip { gap:23px; padding-block:30px; }.trust-strip>.wrap { grid-template-columns:repeat(2,1fr); gap:25px 35px; }.trust-number { width:68px; font-size:23px; }.trust-strip strong { font-size:12px; }.trust-strip p { font-size:10px; }.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }.product-card { padding:28px 28px 0; }.product-card h3 { min-height:0; font-size:25px; }.product-card>p { font-size:14px; }.card-logo { height:135px; }.card-logo img { max-width:240px; }.product-card .tags { margin-top:12px; }.suite-card { min-height:360px; padding:32px; }.suite-card h3 { font-size:33px; }.suite-card p { font-size:14px; }.section-head { gap:45px; }.section-head .intro { flex:0 1 320px; font-size:15px; }.journey-layout { gap:45px; grid-template-columns:1fr 1fr; }.journey-step h3 { font-size:29px; }.journey-art { height:260px; }.journey-control { padding:14px; }.journey-control button { font-size:8px; }.journey-step { gap:20px; min-height:410px; }.journey-step p:not(.eyebrow) { font-size:13px; }.journey-step .eyebrow { font-size:8px; }.nms-layout { gap:40px; }.nms-copy h3 { font-size:28px; }.nms-copy>p:not(.eyebrow) { font-size:13px; }.nms-stages { padding-inline:22px; }.nms-stage { grid-template-columns:30px 1fr; gap:10px; }.nms-state { grid-column:2; padding-top:0; }.zone-grid { gap:54px 60px; }.zone { padding:22px; }.architecture-board { padding:28px; }.zone-detail { gap:8px 30px; }.standards-panel { padding:33px; gap:40px; }.security-grid { gap:27px; }.diagram-panel-heading { gap:35px; }.flow-nodes { gap:58px 40px; }.flow-node { padding:20px 14px; }.flow-node img { max-width:130px; }.node-wordmark { font-size:17px; }.diagram-tabs { gap:8px; padding-inline:22px; }.diagram-tabs button { font-size:11px; padding:10px 14px; }.contact-layout { gap:40px; }.contact-form { padding:30px; }.contact-copy h2 { font-size:54px; }.contact-copy>p:not(.eyebrow) { font-size:15px; }.footer-main { gap:30px; }.footer-brand img { width:165px; }.footer-brand p { font-size:14px; }.feature-grid { grid-template-columns:repeat(2,1fr); }.product-detail-hero { gap:40px; }.detail-logo { max-width:270px; }.product-detail-hero h1 { font-size:46px; }.detail-case { gap:45px; padding:35px; }.detail-case h2 { font-size:29px; }.related-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:800px) { :root { --section:84px; }.wrap { width:calc(100% - 48px); }.nav-shell { height:78px; }.brand,.brand img { width:159px; }.hero { grid-template-columns:1fr; padding-top:42px; padding-bottom:35px; min-height:auto; gap:0; }.hero-copy { max-width:610px; padding-bottom:0; }.hero h1 { font-size:clamp(58px,9vw,75px); }.hero h1 br:first-child { display:none; }.hero .eyebrow { font-size:9px; margin-bottom:24px; }.hero-subtitle { margin-top:23px; font-size:22px; }.hero-subtitle br { display:none; }.hero-description { font-size:15px; max-width:460px; }.hero-actions { flex-direction:row; align-items:center; margin-top:26px; gap:25px; }.hero-actions .text-link { font-size:12px; }.hero-footnote { margin-top:23px; }.hero-visual { height:480px; margin:20px 0 0; }.scene-host { inset:0; }.hero-orbit { inset:20px 15px; }.note-top { right:8%; top:12px; }.note-left { left:4%; bottom:92px; }.note-bottom { right:4%; bottom:47px; }.hero-visual-caption { font-size:7px; inset-inline:10px; bottom:0; }.trust-strip>.wrap { padding-block:28px; }.brand-strip { gap:20px; grid-template-columns:repeat(4,1fr); padding-block:35px; }.brand-strip a { height:54px; }.brand-strip img { max-height:52px; }.section-head { display:block; margin-bottom:35px; }.section-head .intro { margin-top:25px; max-width:570px; font-size:15px; }.section-head h2 { font-size:42px; }.section-head .eyebrow { margin-bottom:18px; }.filters { margin-bottom:24px; gap:5px; }.filters button { padding:10px 15px; font-size:10px; }.product-card h3 { font-size:23px; }.product-card>p { font-size:13px; }.suite-card h3 { font-size:29px; }.section-tail { align-items:start; flex-direction:column; gap:23px; }.section-tail p { font-size:13px; }.journey .section-head { margin-bottom:45px; }.journey-layout { gap:36px; grid-template-columns:.95fr 1.05fr; }.journey-sticky { top:102px; }.journey-art { height:205px; }.window-bar { padding:14px 17px; font-size:8px; }.journey-screen .window-bar .micro { display:none; }.journey-output { padding:18px; }.journey-output p { font-size:13px; }.journey-control { grid-template-columns:repeat(2,1fr); gap:6px; padding:12px; }.journey-step { min-height:375px; gap:13px; padding-block:38px; }.journey-step h3 { font-size:25px; }.journey-step p:not(.eyebrow) { font-size:12px; }.step-index { width:29px; height:29px; font-size:9px; }.journey-steps::before { left:14px; }.step-app { font-size:9px; margin-top:16px; }.journey-art-tag { left:18px; font-size:8px; }.journey-sticky>.visual-note { font-size:9px; }.nms-layout { grid-template-columns:1fr; gap:38px; }.nms-copy { padding-top:0; }.nms-copy h3 { font-size:32px; }.nms-copy>p:not(.eyebrow) { font-size:14px; }.nms-points { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.nms-points strong { font-size:13px; }.nms-points span { font-size:11px; }.nms-stage { grid-template-columns:33px 1fr auto; gap:16px; }.nms-state { grid-column:auto; }.zone-grid { gap:46px 44px; }.architecture-board { padding:22px; }.zone { padding:22px 18px; }.zone-number { flex-wrap:wrap; gap:5px 12px; font-size:24px; }.zone-number small { font-size:9px; }.zone>strong { font-size:17px; }.zone-desc { font-size:11px; }.zone-audience { font-size:8px; }.zone-detail { display:block; padding-top:22px; }.zone-detail .eyebrow { margin-bottom:12px; }.zone-detail h3 { font-size:23px; }.zone-detail p { margin-top:14px; }.security-grid { gap:22px; margin-top:35px; }.security-grid h3 { font-size:22px; }.security-grid p { font-size:12px; }.standards-panel { padding:32px; gap:30px; }.standards-panel h3 { font-size:29px; }.standards-panel p:not(.eyebrow) { font-size:12px; }.standards-panel .eyebrow { font-size:8px; }.domain-stack strong { font-size:10px; }.diagram-panel { padding:28px 25px 24px; }.diagram-panel-heading { display:block; }.diagram-panel-heading h3 { font-size:28px; max-width:none; }.diagram-panel-heading p { margin-top:18px; max-width:none; }.flow-nodes { gap:47px 32px; }.flow-node { min-height:121px; padding:17px 10px; }.flow-node img { height:45px; max-width:108px; }.flow-node p { font-size:10px; }.node-wordmark { font-size:15px; }.contact-layout { grid-template-columns:1fr; gap:45px; }.contact-copy { padding-top:0; }.contact-copy h2 { font-size:54px; }.contact-copy>p:not(.eyebrow) { max-width:550px; }.contact-promise { grid-template-columns:27px 1fr; gap:14px; margin-top:28px; }.contact-form { padding:36px; max-width:620px; width:100%; }.contact-form label { font-size:13px; }.contact-form .choice span { font-size:11px; }.footer-main { grid-template-columns:1fr 1fr; gap:40px; }.footer-bottom { display:grid; grid-template-columns:1fr 1fr; }.footer-bottom button { text-align:left; }.product-detail-hero { grid-template-columns:1fr; gap:30px; padding-top:18px; }.product-detail-hero h1 { max-width:650px; font-size:48px; }.product-detail-hero p:not(.eyebrow) { max-width:670px; font-size:15px; }.detail-art { max-width:420px; margin:auto; }.detail-art img { max-height:340px; }.detail-art figcaption { margin-top:0; }.detail-section h2 { font-size:36px; }.detail-case { gap:25px; }.detail-case h2 { font-size:28px; }.detail-case>p { font-size:13px; }.feature-card { padding:25px; }.feature-card h3 { font-size:22px; }.process-flow { gap:14px; }.process-step strong { font-size:15px; }.process-step small { font-size:10px; }.page-cta { flex-direction:column; align-items:start; }.page-cta h2 { font-size:31px; }.product-dialog { width:calc(100vw - 24px); height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); }.dialog-bar { padding:13px 22px; }#product-dialog-content { padding:15px 28px; }.product-dialog .product-detail-hero { grid-template-columns:1fr; }.product-dialog .detail-art { display:none; }.product-dialog .feature-card { padding:23px; }.product-dialog .detail-case { grid-template-columns:1fr; }.product-dialog .detail-section h2 { font-size:33px; } }
@media (max-width:580px) { :root { --section:68px; }.wrap { width:calc(100% - 40px); }.nav-shell { height:72px; gap:14px; }.brand,.brand img { width:142px; }.nav-actions { gap:10px; }.nav-actions>.button { display:none; }.menu-toggle { width:38px; height:38px; }.menu-toggle span { left:9px; top:13px; }.menu-toggle span+span { top:22px; }.hero { padding-top:32px; padding-bottom:25px; }.hero h1 { font-size:clamp(43px,10.1vw,58px); line-height:1.10; letter-spacing:-.055em; }.hero h1 br:first-child { display:block; }.hero .eyebrow { font-size:8px; letter-spacing:.12em; margin-bottom:20px; }.hero-subtitle { font-size:19px; max-width:320px; line-height:1.5; margin-top:25px; }.hero-subtitle br { display:block; }.hero-description { font-size:14px; line-height:1.8; max-width:350px; }.hero-actions { gap:20px; flex-wrap:wrap; margin-top:25px; }.hero-actions .button { font-size:12px; padding:14px 18px; gap:16px; }.hero-actions .text-link { font-size:10px; gap:12px; }.hero-footnote { font-size:9px; gap:10px; }.hero-visual { height:345px; margin:20px -12px 0; }.scene-host { inset:0 -8px; }.hero-orbit { inset:10px; }.note-top { right:17px; top:10px; padding:9px 12px; border-radius:8px; }.note-top strong { font-size:8px; }.floating-note .micro { font-size:6px; }.note-left { left:7px; bottom:68px; padding:10px; font-size:7px; gap:7px; border-radius:8px; }.note-left .status-dot { width:4px; height:4px; box-shadow:0 0 0 3px #ecf6e8; }.note-bottom { right:13px; bottom:29px; padding:8px 11px; border-radius:8px; }.note-bottom strong { font-size:8px; }.hero-visual-caption { inset-inline:15px; font-size:5px; letter-spacing:.10em; bottom:0; }.trust-strip>.wrap { gap:23px 18px; }.trust-strip>.wrap>div { flex-direction:column; align-items:flex-start; gap:7px; }.trust-number { font-size:21px; }.trust-strip strong { font-size:11px; }.trust-strip p { font-size:9px; }.brand-strip { gap:18px 25px; grid-template-columns:repeat(3,1fr); padding-block:28px; }.brand-strip a { height:44px; }.brand-strip img { max-height:44px; }.brand-strip a:last-child { grid-column:2; }.section-head h2 { font-size:34px; line-height:1.18; }.eyebrow { font-size:9px; margin-bottom:18px; }.section-head .intro { font-size:14px; line-height:1.85; margin-top:23px; }.filters { gap:6px; }.filters button { padding:9px 11px; font-size:9px; background:#edf3f6; }.filters button span { font-size:7px; margin-left:5px; }.product-grid { grid-template-columns:1fr; gap:22px; }.product-card { padding:28px 28px 0; }.card-top .micro { font-size:9px; }.card-logo { height:133px; }.card-logo img { max-height:83px; max-width:255px; }.product-card h3 { font-size:26px; max-width:300px; }.product-card>p { font-size:14px; margin-bottom:21px; }.tags span { font-size:10px; padding:5px 8px; }.product-card .tags { padding-bottom:26px; }.card-link { padding-block:20px; font-size:13px; }.suite-card { min-height:335px; padding:30px; }.suite-card h3 { font-size:29px; }.section-tail { padding-top:27px; }.section-tail p { font-size:12px; }.section-tail .text-link { font-size:12px; }.journey .section-head { margin-bottom:35px; }.journey-layout { grid-template-columns:1fr; gap:20px; }.journey-sticky { position:relative; top:0; }.journey-art { height:250px; }.journey-screen .window-bar .micro { display:block; font-size:6px; }.journey-output p { font-size:15px; }.journey-control { grid-template-columns:repeat(3,1fr); padding:15px; gap:7px; }.journey-control button { font-size:8px; }.journey-art-tag { font-size:9px; }.journey-step { min-height:0; padding:32px 0; opacity:1; gap:19px; }.journey-step:first-child { padding-top:30px; }.journey-step h3 { font-size:28px; }.journey-step p:not(.eyebrow) { font-size:14px; line-height:1.9; margin-top:17px; }.journey-step .eyebrow { font-size:8px; margin-bottom:15px; }.journey-steps::before { inset-block:55px 70px; }.step-app { font-size:10px; }.nms-copy h3 { font-size:29px; }.nms-points { display:block; margin-top:24px; }.nms-points>div { padding:15px 0; }.nms-points strong { font-size:14px; }.nms-points span { font-size:12px; }.nms-copy>p.fineprint { font-size:11px; }.console-title { padding:23px 22px 16px; }.console-title h3 { font-size:24px; }.nms-stages { padding-inline:20px; }.nms-stage { grid-template-columns:29px 1fr; gap:12px; padding-block:17px; }.nms-state { grid-column:2; margin-top:-7px; }.nms-stage p { font-size:11px; }.console-bottom { padding:18px 20px 24px; }.console-bottom .button { font-size:11px; }.architecture-toolbar { gap:3px; }.architecture-toolbar button { font-size:9px; padding:10px 12px; }.architecture-board { padding:20px; border-radius:18px; }.zone-grid { grid-template-columns:1fr; gap:39px; }.zone { padding:23px; }.dmz1 { grid-row:1; }.dmz2 { grid-row:2; }.dmz3 { grid-row:3; }.dmz4 { grid-row:4; }.zone-audience { font-size:8px; }.zone-number { font-size:26px; gap:14px; }.zone-number small { font-size:10px; }.zone>strong { font-size:18px; }.zone-desc { font-size:12px; }.zone-more { margin-top:15px; }.zone-detail { padding:23px 2px 2px; }.zone-detail h3 { font-size:24px; }.zone-detail p { font-size:12px; }.security-grid { grid-template-columns:1fr; gap:27px; }.security-grid article { padding:0; }.security-grid h3 { font-size:26px; margin-top:9px; }.security-grid p { font-size:14px; margin-top:14px; }.standards-panel { grid-template-columns:1fr; gap:29px; padding:27px; margin-top:41px; }.standards-panel h3 { font-size:31px; }.standards-panel p:not(.eyebrow) { font-size:13px; }.domain-stack strong { font-size:12px; }.standards-note { font-size:10px; }.reference-links { gap:13px; flex-direction:column; }.diagram-tabs { padding:17px 14px; gap:6px; flex-wrap:wrap; }.diagram-tabs button { font-size:9px; padding:9px 11px; border-color:#dde8ed; background:#eff4f7; }.diagram-panel { padding:24px 20px 23px; }.diagram-panel-heading h3 { font-size:27px; }.diagram-panel-heading p { font-size:13px; margin-top:17px; }.flow-diagram { padding-top:29px; }.flow-nodes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:37px 28px; }.flow-node { padding:16px 11px; min-height:132px; border-radius:10px; }.node-wordmark { font-size:16px; }.flow-node img { height:47px; width:100%; max-width:119px; }.flow-node p { font-size:10px; }.diagram-panel>.visual-note { font-size:10px; }.contact-copy h2 { font-size:49px; }.contact-copy>p:not(.eyebrow) { font-size:15px; }.contact-form { padding:26px 23px; }.contact-form h3 { font-size:26px; }.form-row { grid-template-columns:1fr; gap:0; }.contact-form .choice span { font-size:10px; }.contact-form input:not([type=checkbox]),.contact-form textarea { font-size:16px; padding:11px 12px; }.contact-form .form-result textarea { font-size:11px; }.footer-main { gap:36px 24px; grid-template-columns:1fr 1fr; }.footer-brand { grid-column:1/-1; }.footer-brand img { width:174px; }.footer-brand p { font-size:16px; margin-top:19px; }.footer-brand>span { font-size:8px; margin-top:17px; }.footer-main h3 { font-size:11px; margin-bottom:17px; }.footer-main>div:not(.footer-brand)>a { font-size:11px; }.footer-bottom { font-size:9px; gap:18px; }.footer-bottom button { font-size:9px; }.site-footer { padding-top:45px; }.product-page { padding-top:26px; }.breadcrumb { font-size:10px; margin-bottom:14px; }.product-detail-hero { padding-top:18px; padding-bottom:40px; }.detail-logo { height:92px; max-width:280px; margin-bottom:27px; }.product-detail-hero h1 { font-size:40px; }.product-detail-hero .eyebrow { font-size:9px; }.product-detail-hero p:not(.eyebrow) { font-size:14px; line-height:1.9; margin-top:21px; }.product-detail-hero .button { font-size:11px; padding:15px 17px; gap:14px; }.detail-art img { max-height:300px; }.detail-section { padding-block:45px; }.detail-section h2 { font-size:33px; }.feature-grid { grid-template-columns:1fr; gap:18px; }.feature-card { padding:27px; }.feature-card p { font-size:14px; }.feature-card h3 { font-size:24px; }.process-flow { grid-template-columns:1fr; gap:21px; margin-top:31px; }.process-flow::before { left:20px; right:auto; width:1px; height:auto; top:5px; bottom:20px; }.process-step { display:grid; grid-template-columns:42px 1fr; gap:3px 20px; }.process-number { grid-row:1/3; }.process-step strong { margin-top:0; align-self:end; font-size:19px; }.process-step small { font-size:12px; margin-top:3px; }.io-grid { grid-template-columns:1fr; gap:18px; margin-top:32px; }.io-grid p { font-size:13px; }.detail-case { grid-template-columns:1fr; padding:29px; gap:25px; margin-bottom:30px; }.detail-case h2 { font-size:29px; }.detail-case>p { font-size:14px; }.detail-linktext { font-size:14px; }.related-grid { grid-template-columns:1fr 1fr; gap:14px; }.related-product { padding:19px; }.related-product img { max-height:52px; }.related-product span { font-size:10px; }.oxygen-families { padding:24px; }.oxygen-families span { font-size:10px; }.page-cta h2 { font-size:28px; }.page-cta { padding-bottom:60px; }.product-dialog { width:calc(100vw - 12px); height:calc(100dvh - 12px); max-height:calc(100dvh - 12px); border-radius:16px; }.dialog-bar { padding:12px 16px; }.dialog-bar>a { font-size:9px; }.dialog-close { font-size:10px; padding:9px 12px; }#product-dialog-content { padding:14px 20px; }.product-dialog .product-detail-hero h1 { font-size:35px; }.product-dialog .feature-grid { grid-template-columns:1fr; }.product-dialog .detail-section { padding-block:38px; }.product-dialog .detail-section h2 { font-size:30px; }.product-dialog .process-step strong { font-size:18px; }.product-dialog .related-grid { gap:12px; }.product-dialog .related-product { padding:14px; }.legal-dialog { padding:26px; }.legal-dialog h2 { font-size:27px; }.toast { bottom:15px; font-size:11px; max-width:calc(100% - 30px); width:max-content; } }
@media (max-width:360px) { .wrap { width:calc(100% - 32px); }.hero h1 { font-size:42px; }.hero .eyebrow { font-size:7px; }.hero-actions { gap:15px; }.hero-actions .text-link { font-size:9px; }.hero-actions .button { font-size:11px; padding:13px 15px; }.hero-visual { height:306px; }.note-left { font-size:6px; padding:8px; }.product-card { padding:25px 24px 0; }.card-logo img { max-width:230px; }.brand-strip { gap:18px; }.section-head h2 { font-size:31px; }.zone { padding:21px; }.architecture-board { padding:17px; }.architecture-toolbar button { font-size:8px; padding:9px 10px; }.flow-nodes { gap:33px 24px; }.node-wordmark { font-size:14px; }.flow-node { padding:15px 9px; }.flow-node p { font-size:9px; }.diagram-panel { padding-inline:17px; }.contact-copy h2 { font-size:45px; }.contact-form { padding:24px 19px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; }.reveal.is-pending { opacity:1; translate:none; }.hero-in { opacity:1; transform:none; }.floating-note { translate:none; }.journey-step { opacity:1; } }
@media print { .site-header,.site-footer,.hero-visual,.filters,.button,.dialog-bar,.reading-progress { display:none !important; }.wrap { width:100%; }.section,.detail-section { padding-block:25px; }.reveal.is-pending { opacity:1; translate:none; }body { background:white; }.product-card,.feature-card { break-inside:avoid; }.journey { background:white;color:#123; }.journey-layout { display:block; }.journey-sticky { display:none; }.journey-step { opacity:1;min-height:0;padding:20px 0; }.journey p { color:#345; }.journey-steps::before { display:none; }.product-grid { grid-template-columns:repeat(2,1fr); } }
.diagram-offscreen .connector-flow,.tab-hidden *,.tab-hidden *::before,.tab-hidden *::after { animation-play-state:paused !important; }
/* Decorative orbit geometry may extend past the visual bounds; it must not
   create horizontal document scrolling. Text, cards and diagrams are not clipped. */
.hero-visual { overflow: clip; }
.dialog-bar .dialog-close { margin-left: auto; }