/* Desk Buddy // Tokyo Midnight terminal layer
   Loaded after page styles so every surface speaks the same visual language. */

:root {
  --void: #060914;
  --panel: #0b1222;
  --panel-2: #0f1930;
  --panel-3: #14213a;
  --line: rgba(99, 183, 255, .2);
  --line-hot: rgba(87, 217, 255, .55);
  --ink: #edf6ff;
  --muted: #8195bb;
  --cyan: #57d9ff;
  --pink: #ff3b9d;
  --green-glow: #55f6bf;
  --amber: #ffcc66;
  --danger: #ff617d;
  --terminal-shadow: 0 24px 70px rgba(0, 0, 0, .38);
}

html { background: var(--void); }

body {
  min-height: 100vh;
  background-color: var(--void) !important;
  background-image:
    radial-gradient(circle at 10% 4%, rgba(56, 65, 160, .18), transparent 32rem),
    radial-gradient(circle at 90% 20%, rgba(255, 59, 157, .08), transparent 28rem),
    linear-gradient(rgba(87, 217, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 217, 255, .025) 1px, transparent 1px) !important;
  background-size: auto, auto, 36px 36px, 36px 36px !important;
  color: var(--ink);
}

main { position: relative; z-index: 1; overflow: clip; }
::selection { color: var(--void); background: var(--green-glow); }

.ambient-grid { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambient-orb { position: absolute; width: 26rem; aspect-ratio: 1; border-radius: 50%; filter: blur(110px); opacity: .07; }
.ambient-orb--cyan { top: 20%; left: -13rem; background: var(--cyan); }
.ambient-orb--pink { top: 55%; right: -15rem; background: var(--pink); }

.signal-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green-glow); box-shadow: 0 0 0 3px rgba(85,246,191,.08), 0 0 12px rgba(85,246,191,.85); animation: signalPulse 2s ease-in-out infinite; }
.signal-dot--cyan { background: var(--cyan); box-shadow: 0 0 0 3px rgba(87,217,255,.08), 0 0 12px rgba(87,217,255,.85); }
.signal-dot--pink { background: var(--pink); box-shadow: 0 0 0 3px rgba(255,59,157,.08), 0 0 12px rgba(255,59,157,.85); }
.signal-dot--off { background: var(--danger); box-shadow: 0 0 8px rgba(255,97,125,.45); animation: none; }

.terminal-kicker, .page-section__label, .section-label, .docs-tag, .store-eyebrow {
  color: var(--green-glow) !important;
  font: 500 .69rem/1.2 var(--font-mono) !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}

.data-chip { display: inline-flex; align-items: center; width: fit-content; padding: .32rem .55rem; border: 1px solid rgba(87,217,255,.32); color: var(--cyan); background: rgba(87,217,255,.055); font: 500 .62rem/1 var(--font-mono); letter-spacing: .11em; }

.terminal-window__bar { min-height: 38px; padding: 0 .85rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); color: var(--muted); font: 500 .63rem/1 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.terminal-window__lights { display: flex; gap: 5px; }
.terminal-window__lights i { width: 7px; height: 7px; border: 1px solid var(--muted); border-radius: 50%; }
.terminal-window__lights i:first-child { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 8px rgba(255,59,157,.6); }
.terminal-window__lights i:nth-child(2) { background: var(--amber); border-color: var(--amber); }
.terminal-window__lights i:last-child { background: var(--green-glow); border-color: var(--green-glow); }
.terminal-window__bar > span:nth-child(2) { justify-self: center; }
.terminal-window__status { justify-self: end; display: inline-flex; align-items: center; gap: .45rem; color: var(--green-glow); }

[data-terminal-spotlight] { --spot-x: 50%; --spot-y: 50%; position: relative; isolation: isolate; }
[data-terminal-spotlight]::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(340px circle at var(--spot-x) var(--spot-y), rgba(87,217,255,.075), transparent 64%); transition: opacity .25s ease; }
[data-terminal-spotlight]:hover::after { opacity: 1; }

.terminal-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.terminal-reveal.is-visible { opacity: 1; transform: none; }

/* Navigation */
nav { padding-inline: clamp(1rem, 3vw, 2.6rem); background: rgba(5, 9, 20, .9) !important; border-bottom-color: rgba(87,217,255,.25) !important; }
.nav-system-status { display: inline-flex; align-items: center; gap: .45rem; margin-right: .4rem; color: var(--green-glow); font: 500 .59rem/1 var(--font-mono); letter-spacing: .1em; }
.nav-system-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.nav-brand a::before { font-size: .8rem; }
.nav-cart-link::before { content: "[ "; color: var(--pink); }
.nav-cart-link::after { content: " ]"; color: var(--pink); }
.mega-menu { background-image: linear-gradient(rgba(87,217,255,.024) 1px, transparent 1px), linear-gradient(90deg, rgba(87,217,255,.022) 1px, transparent 1px) !important; background-size: 28px 28px !important; }
.mega-item__icon { position: relative; overflow: hidden; }
.mega-item__icon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(87,217,255,.12), transparent 65%); transform: translateX(-100%); transition: transform .45s ease; }
.mega-item:hover .mega-item__icon::after { transform: translateX(100%); }

