/* =====================================================================
   C.O.S.M.O website. One stylesheet for every page.
   Colors live in :root. Dark "space" sections use .dark, light ones .light.
   Device frames (.device-laptop, .device-monitor, .device-phone) are near the
   middle: put any screenshot <img> inside .screen and it fits.
   ===================================================================== */

:root {
  --base: #04071a;
  --surface-1: #0a1030;
  --surface-2: #0e1640;
  --border: rgba(140, 170, 255, 0.12);
  --border-2: rgba(140, 170, 255, 0.22);
  --ink: #ffffff;
  --body: #c9d4f2;
  --muted: #94a3c8;
  --paper: #060a22;
  --paper-2: #04071a;
  --navy: #ffffff;
  --navy-body: #c9d4f2;
  --navy-muted: #94a3c8;
  --line-light: rgba(140, 170, 255, 0.16);
  --cyan: #4fd1ff;
  --cyan-dark: #4fd1ff;
  --orange: #f7931e;
  --orange-hover: #ffa53f;
  --red: #ff5a5f;
  --green: #36d399;
  --violet: #a78bfa;
  --wrap: 1200px;
  --gutter: 24px;
  --pad: clamp(56px, 9vw, 120px);
  --radius: 2px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--base); color: var(--body); font: 400 1.0625rem/1.65 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* Cosmos backdrop (behind the whole page, like the app): soft nebulae + a subtle starfield */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background:
  radial-gradient(1200px 680px at 50% -8%, rgba(42, 82, 210, .30), transparent 68%),
  radial-gradient(1000px 820px at 88% 8%, rgba(79, 209, 255, .14), transparent 70%),
  radial-gradient(1000px 880px at 2% 46%, rgba(104, 62, 205, .22), transparent 70%),
  radial-gradient(1100px 900px at 86% 82%, rgba(46, 120, 255, .15), transparent 70%),
  radial-gradient(760px 640px at 14% 96%, rgba(247, 147, 30, .07), transparent 70%); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .85; background-image:
  radial-gradient(1.5px 1.5px at 40px 60px, rgba(255, 255, 255, .5), transparent 100%),
  radial-gradient(1px 1px at 130px 20px, rgba(190, 215, 255, .45), transparent 100%),
  radial-gradient(1px 1px at 220px 150px, rgba(255, 255, 255, .4), transparent 100%),
  radial-gradient(1.5px 1.5px at 290px 90px, rgba(160, 236, 255, .45), transparent 100%),
  radial-gradient(1px 1px at 70px 240px, rgba(255, 255, 255, .35), transparent 100%),
  radial-gradient(1px 1px at 180px 285px, rgba(200, 220, 255, .4), transparent 100%);
  background-size: 320px 320px; }
.light body::after, .light::after { display: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--cyan); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.5rem); letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); letter-spacing: -0.03em; }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.3; }
p { margin: 0 0 16px; }
strong { color: var(--ink); font-weight: 600; }
.nowrap, a[href^="tel:"] { white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--orange); color: #111; padding: 10px 16px; border-radius: 0; font-weight: 600; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--pad) 0; position: relative; }

