@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --bg: #080a0f;
  --bg-soft: #0d1017;
  --panel: #10131c;
  --panel-2: #151923;
  --ink: #f4f6f0;
  --muted: #9da3ad;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --lime: #b7ff63;
  --violet: #7b6cff;
  --cyan: #69e4ff;
  --dark-ink: #11130f;
  --warm: #f2f3eb;
  --container: 1240px;
  --radius: 26px;
  --font-display: "Space Grotesk", "Arial Narrow", sans-serif;
  --font-body: "Manrope", Arial, sans-serif;
  --font-mono: "DM Mono", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

::selection {
  color: var(--dark-ink);
  background: var(--lime);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  color: #111;
  background: var(--lime);
  border-radius: 10px;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.page-noise {
  position: fixed;
  z-index: 200;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.cursor-glow {
  position: fixed;
  z-index: -1;
  width: 520px;
  height: 520px;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.11;
  background: radial-gradient(circle, var(--violet), transparent 67%);
  transform: translate(-50%, -50%);
  filter: blur(18px);
}

.container {
  position: relative;
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  color: #c7cbd2;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow > span {
  position: relative;
  width: 22px;
  height: 1px;
  background: var(--lime);
}

.eyebrow > span::after {
  position: absolute;
  width: 4px;
  height: 4px;
  right: 0;
  top: -1.5px;
  content: "";
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--lime);
}

.eyebrow-dark {
  color: rgba(16, 18, 14, 0.65);
}

.eyebrow-dark > span {
  background: #252820;
}

.eyebrow-dark > span::after {
  background: #252820;
  box-shadow: none;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.button:hover svg {
  transform: translateX(3px);
}

.button-primary {
  color: #11140d;
  background: var(--lime);
  box-shadow: 0 10px 44px rgba(183, 255, 99, 0.18);
}

.button-primary:hover {
  background: #cbff8e;
}

.button-ghost {
  color: var(--ink);
  background: transparent;
  border-color: var(--line-strong);
}

.button-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
}

.button-light {
  color: #10120e;
  background: var(--warm);
}

.button-dark {
  color: var(--warm);
  background: #11140f;
}

.button-small {
  min-height: 40px;
  padding: 0 17px;
  font-size: 12px;
}

.play-dot {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}

.play-dot i {
  position: absolute;
  left: 8px;
  top: 6px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--lime);
}

/* Navigation */
.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  padding: 18px 0;
  transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled {
  padding: 10px 0;
  background: rgba(8, 10, 15, 0.78);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.nav-shell {
  width: min(calc(100% - 36px), 1320px);
  min-height: 60px;
  margin: 0 auto;
  padding: 0 12px 0 18px;
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(14, 17, 24, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.site-header.scrolled .nav-shell {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--ink);
  font: 700 22px/1 var(--font-display);
  letter-spacing: -0.05em;
}

.brand i {
  color: var(--lime);
  font-style: normal;
}

.brand-mark {
  width: 28px;
  height: 28px;
  margin-right: 9px;
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-mark path:last-child {
  stroke: var(--ink);
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
}

.nav-menu a {
  position: relative;
  padding: 11px 14px;
  color: #b4b9c2;
  font-size: 12px;
  font-weight: 600;
  transition: color 0.2s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--ink);
}

.nav-menu a::after {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 1px;
  content: "";
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  margin-left: 8px;
}

.email-link {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--lime);
  border: 1px solid rgba(183, 255, 99, 0.25);
  border-radius: 50%;
  background: rgba(183, 255, 99, 0.06);
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.email-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.email-link:hover {
  color: #10130d;
  background: var(--lime);
  transform: translateY(-2px);
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 10px;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.menu-toggle > span:not(.sr-only) {
  display: block;
  width: 20px;
  height: 1px;
  margin: 5px 0;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hero */
.hero {
  min-height: 100vh;
  padding: 164px 0 38px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 76% 42%, rgba(123, 108, 255, 0.12), transparent 28%),
    var(--bg);
  background-size: 68px 68px, 68px 68px, auto, auto;
}

#network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.18;
}

.hero::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, var(--bg) 97%);
}

.hero-orb {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.09;
  pointer-events: none;
}

.hero-orb-one {
  top: -250px;
  left: -180px;
  background: var(--lime);
}

.hero-orb-two {
  right: -220px;
  bottom: -250px;
  background: var(--violet);
}

.hero-grid {
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
  align-items: center;
  gap: 48px;
}

.hero-copy {
  padding-bottom: 26px;
}

.hero h1 {
  max-width: 680px;
  margin: 0;
  font: 500 clamp(64px, 7vw, 104px) / 0.91 var(--font-display);
  letter-spacing: -0.072em;
}

.hero-accent {
  display: block;
  color: transparent;
  background: linear-gradient(90deg, var(--lime) 6%, #f2ffdc 44%, #9b91ff 88%);
  background-clip: text;
  -webkit-background-clip: text;
}

.hero-lead {
  max-width: 620px;
  margin: 32px 0 0;
  color: #aeb3bd;
  font-size: 17px;
  line-height: 1.72;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
  color: #747b86;
  font: 400 10px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-proof > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.status-dot {
  width: 5px;
  height: 5px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--lime);
}

.hero-visual {
  position: relative;
  min-height: 630px;
  display: flex;
  align-items: center;
  perspective: 1200px;
}

.visual-halo {
  position: absolute;
  width: 520px;
  height: 520px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 108, 255, 0.25), rgba(105, 228, 255, 0.06) 42%, transparent 70%);
  transform: translate(-50%, -50%);
  filter: blur(20px);
}

.system-window {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 500px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background: rgba(12, 15, 22, 0.88);
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  backdrop-filter: blur(12px);
  transform: rotateY(-3deg) rotateX(1.5deg);
  transition: transform 0.18s ease-out;
}

.window-topbar {
  height: 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}

.window-dots {
  display: flex;
  gap: 6px;
}

.window-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3f4551;
}

.window-dots i:first-child {
  background: #ff6f68;
}

.window-dots i:nth-child(2) {
  background: #f5c95b;
}

.window-dots i:last-child {
  background: #6ecb78;
}

.window-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #89909b;
  font: 400 9px/1 var(--font-mono);
  letter-spacing: 0.04em;
}

.live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 9px var(--lime);
}

.window-badge {
  justify-self: end;
  padding: 4px 7px;
  color: var(--lime);
  border: 1px solid rgba(183, 255, 99, 0.24);
  border-radius: 4px;
  font: 500 8px/1 var(--font-mono);
  letter-spacing: 0.12em;
}

.window-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 9px;
}

.galactic-sound {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  color: #aab1bc;
  border: 1px solid rgba(105, 228, 255, 0.2);
  border-radius: 999px;
  background: rgba(105, 228, 255, 0.045);
  font: 500 7px/1 var(--font-mono);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.galactic-sound:hover,
.galactic-sound:focus-visible {
  color: #efffe3;
  border-color: rgba(183, 255, 99, 0.46);
  outline: none;
}

.galactic-sound[aria-pressed="true"] {
  color: var(--lime);
  border-color: rgba(183, 255, 99, 0.4);
  background: rgba(183, 255, 99, 0.08);
  box-shadow: 0 0 18px rgba(183, 255, 99, 0.08);
}

.sound-icon {
  font-size: 10px;
}

.sound-waves {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 10px;
}

.sound-waves i {
  width: 2px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.45;
}

.galactic-sound[aria-pressed="true"] .sound-waves i {
  animation: soundWave 1.15s ease-in-out infinite;
}

.galactic-sound[aria-pressed="true"] .sound-waves i:nth-child(2) { animation-delay: 0.16s; }
.galactic-sound[aria-pressed="true"] .sound-waves i:nth-child(3) { animation-delay: 0.32s; }

@keyframes soundWave {
  0%, 100% { height: 3px; opacity: 0.35; }
  50% { height: 10px; opacity: 1; }
}

.system-body {
  min-height: 452px;
  display: grid;
  grid-template-columns: 50px 1fr;
}

.system-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 15px 0;
  border-right: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.15);
}

.mini-logo {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  margin-bottom: 12px;
  color: #0c0f0a;
  background: var(--lime);
  border-radius: 8px;
  font: 700 13px/1 var(--font-display);
}

.side-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
}

.side-icon.active {
  background: rgba(255, 255, 255, 0.08);
}

.side-icon span {
  width: 9px;
  height: 9px;
  border: 1px solid #646b76;
  border-radius: 2px;
}

.side-icon.active span {
  border-color: var(--lime);
  box-shadow: 0 0 9px rgba(183, 255, 99, 0.4);
}

.side-icon.bottom {
  margin-top: auto;
}

.system-canvas {
  position: relative;
  display: grid;
  grid-template-rows: 38px 1fr 44px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
  background-size: 24px 24px;
}

.canvas-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  color: #606773;
  border-bottom: 1px solid var(--line);
  font: 400 8px/1 var(--font-mono);
  letter-spacing: 0.08em;
}

.canvas-meta > div {
  display: flex;
  gap: 4px;
}

.canvas-meta i {
  width: 12px;
  height: 2px;
  background: #3b404a;
}

.flow-stage {
  position: relative;
  min-height: 350px;
}