/* Shared page structure */
.page-header { position: relative; padding: clamp(3.8rem, 8vw, 6.5rem) 2rem clamp(3rem, 6vw, 5rem) !important; overflow: hidden; background: linear-gradient(180deg, rgba(18,28,57,.78), rgba(6,9,20,.4)) !important; border-bottom: 1px solid var(--line) !important; }
.page-header::before { content: ""; position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(87,217,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(87,217,255,.045) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse 65% 100% at 50% 0%, black, transparent); }
.page-header::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: min(680px, 80vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 16px rgba(87,217,255,.65); }
.page-header-inner { position: relative; max-width: 840px; }
.page-header__console { display: flex; align-items: center; gap: .65rem; margin-bottom: 2rem; color: var(--muted); font: 500 .62rem/1 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.page-header__rule { width: clamp(2rem, 8vw, 7rem); height: 1px; background: linear-gradient(90deg, var(--line-hot), transparent); }
.page-header h1 { margin-bottom: 1.4rem !important; color: var(--ink) !important; font: 500 clamp(2.65rem, 7vw, 5.7rem)/.94 var(--font-mono) !important; letter-spacing: -.065em !important; text-shadow: 0 0 34px rgba(87,217,255,.16); }
.page-header h1::before { color: var(--pink); font-size: .7em; }
.page-header p { max-width: 650px; color: #a5b5d0 !important; font-size: clamp(.88rem, 1.6vw, 1.03rem) !important; line-height: 1.85 !important; }
.page-header__meta { display: flex; justify-content: center; gap: 1.4rem; margin-top: 2.2rem; color: #607397; font: 500 .58rem/1 var(--font-mono); letter-spacing: .11em; }
.page-header__meta b { color: var(--green-glow); font-weight: 500; }

.page-section, .hiw-section, .assembled-products, .byo-paths { position: relative; background: rgba(6,9,20,.22) !important; border-bottom: 1px solid rgba(87,217,255,.08); }
.page-section:nth-of-type(even), .hiw-section:nth-of-type(even) { background: rgba(14,22,41,.45) !important; }
.page-section--dark, .hiw-section-dark { background: #080e1d !important; }
.page-section__inner, .hiw-inner { max-width: 1080px; }
.page-section__title, .hiw-section h2 { color: var(--ink) !important; font-weight: 500 !important; letter-spacing: -.04em !important; }
.page-section__intro, .hiw-intro { color: var(--muted) !important; }

/* Home */
#hero { min-height: calc(100vh - var(--nav-h)); padding-top: 2rem; background: radial-gradient(ellipse at 50% -15%, #27275f 0, #0a1020 50%, #060914 100%) !important; }
#hero::after { content: "DESK_BUDDY / NETWORK 01"; position: absolute; top: 1.25rem; left: 2rem; color: rgba(87,217,255,.38); font: .58rem/1 var(--font-mono); letter-spacing: .16em; }
.hero-split { max-width: 1320px; gap: 1rem; }
.hero-panel { gap: 0; padding: 0; border: 1px solid rgba(87,217,255,.18); background: rgba(5,9,20,.48); box-shadow: 0 18px 50px rgba(0,0,0,.2); }
.hero-panel:hover { border-color: rgba(87,217,255,.75); box-shadow: 0 0 35px rgba(87,217,255,.12), 0 30px 70px rgba(0,0,0,.35); }
.hero-panel--build:hover { border-color: rgba(255,59,157,.7); box-shadow: 0 0 35px rgba(255,59,157,.1), 0 30px 70px rgba(0,0,0,.35); }
.hero-panel-console { display: flex; justify-content: space-between; align-items: center; min-height: 34px; padding: 0 .8rem; border-bottom: 1px solid var(--line); color: var(--muted); font: 500 .58rem/1 var(--font-mono); letter-spacing: .1em; }
.hero-panel-console span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-panel-images { gap: 1px; }
.hero-img-primary, .hero-img-secondary-item { border: 0; border-radius: 0; }
.hero-img-primary { position: relative; }
.hero-img-primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(6,9,20,.55)), repeating-linear-gradient(0deg, rgba(87,217,255,.035) 0 1px, transparent 1px 4px); }
.hero-panel-content { padding: 1.3rem 1.5rem 1.5rem; }
.hero-panel-content h2 { font-weight: 500; letter-spacing: -.035em; }
.hero-panel-desc { color: #8ea1c1; }
.hero-price { color: var(--green-glow); }
.hero-blurb { width: min(1000px, calc(100% - 2rem)); border-top-color: var(--line); }
.hero-blurb h1 { font-size: clamp(2.2rem, 5vw, 4.3rem); letter-spacing: -.055em; }
.hero-blurb h1 .prompt { color: var(--pink); }
.hero-scroll-hint { color: var(--cyan); }
#detect, #components, #mission, #webapp { background: rgba(7,12,25,.76) !important; border-bottom: 1px solid var(--line); }
.detect-image, .feature-wide-image, .feature-img-bare, .feature-img-screen { position: relative; border-radius: 0; border: 1px solid var(--line); box-shadow: var(--terminal-shadow); }
.detect-image::after, .feature-wide-image::after, .feature-img-bare::after { content: "CAM.FEED / LIVE"; position: absolute; top: .65rem; left: .65rem; padding: .3rem .45rem; color: var(--green-glow); background: rgba(6,9,20,.76); border: 1px solid rgba(85,246,191,.3); font: .56rem/1 var(--font-mono); letter-spacing: .1em; }
.detect-text h2, .feature-text h2, .feature-wide-text h2 { color: var(--ink) !important; font-weight: 500; letter-spacing: -.04em; }
.detect-text p, .feature-text p, .feature-wide-text p { color: var(--muted) !important; }
.feature-img-screen::before { background-color: var(--panel-2); border-color: var(--line); }

/* Store, products, cart, checkout */
.store-page { max-width: 1280px; padding-top: 4.5rem; }
.store-header { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.store-title { color: var(--ink) !important; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.05em; }
.store-title::before { content: "> "; color: var(--pink); }
.filter-label { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.product-grid { gap: 1.2rem; }
.product-card { overflow: hidden; background: rgba(10,18,34,.88) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: 0 18px 45px rgba(0,0,0,.22) !important; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important; }
.product-card:hover { transform: translateY(-4px); border-color: var(--line-hot) !important; box-shadow: 0 0 30px rgba(87,217,255,.1), 0 24px 55px rgba(0,0,0,.32) !important; }
.product-card__console { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; min-height: 31px; padding: 0 .65rem; border-bottom: 1px solid var(--line); color: var(--muted); font: 500 .56rem/1 var(--font-mono); letter-spacing: .1em; }
.product-card__console span { display: inline-flex; align-items: center; gap: .45rem; }
.product-card__image-link { background: #0a1120 !important; }
.product-card__image { filter: saturate(.82) contrast(1.05); transition: transform .4s ease, filter .4s ease; }
.product-card:hover .product-card__image { filter: saturate(1.05) contrast(1.08); transform: scale(1.025); }
.product-card__body { border-top: 1px solid rgba(87,217,255,.1); }
.product-card__name a, .product-detail__name { color: var(--ink) !important; font-family: var(--font-mono); }
.product-card__price, .product-detail__price { color: var(--green-glow) !important; font-family: var(--font-mono); text-shadow: 0 0 14px rgba(85,246,191,.24); }
.product-card__versions, .product-card__desc { color: var(--muted) !important; }
.product-type-badge, .stock-badge { border-radius: 0 !important; letter-spacing: .08em; }
.color-swatch { box-shadow: 0 0 0 1px var(--panel), 0 0 0 2px var(--line-hot); }

.cart-page, .checkout-page, .account-page { padding-top: 4rem; }
.cart-layout, .checkout-layout { gap: 2rem; }
.cart-table, .checkout-main, .cart-totals, .checkout-summary { background: rgba(10,18,34,.76); border: 1px solid var(--line); }
.cart-table thead th { padding-top: .8rem; background: rgba(87,217,255,.04); color: var(--cyan); border-color: var(--line); }
.cart-table td { border-color: rgba(87,217,255,.1); }
.cart-item__name a { color: var(--ink) !important; }
.cart-totals, .checkout-summary, .checkout-main { border-radius: 0 !important; box-shadow: var(--terminal-shadow); }
.cart-totals::before, .checkout-summary::before, .checkout-main::before { content: "// ORDER TERMINAL"; display: block; margin: -1.25rem -1.25rem 1.25rem; padding: .65rem 1rem; border-bottom: 1px solid var(--line); color: var(--cyan); background: rgba(87,217,255,.035); font: .62rem/1 var(--font-mono); letter-spacing: .12em; }
.checkout-main::before { margin: -1.5rem -1.5rem 1.5rem; content: "// SECURE CHECKOUT"; }
.checkout-step__num { border-radius: 0; }
.checkout-step.is-current .checkout-step__num { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 14px rgba(255,59,157,.35); }
.checkout-step.is-done .checkout-step__num { border-color: var(--green-glow); color: var(--green-glow); }
.checkout-step__connector { background: var(--line); }
.cart-checkout-banner { background: rgba(85,246,191,.06); border-color: rgba(85,246,191,.32); color: var(--green-glow); }

/* Docs, BOM and account */
.docs-layout { max-width: 1180px; padding-top: 4rem; }
.docs-sidebar { border: 1px solid var(--line); padding: 1rem; background: rgba(10,18,34,.76); }
.docs-sidebar::before { content: "INDEX.MD"; display: block; margin: -1rem -1rem .8rem; padding: .65rem 1rem; color: var(--cyan); border-bottom: 1px solid var(--line); font: .6rem/1 var(--font-mono); letter-spacing: .13em; }
.docs-nav, .asm-sidebar { position: static; inset: auto; width: auto; height: auto; display: block; padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
.docs-hero { position: relative; padding: 1.8rem; border: 1px solid var(--line); background: rgba(12,20,38,.76); }
.docs-hero::after { content: "READ_ONLY"; position: absolute; top: 1rem; right: 1rem; color: var(--muted); font: .57rem/1 var(--font-mono); letter-spacing: .1em; }
.docs-hero h1 { color: var(--ink); font: 500 clamp(2rem,5vw,3.25rem)/1 var(--font-mono); letter-spacing: -.05em; }
.docs-hero p, .docs-section > p { color: var(--muted); }
.docs-section { position: relative; padding: 2rem !important; border: 1px solid var(--line) !important; background: rgba(9,16,31,.7) !important; }
.docs-section + .docs-section { margin-top: 1rem; }
.docs-section h2 { color: var(--ink) !important; font-family: var(--font-mono); font-weight: 500; }
.docs-section h2::before { content: "# "; color: var(--pink); }
.docs-section--highlight { background: linear-gradient(135deg, rgba(255,59,157,.07), rgba(87,217,255,.04)) !important; border-color: rgba(255,59,157,.3) !important; }
.docs-stl-preview { border-left-color: var(--line) !important; }
.fw-code-block, .code-block { position: relative; border: 1px solid rgba(87,217,255,.24) !important; border-radius: 0 !important; background: #050912 !important; box-shadow: 0 18px 34px rgba(0,0,0,.2); }
.fw-code-block::before { content: "JSON"; position: absolute; top: .5rem; right: .65rem; color: rgba(87,217,255,.42); font: .52rem/1 var(--font-mono); letter-spacing: .1em; }
.fw-code-block code, .fw-code-block pre, .code-block code { color: #c8d8ee !important; }
.code-block-bar { color: var(--cyan); background: rgba(87,217,255,.045); border-color: var(--line); }
.fw-command, .fw-note { background: rgba(14,25,46,.8) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; }
.fw-command__action { color: var(--green-glow) !important; }
.fw-note i { color: var(--amber) !important; }
.fw-note p { color: var(--muted) !important; }
.fw-fields li { color: var(--muted) !important; border-color: rgba(87,217,255,.12) !important; }
.bom-table-wrap { box-shadow: var(--terminal-shadow); }
.bom-table th { letter-spacing: .1em; }
.bom-table tbody tr { background: rgba(7,12,24,.62); }
.account-card, .auth-card { border-radius: 0 !important; background: rgba(10,18,34,.86) !important; }
.auth-page { min-height: calc(100vh - var(--nav-h)); background: radial-gradient(circle at 50% 40%, rgba(47,63,130,.16), transparent 30rem) !important; }
.auth-card { position: relative; overflow: hidden; border-color: rgba(87,217,255,.3) !important; box-shadow: var(--terminal-shadow), 0 0 35px rgba(87,217,255,.06) !important; }
.auth-card::before { content: "SECURE.AUTH // TLS 1.3"; display: block; margin: -2.5rem -2.5rem 2rem; padding: .75rem 1rem; color: var(--cyan); border-bottom: 1px solid var(--line); background: rgba(87,217,255,.025); font: .58rem/1 var(--font-mono); letter-spacing: .12em; }
.auth-header h1 { color: var(--ink) !important; font-family: var(--font-mono); font-weight: 500; letter-spacing: -.03em; }.auth-header h1::before { content: "> "; color: var(--pink); }.auth-header img { filter: drop-shadow(0 0 9px rgba(87,217,255,.4)); }
.auth-field label, .auth-remember { color: #afbed8 !important; }.auth-field input, .settings-select { color: var(--ink) !important; background: #07101f !important; border: 1px solid rgba(87,217,255,.3) !important; border-radius: 0 !important; caret-color: var(--green-glow); }.auth-field input::placeholder { color: #536687 !important; }.auth-field input:focus { border-color: var(--green-glow) !important; box-shadow: 0 0 0 2px rgba(85,246,191,.08), 0 0 18px rgba(85,246,191,.08); }
.auth-submit { border-radius: 0 !important; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }.auth-links a { color: var(--muted) !important; }.auth-links a:hover { color: var(--cyan) !important; }
.account-card { counter-increment: account-card; }
.account-card::before { content: "0" counter(account-card); color: var(--pink); font: .6rem/1 var(--font-mono); letter-spacing: .1em; }
.account-cards { counter-reset: account-card; }
.account-section { border-color: var(--line); }
.checkout-complete { border: 1px solid var(--line); border-radius: 0 !important; background: rgba(10,18,34,.82) !important; box-shadow: var(--terminal-shadow); }.checkout-complete__icon { color: var(--void) !important; background: var(--green-glow) !important; border-radius: 0 !important; box-shadow: 0 0 24px rgba(85,246,191,.35); }.checkout-complete h1 { color: var(--ink) !important; font-family: var(--font-mono); }.checkout-complete p { color: var(--muted) !important; }.checkout-complete__guest-prompt { border-color: var(--line) !important; }

.empty-terminal { max-width: 760px; margin: 2.5rem auto; overflow: hidden; border: 1px solid var(--line); background: rgba(7,13,26,.86); box-shadow: var(--terminal-shadow); }
.empty-terminal__body { display: grid; justify-items: center; padding: clamp(2.5rem,7vw,5rem) 2rem; text-align: center; background-image: radial-gradient(circle at center, rgba(87,217,255,.07), transparent 46%), linear-gradient(rgba(87,217,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(87,217,255,.025) 1px, transparent 1px); background-size: auto, 28px 28px, 28px 28px; }
.empty-terminal__visual { position: relative; width: 96px; height: 96px; display: grid; place-items: center; margin-bottom: 2rem; color: var(--cyan); border: 1px solid rgba(87,217,255,.3); transform: rotate(45deg); box-shadow: inset 0 0 25px rgba(87,217,255,.06), 0 0 25px rgba(87,217,255,.07); }
.empty-terminal__visual i { font-size: 1.7rem; transform: rotate(-45deg); }.empty-terminal__visual span { position: absolute; right: -1.2rem; bottom: -.8rem; padding: .25rem .4rem; color: var(--pink); background: var(--panel); border: 1px solid rgba(255,59,157,.35); font: .55rem/1 var(--font-mono); transform: rotate(-45deg); }
.empty-terminal h2 { margin: .75rem 0; color: var(--ink); font: 500 clamp(1.35rem,3vw,2rem)/1 var(--font-mono); }.empty-terminal p { max-width: 480px; margin-bottom: 1.5rem; color: var(--muted); font-size: .84rem; line-height: 1.7; }

.product-card__image-placeholder, .product-detail__image-placeholder { position: relative; flex-direction: column; gap: .7rem; overflow: hidden; color: var(--cyan) !important; background: radial-gradient(circle at center, rgba(87,217,255,.08), transparent 28%), linear-gradient(rgba(87,217,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(87,217,255,.04) 1px, transparent 1px), #101b32 !important; background-size: auto, 24px 24px, 24px 24px, auto !important; }
.product-card__image-placeholder::before, .product-detail__image-placeholder::before { content: ""; position: absolute; width: 110px; aspect-ratio: 1; border: 1px solid rgba(87,217,255,.13); border-radius: 50%; box-shadow: inset 0 0 0 24px transparent, inset 0 0 0 25px rgba(87,217,255,.1); animation: radarSpin 14s linear infinite; }
.product-card__image-placeholder i, .product-detail__image-placeholder i { position: relative; z-index: 1; font-size: 2rem; filter: drop-shadow(0 0 12px rgba(87,217,255,.5)); }.product-card__image-placeholder span, .product-detail__image-placeholder span { position: relative; z-index: 1; font: .58rem/1 var(--font-mono); letter-spacing: .12em; }.product-card__image-placeholder small, .product-detail__image-placeholder small { position: relative; z-index: 1; color: var(--muted); font: .48rem/1 var(--font-mono); letter-spacing: .1em; }

/* How it works */
.hiw-inner { max-width: 1100px !important; }
.hiw-two-col { gap: clamp(2rem, 6vw, 5rem); }
.hiw-subhead { color: var(--ink) !important; font-weight: 500; }
.hiw-subhead::before { content: ":: "; color: var(--cyan); }
.topic-row { padding: .75rem; border: 1px solid var(--line); background: rgba(9,16,31,.7); }
.topic-row code { color: var(--green-glow) !important; }
.topic-badge { background: rgba(255,59,157,.1); color: var(--pink); border: 1px solid rgba(255,59,157,.35); }
.action-list li { color: var(--muted) !important; border-left-color: var(--line-hot) !important; background: linear-gradient(90deg, rgba(87,217,255,.035), transparent); }
.action-list li:hover { color: var(--ink) !important; border-left-color: var(--pink) !important; }
.action-list li code { color: var(--green-glow) !important; }
.btn-hiw-link { font-family: var(--font-mono); }
.hardware-grid { gap: 1rem; }
.hw-card, .ai-model-card { position: relative; overflow: hidden; border: 1px solid var(--line) !important; border-radius: 0 !important; background: rgba(10,18,34,.72) !important; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.hw-card::before, .ai-model-card::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.hw-card:hover, .ai-model-card:hover { transform: translateY(-3px); border-color: var(--line-hot) !important; background: rgba(14,25,46,.92) !important; }
.hw-card h3, .hw-card strong, .ai-model-card h3 { color: var(--ink) !important; }
.hw-card p, .ai-model-card p { color: var(--muted) !important; }
.hw-card-icon, .ai-model-icon { color: var(--pink) !important; }
.hw-dof-callout { border: 1px solid var(--line); border-radius: 0; background: linear-gradient(100deg, rgba(87,217,255,.08), rgba(255,59,157,.06)); }
.hw-dof-number { color: transparent; -webkit-text-stroke: 1px var(--cyan); text-shadow: 0 0 24px rgba(87,217,255,.3); }
.mqtt-flow__step { border: 1px solid var(--line) !important; border-radius: 0 !important; background: rgba(10,18,34,.72) !important; }
.mqtt-flow__num { color: var(--void) !important; background: var(--green-glow) !important; border-radius: 0 !important; }
.mqtt-flow__arrow { color: var(--pink) !important; }

/* Ecosystem topology */
/* The ecosystem diagram has no window frame: its nodes sit on the page background. */
.ecosystem-stage { padding: clamp(.5rem, 2vw, 1rem) 0; }
.ecosystem-zone > header { display: flex; justify-content: space-between; align-items: center; padding: 0 0 .4rem; color: var(--cyan); font: 500 .8rem/1 var(--font-mono); letter-spacing: .12em; }
.ecosystem-zone > header small { color: var(--muted); font-size: .72rem; }
.ecosystem-node-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,.55fr) minmax(0,1fr); align-items: center; gap: 1.25rem; padding: 1.25rem 0; }
.ecosystem-node { min-height: 160px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: .4rem 1rem; padding: 1.25rem; border: 1px solid rgba(87,217,255,.26); background: linear-gradient(145deg, rgba(20,33,58,.9), rgba(8,14,28,.9)); box-shadow: inset 0 1px rgba(255,255,255,.03); }
.ecosystem-node--broker { border-color: rgba(255,59,157,.58); box-shadow: inset 0 0 30px rgba(255,59,157,.05), 0 0 20px rgba(255,59,157,.06); }
.ecosystem-node__icon { grid-row: 1 / span 2; width: 48px; height: 48px; display: grid; place-items: center; font-size: 1.2rem; color: var(--cyan); border: 1px solid rgba(87,217,255,.35); background: rgba(87,217,255,.06); }
.ecosystem-node--broker .ecosystem-node__icon, .ecosystem-node--ai .ecosystem-node__icon { color: var(--pink); border-color: rgba(255,59,157,.4); background: rgba(255,59,157,.06); }
.ecosystem-node__id { color: var(--muted); font: .72rem/1 var(--font-mono); letter-spacing: .1em; }
.ecosystem-node h3 { margin: .3rem 0; color: var(--ink); font: 500 clamp(1.05rem,1.7vw,1.3rem)/1.2 var(--font-mono); }
.ecosystem-node p { margin: 0; color: var(--muted); font-size: .9rem; }
.ecosystem-node__state { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; margin-top: .8rem; padding-top: .75rem; border-top: 1px solid rgba(87,217,255,.1); color: var(--green-glow); font: 500 .72rem/1 var(--font-mono); letter-spacing: .1em; }
.ecosystem-link { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem .4rem; color: var(--cyan); text-align: center; font: 500 .76rem/1 var(--font-mono); letter-spacing: .08em; }
.ecosystem-link > span { flex-basis: 100%; order: 1; }
.ecosystem-link i { order: 2; }
.ecosystem-link::before { content: ""; flex-basis: 100%; order: 3; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan) 20%, var(--cyan) 80%, transparent); }
.ecosystem-link i { width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: packetBlink 1.4s infinite; }
.ecosystem-link i:nth-of-type(2) { animation-delay: .22s; }
.ecosystem-link i:nth-of-type(3) { animation-delay: .44s; }
.ecosystem-link small { flex-basis: 100%; order: 4; color: var(--muted); font-size: .66rem; }
.ecosystem-link small b { color: var(--green-glow); font-weight: 500; }
.ecosystem-bus { position: relative; min-height: 110px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: center; }
.ecosystem-bus__track { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(var(--cyan), var(--pink), var(--cyan)); box-shadow: 0 0 10px rgba(87,217,255,.45); }
.ecosystem-bus__track::before, .ecosystem-bus__track::after { content: ""; position: absolute; left: -4px; width: 9px; height: 1px; background: var(--cyan); }
.ecosystem-bus__track::before { top: 0; }.ecosystem-bus__track::after { bottom: 0; }
.ecosystem-bus > div { color: var(--muted); font: .72rem/1.5 var(--font-mono); letter-spacing: .1em; }
.ecosystem-bus > div:first-of-type { padding-right: 4rem; text-align: right; }.ecosystem-bus > div:last-of-type { padding-left: 4rem; text-align: left; }
.ecosystem-bus b { display: block; color: var(--cyan); font-size: .78rem; }
.ecosystem-bus small { font-size: .66rem; }
.ecosystem-bus__packet { position: absolute; z-index: 2; left: calc(50% - 3px); width: 7px; height: 12px; background: var(--green-glow); box-shadow: 0 0 12px var(--green-glow); animation: packetTravel 2.8s linear infinite; }
.ecosystem-bus__packet--two { background: var(--pink); box-shadow: 0 0 12px var(--pink); animation-delay: -1.4s; }

/* AI control deck */
.ai-console-section, .vision-lab { padding: clamp(2rem, 6vw, 5rem) clamp(1rem,4vw,2rem); }
.ai-console-shell, .vision-preview { max-width: 1200px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(87,217,255,.32); background: rgba(6,11,22,.94); box-shadow: var(--terminal-shadow), 0 0 55px rgba(87,217,255,.07); }
.ai-console-grid { display: grid; grid-template-columns: 190px 1fr; min-height: 580px; }
.ai-console-nav { display: flex; flex-direction: column; padding: 1rem .7rem; border-right: 1px solid var(--line); background: rgba(87,217,255,.025); }
.ai-console-nav__label { padding: .5rem .65rem 1rem; color: var(--muted); font: .57rem/1 var(--font-mono); letter-spacing: .14em; }
.ai-console-nav a { display: flex; align-items: center; gap: .65rem; padding: .75rem .65rem; color: var(--muted); border-left: 1px solid transparent; text-decoration: none; font: .68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }
.ai-console-nav a:hover, .ai-console-nav a.is-active { color: var(--cyan); border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(87,217,255,.08), transparent); }
.ai-console-nav a i { width: 1rem; text-align: center; }
.ai-console-nav__device { margin-top: auto; padding: .8rem; border: 1px solid var(--line); }
.ai-console-nav__device span { display: flex; align-items: center; gap: .5rem; color: var(--green-glow); font: .64rem/1 var(--font-mono); }
.ai-console-nav__device small { display: block; margin-top: .45rem; color: var(--muted); font: .5rem/1 var(--font-mono); }
.ai-control-deck { padding: clamp(1.2rem,3vw,2rem); }
.ai-control-deck__header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 1.5rem; }
.ai-control-deck__header h2 { margin: .45rem 0 0; color: var(--ink); font: 500 clamp(1.4rem,3vw,2rem)/1 var(--font-mono); letter-spacing: -.04em; }
.servo-readouts { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }
.servo-readout { padding: .8rem; border: 1px solid var(--line); background: rgba(15,25,48,.65); }
.servo-readout > span { color: var(--muted); font: .55rem/1 var(--font-mono); letter-spacing: .12em; }
.servo-readout strong { display: block; margin: .6rem 0 .65rem; color: var(--cyan); font: 500 1.65rem/1 var(--font-mono); }
.servo-readout strong small { color: var(--muted); font-size: .7rem; }
.servo-readout > i { display: block; height: 2px; background: linear-gradient(90deg, var(--pink) var(--level), rgba(255,255,255,.08) var(--level)); box-shadow: -20px 0 18px rgba(255,59,157,.18); }
.ai-control-main { display: grid; grid-template-columns: minmax(300px,1.2fr) minmax(280px,1fr); gap: 1rem; margin-top: 1rem; }
.radar-control { position: relative; min-height: 340px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at center, rgba(87,217,255,.07), transparent 45%), linear-gradient(rgba(87,217,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(87,217,255,.03) 1px, transparent 1px); background-size: auto, 24px 24px, 24px 24px; }
.radar-control::before, .radar-control::after { content: ""; position: absolute; background: rgba(87,217,255,.16); }.radar-control::before { left: 50%; top: 0; width: 1px; height: 100%; }.radar-control::after { top: 50%; left: 0; height: 1px; width: 100%; }
.radar-control__rings { position: absolute; width: 250px; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(87,217,255,.16); border-radius: 50%; box-shadow: inset 0 0 0 45px transparent, inset 0 0 0 46px rgba(87,217,255,.1), inset 0 0 0 90px transparent, inset 0 0 0 91px rgba(87,217,255,.1); }
.radar-control__rings::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 78%, rgba(87,217,255,.13)); animation: radarSpin 5s linear infinite; }
.robot-arm-visual { position: absolute; z-index: 2; left: 50%; bottom: 27%; width: 10px; height: 10px; }
.robot-arm-visual i { position: absolute; display: block; background: var(--cyan); box-shadow: 0 0 14px rgba(87,217,255,.5); transform-origin: left center; }
.robot-arm-visual__base { width: 70px; height: 7px; left: -35px; top: 40px; }
.robot-arm-visual__lower { width: 95px; height: 5px; transform: rotate(-68deg); }
.robot-arm-visual__joint { width: 13px; height: 13px; left: 82px; top: -87px; border-radius: 50%; }
.robot-arm-visual__upper { width: 85px; height: 4px; left: 89px; top: -83px; transform: rotate(20deg); background: var(--pink) !important; }
.robot-arm-visual__grip { width: 22px; height: 22px; left: 167px; top: -54px; border: 2px solid var(--green-glow); background: transparent !important; box-shadow: 0 0 14px rgba(85,246,191,.4) !important; }
.radar-control__axis { position: absolute; color: var(--muted); font: .54rem/1 var(--font-mono); }.radar-control__axis--x { right: .7rem; bottom: .7rem; }.radar-control__axis--y { left: .7rem; bottom: .7rem; }.radar-control__axis--z { top: .7rem; right: .7rem; }
.command-queue { border: 1px solid var(--line); background: rgba(5,9,18,.8); }
.command-queue__title { display: flex; justify-content: space-between; padding: .75rem; border-bottom: 1px solid var(--line); color: var(--muted); font: .57rem/1 var(--font-mono); letter-spacing: .11em; }.command-queue__title b { color: var(--green-glow); font-weight: 500; }
.command-row { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; padding: .9rem .75rem; border-bottom: 1px solid rgba(87,217,255,.09); align-items: center; }
.command-row__prompt { color: var(--pink); }.command-row code { overflow: hidden; color: #b7c7df; font-size: .67rem; white-space: nowrap; text-overflow: ellipsis; }.command-row b { color: var(--green-glow); font: 500 .52rem/1 var(--font-mono); }.command-row.is-running { background: rgba(87,217,255,.04); }.command-row.is-running b { color: var(--cyan); animation: textBlink 1s steps(2) infinite; }
.command-entry { display: flex; gap: .4rem; padding: 1rem .75rem; color: var(--green-glow); font: .64rem/1 var(--font-mono); }.command-entry i { width: 7px; height: 1em; background: var(--green-glow); animation: textBlink 1s steps(2) infinite; }
.ai-capabilities { padding: clamp(3rem,7vw,6rem) 2rem; border-top: 1px solid var(--line); background: rgba(11,18,34,.45); }.ai-capabilities__inner { max-width: 1100px; margin: auto; }.ai-capabilities h2 { margin: .7rem 0 2rem; color: var(--ink); font: 500 clamp(2rem,5vw,3.5rem)/1 var(--font-mono); letter-spacing: -.05em; }
.capability-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }.capability-card { position: relative; min-height: 280px; display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--line); color: inherit; background: rgba(10,18,34,.74); text-decoration: none; }.capability-card:hover { border-color: var(--line-hot); color: inherit; }.capability-card__num { position: absolute; top: 1rem; right: 1rem; color: var(--muted); font: .58rem/1 var(--font-mono); }.capability-card__icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 2.7rem; color: var(--pink); border: 1px solid rgba(255,59,157,.35); background: rgba(255,59,157,.05); }.capability-card h3 { color: var(--ink); font: 500 1rem/1.2 var(--font-mono); }.capability-card p { margin-top: .7rem; color: var(--muted); font-size: .8rem; line-height: 1.7; }.capability-card__link { margin-top: auto; padding-top: 1rem; color: var(--green-glow); font: .57rem/1 var(--font-mono); letter-spacing: .1em; }

/* Vision lab */
.vision-lab__inner { max-width: 1200px; margin: auto; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.7fr); gap: 1rem; }.vision-preview { width: 100%; }.vision-feed { position: relative; min-height: 540px; overflow: hidden; background: radial-gradient(circle at 47% 52%, rgba(76,90,145,.32), transparent 8%), radial-gradient(ellipse at 50% 65%, #29324c, #11182a 48%, #070b14 80%); }.vision-feed::before { content: ""; position: absolute; inset: 0; opacity: .18; background: repeating-linear-gradient(0deg, rgba(87,217,255,.1) 0 1px, transparent 1px 4px); }.vision-feed__grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(87,217,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(87,217,255,.2) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle, black, transparent 80%); }.vision-bracket { position: absolute; width: 34px; height: 34px; border-color: var(--cyan); }.vision-bracket--tl { top: 1.5rem; left: 1.5rem; border-top: 1px solid; border-left: 1px solid; }.vision-bracket--tr { top: 1.5rem; right: 1.5rem; border-top: 1px solid; border-right: 1px solid; }.vision-bracket--bl { bottom: 2.8rem; left: 1.5rem; border-bottom: 1px solid; border-left: 1px solid; }.vision-bracket--br { bottom: 2.8rem; right: 1.5rem; border-bottom: 1px solid; border-right: 1px solid; }
.detected-object { position: absolute; border: 1px solid var(--green-glow); box-shadow: 0 0 16px rgba(85,246,191,.12), inset 0 0 16px rgba(85,246,191,.04); }.detected-object::before, .detected-object::after { content: ""; position: absolute; background: var(--green-glow); }.detected-object::before { left: 50%; top: -4px; width: 1px; height: calc(100% + 8px); }.detected-object::after { top: 50%; left: -4px; height: 1px; width: calc(100% + 8px); }.detected-object span { position: absolute; left: -1px; bottom: calc(100% + 7px); padding: .28rem .4rem; color: var(--void); background: var(--green-glow); font: 500 .52rem/1 var(--font-mono); white-space: nowrap; }.detected-object--eraser { width: 140px; height: 72px; left: 25%; top: 48%; transform: rotate(-7deg); }.detected-object--clip { width: 76px; height: 118px; right: 18%; top: 27%; transform: rotate(13deg); border-color: var(--pink); }.detected-object--clip span { background: var(--pink); }.vision-reticle { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; transform: translate(-50%,-50%); border: 1px solid rgba(87,217,255,.5); border-radius: 50%; }.vision-reticle::before, .vision-reticle::after { content: ""; position: absolute; background: var(--cyan); }.vision-reticle::before { left: 50%; top: -13px; width: 1px; height: 78px; }.vision-reticle::after { top: 50%; left: -13px; height: 1px; width: 78px; }.vision-reticle i { position: absolute; inset: 18px; border: 1px solid var(--pink); border-radius: 50%; }.vision-feed__hud { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: .8rem 1rem; color: var(--muted); background: rgba(5,9,18,.82); border-top: 1px solid var(--line); font: .54rem/1 var(--font-mono); letter-spacing: .08em; }
.vision-readout { padding: 1.6rem; border: 1px solid var(--line); background: rgba(10,18,34,.8); }.vision-readout h2 { margin: .7rem 0 1rem; color: var(--ink); font: 500 1.55rem/1.1 var(--font-mono); letter-spacing: -.04em; }.vision-readout > p { color: var(--muted); font-size: .82rem; line-height: 1.75; margin-bottom: 2rem; }.vision-metric { display: grid; grid-template-columns: 1fr auto; gap: .65rem; margin-bottom: 1.25rem; color: var(--muted); font: .57rem/1 var(--font-mono); letter-spacing: .08em; }.vision-metric strong { color: var(--cyan); font-weight: 500; }.vision-metric i { grid-column: 1/-1; height: 2px; background: linear-gradient(90deg, var(--cyan) var(--metric), rgba(255,255,255,.08) var(--metric)); }.vision-route { display: flex; align-items: center; justify-content: space-between; margin: 2rem 0; padding: 1rem 0; border-block: 1px solid var(--line); }.vision-route div { display: flex; flex-direction: column; align-items: center; gap: .6rem; color: var(--muted); font: .5rem/1 var(--font-mono); }.vision-route b { color: var(--pink); font-weight: 400; }.vision-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }

/* Assembly and remaining page-specific light surfaces */
.asm-hero { background: transparent !important; }.asm-hero h1 { color: var(--ink) !important; }.asm-hero__sub, .asm-empty { color: var(--muted) !important; }.asm-subnav { background: rgba(7,12,24,.94) !important; border-color: var(--line) !important; }.asm-subnav__link { color: var(--muted) !important; }.asm-subnav__link.is-active { color: var(--green-glow) !important; border-color: var(--green-glow) !important; }.asm-sidebar { background: transparent !important; }.asm-sidebar__link { color: var(--muted) !important; }.asm-sidebar__link:hover { color: var(--cyan) !important; background: rgba(87,217,255,.06) !important; }.asm-phase__title, .asm-step__title { color: var(--ink) !important; }.asm-phase__title { border-color: var(--pink) !important; }.asm-step { border-color: var(--line) !important; background: rgba(10,18,34,.72) !important; border-radius: 0 !important; }.asm-step__body, .asm-step__body p { color: var(--muted) !important; }.asm-step__tip { background: rgba(255,204,102,.06) !important; border-color: rgba(255,204,102,.3) !important; }.asm-step__media img, .asm-step__media video { border-radius: 0 !important; border: 1px solid var(--line); }
.assembled-features { background: rgba(11,18,34,.52) !important; border-color: var(--line) !important; }.assembled-feature-icon, .byo-path-icon { background: var(--panel-2) !important; border-color: var(--line) !important; color: var(--cyan) !important; }.assembled-feature-item h3, .assembled-products h2, .byo-path-header h2 { color: var(--ink) !important; }.assembled-feature-item p, .byo-path-desc, .byo-path-includes li { color: var(--muted) !important; }.byo-path-includes--needs { border-color: var(--line) !important; }

/* Footer */
footer { position: relative; z-index: 1; padding-top: 0 !important; background: #050812 !important; border-color: var(--line) !important; }
.footer-status { display: flex; align-items: center; gap: 2rem; margin: 0 -4rem 3.5rem; padding: .8rem 4rem; border-bottom: 1px solid var(--line); color: var(--muted); background: rgba(87,217,255,.025); font: .57rem/1 var(--font-mono); letter-spacing: .1em; }
.footer-status > div { display: flex; align-items: center; gap: .55rem; }.footer-status strong { color: var(--ink); font-weight: 500; }.footer-status span:last-child { margin-left: auto; }.footer-status b { color: var(--cyan); font-weight: 500; }
.footer-grid { border-color: var(--line); }.footer-grid strong { color: var(--green-glow); letter-spacing: .08em; }.footer-grid > div > p, footer ul a, .footer-copy { color: var(--muted); }footer h4 { color: var(--cyan); font-family: var(--font-mono); }footer h4::before { content: "// "; color: var(--pink); }

@keyframes signalPulse { 0%,100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes packetBlink { 0%,65%,100% { opacity: .2; } 25% { opacity: 1; } }
@keyframes packetTravel { from { top: 0; } to { top: calc(100% - 12px); } }
@keyframes radarSpin { to { transform: rotate(360deg); } }
@keyframes textBlink { 50% { opacity: 0; } }

@media (max-width: 1000px) {
  .nav-system-status { display: none; }
  .ecosystem-node-row { grid-template-columns: 1fr; }
  .ecosystem-link { min-height: 62px; transform: rotate(90deg); width: 120px; justify-self: center; }
  .ecosystem-link small { display: none; }
  .ai-control-main, .vision-lab__inner { grid-template-columns: 1fr; }
  .vision-readout { max-width: none; }
}

@media (max-width: 760px) {
  .page-header { padding-inline: 1.1rem !important; }.page-header__console { justify-content: center; }.page-header__meta { gap: .6rem; flex-wrap: wrap; }
  .terminal-window__bar { grid-template-columns: auto 1fr; }.terminal-window__bar > span:nth-child(2) { justify-self: start; }.terminal-window__status { display: none; }
  .hero-split { gap: .8rem; }.hero-panel:hover { transform: none; }.hero-panel-console span:last-child { display: none; }
  .detect-layout, .feature-wide, #mission .section-inner, #webapp .section-inner, .hiw-two-col { grid-template-columns: 1fr !important; gap: 2rem; }
  .detect-text, .feature-wide-text, #mission, #webapp { padding: 3rem 1.25rem !important; }
  .hardware-grid, .capability-grid { grid-template-columns: 1fr; }
  .hw-dof-callout { align-items: flex-start; gap: 1rem; padding: 1.5rem; flex-wrap: wrap; }.hw-dof-number { font-size: 3rem; }
  .ecosystem-bus > div { visibility: hidden; }
  .ai-console-grid { grid-template-columns: 1fr; }.ai-console-nav { display: grid; grid-template-columns: repeat(4,1fr); border-right: 0; border-bottom: 1px solid var(--line); }.ai-console-nav__label, .ai-console-nav__device { display: none; }.ai-console-nav a { justify-content: center; padding: .75rem .35rem; font-size: .52rem; }.ai-console-nav a i { display: none; }
  .servo-readouts { grid-template-columns: repeat(2,1fr); }.ai-control-main { grid-template-columns: 1fr; }.radar-control { min-height: 300px; }
  .vision-feed { min-height: 430px; }.detected-object--eraser { left: 15%; }.detected-object--clip { right: 12%; }
  .docs-layout { display: block; padding-inline: 1rem; }.docs-sidebar { position: static; width: auto; max-height: none; margin-bottom: 1rem; }.docs-nav ul { display: flex; flex-wrap: wrap; gap: .2rem; }.docs-nav-link { border-left: 0; border-bottom: 1px solid transparent; }.docs-section { padding: 1.25rem !important; }
  .footer-status { margin-inline: -1.5rem; padding-inline: 1.5rem; gap: .8rem; flex-wrap: wrap; }.footer-status span:last-child { margin-left: 0; }.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .nav-brand img { display: none; }.nav-version-trigger { display: none; }.nav-actions a { padding-inline: .55rem; }.nav-brand a { font-size: .67rem; }
  .page-header h1 { font-size: 2.35rem !important; }.page-header__console span:last-child, .page-header__rule { display: none; }
  .servo-readouts { grid-template-columns: 1fr 1fr; }.servo-readout strong { font-size: 1.3rem; }
  .vision-feed__hud span:nth-child(2) { display: none; }
  .footer-grid { grid-template-columns: 1fr; }.footer-status > span { display: none; }
}

/* ── Clickables ──
   One look for every button-like control, taken from the nav mega menu: at
   rest a navy tile with cyan text and a faint cyan edge; on hover/focus a pink
   tint, pink text and a pink edge. Page stylesheets (home.css, docs.css, ...)
   still carry the old light-theme .btn colours, so this sits here, after them.
   !important only where an earlier rule already uses it (auth, hiw links). */
:root {
  --click-bg: #111d33;
  --click-line: rgba(87, 217, 255, .25);
  --click-hot-bg: rgba(255, 59, 157, .1);
  --click-hot-line: rgba(255, 59, 157, .75);
}
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-white, .btn-white-outline,
.filter-pill, .bom-version-pill, .nav-version-trigger, .acct-trigger,
.nav-actions a:last-child {
  background: var(--click-bg);
  color: var(--cyan);
  border: 1px solid var(--click-line);
  box-shadow: none;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover, .btn:focus-visible,
.filter-pill:hover, .bom-version-pill:hover, .nav-version-trigger:hover, .acct-trigger:hover,
.nav-actions a:last-child:hover, .nav-actions a:last-child:focus-visible,
.filter-pill.is-active, .bom-version-pill--active {
  background: var(--click-hot-bg);
  color: var(--pink);
  border-color: var(--click-hot-line);
  box-shadow: 0 0 18px rgba(255, 59, 157, .16);
}
.auth-submit, .btn-hiw-link {
  background: var(--click-bg) !important;
  color: var(--cyan) !important;
  border: 1px solid var(--click-line) !important;
  box-shadow: none;
}
.auth-submit:hover, .auth-submit:focus-visible, .btn-hiw-link:hover, .btn-hiw-link:focus-visible {
  background: var(--click-hot-bg) !important;
  color: var(--pink) !important;
  border-color: var(--click-hot-line) !important;
  box-shadow: 0 0 18px rgba(255, 59, 157, .16);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .terminal-reveal { opacity: 1; transform: none; transition: none; }
}