.light { background: var(--paper); color: var(--navy-body); }
.light.white { background: var(--paper-2); }
.light h1, .light h2, .light h3, .light h4, .light strong { color: var(--navy); }
.light a { color: var(--cyan-dark); }
.light .eyebrow { color: var(--cyan-dark); }
.light .muted { color: var(--navy-muted); }
.dark { background: transparent; color: var(--body); }
.dark.deep { background: radial-gradient(1000px 500px at 50% 0%, rgba(30, 60, 180, .28), transparent 70%); }
/* Give every dark section a little faded cosmic depth (alternating hue/position) */
.section.dark { position: relative; }
.section.dark > * { position: relative; z-index: 1; }
.section.dark:not(.morph)::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1100px 620px at 16% 10%, rgba(79, 209, 255, .06), transparent 66%); }
.section.dark:not(.morph):nth-of-type(even)::after { background: radial-gradient(1150px 660px at 86% 14%, rgba(104, 62, 205, .08), transparent 66%); }
.section.dark:not(.morph):nth-of-type(3n)::after { background: radial-gradient(1050px 640px at 50% 104%, rgba(46, 104, 230, .07), transparent 64%); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 .78rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin: 0 0 16px; }
.lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.6; max-width: 38em; }
.muted { color: var(--muted); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head h2 { margin-bottom: 16px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 0; font: 600 1rem/1.2 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s, color .2s; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--orange); color: #1a0d00; box-shadow: 0 6px 24px rgba(247, 147, 30, .28); }
.btn-primary:hover { background: var(--orange-hover); color: #1a0d00; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(247, 147, 30, .38); }
.btn-outline { color: var(--ink); border-color: var(--border-2); background: rgba(255, 255, 255, .03); }
.btn-outline:hover { border-color: var(--cyan); color: var(--ink); transform: translateY(-1px); }
.light .btn-primary, .light .btn-primary:hover { color: #1a0d00; }
.light .btn-outline { color: var(--navy); border-color: var(--border-2); background: var(--surface-1); }
.light .btn-outline:hover { border-color: var(--cyan-dark); color: var(--navy); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: .95rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.center .actions { justify-content: center; }

/* Header (white) */
.site-head { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgba(10, 18, 48, .08); transition: box-shadow .25s; }
.site-head.scrolled { box-shadow: 0 6px 30px rgba(4, 7, 26, .14); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; transition: height .25s var(--ease); }
.site-head.scrolled .wrap { height: 62px; }
.brand { display: inline-flex; flex: none; }
.brand img { height: 42px; width: auto; transition: height .25s var(--ease); }
.site-head.scrolled .brand img { height: 36px; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: block; padding: 8px 12px; border-radius: 0; color: #0a1230; font-weight: 500; font-size: .98rem; text-decoration: none; transition: background-color .15s, color .15s; }
.nav-links a:hover { background: #eef2fa; color: #0a1230; }
.nav-links a[aria-current="page"] { color: var(--cyan-dark); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #c9d2e6; border-radius: 0; color: #0a1230; font-weight: 600; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 18px; height: 18px; }
.menu ul { position: absolute; right: 0; top: calc(100% + 10px); width: min(280px, calc(100vw - 32px)); margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--line-light); border-radius: 0; box-shadow: 0 20px 50px rgba(4, 7, 26, .2); }
.menu li a { display: block; padding: 12px 14px; border-radius: 0; color: #0a1230; text-decoration: none; font-weight: 500; }
.menu li a:hover { background: #eef2fa; }
.menu li a.btn { margin-top: 6px; color: #1a0d00; display: flex; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 112px) 0 0; background: radial-gradient(1200px 640px at 50% 110%, rgba(40, 110, 255, .35), transparent 65%), radial-gradient(900px 500px at 85% -10%, rgba(7, 16, 74, .9), transparent 70%), var(--base); }
.hero canvas.stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero .wrap { position: relative; }
.hero-copy { text-align: center; max-width: 920px; margin: 0 auto; }
.hero-logo { display: block; width: clamp(280px, 33vw, 460px); height: auto; margin: 0 auto 28px 0; filter: drop-shadow(0 0 24px rgba(79, 209, 255, .22)); }
.hero h1 { margin: 0 0 22px; }
.hero h1 .accent { background: linear-gradient(90deg, #4fd1ff, #a5ecff 50%, #4fd1ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { margin: 0 auto 32px; max-width: 34em; }
.hero .actions { justify-content: center; }
.hero-stage { position: relative; max-width: 1180px; margin: clamp(48px, 6vw, 72px) auto 0; padding-bottom: clamp(40px, 5vw, 64px); }
/* Capability list (platform) — styled bullets */
.cap-list { list-style: none; margin: clamp(26px, 3.5vw, 42px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(36px, 4.5vw, 72px); }
.cap-list li { display: flex; gap: 15px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--border-2); }
.cap-list .bi { width: 22px; height: 22px; color: var(--cyan); flex: none; margin-top: 3px; }
.cap-list p { margin: 0; color: var(--muted); font-size: .99rem; line-height: 1.55; }
.cap-list b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) { .cap-list { grid-template-columns: 1fr; } }

/* Capability grid (platform) */
.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(28px, 4vw, 44px); background: var(--border-2); border: 1px solid var(--border-2); }
.cap { background: var(--base); padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 8px; transition: background-color .2s; }
.cap:hover { background: #070c24; }
.cap { --a: #4fd1ff; }
.cap .emblem { position: relative; width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 2px; }
.cap .emblem .ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.cap .emblem .ring circle { stroke: var(--a); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 150 42; transform: rotate(-90deg); transform-origin: 50% 50%; opacity: .95; filter: drop-shadow(0 0 6px var(--a)); }
.cap .emblem .gi { position: relative; width: 24px; height: 24px; color: var(--a); }
.cap.a1 { --a: #4fd1ff; } .cap.a2 { --a: #5b8cff; } .cap.a3 { --a: #35d6ad; } .cap.a4 { --a: #f7931e; }
.cap h3 { font-size: 1.06rem; margin: 6px 0 0; color: var(--ink); line-height: 1.3; }
.cap p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
@media (max-width: 860px) { .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } }

.hero-shot { margin: 0; }
.hero-shot img, .hero-shot video { display: block; width: 100%; height: auto; background: #04071a; border: 1px solid var(--border-2); box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
.hero-shot .hero-still { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-shot video { display: none; } .hero-shot .hero-still { display: block; } }
.float-card { position: absolute; z-index: 3; border-radius: 0; overflow: hidden; background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1); }
.float-card img { width: 100%; }
.float-card.workorder { width: clamp(220px, 32%, 340px); left: -4%; bottom: 16%; }
.float-tag { position: absolute; z-index: 3; right: -7%; top: 2%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 0; background: rgba(10, 16, 48, .94); border: 1px solid var(--border-2); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); color: var(--ink); font-size: .9rem; line-height: 1.35; max-width: 280px; }
.float-tag img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; flex: none; }
.float-tag b { display: block; }
.float-tag small { display: block; color: var(--muted); font-size: .8rem; }
.trust { position: relative; border-top: 1px solid var(--border); background: rgba(4, 7, 26, .7); }
.trust ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; list-style: none; margin: 0; padding: 22px 0; }
.trust li { display: inline-flex; align-items: center; gap: 10px; color: var(--body); font-weight: 500; font-size: .98rem; }
.trust svg { width: 20px; height: 20px; color: var(--cyan); flex: none; }

/* Modules */
.modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); }
.module { display: flex; gap: 14px; padding: 22px 20px; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); transition: background-color .2s; }
.module:hover { background: var(--surface-1); }
.module svg { width: 22px; height: 22px; color: var(--cyan-dark); flex: none; margin-top: 2px; }
.module h3 { font-size: 1rem; margin: 0 0 4px; }
.module p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--navy-muted); }

/* Feature rows */
.feature + .feature { margin-top: clamp(72px, 9vw, 140px); }
.feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; }
.feature-text { grid-column: 1 / span 5; }
.feature-media { grid-column: 6 / span 7; position: relative; padding-left: 24px; }
.feature.flip .feature-text { grid-column: 8 / span 5; order: 2; }
.feature.flip .feature-media { grid-column: 1 / span 7; order: 1; padding: 0 24px 0 0; }
.feature-text h2 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.5rem); margin-bottom: 16px; }
.feature-text p { margin-bottom: 20px; }
.ticks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.ticks svg { width: 20px; height: 20px; margin-top: 3px; color: var(--cyan); }
.light .ticks svg { color: var(--cyan-dark); }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 0; padding: 0; list-style: none; font-size: .84rem; font-weight: 600; }
.flow-label { width: 100%; font: 600 .72rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.light .flow-label { color: var(--navy-muted); }
.flow li.step { padding: 6px 11px; border-radius: 0; border: 1px solid var(--border-2); background: rgba(79, 209, 255, .06); color: var(--ink); white-space: nowrap; }
.light .flow li.step { border-color: var(--border-2); background: var(--surface-1); color: var(--navy); }
.flow li.arrow { color: var(--muted); display: flex; }
.flow li.arrow svg { width: 16px; height: 16px; }
.flow li.step.person { border-color: rgba(247, 147, 30, .7); }
.light .flow li.step.person { border-color: #eda85a; }
.chips { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 28px; padding: 0; list-style: none; font-size: .92rem; }
.chips li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* Device frames */
.device-laptop, .device-monitor, .device-phone { position: relative; margin: 0; }
.screen { position: relative; overflow: hidden; background: #000; }
.screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.device-laptop { padding: 0 4.2%; }
.device-laptop .lid { position: relative; background: #0a0b0e; border-radius: 0; padding: 1%; box-shadow: 0 0 0 2px #23262c, 0 0 0 3px #3b3f47, inset 0 0 0 1px rgba(255, 255, 255, .05); }
.device-laptop .lid::before { content: ""; position: absolute; top: 0.4%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #16181d; box-shadow: inset 0 0 0 1px #30343d; }
.device-laptop .screen { border-radius: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.device-laptop .base { position: relative; height: clamp(12px, 1.5vw, 17px); margin: 0 -6.4%; background: linear-gradient(180deg, #dfe2e8 0%, #bcc1ca 42%, #9298a3 100%); border-radius: 0 0 11px 11px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 5px rgba(0, 0, 0, .4); }
.device-laptop .base::before { content: ""; position: absolute; left: 50%; top: 0; width: 13%; height: 46%; transform: translateX(-50%); background: linear-gradient(180deg, #9ba0ab, #c6cad2); border-radius: 0 0 8px 8px; }
.device-laptop::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -24px; height: 40px; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .6), transparent 70%); filter: blur(6px); z-index: -1; }
.light .device-laptop::after { background: radial-gradient(50% 50% at 50% 50%, rgba(10, 18, 48, .32), transparent 70%); }
.dark .device-laptop .lid, .hero .device-laptop .lid { box-shadow: 0 0 0 1px #2c303a, 0 0 90px rgba(79, 209, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.device-monitor .panel { background: linear-gradient(180deg, #1a1d25, #0c0e13); border-radius: 0; padding: 1.6%; box-shadow: 0 0 0 1px #2c303a, 0 40px 80px rgba(0, 0, 0, .45); }
.device-monitor .screen { border-radius: 0; aspect-ratio: 16 / 10; }
.device-monitor .neck { width: 14%; height: clamp(26px, 4.2vw, 56px); margin: 0 auto; background: linear-gradient(90deg, #8d939f, #d3d7de 50%, #8d939f); }
.device-monitor .foot { width: 30%; height: clamp(6px, .8vw, 10px); margin: 0 auto; border-radius: 0; background: linear-gradient(180deg, #e2e5eb, #9aa0ab); box-shadow: 0 12px 24px rgba(0, 0, 0, .35); }
.dark .device-monitor .panel { box-shadow: 0 0 0 1px #2c303a, 0 0 90px rgba(79, 209, 255, .14), 0 40px 80px rgba(0, 0, 0, .5); }
.device-phone { width: min(330px, 82%); margin: 0 auto; background: linear-gradient(160deg, #2b2f38, #0c0e13); border-radius: 0; padding: 12px; box-shadow: 0 0 0 1px #3a3f4b, 0 40px 80px rgba(10, 18, 48, .35), inset 0 0 0 2px rgba(255, 255, 255, .05); }
.device-phone .screen { border-radius: 0; aspect-ratio: 430 / 690; background: linear-gradient(180deg, #2a1f4a, #1a1c48); }
.device-phone .screen > img { height: calc(100% - 40px); margin-top: 40px; }
.device-phone .island { position: absolute; z-index: 2; top: 20px; left: 50%; width: 26%; height: 20px; transform: translateX(-50%); border-radius: 0; background: #000; }
.window { margin: 0; border-radius: 0; overflow: hidden; background: var(--surface-1); border: 1px solid var(--border-2); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.window .bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; background: #0b112c; border-bottom: 1px solid var(--border); }
.window .bar i { width: 10px; height: 10px; border-radius: 50%; background: #2c3456; }
.window .bar span { margin-left: 10px; color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.light .window { box-shadow: 0 24px 60px rgba(10, 18, 48, .2); }
.media-stack { position: relative; padding-bottom: 12%; }
.media-stack .window.back { position: absolute; width: 58%; right: -3%; bottom: 0; z-index: 2; }
.caption { margin-top: 20px; font-size: .9rem; color: var(--muted); }
.light .caption { color: var(--navy-muted); }
.phone-pair { display: grid; grid-template-columns: 1fr; justify-items: center; }

/* Live triage illustration */
.live { position: absolute; inset: 0; background: linear-gradient(180deg, #071038, #050a24); color: #dfe6fb; font-size: clamp(7px, 1.02vw, 12.5px); line-height: 1.35; padding: 3.4% 3.8%; display: flex; flex-direction: column; gap: 2.6%; }
.live-top { display: flex; align-items: center; justify-content: space-between; gap: 2%; }
.live-top b { font-size: 1.7em; color: #fff; letter-spacing: -0.01em; }
.live-pill { display: inline-flex; align-items: center; gap: .6em; padding: .35em .8em; border-radius: 0; border: 1px solid rgba(79, 209, 255, .4); color: #9fe6ff; font-size: .9em; white-space: nowrap; }
.live-pill i { width: .6em; height: .6em; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.live-banner { display: flex; align-items: center; gap: 2%; padding: 1.6% 2%; border: 1px solid rgba(247, 147, 30, .4); background: rgba(247, 147, 30, .08); border-radius: 0; }
.live-banner .who { width: 2.4em; height: 2.4em; border-radius: 50%; background: url("../assets/img/cosmo-bot.jpg") center/cover; border: 1px solid #fff; flex: none; }
.live-banner span { flex: 1; }
.live-banner em { font-style: normal; color: #ffb35c; font-weight: 600; }
.live-banner .go { padding: .5em 1em; background: var(--orange); color: #1a0d00; border-radius: 0; font-weight: 700; white-space: nowrap; }
.live-rows { display: flex; flex-direction: column; gap: 3%; flex: 1; }
.live-row { display: grid; grid-template-columns: 3em minmax(0, 1fr) 6.8em 8.4em; align-items: center; gap: 2.4%; padding: 1.6% 2.2%; border-radius: 0; background: rgba(140, 170, 255, .06); border: 1px solid rgba(140, 170, 255, .12); }
.live-row .s { display: grid; place-items: center; height: 2.3em; border: 1px solid #ffb020; color: #ffcf6b; font-weight: 700; border-radius: 0; }
.live-row .s.hi { border-color: var(--red); color: #ff9da0; }
.live-row .t { font-family: var(--mono); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-row .t small { display: block; font-family: var(--font); color: #94a3c8; }
.live-row .d { padding: .35em .6em; border-radius: 0; font-weight: 600; white-space: nowrap; text-align: center; }
.live-row .d.real { background: rgba(255, 90, 95, .16); color: #ff9da0; }
.live-row .d.close { background: rgba(54, 211, 153, .14); color: #7ee8bf; }
.live-row .d.look { background: rgba(79, 209, 255, .14); color: #9fe6ff; }
.live-row .p { color: #c9d4f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-foot { display: flex; justify-content: space-between; color: #94a3c8; font-size: .9em; }
@media (prefers-reduced-motion: no-preference) {
  .live-row { animation: rowin 12s var(--ease) infinite both; }
  .live-row:nth-child(1) { animation-delay: .2s; }
  .live-row:nth-child(2) { animation-delay: .9s; }
  .live-row:nth-child(3) { animation-delay: 1.6s; }
  .live-row:nth-child(4) { animation-delay: 2.3s; }
  .live-row:nth-child(5) { animation-delay: 3s; }
  .live-row .d, .live-row .p { animation: decide 12s var(--ease) infinite both; animation-delay: inherit; }
  .live-pill i { animation: blink 1.6s ease-in-out infinite; }
}
@keyframes rowin { 0% { opacity: 0; transform: translateY(-14px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes decide { 0%, 30% { opacity: 0; transform: translateX(8px); } 38%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes blink { 50% { opacity: .35; } }

/* Evidence card */
.evidence { position: absolute; z-index: 3; right: -3%; bottom: -16%; width: min(320px, 50%); padding: 18px 18px 12px; border-radius: 0; background: #0a1030; border: 1px solid var(--border-2); box-shadow: 0 30px 70px rgba(4, 7, 26, .5); color: var(--body); font-size: .84rem; }
.evidence header { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.evidence .score { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.04em; color: #ffcf6b; line-height: 1; min-width: 2.2ch; font-variant-numeric: tabular-nums; }
.evidence header b { display: block; color: #fff; font-size: .95rem; }
.evidence header small { color: var(--muted); }
.evidence ul { list-style: none; margin: 0; padding: 0; }
.evidence li { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); color: var(--body); }
.evidence li span:last-child { font-variant-numeric: tabular-nums; color: #7ee8bf; font-weight: 600; }
.evidence li.ai span:last-child { color: #c4b5fd; }
.evidence .illus { display: block; margin-top: 8px; font-size: .74rem; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .js .evidence li { opacity: 0; transform: translateX(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .js .evidence.in li { opacity: 1; transform: none; }
  .evidence.in li:nth-child(2) { transition-delay: .25s; }
  .evidence.in li:nth-child(3) { transition-delay: .5s; }
  .evidence.in li:nth-child(4) { transition-delay: .75s; }
  .evidence.in li:nth-child(5) { transition-delay: 1s; }
  .evidence.in li:nth-child(6) { transition-delay: 1.25s; }
}

/* Constellation */
.sky svg { width: 100%; height: auto; overflow: visible; }
.sky .link { stroke: rgba(79, 209, 255, .4); stroke-width: 1.2; }
.sky .star { fill: #fff; }
.sky .name { fill: #fff; font: 700 22px var(--font); }
.sky .role { fill: #94a3c8; font: 400 17px var(--font); }
.sky .chair .name { fill: var(--orange); }
@media (prefers-reduced-motion: no-preference) {
  .sky .halo { animation: twinkle 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .sky g:nth-of-type(2) .halo { animation-delay: -1.1s; }
  .sky g:nth-of-type(3) .halo { animation-delay: -2.2s; }
  .sky g:nth-of-type(4) .halo { animation-delay: -3.1s; }
  .sky g:nth-of-type(5) .halo { animation-delay: -.6s; }
  .js .sky .link { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 2.2s var(--ease); }
  .js .sky.in .link { stroke-dashoffset: 0; }
}
@keyframes twinkle { 0%, 100% { opacity: .5; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.12); } }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 24px; font-size: .92rem; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; }

/* Workflow */
.timeline { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 0 0 56px; padding: 0; list-style: none; }
.timeline::before, .timeline .progress { content: ""; position: absolute; left: calc(100% / 16); right: calc(100% / 16); top: 27px; height: 2px; background: var(--border-2); }
.timeline .progress { background: linear-gradient(90deg, var(--cyan), #9fe9ff); transform-origin: left; transform: scaleX(var(--p, 1)); box-shadow: 0 0 12px rgba(79, 209, 255, .6); }
.timeline li { position: relative; text-align: center; }
.timeline button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0 6px 8px; border-radius: 0; }
.timeline button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.timeline .dot { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-1); border: 1px solid var(--border-2); color: var(--muted); transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s, transform .3s var(--ease); }
.timeline .dot svg { width: 24px; height: 24px; }
.timeline .n { font: 600 .72rem/1 var(--font); letter-spacing: .14em; color: var(--muted); margin-top: 4px; }
.timeline .t { font-weight: 600; color: var(--ink); font-size: .98rem; line-height: 1.2; }
.timeline .d { font-size: .82rem; color: var(--muted); line-height: 1.35; }
.timeline li.lit .dot, html:not(.js) .timeline .dot { border-color: var(--cyan); color: var(--cyan); background: #0b1a45; box-shadow: 0 0 0 4px rgba(79, 209, 255, .08), 0 0 24px rgba(79, 209, 255, .35); }
.timeline li.lit.act .dot, html:not(.js) .timeline li.act .dot { border-color: var(--red); color: var(--red); background: #2a0c18; box-shadow: 0 0 24px rgba(255, 90, 95, .4); }
.timeline button:hover .dot { transform: translateY(-2px); }
.timeline button[aria-selected="true"] .dot { transform: scale(1.12); }
.timeline button[aria-selected="true"] .t { color: var(--cyan); }
.timeline li.act button[aria-selected="true"] .t { color: #ff8c8f; }
.stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; }
.stage .device-monitor { grid-column: 1 / span 8; }
.stage-text { grid-column: 9 / span 4; }
.stage .screen img { position: absolute; inset: 0; transition: opacity .5s var(--ease); }
.js .stage .screen img { opacity: 0; }
.js .stage .screen img.on { opacity: 1; }
.js .stage-text .panel-copy { display: none; }
.js .stage-text .panel-copy.on { display: block; }
html:not(.js) .stage-text .panel-copy + .panel-copy { display: none; }
.stage-text h3 { font-size: 1.6rem; margin-bottom: 12px; }
.stage-text .num { display: block; font: 700 .78rem/1 var(--font); letter-spacing: .16em; color: var(--cyan); margin-bottom: 12px; }
.stage-text .act-num { color: #ff8c8f; }

/* Diagram: auto triage pipeline */
.pipe { display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr 56px 1fr 56px 1fr; align-items: stretch; }
.node { position: relative; padding: 24px 16px; border-radius: 0; background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); border: 1px solid var(--border-2); text-align: center; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.node:hover { transform: translateY(-3px); border-color: rgba(79, 209, 255, .45); box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 0 30px rgba(79, 209, 255, .12); }
.node .ic { width: 48px; height: 48px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 0; background: rgba(79, 209, 255, .1); color: var(--cyan); border: 1px solid rgba(79, 209, 255, .25); }
.node .ic svg { width: 24px; height: 24px; }
.node.person { border-color: rgba(247, 147, 30, .5); }
.node.person .ic { background: rgba(247, 147, 30, .12); color: var(--orange); border-color: rgba(247, 147, 30, .4); }
.node .k { display: block; font: 700 .7rem/1 var(--font); letter-spacing: .16em; color: var(--muted); margin-bottom: 8px; }
.node h3 { font-size: 1rem; margin-bottom: 6px; }
.node p { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.wire { position: relative; align-self: center; height: 2px; background: repeating-linear-gradient(90deg, rgba(79, 209, 255, .5) 0 6px, transparent 6px 12px); overflow: hidden; }
.wire .run { position: absolute; inset: 0; }
.wire .run::after { content: ""; position: absolute; right: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan); }
.wire.o .run::after { background: var(--orange); box-shadow: 0 0 10px var(--orange); }
@media (prefers-reduced-motion: no-preference) {
  .wire .run { animation: run 2.4s linear infinite; }
  .wire:nth-child(4) .run { animation-delay: .6s; }
  .wire:nth-child(6) .run { animation-delay: 1.2s; }
  .wire:nth-child(8) .run { animation-delay: 1.8s; }
}
@media (prefers-reduced-motion: reduce) { .wire .run::after { display: none; } }
@keyframes run { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes rundown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Diagram: where it runs */
.arch { width: 100%; height: auto; }
.arch text { font-family: var(--font); }
.arch .lbl { fill: #fff; font-size: 15px; font-weight: 600; }
.arch .sub { fill: #94a3c8; font-size: 12.5px; }
.arch .cap { fill: #4fd1ff; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; }
.arch .capo { fill: #f7931e; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; }
.arch .box { fill: #0a1030; stroke: rgba(140, 170, 255, .3); }
.arch .core { fill: url(#coreg); stroke: rgba(79, 209, 255, .65); }
.arch .zone { fill: rgba(79, 209, 255, .03); stroke: rgba(79, 209, 255, .4); stroke-dasharray: 6 6; }
.arch .ln { stroke: rgba(79, 209, 255, .55); stroke-width: 1.5; fill: none; }
.arch .ln.o { stroke: rgba(247, 147, 30, .7); }
.arch .ic { color: #4fd1ff; }
@media (prefers-reduced-motion: no-preference) { .arch .ln.anim { stroke-dasharray: 5 7; animation: dash 1.4s linear infinite; } }
@keyframes dash { to { stroke-dashoffset: -24; } }
.arch-mobile, .arch-mobile.cols { display: none; }
.light .dark h3, .light .dark strong { color: #fff; }
.light .dark .col { border-top-color: var(--border-2); }
.light .dark .lines li { border-top-color: var(--border); }
.light .dark .muted { color: var(--muted); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }
.light .stats { border-top-color: var(--line-light); }
.stat b { display: block; font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.light .stat b { color: var(--navy); }
.stat span { display: block; margin-top: 8px; color: var(--muted); font-size: .95rem; }
.light .stat span { color: var(--navy-muted); }

/* Columns, lists */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col { padding-top: 24px; border-top: 1px solid var(--border-2); }
.light .col { border-top-color: var(--line-light); }
.col .ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 0; margin-bottom: 16px; background: rgba(79, 209, 255, .1); color: var(--cyan); }
.light .col .ic { background: #e3f3fb; color: var(--cyan-dark); }
.col .ic svg { width: 22px; height: 22px; }
.col h3 { margin-bottom: 10px; }
.col p:last-child { margin-bottom: 0; }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { padding: 11px 0; border-top: 1px solid var(--border); }
.light .lines li { border-top-color: var(--line-light); }
.std { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 0 0 32px; }
.std div { padding: 18px 0; border-top: 1px solid var(--line-light); }
.std dt { font-weight: 600; color: var(--navy); }
.std dd { margin: 4px 0 0; color: var(--navy-muted); font-size: .95rem; }
.note { padding: 16px 20px; border-left: 3px solid var(--cyan); background: rgba(79, 209, 255, .06); border-radius: 0; max-width: 48em; }
.light .note { border-left-color: var(--cyan-dark); background: var(--surface-2); color: var(--navy-body); }

/* How to buy, Cypher */
.buy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; }
.buy-text { grid-column: 1 / span 6; }
.buy-text h2 { margin-bottom: 16px; }
.buy-card { grid-column: 8 / span 5; align-self: start; padding-left: clamp(0px, 3vw, 44px); }
.buy-card .through { font: 600 .74rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.buy-card .name { display: block; margin: 12px 0 8px; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.buy-card p { font-size: .96rem; color: var(--body); }
.buy-card .lines { margin-top: 18px; }
.buy-card .lines li { display: flex; gap: 12px; border-top-color: var(--border-2); color: var(--body); }
.buy-card .lines svg { width: 18px; height: 18px; color: var(--cyan); flex: none; margin-top: 4px; }
.cypher { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }
.cypher-text { grid-column: 1 / span 6; }
.cypher-text .mark { height: 32px; width: auto; margin-bottom: 28px; }
.cypher-text h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: 16px; }
.cypher-facts { grid-column: 8 / span 5; margin: 0; }
.cypher-facts div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-light); }
.cypher-facts div:last-child { border-bottom: 1px solid var(--line-light); }
.cypher-facts dt { font: 600 .72rem/1.9 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--navy-muted); }
.cypher-facts dd { margin: 0; color: var(--navy); font-size: .96rem; }
.cypher-facts dd a { color: var(--cyan-dark); }

/* CTA */
.cta { position: relative; overflow: hidden; text-align: center; background: radial-gradient(900px 420px at 50% 120%, rgba(40, 110, 255, .45), transparent 70%), var(--base); }
.cta .mark { width: 52px; margin: 0 auto 24px; }
.cta h2 { max-width: 16em; margin: 0 auto 16px; }
.cta p { max-width: 34em; margin: 0 auto 32px; }

/* Inner page head */
.page-head { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 104px) 0 clamp(56px, 7vw, 88px); background: radial-gradient(1000px 500px at 80% -20%, rgba(30, 60, 180, .4), transparent 70%), var(--base); }
.page-head h1 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.75rem); max-width: 16em; margin-bottom: 20px; }

/* Contact form */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }
.contact-form { grid-column: 1 / span 7; }
.contact-side { grid-column: 9 / span 4; }
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.pair { display: flex; flex-wrap: wrap; gap: 20px 24px; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start; }
.field label { font-weight: 600; color: var(--navy); font-size: .96rem; }
.field label .opt { font-weight: 400; color: var(--navy-muted); }
.field input, .field select, .field textarea { width: 20rem; max-width: 100%; min-height: 48px; padding: 12px 14px; font: 400 1rem/1.4 var(--font); color: var(--navy); background: var(--surface-1); border: 1px solid #c2cce0; border-radius: 0; transition: border-color .15s, box-shadow .15s; }
.field textarea { width: 40rem; min-height: 168px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan-dark); box-shadow: 0 0 0 4px rgba(9, 109, 150, .2); }
.field input::placeholder, .field textarea::placeholder { color: #6b7691; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form small { color: var(--navy-muted); }
.form-status { max-width: 40rem; padding: 16px 18px; border-radius: 0; border-left: 3px solid var(--cyan-dark); background: var(--surface-2); color: var(--navy); }
.form-status.err { border-left-color: #c8102e; background: rgba(255,90,95,.12); }
.form-status[hidden] { display: none; }
.side-list { margin: 0; }
.side-list div { padding: 14px 0; border-top: 1px solid var(--line-light); }
.side-list div:last-child { border-bottom: 1px solid var(--line-light); }
.side-list dt { font: 600 .72rem/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--navy-muted); margin-bottom: 4px; }
.side-list dd { margin: 0; color: var(--navy); }
.side-list dd a { color: var(--cyan-dark); }

/* Footer */
.site-foot { background: #02040f; border-top: 1px solid var(--border); padding: 64px 0 32px; color: var(--muted); font-size: .95rem; }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 32px; }
.foot-grid .logo { height: 26px; width: auto; margin-bottom: 18px; }
.foot-grid p { max-width: 28em; }
.foot-grid h2 { font: 600 .74rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin: 6px 0 16px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-foot a { color: var(--body); text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); font-size: .86rem; }

/* 404 / thanks */
.lost { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 96px 0; }
.lost .mark { width: 60px; margin: 0 auto 24px; }
.lost h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); margin-bottom: 16px; }
.lost p { max-width: 30em; margin: 0 auto 28px; }
.lost .actions { justify-content: center; }

/* Reveal motion: only when JS runs and motion is welcome; otherwise everything is simply visible */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
  .js [data-reveal="left"] { transform: translateX(-40px); }
  .js [data-reveal="right"] { transform: translateX(40px); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js .hero .float-card, .js .hero .float-tag { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease) .8s, transform .8s var(--ease) .8s; }
  .js .hero .float-tag { transition-delay: 1.1s; }
  .js .hero .in .float-card, .js .hero .in .float-tag { opacity: 1; transform: none; }
  .hero .float-tag, .hero .float-card { animation: floaty 7s ease-in-out 2s infinite; }
  .hero .float-card { animation-delay: 3.5s; }
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Responsive */
@media (max-width: 1180px) {
  .nav { gap: 12px; }
  .float-tag { right: -1%; top: -2%; }
  .float-card.workorder { left: -1%; }
  .nav-links a { padding: 8px 9px; }
  .pipe { grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr; }
  .node { padding: 20px 12px; }
}
@media (max-width: 1023px) {
  .nav-links, .nav > .btn { display: none; }
  .menu { display: block; }
  .feature, .stage, .buy, .cypher, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-text, .feature-media, .feature.flip .feature-text, .feature.flip .feature-media, .stage .device-monitor, .stage-text, .buy-text, .buy-card, .cypher-text, .cypher-facts, .contact-form, .contact-side { grid-column: auto; order: 0; }
  .feature-media, .feature.flip .feature-media { margin-top: 16px; padding: 0; }
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
  .timeline::before, .timeline .progress { display: none; }
  .pipe { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; }
  .wire { width: 2px; height: 40px; justify-self: center; background: repeating-linear-gradient(180deg, rgba(79, 209, 255, .5) 0 6px, transparent 6px 12px); }
  .wire .run::after { right: -3px; top: auto; bottom: 0; }
  .cols, .std, .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .evidence { right: 0; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) { .wire .run { animation-name: rundown; } }
@media (max-width: 760px) {
  .arch-wide { display: none; }
  .arch-mobile, .arch-mobile.cols { display: grid; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 1rem; }
  .site-head .wrap { height: 64px; }
  .brand img, .site-head.scrolled .brand img { height: 34px; }
  .hero .float-card.workorder { display: none; }
  .float-card.workorder { width: 52%; }
  .hero .eyebrow::before { display: none; }
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .module { padding: 16px 12px; gap: 10px; }
  .module p { display: none; }
  .module h3 { font-size: .94rem; margin: 0; }
  .float-tag { position: relative; right: auto; top: auto; margin: 24px auto 0; max-width: 100%; }
  .evidence { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 24px; }
  .media-stack { padding-bottom: 0; }
  .media-stack .window.back { position: relative; width: 86%; right: auto; margin: -10% 0 0 auto; }
  .modules, .cols, .std, .cols.two { grid-template-columns: minmax(0, 1fr); }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust ul { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 0; }
  .actions .btn { flex: 1 1 100%; }
  .pair { display: grid; grid-template-columns: minmax(0, 1fr); }
  .field, .field input, .field select, .field textarea { width: 100%; }
  .foot-grid { grid-template-columns: 1fr; }
  .cypher-facts div { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .device-laptop .lid { border-radius: 0; }
  .live-banner span { display: none; }
  .live-row { grid-template-columns: 3em minmax(0, 1fr) 7.6em; }
  .live-row .p { display: none; }
}

/* =====================================================================
   Home page, version 2: the bot demo, before and after, the scroll story,
   proof cards, the council diagram, the bento grid and the numbers band.
   Product frames are always straight on: no rotate, skew or perspective.
   ===================================================================== */
:root { --orange-dark: #a34a00; --green-dark: #0b7a53; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: .92rem; }
.light .hl { color: var(--cyan-dark); }
.illus-note { margin: 18px auto 0; max-width: 46em; text-align: center; font-size: .88rem; color: var(--navy-muted); }
.dark-note, .dark .illus-note { color: var(--muted); }
.who { display: inline-flex; align-items: center; gap: 8px; font: 700 .72rem/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #9fe6ff; white-space: nowrap; }
.who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.who.you, .you > div > .who { color: #ffb35c; }

/* Hero, straight on */
.hero-mac { max-width: 1120px; margin: 0 auto; }
.hero .float-tag { right: -1%; top: 3%; }
.hero .float-card.workorder { left: -1%; bottom: 10%; }

/* Bot demo */
.botsec { background: linear-gradient(180deg, #eef3fb, var(--paper) 40%); overflow: hidden; }
.demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: stretch; }
.chat { display: flex; flex-direction: column; height: 580px; background: var(--surface-1); border: 1px solid var(--line-light); border-radius: 0; box-shadow: 0 30px 70px rgba(10, 18, 48, .12); overflow: hidden; }
.chat-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-light); }
.chat-head img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #c9d2e6; }
.chat-head b { display: block; color: var(--navy); line-height: 1.2; }
.chat-head small { color: var(--navy-muted); font-size: .82rem; }
.chat-head .state { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 0; background: #e9f7f1; color: var(--green-dark); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.chat-head .state i { width: 7px; height: 7px; border-radius: 50%; background: #16a36f; }
.msgs { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.msg { max-width: 90%; padding: 11px 14px; border-radius: 0; font-size: .95rem; line-height: 1.45; }
.msg.bot { align-self: flex-start; background: var(--surface-2); color: var(--navy); border-top-left-radius: 4px; }
.msg.bot b { color: var(--navy); }
.msg.me { align-self: flex-end; background: var(--navy); color: #fff; border-top-right-radius: 4px; }
.who-you { display: block; font: 700 .68rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #ffb35c; margin-bottom: 5px; }
.msg.me.you { background: rgba(247,147,30,.12); color: #ffc887; border: 1px solid #f0a54a; }
.msg.me.you .who-you { color: var(--orange-dark); }
.typing { align-self: flex-start; display: flex; gap: 5px; padding: 14px 16px; border-radius: 0; background: var(--surface-2); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #8a96b3; }
.todo { list-style: none; margin: 12px 0 2px; padding: 0; display: grid; gap: 10px; }
.todo li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-weight: 600; font-size: .92rem; }
.todo em { display: block; font-style: normal; font-weight: 400; color: var(--navy-muted); font-size: .84rem; }
.tk { position: relative; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--border-2); border-top-color: var(--cyan-dark); }
.todo li.done .tk { border-color: var(--green-dark); background: var(--green-dark); }
.todo li.done .tk::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
html:not(.js) .tk, .todo li.done .tk { animation: none; }
html:not(.js) .tk { border-color: var(--green-dark); background: var(--green-dark); }
.approve { display: flex; width: max-content; margin-top: 10px; padding: 9px 20px; border-radius: 0; background: var(--orange); color: #1a0d00; font-weight: 700; transition: transform .2s var(--ease), box-shadow .2s; }
.approve.pressed { transform: scale(.94); box-shadow: 0 0 0 7px rgba(247, 147, 30, .28); }
.chat-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 14px 14px; padding: 10px 10px 10px 16px; border: 1px solid var(--line-light); border-radius: 0; color: var(--navy-muted); font-size: .9rem; }
.chat-foot i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: #1a0d00; }
.chat-foot svg { width: 16px; height: 16px; }

.appwin { display: flex; flex-direction: column; height: 580px; border-radius: 0; overflow: hidden; background: #050a24; border: 1px solid #1c2550; box-shadow: 0 40px 90px rgba(10, 18, 48, .3), 0 0 0 6px rgba(10, 18, 48, .04); }
.appwin .bar { flex: none; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #0b112c; border-bottom: 1px solid var(--border); }
.appwin .bar > i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.appwin .bar > i + i { background: #febc2e; }
.appwin .bar > i + i + i { background: #28c840; }
.appwin .url { flex: 1; min-width: 0; margin: 0 8px 0 12px; padding: 4px 12px; border-radius: 0; background: #050a24; color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appwin .url b { color: #fff; font-weight: 600; }
.demo-chip { flex: none; padding: 3px 9px; border-radius: 0; background: var(--orange); color: #1a0d00; font-size: .72rem; font-weight: 700; }
.app { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.app-side { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: #060c2a; border-right: 1px solid var(--border); font-size: 12px; color: #94a3c8; }
.app-side span { padding: 6px 8px; border-radius: 0; white-space: nowrap; }
.app-side .cap { padding: 10px 8px 4px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #4fd1ff; }
.app-side .on { background: rgba(79, 209, 255, .14); color: #fff; }
.app-side .act { background: #b3122e; color: #fff; }
.app-side .hit { background: rgba(247, 147, 30, .18); color: #ffcf99; }
.app-main { position: relative; overflow: hidden; }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; color: #dfe6fb; font-size: 13.5px; line-height: 1.4; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s; }
.scene.on, html:not(.js) .scene.final { opacity: 1; visibility: visible; transform: none; }
.sc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.sc-head .big { display: block; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.sc-head .big.hot { color: #ffcf6b; }
.sc-head .big.ok { color: #7ee8bf; }
.sc-head div > span { display: block; margin-top: 6px; color: #b9c5e6; }
.pill { color: #9fe6ff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.warn { color: #ff9da0; }
.sc-note { margin: auto 0 0; color: #94a3c8; font-size: 12px; }
.stream { position: relative; flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.srow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: 10px; align-items: center; margin-bottom: 6px; padding: 8px 10px; border-radius: 0; background: rgba(140, 170, 255, .06); border: 1px solid rgba(140, 170, 255, .1); font-size: 12.5px; }
.srow b, .grp b, .dec b { font-family: var(--mono); font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow span { color: #b9c5e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow em, .grp span { font-style: normal; color: #94a3c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp, .why, .dec, .packs ul, .cl { list-style: none; margin: 0; padding: 0; }
.grp { display: grid; gap: 6px; }
.grp li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 0; background: rgba(140, 170, 255, .06); border: 1px solid rgba(140, 170, 255, .1); font-size: 12.5px; }
.grp em { font-style: normal; padding: 2px 8px; border-radius: 0; background: rgba(79, 209, 255, .14); color: #9fe6ff; font-size: 11.5px; white-space: nowrap; }
.why li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.why li::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: calc(var(--w, 0) * 2%); border-radius: 0; background: linear-gradient(90deg, rgba(54, 211, 153, .2), rgba(54, 211, 153, .05)); transform-origin: left; }
.why li span, .why li b { position: relative; }
.why li b { color: #7ee8bf; font-variant-numeric: tabular-nums; }
.why li.zero b { color: #b9c5e6; }
.why li.ai span, .why li.ai b { color: #c9bbff; }
.dec { display: grid; gap: 5px; }
.dec li { display: grid; grid-template-columns: 34px minmax(0, 1.1fr) 9.5em minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 10px; border-radius: 0; background: rgba(140, 170, 255, .06); border: 1px solid rgba(140, 170, 255, .1); font-size: 12.5px; }
.dec .s { display: grid; place-items: center; height: 24px; border: 1px solid #ffb020; border-radius: 0; color: #ffcf6b; font-weight: 700; font-size: 12px; }
.dec .s.hi { border-color: var(--red); color: #ff9da0; }
.dec .s.lo { border-color: #4a5a85; color: #b9c5e6; }
.dec .d { padding: 3px 8px; border-radius: 0; font-weight: 600; text-align: center; white-space: nowrap; font-size: 11.5px; }
.dec .d.real { background: rgba(255, 90, 95, .16); color: #ffb0b2; }
.dec .d.more { background: rgba(79, 209, 255, .14); color: #9fe6ff; }
.dec .d.exp { background: rgba(54, 211, 153, .14); color: #7ee8bf; }
.dec .o { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.dec .o small { display: block; color: #94a3c8; font-size: 11px; }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pack { padding: 12px; border-radius: 0; background: rgba(140, 170, 255, .06); border: 1px solid rgba(140, 170, 255, .14); }
.pack h5 { margin: 0 0 10px; font-size: 13px; color: #fff; }
.packs ul { display: flex; flex-wrap: wrap; gap: 6px; }
.packs li { padding: 4px 8px; border-radius: 0; border: 1px solid rgba(79, 209, 255, .35); color: #cfeeff; font-size: 11.5px; white-space: nowrap; }
.s-pdf { align-items: center; justify-content: center; background: radial-gradient(500px 300px at 50% 40%, rgba(79, 209, 255, .1), transparent 70%); }
.paper { width: 100%; max-width: 440px; padding: 18px 22px; border-radius: 0; background: #fff; color: #1b2440; font-size: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.paper-top { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid #c8102e; }
.paper-top b { color: #0a1230; font-size: 13.5px; }
.paper-top span { color: #56627f; }
.paper p { margin: 0 0 10px; }
.paper h6 { margin: 0 0 6px; font-size: 12.5px; color: #0a1230; }
.cl { display: grid; gap: 4px; margin-bottom: 10px; }
.cl li { display: flex; gap: 8px; align-items: center; }
.cl li::before { content: ""; flex: none; width: 10px; height: 10px; border: 1.5px solid #56627f; border-radius: 0; }
.paper pre { margin: 0; padding: 8px 10px; border-radius: 0; background: #f0f3f9; color: #0a1230; font: 10.5px/1.4 var(--mono); white-space: pre-wrap; word-break: break-all; }
.fname { display: inline-flex; align-items: center; gap: 8px; color: #cfeeff; font: 12px var(--mono); text-align: center; }
.fname svg { width: 16px; height: 16px; flex: none; color: #4fd1ff; }
.s-approve { align-items: center; justify-content: center; background: radial-gradient(600px 340px at 50% 30%, rgba(30, 60, 180, .4), transparent 70%); }
.plan { display: flex; align-items: center; gap: 22px; width: 100%; max-width: 560px; padding: 24px; border-radius: 0; background: rgba(10, 16, 48, .92); border: 1px solid rgba(247, 147, 30, .5); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.plan > img { width: 92px; height: 92px; border-radius: 50%; border: 2px solid #fff; flex: none; }
.plan .cap { display: block; font: 700 11px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: #ffb35c; }
.plan-h { display: block; margin: 8px 0 14px; font-size: 19px; line-height: 1.25; color: #fff; }
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nums span { color: #b9c5e6; font-size: 11.5px; line-height: 1.25; }
.nums b { display: block; font-size: 28px; font-weight: 800; color: #fff; line-height: 1.1; }
.nums b.r { color: #ff9da0; }
.nums b.c { color: #9fe6ff; }
.nums b.g { color: #7ee8bf; }
.approve.big { margin-top: 16px; padding: 10px 24px; font-size: 15px; }
.tasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.task { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px 14px 14px; border-radius: 0; background: rgba(140, 170, 255, .07); border: 1px solid rgba(140, 170, 255, .16); }
.task .new { align-self: flex-start; margin-bottom: 6px; padding: 2px 8px; border-radius: 0; background: var(--orange); color: #1a0d00; font-size: 11px; font-weight: 700; }
.task b { color: #fff; font-size: 14px; }
.task span { color: #c9d4f2; }
.task em { font-style: normal; color: #94a3c8; font-size: 12px; }
.demo-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 22px; }
.demo-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-tabs button, .ctl { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 13px; border-radius: 0; border: 1px solid var(--border-2); background: var(--surface-1); color: var(--navy); font: 600 .86rem/1 var(--font); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.demo-tabs button:hover, .ctl:hover { border-color: var(--cyan-dark); }
.demo-tabs button.past { color: var(--cyan-dark); border-color: #9fcfe3; }
.demo-tabs button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.demo-tabs button.you { border-color: #e8a256; color: var(--orange-dark); }
.demo-tabs button.you[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #1a0d00; }
.demo-btns { display: flex; gap: 8px; }
.ctl svg { width: 16px; height: 16px; }
.demo-bar { flex-basis: 100%; height: 3px; border-radius: 0; background: #dfe5f1; overflow: hidden; }
.demo-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-dark), var(--orange)); transform-origin: left; transform: scaleX(var(--p, 1)); }
html:not(.js) .demo-ctrl { display: none; }
.js .demo [data-at]:not(.shown) { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .demo [data-at].shown { animation: pop .45s var(--ease) both; }
  .typing i { animation: bob 1s ease-in-out infinite; }
  .typing i:nth-child(2) { animation-delay: .15s; }
  .typing i:nth-child(3) { animation-delay: .3s; }
  .tk { animation: spin .9s linear infinite; }
  .todo li.done .tk { animation: none; }
  .chat-head .state i { animation: blink 1.4s ease-in-out infinite; }
  .feed { animation: feed 9s linear infinite; }
  .scene.on .stagger > * { animation: pop .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
  .scene.on .why li::before, .why-card.in .why li::before { animation: grow .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms + .2s); }
  .s-done.on .new { animation: ping 1.6s ease-out .4s 2 both; }
}
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes feed { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(247, 147, 30, .6); } 100% { box-shadow: 0 0 0 12px rgba(247, 147, 30, 0); } }

/* Before and after */
.vs { width: 100%; max-width: 1040px; margin: 0 auto; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.vs th, .vs td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-light); }
.vs thead th { padding-top: 0; font: 700 .8rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid var(--line-light); vertical-align: bottom; }
.vs thead th svg, .vs thead th img { display: inline-block; vertical-align: middle; margin-right: 10px; }
.vs thead th svg { width: 22px; height: 22px; color: var(--navy-muted); }
.vs thead th img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #9fcfe3; }
.vs .h-hand { color: var(--navy-muted); width: 36%; }
.vs .h-bot { color: var(--cyan-dark); width: 42%; background: rgba(79,209,255,.07); border-radius: 0; }
.vs tbody th { width: 22%; color: var(--navy); font-weight: 600; }
.vs tbody td:nth-of-type(1) { color: var(--navy-muted); }
.vs tbody td:nth-of-type(1)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: #b8c1d6; vertical-align: middle; }
.vs tbody td:nth-of-type(2) { background: rgba(79,209,255,.07); color: var(--navy); font-weight: 500; }
.vs tbody td:nth-of-type(2)::before { content: ""; display: inline-block; width: 6px; height: 11px; margin: 0 12px 2px 2px; border: solid var(--cyan-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); vertical-align: middle; }
.vs .you-row th { color: var(--orange-dark); }
.vs .you-row td:nth-of-type(2) { font-weight: 600; }
.vs .you-row td:nth-of-type(2) b { color: var(--orange); }
.vs .you-row td:nth-of-type(2)::before { border-color: var(--orange-dark); }
@media (prefers-reduced-motion: no-preference) {
  .js .vs tbody tr { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + .2s); }
  .js .vs.in tbody tr { opacity: 1; transform: none; }
}

/* The scroll story */
.legend-who { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px 0 0; }
.story-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.story-steps { padding-bottom: 18vh; }
.chap { display: flex; align-items: center; gap: 10px; margin: 72px 0 6px; padding-left: 22px; font: 700 .8rem/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.chap:first-child { margin-top: 0; }
.chap svg { width: 20px; height: 20px; }
.sstep { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 40vh; padding: 20px 20px 20px 22px; border-left: 2px solid var(--border-2); transition: opacity .4s var(--ease), border-color .4s; }
.js .sstep { opacity: .38; }
.js .sstep.on { opacity: 1; border-left-color: var(--cyan); }
.js .sstep.you.on { border-left-color: var(--orange); }
.sstep .n { align-self: start; margin-top: 4px; font: 700 .9rem/1 var(--mono); color: var(--muted); }
.sstep.on .n { color: var(--cyan); }
.sstep.you.on .n { color: var(--orange); }
.sstep h4 { margin: 12px 0 8px; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.sstep p { margin: 0; color: var(--body); }
.sshot { display: none; margin: 16px 0 0; border-radius: 0; overflow: hidden; border: 1px solid var(--border-2); }
.sshot.paper { background: #fff; }
.story-media { align-self: stretch; }
.story-sticky { position: sticky; top: calc(50vh - min(24vw, 290px)); padding-top: 8px; }
.story-screen img { position: absolute; inset: 0; opacity: 0; transform: scale(1.015); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.story-screen img.on { opacity: 1; transform: none; }
.story-mb { position: relative; width: 100%; aspect-ratio: 1208 / 700; margin: 0; }
.story-mb img { width: 100%; height: 100%; object-fit: contain; }
.story-screen img.contain { object-fit: contain; object-position: center; background: #e9edf5; }
.story-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 28px; color: var(--body); font-size: .95rem; }
.story-prog { width: 120px; height: 3px; border-radius: 0; background: var(--border-2); overflow: hidden; }
.story-prog span { display: block; height: 100%; background: var(--cyan); transform-origin: left; transform: scaleX(var(--p, .08)); transition: transform .5s var(--ease); }

/* Proof cards */
.proof { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.pcard { padding: 28px; border-radius: 0; background: var(--surface-1); border: 1px solid var(--line-light); box-shadow: 0 20px 50px rgba(10, 18, 48, .08); min-width: 0; }
.pk { display: block; font: 700 .74rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-dark); }
.dark .pk, .dark-tile .pk, .why-card .pk { color: var(--cyan); }
.pnote { margin: 16px 0 0; font-size: .86rem; color: var(--navy-muted); }
.why-card { grid-column: span 5; background: linear-gradient(180deg, #0e1640, #0a1030); border-color: #1c2550; color: var(--body); font-size: .92rem; }
.why-card header { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.why-card .score { font-size: 3.4rem; font-weight: 800; letter-spacing: -0.04em; color: #ffcf6b; line-height: 1; font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.why-card header b { display: block; color: #fff; font-size: 1.05rem; }
.why-card header small { color: var(--muted); font-size: .84rem; line-height: 1.4; display: block; }
.why-card .pnote { color: var(--muted); }
.order-card { grid-column: span 7; }
.order-card h3 { margin: 8px 0 18px; font-size: 1.4rem; }
.sheet { margin: 0; border-radius: 0; overflow: hidden; border: 1px solid var(--line-light); box-shadow: 0 14px 40px rgba(10, 18, 48, .14); }
.files { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font: .84rem/1.4 var(--mono); color: var(--navy); }
.files li { display: flex; align-items: flex-start; gap: 10px; overflow-wrap: anywhere; }
.files svg { width: 18px; height: 18px; flex: none; color: var(--cyan-dark); }
.fmt-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; }
.fmt-card .pnote { grid-column: 1 / -1; margin: 0; }
.marks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.marks li { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; font-size: 1.02rem; white-space: nowrap; }
.marks li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex: none; }
.light .marks li { color: var(--navy); }
.marks.alt li { font-family: var(--mono); font-weight: 600; font-size: .95rem; color: var(--cyan); }
.marks.alt li::before { background: var(--orange); }
.marks.small li { font-size: .9rem; }

/* The council diagram */
.council svg { width: 100%; height: auto; overflow: visible; }
.council .links line { stroke: rgba(79, 209, 255, .16); stroke-width: 1; }
.council .danger { transform-box: fill-box; transform-origin: center; }
.council .pulses line { stroke: #4fd1ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 400; }
.council .file rect { fill: #0e1640; stroke: #f7931e; stroke-width: 1.5; }
.council .fn { fill: #fff; font: 600 14px var(--mono); }
.council .fs { fill: #b9c5e6; font: 400 12px var(--font); }
.council .nm { fill: #fff; font: 700 21px var(--font); }
.council .chair .nm { fill: #ffb35c; }
.council .rl { fill: #b9c5e6; font: 400 14px var(--font); }
.council .dot { fill: #fff; filter: drop-shadow(0 0 4px #9fe6ff); }
.council .chair .dot { fill: #ffcf99; filter: drop-shadow(0 0 5px #ffb35c); }
.council .bgstars circle { fill: #cdd9ff; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .council .pulses line { stroke-dasharray: 10 400; animation: outward 2.8s linear infinite; }
  .council .pulses line:nth-child(2) { animation-delay: .55s; }
  .council .pulses line:nth-child(3) { animation-delay: 1.1s; }
  .council .pulses line:nth-child(4) { animation-delay: 1.65s; }
  .council .pulses line:nth-child(5) { animation-delay: 2.2s; }
  .council .halo { animation: twinkle 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .council .mem:nth-of-type(2) .halo { animation-delay: -1s; }
  .council .mem:nth-of-type(3) .halo { animation-delay: -2s; }
  .council .mem:nth-of-type(4) .halo { animation-delay: -3s; }
  .council .ring { animation: dash 3s linear infinite; }
}
@keyframes outward { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -210; } }
.roster { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 36px); }
.roster li { padding: 20px 0 0; border-top: 1px solid var(--border-2); display: flex; flex-direction: column; }
.roster .star { width: 20px; height: 20px; color: var(--cyan); margin-bottom: 10px; filter: drop-shadow(0 0 7px var(--cyan)); }
.roster .chair .star { color: #ffb35c; filter: drop-shadow(0 0 7px #ffb35c); }
.roster b { display: block; color: #fff; font-size: 1.1rem; letter-spacing: .01em; }
.roster .chair b { color: #ffb35c; }
.roster .role { margin-top: 2px; color: var(--cyan); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.roster .chair .role { color: #ffb35c; }
.roster p { margin: 10px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* Bento grid */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); gap: 18px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; padding: 24px; overflow: hidden; border-radius: 0; background: var(--paper); border: 1px solid var(--line-light); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tile:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(10, 18, 48, .12); }
.tile h3 { font-size: 1.08rem; line-height: 1.3; }
.tile p { margin: 2px 0 0; font-size: .92rem; }
.dark-tile { background: radial-gradient(500px 300px at 70% 0%, rgba(30, 60, 180, .35), transparent 70%), #071038; border-color: #1c2550; color: var(--body); }
.light .dark-tile h3 { color: #fff; }
.t-map { grid-column: span 2; grid-row: span 2; justify-content: flex-start; }
.globe-wrap { position: relative; flex: 1; min-height: 220px; margin-top: 18px; border-radius: 0; overflow: hidden; }
.globe-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ping { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.ping.p1 { left: 28%; top: 38%; }
.ping.p2 { left: 47%; top: 30%; }
.ping.p3 { left: 64%; top: 52%; }
.t-wanted { grid-column: span 2; flex-direction: row; align-items: stretch; gap: 18px; }
.t-wanted .tt { flex: 1 1 40%; align-self: flex-end; }
.t-wanted .crop { flex: 1 1 60%; min-height: 180px; border-radius: 0; overflow: hidden; position: relative; }
.t-wanted .crop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 62%; }
.t-lib, .t-ai { grid-column: span 2; }
.t-lib { justify-content: center; }
.t-ai { flex-direction: row; align-items: flex-end; gap: 20px; }
.t-ai > :not(.bars) { flex: 1 1 auto; }
.t-ai .pk, .t-ai h3 { flex: none; }
.t-ai { display: grid; grid-template-columns: minmax(0, 1fr) 150px; grid-template-rows: auto auto; align-content: end; }
.t-ai .bars { grid-column: 2; grid-row: 1 / span 2; }
.orbit { position: relative; width: 120px; height: 120px; margin: 0 auto auto; }
.orbit .core { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 18px rgba(247, 147, 30, .7); }
.orbit .o { position: absolute; border: 1px dashed #9fb3d6; border-radius: 50%; }
.orbit .o1 { inset: 30px; }
.orbit .o2 { inset: 14px; }
.orbit .o3 { inset: 0; }
.orbit .o i { position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--cyan-dark); }
.orbit .o2 i { background: #b3122e; }
.ticker, .play, .meters { list-style: none; margin: 0 0 auto; padding: 0; display: grid; gap: 8px; }
.ticker li, .play li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 0; background: var(--surface-1); border: 1px solid var(--line-light); color: var(--navy); font-weight: 600; font-size: .9rem; }
.ticker li::before { content: "\2713"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--green-dark); color: #fff; font-size: 11px; font-weight: 800; }
.play li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-dark); }
.play li.wait { border-color: #f0a54a; background: rgba(247,147,30,.12); color: #ffc887; }
.play li.wait::before { background: var(--orange-dark); }
.meters li { display: grid; gap: 5px; font-size: .84rem; font-weight: 600; color: var(--navy); }
.meters i { display: block; height: 7px; border-radius: 0; background: #dfe5f1; position: relative; overflow: hidden; }
.meters i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cyan-dark), #2aa7d6); border-radius: 0; transform-origin: left; transform: scaleX(var(--v)); }
.sig { display: flex; align-items: center; gap: 12px; margin: 0 0 auto; }
.sig svg { width: 46px; height: 46px; padding: 10px; border-radius: 0; background: #e3f3fb; color: var(--cyan-dark); }
.sig span { padding: 6px 12px; border-radius: 0; background: #e9f7f1; color: var(--green-dark); font-weight: 700; font-size: .86rem; }
.radar { position: relative; width: 110px; height: 110px; margin: 0 auto auto; border-radius: 50%; border: 1px solid #c4cfe3; background: radial-gradient(circle, transparent 0 34%, #dfe5f1 35% 36%, transparent 37% 66%, #dfe5f1 67% 68%, transparent 69%); overflow: hidden; }
.radar i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(9, 109, 150, .4), transparent 25%); }
.radar::after { content: ""; position: absolute; left: 66%; top: 30%; width: 8px; height: 8px; border-radius: 50%; background: #b3122e; }
.bars { display: flex; align-items: flex-end; gap: 7px; height: 90px; }
.bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 0; background: linear-gradient(180deg, #2aa7d6, var(--cyan-dark)); transform-origin: bottom; }
@media (prefers-reduced-motion: no-preference) {
  .ping::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--orange); animation: ring 2.4s ease-out infinite; }
  .ping.p2::after { animation-delay: .8s; }
  .ping.p3::after { animation-delay: 1.6s; }
  .orbit .o { animation: spin 14s linear infinite; }
  .orbit .o2 { animation-duration: 9s; animation-direction: reverse; }
  .orbit .o1 { animation-duration: 6s; }
  .ticker li { animation: tick 6s var(--ease) infinite both; }
  .ticker li:nth-child(2) { animation-delay: 1s; }
  .ticker li:nth-child(3) { animation-delay: 2s; }
  .radar i { animation: spin 3.2s linear infinite; }
  .radar::after { animation: blink 3.2s ease-in-out infinite; }
  .play li.wait { animation: waitpulse 2s ease-in-out infinite; }
  .bars i { animation: barz 3.6s ease-in-out infinite alternate; }
  .bars i:nth-child(2n) { animation-delay: -1.2s; }
  .bars i:nth-child(3n) { animation-delay: -2.3s; }
  .js .meters i::after { transform: scaleX(0); transition: transform 1.4s var(--ease) .3s; }
  .js .t-std.in .meters i::after { transform: scaleX(var(--v)); }
  .sig span { animation: tick 4s var(--ease) infinite both; }
}
@keyframes ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
@keyframes tick { 0%, 8% { opacity: .35; } 18%, 80% { opacity: 1; } 95%, 100% { opacity: .35; } }
@keyframes waitpulse { 50% { box-shadow: 0 0 0 5px rgba(247, 147, 30, .22); } }
@keyframes barz { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

/* Numbers band */
.band { padding: clamp(56px, 7vw, 96px) 0; }
/* Compact stat line (inside the platform section) */
.statline { list-style: none; margin: clamp(30px, 4vw, 50px) 0 0; padding: clamp(26px, 3.4vw, 42px) 0 0; border-top: 1px solid var(--border-2); display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 2vw, 28px); }
.statline li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; }
.statline svg { width: 20px; height: 20px; color: var(--cyan); }
.statline li.o svg { color: var(--orange); }
.statline b { font-size: clamp(1.9rem, 1.3rem + 1.3vw, 2.7rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 35%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.statline li.o b { background: linear-gradient(180deg, #ffd29a 20%, var(--orange)); -webkit-background-clip: text; background-clip: text; }
.statline span { color: var(--muted); font-size: .82rem; line-height: 1.4; max-width: 13em; }
@media (max-width: 760px) { .statline { grid-template-columns: repeat(3, 1fr); row-gap: 26px; } }
@media (max-width: 440px) { .statline { grid-template-columns: repeat(2, 1fr); } }

.big-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 50px) clamp(20px, 2vw, 32px); margin-top: clamp(16px, 2.5vw, 30px); }
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stat .emblem { position: relative; width: 78px; height: 78px; display: grid; place-items: center; margin-bottom: 14px; }
.stat .emblem .ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; }
.stat .emblem .ring circle { stroke: var(--a); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 150 42; transform: rotate(-90deg); transform-origin: 50% 50%; opacity: .95; filter: drop-shadow(0 0 6px var(--a)); }
.stat .emblem .gi { position: relative; width: 30px; height: 30px; color: var(--a); }
.stat b { display: block; font-size: clamp(2.8rem, 1.8rem + 3.3vw, 4.6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 35%, var(--a)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .lbl { display: block; margin-top: 10px; color: var(--body); font-size: .98rem; max-width: 16em; }
.stat.c1 { --a: #4fd1ff; } .stat.c2 { --a: #5b8cff; } .stat.c3 { --a: #35d6ad; } .stat.c4 { --a: #4fd1ff; } .stat.c5 { --a: #5b8cff; } .stat.o { --a: #f7931e; }

/* Version 2 responsive */
@media (max-width: 1180px) {
  .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dec li { grid-template-columns: 30px minmax(0, 1fr) 9em minmax(0, .9fr); }
}
@media (max-width: 1023px) {
  .demo { grid-template-columns: minmax(0, 1fr); }
  .chat { height: 470px; }
  .appwin { height: 520px; }
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-media { display: none; }
  .js .sstep { opacity: 1; min-height: 0; }
  .sstep { min-height: 0; border-left-color: var(--border-2); }
  .js .sstep.on, .js .sstep.you.on { border-left-color: var(--border-2); }
  .sstep .n { color: var(--cyan); }
  .sstep.you .n { color: var(--orange); }
  .sshot { display: block; }
  .story-steps { padding-bottom: 0; }
  .why-card, .order-card { grid-column: 1 / -1; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-map { grid-row: auto; }
  .big-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app-side { display: none; }
  .scene { padding: 16px 14px; font-size: 12.5px; gap: 12px; }
  .sc-head .big { font-size: 32px; }
  .dec li { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .dec .o { display: none; }
  .packs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pack { padding: 10px; }
  .pack h5 { margin-bottom: 6px; }
  .tasks { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .task { padding: 12px; }
  .plan { flex-direction: column; text-align: center; padding: 20px 16px; gap: 12px; }
  .plan > img { width: 64px; height: 64px; }
  .plan .approve { margin-left: auto; margin-right: auto; }
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srow { grid-template-columns: minmax(0, 1fr) auto; }
  .srow span { display: none; }
  .grp li { grid-template-columns: minmax(0, 1fr) auto; }
  .grp span { display: none; }
  .why li { padding: 6px 8px; }
  .vs, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: auto !important; }
  .vs thead { display: none; }
  .vs tr { margin-bottom: 14px; border: 1px solid var(--line-light); border-radius: 0; overflow: hidden; }
  .vs tbody th { padding: 14px 16px 6px; border: 0; font-size: 1.05rem; }
  .vs tbody td { padding: 8px 16px 12px; border: 0; }
  .vs tbody td:nth-of-type(1)::before, .vs tbody td:nth-of-type(2)::before { display: none; }
  .vs tbody td:nth-of-type(1)::after { content: "By hand"; display: block; order: -1; }
  .vs tbody td { display: grid; gap: 2px; }
  .vs tbody td::after { grid-row: 1; font: 700 .7rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--navy-muted); }
  .vs tbody td:nth-of-type(2) { padding-top: 12px; }
  .vs tbody td:nth-of-type(2)::after { content: "With C.O.S.M.O Bot"; color: var(--cyan-dark); }
  .vs .you-row td:nth-of-type(2)::after { color: var(--orange-dark); }
  .vs .you-row { border-color: var(--line-light); }
  .fmt-card { grid-template-columns: minmax(0, 1fr); }
  .roster { grid-template-columns: minmax(0, 1fr); }
  .council .rl { display: none; }
  .council .nm { font-size: 26px; }
}
@media (max-width: 640px) {
  .chat { height: 440px; }
  .appwin { height: 480px; }
  .msg { font-size: .92rem; }
  .demo-ctrl { justify-content: flex-start; }
  .demo-tabs button { padding: 6px 10px; font-size: .82rem; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .t-map, .t-wanted, .t-lib, .t-ai { grid-column: auto; }
  .t-wanted { flex-direction: column; }
  .t-wanted .crop { min-height: 170px; }
  .t-ai { grid-template-columns: minmax(0, 1fr) 110px; }
  .big-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bs { padding: 20px 16px; }
  .bs span { font-size: .9rem; }
  .pcard { padding: 22px 18px; }
  .marks li { font-size: .95rem; padding: 8px 12px; }
  .hero .float-tag { position: relative; right: auto; top: auto; margin: 20px auto 0; }
  .appwin .url { margin-right: 4px; }
}

/* ===== Dark, square, presentation style (Ray 2026-11-01: darker background, no curved boxes, show off the bot) ===== */
.dark.alt { background: #060a22; }
.section.dark + .section.dark { border-top: 1px solid var(--border); }
.hl { color: var(--cyan); }
/* Morph scrollytelling (bot showcase) — laptop pinned centre, text morphs around it */
.morph { background:
  radial-gradient(150vw 52vh at 50% 118vh, rgba(79, 209, 255, .20), rgba(46, 104, 230, .13) 40%, transparent 70%),
  radial-gradient(70vw 70vh at 12% 6vh, rgba(104, 62, 205, .18), transparent 66%),
  radial-gradient(72vw 72vh at 90% 14vh, rgba(79, 209, 255, .12), transparent 68%);
  background-attachment: fixed; background-repeat: no-repeat; }
.morph-track { position: relative; height: 480vh; margin-top: -24vh; }
.morph-stage { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.morph-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.morph-sky i { position: absolute; left: var(--x); top: var(--y); width: var(--l); height: 2px; margin: 0; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 85%, #bfe9ff); border-radius: 2px; box-shadow: 0 0 10px 1px rgba(79,209,255,.65); transform-origin: 100% 50%; opacity: 0; will-change: transform, opacity; }
.morph-screen { z-index: 1; position: relative; width: min(58%, 1040px); aspect-ratio: 1208 / 700; margin: 0; }
.morph-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.morph-glass { position: absolute; left: 9.7%; top: 3.1%; width: 80.6%; height: 88.8%; overflow: hidden; z-index: 1; background: #000; }
/* whole screenshot always shown (never cropped), inside a thin black edge on a lit panel */
.morph-glass::before { content: ""; position: absolute; inset: 2.7% 1.9%; z-index: 0; background: #11172a; }
.morph-glass img { position: absolute; z-index: 1; inset: 2.7% 1.9%; width: 96.2%; height: 94.6%; object-fit: contain; object-position: center; border: 0; will-change: transform; }
.morph-glass::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle at 50% 1.4%, #22252d 0 2.5px, transparent 3px), linear-gradient(115deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 32%); box-shadow: inset 0 0 0 3px #000, inset 0 0 18px 4px rgba(0,0,0,.7); }
.morph-texts { position: absolute; inset: 0; pointer-events: none; }
.morph-texts .mstep { position: absolute; top: 50%; width: min(19%, 300px); opacity: 0; transform: translateY(-50%); will-change: transform, opacity; }
.morph-texts .mstep:nth-child(odd) { left: 2.5%; text-align: left; }
.morph-texts .mstep:nth-child(even) { right: 2.5%; text-align: right; }
.mstep .mno { display: block; font: 600 .82rem/1 var(--font); letter-spacing: .28em; color: var(--cyan); }
.mstep h3 { font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.6rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; margin: 14px 0 0; color: var(--ink); }
.mstep p { font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.5; color: var(--body); margin: 16px 0 0; font-weight: 300; }
html:not(.js) .morph-track, html:not(.js) .morph-stage { height: auto; }
html:not(.js) .morph-stage { position: static; display: block; }
html:not(.js) .morph-texts { position: static; }
html:not(.js) .morph-texts .mstep { position: static; transform: none !important; width: auto; opacity: 1 !important; text-align: left; padding: 20px 0; }
html:not(.js) .morph-glass img ~ img { display: none; }
@media (max-width: 860px) {
  .morph-track { height: auto; }
  .morph-stage { position: static; height: auto; display: block; padding: 0 16px; }
  .morph-screen { position: relative; top: auto; width: 100%; margin: 0 auto 26px; }
  .morph-texts { position: static; }
  .morph-texts .mstep { position: static; transform: none !important; width: auto; opacity: 1 !important; text-align: left !important; padding: 24px 0; }
  .morph-glass img ~ img { display: none; }
}

/* Architecture flow with real vendor logos */
.archx { position: relative; display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: clamp(18px, 2.4vw, 44px); align-items: stretch; }
.archx-flowlines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.archx-flowlines .fl { fill: none; stroke: rgba(79, 209, 255, .32); stroke-width: 1.4; stroke-dasharray: 5 9; vector-effect: non-scaling-stroke; }
.archx-flowlines .fl.down { stroke: rgba(79, 209, 255, .5); }
@media (prefers-reduced-motion: no-preference) { .archx-flowlines .fl { animation: fldash 1.3s linear infinite; } .archx-flowlines .fl.out { animation-delay: .25s; } }
@keyframes fldash { to { stroke-dashoffset: -14; } }
.archx-col, .archx-core { position: relative; z-index: 1; border: 1px solid var(--border-2); padding: clamp(18px, 2vw, 30px); background: rgba(4, 7, 22, .5); }
.archx-cap { display: block; font: 700 .72rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.archx-item { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border-2); }
.archx-item:nth-child(2) { border-top: 0; }
.archx-logos { display: flex; align-items: center; gap: 9px; flex: none; width: 84px; }
.archx-logos img { height: 20px; width: auto; max-width: 44px; object-fit: contain; opacity: .95; }
.archx-logos svg { width: 22px; height: 22px; color: var(--cyan); }
.archx-txt strong { display: block; color: var(--ink); font-size: 1rem; }
.archx-txt span { color: var(--muted); font-size: .85rem; }
.archx-core { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.archx-teams-card { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.archx-cap.center { margin-bottom: 16px; }
.archx-mark { width: 56px; height: auto; filter: drop-shadow(0 0 14px rgba(79, 209, 255, .4)); margin-bottom: 10px; }
.archx-server-name { color: var(--ink); font-size: 1.15rem; }
.archx-server-sub { color: var(--muted); font-size: .85rem; max-width: 17em; margin-top: 4px; }
.archx-flow { position: relative; width: 2px; height: 50px; margin: 20px auto; overflow: hidden; background: repeating-linear-gradient(var(--border-2) 0 5px, transparent 5px 11px); }
.archx-flow i { position: absolute; left: -1px; width: 4px; height: 12px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: flowdown 1.7s linear infinite; }
@keyframes flowdown { from { top: -14px; } to { top: 52px; } }
.archx-teams-label { font: 700 .7rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.archx-teams { color: var(--ink); font-size: 1.3rem; font-weight: 700; margin-top: 6px; text-shadow: 0 0 22px rgba(79, 209, 255, .45); }
@media (prefers-reduced-motion: reduce) { .archx-flow i { animation: none; } }
@media (max-width: 860px) { .archx { grid-template-columns: 1fr; gap: 20px; } .archx-core { order: 2; } .archx-flowlines { display: none; } }

/* Hunt radar + response plan (workflow) */
.radar { width: 340px; height: 340px; max-width: 100%; margin: 0 auto; }
.radar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.radar .rg { fill: none; stroke: rgba(79, 209, 255, .16); stroke-width: 1; }
.radar .sweep { transform-origin: 150px 150px; animation: radarspin 4s linear infinite; }
@keyframes radarspin { to { transform: rotate(360deg); } }
.radar .blip { fill: #4fd1ff; filter: drop-shadow(0 0 6px #4fd1ff); animation: radarblip 4s ease-in-out infinite; }
.radar .blip.b2 { animation-delay: 1s; } .radar .blip.b3 { animation-delay: 2.1s; } .radar .blip.b4 { animation-delay: 3.1s; }
@keyframes radarblip { 0%, 72%, 100% { opacity: .2; } 80% { opacity: 1; } }
.radar .rcore { fill: #9fe6ff; }
@media (prefers-reduced-motion: reduce) { .radar .sweep, .radar .blip { animation: none; } }
.rplan { list-style: none; margin: 0; padding: 0; max-width: 440px; }
.rplan li { display: flex; gap: 16px; padding: 0 0 26px; position: relative; }
.rplan li:last-child { padding-bottom: 0; }
.rplan li::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: -2px; width: 2px; background: rgba(79, 209, 255, .22); }
.rplan li:last-child::before { display: none; }
.rp-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); background: rgba(79, 209, 255, .08); }
.rp-ic svg { width: 20px; height: 20px; }
.rplan b { display: block; color: var(--ink); }
.rplan span { color: var(--muted); font-size: .9rem; }
.rplan .wait .rp-ic { border-color: var(--orange); color: var(--orange); background: rgba(247, 147, 30, .1); animation: waitpulse 2s ease-in-out infinite; }
.rplan .wait b { color: var(--orange); }
@keyframes waitpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(247, 147, 30, .45); } 55% { box-shadow: 0 0 0 9px rgba(247, 147, 30, 0); } }

/* Scope & Impact proximity rings */
.proxmap { width: 340px; height: 340px; max-width: 100%; margin: 0 auto; }
.proxmap svg { width: 100%; height: 100%; overflow: visible; }
.proxmap .pring { fill: none; stroke: rgba(79, 209, 255, .14); stroke-width: 1; }
.proxmap .ppath { fill: none; stroke: rgba(247, 147, 30, .65); stroke-width: 1.6; stroke-dasharray: 5 6; }
.proxmap .pnode { stroke: #04071a; stroke-width: 1.5; }
.proxmap .pnode.safe { fill: #4fd1ff; filter: drop-shadow(0 0 5px #4fd1ff); }
.proxmap .pnode.warn { fill: #ffcf5c; filter: drop-shadow(0 0 5px #ffb020); }
.proxmap .pcore-dot { fill: #ff5a5f; filter: drop-shadow(0 0 9px #ff5a5f); }
.proxmap .plabel.cap { fill: var(--muted); font: 500 11px var(--font); }
@media (prefers-reduced-motion: no-preference) { .proxmap .ppath { animation: fldash 1.4s linear infinite; } .proxmap .ppath.p2 { animation-delay: .5s; } }

/* Response playbook field */
.playfield { width: min(100%, 460px); margin: 0 auto; }
.playfield svg { width: 100%; height: auto; overflow: visible; }
.playfield .pf-lane rect { fill: rgba(79, 209, 255, .04); stroke: var(--border-2); stroke-width: 1; }
.playfield .pf-lane text { fill: var(--muted); font: 700 10px var(--font); letter-spacing: .1em; }
.playfield .pf-route { fill: none; stroke: rgba(247, 147, 30, .7); stroke-width: 2; stroke-dasharray: 6 7; }
.playfield .pf-play circle { fill: #0b1a45; stroke: var(--cyan); stroke-width: 1.5; }
.playfield .pf-play text { fill: var(--ink); font: 700 12px var(--font); }
.playfield .pf-play .pf-cap { fill: var(--body); font: 600 10px var(--font); }
.playfield .pf-play.wait circle { fill: #2a0c18; stroke: var(--orange); }
.playfield .pf-play.wait .pf-cap { fill: var(--orange); }
@media (prefers-reduced-motion: no-preference) { .playfield .pf-route { animation: fldash 1.3s linear infinite; } }

/* Views carousel (flip through interface screenshots) */
.carousel { position: relative; margin-top: clamp(24px, 3vw, 44px); padding: 0 56px; }
.caro-win { position: relative; overflow: hidden; }
.caro-track { position: relative; }
/* One full screen at a time: slides crossfade in place, so two half-screens are never shown. */
.caro-slide { position: absolute; top: 0; left: 0; width: 100%; margin: 0; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
.caro-slide.on { position: relative; opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
html:not(.js) .caro-slide { position: relative; opacity: 1; visibility: visible; margin-bottom: 24px; }
.caro-slide figcaption { margin-top: 16px; text-align: center; color: var(--body); font-size: 1rem; }
.caro-btn { position: absolute; top: 42%; transform: translateY(-50%); width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--border-2); background: rgba(10, 16, 48, .75); color: var(--ink); cursor: pointer; z-index: 2; }
.caro-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.caro-btn.prev { left: 0; } .caro-btn.next { right: 0; }
.caro-btn svg { width: 22px; height: 22px; }
.caro-btn.prev svg { transform: scaleX(-1); }
.caro-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.caro-dots button { width: 9px; height: 9px; border: 0; background: var(--border-2); cursor: pointer; padding: 0; transition: width .2s, background-color .2s; }
.caro-dots button.on { background: var(--cyan); width: 26px; }
@media (max-width: 640px) { .carousel { padding: 0; } .caro-btn { width: 38px; height: 38px; } .caro-btn.prev { left: 2px; } .caro-btn.next { right: 2px; } }
/* Every screen shows in full, whatever its shape, inside a uniform frame (never cropped). */
.caro-slide .shot-img { aspect-ratio: 1600 / 929; }
.caro-slide .shot-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #02040f; }

/* Chatbot section */
.chatx { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(28px, 3.5vw, 48px); }
.chatx-shot { margin: 0; display: flex; justify-content: center; }
.chatx .botcard { width: 100%; max-width: 400px; border: 1px solid var(--border-2); background: #060a1d; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(79,209,255,.08); }
.botcard-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(115deg, #0b1230 0%, #241a3b 55%, #3a2231 100%); border-bottom: 1px solid var(--border-2); }
.botcard-ava { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid rgba(255,255,255,.22); }
.botcard-id b { display: block; color: var(--ink); font-size: 1.04rem; }
.botcard-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .82rem; margin-top: 3px; }
.botcard-status i { width: 8px; height: 8px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 8px rgba(53,208,127,.9); flex: none; }
.botcard-body { display: block; width: 100%; height: auto; }
.chatx-copy .cap-list.tight { grid-template-columns: 1fr; margin-top: 0; }
.chatx-copy .cap-list.tight li:first-child { border-top: 0; padding-top: 0; }
.chatx-ai { margin-top: 26px; }
.chatx-ai-label { display: block; font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.aichips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); }
.aichips li { display: flex; gap: 11px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--border-2); }
.aichips svg { width: 19px; height: 19px; color: var(--cyan); flex: none; margin-top: 2px; }
.aichips b { display: block; color: var(--ink); font-size: .92rem; font-weight: 600; }
.aichips small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; line-height: 1.4; }
@media (max-width: 860px) { .chatx { grid-template-columns: 1fr; } .chatx-shot { order: -1; } }
@media (max-width: 520px) { .aichips { grid-template-columns: 1fr; } .aichips li:last-child { grid-column: auto; } }

/* Ingestion section */
.ingest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 28px); margin-top: clamp(28px, 3.5vw, 48px); align-items: start; }
.ingest-group { border: 1px solid var(--border-2); background: rgba(10,16,48,.4); padding: clamp(18px, 2vw, 26px); }
.ingest-group h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.06rem; color: var(--ink); }
.ingest-group h3 svg { width: 20px; height: 20px; color: var(--cyan); flex: none; }
.ingest-group ul { list-style: none; margin: 0; padding: 0; }
.ingest-group li { padding: 13px 0; border-top: 1px solid var(--border-2); }
.ingest-group li b { display: block; color: var(--ink); font-weight: 600; font-size: .95rem; }
.ingest-group li span { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px; line-height: 1.45; }
.ingest-note { max-width: 760px; margin: clamp(26px, 3vw, 40px) auto 0; text-align: center; color: var(--body); font-size: 1.02rem; line-height: 1.6; }
@media (max-width: 880px) { .ingest-grid { grid-template-columns: 1fr; } }

.showcase { background: radial-gradient(1200px 500px at 50% 0, rgba(79,209,255,.08), transparent 70%), var(--base); }
.slide { margin: 0 auto clamp(40px, 5vw, 64px); max-width: 1140px; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-areas: "head shot" "calls shot"; column-gap: clamp(32px, 4vw, 60px); row-gap: 6px; align-items: start; }
.slide .slide-head { grid-area: head; margin-bottom: 6px; }
.slide .shot { grid-area: shot; align-self: center; }
.slide .callouts { grid-area: calls; }
.slide:nth-of-type(even) { grid-template-areas: "shot head" "shot calls"; }
.slide-head { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; margin-bottom: 28px; max-width: 900px; }
.slide-no { font: 700 56px/1 var(--font); color: var(--orange); letter-spacing: -.04em; }
.slide-no small { display: block; font-size: 13px; letter-spacing: .14em; color: var(--muted); margin-top: 8px; font-weight: 600; }
.slide-head h3 { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); line-height: 1.1; margin-bottom: 10px; }
.slide-head p { color: var(--body); font-size: 1.125rem; margin: 0; max-width: 46em; }
.shot { margin: 0; border: 1px solid var(--border-2); background: #02040f; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 40px 120px rgba(0,0,0,.6), 0 0 120px rgba(79,209,255,.08); }
.shot-bar { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--border); background: #070b20; }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a3150; }
.shot-bar span { margin-left: 10px; font: 600 11px/1 var(--font); letter-spacing: .14em; color: var(--muted); }
.shot-img { position: relative; }
.shot-img img { width: 100%; }
.pin { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #1a0d00; font: 800 15px/34px var(--font); text-align: center; box-shadow: 0 0 0 4px rgba(247,147,30,.28), 0 6px 18px rgba(0,0,0,.5); }
.pin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--orange); animation: pinpulse 2.4s var(--ease) infinite; }
@keyframes pinpulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .pin::after { animation: none; } }
.callouts { list-style: none; margin: 0; padding: 18px 0 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 0; }
.callouts li { display: flex; gap: 12px; padding: 14px 0 0; color: var(--body); font-size: .96rem; line-height: 1.5; border-top: 2px solid var(--border-2); margin-right: 0; }
.callouts li:first-child { border-top-color: var(--orange); }
.callouts b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #1a0d00; font: 800 13px/26px var(--font); text-align: center; }
@media (max-width: 900px) {
  .slide, .slide:nth-of-type(even) { grid-template-columns: 1fr; grid-template-areas: "head" "shot" "calls"; row-gap: 16px; }
  .callouts { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .callouts li { padding-right: 16px; }
  .slide-head { grid-template-columns: 1fr; gap: 10px; }
  .slide-no { font-size: 40px; }
}
@media (max-width: 560px) {
  .callouts { grid-template-columns: 1fr; }
  .pin { width: 22px; height: 22px; font-size: 11px; line-height: 22px; }
}
@media (max-width: 700px) {
  .buy { grid-template-columns: minmax(0, 1fr); }
  .buy-card { min-width: 0; max-width: 100%; padding: 24px; }
  .device-laptop .base { margin: 0 -3%; }
  .buy-card * { overflow-wrap: anywhere; }
  .feature-media { overflow: hidden; padding-bottom: 6px; }
  html, body { overflow-x: clip; }
}

/* Intro: what it is / who it's for / how it solves problems (clean, no boxes) */
.intro .section-head { max-width: 860px; }
.intro .section-head h2 { max-width: 17em; }
.built-for { margin: 2px 0 clamp(44px, 6vw, 72px); padding-bottom: clamp(44px, 6vw, 72px); border-bottom: 1px solid var(--border-2); font-size: 1.02rem; color: var(--body); line-height: 1.9; max-width: 56em; }
.bf-label { margin-right: 16px; font: 600 .78rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.eyebrow-mark { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; }
.solves { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 4vw, 54px); }
.solve-no { display: block; font: 800 1.1rem/1 var(--font); letter-spacing: .1em; color: var(--orange); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--orange); width: max-content; }
.solve .prob { font-size: 1.28rem; font-weight: 700; color: var(--ink); line-height: 1.25; margin: 0 0 10px; }
.solve .sol { color: var(--body); font-size: 1rem; line-height: 1.62; margin: 0; }
@media (max-width: 880px) { .solves { grid-template-columns: 1fr; gap: 34px; } }

/* ===== Living hero: an animated C.O.S.M.O Overview ===== */
.live { position: relative; background: #061024; border: 1px solid var(--border-2); box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 0 90px rgba(79,209,255,.10); overflow: hidden; }
.live-chrome { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: linear-gradient(180deg,#0b1430,#081026); border-bottom: 1px solid var(--border-2); }
.live-chrome .cd { width: 9px; height: 9px; border-radius: 50%; background: #2a3556; }
.live-chrome .cd:nth-child(1){ background:#ff5f57 } .live-chrome .cd:nth-child(2){ background:#febc2e } .live-chrome .cd:nth-child(3){ background:#28c840 }
.live-name { margin-left: 10px; font: 600 .82rem/1 var(--font); color: #aab6d8; letter-spacing: .02em; }
.live-on { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 700 .66rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #7ff0b0; }
.live-on i { width: 7px; height: 7px; border-radius: 50%; background: #22e07a; box-shadow: 0 0 8px #22e07a; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .25; } }
.live-main { display: flex; height: clamp(300px, 33vw, 410px); }
.live-sky { position: relative; flex: 1 1 auto; overflow: hidden; background: radial-gradient(130% 90% at 50% 125%, #0c1c40 0%, #061024 62%); }
.globe { position: absolute; left: 50%; top: 52%; transform: translateX(-50%); width: 158%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 42% 30%, #244a80 0%, #16305e 34%, #0c1f42 58%, #07122a 100%); box-shadow: inset 0 40px 90px rgba(79,209,255,.10), inset -30px -30px 90px rgba(0,0,0,.55), 0 -6px 60px rgba(79,209,255,.22); }
.globe-lights, .globe-grid { position: absolute; inset: 0; border-radius: 50%; -webkit-mask: radial-gradient(circle at 40% 34%, #000 58%, transparent 75%); mask: radial-gradient(circle at 40% 34%, #000 58%, transparent 75%); }
.globe-lights { background: radial-gradient(rgba(255,196,110,.5) .6px, transparent 1.2px) 0 0 / 10px 10px; opacity: .55; animation: globe-roll 44s linear infinite; }
.globe-grid { background: repeating-linear-gradient(90deg, rgba(79,209,255,.10) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, rgba(79,209,255,.055) 0 1px, transparent 1px 24px); animation: globe-roll2 44s linear infinite; }
.globe-rim { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 3px 0 0 rgba(160,235,255,.7), inset 0 0 26px 2px rgba(79,209,255,.35); }
@keyframes globe-roll { to { background-position: -560px 0; } }
@keyframes globe-roll2 { to { background-position: -560px 0, -560px 0; } }
.tp { position: absolute; z-index: 2; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: tp-pulse 2.4s ease-out infinite; }
@keyframes tp-pulse { 0%{ box-shadow:0 0 0 0 rgba(247,147,30,.55)} 70%,100%{ box-shadow:0 0 0 15px rgba(247,147,30,0)} }
.tp1{ left:22%; top:41% } .tp2{ left:63%; top:35%; background:#ff5a5f; animation-delay:.6s } .tp3{ left:45%; top:58%; animation-delay:1.1s } .tp4{ left:78%; top:52%; background:#ff5a5f; animation-delay:1.7s }
.arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }
.arc { fill: none; stroke: rgba(127,227,255,.4); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 7 320; stroke-dashoffset: 327; animation: arc-run 3.2s linear infinite; }
.arc.a2 { stroke: rgba(247,147,30,.55); animation-duration: 3.8s; animation-delay: 1s; } .arc.a3 { animation-duration: 2.8s; animation-delay: 1.8s; }
@keyframes arc-run { to { stroke-dashoffset: -7; } }
.bars { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; display: flex; align-items: flex-end; gap: 2px; padding: 0 12px 12px; z-index: 3; pointer-events: none; }
.bars i { flex: 1 1 0; min-width: 0; height: 18%; background: linear-gradient(180deg,#5a90ff,#2a5fd0); opacity: .9; animation: bar-eq 1.6s ease-in-out infinite alternate; }
.bars i.o { background: linear-gradient(180deg,#ffb84d,#f7931e) } .bars i.r { background: linear-gradient(180deg,#ff7a7f,#ff3b41) }
@keyframes bar-eq { to { height: var(--h,70%); } }
.live-metric { position: absolute; left: 16px; top: 14px; z-index: 4; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.live-metric b { display: block; font: 800 2.5rem/1 var(--font); color: var(--orange); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.live-metric span { font: 600 .62rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: #a7b6dc; }
.live-feed { flex: 0 0 clamp(154px, 15vw, 192px); border-left: 1px solid var(--border-2); background: #070f24; display: flex; flex-direction: column; }
.feed-head { padding: 11px 14px; font: 700 .6rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #8ea0cc; border-bottom: 1px solid var(--border-2); }
.feed-mask { position: relative; flex: 1 1 auto; overflow: hidden; -webkit-mask: linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent); mask: linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent); }
.feed-list { list-style: none; margin: 0; padding: 0; animation: feed-scroll 20s linear infinite; }
.live:hover .feed-list { animation-play-state: paused; }
.feed-list li { padding: 11px 14px; border-bottom: 1px solid rgba(140,170,255,.08); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 3px 10px; align-items: center; }
.feed-list .sev { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.feed-list .sev.r { background: #ff3b41 } .feed-list .sev.b { background: #5a90ff }
.feed-list .who { grid-column: 2; font: 700 .82rem/1.2 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.feed-list .what { grid-column: 2; font: .72rem/1.3 var(--font); color: #8ea0cc; } .feed-list .what b { color: #c6d2f0; font-weight: 700; }
@keyframes feed-scroll { to { transform: translateY(-50%); } }
@media (max-width: 760px){ .live-main { height: 320px; } .live-feed { flex-basis: 150px; } }
@media (prefers-reduced-motion: reduce){ .globe-lights,.globe-grid,.arc,.bars i,.feed-list,.tp,.live-on i { animation: none !important; } .feed-list { transform: none; } .bars i { height: var(--h,60%); } }

/* Real MacBook frame (logo wiped) for the carousel and close-ups; screenshots show in full, never cropped */
.mbk { position: relative; width: 100%; max-width: 1040px; margin: 0 auto; aspect-ratio: 1208 / 700; }
.mbk-glass { position: absolute; left: 9.7%; top: 3.1%; width: 80.6%; height: 88.8%; overflow: hidden; background: #000; z-index: 1; }
/* the screen sits inside a thin black edge with a lit panel behind it, so a dark app still reads as a real display */
.mbk-glass::before { content: ""; position: absolute; inset: 2.7% 1.9%; z-index: 0; background: #11172a; }
.mbk-glass img { display: block; position: absolute; z-index: 1; inset: 2.7% 1.9%; width: 96.2%; height: 94.6%; object-fit: contain; object-position: center; border: 0; }
.mbk-glass::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle at 50% 1.4%, #22252d 0 2.5px, transparent 3px), linear-gradient(115deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 32%); box-shadow: inset 0 0 0 3px #000, inset 0 0 18px 4px rgba(0,0,0,.7); }
.mbk-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.feature-media .mbk { max-width: none; }



/* Ask in plain language: a large avatar, the real bot window hovering at her bottom right, the larger chat page underneath with its buttons pointed out. */
.chatx { grid-template-columns: minmax(300px, 400px) 1fr; align-items: center; }
.botduo { position: relative; display: block; width: 100%; max-width: 360px; height: 520px; margin: 0; }
.botduo .bigava { position: absolute; left: 0; top: 0; width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255, 255, 255, .88); box-shadow: 0 0 0 12px rgba(79, 209, 255, .07), 0 0 90px rgba(247, 147, 30, .32); }
.botduo .botwin { position: absolute; left: 132px; top: 130px; width: 228px; height: auto; border: 1px solid var(--border-2); box-shadow: 0 34px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(79, 209, 255, .08); animation: botfloat 7s ease-in-out infinite alternate; }
@keyframes botfloat { from { transform: translateY(-7px); } to { transform: translateY(9px); } }
@media (prefers-reduced-motion: reduce) { .botduo .botwin { animation: none; } }
@media (max-width: 860px) {
  .chatx { grid-template-columns: 1fr; }
  .botduo { height: 600px; max-width: 360px; margin: 0 auto; }
  .botduo .bigava { width: 210px; height: 210px; }
  .botduo .botwin { left: 120px; top: 150px; width: 240px; }
}


/* The Overview screen is pinned while you scroll. Four statements swap around it and the spiral galaxy behind it turns with the scroll (and back when you scroll up). */
.spin { position: relative; background: transparent; }
.spin-track { position: relative; height: 500vh; }
.spin-stage { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.spin .galaxy { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.spin .galaxy img { position: absolute; left: 50%; top: 50%; width: min(1900px, 150vw); max-width: none; height: auto; opacity: 1; transform: translate(-50%, -50%) perspective(1500px) rotateX(var(--gt, 0deg)) rotate(var(--gx, 0deg)) scale(var(--gs, 1)); will-change: transform; -webkit-mask-image: radial-gradient(circle, #000 50%, transparent 70%); mask-image: radial-gradient(circle, #000 50%, transparent 70%); }
.spin-screen { position: relative; z-index: 1; width: min(49%, 920px); margin: 0; }
.spin-glass { position: relative; width: 100%; aspect-ratio: 1760 / 1105; overflow: hidden; background: #04071a; border: 1px solid var(--border-2); box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
.spin-glass img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; will-change: transform; }
.spin-texts { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.spin-texts .ostep { position: absolute; top: 50%; width: min(21%, 320px); opacity: 0; transform: translateY(-50%); will-change: transform, opacity; }
.spin-texts .ostep:nth-child(odd) { left: 2%; text-align: left; }
.spin-texts .ostep:nth-child(even) { right: 2%; text-align: right; }
.spin-texts .mno { display: block; font: 700 .8rem/1 var(--font); letter-spacing: .26em; color: var(--orange); }
.spin-texts h3 { font-size: clamp(1.3rem, .9rem + 1.3vw, 2rem); line-height: 1.12; margin: 12px 0 0; color: var(--ink); }
.spin-texts p { margin: 12px 0 0; font-size: clamp(.92rem, .88rem + .22vw, 1.05rem); line-height: 1.55; color: var(--body); }
html:not(.js) .spin-track { height: auto; } html:not(.js) .spin-stage { position: static; height: auto; display: block; }
html:not(.js) .spin-texts { position: static; } html:not(.js) .spin-texts .ostep { position: static; opacity: 1; transform: none; width: auto; padding: 18px 24px; text-align: left; }
@media (max-width: 860px) {
  .spin-track { height: auto; }
  .spin-stage { position: relative; height: auto; display: block; padding: 40px 16px 28px; overflow: hidden; }
  .spin .galaxy img { width: 230vw; }
  .spin-screen { width: 100%; }
  .spin-glass img ~ img { display: none; }
  .spin-texts { position: relative; inset: auto; margin-top: 24px; }
  .spin-texts .ostep { position: static; opacity: 1 !important; transform: none !important; width: auto; text-align: left !important; padding: 20px 0; border-top: 1px solid var(--border); }
}

/* The hero ends with its buttons; they need room before the next section (the trust strip that used to sit here moved into "What to expect"). */
.hero { padding-bottom: clamp(56px, 7vw, 96px); }


/* The Constellation: a swirling star nebula. The stars turn around the file and the five members drift on their own orbits (js/site.js, canvas). */
.nebula { position: relative; width: 100%; aspect-ratio: 600 / 470; }
.nebula .neb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 50%, transparent 98%); mask-image: radial-gradient(ellipse closest-side at center, #000 50%, transparent 98%); }
.neb-file { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 12px 22px; text-align: center; background: #0e1640; border: 1.5px solid #f7931e; box-shadow: 0 0 40px rgba(247, 147, 30, .25); }
.neb-file b { display: block; color: #fff; font: 600 14px var(--mono); white-space: nowrap; }
.neb-file span { display: block; margin-top: 4px; color: #b9c5e6; font: 400 12px var(--font); }
.neb-member { --c: #7ec8ff; position: absolute; left: 0; top: 0; z-index: 2; width: 92px; height: 92px; will-change: transform; pointer-events: none; }
.neb-emblem { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px var(--c)); }
.neb-emblem .disc { fill: rgba(6, 10, 34, .88); stroke: var(--c); stroke-opacity: .35; stroke-width: 1; }
.neb-emblem .rim { fill: none; stroke: var(--c); stroke-opacity: .75; stroke-width: 1.3; }
.neb-emblem .rg { fill: none; stroke: var(--c); transform-box: fill-box; transform-origin: center; }
.neb-emblem .rg.a { stroke-opacity: .7; stroke-width: 3.2; stroke-dasharray: 1.2 5.2; animation: nebspin 60s linear infinite; }
.neb-emblem .rg.b { stroke-opacity: .5; stroke-width: 1.2; stroke-dasharray: 10 7 2 7; animation: nebspin 45s linear infinite reverse; }
.neb-emblem .gl { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.neb-emblem .gl circle { fill: var(--c); stroke: none; }
.neb-emblem .gl .fl { fill: var(--c); fill-opacity: .22; stroke: var(--c); }
@keyframes nebspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .neb-emblem .rg { animation: none; } }
.neb-member b { position: absolute; left: 50%; top: 100px; transform: translateX(-50%); color: #fff; font: 700 19px var(--font); white-space: nowrap; text-shadow: 0 0 14px rgba(4, 7, 26, .95), 0 0 4px rgba(4, 7, 26, .9); }
.neb-member .gk { font: italic 400 22px Georgia, 'Times New Roman', serif; color: var(--c); margin-right: 4px; }
.neb-member.up b { top: auto; bottom: 100px; }
.neb-member.chair b { color: #ffb35c; }
@media (max-width: 860px) { .neb-member { width: 68px; height: 68px; } .neb-member b { font-size: 15px; top: 74px; } .neb-member .gk { font-size: 17px; } .neb-member.up b { bottom: 74px; } .neb-file b { font-size: 12px; } }

/* The star field fills the whole Constellation section, behind the text. */
.section.dark > canvas.neb-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }


/* Runs anywhere: real brand logos in colour on pale tiles, a colour per column, and a row of platform logos under the server. */
.archx-logos { width: auto; min-width: 0; gap: 6px; flex: none; }
.archx-logos .lt, .archx-os .lt { display: grid; place-items: center; width: 46px; height: 46px; background: #eef3ff; border-radius: 0; flex: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.archx-logos .lt img, .archx-os .lt img { width: 28px; height: 28px; max-width: none; object-fit: contain; opacity: 1; }
.archx-os { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.archx-os .lt { width: 40px; height: 40px; }
.archx-os .lt img { width: 24px; height: 24px; }
.archx-item { min-height: 76px; }
.archx-col.in { border-top: 3px solid #4fd1ff; background: linear-gradient(180deg, rgba(79, 209, 255, .09), rgba(4, 7, 26, .55) 40%); }
.archx-col.ai { border-top: 3px solid #a78bfa; background: linear-gradient(180deg, rgba(167, 139, 250, .12), rgba(4, 7, 26, .55) 40%); }
.archx-col.ai .archx-cap { color: #c4b5fd; }
.archx-core { border-top: 3px solid #f7931e; background: radial-gradient(420px 300px at 50% 28%, rgba(247, 147, 30, .12), rgba(4, 7, 26, .55) 70%); }
.archx-core .archx-cap { color: #ffb35c; }
.archx-mark { width: 72px; filter: drop-shadow(0 0 20px rgba(247, 147, 30, .45)) drop-shadow(0 0 14px rgba(79, 209, 255, .35)); }
.archx-teams { text-shadow: 0 0 22px rgba(247, 147, 30, .5); }
.archx-teams-label { color: #ffb35c; }
.archx-flowlines .fl { stroke: rgba(79, 209, 255, .5); }
.archx-flowlines .fl.out { stroke: rgba(167, 139, 250, .55); }
.archx-flowlines .fl.down { stroke: rgba(247, 147, 30, .6); }
@media (max-width: 1180px) { .archx-logos .lt { width: 40px; height: 40px; } .archx-logos .lt img { width: 24px; height: 24px; } .archx-item { gap: 12px; } }
@media (max-width: 520px) { .archx-item { flex-direction: column; align-items: flex-start; gap: 10px; } }
/* logos sit above their text so the text keeps the full column width */
.archx-item { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 0; min-height: 0; }
.archx-logos { flex-wrap: wrap; }
@media (max-width: 520px) { .archx-item { gap: 12px; } }

/* dark tiles, not white boxes: the logos sit on a faint tint with a thin edge */
.archx-logos .lt, .archx-os .lt { background: rgba(160, 190, 255, .07); border: 1px solid rgba(160, 190, 255, .22); box-shadow: none; }

/* rows with many tools: smaller tiles that wrap, and text tiles for tools without a logo file */
.archx-logos { flex-wrap: wrap; }
.archx-logos .lt { width: 42px; height: 42px; }
.archx-logos .lt img { width: 24px; height: 24px; }
.archx-logos .lt.tx { width: auto; min-width: 42px; padding: 0 8px; }
.archx-logos .lt.tx span { font: 700 .62rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #cfe1ff; white-space: nowrap; }
.archx-logos .lt.tx:nth-of-type(n) { border-color: rgba(160, 190, 255, .3); }

/* The AI agents read as constellations, not coins: no disc, no rings, no crosshairs. Just the drawn figure, stars joined by faint lines, in the member's colour. */
.neb-member { width: 128px; height: 128px; }
.neb-emblem { filter: drop-shadow(0 0 7px var(--c)); }
.neb-emblem .gl { stroke: var(--c); stroke-opacity: .75; stroke-width: 1.1; }
.neb-emblem .gl circle { fill: #fff; stroke: none; filter: drop-shadow(0 0 3px var(--c)); animation: nebtw 3.2s ease-in-out infinite; }
.neb-emblem .gl circle:nth-of-type(2n) { animation-delay: -1.1s; }
.neb-emblem .gl circle:nth-of-type(3n) { animation-delay: -2.1s; }
.neb-emblem .gl .fl { fill: var(--c); fill-opacity: .12; stroke: var(--c); stroke-opacity: .8; }
@keyframes nebtw { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .neb-emblem .gl circle { animation: none; } }
.neb-member b { top: 128px; }
.neb-member.up b { bottom: 128px; }
@media (max-width: 860px) { .neb-member { width: 92px; height: 92px; } .neb-member b { top: 92px; } .neb-member.up b { bottom: 92px; } }

/* The file under study is a malware body in the nebula (a dark star with a red corona, an accretion ring and a hazard mark), not a box. */
.neb-mal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 150px; text-align: center; pointer-events: none; }
.neb-mal-svg { display: block; width: 150px; height: 150px; margin: 0 auto; overflow: visible; filter: drop-shadow(0 0 16px rgba(255, 70, 60, .55)); }
.neb-mal-svg .cor { transform-box: fill-box; transform-origin: center; animation: malpulse 3.6s ease-in-out infinite; }
.neb-mal-svg .acc { transform-box: fill-box; transform-origin: center; animation: nebspin 40s linear infinite; }
.neb-mal-svg .bzg { transform-box: view-box; transform-origin: 50px 50px; animation: nebspin 90s linear infinite reverse; }
.neb-mal-svg .bz { stroke-dasharray: 52 20; }
@keyframes malpulse { 0%, 100% { opacity: .75; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .neb-mal-svg .cor, .neb-mal-svg .acc, .neb-mal-svg .bzg { animation: none; } }
.neb-mal-name { position: absolute; left: 50%; top: 142px; transform: translateX(-50%); white-space: nowrap; text-shadow: 0 0 12px rgba(4, 7, 26, .95), 0 0 4px rgba(4, 7, 26, .9); }
.neb-mal-name b { display: block; color: #ffd0c2; font: 600 13px var(--mono); }
.neb-mal-name i { display: block; margin-top: 2px; color: #b9c5e6; font: normal 400 12px var(--font); }
@media (max-width: 860px) { .neb-mal, .neb-mal-svg { width: 110px; } .neb-mal-svg { height: 110px; } .neb-mal-name { top: 104px; } .neb-mal-name b { font-size: 11px; } }

/* Agent cards under the Constellation: one card per member, with its own constellation, Greek letter, role and job. */
.roster.agentcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 5vw, 64px); }
.agent-card { --c: #7ec8ff; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 18px 24px; border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); border-top: 3px solid var(--c); background: radial-gradient(260px 200px at 50% 22%, color-mix(in srgb, var(--c) 16%, transparent), rgba(4, 7, 26, .6) 70%); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.agent-card .ac-art { width: 132px; height: 132px; margin-bottom: 8px; filter: drop-shadow(0 0 8px var(--c)); }
.agent-card .ac-art svg { width: 100%; height: 100%; overflow: visible; }
.agent-card .gl { fill: none; stroke: var(--c); stroke-opacity: .8; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.agent-card .gl circle { fill: #fff; stroke: none; animation: nebtw 3.2s ease-in-out infinite; }
.agent-card .gl circle:nth-of-type(2n) { animation-delay: -1.1s; }
.agent-card .gl .fl { fill: var(--c); fill-opacity: .14; stroke: var(--c); }
.agent-card .ac-gk { font: italic 400 26px Georgia, 'Times New Roman', serif; color: var(--c); line-height: 1; }
.agent-card b { display: block; margin-top: 4px; color: #fff; font-size: 1.25rem; }
.agent-card .role { display: block; margin-top: 8px; color: var(--c); font: 700 .7rem/1.4 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.agent-card p { margin: 12px 0 0; color: var(--body); font-size: .92rem; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .agent-card .gl circle { animation: none; } }
@media (max-width: 1100px) { .roster.agentcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .roster.agentcards { grid-template-columns: 1fr; } .agent-card .ac-art { width: 110px; height: 110px; } }

/* Duotone icons: C.O.S.M.O blue line work with an orange accent, on a glowing blue tile. */
.d .p { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.d .a { fill: none; stroke: #f7931e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.d .f { fill: #f7931e; stroke: none; }
.cap-list .bi { width: 48px; height: 48px; padding: 9px; margin-top: 0; box-sizing: border-box; color: #6fdcff; background: linear-gradient(145deg, rgba(79, 209, 255, .2), rgba(30, 60, 190, .14)); border: 1px solid rgba(79, 209, 255, .4); box-shadow: 0 0 22px rgba(79, 209, 255, .14), inset 0 -2px 0 rgba(247, 147, 30, .55); }
.cap-list li { gap: 18px; align-items: center; }
.col .ic { width: 56px; height: 56px; color: #6fdcff; background: linear-gradient(145deg, rgba(79, 209, 255, .22), rgba(30, 60, 190, .16)); border: 1px solid rgba(79, 209, 255, .4); box-shadow: 0 0 26px rgba(79, 209, 255, .16), inset 0 -2px 0 rgba(247, 147, 30, .6); }
.col .ic svg { width: 32px; height: 32px; }
.statline svg { width: 36px; height: 36px; color: #6fdcff; margin-bottom: 6px; filter: drop-shadow(0 0 8px rgba(79, 209, 255, .5)); }
.statline li.o svg { color: #ffb35c; }

/* Agent cards in the C.O.S.M.O colours: deep navy, blue figure, orange labels and edge. */
.agent-card { border: 1px solid rgba(79, 209, 255, .3); border-top: 3px solid transparent; border-image: linear-gradient(90deg, #4fd1ff, #2f6bff 55%, #f7931e) 1; border-image-slice: 1 1 1 1; background: radial-gradient(260px 200px at 50% 20%, rgba(47, 107, 255, .28), rgba(4, 8, 32, .88) 72%); }
.agent-card .gl { stroke: #6fdcff; stroke-opacity: .9; }
.agent-card .gl circle { fill: #fff; }
.agent-card .gl .fl { fill: #f7931e; fill-opacity: .2; stroke: #f7931e; }
.agent-card .ac-art { filter: drop-shadow(0 0 10px rgba(79, 209, 255, .6)); }
.agent-card .ac-gk { color: #f7931e; }
.agent-card .role { color: #ffb35c; }
.agent-card b { color: #fff; }
.agent-card p { color: #c9d4f2; }
.agent-card:first-child .ac-art { filter: drop-shadow(0 0 12px rgba(247, 147, 30, .7)); }

/* Artwork: the capabilities orbiting the C.O.S.M.O mark; the air gap; the layers around a signed, read-only core. */
.orbit-wrap { display: flex; justify-content: center; margin: clamp(10px, 2vw, 28px) 0 clamp(6px, 2vw, 24px); height: calc(560px * var(--ok, 1)); }
.orbit { --ok: 1; position: relative; width: 560px; height: 560px; flex: none; transform: scale(var(--ok)); transform-origin: top center; }
@media (max-width: 760px) { .orbit-wrap { --ok: .62; } .orbit { --ok: .62; } }
@media (max-width: 440px) { .orbit-wrap { --ok: .52; } .orbit { --ok: .52; } }
.orbit .ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgba(79, 209, 255, .35); transform: translate(-50%, -50%); }
.orbit .ring.r1 { width: 220px; height: 220px; } .orbit .ring.r2 { width: 350px; height: 350px; border-color: rgba(79, 209, 255, .26); } .orbit .ring.r3 { width: 500px; height: 500px; border-color: rgba(247, 147, 30, .3); }
.orbit .glow { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(47, 107, 255, .5), rgba(247, 147, 30, .12) 50%, transparent 70%); }
.orbit .core { position: absolute; left: 50%; top: 50%; width: 76px; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 0 16px rgba(79, 209, 255, .5)); }
.orbit .spin { position: absolute; inset: 0; animation: orb 90s linear infinite; }
.orbit .spin.r2 { animation-duration: 130s; animation-direction: reverse; } .orbit .spin.r3 { animation-duration: 180s; }
.orbit .on { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.orbit .on b { position: absolute; display: grid; place-items: center; width: 50px; height: 50px; margin: -25px 0 0 -25px; background: linear-gradient(145deg, rgba(79, 209, 255, .26), rgba(20, 40, 150, .5)); border: 1px solid rgba(79, 209, 255, .5); box-shadow: 0 0 22px rgba(79, 209, 255, .3), inset 0 -2px 0 rgba(247, 147, 30, .65); color: #6fdcff; animation: orbi 90s linear infinite; }
.orbit .on b svg { width: 28px; height: 28px; }
.orbit .r1 .on b { transform: translateX(110px) rotate(calc(-1 * var(--a))); } .orbit .r2 .on b { transform: translateX(175px) rotate(calc(-1 * var(--a))); animation-duration: 130s; animation-direction: reverse; } .orbit .r3 .on b { transform: translateX(250px) rotate(calc(-1 * var(--a))); animation-duration: 180s; }
@keyframes orb { to { transform: rotate(360deg); } }
@keyframes orbi { to { rotate: -360deg; } }
.orbit .sat { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #f7931e; box-shadow: 0 0 12px #f7931e; left: 50%; top: 50%; margin: -4px; }
.orbit .sat.s1 { animation: sat1 24s linear infinite; } .orbit .sat.s2 { animation: sat2 40s linear infinite; } .orbit .sat.s3 { animation: sat3 60s linear infinite; background: #4fd1ff; box-shadow: 0 0 12px #4fd1ff; }
@keyframes sat1 { from { transform: rotate(0) translateX(110px); } to { transform: rotate(360deg) translateX(110px); } }
@keyframes sat2 { from { transform: rotate(120deg) translateX(175px); } to { transform: rotate(-240deg) translateX(175px); } }
@keyframes sat3 { from { transform: rotate(200deg) translateX(250px); } to { transform: rotate(560deg) translateX(250px); } }
@media (prefers-reduced-motion: reduce) { .orbit .spin, .orbit .on b, .orbit .sat { animation: none; } }
.airgap, .layers-art { max-width: 920px; margin: clamp(22px, 3vw, 40px) auto 0; }
.airgap svg, .layers-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.airgap .boundary { fill: rgba(47, 107, 255, .06); stroke: #4fd1ff; stroke-width: 1.6; stroke-dasharray: 9 7; animation: fldash 2s linear infinite; }
.airgap .ext circle { fill: #3a4468; stroke: #6b79a8; stroke-width: 1.2; }
.airgap .blocked path { fill: none; stroke: #6b79a8; stroke-width: 1.4; stroke-dasharray: 3 7; opacity: .7; }
.airgap .xmark path { fill: none; stroke: #ff5a5f; stroke-width: 2.6; stroke-linecap: round; }
.airgap .srv { fill: #0b1440; stroke: #4fd1ff; stroke-width: 1.6; } .airgap .srvl { stroke: rgba(79, 209, 255, .5); stroke-width: 1.2; } .airgap .srvd { fill: #f7931e; }
.airgap .packline { stroke: #f7931e; stroke-width: 2.4; stroke-dasharray: 6 8; fill: none; animation: fldash 1.2s linear infinite; }
.airgap .usb { fill: #1b5fd8; stroke: #4fd1ff; } .airgap .usbtip { fill: none; stroke: #cfd8ea; stroke-width: 3; } .airgap .ok { fill: #36d399; } .airgap .okc { fill: none; stroke: #04210f; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.airgap .lbl, .airgap .lbl2, .airgap .lbl3 { font: 700 11px var(--font); letter-spacing: .2em; fill: #4fd1ff; } .airgap .lbl2 { fill: #ffb35c; text-anchor: start; } .airgap .lbl3 { fill: #6b79a8; font-weight: 600; letter-spacing: .12em; }
.layers-art .lyr ellipse { fill: none; stroke: url(#lyg); stroke-width: 1.2; stroke-dasharray: 2 6; opacity: .75; }
.layers-art .shield { fill: rgba(47, 107, 255, .22); stroke: #4fd1ff; stroke-width: 2; filter: drop-shadow(0 0 14px rgba(79, 209, 255, .6)); }
.layers-art .shck { fill: none; stroke: #f7931e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.layers-art .stp text { font: 700 10.5px var(--font); letter-spacing: .2em; fill: #8fa6d8; }
.layers-art .pkt circle { fill: #ff7a5c; filter: drop-shadow(0 0 6px #ff7a5c); } .layers-art .pkt2 circle { fill: #36d399; filter: drop-shadow(0 0 6px #36d399); }
.layers-art .gates path { stroke: #4fd1ff; stroke-width: 3; stroke-linecap: round; opacity: .8; }
@media (max-width: 560px) { .airgap .lbl, .airgap .lbl2, .layers-art .stp text { font-size: 13px; } }

/* Cyber code on the agent cards: a small terminal panel with what each member does, plus a faint hex stream behind the card. */
.agent-card { overflow: hidden; }
.agent-card::before { content: "4f 2a 9c e1 07 b3 5d 8a 16 c4 3e f9 72 0b d8 a5 61 94 ec 2d 7f 38 b0 c3 15 e6 49 a2 5b 8e 03 f7 d1 6a 24 9b c8 5e 12 a7 4c e3 90 3d 68 b5 1f c2 87 5a e4 29 f0 7b 03 d6 91 4e a8 36 cb 5d f2 17 8c e9 40 b2 6d 23 af 7e 05 d9 48 c6 1b 8f e2 54 a0 3c 7d f5 29 b8 61 ce 04 9a d3 4f 18 e7 62 ab 35 f9 0c 8d"; position: absolute; inset: 0; z-index: 0; padding: 10px 14px; overflow: hidden; color: rgba(79, 209, 255, .11); font: 500 11px/1.9 var(--mono); letter-spacing: .12em; word-break: break-all; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000, transparent 62%); mask-image: linear-gradient(180deg, #000, transparent 62%); }
.agent-card > * { position: relative; z-index: 1; }
.ac-code { align-self: stretch; margin: 16px 0 0; padding: 10px 12px; text-align: left; background: rgba(2, 5, 22, .8); border: 1px solid rgba(79, 209, 255, .25); border-left: 3px solid #f7931e; font: 500 11.5px/1.65 var(--mono); color: #c9d4f2; overflow: hidden; }
.ac-code code { display: block; font: inherit; white-space: pre; }
.ac-code .ln { display: block; white-space: pre; }
.ac-code i { display: inline-block; width: 1.6em; margin-right: 8px; color: #54628f; font-style: normal; text-align: right; user-select: none; }
.ac-code k { color: #ff9ed0; font-style: normal; } .ac-code f { color: #6fdcff; font-style: normal; } .ac-code c { color: #4fbf8f; font-style: normal; }
.ac-code u { display: inline-block; width: .6em; height: 1.05em; background: #f7931e; vertical-align: -2px; text-decoration: none; animation: acblink 1.1s steps(1) infinite; }
@keyframes acblink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ac-code u { animation: none; } }

.ac-code { font-size: 10.5px; padding: 9px 10px; }
.ac-code i { width: 1.2em; margin-right: 6px; }
.layers-art .lyr rect { fill: none; stroke: url(#lyg); stroke-width: 1.2; stroke-dasharray: 2 6; opacity: .75; }
.orbit .core { filter: drop-shadow(0 0 16px rgba(79, 209, 255, .6)); width: 70px; }

/* Agent cards: see-through so the star field shows behind them, with a little starlight of their own. */
.agent-card { background: radial-gradient(260px 200px at 50% 18%, rgba(47, 107, 255, .2), rgba(4, 8, 32, .34) 72%); border-color: rgba(79, 209, 255, .26); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.agent-card .ac-code { background: rgba(2, 5, 22, .5); }
.agent-card::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 1px; z-index: 0; border-radius: 50%; box-shadow: 134px 371px 1px rgba(255,255,255,.9), 131px 57px 0px rgba(255,255,255,.7), 194px 484px 1px rgba(255,255,255,.7), 282px 108px 0px rgba(255,255,255,.7), 114px 421px 0px rgba(190,215,255,.9), 203px 167px 0px rgba(255,255,255,.9), 231px 133px 0px rgba(255,255,255,.7), 6px 218px 0px rgba(255,255,255,.7), 89px 300px 0px rgba(190,215,255,.9), 280px 213px 0px rgba(255,255,255,.7), 200px 309px 0px rgba(255,255,255,.9), 216px 173px 0px rgba(255,255,255,.7), 37px 343px 0px rgba(190,215,255,.9), 177px 71px 0px rgba(190,215,255,.9), 160px 496px 0px rgba(190,215,255,.9), 250px 487px 0px rgba(255,255,255,.7), 135px 27px 1px rgba(190,215,255,.9), 13px 432px 1px rgba(190,215,255,.9), 300px 13px 0px rgba(255,214,150,.85), 96px 205px 0px rgba(255,255,255,.9), 240px 356px 0px rgba(190,215,255,.9), 240px 114px 0px rgba(190,215,255,.9), 22px 447px 0px rgba(255,255,255,.9), 178px 375px 0px rgba(255,255,255,.7), 145px 98px 0px rgba(190,215,255,.9), 160px 185px 0px rgba(255,255,255,.9), 162px 499px 0px rgba(255,255,255,.7), 45px 419px 0px rgba(255,255,255,.9), 180px 260px 1px rgba(255,214,150,.85), 78px 61px 1px rgba(255,255,255,.9), 175px 216px 0px rgba(255,255,255,.7), 215px 113px 1px rgba(255,255,255,.7), 194px 156px 1px rgba(255,255,255,.9), 154px 148px 0px rgba(255,214,150,.85); animation: cardtw 5s ease-in-out infinite; pointer-events: none; }
.agent-card .stars2 { position: absolute; left: 0; top: 0; width: 2px; height: 2px; z-index: 0; border-radius: 50%; box-shadow: 271px 468px 0px rgba(255,179,92,.95), 249px 284px 1px rgba(255,179,92,.95), 210px 154px 1px rgba(111,220,255,.95), 276px 187px 1px rgba(200,175,255,.9), 177px 188px 1px rgba(111,220,255,.95), 143px 518px 0px rgba(255,179,92,.95), 186px 39px 0px rgba(255,179,92,.95), 290px 291px 0px rgba(255,179,92,.95), 154px 352px 0px rgba(200,175,255,.9), 9px 489px 0px rgba(200,175,255,.9); animation: cardtw 3.4s ease-in-out infinite reverse; pointer-events: none; }
.agent-card:nth-child(2n)::after { animation-delay: -1.6s; } .agent-card:nth-child(3n)::after { animation-delay: -3.1s; }
@keyframes cardtw { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .agent-card::after, .agent-card .stars2 { animation: none; } }
.agent-card .ac-code { margin-top: auto; } .agent-card p { margin-bottom: 16px; }

/* Small art under each heading: the thing itself, in miniature (banners, a CAC card, a FIPS badge, the logos). */
.mini { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; min-height: 34px; }
.mini .mt { display: grid; place-items: center; width: 36px; height: 36px; background: rgba(160, 190, 255, .07); border: 1px solid rgba(160, 190, 255, .22); }
.mini .mt img { width: 22px; height: 22px; }
.mini .cac { width: 52px; height: 33px; flex: none; filter: drop-shadow(0 0 6px rgba(79, 209, 255, .4)); }
.mini .fipsb { width: 36px; height: 36px; flex: none; filter: drop-shadow(0 0 7px rgba(79, 209, 255, .5)); }
.mini .ban { display: inline-block; padding: 5px 12px; font: 800 .66rem/1 var(--font); letter-spacing: .16em; color: #fff; }
.mini .ban.u { background: #007a33; } .mini .ban.c { background: #502b85; }
.mini .pm { font: 700 .72rem/1 var(--mono); color: #cfe1ff; letter-spacing: .06em; }
.mini .ch { font-style: normal; display: inline-block; padding: 5px 9px; font: 700 .62rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(160, 190, 255, .3); background: rgba(160, 190, 255, .06); color: #cfe1ff; white-space: nowrap; }
.mini .ch.m { font-family: var(--mono); text-transform: none; letter-spacing: .02em; font-weight: 600; }
.mini .ch.b { color: #6fdcff; border-color: rgba(79, 209, 255, .45); } .mini .ch.o { color: #ffb35c; border-color: rgba(247, 147, 30, .5); } .mini .ch.g { color: #6ee7b7; border-color: rgba(54, 211, 153, .5); } .mini .ch.r { color: #ff8a8f; border-color: rgba(255, 90, 95, .5); }

/* The air-gap boundary: a soft rounded rectangle with a faint edge and a gentle glow, not a hard dashed shape. */
.airgap .boundary { fill: rgba(47, 107, 255, .05); stroke: rgba(79, 209, 255, .45); stroke-width: 1.2; stroke-dasharray: none; animation: none; filter: drop-shadow(0 0 14px rgba(79, 209, 255, .25)); }

/* Security data flow: untrusted text -> read as data -> a person decides -> a sealed record. Packets travel along the connectors. */
.layers-art { display: none; }
.dflow { display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr 56px 1fr; align-items: stretch; max-width: 1100px; margin: clamp(22px, 3vw, 40px) auto 0; }
.dflow .st { position: relative; padding: 18px 16px 18px; border: 1px solid rgba(79, 209, 255, .28); border-radius: 14px; background: linear-gradient(180deg, rgba(47, 107, 255, .14), rgba(4, 8, 32, .5)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dflow .st.bad { border-color: rgba(255, 90, 95, .4); background: linear-gradient(180deg, rgba(255, 90, 95, .12), rgba(4, 8, 32, .5)); }
.dflow .st.good { border-color: rgba(54, 211, 153, .45); background: linear-gradient(180deg, rgba(54, 211, 153, .12), rgba(4, 8, 32, .5)); }
.dflow .n { position: absolute; top: -13px; left: 14px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #f7931e; color: #1a1000; font: 800 .8rem/1 var(--font); }
.dflow h4 { margin: 4px 0 0; color: #fff; font-size: .98rem; line-height: 1.3; }
.dflow p { margin: 0; color: #b9c5e6; font-size: .84rem; line-height: 1.45; }
.dflow .ico svg { width: 46px; height: 46px; fill: none; stroke: #6fdcff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(79, 209, 255, .5)); }
.dflow .ico .a { stroke: #f7931e; stroke-width: 1.9; }
.dflow .chips { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.dflow .chips em { font-style: normal; padding: 5px 10px; border: 1px solid rgba(255, 90, 95, .5); background: rgba(255, 90, 95, .08); color: #ffb3b6; font: 700 .64rem/1 var(--mono); letter-spacing: .04em; }
.dflow .chain { display: flex; align-items: center; gap: 4px; }
.dflow .chain b { padding: 6px 8px; border: 1px solid rgba(54, 211, 153, .6); background: rgba(54, 211, 153, .1); color: #6ee7b7; font: 700 .68rem/1 var(--mono); }
.dflow .chain b + b::before { content: ""; display: inline-block; width: 8px; height: 2px; margin: 0 4px 3px -4px; background: #36d399; }
.dflow .cn { position: relative; align-self: center; height: 2px; background: linear-gradient(90deg, rgba(79, 209, 255, .25), rgba(247, 147, 30, .45)); }
.dflow .cn::after { content: ""; position: absolute; right: -2px; top: -5px; border-left: 9px solid #f7931e; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.dflow .cn i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #f7931e; box-shadow: 0 0 10px #f7931e; animation: dfpk 2.4s linear infinite; }
.dflow .cn i:nth-child(2) { animation-delay: -.8s; } .dflow .cn i:nth-child(3) { animation-delay: -1.6s; }
@keyframes dfpk { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dflow .cn i { animation: none; left: 45%; } }
@media (max-width: 900px) { .dflow { grid-template-columns: 1fr; gap: 0; max-width: 420px; } .dflow .cn { width: 2px; height: 40px; margin: 0 auto; background: linear-gradient(180deg, rgba(79, 209, 255, .25), rgba(247, 147, 30, .45)); } .dflow .cn::after { right: auto; left: -5px; top: auto; bottom: -2px; border-top: 9px solid #f7931e; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 0; } .dflow .cn i { left: -3px; top: 0; animation-name: dfpv; } @keyframes dfpv { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } } }

/* Square corners (Ray's rule) and a softer line for the air-gap boundary. */
.airgap .boundary { rx: 0; stroke: rgba(79, 209, 255, .28); stroke-width: 1; filter: drop-shadow(0 0 22px rgba(79, 209, 255, .18)); }
.dflow .st { border-radius: 0; }

/* Security flow, in the page's own space-and-cyber language: a glowing beam through four hex nodes with particles travelling along it, labels beneath. */
.dflow { display: block; max-width: 1100px; margin: clamp(18px, 3vw, 36px) auto 0; padding: 0; }
.dfsvg { display: block; width: 100%; height: auto; overflow: visible; }
.dfsvg .tw { animation: dftw 4s ease-in-out infinite; } @keyframes dftw { 50% { opacity: .15; } }
.dfsvg .dfd { animation: fldash 1.6s linear infinite; }
.dfsvg .dfr { transform-box: fill-box; transform-origin: center; animation: nebspin 40s linear infinite; }
.dfl { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.dfl li { text-align: center; padding: 0 14px; }
.dfl b { display: none; }
.dfl h4 { margin: 0; color: #fff; font-size: 1rem; line-height: 1.3; }
.dfl p { margin: 8px auto 0; max-width: 17em; color: #b9c5e6; font-size: .86rem; line-height: 1.5; }
.dfl li:first-child h4 { color: #ffb3b6; } .dfl li:last-child h4 { color: #6ee7b7; }
@media (prefers-reduced-motion: reduce) { .dfsvg .tw, .dfsvg .dfd, .dfsvg .dfr { animation: none; } .dfsvg animateMotion { display: none; } }
@media (max-width: 760px) { .dfl { grid-template-columns: 1fr 1fr; row-gap: 22px; } .dfl p { font-size: .82rem; } }
@media (max-width: 440px) { .dfl { grid-template-columns: 1fr; } }

/* The Government section continues the Runs-anywhere section above it instead of starting over. */
#runs { padding-bottom: clamp(24px, 3vw, 44px); }
#government { padding-top: clamp(24px, 3vw, 44px); }

.dfl p { max-width: 19em; }

/* More cyber galaxy: gas haze, circuit traces, drifting code, a pulse and an orbiting satellite on every node, comet trails on the particles. */
.dfsvg .dfc { font: 600 10px ui-monospace, Menlo, monospace; fill: #6fdcff; opacity: .35; letter-spacing: .08em; animation: dfdrift 9s ease-in-out infinite; }
@keyframes dfdrift { 0%, 100% { opacity: .12; transform: translateY(0); } 50% { opacity: .5; transform: translateY(-5px); } }
.dfsvg .dfp { transform-box: fill-box; transform-origin: center; animation: dfpulse 3.6s ease-out infinite; }
@keyframes dfpulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dfsvg .dfc, .dfsvg .dfp { animation: none; } .dfsvg animateTransform { display: none; } }

/* Logos where products are named in the AI list, and radar rings leaving the avatar. */
.aichips li { align-items: center; }
.aichips li > svg { display: none; }
.ait { display: flex; gap: 5px; flex: none; flex-wrap: wrap; max-width: 140px; }
.ait i { display: grid; place-items: center; width: 40px; height: 40px; background: rgba(160, 190, 255, .07); border: 1px solid rgba(160, 190, 255, .22); }
.ait img { width: 24px; height: 24px; }
.il { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-right: 2px; }
.il img { width: 16px; height: 16px; flex: none; }
.avaring { position: absolute; left: 0; top: 0; width: 200px; height: 200px; z-index: 0; pointer-events: none; }
.avaring i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(79, 209, 255, .55); box-shadow: 0 0 18px rgba(79, 209, 255, .25), inset 0 0 14px rgba(79, 209, 255, .12); opacity: 0; animation: avaring 4.2s ease-out infinite; }
.avaring i:nth-child(2) { animation-delay: 1.4s; border-color: rgba(247, 147, 30, .5); box-shadow: 0 0 18px rgba(247, 147, 30, .22), inset 0 0 14px rgba(247, 147, 30, .1); }
.avaring i:nth-child(3) { animation-delay: 2.8s; }
@keyframes avaring { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(2.6); opacity: 0; } }
.botduo .bigava { position: absolute; z-index: 1; }
.botduo .botwin { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .avaring i { animation: none; } .avaring i:first-child { opacity: .3; transform: scale(1.4); } }
@media (max-width: 860px) { .avaring { width: 210px; height: 210px; } .ait { max-width: 112px; } .ait i { width: 34px; height: 34px; } .ait img { width: 20px; height: 20px; } }

.il { margin-right: 6px; } .aichips small { display: block; line-height: 1.7; }

.avaring i { border-width: 2px; border-color: rgba(111, 220, 255, .9); box-shadow: 0 0 26px rgba(79, 209, 255, .5), inset 0 0 22px rgba(79, 209, 255, .22); animation-duration: 3.6s; }
.avaring i:nth-child(2) { animation-delay: 1.2s; border-color: rgba(255, 179, 92, .9); box-shadow: 0 0 26px rgba(247, 147, 30, .45), inset 0 0 22px rgba(247, 147, 30, .2); }
.avaring i:nth-child(3) { animation-delay: 2.4s; }
@keyframes avaring { 0% { transform: scale(.98); opacity: .95; } 70% { opacity: .35; } 100% { transform: scale(2.7); opacity: 0; } }

/* "Above the atmosphere": a star field, real meteors that burn up on their way toward a cyber Earth horizon below the laptop. */
.morph-sky i { position: absolute; left: var(--x); top: var(--y); width: var(--l); height: 2px; margin: 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(160,220,255,.5) 70%, #fff); border-radius: 2px; box-shadow: 0 0 8px 1px rgba(150,220,255,.6); transform-origin: 100% 50%; opacity: 0; transform: rotate(var(--a)); animation: meteor var(--p) linear infinite; animation-delay: var(--w); will-change: transform, opacity; }
.morph-sky i::after { content: ""; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(190,235,255,.9); }
@keyframes meteor { 0% { opacity: 0; transform: rotate(var(--a)) translateX(0); } 1.5% { opacity: 1; } 11% { opacity: .9; } 14% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)); } }
.morph-sky .msst { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; box-shadow: 55vw 56vh 0 rgba(255,214,160,.85),83vw 48vh 0 rgba(255,255,255,.9),96vw 81vh 0 rgba(255,255,255,.9),30vw 62vh 0 rgba(255,255,255,.9),35vw 75vh 0 rgba(255,255,255,.9),74vw 16vh 0 rgba(190,215,255,.9),25vw 26vh 0 rgba(255,255,255,.9),9vw 2vh 0 rgba(255,255,255,.6),68vw 48vh 0 rgba(255,255,255,.9),20vw 53vh 0 rgba(255,255,255,.9),12vw 18vh 0 rgba(255,255,255,.6),6vw 3vh 0 rgba(190,215,255,.9),72vw 30vh 0 rgba(255,255,255,.9),43vw 47vh 0 rgba(255,255,255,.9),95vw 64vh 0 rgba(255,214,160,.85),4vw 86vh 0 rgba(255,255,255,.9),1vw 64vh 0 rgba(255,214,160,.85),80vw 43vh 0 rgba(255,214,160,.85),68vw 17vh 0 rgba(255,214,160,.85),13vw 44vh 0 rgba(255,255,255,.6),64vw 58vh 0 rgba(255,214,160,.85),26vw 11vh 0 rgba(190,215,255,.9),17vw 34vh 0 rgba(255,255,255,.9),23vw 54vh 0 rgba(190,215,255,.9),18vw 62vh 0 rgba(255,255,255,.6),59vw 42vh 0 rgba(190,215,255,.9),1vw 3vh 0 rgba(255,255,255,.9),11vw 20vh 0 rgba(255,214,160,.85),24vw 47vh 0 rgba(255,214,160,.85),31vw 40vh 0 rgba(255,255,255,.9),64vw 58vh 0 rgba(255,255,255,.6),74vw 37vh 0 rgba(255,214,160,.85),29vw 6vh 0 rgba(255,214,160,.85),21vw 51vh 0 rgba(255,255,255,.9),45vw 11vh 0 rgba(255,255,255,.9),25vw 83vh 0 rgba(255,255,255,.6),43vw 31vh 0 rgba(255,255,255,.6),6vw 31vh 0 rgba(190,215,255,.9),67vw 21vh 0 rgba(255,255,255,.6),79vw 10vh 0 rgba(255,255,255,.6),25vw 26vh 0 rgba(255,255,255,.6),91vw 37vh 0 rgba(255,214,160,.85),94vw 50vh 0 rgba(255,214,160,.85),81vw 56vh 0 rgba(190,215,255,.9),76vw 86vh 0 rgba(255,255,255,.6),59vw 57vh 0 rgba(255,255,255,.6),13vw 48vh 0 rgba(255,255,255,.6),21vw 36vh 0 rgba(190,215,255,.9),5vw 14vh 0 rgba(190,215,255,.9),24vw 50vh 0 rgba(255,214,160,.85),62vw 23vh 0 rgba(255,255,255,.6),17vw 31vh 0 rgba(255,255,255,.9),18vw 67vh 0 rgba(255,255,255,.6),19vw 73vh 0 rgba(255,255,255,.9),51vw 13vh 0 rgba(255,255,255,.6),49vw 1vh 0 rgba(255,255,255,.9),57vw 64vh 0 rgba(190,215,255,.9),65vw 40vh 0 rgba(190,215,255,.9),70vw 70vh 0 rgba(255,255,255,.6),37vw 77vh 0 rgba(255,255,255,.6),87vw 31vh 0 rgba(255,255,255,.6),33vw 2vh 0 rgba(255,214,160,.85),22vw 62vh 0 rgba(255,214,160,.85),2vw 40vh 0 rgba(255,214,160,.85),94vw 25vh 0 rgba(255,214,160,.85),58vw 6vh 0 rgba(190,215,255,.9),33vw 78vh 0 rgba(255,255,255,.6),65vw 47vh 0 rgba(255,214,160,.85),89vw 16vh 0 rgba(190,215,255,.9),4vw 56vh 0 rgba(255,214,160,.85),32vw 71vh 0 rgba(255,214,160,.85),81vw 84vh 0 rgba(255,214,160,.85),84vw 34vh 0 rgba(255,214,160,.85),4vw 38vh 0 rgba(255,255,255,.9),24vw 66vh 0 rgba(190,215,255,.9),4vw 37vh 0 rgba(255,255,255,.9),54vw 67vh 0 rgba(255,214,160,.85),42vw 14vh 0 rgba(255,255,255,.6),66vw 86vh 0 rgba(255,214,160,.85),33vw 45vh 0 rgba(190,215,255,.9),8vw 77vh 0 rgba(255,255,255,.9),69vw 71vh 0 rgba(255,255,255,.6),95vw 86vh 0 rgba(255,255,255,.9),34vw 58vh 0 rgba(255,214,160,.85),11vw 42vh 0 rgba(255,255,255,.6),78vw 43vh 0 rgba(190,215,255,.9),50vw 19vh 0 rgba(255,214,160,.85),17vw 23vh 0 rgba(255,255,255,.6),48vw 45vh 0 rgba(255,214,160,.85),97vw 38vh 0 rgba(255,214,160,.85),42vw 86vh 0 rgba(255,255,255,.9),40vw 21vh 0 rgba(255,255,255,.9),54vw 69vh 0 rgba(255,214,160,.85),24vw 20vh 0 rgba(255,255,255,.6),85vw 17vh 0 rgba(255,255,255,.6),31vw 22vh 0 rgba(255,214,160,.85),76vw 22vh 0 rgba(255,255,255,.6),69vw 26vh 0 rgba(255,255,255,.6),98vw 16vh 0 rgba(255,255,255,.9),79vw 81vh 0 rgba(190,215,255,.9),21vw 44vh 0 rgba(255,214,160,.85),79vw 41vh 0 rgba(255,255,255,.6),97vw 45vh 0 rgba(190,215,255,.9),36vw 23vh 0 rgba(255,255,255,.9),15vw 72vh 0 rgba(255,255,255,.9),96vw 4vh 0 rgba(190,215,255,.9),98vw 19vh 0 rgba(255,255,255,.6),70vw 81vh 0 rgba(255,255,255,.9),83vw 61vh 0 rgba(190,215,255,.9),92vw 3vh 0 rgba(255,255,255,.6),49vw 4vh 0 rgba(255,214,160,.85),3vw 58vh 0 rgba(255,255,255,.9),25vw 20vh 0 rgba(190,215,255,.9),64vw 37vh 0 rgba(255,214,160,.85),46vw 27vh 0 rgba(190,215,255,.9),27vw 73vh 0 rgba(190,215,255,.9),27vw 15vh 0 rgba(255,214,160,.85),71vw 32vh 0 rgba(190,215,255,.9),6vw 13vh 0 rgba(190,215,255,.9),29vw 70vh 0 rgba(255,255,255,.6); animation: msTw 6s ease-in-out infinite; }
@keyframes msTw { 50% { opacity: .55; } }
@media (max-width: 860px) { .morph-earth, .morph-sky { display: none; } }
@media (prefers-reduced-motion: reduce) { .morph-sky i { animation: none; opacity: 0; } .morph-sky .msst, .morph-earth .e-lights { animation: none; } }

/* A shallow, cyber Earth below the laptop: a gentle limb with an atmosphere rim, clusters of city lights, and glowing data links arcing between them. */
.morph-earth { position: absolute; left: 0; right: 0; bottom: 0; height: 24vh; z-index: 0; pointer-events: none; overflow: hidden; }
.morph-earth .e-body { position: absolute; left: 50%; top: 13vh; width: 520vw; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 0, #0b2a6a 0, #071a47 .6%, #040d2b 3%, #02061a 100%); box-shadow: 0 -1px 0 rgba(200, 245, 255, 1), 0 -3px 9px rgba(111, 220, 255, .95), 0 -14px 38px rgba(47, 107, 255, .8), 0 -40px 100px rgba(47, 107, 255, .38); }
.morph-earth .e-glow { position: absolute; left: 50%; top: 4vh; width: 130vw; height: 12vh; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(79, 209, 255, .3), rgba(47, 107, 255, .12) 60%, transparent); filter: blur(12px); }
.morph-earth .e-lights { position: absolute; left: 0; top: 13vh; width: 2px; height: 2px; border-radius: 50%; box-shadow: 39.39vw 0.96vw 0 rgba(140,225,255,.9), 38.94vw 1.89vw 0 rgba(255,200,120,.95), 41.92vw 0.62vw 0 rgba(255,200,120,.95), 40.16vw 1.05vw 0 rgba(140,225,255,.9), 43.36vw 0.51vw 0 rgba(255,232,180,.9), 40.78vw 0.94vw 0 rgba(255,200,120,.95), 43.03vw 1.31vw 0 rgba(255,200,120,.95), 44.49vw 0.47vw 0 rgba(255,170,90,.85), 42.63vw 0.81vw 0 rgba(255,200,120,.95), 41.04vw 0.95vw 0 rgba(255,200,120,.95), 41.93vw 0.61vw 0 rgba(140,225,255,.9), 42.75vw 1.27vw 0 rgba(255,232,180,.9), 44.57vw 1.97vw 0 rgba(255,200,120,.95), 41.25vw 2.30vw 0 rgba(140,225,255,.9), 46.94vw 0.81vw 0 rgba(140,225,255,.9), 53.86vw 0.67vw 0 rgba(255,170,90,.85), 53.22vw 1.10vw 0 rgba(255,170,90,.85), 54.72vw 0.68vw 0 rgba(255,232,180,.9), 53.37vw 0.65vw 0 rgba(255,170,90,.85), 52.60vw 0.80vw 0 rgba(255,170,90,.85), 56.49vw 1.24vw 0 rgba(255,232,180,.9), 53.36vw 1.27vw 0 rgba(140,225,255,.9), 53.79vw 1.51vw 0 rgba(255,170,90,.85), 54.76vw 0.69vw 0 rgba(255,170,90,.85), 52.08vw 2.38vw 0 rgba(255,170,90,.85), 53.69vw 0.93vw 0 rgba(140,225,255,.9), 52.40vw 0.52vw 0 rgba(140,225,255,.9), 54.41vw 0.64vw 0 rgba(255,200,120,.95), 56.60vw 1.22vw 0 rgba(255,170,90,.85), 50.86vw 1.61vw 0 rgba(255,170,90,.85), 53.86vw 0.83vw 0 rgba(255,232,180,.9), 81.73vw 2.44vw 0 rgba(255,232,180,.9), 81.15vw 2.53vw 0 rgba(255,200,120,.95), 82.45vw 2.57vw 0 rgba(255,200,120,.95), 81.03vw 2.71vw 0 rgba(255,232,180,.9), 81.33vw 3.54vw 0 rgba(255,232,180,.9), 80.87vw 3.20vw 0 rgba(140,225,255,.9), 78.45vw 2.39vw 0 rgba(140,225,255,.9), 84.52vw 2.82vw 0 rgba(255,200,120,.95), 22.14vw 1.92vw 0 rgba(255,200,120,.95), 23.69vw 2.97vw 0 rgba(255,232,180,.9), 23.39vw 2.42vw 0 rgba(140,225,255,.9), 23.68vw 2.58vw 0 rgba(255,232,180,.9), 18.24vw 3.26vw 0 rgba(140,225,255,.9), 21.42vw 2.68vw 0 rgba(255,232,180,.9), 21.05vw 2.37vw 0 rgba(255,232,180,.9), 20.84vw 3.55vw 0 rgba(255,170,90,.85), 18.94vw 2.47vw 0 rgba(255,170,90,.85), 20.09vw 2.14vw 0 rgba(255,170,90,.85), 23.30vw 2.47vw 0 rgba(255,232,180,.9), 26.70vw 2.13vw 0 rgba(255,232,180,.9), 25.01vw 2.15vw 0 rgba(255,170,90,.85), 25.46vw 1.64vw 0 rgba(140,225,255,.9), 23.55vw 2.01vw 0 rgba(255,200,120,.95), 28.51vw 1.32vw 0 rgba(140,225,255,.9), 28.38vw 1.45vw 0 rgba(255,232,180,.9), 25.14vw 2.12vw 0 rgba(140,225,255,.9), 22.40vw 2.45vw 0 rgba(255,200,120,.95), 25.24vw 2.56vw 0 rgba(140,225,255,.9), 25.92vw 1.60vw 0 rgba(140,225,255,.9), 27.12vw 2.50vw 0 rgba(255,170,90,.85), 28.01vw 1.65vw 0 rgba(140,225,255,.9), 9.73vw 4.04vw 0 rgba(255,200,120,.95), 9.98vw 4.03vw 0 rgba(140,225,255,.9), 10.93vw 3.92vw 0 rgba(255,200,120,.95), 11.11vw 3.45vw 0 rgba(140,225,255,.9), 9.43vw 4.28vw 0 rgba(140,225,255,.9), 5.71vw 4.61vw 0 rgba(255,170,90,.85), 8.77vw 3.69vw 0 rgba(255,200,120,.95), 9.47vw 4.35vw 0 rgba(255,200,120,.95), 10.59vw 4.20vw 0 rgba(255,232,180,.9), 7.22vw 4.59vw 0 rgba(255,170,90,.85), 8.10vw 3.86vw 0 rgba(255,170,90,.85), 10.36vw 3.84vw 0 rgba(255,232,180,.9), 10.40vw 3.51vw 0 rgba(255,200,120,.95), 7.00vw 4.92vw 0 rgba(255,232,180,.9), 18.84vw 3.09vw 0 rgba(140,225,255,.9), 16.57vw 3.82vw 0 rgba(140,225,255,.9), 17.81vw 2.82vw 0 rgba(255,200,120,.95), 15.49vw 3.33vw 0 rgba(255,170,90,.85), 16.06vw 2.68vw 0 rgba(255,232,180,.9), 17.10vw 3.60vw 0 rgba(140,225,255,.9), 14.86vw 3.10vw 0 rgba(140,225,255,.9), 17.34vw 2.94vw 0 rgba(255,170,90,.85), 15.02vw 3.40vw 0 rgba(140,225,255,.9), 16.50vw 2.73vw 0 rgba(255,170,90,.85), 15.77vw 3.65vw 0 rgba(140,225,255,.9), 6.90vw 5.16vw 0 rgba(255,232,180,.9), 4.78vw 4.60vw 0 rgba(255,232,180,.9), 5.67vw 4.21vw 0 rgba(255,232,180,.9), 6.22vw 4.58vw 0 rgba(255,200,120,.95), 5.26vw 4.41vw 0 rgba(255,170,90,.85), 4.35vw 4.85vw 0 rgba(255,232,180,.9), 5.91vw 4.45vw 0 rgba(255,232,180,.9), 3.44vw 4.72vw 0 rgba(140,225,255,.9), 8.80vw 4.87vw 0 rgba(140,225,255,.9), 4.74vw 5.40vw 0 rgba(255,170,90,.85), 6.48vw 4.19vw 0 rgba(140,225,255,.9), 7.18vw 4.03vw 0 rgba(255,200,120,.95), 19.60vw 2.30vw 0 rgba(255,170,90,.85), 15.41vw 3.37vw 0 rgba(255,170,90,.85), 17.59vw 3.82vw 0 rgba(255,200,120,.95), 20.71vw 2.38vw 0 rgba(255,170,90,.85), 20.94vw 2.14vw 0 rgba(255,200,120,.95), 21.28vw 1.99vw 0 rgba(140,225,255,.9), 20.48vw 2.10vw 0 rgba(255,170,90,.85), 18.99vw 2.64vw 0 rgba(255,232,180,.9), 19.65vw 2.34vw 0 rgba(255,232,180,.9), 18.03vw 3.48vw 0 rgba(140,225,255,.9), 19.21vw 2.35vw 0 rgba(140,225,255,.9), 23.24vw 1.94vw 0 rgba(255,232,180,.9), 21.38vw 2.64vw 0 rgba(255,170,90,.85), 18.09vw 2.63vw 0 rgba(255,232,180,.9), 20.63vw 3.08vw 0 rgba(140,225,255,.9), 17.80vw 3.17vw 0 rgba(255,232,180,.9), 50.96vw 1.20vw 0 rgba(255,170,90,.85), 53.75vw 0.81vw 0 rgba(255,170,90,.85), 50.71vw 1.45vw 0 rgba(255,170,90,.85), 53.70vw 1.26vw 0 rgba(255,232,180,.9), 49.60vw 1.11vw 0 rgba(140,225,255,.9), 53.64vw 1.51vw 0 rgba(255,200,120,.95), 51.57vw 0.63vw 0 rgba(255,200,120,.95), 51.95vw 0.51vw 0 rgba(140,225,255,.9), 50.20vw 0.90vw 0 rgba(255,200,120,.95), 50.98vw 0.86vw 0 rgba(255,200,120,.95), 53.11vw 0.45vw 0 rgba(255,170,90,.85), 51.50vw 0.53vw 0 rgba(255,200,120,.95), 49.59vw 0.62vw 0 rgba(255,232,180,.9), 91.03vw 4.62vw 0 rgba(255,200,120,.95), 92.61vw 3.90vw 0 rgba(255,232,180,.9), 94.34vw 5.07vw 0 rgba(255,170,90,.85), 91.50vw 4.68vw 0 rgba(140,225,255,.9), 94.73vw 4.37vw 0 rgba(140,225,255,.9), 91.98vw 4.11vw 0 rgba(140,225,255,.9), 95.08vw 4.94vw 0 rgba(255,232,180,.9), 94.93vw 4.87vw 0 rgba(255,200,120,.95), 92.21vw 4.45vw 0 rgba(255,170,90,.85), 94.27vw 6.11vw 0 rgba(255,170,90,.85), 93.54vw 4.27vw 0 rgba(255,170,90,.85), 94.33vw 5.04vw 0 rgba(255,232,180,.9), 93.46vw 4.14vw 0 rgba(255,200,120,.95), 67.18vw 1.23vw 0 rgba(255,200,120,.95), 66.83vw 1.96vw 0 rgba(255,200,120,.95), 65.31vw 1.46vw 0 rgba(140,225,255,.9), 67.86vw 1.05vw 0 rgba(140,225,255,.9), 66.21vw 1.81vw 0 rgba(255,200,120,.95), 68.35vw 2.00vw 0 rgba(140,225,255,.9), 66.12vw 1.95vw 0 rgba(255,200,120,.95), 67.33vw 1.33vw 0 rgba(255,200,120,.95), 63.42vw 1.00vw 0 rgba(255,200,120,.95), 65.16vw 1.55vw 0 rgba(255,232,180,.9), 38.55vw 1.04vw 0 rgba(140,225,255,.9), 37.71vw 1.24vw 0 rgba(140,225,255,.9), 39.58vw 1.11vw 0 rgba(255,232,180,.9), 38.27vw 1.77vw 0 rgba(255,200,120,.95), 39.13vw 1.77vw 0 rgba(255,170,90,.85), 39.62vw 1.38vw 0 rgba(255,200,120,.95), 38.67vw 0.91vw 0 rgba(255,232,180,.9), 39.52vw 0.63vw 0 rgba(140,225,255,.9), 58.12vw 0.65vw 0 rgba(255,214,150,.55), 42.08vw 5.97vw 0 rgba(255,214,150,.55), 42.75vw 2.98vw 0 rgba(255,214,150,.55), 54.22vw 3.91vw 0 rgba(255,214,150,.55), 39.19vw 4.21vw 0 rgba(255,214,150,.55), 57.09vw 3.43vw 0 rgba(255,214,150,.55), 4.41vw 6.85vw 0 rgba(255,214,150,.55), 83.12vw 4.81vw 0 rgba(255,214,150,.55), 63.06vw 4.95vw 0 rgba(255,214,150,.55), 78.57vw 4.34vw 0 rgba(255,214,150,.55), 41.08vw 4.64vw 0 rgba(255,214,150,.55), 41.71vw 5.36vw 0 rgba(255,214,150,.55), 87.82vw 7.69vw 0 rgba(255,214,150,.55), 79.97vw 7.22vw 0 rgba(255,214,150,.55), 82.03vw 6.85vw 0 rgba(255,214,150,.55), 17.97vw 5.37vw 0 rgba(255,214,150,.55), 45.24vw 4.05vw 0 rgba(255,214,150,.55), 8.08vw 6.60vw 0 rgba(255,214,150,.55), 5.04vw 7.20vw 0 rgba(255,214,150,.55), 86.61vw 8.38vw 0 rgba(255,214,150,.55), 98.10vw 6.36vw 0 rgba(255,214,150,.55), 47.79vw 2.64vw 0 rgba(255,214,150,.55), 1.14vw 7.07vw 0 rgba(255,214,150,.55), 22.34vw 5.46vw 0 rgba(255,214,150,.55), 70.66vw 2.34vw 0 rgba(255,214,150,.55), 37.18vw 2.97vw 0 rgba(255,214,150,.55), 83.15vw 4.50vw 0 rgba(255,214,150,.55), 18.87vw 4.29vw 0 rgba(255,214,150,.55), 3.28vw 9.90vw 0 rgba(255,214,150,.55), 17.58vw 6.37vw 0 rgba(255,214,150,.55), 28.59vw 4.79vw 0 rgba(255,214,150,.55), 54.60vw 5.51vw 0 rgba(255,214,150,.55), 67.17vw 2.14vw 0 rgba(255,214,150,.55), 23.27vw 3.86vw 0 rgba(255,214,150,.55), 75.65vw 4.07vw 0 rgba(255,214,150,.55), 36.46vw 5.19vw 0 rgba(255,214,150,.55), 85.56vw 5.54vw 0 rgba(255,214,150,.55), 59.70vw 1.42vw 0 rgba(255,214,150,.55), 50.61vw 4.50vw 0 rgba(255,214,150,.55), 67.05vw 4.10vw 0 rgba(255,214,150,.55), 52.17vw 3.99vw 0 rgba(255,214,150,.55), 47.58vw 1.75vw 0 rgba(255,214,150,.55), 30.67vw 3.68vw 0 rgba(255,214,150,.55), 58.88vw 5.29vw 0 rgba(255,214,150,.55), 74.57vw 6.67vw 0 rgba(255,214,150,.55), 63.89vw 1.99vw 0 rgba(255,214,150,.55), 46.77vw 2.25vw 0 rgba(255,214,150,.55), 92.95vw 5.22vw 0 rgba(255,214,150,.55), 41.07vw 1.82vw 0 rgba(255,214,150,.55), 75.27vw 4.21vw 0 rgba(255,214,150,.55), 38.48vw 2.36vw 0 rgba(255,214,150,.55), 16.60vw 7.53vw 0 rgba(255,214,150,.55), 43.52vw 0.69vw 0 rgba(255,214,150,.55), 46.65vw 4.76vw 0 rgba(255,214,150,.55), 71.34vw 3.27vw 0 rgba(255,214,150,.55), 63.26vw 3.79vw 0 rgba(255,214,150,.55), 17.98vw 7.31vw 0 rgba(255,214,150,.55), 24.15vw 2.20vw 0 rgba(255,214,150,.55), 61.89vw 6.19vw 0 rgba(255,214,150,.55), 23.80vw 4.16vw 0 rgba(255,214,150,.55); animation: msTw 4.5s ease-in-out infinite; }
.morph-earth .e-net { position: absolute; left: 0; top: 13vh; width: 100%; height: 14vw; overflow: visible; }
.morph-earth .e-net path { fill: none; stroke: rgba(111, 220, 255, .75); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 7; animation: fldash 1.8s linear infinite; filter: drop-shadow(0 0 3px rgba(79, 209, 255, .9)); }
.morph-earth .e-net path.o { stroke: rgba(255, 179, 92, .8); filter: drop-shadow(0 0 3px rgba(247, 147, 30, .9)); animation-duration: 2.4s; }
.morph-earth .e-net circle { fill: #fff; filter: drop-shadow(0 0 4px #6fdcff); }
@media (prefers-reduced-motion: reduce) { .morph-earth .e-net path { animation: none; } }

/* Hunt: a sweep through data. A beam crosses rows of records; cells it passes flash and fade, and the traces it finds stay lit. Read only. */
.dsweep { width: 100%; max-width: 560px; margin: 0 auto; padding: 18px 18px 14px; border: 1px solid rgba(79, 209, 255, .25); background: linear-gradient(180deg, rgba(47, 107, 255, .1), rgba(4, 8, 32, .45)); }
.ds-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; font: 700 .64rem/1 var(--mono); letter-spacing: .14em; color: #6fdcff; }
.ds-head em { font-style: normal; color: #ffb35c; }
.ds-grid { position: relative; display: grid; grid-template-columns: 92px repeat(var(--n), 1fr); gap: 4px 3px; align-items: center; }
.ds-l { font: 600 .62rem/1 var(--mono); color: #8fa6d8; white-space: nowrap; letter-spacing: .04em; }
.ds-c { display: block; height: 14px; background: rgba(120, 160, 255, calc(.12 * var(--v))); animation: dsc 7s linear infinite; animation-delay: calc(var(--c) * .26s + 1.1s); }
.ds-c.hit { animation-name: dsh; }
@keyframes dsc { 0% { background: #bfeaff; box-shadow: 0 0 8px #6fdcff; } 5% { background: rgba(111, 220, 255, .8); box-shadow: 0 0 6px rgba(111, 220, 255, .6); } 40% { background: rgba(111, 220, 255, .22); box-shadow: none; } 60%, 100% { background: rgba(120, 160, 255, .1); box-shadow: none; } }
@keyframes dsh { 0% { background: #fff; box-shadow: 0 0 14px #fff; } 6% { background: #ff6b6f; box-shadow: 0 0 14px #ff6b6f; } 80% { background: #ff6b6f; box-shadow: 0 0 10px rgba(255, 107, 111, .85); } 95%, 100% { background: rgba(120, 160, 255, .1); box-shadow: none; } }
.ds-beam { position: absolute; top: -8px; bottom: -8px; left: 92px; width: 2px; background: #e9f9ff; box-shadow: 0 0 14px 2px #4fd1ff, 0 0 30px 6px rgba(79, 209, 255, .5); animation: dsb 7s linear infinite; animation-delay: .9s; pointer-events: none; }
.ds-beam::before { content: ""; position: absolute; right: 2px; top: 0; bottom: 0; width: 120px; background: linear-gradient(90deg, transparent, rgba(79, 209, 255, .28)); }
@keyframes dsb { 0% { left: 92px; opacity: 0; } 3% { opacity: 1; } 97% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.ds-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(79, 209, 255, .18); font: 600 .72rem/1.2 var(--mono); color: #b9c5e6; }
.ds-found b { color: #ff8a8f; font-size: 1.1rem; margin-right: 4px; } .ds-open { color: #ffb35c; }
@media (max-width: 560px) { .ds-grid { grid-template-columns: 64px repeat(var(--n), 1fr); } .ds-l { font-size: .54rem; } .ds-beam { left: 64px; } @keyframes dsb { 0% { left: 64px; opacity: 0; } 3% { opacity: 1; } 97% { opacity: 1; } 100% { left: 100%; opacity: 0; } } .ds-open { display: none; } }
@media (prefers-reduced-motion: reduce) { .ds-c, .ds-beam { animation: none; } .ds-c.hit { background: #ff6b6f; } .ds-beam { display: none; } }

/* C.O.S.M.O contrast on Hunt and Respond: deep blue field, orange finds, orange accents on the response steps. */
.dsweep { border-color: rgba(79, 209, 255, .3); border-bottom: 3px solid #f7931e; background: radial-gradient(420px 220px at 15% 0, rgba(47, 107, 255, .3), transparent 70%), radial-gradient(360px 200px at 100% 100%, rgba(247, 147, 30, .14), transparent 70%), rgba(4, 8, 32, .5); }
.ds-c { background: rgba(70, 110, 255, calc(.2 * var(--v))); }
@keyframes dsc { 0% { background: #d8f3ff; box-shadow: 0 0 9px #6fdcff; } 5% { background: rgba(79, 209, 255, .85); box-shadow: 0 0 7px rgba(79, 209, 255, .6); } 40% { background: rgba(47, 107, 255, .5); box-shadow: none; } 60%, 100% { background: rgba(70, 110, 255, .16); box-shadow: none; } }
@keyframes dsh { 0% { background: #fff; box-shadow: 0 0 16px #fff; } 6% { background: #f7931e; box-shadow: 0 0 16px #f7931e; } 80% { background: #f7931e; box-shadow: 0 0 12px rgba(247, 147, 30, .85); } 95%, 100% { background: rgba(70, 110, 255, .16); box-shadow: none; } }
.ds-found b { color: #f7931e; text-shadow: 0 0 14px rgba(247, 147, 30, .6); }
.ds-head span { color: #6fdcff; }
.rplan .rp-ic { background: linear-gradient(145deg, rgba(79, 209, 255, .24), rgba(20, 40, 150, .5)); border-color: rgba(79, 209, 255, .5); color: #6fdcff; box-shadow: 0 0 20px rgba(79, 209, 255, .22), inset 0 -2px 0 rgba(247, 147, 30, .65); }
.rplan b { color: #fff; } .rplan li > div > span { color: #b9c5e6; }

/* Avatar rings: light and slow, like communications. */
.avaring i { border: 1px solid rgba(111, 220, 255, .38); box-shadow: 0 0 10px rgba(79, 209, 255, .12); animation: avcomm 8s ease-out infinite; }
.avaring i:nth-child(2) { animation-delay: 2.7s; border-color: rgba(111, 220, 255, .3); box-shadow: 0 0 10px rgba(79, 209, 255, .1); }
.avaring i:nth-child(3) { animation-delay: 5.3s; border-color: rgba(111, 220, 255, .24); box-shadow: none; }
@keyframes avcomm { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.1); opacity: 0; } }

/* Shooting stars move with the scroll again (the original speed and amount); the time-based meteors are off. */
.morph-sky i { width: var(--l); height: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 85%, #bfe9ff); border-radius: 2px; box-shadow: 0 0 10px 1px rgba(79, 209, 255, .65); transform-origin: 100% 50%; opacity: 0; animation: none; will-change: transform, opacity; }
.morph-sky i::after { content: none; }

/* Section intros read as a balanced statement, not a paragraph with a lonely last line. */
.section-head .lead, .section-head p { text-wrap: balance; }
#chatbot .section-head .lead { position: relative; max-width: 30em; margin-left: auto; margin-right: auto; padding: 26px 18px 0; font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem); line-height: 1.6; color: #dbe5ff; text-wrap: balance; }
#chatbot .section-head .lead::before { content: "\201C"; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font: 700 64px/1 Georgia, 'Times New Roman', serif; color: #f7931e; text-shadow: 0 0 24px rgba(247, 147, 30, .45); }

/* The AI choices, consolidated to three rows: logos in a fixed column, text beside them. */
.aichips { grid-template-columns: 1fr !important; }
.aichips li { display: grid; grid-template-columns: 252px 1fr; gap: 18px; align-items: center; }
.ait { flex-wrap: nowrap; max-width: none; width: 252px; }
.ait i { width: 44px; height: 44px; flex: none; }
@media (max-width: 760px) { .aichips li { grid-template-columns: 1fr; gap: 10px; } .ait { width: auto; flex-wrap: wrap; } }

/* The quotation marks sit inline: one just before the first word, one just after the last. */
#chatbot .section-head .lead { padding-top: 0; }
#chatbot .section-head .lead::before { content: "\201C"; position: static; display: inline; transform: none; margin-right: .08em; font: 700 1.9em/0 Georgia, 'Times New Roman', serif; vertical-align: -.2em; color: #f7931e; text-shadow: 0 0 18px rgba(247, 147, 30, .45); }
#chatbot .section-head .lead::after { content: "\201D"; display: inline; margin-left: .08em; font: 700 1.9em/0 Georgia, 'Times New Roman', serif; vertical-align: -.2em; color: #f7931e; text-shadow: 0 0 18px rgba(247, 147, 30, .45); }

/* The work-order PDF, dark: the paper becomes C.O.S.M.O navy with light text, framed with a glow and an orange edge. */
.order-card .sheet { position: relative; margin: 14px 0 0; border: 1px solid rgba(79, 209, 255, .35); border-bottom: 3px solid #f7931e; box-shadow: 0 0 34px rgba(47, 107, 255, .28); background: #07102e; overflow: hidden; }
.order-card .sheet img { display: block; width: 100%; height: auto; filter: invert(1) hue-rotate(180deg) saturate(1.15) brightness(.92) contrast(1.05); }
.order-card .sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(47, 107, 255, .18), transparent 40%), repeating-linear-gradient(0deg, rgba(79, 209, 255, .035) 0 1px, transparent 1px 4px); }

.order-card .sheet img.hd { position: absolute; left: 0; top: 0; filter: none; clip-path: inset(0 0 85.6% 0); }

/* Agent cards: padding restored (a list rule had zeroed it) and each card is colour coded like the moving diagram. */
.roster.agentcards .agent-card { padding: 22px 20px 24px !important; --c: #7ec8ff; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-top: 3px solid var(--c); border-image: none; background: radial-gradient(260px 200px at 50% 18%, color-mix(in srgb, var(--c) 20%, transparent), rgba(4, 8, 32, .34) 72%); }
.agent-card .gl { stroke: var(--c); stroke-opacity: .9; }
.agent-card .gl circle { fill: #fff; filter: drop-shadow(0 0 3px var(--c)); }
.agent-card .gl .fl { fill: var(--c); fill-opacity: .16; stroke: var(--c); }
.agent-card .ac-art { filter: drop-shadow(0 0 10px var(--c)); }
.agent-card .ac-gk, .agent-card .role { color: var(--c); }
.agent-card:first-child .ac-art { filter: drop-shadow(0 0 10px var(--c)); }
.agent-card .ac-code { border-left-color: var(--c); border-color: color-mix(in srgb, var(--c) 30%, transparent); border-left: 3px solid var(--c); }

/* Shooting stars in the C.O.S.M.O orange. */
.morph-sky i { background: linear-gradient(90deg, rgba(247, 147, 30, 0), rgba(247, 147, 30, .75) 70%, #ffe0b0); box-shadow: 0 0 10px 1px rgba(247, 147, 30, .6); }

/* The work-order picture is a real dark-theme PDF render, so the image filter is off. */
.order-card .sheet img { filter: none; }
.order-card .sheet::after { background: linear-gradient(180deg, rgba(47, 107, 255, .1), transparent 40%); }

/* The analyst's questions: a real screen for each, with the question on top. */
.orbit-wrap, .cap-list { display: none; }
.qgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(28px, 3.5vw, 48px); }
.qcard { display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 22px; border: 1px solid rgba(79, 209, 255, .24); border-top: 3px solid #4fd1ff; background: radial-gradient(300px 180px at 50% 0, rgba(47, 107, 255, .16), rgba(4, 8, 32, .4) 75%); }
.qcard.o { border-top-color: #f7931e; }
.qshot { margin: 0; background: #000; border: 1px solid rgba(79, 209, 255, .28); box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 22px rgba(47, 107, 255, .16); }
.qshot img { display: block; width: 100%; height: auto; }
.qtxt { display: flex; gap: 14px; align-items: flex-start; }
.qi { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: #6fdcff; background: linear-gradient(145deg, rgba(79, 209, 255, .22), rgba(30, 60, 190, .16)); border: 1px solid rgba(79, 209, 255, .4); box-shadow: inset 0 -2px 0 rgba(247, 147, 30, .6); }
.qi svg { width: 26px; height: 26px; }
.qtxt h3 { margin: 0 0 6px; color: #fff; font-size: 1.12rem; line-height: 1.3; }
.qtxt p { margin: 0; color: #b9c5e6; font-size: .92rem; line-height: 1.55; }
.qtxt b { color: #ffb35c; font-weight: 700; }
@media (max-width: 1000px) { .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .qgrid { grid-template-columns: 1fr; } }

/* Security flow: slower and softer. Dim beam, dim travelling points, slow dashes and pulses. */
.dfsvg #dfpath { stroke-width: 1.5; opacity: .6; }
.dfsvg > path:first-of-type { opacity: .5; }
.dfsvg path[stroke-dasharray="2 9"] { opacity: .5; }
.dfsvg .dfd { animation-duration: 7s; }
.dfsvg .dfp { animation-duration: 9s; }
.dfsvg .dfc { opacity: .22; animation-duration: 16s; }
@keyframes dfdrift { 0%, 100% { opacity: .08; transform: translateY(0); } 50% { opacity: .3; transform: translateY(-4px); } }
@keyframes dfpulse { 0% { transform: scale(1); opacity: .28; } 100% { transform: scale(1.7); opacity: 0; } }
.dfsvg .dfr { animation-duration: 90s; }
.dfsvg .dfhaze { opacity: .7; }

/* Screens: the same pinned laptop as "Watch the bot work", flying over the rings of a planet made of code toward a C.O.S.M.O planet. */
#views.morph { background: radial-gradient(900px 500px at 12% 50%, rgba(247, 147, 30, .1), transparent 70%), radial-gradient(900px 500px at 88% 70%, rgba(47, 107, 255, .16), transparent 70%); background-attachment: scroll; }
#views .morph-track { height: 700vh; margin-top: -18vh; }
#views .fly-space { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
#views .morph-screen { z-index: 2; }
#views .morph-texts { z-index: 3; }
#views .mstep h3, #views .mstep p { text-shadow: 0 0 14px rgba(4, 7, 26, .95), 0 0 4px rgba(4, 7, 26, .9); }

/* The work order writes itself out, like generated text. */
.wo-gen { border: 1px solid rgba(79, 209, 255, .35); border-bottom: 3px solid #f7931e; background: #040a24; box-shadow: 0 0 34px rgba(47, 107, 255, .22); margin: 14px 0 0; min-height: 408px; }
.wo-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 14px 22px; background: #020514; border-bottom: 3px solid #f7931e; color: #fff; font: 700 .96rem/1.3 var(--font); }
.wo-head em { font: 400 .72rem/1 var(--font); font-style: normal; color: #bcc8ee; }
.wo-body { padding: 16px 22px 18px; color: #dde6ff; font: 400 .86rem/1.5 var(--font); position: relative; }
.wo-body p { margin: 0 0 8px; } .wo-note { color: #8a97bd; font-size: .76rem; }
.wo-body h4 { margin: 12px 0 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(79, 209, 255, .3); color: #6fdcff; font: 700 1rem/1.2 var(--font); text-transform: none; letter-spacing: 0; }
.wo-body ul { list-style: none; margin: 0; padding: 0; }
.wo-body li { display: flex; gap: 10px; align-items: baseline; margin: 0 0 5px; font-size: .82rem; line-height: 1.35; }
.wo-body li i { flex: none; width: 10px; height: 10px; border: 1.5px solid #f7931e; transform: translateY(1px); }
.wo-cur { display: inline-block; width: 8px; height: 1em; margin-left: 2px; background: #f7931e; vertical-align: -2px; animation: wocur 1s steps(1) infinite; box-shadow: 0 0 10px rgba(247, 147, 30, .7); }
@keyframes wocur { 50% { opacity: 0; } }
.order-card .files li { transition: opacity .6s ease, transform .6s ease; }
.order-card.writing .files li, .order-card.writing .pnote { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .wo-cur { animation: none; } }

/* Government mode, folded into the Runs-anywhere section: a faint optional marker in the diagram and a short text block. */
.archx-gov { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; align-items: center; margin-top: 12px; padding: 7px 9px; border: 1px dashed rgba(247, 147, 30, .45); }
.archx-gov b { flex: 0 0 100%; text-align: center; font: 700 .6rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #ffb35c; margin-bottom: 3px; }
.archx-gov i { font-style: normal; font: 600 .58rem/1 var(--font); letter-spacing: .06em; padding: 4px 6px; border: 1px solid rgba(160, 190, 255, .25); color: #cfe1ff; white-space: nowrap; }
.runs-gov { max-width: 760px; margin: clamp(28px, 4vw, 48px) auto 0; text-align: center; }
.runs-gov h3 { margin: 0 0 10px; color: #fff; font-size: 1.3rem; }
.runs-gov p { margin: 0 0 8px; color: #b9c5e6; font-size: 1.02rem; line-height: 1.6; text-wrap: balance; }
.runs-gov .muted { color: #8a97bd; font-size: .86rem; }
#runs { padding-bottom: var(--pad); }

/* Screens: the call-outs sit on the black planet, left of the laptop, and change with the scroll */
#views .morph-texts .mstep, #views .morph-texts .mstep:nth-child(odd), #views .morph-texts .mstep:nth-child(even) { top: max(50%, 270px); left: 3%; right: auto; text-align: left; width: min(17%, 270px); }
#views .mstep h3 { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.2rem); }
#views .mstep p { font-size: clamp(.92rem, .86rem + .25vw, 1.08rem); }

/* Overview: the pinned screens sit in the same laptop as the Screens section */
.spin-screen { width: min(54%, 980px); aspect-ratio: 1208 / 700; }
.spin-glass { position: absolute; left: 9.7%; top: 3.1%; width: 80.6%; height: 88.8%; aspect-ratio: auto; overflow: hidden; z-index: 1; background: #000; border: 0; box-shadow: none; }
.spin-glass::before { content: ""; position: absolute; inset: 2.7% 1.9%; z-index: 0; background: #11172a; }
.spin-glass img { z-index: 1; inset: 2.7% 1.9%; width: 96.2%; height: 94.6%; }
.spin-glass::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle at 50% 1.4%, #22252d 0 2.5px, transparent 3px); box-shadow: inset 0 0 0 3px #000, inset 0 0 18px 4px rgba(0, 0, 0, .7); }
@media (max-width: 860px) { .spin-screen { width: 100%; } }


/* Watch the bot work: the sky and the Earth are drawn on a canvas so the stars drift and the Earth turns with the scroll */
#bot .bot-cv { display: none; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#bot.cv-bot .bot-cv { display: block; } #bot.cv-bot .morph-earth, #bot.cv-bot .morph-sky .msst { display: none; }
@media (max-width: 860px) { #bot .bot-cv { display: none !important; } }

/* Phones: the Screens call-outs stack under the laptop at full width (the desktop rules for #views are more specific, so they are undone here) */
@media (max-width: 860px) {
  #views .morph-track { height: auto; margin-top: 0; }
  #views .morph-stage { position: relative; height: auto; display: block; padding: 0 16px 24px; overflow: hidden; }
  #views .morph-texts { position: static; }
  #views .morph-texts .mstep, #views .morph-texts .mstep:nth-child(odd), #views .morph-texts .mstep:nth-child(even) { position: static; top: auto; left: auto; right: auto; width: auto; max-width: none; transform: none !important; opacity: 1 !important; text-align: left; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.12); }
  #views .mstep h3 { font-size: 1.5rem; } #views .mstep p { font-size: 1rem; }
  #views .morph-screen { margin: 0 auto 8px; }
  #views .fly-space { height: 100%; }
}
@media (max-width: 860px) { #views .morph-texts { position: relative; z-index: 3; background: linear-gradient(180deg, rgba(4,7,26,.82), rgba(4,7,26,.9)); border-radius: 12px; padding: 4px 18px; margin-top: 8px; } #views .morph-texts .mstep:first-child { border-top: 0; } }
@media (max-width: 420px) { .botduo .botwin { left: auto !important; right: 0; width: min(240px, 66vw) !important; } }

/* Fallback route for a real person the form turns away. */
.alt-contact { margin-top: 14px; font-size: .95rem; opacity: .75; }