.flow-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.line-path {
  fill: none;
  stroke: url(#none);
  stroke: rgba(164, 154, 255, 0.35);
  stroke-width: 1.2;
  stroke-dasharray: 5 7;
  animation: flowDash 4s linear infinite;
}

.line-two {
  stroke: rgba(183, 255, 99, 0.35);
}

.line-three {
  stroke: rgba(105, 228, 255, 0.35);
}

@keyframes flowDash {
  to { stroke-dashoffset: -48; }
}

.flow-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 126px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  background: rgba(19, 23, 33, 0.94);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.flow-node small {
  display: block;
  margin-bottom: 4px;
  color: #646c79;
  font: 400 7px/1 var(--font-mono);
  letter-spacing: 0.1em;
}

.flow-node strong {
  display: block;
  color: #dde0e5;
  font-size: 10px;
  font-weight: 600;
}

.node-icon {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  font-size: 13px;
}

.node-icon-violet {
  color: #c5bfff;
  background: rgba(123, 108, 255, 0.15);
  border: 1px solid rgba(123, 108, 255, 0.25);
}

.node-icon-lime {
  color: var(--lime);
  background: rgba(183, 255, 99, 0.1);
  border: 1px solid rgba(183, 255, 99, 0.2);
}

.node-icon-cyan {
  color: var(--cyan);
  background: rgba(105, 228, 255, 0.1);
  border: 1px solid rgba(105, 228, 255, 0.2);
}

.node-input { left: 4%; top: 10%; }
.node-brain { left: 38%; top: 38%; min-width: 154px; border-color: rgba(183, 255, 99, 0.28); }
.node-app { right: 3%; top: 12%; }
.node-agent { right: 3%; bottom: 10%; }

.brain-pulse {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  color: #15190f;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(183, 255, 99, 0.25);
  font: 600 9px/1 var(--font-mono);
}

.brain-pulse::before,
.brain-pulse::after {
  position: absolute;
  inset: -5px;
  content: "";
  border: 1px solid rgba(183, 255, 99, 0.24);
  border-radius: 50%;
  animation: pulseRing 2.4s ease-out infinite;
}

.brain-pulse::after {
  animation-delay: 1.2s;
}

@keyframes pulseRing {
  0% { opacity: 0.8; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.6); }
}

.port {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 7px var(--lime);
}

.port-left { left: -3px; }
.port-right { right: -3px; }

.thought-chip {
  position: absolute;
  padding: 6px 8px;
  color: #79808c;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(8, 10, 15, 0.78);
  font: 400 7px/1 var(--font-mono);
  letter-spacing: 0.05em;
}

.chip-one { left: 29%; top: 18%; }
.chip-two { left: 22%; bottom: 13%; }
.chip-three { right: 30%; top: 23%; }

.canvas-console {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #7f8792;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
  font: 400 8px/1 var(--font-mono);
}

.console-prompt {
  margin-right: 7px;
  color: var(--lime);
}

.type-line::after {
  display: inline-block;
  width: 5px;
  height: 10px;
  margin-left: 2px;
  vertical-align: -2px;
  content: "";
  background: var(--lime);
  animation: cursorBlink 0.75s step-end infinite;
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}

.floating-pill {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 168px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  background: rgba(17, 20, 28, 0.86);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  animation: float 5s ease-in-out infinite;
}

.floating-pill small {
  display: block;
  margin-bottom: 3px;
  color: #737a86;
  font: 400 7px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.floating-pill strong {
  display: block;
  font-size: 9px;
  font-weight: 600;
}

.pill-performance {
  right: -25px;
  bottom: 44px;
}

.pill-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #111;
  background: var(--lime);
  border-radius: 8px;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.capability-strip {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
  padding: 24px 4px 0;
  color: #626975;
  border-top: 1px solid var(--line);
  font: 400 9px/1 var(--font-mono);
  letter-spacing: 0.11em;
}

.capability-strip i {
  width: 3px;
  height: 3px;
  background: var(--lime);
  border-radius: 50%;
}

/* Matrix cosmos */
#network-canvas {
  z-index: 0;
}

#matrix-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  pointer-events: none;
  mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9), transparent 48%, rgba(0, 0, 0, 0.34));
}

.matrix-scan {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: -10%;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(183, 255, 99, 0.07), transparent);
  border-bottom: 1px solid rgba(183, 255, 99, 0.12);
  animation: matrixScan 8s linear infinite;
}

@keyframes matrixScan {
  from { transform: translateY(-20vh); }
  to { transform: translateY(125vh); }
}

.orbit-window {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 548px;
  border: 1px solid rgba(183, 255, 99, 0.2);
  border-radius: 24px;
  background: rgba(6, 9, 13, 0.88);
  box-shadow: 0 55px 110px rgba(0, 0, 0, 0.58), 0 0 80px rgba(123, 108, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  backdrop-filter: blur(14px);
  transform: rotateY(-3deg) rotateX(1.5deg);
  transition: transform 0.18s ease-out;
}

.orbit-window::before {
  position: absolute;
  z-index: 8;
  inset: 48px 0 auto;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  opacity: 0.25;
  animation: orbitHeaderPulse 3s ease-in-out infinite;
}

@keyframes orbitHeaderPulse {
  0%, 100% { opacity: 0.12; transform: scaleX(0.35); }
  50% { opacity: 0.45; transform: scaleX(1); }
}

.cosmos-scene {
  position: relative;
  height: 500px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 49%, rgba(183, 255, 99, 0.1), transparent 10%),
    radial-gradient(circle at 50% 50%, rgba(123, 108, 255, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(4, 7, 10, 0.48), rgba(3, 6, 9, 0.92));
}

.cosmos-scene::after {
  position: absolute;
  z-index: 7;
  inset: 0;
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(183, 255, 99, 0.018) 4px 5px);
}

.cosmos-grid {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image: linear-gradient(rgba(183, 255, 99, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(183, 255, 99, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, #000 12%, transparent 73%);
  animation: gridBreathe 6s ease-in-out infinite;
}

@keyframes gridBreathe {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.36; transform: scale(1.03); }
}

.star-field {
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(105, 228, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(183, 255, 99, 0.58) 0 1px, transparent 1.5px);
  background-position: 0 0, 41px 67px, 79px 21px;
  background-size: 127px 113px, 173px 157px, 211px 191px;
  animation: starsDrift 28s linear infinite;
}

.stars-two {
  opacity: 0.48;
  transform: scale(1.35) rotate(12deg);
  animation-duration: 44s;
  animation-direction: reverse;
}

@keyframes starsDrift {
  to { transform: translate3d(35px, 24px, 0) rotate(2deg); }
}

.cosmos-coordinate {
  position: absolute;
  z-index: 9;
  color: rgba(183, 255, 99, 0.38);
  font: 400 6px/1 var(--font-mono);
  letter-spacing: 0.13em;
}

.coordinate-one { left: 16px; top: 16px; }
.coordinate-two { right: 16px; top: 16px; }

.orbit-track {
  --duration: 12s;
  --direction: normal;
  --counter-direction: reverse;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 47%;
  border: 1px solid rgba(147, 161, 178, 0.17);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: cosmicOrbit var(--duration) linear infinite;
  animation-direction: var(--direction);
}

.orbit-track::before {
  position: absolute;
  inset: -1px;
  content: "";
  border-top: 1px solid rgba(183, 255, 99, 0.42);
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 1px solid rgba(123, 108, 255, 0.24);
  border-radius: inherit;
  filter: drop-shadow(0 0 5px rgba(183, 255, 99, 0.25));
}

.orbit-track-one { width: 145px; height: 106px; --duration: 7s; }
.orbit-track-two { width: 236px; height: 174px; --duration: 11s; --direction: reverse; --counter-direction: normal; transform: translate(-50%, -50%) rotate(13deg); }
.orbit-track-three { width: 330px; height: 244px; --duration: 16s; transform: translate(-50%, -50%) rotate(-8deg); }
.orbit-track-four { width: 425px; height: 318px; --duration: 22s; --direction: reverse; --counter-direction: normal; transform: translate(-50%, -50%) rotate(7deg); }
.orbit-track-five { width: 535px; height: 400px; --duration: 30s; transform: translate(-50%, -50%) rotate(-4deg); }

@keyframes cosmicOrbit {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

.cosmic-planet {
  position: absolute;
  z-index: 6;
  left: 100%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dce1e7;
  transform: translate(-50%, -50%);
  animation: planetCounter var(--duration) linear infinite;
  animation-direction: var(--counter-direction);
  white-space: nowrap;
  font: 500 6px/1 var(--font-mono);
  letter-spacing: 0.08em;
}

@keyframes planetCounter {
  from { rotate: 0deg; }
  to { rotate: -360deg; }
}

.cosmic-planet i {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, var(--violet) 26%, #231b63 68%);
  box-shadow: 0 0 18px rgba(123, 108, 255, 0.65);
}

.cosmic-planet i::after {
  position: absolute;
  left: -5px;
  right: -5px;
  top: 6px;
  height: 3px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transform: rotate(-17deg);
}

.planet-webapp i {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 32% 28%, #fff, var(--cyan) 28%, #12505d 70%);
  box-shadow: 0 0 16px rgba(105, 228, 255, 0.58);
}

.planet-webapp i::after,
.planet-site i::after { display: none; }

.planet-agent i {
  width: 19px;
  height: 19px;
  background: radial-gradient(circle at 35% 30%, #fbffe9, var(--lime) 27%, #376912 72%);
  box-shadow: 0 0 22px rgba(183, 255, 99, 0.72);
}

.planet-agent i::after {
  border-color: rgba(183, 255, 99, 0.55);
}

.planet-site i {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 35% 30%, #fff, #ff8db7 34%, #6c2145 72%);
  box-shadow: 0 0 15px rgba(255, 110, 172, 0.6);
}

.planet-assistant i {
  width: 17px;
  height: 17px;
  background: radial-gradient(circle at 35% 30%, #fff, #c8cbd0 30%, #3b414a 72%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
}

.solar-core {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 47%;
  width: 110px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(183, 255, 99, 0.3);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 255, 99, 0.18), rgba(7, 11, 12, 0.95) 68%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 60px rgba(183, 255, 99, 0.2), inset 0 0 22px rgba(183, 255, 99, 0.12);
}

.solar-core::before,
.solar-core::after {
  position: absolute;
  content: "";
  border: 1px dashed rgba(183, 255, 99, 0.28);
  border-radius: 50%;
  animation: coreSpin 12s linear infinite;
}

.solar-core::before { inset: -14px; }
.solar-core::after { inset: -27px; border-color: rgba(123, 108, 255, 0.2); animation-direction: reverse; animation-duration: 18s; }

@keyframes coreSpin { to { transform: rotate(360deg); } }

.core-energy {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #11160c;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 25px var(--lime);
  font: 700 14px/1 var(--font-display);
  animation: corePulse 2.8s ease-in-out infinite;
}

@keyframes corePulse {
  0%, 100% { transform: scale(0.94); box-shadow: 0 0 20px rgba(183, 255, 99, 0.62); }
  50% { transform: scale(1.06); box-shadow: 0 0 38px rgba(183, 255, 99, 0.9); }
}

.solar-core strong {
  margin-top: 10px;
  font: 500 7px/1 var(--font-mono);
  letter-spacing: 0.11em;
}

.solar-core small {
  margin-top: 4px;
  color: #6e7781;
  font: 400 5px/1 var(--font-mono);
  letter-spacing: 0.08em;
}

.matrix-console {
  position: absolute;
  z-index: 9;
  left: 16px;
  bottom: 15px;
  width: 178px;
  padding: 9px 11px;
  color: rgba(183, 255, 99, 0.55);
  border-left: 1px solid rgba(183, 255, 99, 0.32);
  background: rgba(5, 9, 9, 0.58);
  font: 400 6px/1.8 var(--font-mono);
  letter-spacing: 0.04em;
  backdrop-filter: blur(5px);
}

.matrix-console span { color: var(--lime); }
.matrix-console b { color: #c6ff8a; font-weight: 400; }

.cosmos-legend {
  position: absolute;
  z-index: 9;
  right: 16px;
  bottom: 17px;
  display: flex;
  gap: 13px;
  color: #59636d;
  font: 400 5px/1 var(--font-mono);
  letter-spacing: 0.09em;
}

.cosmos-legend span { display: flex; align-items: center; gap: 5px; }
.cosmos-legend i { width: 4px; height: 4px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 7px var(--lime); }
.cosmos-legend span:last-child i { background: var(--violet); box-shadow: 0 0 7px var(--violet); }

.cosmic-pill {
  border-color: rgba(183, 255, 99, 0.2);
  background: rgba(8, 13, 14, 0.88);
}

/* Services */
.services {
  padding: 150px 0;
  background: var(--bg);
}

.section-heading {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 64px;
}

.section-heading h2,
.process-intro h2,
.faq-title h2,
.principles-title h2 {
  margin: 0;
  font: 500 clamp(46px, 5.5vw, 76px) / 1 var(--font-display);
  letter-spacing: -0.065em;
}

.section-heading > p,
.process-intro > p:last-child,
.faq-title > p:last-child {
  max-width: 470px;
  margin: 0 0 5px;
  color: #959ca7;
  font-size: 15px;
  line-height: 1.75;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 390px;
  gap: 16px;
}

.service-card,
.example-card {
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(420px circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.075), transparent 44%),
    var(--panel);
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.service-card:hover,
.example-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-3px);
}

.service-card::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.017) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.017) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(120deg, transparent 15%, #000 75%);
}

.service-mobile { grid-column: span 7; }
.service-web { grid-column: span 5; }
.service-agent { grid-column: span 4; }
.service-sites { grid-column: span 4; }
.service-assistant { grid-column: span 4; }

.card-number {
  position: absolute;
  z-index: 4;
  top: 22px;
  right: 24px;
  color: #4d535e;
  font: 400 9px/1 var(--font-mono);
  letter-spacing: 0.12em;
}

.card-copy {
  position: relative;
  z-index: 3;
  width: 56%;
  padding: 34px;
}

.service-kicker,
.example-type {
  color: var(--lime);
  font: 400 9px/1 var(--font-mono);
  letter-spacing: 0.12em;
}

.card-copy h3 {
  margin: 17px 0 12px;
  font: 500 clamp(25px, 2.2vw, 34px) / 1.05 var(--font-display);
  letter-spacing: -0.05em;
}

.card-copy p {
  margin: 0;
  color: #858d99;
  font-size: 13px;
  line-height: 1.65;
}

.service-web .card-copy,
.service-agent .card-copy,
.service-sites .card-copy,
.service-assistant .card-copy {
  width: 100%;
}

.phone-scene {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: -74px;
  width: 310px;
  height: 340px;
}

.phone {
  position: absolute;
  width: 164px;
  height: 330px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 32px;
  background: #0a0c11;
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.45);
}

