@import url('./tokens.css');

/*
 * Material-interface compatibility tokens.
 *
 * The production site also ships the legacy Obsidian token sheet above.  The
 * v2 interface intentionally owns a separate visual vocabulary so existing
 * routes can keep using the legacy tokens while v2 pages resolve every value
 * deterministically from this local compatibility layer.
 */
:root {
  color-scheme: dark;
  --black-1000: #030509;
  --black-980: #05080d;
  --black-950: #070b12;
  --black-920: #0a1018;
  --graphite-900: #0d151d;
  --graphite-850: #121c25;
  --graphite-800: #16232d;
  --glass-900: rgba(8, 13, 19, .92);
  --glass-860: rgba(13, 21, 29, .82);
  --glass-800: rgba(18, 29, 38, .68);
  --text-strong: #f5f1ea;
  --text: #d9dee4;
  --text-soft: #b4bec8;
  --text-muted: #7f8d9a;
  --titanium: #bfc6c9;
  --titanium-dark: #53616b;
  --regolith: #b9b3a7;
  --tritium: #78dcff;
  --niobium: #4f91ff;
  --niobium-deep: #183e7b;
  --beryl: #bd5365;
  --beryl-deep: #431722;
  --malachite: #53d8a2;
  --malachite-deep: #123f33;
  --fluorite: #b184ff;
  --fluorite-deep: #302052;
  --amber: #dfa154;
  --amber-deep: #4e2d10;
  --oxide: #ce7157;
  --line: rgba(178, 201, 220, .18);
  --line-strong: rgba(206, 224, 239, .31);
  --line-soft: rgba(178, 201, 220, .10);
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --container: 1580px;
  --header-h: 74px;
  --gap: 14px;
  --font-ui: Aptos, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --shadow-deep: 0 40px 110px rgba(0,0,0,.68), 0 12px 32px rgba(0,0,0,.44);
  --shadow-card: 0 20px 62px rgba(0,0,0,.44), 0 6px 18px rgba(0,0,0,.36), inset 0 1px 0 rgba(240,248,255,.08), inset 0 -1px 0 rgba(0,0,0,.68);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -10px 25px rgba(0,0,0,.34);
  --glow-blue: 0 0 22px rgba(107, 190, 255, .33), 0 0 48px rgba(42, 98, 210, .18);
  --glow-beryl: 0 0 22px rgba(202, 88, 107, .35), 0 0 52px rgba(150, 39, 57, .21);
}

* { box-sizing: border-box; }
html { background: var(--black-1000); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-ui);
  background:
    radial-gradient(circle at 69% 11%, rgba(56, 109, 202, .15), transparent 34%),
    radial-gradient(circle at 14% 10%, rgba(162, 54, 76, .08), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(56, 140, 180, .08), transparent 36%),
    linear-gradient(180deg, #03060a 0%, #071018 48%, #04070b 100%);
  overflow-x: hidden;
}
body.mobile-nav-open { overflow: hidden; }
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  opacity: .15;
  mix-blend-mode: screen;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.44'/%3E%3C/svg%3E");
}
body::after {
  background:
    linear-gradient(rgba(105, 215, 255, .030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 215, 255, .018) 1px, transparent 1px),
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.72) 100%);
  background-size: 42px 42px, 42px 42px, auto;
  opacity: .46;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }

