/* Arcade hardware design system. Artwork lives in the marquee; content stays crisp. */
:root, html[data-theme="dark"] {
  --arcade-bg: #111111; --arcade-panel: #1c1c1c; --arcade-cyan: #e8e8e8;
  --arcade-magenta: #888888; --arcade-pink: #aaaaaa; --arcade-cream: #f4f4f4;
  --arcade-orange: #bcbcbc; --arcade-yellow: #dddddd;
  --frame-thin: 1px; --frame-heavy: 3px; --scanline-opacity: .025; --extrusion-depth: 5px;
  --bg: var(--arcade-bg); --bg-deep: #080808; --surface: var(--arcade-panel); --surface-2: #252525; --surface-3: #303030;
  --ink: var(--arcade-cream); --text: #dedede; --muted: #bbbbbb;
  --line: #444444; --line-strong: #777777; --accent: var(--arcade-cyan); --accent-strong: var(--arcade-cyan);
  --on-accent: #111111; --accent-soft: #333333; --mint: var(--arcade-cyan); --yellow: var(--arcade-yellow);
  --product-glass: var(--arcade-panel); --shadow: 5px 5px 0 #050505;
  --arcade-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #f4f4f4; --bg-deep: #111111; --surface: #fafafa; --surface-2: #e8e8e8; --surface-3: #d6d6d6;
  --ink: #1c1c1c; --text: #333333; --muted: #606060; --line: #bdbdbd; --line-strong: #808080;
  --accent: #444444; --accent-strong: #444444; --on-accent: #f4f4f4; --accent-soft: #e3e3e3;
  --product-glass: var(--surface); color-scheme: light;
}
body { background: var(--bg); color: var(--text); font-family: 'Inter', Arial, sans-serif; }
body::before, body::after, html[data-theme="dark"] body::before, html[data-theme="dark"] body::after { display: none; }
body .container { width: min(1240px, calc(100% - 64px)); }
body .site-header { background: var(--bg); border-bottom: 1px solid var(--accent); box-shadow: 0 4px 0 var(--bg), 0 5px 0 var(--arcade-magenta); backdrop-filter: none; }
body .nav { min-height: 82px; }
body .brand-word { font: 900 34px/1 var(--arcade-display); letter-spacing: .055em; text-transform: uppercase; text-shadow: 2px 2px 0 var(--arcade-magenta); }
body .brand-mark { border-radius: 0; color: var(--ink); background: transparent; }
body .brand-tag { color: var(--accent); border-color: var(--accent); border-radius: 0; }
body .nav-links .text-button { font: 700 13px/1.2 var(--arcade-display); letter-spacing: .1em; }
body :is(.primary-button, .secondary-button, .icon-button, .menu-button, .ArcadeButton) { border-radius: 0; transition: color 120ms, background 120ms, transform 120ms, box-shadow 120ms; }
body :is(.primary-button, .ArcadeButton) { color: var(--arcade-cream); background: #333333; border: 1px solid var(--arcade-cream); box-shadow: 3px 3px 0 var(--arcade-bg), 5px 5px 0 var(--arcade-cyan); font: 800 17px/1.2 var(--arcade-display); letter-spacing: .075em; text-transform: uppercase; min-height: 48px; }
body :is(.primary-button, .ArcadeButton):hover { background: #484848; transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--arcade-bg), 6px 6px 0 var(--arcade-cyan); }
body .secondary-button { color: var(--ink); background: var(--surface); border: 1px solid var(--accent); box-shadow: 3px 3px 0 var(--line); min-height: 48px; font: 700 16px/1.2 var(--arcade-display); letter-spacing: .055em; text-transform: uppercase; }
body .secondary-button:hover { border-color: var(--arcade-magenta); color: var(--ink); background: var(--surface-2); transform: translateX(1px); }
body :is(.icon-button,.menu-button) { color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: none; }
body .text-button { color: var(--accent); }
body .eyebrow, body .section-kicker, body .tile-lab { color: var(--accent); letter-spacing: .1em; }
body :is(.family-card,.feature-card,.path-card,.gallery-card,.download-card,.surface-card,.flow-step,.security-callout,.sync-destination,.ArcadeFrame) { border: var(--frame-thin) solid var(--line-strong); border-top: 3px solid var(--accent); border-radius: 0; background: var(--surface); box-shadow: 4px 4px 0 var(--bg-deep); backdrop-filter: none; -webkit-backdrop-filter: none; }
body :is(.family-card,.feature-card,.path-card,.gallery-card):hover { transform: none; box-shadow: 4px 4px 0 var(--arcade-magenta); }
body :is(.section-title,.trust-card h1,.promo-film-intro h2,.ArcadeHeading) { font-family: var(--arcade-display); font-weight: 800; letter-spacing: .005em; text-transform: uppercase; color: var(--ink); }
body .section-title, body.suite-home .section-title { font-size: clamp(36px,4.5vw,62px); line-height: .98; }
body :is(.family-card h3,.feature-card h3,.path-card h3,.flow-step h3,.gallery-copy h3,.download-card h3,.sync-host h2) { font-family: var(--arcade-display); font-weight: 700; letter-spacing: .01em; }
body :is(.family-card h3,.gallery-copy h3,.download-card h3) { font-size: 29px; }
body :is(.card-number,.section-kicker .number) { border-radius: 0; border: 1px solid var(--accent); background: var(--bg); color: var(--accent); box-shadow: 3px 3px 0 var(--arcade-magenta); }
body :is(.card-tag,.card-meta span) { border-radius: 0; border-color: var(--line-strong); color: var(--muted); }
body .product-section { padding-top: 88px; }
body .product-section-head { padding-top: 22px; border-top: 1px solid var(--accent); position: relative; }
body .product-section-head::before, .RetroDivider { content: ''; position: absolute; top: -5px; left: 0; width: 90px; height: 2px; background: var(--arcade-magenta); }
body .product-stat { background: var(--surface); backdrop-filter: none; }
body .product-rail { border: 1px solid var(--accent); background: var(--line); }
body .product-stat strong { color: var(--ink); font-family: var(--arcade-display); text-transform: uppercase; }
body :is(.product-visual,.promo-film-frame) { border: 1px solid var(--accent); border-radius: 0; background: var(--surface); box-shadow: 5px 5px 0 var(--arcade-magenta); }
body .product-visual::before { background: none; }
body .product-visual--sync { background: var(--surface); }
body .product-visual--sync::after { display: none; }
body :is(.sync-mark-tile,.sync-destination-index) { border-radius: 0; background: var(--bg-deep); color: var(--arcade-cream); }
body .sync-scene-heading, body .sync-scene-caption { color: var(--ink); border-color: var(--line-strong); }
body .sync-destination { box-shadow: 3px 3px 0 var(--arcade-magenta); }
body .visual-bar, body .promo-film-bar { color: var(--arcade-cream); border-color: var(--arcade-cyan); background: var(--arcade-bg); }
body .visual-shot { border: 1px solid var(--line-strong); box-shadow: 4px 4px 0 var(--arcade-magenta); }
body .visual-label { background: var(--surface); border: 1px solid var(--accent); box-shadow: 3px 3px 0 var(--arcade-magenta); }
body .gallery-copy { border-top: 1px solid var(--line-strong); }
body .client-preview::before { display: none; }
body :is(.client-preview img,.assistant-desktop-preview img) { box-shadow: none; }
body .promo-film-stage::before { display: none; }
body .promo-film-caption { background: var(--surface); border-color: var(--line-strong); }
body .security-callout { color: var(--text); }
body .guard { background: var(--surface); }
body .guard-grid { background: var(--line); border-color: var(--line-strong); }
body .install-notes { border-color: var(--line-strong); background: var(--surface); }
body input, body select, body textarea { border-radius: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--accent); }
body :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
body .site-footer { border-top: 3px double var(--accent); margin-top: 88px; }
body .footer-bottom { border-color: var(--arcade-magenta); color: var(--muted); }
body .product-hero:not(.arcade-marquee) { gap: 48px; padding-block: 64px; }
body .product-hero h1 { font: 900 clamp(58px,6.5vw,100px)/.95 var(--arcade-display); letter-spacing: .005em; text-transform: uppercase; text-shadow: 3px 3px 0 var(--arcade-magenta), 5px 5px 0 var(--bg-deep); }
body .product-hero h1 .marked { color: var(--accent); background: none; padding: 0; }
/* Marquee composition: illustration is decorative; every label remains live text. */
body .arcade-marquee { display: flex; flex-direction: column; justify-content: center; text-align: center; isolation: isolate; position: relative; min-height: 690px; margin-top: 34px; padding: 68px 48px 76px; gap: 0; color: var(--arcade-cream); background: var(--arcade-bg); border: 3px solid var(--arcade-cream); box-shadow: 0 0 0 5px var(--arcade-bg), 0 0 0 7px var(--arcade-magenta); overflow: hidden; }
.marquee-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: -2; }
.ScanlineOverlay::after { position: absolute; inset: 0; content: ''; background: repeating-linear-gradient(to bottom, rgba(255,255,255,var(--scanline-opacity)) 0 1px, transparent 1px 4px); pointer-events: none; z-index: -1; }
.marquee-overline { font: 600 12px/1.5 'IBM Plex Mono', monospace; letter-spacing: .18em; color: var(--arcade-cream); margin-bottom: 20px; background: var(--arcade-bg); padding: 6px 14px; }
body .arcade-marquee h1 { margin: 0; max-width: none; font: 900 clamp(120px,19vw,252px)/.78 var(--arcade-display); letter-spacing: .025em; color: var(--arcade-cream); -webkit-text-stroke: 2px var(--arcade-bg); text-shadow: 0 5px 0 var(--arcade-magenta), 0 10px 0 #555555, 0 14px 0 var(--arcade-cyan), 3px 17px 0 var(--arcade-bg); }
.marquee-tagline { margin-top: 32px; font: 800 clamp(23px,3.3vw,42px)/1.1 var(--arcade-display); letter-spacing: .13em; color: var(--arcade-cyan); text-transform: uppercase; text-shadow: 2px 2px 0 #050505; }
.marquee-description { max-width: 570px; font-size: 16px; line-height: 1.65; color: var(--arcade-cream); margin: 22px auto 0; background: #111111e6; padding: 8px 14px; }
body .arcade-marquee .hero-actions { justify-content: center; margin-top: 24px; }
body .arcade-marquee .primary-button { min-width: 208px; }
body .arcade-marquee .secondary-button { color: var(--arcade-cyan); background: var(--arcade-bg); border-color: var(--arcade-cyan); }
.marquee-foot { margin-top: 30px; font: 500 10px/1.5 'IBM Plex Mono',monospace; color: var(--arcade-cream); letter-spacing: .1em; }
.ArcadeBadge { display: grid; place-items: center; width: 94px; height: 94px; padding: 20px; clip-path: polygon(50% 0,61% 17%,80% 8%,81% 29%,100% 35%,87% 51%,100% 68%,79% 73%,77% 94%,58% 86%,44% 100%,34% 82%,13% 90%,16% 68%,0 57%,17% 43%,7% 22%,29% 23%,34% 3%); background: var(--arcade-cyan); color: var(--arcade-bg); font: 800 17px/1 var(--arcade-display); text-transform: uppercase; }
.arcade-marquee .ArcadeBadge { position: absolute; right: 5%; top: 9%; transform: rotate(10deg); }
.arcade-routing { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; padding-block: 76px 30px; }
.arcade-routing .product-visual { min-height: 410px; }
.arcade-routing h2 { font: 800 clamp(38px,4.8vw,62px)/1 var(--arcade-display); text-transform: uppercase; color: var(--ink); margin: 18px 0; }
.arcade-routing p { line-height: 1.7; margin-bottom: 20px; }
@media (max-width:980px) {
 body .container { width: calc(100% - 40px); }
 body .product-hero:not(.arcade-marquee), .arcade-routing { grid-template-columns: 1fr; }
 body .arcade-marquee { min-height: 610px; padding-inline: 36px; }
 .arcade-marquee .ArcadeBadge { width: 72px; height: 72px; font-size: 13px; right: 4%; top: 7%; }
 .arcade-routing { gap: 28px; }
}
@media (max-width:720px) {
 body .container { width: calc(100% - 32px); }
 body .nav { min-height: 68px; }
 body .brand-word { font-size: 27px; }
 body .arcade-marquee { min-height: 585px; margin-top: 22px; padding: 76px 20px 42px; }
 body .arcade-marquee h1 { font-size: clamp(110px,29vw,190px); -webkit-text-stroke: 1px var(--arcade-bg); }
 .marquee-art { object-fit: cover; }
 .marquee-overline { font-size: 9px; letter-spacing: .07em; margin-bottom: 22px; }
 .marquee-tagline { font-size: 24px; letter-spacing: .06em; }
 .marquee-description { font-size: 14px; margin-top: 16px; }
 .arcade-marquee .ArcadeBadge { width: 60px; height: 60px; padding: 12px; top: 12px; right: 14px; font-size: 11px; }
 body .arcade-marquee .hero-actions { width: 100%; gap: 14px; }
 body .arcade-marquee .hero-actions a { width: 100%; }
 .marquee-foot { font-size: 8px; }
 body .product-section { padding-top: 58px; }
 body .product-hero h1 { font-size: 62px; }
 body .product-hero:not(.arcade-marquee) { padding-top: 40px; gap: 32px; }
 body .gallery-copy h3 { font-size: 26px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation: none !important; transition: none !important; }
}
html, html[data-theme="dark"], html[data-theme="light"], html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] .product-visual--sync::before { background: none; }
body .arcade-marquee h1 { position: relative; }
body .arcade-marquee h1::after { content: attr(data-text); position: absolute; inset: 0; background: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 43%, #999999 49%, #222222 51%, #eeeeee 53%, #bcbcbc 79%, #e8e8e8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px #111111; text-shadow: none; }
@media(max-width:720px) { body.suite-home .arcade-marquee h1 { font-size: clamp(110px,29vw,190px); } }

/* Only decorative artwork is desaturated; original product captures retain their pixels. */
.marquee-art { filter: grayscale(1); }
html[data-theme="dark"] .sync-mark-tile { color: var(--arcade-cream); background: var(--bg-deep); }
/* Light surfaces need a crisp headline face rather than dark stacked extrusion. */
html[data-theme="light"] body .product-hero:not(.arcade-marquee) h1 {
  color: #202020;
  text-shadow: 2px 2px 0 #d2d2d2;
  -webkit-text-stroke: 0;
}
html[data-theme="light"] body .product-hero:not(.arcade-marquee) h1 .marked {
  color: #202020;
  text-shadow: inherit;
}

/* Angular screen-and-fangs emblem replaces the circular lettermark. */
body .brand-mark { width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 0; background: none; box-shadow: none; }
body .brand-mark svg { width: 40px; height: 40px; }
@media(max-width:720px) { body .brand-mark, body .brand-mark svg { width: 32px; height: 32px; } body .brand-mark { flex-basis: 32px; } }
/* Temporarily suppress Control/Stream screenshots without removing their assets. */
body .client-preview, body .stream-preview { display: none; }
body .product-hero:has(.stream-preview) { grid-template-columns: 1fr; min-height: 0; }
body .product-hero:has(.stream-preview) .product-hero-copy { max-width: 820px; }

/* Arcade motion stays on decorative layers; copy and controls remain stationary. */
.hero-grid-motion { position: absolute; z-index: -1; pointer-events: none; left: 5%; right: 5%; bottom: 3%; height: 24%; overflow: hidden; perspective: 240px; opacity: .22; }
.hero-grid-motion::before { content: ''; position: absolute; inset: -80% -30%; background: repeating-linear-gradient(0deg, transparent 0 37px, #eee 38px 39px, transparent 40px); transform: rotateX(58deg); animation: arcade-grid-travel 3s linear infinite; }
.hero-frame-sweep { position: absolute; inset: 10px; pointer-events: none; border: 1px solid transparent; overflow: hidden; }
.hero-frame-sweep::before { content: ''; position: absolute; left: -25%; top: 0; width: 25%; height: 2px; background: linear-gradient(90deg, transparent, #fff, transparent); animation: arcade-frame-travel 7s linear infinite; }
body .arcade-marquee h1::after { background-image: linear-gradient(105deg, transparent 40%, #ffffffa0 48%, transparent 56%), linear-gradient(to bottom, #fff 0%, #f4f4f4 43%, #999 49%, #222 51%, #eee 53%, #bcbcbc 79%, #e8e8e8 100%); background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; animation: arcade-chrome-sweep 8s linear infinite; }
.hero-motion-toggle { position: absolute; left: 28px; bottom: 14px; padding: 6px 8px; background: #111; color: #ccc; border: 1px solid #777; font: 500 9px/1.2 'IBM Plex Mono', monospace; text-transform: uppercase; cursor: pointer; z-index: 3; }
@keyframes arcade-grid-travel { from { background-position: 0 0; } to { background-position: 0 40px; } }
@keyframes arcade-frame-travel { 0%, 15% { transform: translateX(0); } 65%, 100% { transform: translateX(520%); } }
@keyframes arcade-chrome-sweep { 0%, 20% { background-position: 160% 0, 0 0; } 55%, 100% { background-position: -80% 0, 0 0; } }
body .arcade-marquee[data-motion-paused="true"] *, body .arcade-marquee[data-motion-paused="true"] *::before, body .arcade-marquee[data-motion-paused="true"] *::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero-grid-motion, .hero-frame-sweep, .hero-motion-toggle { display: none; } body .arcade-marquee h1::after { animation: none; background-image: linear-gradient(to bottom, #fff 0%, #f4f4f4 43%, #999 49%, #222 51%, #eee 53%, #bcbcbc 79%, #e8e8e8 100%); background-size: 100% 100%; } }
@media(max-width:720px) { .hero-motion-toggle { left: 16px; bottom: 10px; font-size: 8px; } }
/* A low-intensity edge light keeps the cabinet frames crisp without a neon halo. */
:root { --card-edge-light: rgba(255,255,255,.14); --card-edge-halo: rgba(255,255,255,.055); }
html[data-theme="light"] { --card-edge-light: rgba(255,255,255,.85); --card-edge-halo: rgba(0,0,0,.045); }
body :is(.family-card,.feature-card,.path-card,.gallery-card,.download-card,.surface-card,.flow-step,.security-callout,.sync-destination,.product-visual,.promo-film-frame,.product-rail,.guard-grid,.install-notes) {
  box-shadow: inset 0 0 0 1px var(--card-edge-light), 0 0 7px 1px var(--card-edge-halo), 4px 4px 0 var(--bg-deep);
}
body :is(.family-card,.feature-card,.path-card,.gallery-card):hover {
  box-shadow: inset 0 0 0 1px var(--card-edge-light), 0 0 9px 1px var(--card-edge-halo), 4px 4px 0 var(--arcade-magenta);
}