@font-face {
  font-family: "RC Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/oswald-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "RC Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  Rank Craft / Optical laboratory
  Loaded last: this is a visual skin for the existing HTML, forms and tools.
  The normal document remains readable with JavaScript disabled.
*/

body.optical-site {
  --paper: #080c0b;
  --surface: #121816;
  --surface-raised: #18201d;
  --surface-soft: #202a25;
  --ink: #f3f1e8;
  --text: #f3f1e8;
  --muted: #bec5bd;
  --ink-600: #bec5bd;
  --line: rgba(243, 241, 232, .2);
  --teal: #d9ff42;
  --green: #d9ff42;
  --coral: #d9ff42;
  --amber: #d9ff42;
  --coal: #080c0b;
  --radius: 0;
  --shadow: 0 24px 70px rgba(0, 0, 0, .35);
  background:
    radial-gradient(circle at 87% 8%, rgba(217, 255, 66, .08), transparent 23rem),
    #080c0b;
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
}

body.optical-site :is(h1, h2, h3, h4, .logo span, .price-value, .case-growth__metrics strong) {
  font-family: "RC Display", Oswald, Impact, "Arial Narrow", sans-serif;
  font-weight: 500;
  letter-spacing: -.025em;
}

body.optical-site :is(p, li, td, dd, input, select, textarea, button) { color: inherit; }
body.optical-site :is(p, li) { color: var(--muted); }
body.optical-site a { text-decoration-color: rgba(217, 255, 66, .7); }
body.optical-site :focus-visible { outline: 2px solid #d9ff42; outline-offset: 4px; }

/* Header, navigation and shared actions */
body.optical-site .site-header {
  min-height: 72px;
  border-color: rgba(243, 241, 232, .16);
  background: rgba(8, 12, 11, .9);
  color: #f3f1e8;
  backdrop-filter: blur(18px);
}

body.optical-site .logo span { color: #d9ff42; font-size: 25px; letter-spacing: .015em; }
body.optical-site .logo strong { color: #f3f1e8; letter-spacing: .11em; }
body.optical-site .main-nav a { color: #e7e7df; border-radius: 0; }
body.optical-site .main-nav a:hover,
body.optical-site .main-nav a:focus-visible { background: rgba(217, 255, 66, .1); color: #d9ff42; }
body.optical-site .main-nav a[rel="nofollow"] { border-color: rgba(217, 255, 66, .48); color: #d9ff42; }

body.optical-site :is(.button, .nav-cta) {
  min-height: 44px;
  border-radius: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

body.optical-site :is(.nav-cta, .button--primary) {
  border-color: #d9ff42;
  background: #d9ff42;
  color: #080c0b;
  box-shadow: none;
}
body.optical-site .main-nav .nav-cta { color: #080c0b; }

body.optical-site :is(.nav-cta, .button--primary):hover { background: #f3f1e8; border-color: #f3f1e8; color: #080c0b; }
body.optical-site .button--secondary { border-color: rgba(243, 241, 232, .48); background: transparent; color: #f3f1e8; }
body.optical-site .button--secondary:hover { border-color: #d9ff42; background: rgba(217, 255, 66, .1); color: #d9ff42; }
body.optical-site .menu-button { min-width: 44px; border-color: rgba(243, 241, 232, .32); border-radius: 0; background: #121816; }
body.optical-site .menu-button span { background: #d9ff42; }

/* Generic page rhythm and surfaces. */
body.optical-site .band {
  position: relative;
  background-color: #080c0b;
  color: #f3f1e8;
}

body.optical-site .band::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(var(--page-pad), calc((100vw - var(--wide)) / 2));
  right: max(var(--page-pad), calc((100vw - var(--wide)) / 2));
  height: 1px;
  background: rgba(243, 241, 232, .15);
  pointer-events: none;
}

body.optical-site .band--tint { background: #121816; }
body.optical-site .band--dark { background: #080c0b; }
body.optical-site .band--lead {
  background: linear-gradient(125deg, #1c251f, #101613 48%, #080c0b);
}

body.optical-site .section-head { position: relative; z-index: 1; }
body.optical-site .section-head h2,
body.optical-site .band h2 { color: #f3f1e8; line-height: .98; letter-spacing: -.035em; }
body.optical-site .section-head > p { max-width: 68ch; }
body.optical-site .eyebrow,
body.optical-site .hero .eyebrow { color: #d9ff42; font: 700 11px/1.2 "Segoe UI", Arial, sans-serif; letter-spacing: .13em; }
body.optical-site .text-link,
body.optical-site .home-proof__rows a,
body.optical-site .direction-grid a,
body.optical-site .diagnostic-matrix a,
body.optical-site .method-links a,
body.optical-site .tool-console-grid a,
body.optical-site .founder-trust a { color: #d9ff42; }

/* The pre-existing hero contract remains usable on every route. */
body.optical-site .hero:not(.optical-hero),
body.optical-site .search-ops-hero {
  background:
    radial-gradient(circle at 78% 37%, rgba(217, 255, 66, .12), transparent 27%),
    #080c0b;
  color: #f3f1e8;
}
body.optical-site .hero:not(.optical-hero)::before,
body.optical-site .search-ops-hero::before {
  background: linear-gradient(90deg, rgba(8, 12, 11, .97), rgba(8, 12, 11, .86) 48%, rgba(8, 12, 11, .45));
}
body.optical-site .hero:not(.optical-hero) h1,
body.optical-site .search-ops-hero h1 { color: #f3f1e8; line-height: .91; }
body.optical-site .hero-lead,
body.optical-site .search-ops-hero__lead { color: #cbd0c9; }
body.optical-site .hero-badge,
body.optical-site .proofline--light span { border-color: rgba(217, 255, 66, .46); border-radius: 0; background: rgba(217, 255, 66, .08); color: #f3f1e8; }
body.optical-site .hero-badge :is(span, strong),
body.optical-site .proofline--light span { color: #f3f1e8; }
body.optical-site .hero-benefits li::before { background: #d9ff42; }
body.optical-site .hero-panel,
body.optical-site .diagnostic-panel__top,
body.optical-site .diagnostic-panel__score,
body.optical-site .tools-panel div { border-color: rgba(243, 241, 232, .2); border-radius: 0; background: rgba(18, 24, 22, .84); }
body.optical-site .hero-panel :is(p, span),
body.optical-site .diagnostic-panel :is(p, span),
body.optical-site .tools-panel p { color: #cbd0c9; }
body.optical-site .score-row i { background: linear-gradient(90deg, #d9ff42 var(--score), rgba(217, 255, 66, .14) var(--score)); }
body.optical-site .score-row em,
body.optical-site .tools-panel span { color: #d9ff42; }

/* New optical hero and its progressive enhancement scene. */
body.optical-site .optical-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(430px, 1.18fr);
  gap: clamp(28px, 5vw, 100px);
  align-items: center;
  min-height: min(760px, calc(100dvh - 72px));
  overflow: clip;
  padding: clamp(72px, 10vw, 154px) max(var(--page-pad), calc((100vw - var(--wide)) / 2)) clamp(62px, 7vw, 102px);
  background:
    linear-gradient(90deg, #080c0b 4%, rgba(8, 12, 11, .89) 46%, rgba(8, 12, 11, .38)),
    radial-gradient(circle at 78% 52%, rgba(217, 255, 66, .13), transparent 30%),
    #080c0b;
  color: #f3f1e8;
}

body.optical-site .optical-hero::before,
body.optical-site .optical-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(50vw, 690px);
  aspect-ratio: 1;
  border: 1px solid rgba(217, 255, 66, .2);
  border-radius: 50%;
  pointer-events: none;
}
body.optical-site .optical-hero::before { right: -16%; top: 10%; }
body.optical-site .optical-hero::after { right: 11%; top: 27%; width: min(26vw, 380px); border-color: rgba(243, 241, 232, .12); }
body.optical-site .optical-hero__copy { position: relative; z-index: 2; max-width: 650px; }
body.optical-site .optical-hero h1 { max-width: 12ch; margin-bottom: 24px; color: #f3f1e8; font-size: clamp(54px, 6.5vw, 114px); line-height: .87; letter-spacing: -.045em; }
body.optical-site .optical-hero .lead,
body.optical-site .optical-hero__copy > p:not(.eyebrow) { max-width: 49ch; color: #cdd1c9; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; }
body.optical-site .optical-hero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
body.optical-site .optical-hero .audit-mini-form { margin-top: 28px; }
body.optical-site .optical-hero--quiet {
  min-height: min(500px, calc(100dvh - 72px));
  grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr);
  background: linear-gradient(115deg, #080c0b, #121816);
}
body.optical-site .optical-hero--quiet h1 { max-width: 14ch; font-size: clamp(48px, 5.3vw, 82px); }
body.optical-site .optical-hero--quiet .optical-art { justify-self: end; max-width: 390px; }

body.optical-site .optical-scene {
  --optics-scale: 1;
  --optics-depth: 20px;
  --optics-x: 0deg;
  --optics-y: 0deg;
  position: relative;
  min-width: 0;
  color: #f3f1e8;
}

body.optical-site .optical-scene__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(370px, 42vw, 630px);
  overflow: hidden;
  perspective: 1500px;
  border-block: 1px solid rgba(243, 241, 232, .16);
  background:
    linear-gradient(rgba(243, 241, 232, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 241, 232, .065) 1px, transparent 1px),
    radial-gradient(circle at 65% 44%, rgba(217, 255, 66, .18), transparent 26%),
    #121816;
  background-size: 30px 30px, 30px 30px, auto, auto;
}

body.optical-site .optical-scene__stage::before,
body.optical-site .optical-scene__stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
body.optical-site .optical-scene__stage::before { inset: 12%; border: 1px solid rgba(217, 255, 66, .28); transform: rotate(-12deg); }
body.optical-site .optical-scene__stage::after { width: 84%; height: 1px; background: #d9ff42; opacity: .68; transform: rotate(-17deg); }

body.optical-site .optical-layer {
  position: absolute;
  display: block;
  width: min(78%, 530px);
  max-height: 84%;
  object-fit: contain;
  filter: drop-shadow(17px 22px 25px rgba(0, 0, 0, .38));
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

body.optical-site .optical-layer--page {
  width: min(58%, 390px);
  transform: translate3d(calc(0px - var(--optics-depth)), calc(0px - var(--optics-depth)), -30px) rotateX(var(--optics-y)) rotateY(var(--optics-x)) rotate(-9deg) scale(var(--optics-scale));
}
body.optical-site .optical-layer--aperture { width: min(65%, 440px); transform: translate3d(calc(0px - var(--optics-depth)), var(--optics-depth), 10px) rotateX(var(--optics-y)) rotateY(var(--optics-x)) rotate(4deg) scale(var(--optics-scale)); }
body.optical-site .optical-layer--lens { width: min(62%, 430px); transform: translate3d(var(--optics-depth), calc(0px - var(--optics-depth)), 70px) rotateX(var(--optics-y)) rotateY(var(--optics-x)) rotate(-7deg) scale(var(--optics-scale)); }
body.optical-site .optical-layer--lens-main { z-index: 3; }
body.optical-site .optical-layer--lens-back { z-index: 0; width: min(54%, 360px); opacity: .6; transform: translate3d(calc(0px - var(--optics-depth)), var(--optics-depth), -90px) rotate(13deg) scale(.92); }
body.optical-site .optical-layer--prism { width: min(36%, 235px); z-index: 4; transform: translate3d(var(--optics-depth), calc(0px - var(--optics-depth)), 110px) rotateX(var(--optics-y)) rotateY(var(--optics-x)) rotate(22deg) scale(var(--optics-scale)); }

body.optical-site .optical-beam { position: absolute; z-index: 1; left: 4%; right: 2%; top: 54%; height: 2px; transform: rotate(-17deg); transform-origin: center; background: linear-gradient(90deg, transparent, #d9ff42 22%, #f3f1e8 52%, #d9ff42 76%, transparent); box-shadow: 0 0 22px rgba(217, 255, 66, .82); pointer-events: none; }
body.optical-site .optical-orbit { position: absolute; z-index: 0; width: 72%; aspect-ratio: 1; border: 1px solid rgba(243, 241, 232, .24); border-radius: 50%; transform: rotate(-17deg); pointer-events: none; }
body.optical-site .optical-orbit::after { content: ""; position: absolute; width: 9px; height: 9px; right: 8%; top: 12%; border-radius: 50%; background: #d9ff42; box-shadow: 0 0 15px #d9ff42; }

body.optical-site .optical-scene__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(243, 241, 232, .18);
}
body.optical-site .optical-scene__controls label { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; color: #daddd5; font-size: 12px; font-weight: 700; }
body.optical-site .optical-scene__controls output { color: #d9ff42; font-family: Consolas, monospace; font-size: 12px; }
body.optical-site .optical-scene__controls input[type="range"] { grid-column: 1 / -1; width: 100%; min-height: 44px; margin: 0; accent-color: #d9ff42; cursor: ew-resize; }
body.optical-site .optical-scene__controls button { min-height: 44px; border: 1px solid rgba(243, 241, 232, .35); background: transparent; color: #f3f1e8; font: 700 12px/1.2 "Segoe UI", Arial, sans-serif; cursor: pointer; }
body.optical-site .optical-scene__controls button:hover { border-color: #d9ff42; color: #d9ff42; }

@keyframes optical-breathe { 0%, 100% { transform: rotate(-17deg) scale(1); opacity: .54; } 50% { transform: rotate(-17deg) scale(1.045); opacity: .9; } }
@keyframes optical-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
body.optical-site .optical-scene.optics-ready[data-motion="on"] .optical-orbit { animation: optical-breathe 4.8s ease-in-out infinite; }
body.optical-site .optical-scene.optics-ready[data-motion="on"] .optical-layer--prism { animation: optical-float 4.4s ease-in-out infinite; }

/* Supporting imagery keeps its editorial position without hiding real content. */
body.optical-site .optical-inner-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .68fr); align-items: center; gap: clamp(24px, 4vw, 68px); }
body.optical-site .optical-inner-hero > :first-child { min-width: 0; }
body.optical-site .optical-section-art,
body.optical-site .optical-art { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(243, 241, 232, .22); background: #121816; box-shadow: 15px 18px 0 rgba(217, 255, 66, .12); }
body.optical-site .optical-section-art { max-width: min(50vw, 700px); margin: -8px 0 34px auto; }
body.optical-site .optical-art--wide { width: 100%; }
body.optical-site .optical-art--compact { width: min(100%, 420px); }
body.optical-site .optical-art img,
body.optical-site .optical-section-art img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transform: perspective(1100px) rotateX(var(--art-y, 0deg)) rotateY(var(--art-x, 0deg)); transition: transform 350ms ease; }

/* Existing cards and home composition. */
body.optical-site :is(.card, .catalog-card, .feature-band article, .summary-card, .contact-card, .metric-grid strong) {
  border-color: rgba(243, 241, 232, .2);
  border-radius: 0;
  background: #121816;
  box-shadow: none;
}
body.optical-site :is(.card, .catalog-card, .feature-band article) { position: relative; }
body.optical-site :is(.card, .catalog-card, .feature-band article)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 28px;
  height: 3px;
  background: #d9ff42;
}
body.optical-site .card h3,
body.optical-site .catalog-card h3,
body.optical-site .contact-card h2 { color: #f3f1e8; }
body.optical-site .card-media,
body.optical-site .card img { border-radius: 0; }
body.optical-site .tag,
body.optical-site .tool-badges span,
body.optical-site .proofline span { border-color: rgba(217, 255, 66, .45); border-radius: 0; background: transparent; color: #d9ff42; }

body.optical-site .home-proof__rows { border-top-color: rgba(243, 241, 232, .18); }
body.optical-site .home-proof__rows article { grid-template-columns: 56px minmax(150px, .66fr) minmax(180px, .9fr) minmax(220px, 1.28fr) minmax(150px, .7fr); border-color: rgba(243, 241, 232, .18); background: transparent; }
body.optical-site .home-proof__rows article::before { background: rgba(217, 255, 66, .1); }
body.optical-site .home-proof__rows article > span,
body.optical-site .direction-grid article > span { color: #d9ff42; }
body.optical-site .home-proof__rows article :is(h3, p) { color: #f3f1e8; }
body.optical-site .home-proof__rows article > div p { color: #b8c0b8; }
body.optical-site .home-proof__media { border-color: rgba(243, 241, 232, .22); border-radius: 0; }

body.optical-site .direction-grid { gap: 0; border-color: rgba(243, 241, 232, .18); }
body.optical-site .direction-grid article { border-color: rgba(243, 241, 232, .18) !important; border-radius: 0; background: #121816; }
body.optical-site .direction-grid article:nth-child(2n) { background: #18201d; }
body.optical-site .direction-grid article::after { background: #d9ff42; }
body.optical-site .direction-media,
body.optical-site .tool-console-media { border-radius: 0; }
body.optical-site .direction-grid h3,
body.optical-site .tool-console-grid h3 { color: #f3f1e8; }

body.optical-site .diagnostic-matrix-wrap { border-color: rgba(243, 241, 232, .2); border-radius: 0; background: #121816; }
body.optical-site .diagnostic-matrix th,
body.optical-site .diagnostic-matrix td { border-color: rgba(243, 241, 232, .18); color: #d6d8d2; }
body.optical-site .diagnostic-matrix th { color: #d9ff42; background: #18201d; }
body.optical-site .diagnostic-matrix td:first-child { color: #f3f1e8; }

body.optical-site .method-steps { border-color: rgba(243, 241, 232, .18); gap: 0; }
body.optical-site .method-steps li { border-color: rgba(243, 241, 232, .18) !important; border-radius: 0; background: #121816; }
body.optical-site .method-steps li:nth-child(2n) { background: #18201d; }
body.optical-site .method-steps span { color: #d9ff42; }
body.optical-site .method-steps h3 { color: #f3f1e8; }
body.optical-site .method-links { border-color: rgba(243, 241, 232, .18); }
body.optical-site .method-links a { border-color: rgba(243, 241, 232, .18); }

body.optical-site .tool-console-grid { gap: 0; border-color: rgba(243, 241, 232, .18); }
body.optical-site .tool-console-grid article { border-color: rgba(243, 241, 232, .18) !important; border-radius: 0; background: #121816; }
body.optical-site .tool-console-grid article:nth-child(3n + 1) { background: #18201d; }
body.optical-site .tool-console-grid article::after { background: #d9ff42; }
body.optical-site .tool-console-grid article > div { border-color: rgba(243, 241, 232, .2); }
body.optical-site .tool-console-grid article > div span { color: #d9ff42; }
body.optical-site .tool-console-grid em { color: #aeb7ae; }

body.optical-site .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(243, 241, 232, .22); }
@media (max-width: 900px) {
  body.optical-site .pricing-grid { grid-template-columns: 1fr; }
}
body.optical-site .price-card { border: 0; background: #121816; }
body.optical-site .price-card:nth-child(2) { background: #1d271e; }
body.optical-site .price-card--recommended { box-shadow: inset 0 3px #d9ff42; }
body.optical-site .price-value { color: #d9ff42; font-size: 36px; }

body.optical-site .founder-trust { gap: 1px; background: rgba(243, 241, 232, .18); }
body.optical-site .founder-trust__identity,
body.optical-site .founder-trust__artifacts { background: #121816; }
body.optical-site .founder-trust__identity { padding: clamp(26px, 5vw, 68px); }
body.optical-site .founder-trust__artifacts { border-color: transparent; }
body.optical-site .founder-trust__artifacts li { border-color: rgba(243, 241, 232, .18); }

/* Forms, tool workspaces and tables. */
body.optical-site :is(.lead-form, .tool-form) label { color: #f3f1e8; }
body.optical-site :is(.lead-form, .tool-form) :is(input, select, textarea),
body.optical-site .catalog-search input,
body.optical-site .catalog-budget select,
body.optical-site .live-table__tools input,
body.optical-site .command-palette__search input {
  border-color: rgba(243, 241, 232, .3);
  border-radius: 0;
  background: #080c0b;
  color: #f3f1e8;
}
body.optical-site :is(.lead-form, .tool-form) :is(input, select, textarea)::placeholder,
body.optical-site .catalog-search input::placeholder { color: #a5afa5; }
body.optical-site .tool-form,
body.optical-site .tool-layout,
body.optical-site .tool-result,
body.optical-site .tool-workspace-visual { border-color: rgba(243, 241, 232, .2); border-radius: 0; background: #121816; box-shadow: none; }
body.optical-site .tool-workspace-band { background: #080c0b; }
body.optical-site .tool-workspace-band .tool-layout { background: transparent; }
body.optical-site .tool-result { color: #f3f1e8; }
body.optical-site .tool-layout .button--secondary,
body.optical-site .tool-result .button--secondary,
body.optical-site .pipeline-actions .button--secondary,
body.optical-site .tool-controls .button--secondary { border-color: rgba(243, 241, 232, .32); background: transparent; color: #f3f1e8; }
body.optical-site .tool-layout .button--secondary:hover,
body.optical-site .tool-result .button--secondary:hover,
body.optical-site .pipeline-actions .button--secondary:hover { border-color: #d9ff42; color: #d9ff42; }
body.optical-site .tool-controls input { border-color: rgba(243, 241, 232, .3); border-radius: 0; background: #080c0b; color: #f3f1e8; }
body.optical-site .tool-controls .button.is-active { border-color: #d9ff42; background: #d9ff42; color: #080c0b; }
body.optical-site .pain-options,
body.optical-site .example-box,
body.optical-site .pipeline-page,
body.optical-site .serp-preview { border-color: rgba(243, 241, 232, .22); border-radius: 0; background: #18201d; }
body.optical-site .example-box span,
body.optical-site .pipeline-page span { color: #d9ff42; }
body.optical-site .serp-preview span { color: #d9ff42; }
body.optical-site .serp-preview h3 { color: #f3f1e8; }
body.optical-site .serp-preview p { color: #bec5bd; }
body.optical-site .form-status.is-success { color: #d9ff42; }
body.optical-site .form-status.is-error { color: #ff927b; }

body.optical-site .table-wrap,
body.optical-site .live-table .decision-table tr { border-color: rgba(243, 241, 232, .2); border-radius: 0; background: #121816; }
body.optical-site .decision-table th,
body.optical-site .decision-table td { border-color: rgba(243, 241, 232, .16); color: #d2d5ce; }
body.optical-site .decision-table th { background: #18201d; color: #d9ff42; }
body.optical-site .live-table__tools button,
body.optical-site .catalog-filters button,
body.optical-site .catalog-summary button { border-color: rgba(243, 241, 232, .3); border-radius: 0; background: #121816; color: #f3f1e8; }
body.optical-site .catalog-filters button.is-active { border-color: #d9ff42; background: #d9ff42; color: #080c0b; }

/* Catalogs and ordinary content pages. */
body.optical-site .catalog-intro,
body.optical-site .catalog-group,
body.optical-site .tool-category { background: #080c0b; }
body.optical-site .catalog-group:nth-child(2n),
body.optical-site .tool-category:nth-child(odd) { background: #121816; }
body.optical-site .catalog-grid { gap: 1px; background: rgba(243, 241, 232, .2); }
body.optical-site .catalog-card { border: 0; background: #121816; }
body.optical-site .catalog-optical-media { margin: 0 0 20px; overflow: hidden; }
body.optical-site .catalog-optical-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 350ms ease; }
body.optical-site .catalog-card:hover .catalog-optical-media img { transform: scale(1.035); }
body.optical-site .catalog-card > .visual-mark { width: 48px; height: 34px; margin: 0 0 12px; stroke: #b7c99a; }
body.optical-site .visual-mark .vm-bg { fill: #121816; stroke: rgba(243, 241, 232, .22); }
body.optical-site .catalog-card:hover { border-color: transparent; box-shadow: inset 0 -3px #d9ff42; transform: none; }
body.optical-site .catalog-card h3 a { color: #f3f1e8; }
body.optical-site .catalog-summary { border-color: rgba(243, 241, 232, .18); background: #18201d; }
body.optical-site .catalog-empty { border-color: rgba(243, 241, 232, .18); background: #121816; }

body.optical-site .split-layout > *,
body.optical-site .two-column-cards > div { min-width: 0; }
body.optical-site .summary-card { border-color: rgba(243, 241, 232, .2); }
body.optical-site .contact-card a { color: #d9ff42; }
body.optical-site .metric-grid strong { color: #d9ff42; }
body.optical-site .case-visual img { border-color: rgba(243, 241, 232, .2); border-radius: 0; box-shadow: 18px 18px 0 rgba(217, 255, 66, .12); }

/* Long-form pages deliberately use a warm reading surface. */
body.optical-site[data-optical-type="article"] .article,
body.optical-site[data-optical-type="legal"] .article,
body.optical-site .article {
  position: relative;
  max-width: min(1020px, calc(100% - 2 * var(--page-pad)));
  margin: clamp(40px, 7vw, 100px) auto;
  padding: clamp(26px, 5vw, 68px);
  border: 1px solid rgba(243, 241, 232, .25);
  background: #f3f1e8;
  color: #16201b;
  box-shadow: 20px 22px 0 rgba(217, 255, 66, .14);
}
body.optical-site .article::before { content: "МАСТЕРСКАЯ ЗНАНИЙ"; position: static; display: block; height: auto; background: transparent; margin-bottom: 28px; color: #56705f; font: 700 10px/1 Consolas, monospace; letter-spacing: .13em; }
body.optical-site .article :is(p, li) { color: #36453b; }
body.optical-site .article :is(h2, h3) { color: #111914; }
body.optical-site .article a { color: #284b2d; text-decoration-color: #7ea100; }
body.optical-site .article > p:first-child { color: #111914; font-size: clamp(20px, 2vw, 26px); }

body.optical-site .faq details { border-color: rgba(243, 241, 232, .2); border-radius: 0; background: #121816; }
body.optical-site .faq summary { color: #f3f1e8; }
body.optical-site .faq summary::marker { color: #d9ff42; }

/* Case studies preserve real screenshots while adopting the material system. */
body.optical-site .case-editorial,
body.optical-site .case-portfolio { --case-accent: #d9ff42; background: #080c0b; color: #f3f1e8; }
body.optical-site .case-hero,
body.optical-site .case-index-hero { background: #080c0b; }
body.optical-site .case-hero::before { background: linear-gradient(110deg, #080c0b 18%, rgba(8, 12, 11, .9) 48%, rgba(8, 12, 11, .28)); }
body.optical-site .case-hero__cover,
body.optical-site .case-hero__mobile { border-color: rgba(243, 241, 232, .25); border-radius: 0; background: #121816; }
body.optical-site .case-story-nav { border-color: rgba(243, 241, 232, .18); background: rgba(8, 12, 11, .94); }
body.optical-site .case-story-nav a { color: #cbd0c9; }
body.optical-site .case-story-nav a:hover { color: #d9ff42; }
body.optical-site .case-portfolio__section-head h2,
body.optical-site .case-work-list h3,
body.optical-site .case-channel-list h3 { color: #f3f1e8; }
body.optical-site .case-portfolio__section-head > div > p:last-child,
body.optical-site .case-work-list p,
body.optical-site .case-channel-list li > p:last-child { color: #bec5bd; }
body.optical-site .case-portfolio__chapter--design,
body.optical-site .case-portfolio__chapter--comparison,
body.optical-site .case-portfolio__chapter--growth,
body.optical-site .case-portfolio__chapter--structure,
body.optical-site .case-portfolio__chapter--admin { border-color: rgba(243, 241, 232, .16); }
body.optical-site .case-gallery__image-link,
body.optical-site .case-structure-table-wrap { border-color: rgba(243, 241, 232, .25); background: #121816; }
body.optical-site .case-gallery figcaption,
body.optical-site .case-gallery figcaption p { color: #bec5bd; }
body.optical-site .case-gallery figcaption > span { color: #d9ff42; }
body.optical-site .case-portfolio__section-no { color: #9fac99; }
body.optical-site [data-motion-item].motion-ready { opacity: 1; }
body.optical-site .case-gallery__open,
body.optical-site .case-outcome__contact { color: #f3f1e8; }
body.optical-site .case-channel-list,
body.optical-site .case-outcome-list,
body.optical-site .case-admin-features,
body.optical-site .case-growth__metrics { background: rgba(243, 241, 232, .2); }
body.optical-site :is(.case-channel-list li, .case-outcome-list li, .case-admin-features li, .case-growth__metrics > div) { background: #121816; color: #f3f1e8; }
body.optical-site .case-admin-features h3 { color: #f3f1e8; }
body.optical-site .case-admin-features p { color: #bec5bd; }
body.optical-site .case-budget-band { color: #172018; border-color: #d9ff42; background: #f3f1e8; box-shadow: inset 0 0 0 1px #d9ff42; }
body.optical-site .case-budget-band :is(p, span, small) { color: #425047; }
body.optical-site .case-budget-band strong { color: #111914; }
body.optical-site .case-growth__metrics dt,
body.optical-site .case-growth__metrics dd { color: #bec5bd; }
body.optical-site .case-growth__metrics dd strong,
body.optical-site .case-growth__metrics dd b,
body.optical-site .case-growth__change { color: #d9ff42; }
body.optical-site .case-portfolio__chapter--roadmap { background: #18201d; box-shadow: 0 0 0 100vmax #18201d; }

/* Footer, command palette, cookies and assistant must remain above content. */
body.optical-site .site-footer { border-color: rgba(243, 241, 232, .18); background: #080c0b; color: #f3f1e8; }
body.optical-site .site-footer::before { background: linear-gradient(90deg, transparent, #d9ff42, transparent); }
body.optical-site .footer-kicker,
body.optical-site .footer-heading { color: #d9ff42; }
body.optical-site .footer-cta,
body.optical-site .footer-bottom { border-color: rgba(243, 241, 232, .18); }
body.optical-site .footer-cta__copy > strong,
body.optical-site .footer-brand,
body.optical-site .footer-contact .footer-contact__primary { color: #f3f1e8; }
body.optical-site :is(.footer-brand > p, .footer-cta__copy p, .footer-contact p, .footer-bottom) { color: #bec5bd; }
body.optical-site :is(.footer-links a, .footer-contact a, .footer-bottom a) { color: #d8dbd4; }
body.optical-site :is(.footer-links a, .footer-contact a, .footer-bottom a):hover { color: #d9ff42; }
body.optical-site .footer-signals span { border-color: rgba(217, 255, 66, .45); background: transparent; color: #d9ff42; }

body.optical-site .command-palette__backdrop { background: rgba(0, 0, 0, .74); }
body.optical-site .command-palette__dialog { border: 1px solid rgba(243, 241, 232, .26); border-radius: 0; background: #121816; color: #f3f1e8; box-shadow: 22px 25px 0 rgba(217, 255, 66, .16); }
body.optical-site .command-palette__close { border-color: rgba(243, 241, 232, .32); border-radius: 0; background: transparent; color: #f3f1e8; }
body.optical-site .command-palette__results a.is-active,
body.optical-site .command-palette__results a:hover { background: rgba(217, 255, 66, .12); }
body.optical-site :is(.command-palette__results span, .command-palette__results small, .command-palette__hint) { color: #bec5bd; }

body.optical-site .cookie-notice,
body.optical-site .rc-assistant__panel { border-color: rgba(243, 241, 232, .26); border-radius: 0; background: #121816; color: #f3f1e8; }
body.optical-site .cookie-notice p,
body.optical-site .cookie-notice a { color: #d8dbd4; }
body.optical-site .cookie-notice a { color: #d9ff42; }
body.optical-site .rc-assistant__toggle { border-color: #d9ff42; border-radius: 0; background: #d9ff42; color: #080c0b; box-shadow: 8px 8px 0 rgba(243, 241, 232, .18); }
body.optical-site .rc-assistant__pulse { background: #080c0b; }
/* The page already exposes its next steps; keep the artwork and forms unobscured. */
body.optical-site .rc-sticky-audit { display: none; }
body.optical-site .rc-assistant__toggle-icon { background: rgba(8, 12, 11, .13); }
body.optical-site .rc-assistant__head { background: #18201d; color: #f3f1e8; }
body.optical-site .rc-assistant__body,
body.optical-site .rc-assistant__quick { background: #080c0b; }
body.optical-site .rc-assistant__message,
body.optical-site .rc-assistant__quick :is(a, button),
body.optical-site .rc-assistant__form { border-color: rgba(243, 241, 232, .24); border-radius: 0; background: #121816; color: #f3f1e8; }
body.optical-site .rc-assistant__message--user { border-color: #d9ff42; background: rgba(217, 255, 66, .12); }
body.optical-site .rc-assistant__form input { border-color: rgba(243, 241, 232, .3); border-radius: 0; background: #080c0b; color: #f3f1e8; }
body.optical-site .rc-assistant__form button { border-color: #d9ff42; border-radius: 0; background: #d9ff42; color: #080c0b; }
body.optical-site .rc-seo-popover,
body.optical-site .rc-sticky-audit { border-color: rgba(243, 241, 232, .25); border-radius: 0; background: #121816; color: #f3f1e8; }
body.optical-site .rc-seo-popover :is(h2, p),
body.optical-site .rc-sticky-audit span { color: #f3f1e8; }

@media (hover: hover) and (pointer: fine) {
  body.optical-site :is(.card, .catalog-card, .feature-band article, .direction-grid article, .tool-console-grid article) { transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
  body.optical-site :is(.card, .catalog-card, .feature-band article):hover { background: #1b241f; transform: translateY(-4px); }
  body.optical-site .direction-grid article:hover,
  body.optical-site .tool-console-grid article:hover { transform: translateY(-5px); }
}

@media (max-width: 820px) {
  body.optical-site .optical-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 82px; }
  body.optical-site .optical-hero__copy { max-width: 680px; }
  body.optical-site .optical-hero h1 { max-width: 11ch; }
  body.optical-site .optical-scene { max-width: 690px; width: 100%; }
  body.optical-site .optical-scene__stage { min-height: min(76vw, 520px); }
  body.optical-site .optical-inner-hero { grid-template-columns: 1fr; }
  body.optical-site .optical-section-art { max-width: 620px; margin-inline: 0 auto; }
  body.optical-site .home-proof__rows article { grid-template-columns: 45px minmax(115px, .62fr) minmax(0, 1fr); }
  body.optical-site .home-proof__rows article > p { grid-column: 2 / -1; }
  body.optical-site .home-proof__rows article > a { grid-column: 2 / -1; }
  body.optical-site .founder-trust { grid-template-columns: 1fr; }
  body.optical-site .case-editorial__inner,
  body.optical-site .case-portfolio__inner { width: min(100% - 2 * var(--page-pad), 1360px); }
}

@media (max-width: 600px) {
  body.optical-site .site-header { min-height: 64px; }
  body.optical-site .main-nav { border-color: rgba(243, 241, 232, .22); background: #121816; }
  body.optical-site .main-nav a { border-bottom-color: rgba(243, 241, 232, .12); }
  body.optical-site .optical-hero { gap: 30px; padding-top: 60px; }
  body.optical-site .optical-hero h1 { font-size: clamp(48px, 15vw, 75px); }
  body.optical-site .optical-scene__stage { min-height: 330px; background-size: 21px 21px, 21px 21px, auto, auto; }
  body.optical-site .optical-layer--page { width: 62%; }
  body.optical-site .optical-layer--aperture { width: 67%; }
  body.optical-site .optical-layer--lens { width: 64%; }
  body.optical-site .optical-layer--prism { width: 34%; }
  body.optical-site .optical-scene__controls { grid-template-columns: 1fr 1fr; }
  body.optical-site .optical-scene__controls button { grid-column: 1 / -1; width: 100%; }
  body.optical-site .home-proof__rows article { grid-template-columns: 34px minmax(0, 1fr); }
  body.optical-site .home-proof__media { grid-column: 2; }
  body.optical-site .home-proof__rows article > div,
  body.optical-site .home-proof__rows article > p,
  body.optical-site .home-proof__rows article > a { grid-column: 2; }
  body.optical-site .band { padding-top: 62px; padding-bottom: 62px; }
  body.optical-site .section-head--with-action { align-items: flex-start; flex-direction: column; }
  body.optical-site .article { max-width: calc(100% - 32px); margin-block: 28px; padding: 25px 20px; box-shadow: 10px 12px 0 rgba(217, 255, 66, .14); }
  body.optical-site .cookie-notice { left: 12px; bottom: 12px; width: calc(100vw - 24px); flex-direction: column; align-items: stretch; }
  body.optical-site .rc-assistant { right: 12px; bottom: 78px; }
  body.optical-site .rc-assistant__panel { width: min(420px, calc(100vw - 24px)); }
}

@media (max-width: 390px) {
  body.optical-site .optical-hero h1 { font-size: 46px; }
  body.optical-site .optical-hero__actions :is(.button, a) { width: 100%; }
  body.optical-site .optical-scene__stage { min-height: 290px; }
  body.optical-site .optical-orbit { width: 82%; }
  body.optical-site .optical-scene__controls { gap: 8px; }
  body.optical-site .optical-scene__controls label { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  body.optical-site *,
  body.optical-site *::before,
  body.optical-site *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  body.optical-site .optical-art img { transform: none !important; }
}

body.optical-site.motion-static .optical-scene *,
body.optical-site .optical-scene[data-motion="off"] .optical-orbit,
body.optical-site .optical-scene[data-motion="off"] .optical-layer--prism { animation: none !important; }

/*
  Current optical.mjs contract. The homepage is intentionally a vertical
  composition: statement, optical system, then the visitor's next choice.
*/
body.optical-site .optical-hero {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  padding-top: clamp(42px, 4vw, 58px);
  padding-bottom: 30px;
}

body.optical-site .optical-hero__copy {
  width: min(100%, 960px);
  max-width: none;
  justify-self: center;
  text-align: center;
}
body.optical-site .optical-hero__copy .eyebrow { margin-bottom: 18px; }
body.optical-site .optical-hero h1 { max-width: none; margin-bottom: 14px; font-size: clamp(58px, 7.2vw, 110px); }
body.optical-site .optical-hero h1 span { color: #d9ff42; }
body.optical-site .optical-hero__lead { margin: 0 auto; color: #d4d9d1; font-size: clamp(16px, 1.4vw, 21px); font-weight: 700; letter-spacing: .035em; }

body.optical-site .optical-hero > .optical-scene {
  width: min(100%, 1320px);
  max-width: none;
  justify-self: center;
  margin-top: 20px;
}
body.optical-site .optical-hero .optical-scene__stage {
  min-height: 330px;
  aspect-ratio: 16 / 6.1;
}

/* The lenses form a diagonal path across the scene instead of a central pile. */
body.optical-site .optical-hero .optical-layer--page { top: 13%; left: 9%; width: min(25%, 300px); max-height: 76%; }
body.optical-site .optical-hero .optical-layer--aperture { top: 26%; left: 27%; width: min(35%, 420px); max-height: 66%; }
body.optical-site .optical-hero .optical-layer--lens { top: 8%; left: 49%; width: min(39%, 465px); max-height: 81%; }
body.optical-site .optical-hero .optical-layer--prism { top: 48%; left: 76%; width: min(19%, 230px); max-height: 35%; }
body.optical-site .optical-hero .optical-orbit { width: 48%; left: 36%; top: 11%; }
body.optical-site .optical-hero .optical-beam { left: 5%; right: 4%; top: 55%; }
body.optical-site .optical-scene__labels { position: absolute; inset: 0; z-index: 5; color: #d9ff42; font: 700 10px/1 Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
body.optical-site .optical-scene__labels span { position: absolute; padding: 7px 9px; border: 1px solid rgba(217, 255, 66, .42); background: rgba(8, 12, 11, .74); }
body.optical-site .optical-scene__labels span:nth-child(1) { left: 7%; bottom: 10%; }
body.optical-site .optical-scene__labels span:nth-child(2) { left: 47%; top: 10%; }
body.optical-site .optical-scene__labels span:nth-child(3) { right: 7%; bottom: 12%; }

/* JS reveals controls after it has synchronised their values and states. */
body.optical-site .optical-scene__controls {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  padding: 0;
  border-top: 0;
  opacity: 0;
}
body.optical-site .optical-scene.optics-ready .optical-scene__controls {
  visibility: visible;
  max-height: 150px;
  margin-top: 13px;
  padding-top: 14px;
  border-top: 1px solid rgba(243, 241, 232, .18);
  opacity: 1;
  transition: opacity 180ms ease;
}
body.optical-site .optical-control > span { display: flex; justify-content: space-between; gap: 10px; }
body.optical-site .optical-scene__note { grid-column: 1 / -1; color: #aeb7ae; font-size: 12px; line-height: 1.45; }
body.optical-site .optical-scene noscript .optical-scene__note { display: block; margin: 14px 0 0; color: #bec5bd; }

body.optical-site .optical-hero__intent {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 980px);
  justify-self: center;
  margin-top: clamp(26px, 3.2vw, 48px);
  border: 1px solid rgba(243, 241, 232, .2);
  background: rgba(243, 241, 232, .2);
}
body.optical-site .optical-hero__intent a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  gap: 10px;
  padding: 14px 17px;
  background: #121816;
  color: #f3f1e8;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
body.optical-site .optical-hero__intent a span { color: #d9ff42; font-size: 18px; }
body.optical-site .optical-hero__intent a:hover { background: #1c271d; color: #d9ff42; }
body.optical-site .optical-hero__actions { justify-content: center; margin-top: 18px; }
body.optical-site .optical-hero__actions .button { min-width: 188px; }
body.optical-site .optical-hero__scroll {
  display: inline-flex;
  justify-self: center;
  align-items: center;
  gap: 9px;
  margin: 29px 0 0;
  padding: 12px 0;
  color: #aeb7ae;
  font: 700 11px/1.3 Consolas, monospace;
  letter-spacing: .055em;
  text-decoration: none;
  text-transform: uppercase;
}
body.optical-site .optical-hero__scroll span { color: #d9ff42; font-size: 18px; }
body.optical-site .optical-hero__scroll:hover { color: #d9ff42; }

/* Overview is a decision editor, not another uniform card grid. */
body.optical-site .optical-overview {
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(360px, 1.17fr);
  gap: clamp(30px, 6vw, 110px);
  align-items: start;
}
body.optical-site .optical-overview__copy { min-width: 0; }
body.optical-site .optical-overview__copy > p:not(.eyebrow) { max-width: 48ch; }
body.optical-site .optical-overview .search-ops-deliverables { margin-top: 27px; }
body.optical-site .optical-overview .optical-art--compact { width: min(100%, 460px); margin-top: 38px; }
body.optical-site .optical-overview .decision-surface {
  border: 1px solid rgba(243, 241, 232, .22);
  padding: clamp(18px, 3vw, 36px);
  background: #121816;
  box-shadow: 16px 17px 0 rgba(217, 255, 66, .12);
}
body.optical-site .decision-surface__head { display: flex; justify-content: space-between; gap: 18px; align-items: start; padding-bottom: 23px; border-bottom: 1px solid rgba(243, 241, 232, .17); }
body.optical-site .decision-surface__head > div > span,
body.optical-site .system-live { color: #aeb7ae; font: 700 10px/1.3 Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
body.optical-site .decision-surface__head strong { display: block; max-width: 19ch; margin-top: 8px; color: #f3f1e8; font: 500 clamp(24px, 2.5vw, 35px)/1 "RC Display", Oswald, sans-serif; }
body.optical-site .system-live { display: inline-flex; align-items: center; gap: 7px; text-align: right; }
body.optical-site .system-live i { width: 7px; height: 7px; border-radius: 50%; background: #d9ff42; box-shadow: 0 0 12px rgba(217, 255, 66, .7); }
body.optical-site .decision-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 27px 0; padding: 0; list-style: none; border: 1px solid rgba(243, 241, 232, .17); }
body.optical-site .decision-flow li { display: grid; gap: 8px; min-height: 84px; padding: 13px; border-right: 1px solid rgba(243, 241, 232, .17); }
body.optical-site .decision-flow li:last-child { border-right: 0; }
body.optical-site .decision-flow span { color: #d9ff42; font: 700 11px/1 Consolas, monospace; }
body.optical-site .decision-flow strong { color: #f3f1e8; font-size: 13px; }
body.optical-site .decision-check { margin: 0 0 24px; }
body.optical-site .decision-check > label { display: block; margin-bottom: 8px; color: #d7d9d2; font-size: 13px; font-weight: 700; }
body.optical-site .decision-check > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
body.optical-site .decision-check input { min-width: 0; min-height: 46px; border: 1px solid rgba(243, 241, 232, .28); border-right: 0; border-radius: 0; padding: 11px 13px; background: #080c0b; color: #f3f1e8; font: inherit; }
body.optical-site .decision-check button { min-height: 46px; border: 1px solid #d9ff42; background: #d9ff42; color: #080c0b; padding: 0 16px; font-weight: 800; cursor: pointer; }
body.optical-site .decision-table-wrap { overflow-x: auto; border: 1px solid rgba(243, 241, 232, .17); }
body.optical-site .decision-surface .decision-table { min-width: 0; }
body.optical-site .decision-surface .decision-table th,
body.optical-site .decision-surface .decision-table td { padding: 12px; font-size: 13px; }
body.optical-site .url-status { display: inline-block; padding: 4px 6px; border: 1px solid currentColor; color: #d9ff42; font: 700 11px/1 Consolas, monospace; }
body.optical-site .url-status--gone { color: #ff927b; }
body.optical-site .url-status--noindex { color: #d8dc82; }
body.optical-site .decision-surface__note { margin: 18px 0 0; color: #aeb7ae; font-size: 12px; line-height: 1.55; }

/* The inner visual is a figure beside a hero, never a background behind copy. */
body.optical-site .hero.optical-inner-shell {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(310px, .9fr);
  gap: clamp(28px, 5vw, 86px);
  align-items: center;
  min-height: min(660px, calc(100dvh - 72px));
}
body.optical-site .hero.optical-inner-shell::before { display: none; }
body.optical-site .hero.optical-inner-shell .hero-content { align-self: center; order: 0; }
body.optical-site figure.optical-inner-hero {
  display: block;
  width: min(100%, 700px);
  order: 1;
  justify-self: end;
  margin: 0;
  border: 1px solid rgba(243, 241, 232, .23);
  background: #121816;
  box-shadow: 18px 20px 0 rgba(217, 255, 66, .12);
}
body.optical-site figure.optical-inner-hero img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
body.optical-site .hub-panel figure.optical-inner-hero { width: min(100%, 560px); margin-top: 28px; }
body.optical-site .hero.optical-inner-shell.optical-hero--quiet { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 370px; }
body.optical-site .hero.optical-inner-shell.optical-hero--quiet .hero-content { max-width: 760px; }

@media (max-width: 820px) {
  body.optical-site .optical-hero h1 { font-size: clamp(58px, 11.5vw, 105px); }
  body.optical-site .optical-hero > .optical-scene { margin-top: 35px; }
  body.optical-site .optical-hero .optical-scene__stage { min-height: min(72vw, 505px); }
  body.optical-site .optical-hero__intent { width: min(100%, 700px); }
  body.optical-site .optical-overview { grid-template-columns: 1fr; gap: 42px; }
  body.optical-site .optical-overview .decision-surface { width: min(100%, 720px); }
  body.optical-site .hero.optical-inner-shell { grid-template-columns: 1fr; min-height: 0; padding-top: 82px; }
  body.optical-site figure.optical-inner-hero { justify-self: start; width: min(100%, 650px); }
}

@media (max-width: 600px) {
  body.optical-site .optical-hero { padding-top: 58px; padding-bottom: 22px; }
  body.optical-site .optical-hero h1 { font-size: clamp(50px, 14.6vw, 78px); }
  body.optical-site .optical-hero > .optical-scene { margin-top: 28px; }
  body.optical-site .optical-hero .optical-scene__stage { min-height: 312px; aspect-ratio: auto; }
  body.optical-site .optical-hero .optical-layer--page { top: 15%; left: 5%; width: 29%; }
  body.optical-site .optical-hero .optical-layer--aperture { top: 29%; left: 20%; width: 42%; }
  body.optical-site .optical-hero .optical-layer--lens { top: 11%; left: 47%; width: 47%; }
  body.optical-site .optical-hero .optical-layer--prism { top: 55%; left: 76%; width: 21%; }
  body.optical-site .optical-hero .optical-orbit { width: 60%; left: 30%; top: 11%; }
  body.optical-site .optical-scene__labels { font-size: 8px; }
  body.optical-site .optical-scene__labels span { padding: 5px 6px; }
  body.optical-site .optical-scene__labels span:nth-child(2) { top: 7%; }
  body.optical-site .optical-scene.optics-ready .optical-scene__controls { grid-template-columns: 1fr; max-height: 300px; }
  body.optical-site .optical-scene__controls button { grid-column: auto; }
  body.optical-site .optical-hero__intent { grid-template-columns: 1fr; margin-top: 18px; }
  body.optical-site .optical-hero__intent a { min-height: 52px; }
  body.optical-site .optical-hero__actions { width: 100%; }
  body.optical-site .optical-hero__actions .button { flex: 1 1 100%; }
  body.optical-site .decision-surface__head { display: grid; }
  body.optical-site .system-live { text-align: left; }
  body.optical-site .decision-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.optical-site .decision-flow li:nth-child(2) { border-right: 0; }
  body.optical-site .decision-flow li:nth-child(-n + 2) { border-bottom: 1px solid rgba(243, 241, 232, .17); }
  body.optical-site .decision-check > div { grid-template-columns: 1fr; gap: 8px; }
  body.optical-site .decision-check input { border-right: 1px solid rgba(243, 241, 232, .28); }
  body.optical-site .hero.optical-inner-shell { padding-top: 60px; }
}

/* Legacy motion lab and its following process chapter share the optical palette. */
body.optical-site {
  --motion-mint: #d9ff42;
  --motion-dark: #080c0b;
  --motion-line: rgba(243, 241, 232, .19);
}
body.optical-site .site-lab {
  border-top-color: rgba(243, 241, 232, .18);
  background: #080c0b;
  color: #f3f1e8;
}
body.optical-site .site-lab__topline,
body.optical-site .site-lab__intro,
body.optical-site .site-lab__note,
body.optical-site .lab-choice small,
body.optical-site .lab-choice strong span,
body.optical-site .lab-choice__number,
body.optical-site .lab-controls__ends,
body.optical-site .lab-scene__coordinate,
body.optical-site .lab-scene__caption { color: #aeb7ae; }
body.optical-site .site-lab h2 { color: #f3f1e8; }
body.optical-site .site-lab h2 em,
body.optical-site .site-lab .eyebrow,
body.optical-site .lab-choice.is-active,
body.optical-site .lab-choice.is-active .lab-choice__arrow,
body.optical-site .lab-controls output,
body.optical-site .lab-code b { color: #d9ff42; }
body.optical-site .site-lab :is(button, input, a):focus-visible { outline-color: #d9ff42; }
body.optical-site .site-lab__link { color: #f3f1e8; }
body.optical-site .site-lab__link:hover { color: #d9ff42; }
body.optical-site .lab-choice { border-bottom-color: rgba(243, 241, 232, .18); color: #e6e8e1; }
body.optical-site .lab-choice.is-active { background: linear-gradient(90deg, transparent, rgba(217, 255, 66, .12)); }
body.optical-site .lab-choice:hover { background-color: rgba(217, 255, 66, .08); color: #d9ff42; }
body.optical-site .lab-choice__arrow { color: #aeb7ae; }
body.optical-site .lab-scene { background-image: radial-gradient(rgba(243, 241, 232, .14) 1px, transparent 1px); }
body.optical-site .lab-scene__axis { background: rgba(217, 255, 66, .24); }
body.optical-site .lab-sheet,
body.optical-site .lab-sheet--page,
body.optical-site .lab-sheet--index,
body.optical-site .lab-sheet--lead {
  border-color: rgba(243, 241, 232, .34);
  border-radius: 0;
  background: #18201d;
  color: #f3f1e8;
  box-shadow: -9px 12px 0 -1px #080c0b, -9px 12px 0 0 rgba(217, 255, 66, .5), -20px 28px 36px #0009;
}
body.optical-site .lab-sheet.is-active,
body.optical-site .lab-sheet:not(.lab-sheet--search).is-active {
  border-color: #d9ff42;
  background: #202b20;
  box-shadow: -9px 12px 0 -1px #080c0b, -9px 12px 0 0 #d9ff42, -20px 28px 36px #0009;
}
body.optical-site .lab-sheet--search { border-color: #d9ff42; border-radius: 0; background: #f3f1e8; color: #101712; }
body.optical-site .lab-sheet--search.is-active { border-color: #d9ff42; background: #f3f1e8; color: #101712; box-shadow: -9px 12px 0 -1px #080c0b, -9px 12px 0 0 #d9ff42, -20px 28px 36px #0009; }
body.optical-site .lab-sheet__foot { border-top-color: rgba(243, 241, 232, .35); }
body.optical-site .lab-search { border-color: rgba(243, 241, 232, .38); border-radius: 0; }
body.optical-site .lab-search i { background: #d9ff42; }
body.optical-site .lab-serp i { background: rgba(243, 241, 232, .35); }
body.optical-site .lab-wireframe__art { border-radius: 0; background: #080c0b; }
body.optical-site .lab-wireframe__art i { border-color: rgba(243, 241, 232, .36); background: #3b4b40; }
body.optical-site .lab-wireframe__art i:nth-child(2) { background: #72836e; }
body.optical-site .lab-wireframe__art i:nth-child(3),
body.optical-site .lab-wireframe div > span { background: #d9ff42; color: #080c0b; }
body.optical-site .lab-conversion i { background: rgba(243, 241, 232, .4); }
body.optical-site .lab-conversion strong { border-color: #d9ff42; border-radius: 0; color: #d9ff42; }
body.optical-site .lab-controls { border-color: rgba(243, 241, 232, .3); border-radius: 0; background: #121816; }
body.optical-site .lab-controls label { color: #f3f1e8; }
body.optical-site .lab-controls input { accent-color: #d9ff42; }
body.optical-site .lab-controls input::-webkit-slider-runnable-track,
body.optical-site .lab-controls input::-moz-range-track { background: rgba(243, 241, 232, .38); }
body.optical-site .lab-controls input::-webkit-slider-thumb { border-color: #121816; border-radius: 0; background: #d9ff42; box-shadow: 0 0 0 1px #d9ff42; }
body.optical-site .lab-controls input::-moz-range-thumb { border-color: #121816; border-radius: 0; background: #d9ff42; box-shadow: 0 0 0 1px #d9ff42; }
body.optical-site .motion-marquee { border-top-color: rgba(243, 241, 232, .18); }
body.optical-site .motion-marquee > div { color: #d9ff42; }
body.optical-site .motion-marquee span { -webkit-text-stroke-color: rgba(243, 241, 232, .45); }

body.optical-site .search-process {
  position: relative;
  padding-top: 74px;
  background: #121816;
  color: #f3f1e8;
}
body.optical-site .search-process h2,
body.optical-site .search-process h3,
body.optical-site .search-route strong { color: #f3f1e8; }
body.optical-site .search-process :is(p, small) { color: #bec5bd; }
body.optical-site .search-route { border-color: rgba(243, 241, 232, .2); }
body.optical-site .search-route li + li,
body.optical-site .search-process__columns article + article { border-color: rgba(243, 241, 232, .2); }
body.optical-site .search-route span,
body.optical-site .search-process__columns a { color: #d9ff42; }
body.optical-site [data-motion-route-track]::before { background: #d9ff42; }
body.optical-site [data-motion-route-track] li.is-passed { background: rgba(217, 255, 66, .1); }
body.optical-site [data-motion-route-track] li.is-passed > span { color: #d9ff42; }
body.optical-site .search-process .optical-section-art { margin-top: 8px; margin-bottom: 36px; }
body.optical-site .lab-selection { color: #bec5bd; }

@media (max-width: 600px) {
  body.optical-site .search-process { padding-top: 56px; }
  body.optical-site .search-route li + li,
  body.optical-site .search-process__columns article + article { border-top-color: rgba(243, 241, 232, .2); }
  body.optical-site .lab-choice:nth-child(even) { border-left-color: rgba(243, 241, 232, .18); }
}

/* Contrast repairs for live tool, service and case-study components. */
body.optical-site .page-toc {
  border-bottom-color: rgba(243, 241, 232, .2);
  background: rgba(8, 12, 11, .96);
  color: #f3f1e8;
}
body.optical-site .page-toc strong { color: #f3f1e8; }
body.optical-site .page-toc a { color: #bec5bd; }
body.optical-site .page-toc a.is-active { background: rgba(217, 255, 66, .12); color: #d9ff42; }
body.optical-site .page-toc__progress { background: #d9ff42; }

body.optical-site .tool-empty-state .result-row {
  border-color: rgba(243, 241, 232, .22);
  border-radius: 0;
  background: #18201d;
  color: #f3f1e8;
}
body.optical-site .tool-empty-state .result-row span { color: #bec5bd; }
body.optical-site .tool-empty-state .result-row.is-ok strong { color: #d9ff42; }
body.optical-site .tool-empty-state .result-row.is-bad strong { color: #ff927b; }

/* Case catalog: retain the client screenshots, darken only their text frames. */
body.optical-site .case-catalog-section { background: #080c0b; color: #f3f1e8; }
body.optical-site .case-catalog-section .case-card { --case-accent: #d9ff42; background: #121816; }
body.optical-site .case-catalog-section .case-card > a { color: #f3f1e8; }
body.optical-site .case-catalog-section .case-card__body { border-color: rgba(243, 241, 232, .2); background: #121816; }
body.optical-site .case-catalog-section .case-card__body > p,
body.optical-site .case-catalog-section .case-card__body > p i { color: #bec5bd; }
body.optical-site .case-catalog-section .case-card__body h2,
body.optical-site .case-catalog-section .case-card__body strong,
body.optical-site .case-catalog-section .case-card__body > span { color: #f3f1e8; }
body.optical-site .case-catalog-section .case-card__body b { color: #d9ff42; }
body.optical-site .case-catalog-section .case-card__media > span { background: #d9ff42; color: #080c0b; }
body.optical-site .case-catalog-section .case-card--simple a > div { border-color: rgba(243, 241, 232, .2); background: #121816; }
body.optical-site .case-catalog-section .case-card--simple p,
body.optical-site .case-catalog-section .case-card--simple h2,
body.optical-site .case-catalog-section .case-card--simple span { color: #f3f1e8; }

body.optical-site .case-growth__period {
  border-color: rgba(217, 255, 66, .65);
  background: #18201d;
  color: #d9ff42;
}
body.optical-site .case-structure-table-wrap { border-color: rgba(243, 241, 232, .24); background: #121816; }
body.optical-site .case-structure-table { color: #d9ded5; }
body.optical-site .case-structure-table :is(th, td) { border-bottom-color: rgba(243, 241, 232, .18); color: #d9ded5; }
body.optical-site .case-structure-table thead { background: #18201d; color: #d9ff42; }
body.optical-site .case-structure-table thead th { color: #d9ff42; }
body.optical-site .case-structure-table tbody th { color: #f3f1e8; }
body.optical-site .case-structure-table tbody td:last-child { color: #d9ff42; }
body.optical-site :is(.case-work-list li > span, .case-channel-list__status, .case-admin-features li > span) { color: #d9ff42; }
body.optical-site .case-channel-list__status { border-color: rgba(217, 255, 66, .52); }
body.optical-site .case-outcome-list li { color: #f3f1e8; }

@media (max-width: 480px) {
  body.optical-site .case-structure-table-wrap { background: transparent; }
  body.optical-site .case-structure-table tr { border-color: rgba(243, 241, 232, .22); background: #121816; }
  body.optical-site .case-structure-table :is(th, td)::before { color: #d9ff42; }
}