.site-shell {
  width: min(var(--container), calc(100vw - 44px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(197, 220, 236, .15);
  background:
    linear-gradient(180deg, rgba(5, 8, 12, .92), rgba(5, 8, 12, .72)),
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 28%, rgba(120,170,220,.04) 60%, transparent);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 390px; }
.logo-mark {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  color: #dce7ef;
  border: 1px solid rgba(220, 234, 244, .30);
  background:
    linear-gradient(145deg, rgba(245, 247, 249, .08), rgba(5, 8, 13, .40)),
    radial-gradient(circle at 35% 25%, rgba(116, 220, 255, .16), transparent 44%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -8px 18px rgba(0,0,0,.36), 0 0 22px rgba(67, 156, 255, .12);
}
.logo-mark svg { width: 27px; height: 27px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.logo-word { font-family: var(--font-display); font-size: 31px; line-height: 1; color: var(--text-strong); letter-spacing: -.04em; }
.brand-divider { width: 1px; height: 34px; background: rgba(225, 235, 245, .22); }
.brand-sub { font-family: var(--font-display); color: #bbc3ca; font-size: 12.5px; line-height: 1.22; white-space: nowrap; }
.nav { display: flex; gap: 42px; align-items: center; color: #c7ced6; font-size: 14px; }
.nav a { position: relative; padding: 28px 0 27px; }
.nav a.active::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: 64px; height: 3px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--tritium), rgba(91, 147, 255, .55) 42%, transparent 72%);
  box-shadow: 0 0 18px rgba(121, 220, 255, .75), 0 0 34px rgba(82, 112, 255, .28);
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.mobile-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(7, 12, 18, .9); }
.mobile-nav-panel {
  display: none;
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  margin-top: -1px;
  border: 1px solid rgba(197, 220, 236, .15);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background:
    linear-gradient(180deg, rgba(8, 13, 19, .98), rgba(4, 7, 11, .98)),
    radial-gradient(circle at 0 0, rgba(184, 76, 98, .12), transparent 30%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .38);
}
.mobile-nav-panel.open { display: block; }
.mobile-nav-inner { display: grid; gap: 10px; padding: 18px; }
.mobile-nav-inner .nav,
.mobile-nav-inner a { display: block; }
.mobile-nav-inner .nav a,
.mobile-nav-inner > a {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(190, 211, 226, .12);
  background: rgba(255, 255, 255, .02);
}
.mobile-nav-inner .nav a.active {
  color: var(--text-strong);
  border-color: rgba(111, 172, 255, .35);
  box-shadow: inset 0 0 0 1px rgba(111, 172, 255, .15), 0 0 18px rgba(111, 172, 255, .12);
}
.mobile-nav-inner .nav a.active::after { display: none; }
.mobile-nav-inner .mobile-contact { margin-top: 4px; }

.btn {
  --btn-accent: rgba(var(--accent-rgb, 189,83,101), 1);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 8px; min-height: 42px; padding: 0 20px;
  border: 1px solid rgba(210, 224, 235, .18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.08)),
    linear-gradient(180deg, rgba(17, 27, 36, .85), rgba(7, 11, 16, .86));
  color: var(--text-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -10px 18px rgba(0,0,0,.18), 0 8px 26px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb, 120,220,255), .55); box-shadow: 0 0 22px rgba(var(--accent-rgb, 120,220,255), .17), inset 0 1px 0 rgba(255,255,255,.15); }