.phone-back {
  left: 8px;
  top: 36px;
  transform: rotate(-12deg);
  opacity: 0.54;
}

.phone-front {
  right: 12px;
  top: 0;
  transform: rotate(4deg);
}

.phone-screen,
.app-ui {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  overflow: hidden;
}

.gradient-screen {
  background: radial-gradient(circle at 60% 30%, rgba(183, 255, 99, 0.75), transparent 28%), linear-gradient(145deg, #8c7cff, #12141c 65%);
}

.phone-camera,
.phone-notch {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 13px;
  width: 48px;
  height: 14px;
  background: #050607;
  border-radius: 20px;
  transform: translateX(-50%);
}

.app-ui {
  padding: 36px 13px 12px;
  background: linear-gradient(160deg, #f6f7ef, #e4e7db);
  color: #151710;
}

.app-top {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 700;
}

.app-top i {
  width: 18px;
  height: 18px;
  background: #1c2017;
  border-radius: 50%;
}

.app-balance {
  position: relative;
  height: 96px;
  margin: 13px 0 10px;
  padding: 12px;
  color: white;
  background: #151812;
  border-radius: 14px;
  overflow: hidden;
}

.app-balance small { display: block; color: #9ea397; font-size: 6px; }
.app-balance strong { display: block; margin-top: 5px; font-size: 11px; }
.sparkline { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 35px; border-bottom: 1px solid rgba(183,255,99,.3); }
.sparkline::after { position: absolute; left: 0; right: 0; bottom: 4px; height: 18px; content: ""; border-top: 2px solid var(--lime); border-radius: 50%; transform: skewY(-7deg); }
.app-row { display: flex; align-items: center; gap: 7px; height: 34px; margin: 7px 0; padding: 6px; background: rgba(255,255,255,.8); border-radius: 9px; }
.app-row i { width: 21px; height: 21px; background: #d6ffab; border-radius: 7px; }
.app-row span { width: 58px; height: 4px; background: #bfc2b7; border-radius: 5px; }
.app-row b { width: 11px; height: 11px; margin-left: auto; border: 1px solid #92968b; border-radius: 50%; }
.app-nav { position: absolute; left: 20px; right: 20px; bottom: 17px; display: flex; justify-content: space-between; }
.app-nav i { width: 8px; height: 8px; background: #a8aca1; border-radius: 3px; }
.app-nav i:first-child { background: #181b14; }

.dashboard-scene {
  position: absolute;
  z-index: 2;
  left: 34px;
  right: -40px;
  bottom: -30px;
  height: 230px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px 0 0 0;
  background: #0b0e14;
  box-shadow: 0 25px 50px rgba(0,0,0,.35);
  transform: perspective(700px) rotateX(3deg) rotateY(-4deg);
  overflow: hidden;
}

.dash-toolbar { height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.dash-toolbar i { width: 5px; height: 5px; background: #4b515c; border-radius: 50%; }
.dash-toolbar span { width: 80px; height: 6px; margin-left: 8px; background: #242934; border-radius: 5px; }
.dash-toolbar b { width: 22px; height: 12px; margin-left: auto; background: var(--lime); border-radius: 4px; }
.dash-body { display: grid; grid-template-columns: 38px 1fr; min-height: 200px; }
.dash-body aside { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 13px 0; border-right: 1px solid var(--line); }
.dash-body aside i { width: 9px; height: 9px; border: 1px solid #424955; border-radius: 3px; }
.dash-main { padding: 15px; }
.dash-metric { position: relative; width: 44%; min-height: 72px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #11151d; }
.dash-metric small { display: block; color: #636a76; font: 7px var(--font-mono); }
.dash-metric strong { display: block; margin-top: 7px; font: 500 20px var(--font-display); }
.dash-metric span { position: absolute; right: 9px; bottom: 10px; color: var(--lime); font: 7px var(--font-mono); }
.dash-chart { position: absolute; top: 45px; right: 14px; width: 46%; height: 86px; display: flex; align-items: end; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.dash-chart i { flex: 1; min-width: 5px; background: linear-gradient(var(--violet), rgba(123,108,255,.12)); border-radius: 3px 3px 0 0; }
.dash-chart i:nth-child(1) { height: 35%; }.dash-chart i:nth-child(2) { height: 58%; }.dash-chart i:nth-child(3) { height: 42%; }.dash-chart i:nth-child(4) { height: 82%; }.dash-chart i:nth-child(5) { height: 65%; }.dash-chart i:nth-child(6) { height: 92%; background: linear-gradient(var(--lime), rgba(183,255,99,.12)); }.dash-chart i:nth-child(7) { height: 72%; }
.dash-list { display: grid; gap: 7px; margin-top: 12px; }
.dash-list span { height: 22px; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.04) 30%, transparent 30%); }

.agent-orbit {
  position: absolute;
  z-index: 2;
  width: 250px;
  height: 250px;
  left: 50%;
  bottom: -44px;
  transform: translateX(-50%);
}

.agent-orbit::before { position: absolute; inset: 45px; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(183,255,99,.17), transparent 66%); filter: blur(5px); }
.orbit { position: absolute; inset: 35px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; animation: orbitSpin 14s linear infinite; }
.orbit-b { inset: 66px 22px; border-color: rgba(123,108,255,.25); transform: rotate(55deg); animation-duration: 10s; animation-direction: reverse; }
.orbit i { position: absolute; width: 8px; height: 8px; left: 26px; top: 15px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 14px var(--lime); }
.orbit-b i { left: auto; right: 12px; top: 55px; background: var(--violet); box-shadow: 0 0 14px var(--violet); }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.agent-core { position: absolute; display: grid; width: 78px; height: 78px; left: 50%; top: 50%; place-items: center; color: #12150e; background: var(--lime); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 50px rgba(183,255,99,.25); font: 600 18px var(--font-mono); }
.agent-core b { position: absolute; inset: -10px; border: 1px dashed rgba(183,255,99,.45); border-radius: 50%; animation: orbitSpin 8s linear infinite; }
.orbit-label { position: absolute; color: #69717c; font: 400 7px var(--font-mono); letter-spacing: .08em; }
.label-plan { left: 0; top: 106px; }.label-act { right: 8px; top: 58px; }.label-learn { right: 24px; bottom: 40px; }

.site-stack {
  position: absolute;
  z-index: 2;
  width: 270px;
  height: 220px;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
}
.site-sheet { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 12px 12px 0 0; background: #141823; box-shadow: 0 18px 40px rgba(0,0,0,.32); }
.sheet-three { transform: translate(30px, -22px) rotate(5deg); opacity: .28; }
.sheet-two { transform: translate(-25px, -11px) rotate(-4deg); opacity: .48; }
.sheet-one { padding: 14px; overflow: hidden; background: #f1f2e9; color: #161812; }
.sheet-nav { display: flex; align-items: center; gap: 7px; }
.sheet-nav i { width: 12px; height: 12px; background: #151711; border-radius: 3px; }
.sheet-nav span { width: 34px; height: 3px; background: #b0b3a9; border-radius: 3px; }
.sheet-nav b { width: 32px; height: 10px; margin-left: auto; background: #171a13; border-radius: 8px; }
.sheet-one > strong { position: relative; z-index: 2; display: block; margin-top: 38px; font: 600 23px/1.02 var(--font-display); letter-spacing: -.06em; }
.sheet-button { width: 54px; height: 14px; margin-top: 14px; background: var(--violet); border-radius: 10px; }
.sheet-orb { position: absolute; width: 150px; height: 150px; right: -42px; bottom: -42px; background: radial-gradient(circle at 35% 30%, var(--lime), var(--violet) 60%, #141723); border-radius: 50%; filter: saturate(1.2); }

.assistant-chat {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: -52px;
  min-height: 260px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 17px 17px 0 0;
  background: rgba(9,12,17,.96);
  box-shadow: 0 22px 45px rgba(0,0,0,.35);
}
.chat-head { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.agent-avatar { display: grid; width: 28px; height: 28px; place-items: center; color: #12150e; background: var(--lime); border-radius: 9px; font: 700 12px var(--font-display); }
.chat-head strong { display: block; font-size: 9px; }
.chat-head small { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: #69717d; font: 6px var(--font-mono); }
.chat-head small i { width: 4px; height: 4px; background: var(--lime); border-radius: 50%; }
.chat-message { max-width: 82%; margin: 11px 0; padding: 9px 10px; border-radius: 9px; font-size: 8px; line-height: 1.5; }
.user-message { margin-left: auto; color: #c7cbd2; background: #242936; }
.ai-message { display: flex; gap: 7px; color: #aeb5c0; background: rgba(183,255,99,.065); border: 1px solid rgba(183,255,99,.12); }
.ai-message span { color: var(--lime); }.ai-message p { margin: 0; }
.chat-input { display: flex; align-items: center; justify-content: space-between; height: 34px; margin-top: 14px; padding: 0 8px 0 11px; color: #535a65; border: 1px solid var(--line); border-radius: 9px; font-size: 7px; }
.chat-input b { display: grid; width: 22px; height: 22px; place-items: center; color: #111; background: var(--lime); border-radius: 7px; font-size: 10px; }

/* Systems thinking */
.mind-section {
  padding: 140px 0;
  color: var(--dark-ink);
  background: var(--lime);
  overflow: hidden;
}

.mind-grid {
  position: absolute;
  inset: 0;
  opacity: 0.26;
  background-image: linear-gradient(rgba(18, 22, 13, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 22, 13, 0.16) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent);
}

.mind-layout {
  display: grid;
  grid-template-columns: 0.74fr 1.26fr;
  align-items: center;
  gap: 76px;
}

.mind-copy h2 {
  margin: 0;
  font: 500 clamp(54px, 6.6vw, 92px) / 0.92 var(--font-display);
  letter-spacing: -0.075em;
}

.mind-copy h2 em {
  color: rgba(17,19,15,.48);
  font-style: normal;
}

.mind-lead {
  max-width: 520px;
  margin: 30px 0 0;
  color: rgba(17, 19, 15, 0.72);
  font-size: 15px;
  line-height: 1.75;
}

.mind-quote {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid rgba(17,19,15,.2);
}

.mind-quote > span {
  font: 500 40px/0.8 Georgia, serif;
}

.mind-quote p {
  max-width: 390px;
  margin: 0;
  font: 600 14px/1.55 var(--font-display);
}

.thinking-system {
  position: relative;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 24px;
  background: #0b0e13;
  box-shadow: 0 45px 80px rgba(34, 48, 18, 0.22);
  overflow: hidden;
}

.thinking-top,
.thinking-log {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: #666e78;
  border-bottom: 1px solid var(--line);
  font: 400 8px/1 var(--font-mono);
  letter-spacing: .08em;
}

.thinking-status { display: flex; align-items: center; gap: 6px; color: var(--lime); }
.thinking-status i { width: 5px; height: 5px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 8px var(--lime); }
.thinking-canvas { position: relative; height: 500px; background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 28px 28px; overflow: hidden; }
.thinking-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mind-path { fill: none; stroke: url(#mindLine); stroke-width: 1.3; stroke-dasharray: 6 7; opacity: .5; animation: flowDash 5s linear infinite; }
.mind-path-two { animation-delay: -1s; }.mind-path-three { animation-delay: -2s; }
.thought-node { position: absolute; min-width: 108px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: #d7dbe0; background: #11151d; box-shadow: 0 14px 24px rgba(0,0,0,.24); }
.thought-node small { display: block; margin-bottom: 7px; color: var(--lime); font: 400 7px var(--font-mono); }
.thought-node strong { display: block; font: 600 10px var(--font-display); }
.thought-node span { display: block; margin-top: 3px; color: #676f7a; font: 400 7px var(--font-mono); }
.tn-question { left: 3%; top: 17%; }.tn-model { left: 5%; bottom: 14%; }.tn-build { right: 3%; top: 15%; }.tn-test { right: 2%; bottom: 15%; }.tn-refine { left: 42%; bottom: 4%; }
.central-mind { position: absolute; display: grid; width: 118px; height: 118px; left: 50%; top: 49%; place-content: center; text-align: center; color: var(--lime); border: 1px solid rgba(183,255,99,.35); border-radius: 50%; background: radial-gradient(circle, rgba(183,255,99,.15), #0b0e13 70%); transform: translate(-50%,-50%); box-shadow: 0 0 50px rgba(183,255,99,.1); }
.central-mind > span { font: 500 22px var(--font-mono); letter-spacing: .08em; }.central-mind small { margin-top: 5px; color: #69717b; font: 400 6px var(--font-mono); letter-spacing: .1em; }
.central-mind i,.central-mind b { position: absolute; inset: -15px; border: 1px dashed rgba(183,255,99,.22); border-radius: 50%; animation: orbitSpin 18s linear infinite; }.central-mind b { inset: -34px; border-color: rgba(123,108,255,.19); animation-duration: 28s; animation-direction: reverse; }
.thinking-log { min-height: 48px; justify-content: flex-start; gap: 14px; border-top: 1px solid var(--line); border-bottom: 0; }
.thinking-log p { display: flex; align-items: center; gap: 6px; margin: 0; color: #8d949e; }.thinking-log p i { color: var(--lime); font-style: normal; }.thinking-log b { margin-left: auto; color: var(--lime); font-weight: 400; }

/* Product lab */
.lab-section {
  padding: 150px 0;
  background: #0a0c12;
}

.product-lab {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #0d1017;
  overflow: hidden;
  box-shadow: 0 50px 90px rgba(0,0,0,.28);
}

.lab-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}

.lab-tab {
  position: relative;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  color: #6f7681;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}

.lab-tab:last-child { border-right: 0; }
.lab-tab span { font: 400 8px var(--font-mono); color: #4b515b; }
.lab-tab::after { position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px; content: ""; background: var(--lime); transition: right .35s ease; }
.lab-tab.active { color: var(--ink); background: rgba(255,255,255,.025); }.lab-tab.active::after { right: 0; }.lab-tab.active span { color: var(--lime); }

.lab-stage {
  display: grid;
  grid-template-columns: 0.36fr 0.64fr;
  min-height: 620px;
}

.lab-copy-panel {
  position: relative;
  z-index: 3;
  padding: 70px 48px;
  border-right: 1px solid var(--line);
}

.lab-label { color: var(--lime); font: 400 9px var(--font-mono); letter-spacing: .13em; }
.lab-copy-panel h3 { max-width: 330px; margin: 25px 0 18px; font: 500 42px/1.03 var(--font-display); letter-spacing: -.06em; }
.lab-copy-panel > p { max-width: 360px; margin: 0; color: #8d949f; font-size: 14px; line-height: 1.75; }
.lab-copy-panel ul { display: grid; gap: 13px; margin: 34px 0 0; padding: 0; list-style: none; }
.lab-copy-panel li { display: flex; align-items: center; gap: 10px; color: #bdc2ca; font-size: 12px; }
.lab-copy-panel li i { display: grid; width: 18px; height: 18px; place-items: center; color: var(--lime); border: 1px solid rgba(183,255,99,.24); border-radius: 50%; background: rgba(183,255,99,.06); font: 500 8px var(--font-mono); }
.lab-index { position: absolute; left: 48px; right: 48px; bottom: 45px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; color: #58606b; font: 400 9px var(--font-mono); }
.lab-index span { color: var(--lime); }.lab-index i { height: 1px; background: linear-gradient(90deg,var(--lime) 25%,var(--line) 25%); }

.lab-preview {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.preview-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 34px 34px; }
.preview-glow { position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle,rgba(123,108,255,.22),transparent 67%); filter: blur(18px); transition: background .5s ease; }
.lab-preview[data-mode="mobile"] .preview-glow { background: radial-gradient(circle,rgba(123,108,255,.24),transparent 67%); }
.lab-preview[data-mode="web"] .preview-glow { background: radial-gradient(circle,rgba(105,228,255,.18),transparent 67%); }
.lab-preview[data-mode="agent"] .preview-glow { background: radial-gradient(circle,rgba(183,255,99,.16),transparent 67%); }
.lab-preview[data-mode="assistant"] .preview-glow { background: radial-gradient(circle,rgba(255,126,181,.15),transparent 67%); }

.preview-device { position: relative; z-index: 2; display: none; width: 100%; height: 100%; place-items: center; animation: previewIn .45s cubic-bezier(.2,.8,.2,1); }
.lab-preview[data-mode="mobile"] .preview-mobile,.lab-preview[data-mode="web"] .preview-web,.lab-preview[data-mode="agent"] .preview-agent,.lab-preview[data-mode="assistant"] .preview-assistant { display: grid; }
@keyframes previewIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.device-frame { position: relative; width: 270px; height: 540px; padding: 9px; border: 1px solid rgba(255,255,255,.25); border-radius: 45px; background: #080a0d; box-shadow: 0 45px 70px rgba(0,0,0,.55),inset 0 0 0 2px #242833; transform: rotate(5deg); }
.device-island { position: absolute; z-index: 3; top: 18px; left: 50%; width: 80px; height: 22px; background: #08090b; border-radius: 20px; transform: translateX(-50%); }
.device-ui { height: 100%; padding: 52px 18px 22px; color: #141711; background: linear-gradient(150deg,#f4f5ed,#e0e7d6); border-radius: 36px; overflow: hidden; }
.device-greeting small { display: block; color: #8a9083; font: 500 7px var(--font-mono); letter-spacing: .1em; }.device-greeting strong { display: block; margin-top: 8px; font: 600 19px/1.1 var(--font-display); letter-spacing: -.04em; }
.device-hero-card { position: relative; min-height: 155px; margin-top: 22px; padding: 18px; color: white; background: radial-gradient(circle at 85% 20%,rgba(183,255,99,.55),transparent 28%),linear-gradient(145deg,#6c60e9,#171a24 72%); border-radius: 22px; overflow: hidden; }
.device-hero-card > span { color: rgba(255,255,255,.55); font: 500 7px var(--font-mono); letter-spacing: .12em; }.device-hero-card strong { display: block; margin-top: 11px; font: 500 23px var(--font-display); }.device-hero-card > i { position: absolute; right: 17px; bottom: 18px; font: 500 25px var(--font-display); font-style: normal; }.device-hero-card > div { position: absolute; left: 18px; right: 18px; bottom: 21px; height: 3px; background: rgba(255,255,255,.17); border-radius: 4px; }.device-hero-card > div b { display: block; width: 72%; height: 100%; background: var(--lime); border-radius: 4px; }
.device-actions { display: flex; justify-content: space-between; margin: 19px 4px; }.device-actions i { display: grid; width: 43px; height: 43px; place-items: center; color: #151811; background: rgba(255,255,255,.74); border-radius: 14px; box-shadow: 0 5px 14px rgba(0,0,0,.06); font-style: normal; }
.device-task { display: flex; align-items: center; gap: 10px; padding: 12px; background: rgba(255,255,255,.78); border-radius: 14px; }.device-task > span { width: 31px; height: 31px; background: #d1ff9c; border-radius: 9px; }.device-task p { margin: 0; }.device-task small { display:block;color:#8b9085;font-size:6px; }.device-task strong { display:block;margin-top:3px;font-size:9px; }.device-task b { margin-left:auto; }
.device-tabs { position: absolute; left: 35px; right: 35px; bottom: 29px; display: flex; justify-content: space-between; }.device-tabs i { width: 9px; height: 9px; background: #adb2a7; border-radius: 3px; }.device-tabs i:first-child { background: #171a13; }
.device-float { position: absolute; padding: 10px 13px; color: #9ea5af; border: 1px solid var(--line-strong); border-radius: 11px; background: rgba(16,19,27,.9); box-shadow:0 18px 35px rgba(0,0,0,.35); backdrop-filter:blur(10px); font:400 8px var(--font-mono); }
.device-float strong { color: white; }.float-one { left: 8%; top: 24%; }.float-two { right: 7%; bottom: 24%; display:flex;align-items:center;gap:6px; }.float-two i { width:5px;height:5px;background:var(--lime);border-radius:50%;box-shadow:0 0 8px var(--lime); }

.web-frame { width: 88%; border: 1px solid rgba(255,255,255,.17); border-radius: 15px; background: #0b0e14; box-shadow:0 40px 70px rgba(0,0,0,.48); overflow:hidden; transform:perspective(1000px) rotateY(-4deg); }
.web-top { height:38px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;border-bottom:1px solid var(--line);color:#676e79;font:400 7px var(--font-mono); }.web-top>div{display:flex;gap:5px}.web-top i{width:6px;height:6px;background:#3d444e;border-radius:50%}.web-top span{padding:6px 25px;border:1px solid rgba(255,255,255,.06);border-radius:5px}.web-top b{justify-self:end;color:#858c96;font-weight:400}.web-layout{display:grid;grid-template-columns:54px 1fr;min-height:410px}.web-layout aside{display:flex;flex-direction:column;align-items:center;gap:19px;padding:15px 0;border-right:1px solid var(--line)}.web-layout aside strong{display:grid;width:27px;height:27px;place-items:center;color:#111;background:var(--lime);border-radius:8px;font:700 12px var(--font-display)}.web-layout aside i{width:10px;height:10px;border:1px solid #4b525e;border-radius:3px}.web-layout aside span{width:25px;height:25px;margin-top:auto;margin-bottom:5px;background:#292e38;border-radius:50%}.web-content{padding:26px}.web-title{display:flex;justify-content:space-between;align-items:end}.web-title small{display:block;color:#636a75;font:400 7px var(--font-mono);letter-spacing:.1em}.web-title strong{display:block;margin-top:7px;font:500 24px var(--font-display);letter-spacing:-.04em}.web-title button{padding:9px 12px;color:#15170f;border:0;border-radius:7px;background:var(--lime);font-size:7px;font-weight:700}.web-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:25px}.web-metrics>div{padding:13px;border:1px solid var(--line);border-radius:10px;background:#10141c}.web-metrics small{display:block;color:#6b727d;font-size:7px}.web-metrics strong{display:block;margin-top:11px;font:500 22px var(--font-display)}.web-metrics em{color:var(--lime);font:400 6px var(--font-mono);font-style:normal}.web-data{display:grid;grid-template-columns:1.4fr .6fr;gap:9px;margin-top:9px}.web-chart,.web-side-list{min-height:155px;padding:13px;border:1px solid var(--line);border-radius:10px;background:#10141c}.web-chart>span,.web-side-list>span{color:#727984;font-size:7px}.web-chart svg{width:100%;height:105px;margin-top:12px}.web-chart path{fill:none;stroke:var(--cyan);stroke-width:2;filter:drop-shadow(0 0 6px rgba(105,228,255,.4))}.web-side-list{display:flex;flex-direction:column;gap:12px}.web-side-list i{height:17px;background:linear-gradient(90deg,rgba(183,255,99,.14) 20%,rgba(255,255,255,.04) 20%);border-radius:4px}

.agent-terminal { width: 84%; border:1px solid rgba(183,255,99,.22);border-radius:14px;background:rgba(5,8,8,.96);box-shadow:0 35px 70px rgba(0,0,0,.5),0 0 50px rgba(183,255,99,.06);overflow:hidden; }
.terminal-head{height:42px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 14px;border-bottom:1px solid var(--line);color:#646c75;font:400 7px var(--font-mono)}.terminal-head>div{display:flex;gap:5px}.terminal-head i{width:6px;height:6px;background:#3d444c;border-radius:50%}.terminal-head b{justify-self:end;color:var(--lime);font-size:6px;letter-spacing:.1em}.terminal-body{min-height:390px;padding:25px;font:400 9px/1.5 var(--font-mono)}.terminal-body p{display:flex;gap:11px;margin:0 0 17px;color:#87909a}.terminal-body p>span{color:#414852}.terminal-body p>i{color:var(--lime);font-style:normal}.terminal-plan{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;margin:8px 0 8px 55px;padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:7px;color:#8c949d;background:#0d1114}.terminal-plan>b{display:grid;width:22px;height:22px;place-items:center;color:#5e6670;border:1px solid #343b43;border-radius:5px;font-size:7px}.terminal-plan em{color:#59616a;font-size:6px;font-style:normal;letter-spacing:.08em}.terminal-plan.active{border-color:rgba(183,255,99,.25);background:rgba(183,255,99,.04);color:#dce2d8}.terminal-plan.active>b{color:#12150e;background:var(--lime);border-color:var(--lime)}.terminal-plan.active em{color:var(--lime)}.terminal-cursor b{display:inline-block;width:5px;height:11px;background:var(--lime);animation:cursorBlink .7s step-end infinite}.agent-status-card{position:absolute;right:5%;bottom:11%;width:140px;padding:13px;border:1px solid var(--line-strong);border-radius:11px;background:rgba(17,21,28,.9);box-shadow:0 18px 35px rgba(0,0,0,.4);backdrop-filter:blur(10px)}.agent-status-card>span{color:#656d77;font:400 6px var(--font-mono);letter-spacing:.1em}.agent-status-card strong{display:block;margin:8px 0;font:500 20px var(--font-display)}.agent-status-card>div{height:3px;background:#292f37;border-radius:3px}.agent-status-card>div i{display:block;width:75%;height:100%;background:var(--lime);border-radius:3px}

.assistant-frame { width:82%;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:#f0f2ea;color:#161912;box-shadow:0 40px 70px rgba(0,0,0,.48);overflow:hidden; }
.assistant-head{height:60px;display:flex;align-items:center;gap:10px;padding:0 17px;border-bottom:1px solid rgba(18,21,15,.1)}.assistant-logo{display:grid;width:32px;height:32px;place-items:center;color:#12150e;background:var(--lime);border-radius:9px;font:700 14px var(--font-display)}.assistant-head strong{display:block;font-size:10px}.assistant-head small{display:flex;align-items:center;gap:5px;margin-top:4px;color:#7a8075;font-size:6px}.assistant-head small i{width:4px;height:4px;background:#58a83f;border-radius:50%}.assistant-head>b{margin-left:auto;color:#969c92;font-size:9px}.assistant-body{min-height:390px;padding:24px}.assistant-intro{text-align:center}.assistant-intro>span{display:grid;width:38px;height:38px;margin:0 auto 11px;place-items:center;color:#fff;background:linear-gradient(135deg,#7567ff,#b56cff);border-radius:12px}.assistant-intro strong{display:block;font:600 17px var(--font-display)}.assistant-intro p{max-width:310px;margin:8px auto 0;color:#7e8579;font-size:8px;line-height:1.55}.assistant-user{max-width:60%;margin:24px 0 13px auto;padding:10px 12px;color:#fff;background:#171b14;border-radius:11px 11px 3px 11px;font-size:8px}.assistant-answer{display:flex;gap:8px;max-width:82%;padding:11px;background:#fff;border:1px solid rgba(18,21,15,.08);border-radius:3px 11px 11px 11px;font-size:8px;line-height:1.55;box-shadow:0 8px 18px rgba(30,35,25,.05)}.assistant-answer>span{color:#7769f5}.assistant-answer p{margin:0}.assistant-answer button{margin:9px 5px 0 0;padding:6px 8px;color:#555c50;border:1px solid rgba(18,21,15,.12);border-radius:6px;background:#f6f7f2;font-size:6px}.assistant-box{height:44px;display:flex;align-items:center;justify-content:space-between;margin-top:23px;padding:0 8px 0 13px;color:#9aa095;border:1px solid rgba(18,21,15,.14);border-radius:11px;background:#fff;font-size:7px}.assistant-box b{display:grid;width:28px;height:28px;place-items:center;color:#fff;background:#171a13;border-radius:8px}

/* Process */
.process-section {
  padding: 150px 0;
  background: var(--warm);
  color: var(--dark-ink);
}

.process-intro {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 75px;
}
.process-intro .eyebrow { grid-column: 1 / -1; margin-bottom: -46px; color:rgba(17,19,15,.58); }.process-intro .eyebrow>span{background:#1a1d16}.process-intro .eyebrow>span::after{background:#1a1d16;box-shadow:none}.process-intro>p:last-child{color:rgba(17,19,15,.62)}
.process-list { border-top:1px solid rgba(17,19,15,.16); }
.process-step { position:relative;display:grid;grid-template-columns:70px 1.05fr 1fr 90px;align-items:center;gap:30px;min-height:170px;border-bottom:1px solid rgba(17,19,15,.16);transition:padding .3s ease,background .3s ease; }
.process-step:hover{padding:0 16px;background:rgba(255,255,255,.36)}
.step-number{font:400 10px var(--font-mono);color:rgba(17,19,15,.45)}.step-title small{display:block;margin-bottom:8px;color:rgba(17,19,15,.45);font:500 8px var(--font-mono);letter-spacing:.12em}.step-title h3{margin:0;font:500 28px var(--font-display);letter-spacing:-.05em}.process-step>p{max-width:390px;margin:0;color:rgba(17,19,15,.58);font-size:13px;line-height:1.65}
.step-icon{position:relative;width:62px;height:62px;justify-self:end;border:1px solid rgba(17,19,15,.18);border-radius:50%}.step-icon i{position:absolute;width:7px;height:7px;background:#1a1d16;border-radius:50%}.step-icon i:nth-child(1){left:14px;top:25px}.step-icon i:nth-child(2){right:13px;top:14px}.step-icon i:nth-child(3){right:15px;bottom:12px}.step-icon b{position:absolute;left:18px;right:17px;top:28px;height:1px;background:#1a1d16;transform:rotate(-23deg)}
.icon-design{border-radius:15px;transform:rotate(5deg)}.icon-design i:first-child{inset:12px;background:transparent;border:1px solid rgba(17,19,15,.35);border-radius:8px}.icon-design i:nth-child(2){width:22px;height:22px;left:28px;top:27px;background:var(--violet);border-radius:7px}.icon-design b{width:17px;height:17px;left:9px;top:10px;background:var(--lime);border-radius:4px;transform:none}
.icon-build{display:grid;place-items:center;border-radius:14px}.icon-build span{font:500 13px var(--font-mono)}.icon-build i{width:5px;height:5px;left:auto;right:8px;top:8px;background:var(--lime);box-shadow:0 0 0 4px rgba(17,19,15,.08)}
.icon-grow{border-radius:15px}.icon-grow i{bottom:12px;top:auto;width:8px;border-radius:2px 2px 0 0}.icon-grow i:first-child{left:12px;height:14px}.icon-grow i:nth-child(2){left:27px;height:26px}.icon-grow i:nth-child(3){right:11px;height:38px;background:var(--violet)}.icon-grow b{display:none}

/* Examples */
.examples-section { padding:150px 0;background:#090b10; }
.example-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.example-card{min-height:540px;padding:34px}.example-card h3{max-width:330px;margin:19px 0 14px;font:500 32px/1.08 var(--font-display);letter-spacing:-.055em}.example-card>p{max-width:340px;margin:0;color:#858c97;font-size:13px;line-height:1.65}.example-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}.example-tags span{padding:6px 9px;color:#777f8a;border:1px solid var(--line);border-radius:20px;font:400 7px var(--font-mono);letter-spacing:.06em}.example-art{position:absolute;left:34px;right:34px;bottom:-20px;height:230px;border:1px solid var(--line-strong);border-radius:18px 18px 0 0;background:#0a0d13;box-shadow:0 25px 50px rgba(0,0,0,.4);overflow:hidden}
.art-calendar{padding:16px;background:#f0f1e9;color:#191b15;transform:rotate(-2deg)}.calendar-head{display:flex;align-items:center;justify-content:space-between}.calendar-head i{width:24px;height:24px;background:#171a14;border-radius:7px}.calendar-head span{font:600 11px var(--font-display)}.calendar-head b{font-size:8px;color:#999f94}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:22px}.calendar-days i{aspect-ratio:1;border-radius:7px;background:#dcdfd5}.calendar-days i.selected{background:var(--violet);box-shadow:0 5px 12px rgba(123,108,255,.25)}.calendar-slot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:10px;background:#fff;border-radius:9px;font-size:8px}.calendar-slot strong{color:#4c8b33;font-size:7px}
.art-docs{background:radial-gradient(circle at 50% 50%,rgba(123,108,255,.15),transparent 55%),#0a0d13}.doc{position:absolute;width:130px;height:170px;padding:15px;border:1px solid var(--line-strong);border-radius:9px;background:#151923;box-shadow:0 18px 30px rgba(0,0,0,.32)}.doc-a{left:17%;top:26px;transform:rotate(-8deg)}.doc-b{right:17%;top:12px;transform:rotate(7deg)}.doc i{display:block;width:28px;height:28px;margin-bottom:18px;background:rgba(183,255,99,.15);border:1px solid rgba(183,255,99,.25);border-radius:7px}.doc span{display:block;height:5px;margin:10px 0;background:#343a45;border-radius:5px}.doc span:nth-of-type(2){width:70%}.doc span:nth-of-type(3){width:85%}.doc-scan{position:absolute;z-index:3;left:12%;right:12%;top:50%;height:1px;background:var(--lime);box-shadow:0 0 18px 5px rgba(183,255,99,.25);animation:scan 2.7s ease-in-out infinite alternate}@keyframes scan{from{transform:translateY(-65px)}to{transform:translateY(65px)}}.decision-chip{position:absolute;z-index:4;left:50%;bottom:20px;display:flex;align-items:center;gap:9px;width:200px;padding:10px;color:#d9dde2;border:1px solid rgba(183,255,99,.23);border-radius:10px;background:rgba(15,19,24,.9);transform:translateX(-50%);backdrop-filter:blur(8px)}.decision-chip>span{display:grid;width:27px;height:27px;place-items:center;color:#111;background:var(--lime);border-radius:7px}.decision-chip small{display:block;color:#69717c;font:400 6px var(--font-mono);letter-spacing:.08em}.decision-chip strong{display:block;margin-top:4px;font-size:8px}
.art-control{padding:20px;background:linear-gradient(145deg,#131721,#080a0e)}.control-ring{position:absolute;left:25px;top:30px;display:grid;width:120px;height:120px;place-items:center;border:10px solid #242a35;border-top-color:var(--cyan);border-right-color:var(--cyan);border-radius:50%;transform:rotate(18deg)}.control-ring span{transform:rotate(-18deg);font:500 27px var(--font-display)}.control-ring small{font-size:11px}.control-ring i{position:absolute;inset:-11px;border:1px dashed rgba(105,228,255,.25);border-radius:50%;animation:orbitSpin 18s linear infinite}.control-bars{position:absolute;right:24px;top:30px;width:155px;height:120px;display:flex;align-items:end;gap:7px}.control-bars i{flex:1;background:linear-gradient(var(--violet),rgba(123,108,255,.12));border-radius:4px 4px 0 0}.control-bars i:nth-child(1){height:36%}.control-bars i:nth-child(2){height:58%}.control-bars i:nth-child(3){height:45%}.control-bars i:nth-child(4){height:82%;background:linear-gradient(var(--lime),rgba(183,255,99,.12))}.control-bars i:nth-child(5){height:67%}.control-bars i:nth-child(6){height:91%}.control-label{position:absolute;left:24px;right:24px;bottom:22px;display:flex;align-items:center;justify-content:space-between;padding:11px;color:#727a85;border:1px solid var(--line);border-radius:8px;font:400 6px var(--font-mono);letter-spacing:.08em}.control-label b{width:6px;height:6px;background:var(--lime);border-radius:50%;box-shadow:0 0 8px var(--lime)}
.examples-note{margin:24px 0 0;color:#525964;text-align:right;font:400 8px var(--font-mono);letter-spacing:.06em}

/* Principles */
.principles-section{padding:140px 0;background:#10131a}.principles-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px}.principles-title{position:sticky;top:140px;height:max-content}.principles-title h2 span{color:#6d7580}.principles-list{border-top:1px solid var(--line)}.principles-list article{display:grid;grid-template-columns:50px 1fr;gap:20px;padding:34px 0;border-bottom:1px solid var(--line)}.principles-list article>span{color:var(--lime);font:400 9px var(--font-mono)}.principles-list h3{margin:0;font:500 25px var(--font-display);letter-spacing:-.04em}.principles-list p{max-width:520px;margin:10px 0 0;color:#838b96;font-size:13px;line-height:1.7}

/* FAQ */
.faq-section{padding:140px 0;background:#090b10}.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:100px}.faq-title p:last-child{margin-top:25px}.faq-list{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item button{width:100%;min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0;color:var(--ink);border:0;background:transparent;text-align:left;cursor:pointer;font:500 19px var(--font-display)}.faq-item button i{position:relative;width:28px;height:28px;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:50%}.faq-item button i::before,.faq-item button i::after{position:absolute;left:50%;top:50%;width:9px;height:1px;content:"";background:#aab0b9;transform:translate(-50%,-50%);transition:transform .3s ease}.faq-item button i::after{transform:translate(-50%,-50%) rotate(90deg)}.faq-item.open button i::after{transform:translate(-50%,-50%) rotate(0);opacity:0}.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}.faq-answer>p{min-height:0;margin:0;overflow:hidden;color:#89919c;font-size:13px;line-height:1.75}.faq-item.open .faq-answer{grid-template-rows:1fr}.faq-item.open .faq-answer>p{padding:0 60px 28px 0}

/* Contact */
.contact-section{padding:140px 0;color:var(--dark-ink);background:var(--lime);overflow:hidden}.contact-orb{position:absolute;width:700px;height:700px;left:-250px;bottom:-430px;border:1px solid rgba(17,19,15,.15);border-radius:50%}.contact-orb::before,.contact-orb::after{position:absolute;inset:80px;content:"";border:1px solid rgba(17,19,15,.12);border-radius:50%}.contact-orb::after{inset:170px}.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:100px}.contact-copy h2{margin:0;font:500 clamp(56px,6vw,86px)/.94 var(--font-display);letter-spacing:-.075em}.contact-copy>p:not(.eyebrow){max-width:520px;margin:28px 0 0;color:rgba(17,19,15,.66);font-size:15px;line-height:1.7}.contact-meta{display:flex;gap:35px;margin-top:42px;padding-top:28px;border-top:1px solid rgba(17,19,15,.18)}.contact-meta>div{display:flex;align-items:center;gap:10px}.contact-meta>div>span{display:grid;width:32px;height:32px;place-items:center;border:1px solid rgba(17,19,15,.2);border-radius:50%;font:400 8px var(--font-mono)}.contact-meta p{margin:0}.contact-meta small{display:block;color:rgba(17,19,15,.48);font:400 7px var(--font-mono);letter-spacing:.1em}.contact-meta strong{display:block;margin-top:4px;font:600 10px var(--font-body)}
.project-form,.brief-result{position:relative;padding:34px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:#0d1016;color:var(--ink);box-shadow:0 40px 80px rgba(35,50,17,.25)}.form-top,.brief-result-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:29px;padding-bottom:17px;color:#666e78;border-bottom:1px solid var(--line);font:400 8px var(--font-mono);letter-spacing:.1em}.form-top i{width:6px;height:6px;background:var(--lime);border-radius:50%;box-shadow:0 0 8px var(--lime)}.project-form label{display:block;margin-top:19px}.project-form label>span{display:block;margin-bottom:8px;color:#8a919b;font-size:10px}.project-form input,.project-form textarea,.project-form select{width:100%;padding:13px 0;color:#e6e8eb;border:0;border-bottom:1px solid rgba(255,255,255,.14);outline:none;background:transparent;border-radius:0;font-size:13px;transition:border-color .2s ease;resize:none}.project-form input:focus,.project-form textarea:focus,.project-form select:focus{border-color:var(--lime)}.project-form input::placeholder,.project-form textarea::placeholder{color:#464d57}.project-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8b929c 50%),linear-gradient(135deg,#8b929c 50%,transparent 50%);background-position:calc(100% - 12px) 52%,calc(100% - 7px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.project-form select option{color:#161912;background:#fff}.form-submit{width:100%;margin-top:27px;background:var(--lime);color:#11140d}.form-submit .envelope-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.form-note{margin:14px 0 0;color:#565e68;font-size:8px;line-height:1.5;text-align:center}.brief-result{align-self:stretch}.brief-result[hidden]{display:none}.brief-result-head{color:var(--lime)}.brief-result-head button{color:#8e959f;border:0;background:transparent;font-size:25px;cursor:pointer}.brief-result h3{margin:0 0 20px;font:500 32px var(--font-display);letter-spacing:-.05em}.brief-result pre{min-height:180px;padding:18px;color:#aeb5bf;border:1px solid var(--line);border-radius:12px;background:#080a0e;white-space:pre-wrap;font:400 10px/1.8 var(--font-mono)}.brief-result .button{width:100%;margin-top:10px;background:var(--lime);color:#10130d}.brief-result>p{min-height:18px;margin:10px 0 0;color:var(--lime);text-align:center;font-size:9px}
.form-honey{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.form-submit:disabled{cursor:wait;opacity:.7;transform:none}.form-status{min-height:18px;margin:12px 0 0;color:var(--lime);font-size:9px;text-align:center}.form-status.is-error{color:#ff938f}.success-mark{display:grid;width:70px;height:70px;margin:8px 0 24px;place-items:center;color:#11140d;background:var(--lime);border-radius:22px;box-shadow:0 15px 35px rgba(183,255,99,.18);font:600 30px var(--font-display)}.brief-result .success-copy{max-width:460px;min-height:0;margin:0 0 26px;color:#8d949e;text-align:left;font-size:13px;line-height:1.75}

/* Footer */
.site-footer{padding:65px 0 26px;background:#07090d}.footer-main{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding-bottom:50px}.footer-brand{font-size:29px}.footer-brand .brand-mark{width:35px;height:35px}.footer-main>p{margin:0;color:#737b87;font-size:16px;line-height:1.65;text-align:center}.footer-top{justify-self:end;display:flex;align-items:center;gap:11px;color:#8a919c;font:400 14px/1.5 var(--font-mono);letter-spacing:.1em}.footer-top span{display:grid;width:31px;height:31px;place-items:center;border:1px solid var(--line);border-radius:50%;transition:background .2s ease,color .2s ease}.footer-top:hover span{color:#111;background:var(--lime)}.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-top:22px;color:#4c535e;border-top:1px solid var(--line);font:400 14px/1.6 var(--font-mono);letter-spacing:.07em}.footer-status{display:flex;align-items:center;gap:6px}.footer-status i{width:5px;height:5px;background:var(--lime);border-radius:50%;box-shadow:0 0 8px var(--lime)}

/* Responsive */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 780px; padding-top: 28px; }
  .hero-visual { width: min(100%, 760px); min-height: 560px; margin: 0 auto; }
  .system-window { min-height: 490px; }
  .capability-strip { margin-top: 5px; }
  .service-mobile { grid-column: span 7; }.service-web { grid-column: span 5; }.service-agent,.service-sites { grid-column: span 6; }.service-assistant { grid-column: span 12; }
  .service-assistant .card-copy { width: 48%; }.assistant-chat { left: auto; right: 40px; width: 44%; bottom: -50px; }
  .mind-layout { grid-template-columns: 1fr; }.mind-copy { max-width: 720px; }.thinking-system { width: min(100%, 780px); margin-left: auto; }
  .lab-stage { grid-template-columns: .42fr .58fr; }.lab-copy-panel { padding: 55px 34px; }.lab-copy-panel h3 { font-size: 36px; }.lab-index { left:34px;right:34px }.web-frame,.agent-terminal,.assistant-frame{width:92%}.device-float{display:none}
  .example-grid { grid-template-columns: 1fr 1fr; }.example-card:last-child { grid-column: 1 / -1; }.example-card:last-child .example-art { left:50%;width:45% }.example-card:last-child h3,.example-card:last-child>p { max-width:48% }
  .contact-layout { gap:55px }.contact-meta { gap:18px;flex-direction:column }
}

@media (max-width: 860px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
  .nav-shell { width:calc(100% - 24px);padding-left:14px }.menu-toggle { display:block }.nav-cta { display:none }.email-link{width:38px;height:38px}
  .nav-menu { position:fixed;z-index:-1;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;margin:0;padding:90px 30px 40px;background:rgba(8,10,15,.97);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .25s ease,transform .25s ease }.nav-menu a{width:100%;padding:13px 0;font:500 33px var(--font-display);letter-spacing:-.04em}.nav-menu a::after{display:none}.menu-open .nav-menu{opacity:1;pointer-events:auto;transform:none}.menu-open .menu-toggle>span:first-child{transform:translateY(6px) rotate(45deg)}.menu-open .menu-toggle>span:nth-child(2){opacity:0}.menu-open .menu-toggle>span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .hero { padding-top:135px }.hero h1 { font-size:clamp(58px,13vw,84px) }.hero-lead { font-size:15px }.hero-visual { min-height:510px }.floating-pill{display:none}.capability-strip{overflow:hidden;justify-content:flex-start}.capability-strip span:nth-of-type(n+4),.capability-strip i:nth-of-type(n+4){display:none}
  .section-heading,.process-intro { grid-template-columns:1fr;gap:25px }.process-intro .eyebrow{grid-column:auto;margin-bottom:0}.bento-grid{grid-auto-rows:380px}.service-mobile,.service-web,.service-agent,.service-sites,.service-assistant{grid-column:span 12}.service-web .card-copy,.service-agent .card-copy,.service-sites .card-copy{width:55%}.service-assistant .card-copy{width:48%}.services,.lab-section,.process-section,.examples-section,.principles-section,.faq-section,.contact-section{padding:105px 0}
  .mind-section { padding:105px 0 }.mind-layout{gap:55px}.thinking-canvas{height:460px}
  .lab-tabs{grid-template-columns:1fr 1fr}.lab-tab:nth-child(2){border-right:0}.lab-tab:nth-child(-n+2){border-bottom:1px solid var(--line)}.lab-stage{grid-template-columns:1fr}.lab-copy-panel{min-height:440px;border-right:0;border-bottom:1px solid var(--line)}.lab-preview{min-height:610px}
  .process-step{grid-template-columns:50px 1fr 70px;gap:20px;padding:28px 0}.process-step>p{grid-column:2 / 3}.step-icon{grid-column:3;grid-row:1 / 3}
  .example-grid{grid-template-columns:1fr}.example-card:last-child{grid-column:auto}.example-card:last-child .example-art{left:34px;width:auto}.example-card:last-child h3,.example-card:last-child>p{max-width:340px}
  .principles-layout,.faq-layout{grid-template-columns:1fr;gap:55px}.principles-title{position:relative;top:auto}
  .contact-layout{grid-template-columns:1fr;gap:60px}.project-form{max-width:680px;width:100%;justify-self:end}
}

@media (max-width: 600px) {
  :root { --radius:20px }
  .container { width:calc(100% - 26px) }
  .site-header{padding-top:10px}.nav-shell{min-height:54px;border-radius:15px}.brand{font-size:19px}.brand-mark{width:25px;height:25px}
  .hero{min-height:auto;padding:125px 0 28px;background-size:44px 44px,44px 44px,auto,auto}.hero h1{font-size:clamp(53px,15.5vw,72px);line-height:.93}.hero-lead{margin-top:25px;line-height:1.65}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .button{width:100%}.hero-proof{gap:12px}.hero-proof>span{width:46%}
  .hero-visual{min-height:430px;width:112%;margin-left:-6%}.system-window{min-height:390px;border-radius:18px;transform:none!important}.window-topbar{height:40px}.window-title{font-size:6px}.system-body{min-height:350px;grid-template-columns:37px 1fr}.system-sidebar{padding-top:11px}.mini-logo{width:21px;height:21px;font-size:10px}.side-icon{width:22px;height:22px}.system-canvas{grid-template-rows:30px 1fr 35px}.flow-stage{min-height:284px}.flow-node{min-width:90px;padding:7px;gap:6px}.flow-node small{font-size:5px}.flow-node strong{font-size:7px}.node-icon{width:22px;height:22px;font-size:9px}.node-input{left:2%;top:9%}.node-brain{left:33%;top:38%;min-width:116px}.node-app{right:1%;top:10%}.node-agent{right:1%;bottom:7%}.brain-pulse{width:27px;height:27px;font-size:7px}.thought-chip{font-size:5px;padding:4px}.chip-one{left:23%}.chip-two{left:17%}.chip-three{display:none}.canvas-console{font-size:6px}.capability-strip{font-size:7px;gap:12px;padding-top:18px}.capability-strip span:nth-of-type(n+3),.capability-strip i:nth-of-type(n+3){display:none}
  .section-heading h2,.process-intro h2,.faq-title h2,.principles-title h2{font-size:44px}.section-heading{margin-bottom:42px}.section-heading>p{font-size:13px}
  .bento-grid{grid-auto-rows:410px}.service-card{min-height:410px}.card-copy,.service-web .card-copy,.service-agent .card-copy,.service-sites .card-copy,.service-assistant .card-copy{width:100%;padding:27px}.card-copy p{max-width:280px}.phone-scene{right:-20px;bottom:-105px;transform:scale(.82)}.dashboard-scene{left:27px;bottom:-26px}.service-agent,.service-sites{min-height:430px}.service-assistant{min-height:490px}.assistant-chat{left:27px;right:27px;width:auto;bottom:-38px}.agent-orbit{transform:translateX(-50%) scale(.88)}.site-stack{transform:translateX(-50%) scale(.9)}
  .mind-copy h2{font-size:55px}.mind-lead{font-size:13px}.thinking-canvas{height:430px}.thought-node{min-width:86px;padding:8px}.thought-node strong{font-size:8px}.tn-question{left:2%}.tn-model{left:2%}.tn-build{right:2%}.tn-test{right:2%}.tn-refine{left:37%;bottom:3%}.central-mind{width:92px;height:92px}.central-mind>span{font-size:17px}.thinking-log{font-size:6px;gap:8px}.thinking-log span{display:none}
  .lab-tab{min-height:62px;padding:0 13px;font-size:10px}.lab-copy-panel{min-height:430px;padding:42px 27px}.lab-copy-panel h3{font-size:34px}.lab-index{left:27px;right:27px}.lab-preview{min-height:500px}.device-frame{transform:scale(.78) rotate(3deg)}.web-frame{width:112%;transform:scale(.78)}.web-content{padding:18px}.web-metrics{grid-template-columns:1fr 1fr}.web-metrics>div:last-child{display:none}.web-layout{min-height:350px}.agent-terminal{width:110%;transform:scale(.78)}.assistant-frame{width:110%;transform:scale(.8)}.agent-status-card{display:none}
  .process-step{grid-template-columns:40px 1fr;gap:15px}.process-step>p{grid-column:2}.step-icon{display:none}.step-title h3{font-size:24px}
  .example-card{min-height:520px;padding:27px}.example-card h3{font-size:28px}.example-art,.example-card:last-child .example-art{left:27px;right:27px}.control-ring{transform:scale(.8) rotate(18deg);transform-origin:left center}.control-bars{right:15px;width:130px}.doc-a{left:9%}.doc-b{right:9%}
  .principles-list h3{font-size:22px}.principles-list article{grid-template-columns:35px 1fr;gap:12px}.faq-item button{font-size:17px}.faq-item.open .faq-answer>p{padding-right:15px}
  .contact-copy h2{font-size:55px}.contact-meta{flex-direction:row;align-items:flex-start}.contact-meta>div{align-items:flex-start}.contact-meta strong{font-size:8px}.project-form,.brief-result{padding:25px;border-radius:20px}
  .footer-main{grid-template-columns:1fr auto;gap:25px}.footer-main>p{grid-column:1/-1;grid-row:2;text-align:left}.footer-bottom{flex-wrap:wrap;gap:12px}.footer-bottom>span:nth-child(2){display:none}.footer-top{font-size:0}.footer-top span{font-size:18px}
}

/* Final cosmic surface overrides */
.services,
.lab-section,
.examples-section,
.principles-section,
.faq-section {
  background-image:
    radial-gradient(circle at 12% 16%, rgba(183, 255, 99, 0.035), transparent 21%),
    radial-gradient(circle at 86% 68%, rgba(123, 108, 255, 0.05), transparent 25%),
    linear-gradient(rgba(183, 255, 99, 0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 255, 99, 0.014) 1px, transparent 1px);
  background-size: auto, auto, 74px 74px, 74px 74px;
}

@media (max-width: 1100px) {
  .orbit-window { width: min(100%, 760px); margin-inline: auto; }
}

@media (max-width: 860px) {
  .orbit-window { min-height: 528px; }
  .cosmos-scene { height: 480px; }
}

@media (max-width: 600px) {
  #matrix-canvas { opacity: 0.18; mask-image: linear-gradient(90deg, #000, transparent 75%); }
  .hero-visual { min-height: 440px; }
  .orbit-window { min-height: 430px; border-radius: 18px; transform: none!important; }
  .cosmos-scene { height: 389px; }
  .orbit-track-one { width: 104px; height: 74px; }
  .orbit-track-two { width: 166px; height: 119px; }
  .orbit-track-three { width: 232px; height: 166px; }
  .orbit-track-four { width: 300px; height: 220px; }
  .orbit-track-five { width: 372px; height: 282px; }
  .cosmic-planet span { display: none; }
  .solar-core { width: 82px; height: 82px; }
  .solar-core::before { inset: -10px; }
  .solar-core::after { inset: -20px; }
  .core-energy { width: 30px; height: 30px; font-size: 11px; }
  .solar-core strong { margin-top: 7px; font-size: 5px; }
  .solar-core small { font-size: 4px; }
  .matrix-console { left: 11px; bottom: 11px; width: 135px; padding: 7px 8px; font-size: 5px; }
  .cosmos-coordinate,
  .cosmos-legend { display: none; }
  .window-actions { gap: 5px; }
  .galactic-sound { min-width: 29px; min-height: 27px; padding: 0 7px; }
  .galactic-sound > [data-sound-label] { display: none; }
  .window-badge { padding-inline: 5px; font-size: 6px; }
}

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