.btn:focus-visible,
.mobile-toggle:focus-visible,
.carousel-arrow:focus-visible,
.carousel-dots button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(121, 220, 255, .85);
  outline-offset: 2px;
}
.btn-sm { min-height: 31px; padding: 0 13px; font-size: 12.2px; border-radius: 7px; }
.btn-beryl, .theme-beryl .btn-primary, .btn-primary.theme-beryl {
  background:
    linear-gradient(180deg, rgba(255, 182, 194, .20), transparent 32%),
    linear-gradient(180deg, #8b3040, #491923 72%, #331019);
  border-color: rgba(232, 120, 139, .50);
  box-shadow: 0 0 22px rgba(190, 78, 98, .20), inset 0 1px 0 rgba(255,215,224,.18), inset 0 -12px 20px rgba(0,0,0,.22);
}
.btn-secondary { background: linear-gradient(180deg, rgba(18,27,36,.72), rgba(5,9,14,.84)); }
.theme-blue .btn-primary { background: linear-gradient(180deg, rgba(98, 169, 255, .28), #0f315f 64%, #07172b); border-color: rgba(111, 172, 255, .48); }
.theme-green .btn-primary { background: linear-gradient(180deg, rgba(91,220,169,.25), #164936 66%, #071b15); border-color: rgba(91,220,169,.42); }
.theme-purple .btn-primary { background: linear-gradient(180deg, rgba(184,134,255,.25), #3a245f 66%, #170d25); border-color: rgba(184,134,255,.42); }
.theme-amber .btn-primary { background: linear-gradient(180deg, rgba(240,175,89,.25), #583414 66%, #1f1207); border-color: rgba(240,175,89,.42); }
.arrow { font-size: 18px; line-height: 1; }

.page-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, .74fr) minmax(660px, 1.26fr);
  gap: 34px;
  min-height: 370px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(180, 207, 226, .14);
  border-top: 0;
  background:
    radial-gradient(circle at 70% 48%, rgba(58, 105, 197, .18), transparent 38%),
    radial-gradient(circle at 0% 0%, rgba(181, 77, 94, .06), transparent 27%),
    linear-gradient(110deg, rgba(8, 16, 24, .96), rgba(6, 11, 16, .89) 54%, rgba(3, 6, 10, .94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.7);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background:
    radial-gradient(ellipse at 81% 71%, rgba(103, 201, 255, .30), transparent 22%),
    linear-gradient(90deg, transparent 48%, rgba(0,0,0,.42) 87%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 600 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.017 .075' numOctaves='3'/%3E%3C/filter%3E%3Crect width='600' height='300' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
.hero-copy { padding: 44px 0 42px 42px; position: relative; z-index: 2; max-width: 560px; }
.eyebrow { margin: 0 0 18px; color: #d97987; letter-spacing: .30em; font-weight: 800; font-size: 12px; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-family: var(--font-display); color: var(--text-strong); font-size: clamp(40px, 3.55vw, 62px); line-height: .99; letter-spacing: -.04em; font-weight: 620; margin-bottom: 18px; }
.hero-sub { color: #c4ccd5; font-size: 15px; line-height: 1.55; max-width: 560px; margin-bottom: 24px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-object { position: relative; z-index: 2; min-height: 332px; }
.hero-highlight { color: var(--niobium); }

.synth-console {
  --console-h: 270px;
  position: absolute;
  right: 24px;
  top: 34px;
  width: min(900px, 96%);
  height: var(--console-h);
  border-radius: 32px;
  border: 1px solid rgba(218, 233, 242, .24);
  background:
    linear-gradient(165deg, rgba(255,255,255,.09), transparent 15%, rgba(109,149,177,.06) 45%, transparent 72%),
    repeating-linear-gradient(113deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px),
    linear-gradient(145deg, #19222a, #05080c 58%, #101720);
  box-shadow: 0 44px 100px rgba(0,0,0,.72), 0 12px 26px rgba(0,0,0,.45), inset 0 0 0 10px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.13);
}
.synth-console::before {
  content: ""; position: absolute; inset: 18px 26px 28px; border-radius: 22px;
  background:
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.035), transparent 18%),
    repeating-linear-gradient(128deg, rgba(255,255,255,.035) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, rgba(5,9,14,.62), rgba(1,3,6,.93));
  border: 1px solid rgba(128, 216, 255, .30);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.035), inset 0 24px 50px rgba(0,0,0,.42), 0 0 24px rgba(87, 181, 255, .16);
}
.synth-console::after {
  content: ""; position: absolute; left: 40px; right: 40px; bottom: 18px; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(203, 82, 103, .70), rgba(109, 214, 255, .72), transparent);
  box-shadow: 0 0 24px rgba(109, 214, 255, .34);
}
.console-modules {
  position: absolute; inset: 44px 66px 54px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 17px; z-index: 2;
}
.console-module {
  --accent: var(--niobium); --accent-rgb: 79,145,255;
  display: grid; place-items: center; align-content: center; gap: 12px; text-align: center;
  color: #dfe8ef; text-transform: uppercase; font-weight: 800; letter-spacing: .13em; font-size: 13px;
  border-radius: 13px;
  border: 1px solid rgba(var(--accent-rgb), .34);
  background:
    radial-gradient(circle at 50% 12%, rgba(var(--accent-rgb), .16), transparent 32%),
    repeating-linear-gradient(130deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px),
    linear-gradient(155deg, rgba(var(--accent-rgb), .10), rgba(8,13,19,.93) 45%, rgba(0,0,0,.54));
  box-shadow: 0 18px 32px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 20px rgba(0,0,0,.36), 0 0 16px rgba(var(--accent-rgb), .14);
}
.console-module::before {
  content: ""; width: 42px; height: 42px; border-radius: 12px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .28), transparent 54%);
  border: 1px solid rgba(var(--accent-rgb), .40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 22px rgba(var(--accent-rgb), .20);
}
.console-module::after { content: ""; width: 34px; height: 2px; border-radius: 9px; background: rgba(var(--accent-rgb), .85); box-shadow: 0 0 14px rgba(var(--accent-rgb), .60); }
.console-module.theme-beryl { --accent-rgb: 189,83,101; }
.console-module.theme-green { --accent-rgb: 83,216,162; }
.console-module.theme-purple { --accent-rgb: 177,132,255; }
.console-module.theme-titanium { --accent-rgb: 183,194,201; }
.console-labels { position: absolute; left: 80px; right: 80px; top: 24px; z-index: 3; display: grid; grid-template-columns: repeat(5,1fr); color: #9daab4; text-transform: uppercase; letter-spacing: .30em; font: 800 9px var(--font-mono); text-align: center; }

.doc-scene { position: absolute; inset: 0; }
.doc-tray {
  position: absolute; right: 34px; top: 40px; width: min(760px, 96%); height: 260px;
  transform: perspective(1000px) rotateX(55deg) rotateZ(-6deg);
  border-radius: 30px;
  border: 1px solid rgba(210,225,238,.24);
  background: linear-gradient(145deg, #131b23, #04070b 60%, #11171e);
  box-shadow: var(--shadow-deep), inset 0 0 0 12px rgba(255,255,255,.035), inset 0 0 0 18px rgba(0,0,0,.34);
}
.doc-tray::before { content: ""; position: absolute; inset: 32px; border-radius: 17px; border: 2px solid rgba(112, 206, 255, .58); box-shadow: var(--glow-blue), inset 0 0 34px rgba(112,206,255,.10); background: rgba(0,0,0,.28); }
.doc-tray::after { content: ""; position: absolute; left: 34px; top: 0; bottom: 0; width: 18px; background: linear-gradient(180deg, transparent, rgba(181, 75, 94, .70), transparent); }
.doc-paper {
  position: absolute; right: 128px; top: 42px; width: 330px; height: 218px;
  transform: perspective(1000px) rotateX(55deg) rotateZ(-6deg) translateZ(20px);
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.36);
  background:
    linear-gradient(90deg, rgba(115, 37, 50, .98) 0 38px, transparent 38px),
    linear-gradient(rgba(20,24,28,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,24,28,.08) 1px, transparent 1px),
    radial-gradient(circle at 75% 24%, rgba(255,255,255,.22), transparent 22%),
    linear-gradient(145deg, #d2cbbc, #8f897d);
  background-size: auto, 20px 20px, 20px 20px, auto, auto;
  color: #15181b;
  padding: 28px 26px 22px 62px;
  box-shadow: 0 30px 58px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -14px 24px rgba(0,0,0,.12);
}
.doc-paper strong { display: block; font: 800 13px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.doc-paper small { display: block; font: 800 9px var(--font-mono); letter-spacing: .10em; text-transform: uppercase; margin-bottom: 22px; }
.doc-paper ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font: 800 10px var(--font-mono); }
.doc-paper li { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(0,0,0,.24); padding-bottom: 4px; }
.doc-paper li::after { content: ""; width: 10px; height: 10px; border-radius: 2px; background: rgba(86, 172, 255, .70); box-shadow: 0 0 10px rgba(86,172,255,.45); }

.section { margin-top: 18px; }
.section-title {
  display: flex; align-items: center; gap: 14px; margin: 0 0 12px;
  font-size: 12px; letter-spacing: .30em; color: #a8c8f4; text-transform: uppercase; font-weight: 850;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(119,220,255,.50), transparent); }

.tool-deck-section {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(189, 211, 226, .18);
  background:
    radial-gradient(circle at 12% 0%, rgba(186, 76, 98, .06), transparent 28%),
    linear-gradient(180deg, rgba(12, 20, 28, .72), rgba(5,9,14,.78));
  padding: 18px 16px 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.55);
}
.card-grid { display: grid; gap: var(--gap); }
.card-grid.compact-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.card-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.material-card {
  --accent-rgb: 116, 220, 255;
  position: relative;
  min-height: 176px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(198, 220, 236, .18);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.055), transparent 24%),
    repeating-linear-gradient(130deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, rgba(21, 32, 42, .78), rgba(7, 11, 16, .92));
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.material-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .42;
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--accent-rgb), .11), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 18%, transparent 80%, rgba(0,0,0,.30));
}
.material-card::after { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--radius-md) - 1px); pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -12px 28px rgba(0,0,0,.18); }
.material-card.selected { border-color: rgba(var(--accent-rgb), .82); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .28), 0 0 28px rgba(var(--accent-rgb), .24), var(--shadow-card); }
.material-card.selected::before { opacity: .72; }
.card-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; }
.card-title { color: var(--text-strong); font-family: var(--font-display); font-size: 20px; line-height: 1.08; letter-spacing: -.025em; margin: 10px 0 8px; }
.card-copy { color: #c4ccd5; font-size: 13px; line-height: 1.45; margin: 0 0 11px; }
.bullets { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; color: #c3ccd5; font-size: 12.5px; }
.bullets li { position: relative; padding-left: 16px; }
.bullets li::before { content: "›"; position: absolute; left: 0; color: rgb(var(--accent-rgb)); font-weight: 900; }
.card-actions { display: flex; gap: 9px; margin-top: auto; flex-wrap: wrap; }

.icon-tile {
  --accent-rgb: 116, 220, 255;
  width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .40);
  color: rgb(var(--accent-rgb));
  background:
    radial-gradient(circle at 50% 18%, rgba(var(--accent-rgb), .22), transparent 42%),
    linear-gradient(150deg, rgba(var(--accent-rgb), .25), rgba(4,8,12,.70) 50%, rgba(0,0,0,.25));
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .18), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -8px 16px rgba(0,0,0,.34);
}
.icon-tile svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.theme-beryl .icon-tile, .icon-tile.theme-beryl { --accent-rgb: 189, 83, 101; }
.theme-blue .icon-tile, .icon-tile.theme-blue { --accent-rgb: 79, 145, 255; }
.theme-green .icon-tile, .icon-tile.theme-green { --accent-rgb: 83, 216, 162; }
.theme-purple .icon-tile, .icon-tile.theme-purple { --accent-rgb: 177, 132, 255; }
.theme-amber .icon-tile, .icon-tile.theme-amber { --accent-rgb: 223, 161, 84; }
.theme-titanium .icon-tile, .icon-tile.theme-titanium { --accent-rgb: 183, 194, 201; }

.example-drawer {
  --drawer-rgb: 189,83,101;
  display: none;
  position: relative;
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(196, 220, 238, .22);
  padding: 16px 18px 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--drawer-rgb), .10), transparent 26%),
    repeating-linear-gradient(130deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, rgba(13, 20, 27, .98), rgba(3,6,10,.98));
  box-shadow: 0 34px 80px rgba(0,0,0,.50), inset 0 0 0 6px rgba(255,255,255,.028), inset 0 16px 44px rgba(0,0,0,.34);
  z-index: 2;
}
.example-drawer.open { display: block; }
.example-drawer::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(var(--drawer-rgb), .58), var(--tritium), transparent);
  box-shadow: 0 0 22px rgba(var(--drawer-rgb), .25), 0 0 20px rgba(120, 220, 255, .30);
}
.example-drawer::after {
  content: ""; position: absolute; top: -12px; left: var(--tab-x, 72px); width: 52px; height: 14px; border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(var(--drawer-rgb), .72), rgba(var(--drawer-rgb), .28));
  box-shadow: 0 0 20px rgba(var(--drawer-rgb), .32);
}
.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.drawer-title { margin: 0; color: var(--text-strong); text-transform: uppercase; letter-spacing: .24em; font-size: 12.5px; font-weight: 850; }
.drawer-title span { color: rgb(var(--drawer-rgb)); }
.drawer-actions { display: flex; gap: 10px; }
.carousel-shell { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 12px; align-items: center; }
.carousel-arrow { height: 58px; border-radius: 9px; border: 1px solid rgba(190,210,225,.24); color: var(--text-strong); background: linear-gradient(180deg, rgba(20,30,39,.75), rgba(5,8,13,.86)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -8px 16px rgba(0,0,0,.34); }
.carousel-arrow:disabled { opacity: .4; cursor: default; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -4px 10px rgba(0,0,0,.24); }
.artifact-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 0 8px; scrollbar-width: thin; }
.artifact-carousel::-webkit-scrollbar { height: 7px; } .artifact-carousel::-webkit-scrollbar-thumb { background: rgba(var(--drawer-rgb), .30); border-radius: 99px; }
.artifact-card { scroll-snap-align: start; min-height: 152px; border-radius: 11px; border: 1px solid rgba(198, 220, 236, .17); padding: 14px; background: linear-gradient(145deg, rgba(19,28,36,.92), rgba(5,8,13,.97)); box-shadow: var(--shadow-card); }
.artifact-card strong { color: var(--text-strong); display: block; font-family: var(--font-display); font-size: 17px; margin-bottom: 2px; }
.artifact-card em { display: block; color: #9faab4; font-size: 11.5px; font-style: normal; margin-bottom: 10px; }
.artifact-card p { margin: 0; color: #b9c3cc; font-size: 12.5px; line-height: 1.35; }
.artifact-mini { height: 56px; border: 1px solid rgba(210,230,244,.13); border-radius: 6px; margin-bottom: 11px; position: relative; overflow: hidden; background: linear-gradient(rgba(111, 218, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(111,218,255,.06) 1px, transparent 1px), rgba(2,7,11,.74); background-size: 15px 15px; }
.artifact-mini.problem::before { content:""; position:absolute; left:16px; right:16px; bottom:16px; height:26px; background: linear-gradient(110deg, rgba(198,72,92,.15), rgba(198,72,92,.72), rgba(118,180,255,.32)); clip-path: polygon(0 80%, 15% 68%, 28% 70%, 43% 46%, 58% 56%, 75% 18%, 100% 30%, 100% 100%, 0 100%); }
.artifact-mini.wave::before { content:""; position:absolute; inset:12px; background: repeating-radial-gradient(ellipse at 10% 50%, rgba(203,83,101,.6) 0 1px, transparent 2px 9px), repeating-radial-gradient(ellipse at 90% 50%, rgba(93,174,255,.5) 0 1px, transparent 2px 9px); opacity:.75; }
.artifact-mini.matrix::before { content:""; position:absolute; right:16px; top:12px; width:62px; height:36px; background: conic-gradient(from 90deg, #c14e60 0 20%, #344b76 0 42%, #dfb963 0 63%, #63b37f 0 83%, #a1b2cf 0); opacity:.90; }
.artifact-mini.bound::before { content:""; position:absolute; left:18px; right:18px; top:15px; height:28px; background: linear-gradient(90deg, rgba(203,76,91,.92), transparent 48%, rgba(86,214,144,.9)); clip-path: polygon(0 0, 36% 50%, 0 100%, 0 74%, 24% 50%, 0 26%, 0 0, 100% 0, 64% 50%, 100% 100%, 100% 74%, 76% 50%, 100% 26%, 100% 0); }
.carousel-dots { display: flex; justify-content: center; gap: 9px; padding-top: 10px; }
.carousel-dots button {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  border: 0;
  padding: 0;
  background: rgba(200,220,235,.22);
}
.carousel-dots button.active { background: rgb(var(--drawer-rgb)); box-shadow: 0 0 13px rgba(var(--drawer-rgb), .74); }

.method-and-cta { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: stretch; }
.stamp-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  border-radius: 16px; border: 1px solid rgba(190,211,226,.15);
  background: linear-gradient(145deg, rgba(13,21,28,.82), rgba(5,9,14,.90));
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -12px 30px rgba(0,0,0,.18);
}
.method-stamp {
  display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start;
  min-height: 82px; padding: 13px;
  border-radius: 11px; border: 1px solid rgba(190,211,226,.12);
  background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(255,255,255,.025));
  box-shadow: inset 0 2px 6px rgba(0,0,0,.42), inset 0 -1px 0 rgba(255,255,255,.05);
}
.method-stamp .icon-tile { width: 38px; height: 38px; filter: grayscale(.35); opacity: .92; box-shadow: inset 0 2px 8px rgba(0,0,0,.42); }
.method-stamp strong { color: #dfe6ec; display: block; font-size: 14px; margin-bottom: 4px; }
.method-stamp p { color: #99a6b2; font-size: 12px; line-height: 1.30; margin: 0; }
.diagnostic-card {
  border-radius: 16px; padding: 22px 24px; border: 1px solid rgba(226,112,130,.56);
  background:
    radial-gradient(circle at 12% 12%, rgba(220, 82, 105, .18), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, rgba(78,24,35,.82), rgba(13,16,23,.94));
  box-shadow: 0 0 30px rgba(190, 76, 98, .24), inset 0 1px 0 rgba(255,255,255,.09), inset 0 -20px 40px rgba(0,0,0,.20);
}
.diagnostic-card h3 { color: var(--text-strong); font-family: var(--font-display); font-size: 25px; line-height: 1.1; margin-bottom: 8px; }
.diagnostic-card p { color: #c5cbd2; font-size: 13px; line-height: 1.45; }
.diagnostic-card .btn { width: 100%; }

.home-grid, .service-info-grid, .contact-grid, .examples-grid, .artifact-grid { display: grid; gap: var(--gap); }
.home-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.service-info-grid { grid-template-columns: 1fr 1.1fr .9fr; }
.examples-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.artifact-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
.contact-grid { grid-template-columns: 1.42fr .9fr; }
.panel { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: linear-gradient(145deg, rgba(16,25,33,.78), rgba(5,9,14,.92)); box-shadow: var(--shadow-card); }
.panel h2, .panel h3 { font-family: var(--font-display); color: var(--text-strong); line-height: 1.1; }
.panel p { color: #bdc6cf; line-height: 1.45; }
.intake-context {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(121, 220, 255, .24);
  background:
    radial-gradient(circle at 0 0, rgba(121, 220, 255, .10), transparent 28%),
    linear-gradient(145deg, rgba(10, 19, 27, .88), rgba(4, 8, 13, .94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -14px 28px rgba(0,0,0,.18);
}
.intake-context strong { display: block; color: var(--text-strong); margin-bottom: 4px; }
.intake-context p { margin: 0; color: #b6c6d2; font-size: 13px; }
.contact-note { color: #d2b06e; font-size: 13px; line-height: 1.45; margin: 14px 0 18px; }
.submission-preview {
  margin-top: 18px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(111, 172, 255, .26);
  background:
    radial-gradient(circle at 100% 0, rgba(111, 172, 255, .12), transparent 32%),
    linear-gradient(145deg, rgba(10, 17, 24, .92), rgba(4, 8, 12, .98));
  box-shadow: 0 18px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07);
}
.submission-preview[hidden] { display: none; }
.submission-preview h3 { margin-bottom: 8px; }
.submission-preview p { margin: 0 0 12px; }
.preview-code {
  margin: 0;
  padding: 14px;
  border-radius: 11px;
  border: 1px solid rgba(190,211,226,.16);
  background: rgba(2, 7, 11, .82);
  color: #d6e0e8;
  font: 12.5px/1.45 var(--font-mono);
  white-space: pre-wrap;
  max-height: 260px;
  overflow: auto;
}
.preview-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.preview-status { margin-top: 10px; color: #9ec9ff; font-size: 12px; }
.list-panel { display: grid; gap: 12px; }
.list-row { display: grid; grid-template-columns: 44px 1fr; gap: 13px; padding: 13px 0; border-bottom: 1px solid rgba(190,211,226,.12); }
.list-row:last-child { border-bottom: 0; }
.step-row { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(190,211,226,.12); }
.step-index { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; color: #99caff; background: rgba(50,110,200,.12); border: 1px solid rgba(99,169,255,.35); }
.cta-panel { border-left: 7px solid rgba(189,83,101,.58); display: flex; flex-direction: column; justify-content: center; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.field.full { grid-column: 1/-1; }
label { display: block; color: #d2dae2; font-size: 12px; margin-bottom: 6px; }
input, select, textarea { width: 100%; border-radius: 7px; border: 1px solid rgba(190,211,226,.22); background: rgba(3,7,11,.66); padding: 11px 12px; color: #dfe6ec; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 8px 18px rgba(0,0,0,.18); }
textarea { min-height: 92px; resize: vertical; }
.checkbox-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.check-pill { border: 1px solid rgba(190,211,226,.18); border-radius: 8px; padding: 9px 10px; font-size: 12.5px; color: #c9d0d8; background: rgba(8,13,18,.48); }
.expectation-row { display: grid; grid-template-columns: 42px 1fr; gap: 13px; padding: 14px; border: 1px solid rgba(190,211,226,.15); border-radius: 11px; background: rgba(5,10,15,.42); }
.expectation-row strong { color: var(--text-strong); display: block; }
.expectation-row p { margin: 4px 0 0; color: #aeb9c4; font-size: 13px; }

.artifact-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap); }
.proof-card {
  border-radius: 16px;
  border: 1px solid rgba(190,211,226,.16);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(16,25,33,.86), rgba(5,9,14,.96));
  box-shadow: var(--shadow-card);
}
.proof-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid rgba(190,211,226,.14);
}
.proof-card-body { padding: 16px; }
.proof-card-body h3 { margin-bottom: 8px; }
.proof-card-body p { margin-bottom: 12px; }
.proof-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.doc-link-list { display: grid; gap: 12px; }
.doc-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(190,211,226,.14);
  background: linear-gradient(145deg, rgba(14, 22, 30, .82), rgba(5, 9, 14, .92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -8px 18px rgba(0,0,0,.16);
}
.doc-link strong { color: var(--text-strong); display: block; margin-bottom: 4px; }
.doc-link span { color: #aab7c2; font-size: 12.5px; line-height: 1.4; }

.footer { margin-top: 18px; height: 76px; border-top: 1px solid rgba(190,211,226,.13); display: flex; align-items: center; justify-content: space-between; gap: 28px; color: #8e9aa5; font-size: 12.5px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer .logo-word { font-size: 24px; }
.footer-links { display: flex; gap: 18px; }

@media (max-width: 1120px) {
  .site-shell { width: min(100vw - 28px, var(--container)); }
  .brand { min-width: 0; }
  .brand-sub, .brand-divider { display: none; }
  .site-header.nav-ready .nav,
  .site-header.nav-ready .desktop-contact { display: none; }
  .site-header.nav-ready .mobile-toggle { display: grid; place-items: center; }
  .mobile-nav-inner .nav { display: grid; gap: 10px; }
  .page-hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding: 36px 22px; }
  .hero-object { min-height: 270px; }
  .synth-console { transform: scale(.74); transform-origin: top right; right: -60px; top: 18px; }
  .doc-scene { transform: scale(.78); transform-origin: top right; }
  .card-grid.compact-six, .card-grid.four, .card-grid.three, .card-grid.two, .home-grid, .service-info-grid, .contact-grid, .examples-grid, .artifact-grid, .method-and-cta { grid-template-columns: 1fr; }
  .artifact-proof-grid { grid-template-columns: 1fr; }
  .stamp-row { grid-template-columns: 1fr; }
  .footer { flex-direction: column; height: auto; align-items: flex-start; padding: 22px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* final contract alignment: AI category cards are selectors with one action button; hidden expand triggers preserve JS/default state */
.card-grid.compact-six .btn-secondary[data-expand] { display: none; }
.material-card[data-expand-key] { cursor: pointer; }
.material-card.selected .card-content::before {
  content: "SELECTED";
  position: absolute;
  top: -4px;
  right: 0;
  color: rgb(var(--accent-rgb));
  font: 800 9px var(--font-mono);
  letter-spacing: .16em;
  border: 1px solid rgba(var(--accent-rgb), .40);
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(var(--accent-rgb), .08);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), .20);
}
.output-line { color: #c5cdd6; font-size: 12.5px; line-height: 1.35; margin: auto 0 0; }

/* Production integration surfaces */
.production-hero h1 { max-width: 760px; }
.production-hero .hero-copy { align-self: center; }
.hero-kicker {
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 3px solid rgba(83,216,162,.62);
  color: #bdc8d2;
  font: 600 12px/1.55 var(--font-mono);
  letter-spacing: .02em;
}
.status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  border: 1px solid rgba(190,211,226,.14);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(190,211,226,.14);
}
.status-item { padding: 16px; background: rgba(5,10,15,.94); }
.status-item strong { display: block; color: #e7edf2; margin-bottom: 4px; }
.status-item span { color: #9eabb7; font-size: 12px; line-height: 1.45; }
.route-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: #91f0c7;
  font: 800 10px var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.route-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #53d8a2; box-shadow: 0 0 12px rgba(83,216,162,.8); }
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); }
.offer-card { display: flex; flex-direction: column; min-height: 100%; }
.offer-price { color: #f3f7fa; font-size: clamp(28px,4vw,42px); font-weight: 780; letter-spacing: -.04em; margin: 8px 0 2px; }
.offer-terms { color: #91a0ad; font: 700 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.offer-list { margin: 18px 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; }
.offer-list li { color: #b9c4ce; font-size: 13px; line-height: 1.5; padding-left: 18px; position: relative; }
.offer-list li::before { content: "›"; position: absolute; left: 0; color: rgb(var(--accent-rgb)); font-weight: 800; }
.offer-card .card-actions { margin-top: auto; }
.boundary-note { padding: 14px 16px; border: 1px solid rgba(190,211,226,.16); border-radius: 10px; background: rgba(4,9,14,.64); color: #aeb9c4; font-size: 12px; line-height: 1.55; }
.boundary-note strong { color: #e3e9ee; }
.engagement-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,.8fr); gap: var(--gap); align-items: start; }
.offer-options { display: grid; gap: 9px; margin: 15px 0 18px; }
.offer-option { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 13px; border: 1px solid rgba(190,211,226,.18); border-radius: 10px; background: rgba(5,10,15,.5); cursor: pointer; }
.offer-option.selected { border-color: rgba(83,216,162,.55); box-shadow: 0 0 18px rgba(83,216,162,.10); }
.offer-option input { width: auto; accent-color: #53d8a2; }
.offer-option strong { color: #e2e8ed; }
.offer-option small { color: #93a1ae; }
.offer-option .option-price { color: #dce7ef; font-weight: 800; }
.field-help { margin-top: 5px; color: #8595a3; font-size: 11px; line-height: 1.4; }
.legal-check { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; color: #aab7c2; font-size: 12px; line-height: 1.5; }
.legal-check input { width: auto; margin-top: 3px; accent-color: #53d8a2; }
.offer-selector { margin: 0; padding: 0; border: 0; min-width: 0; }
.offer-selector legend { color: #d2dae2; font-size: 12px; font-weight: 750; padding: 0; }
.commercial-route-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.commercial-route-actions .btn { flex: 1 1 260px; justify-content: center; text-align: center; }
.privacy-notice { margin: 13px 0 0; padding: 11px 13px; border-left: 3px solid rgba(111,172,255,.46); color: #98a8b5; background: rgba(5,10,15,.38); font-size: 11.5px; line-height: 1.55; }
.privacy-notice a { color: #b7d6ff; }
.checkout-status { margin-bottom: 15px; border-color: rgba(223,161,84,.38); color: #e4cda7; }
.completion-shell { max-width: 780px; margin: 54px auto; }
.completion-shell .panel { padding: clamp(24px,5vw,48px); }
.completion-code { display: inline-block; margin: 8px 0 18px; color: #91f0c7; font: 800 13px var(--font-mono); letter-spacing: .08em; }
.compact-copy { max-width: 720px; }
.provenance { color: #82929f; font-size: 11px; line-height: 1.5; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  .status-strip, .offer-grid, .engagement-grid { grid-template-columns: 1fr; }
  .offer-option { grid-template-columns: 22px 1fr; }
  .offer-option .option-price { grid-column: 2; }
}