/* ============================================================
   VEYRION — DESIGN SYSTEM
   Bloomberg terminal density + Linear restraint + Stripe clarity
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
img, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

:root {
  --bg: #050505;
  --bg-2: #080809;
  --surface: #0C0C0E;
  --elevated: #111114;
  --text: #FFFFFF;
  --text-2: #A1A1AA;
  --text-3: #71717A;
  --text-4: #3f3f46;
  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.14);
  --accent: #10B981;
  --accent-2: #06B6D4;
  --accent-dim: rgba(16,185,129,0.12);
  --danger: #F43F5E;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 4px;
  --nav-h: 72px;
  --max: 1200px;
  --gutter: 24px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #050505; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html:focus-within { scroll-behavior: smooth; }

/* skip link */
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 200;
  background: var(--accent); color: #050505; padding: 8px 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h); display: flex; align-items: center;
  padding: 0 var(--gutter);
  background: rgba(5,5,5,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.header__inner {
  width: 100%; max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.header__brand {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.28em; color: var(--text);
}
.header__nav { display: flex; gap: 24px; }
.header__nav a {
  font-family: var(--font-body); font-size: 11px; color: var(--text-3);
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: color .15s; padding: 4px 0;
  position: relative; white-space: nowrap;
}
.header__nav a::after {
  content: ""; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: var(--accent);
  transition: width .2s;
}
.header__nav a:hover { color: var(--text); }
.header__nav a:hover::after { width: 100%; }
.header__right { display: flex; align-items: center; gap: 20px; }
.header__status {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
  display: flex; align-items: center; gap: 8px;
}
.header__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.header__cta {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--border);
  padding: 8px 16px; transition: border-color .15s, color .15s;
}
.header__cta:hover { border-color: var(--border-2); color: var(--text); }
.header__toggle {
  display: none; width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.header__toggle span {
  display: block; width: 16px; height: 1px; background: var(--text-2);
  transition: transform .25s ease, opacity .25s ease;
}
.header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 1024px) {
  .header__nav, .header__status { display: none; }
  .header__toggle { display: flex; }
}
@media (max-width: 768px) {
  .header__cta { display: none; }
}

/* mobile nav */
.mobile-nav {
  position: relative; z-index: 49; width: 100%;
  background: var(--bg); display: flex; flex-direction: column;
  justify-content: flex-start; padding: 18px var(--gutter) 24px; gap: 12px;
  border-bottom: 1px solid var(--border); max-height: min(72vh, 560px); overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  font-family: var(--font-display); font-size: clamp(21px, 5vw, 27px); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text-3); transition: color .15s;
  padding: 4px 0;
}
.mobile-nav a:hover { color: var(--text); }
.mobile-nav__close {
  position: relative; align-self: flex-end; top: auto; right: auto;
  width: 40px; height: 40px; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-mono); font-size: 24px;
  color: var(--text-3); transition: color .15s;
}
.mobile-nav__close:hover { color: var(--text); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: calc(100vh - var(--nav-h));
  overflow: hidden; display: flex; align-items: center;
}
#hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.4; z-index: 0; pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1400px; margin: 0 auto;
  padding: 64px var(--gutter) 80px;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 56px; align-items: center;
}
.hero__eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: 24px;
}
.hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 8vw, 92px);
  line-height: 0.92; letter-spacing: -0.04em;
  font-feature-settings: "ss01";
}
.hero__title span { display: block; }
.hero__body {
  color: var(--text-2); font-size: 15px; line-height: 1.65;
  max-width: 52ch; margin-top: 32px;
}
.hero__actions { display: flex; gap: 10px; margin-top: 40px; }

/* hero metrics */
.hero__metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.hero__metrics li {
  background: var(--bg); padding: 20px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background .2s;
}
.hero__metrics li:hover { background: var(--bg-2); }
.metric__value {
  font-family: var(--font-mono); font-size: 20px; font-weight: 500;
  letter-spacing: -0.02em;
}
.metric__label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4);
}

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  #hero-canvas { opacity: 0.2; }
}
@media (max-width: 768px) {
  .hero { min-height: auto; }
  .hero__inner { padding: 56px var(--gutter) 48px; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--border-2); color: var(--text-2);
  border-radius: var(--radius);
  transition: border-color .15s, color .15s, background .15s;
}
.btn:hover { border-color: var(--text-3); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--text); color: var(--bg); border-color: var(--text);
  box-shadow: 0 0 0 0 rgba(255,255,255,0);
}
.btn--primary:hover {
  background: transparent; color: var(--text);
  box-shadow: 0 0 12px rgba(255,255,255,0.06);
}
.btn--sm { height: 36px; padding: 0 16px; font-size: 10px; }
.btn--copy-email { margin-top: 16px; }

/* ============================================================
   STRIP / MARQUEE
   ============================================================ */
.strip {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  overflow: hidden; background: var(--bg);
}
.strip__inner {
  display: flex; gap: 48px; padding: 14px var(--gutter);
  width: max-content; animation: scroll-strip 50s linear infinite;
}
.strip__inner:hover { animation-play-state: paused; }
.strip span {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-4); white-space: nowrap;
}
.strip span::after {
  content: "  \00B7  "; color: var(--text-4); opacity: 0.3;
}
.strip span:last-child::after { content: none; }
@keyframes scroll-strip {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 120px var(--gutter); }
.section--alt { background: var(--bg-2); }
.section__inner { max-width: var(--max); margin: 0 auto; }
.section__label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4);
  margin-bottom: 16px; display: flex; align-items: center; gap: 12px;
}
.section__label::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
  max-width: 200px;
}
.section__title {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: 48px;
}
@media (max-width: 768px) { .section { padding: 80px var(--gutter); } }

/* ============================================================
   TERMINAL
   ============================================================ */
.terminal {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11px;
  min-height: 380px; display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 16px 48px rgba(0,0,0,0.4);
}
.terminal__bar {
  height: 32px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
}
.terminal__dots { display: flex; gap: 5px; }
.terminal__dots span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-4);
}
.terminal__dots span:nth-child(1) { background: #ff5f57; }
.terminal__dots span:nth-child(2) { background: #febc2e; }
.terminal__dots span:nth-child(3) { background: #28c840; }
.terminal__title { font-size: 10px; letter-spacing: 0.08em; color: var(--text-4); }
.terminal__body {
  flex: 1; display: flex; flex-direction: column; padding: 14px;
  min-height: 0;
}
.terminal__log {
  flex: 1; overflow-y: auto; max-height: 240px;
  color: var(--text-2); white-space: pre-wrap; line-height: 1.65;
  scrollbar-width: thin; scrollbar-color: var(--text-4) transparent;
}
.terminal__log::-webkit-scrollbar { width: 4px; }
.terminal__log::-webkit-scrollbar-track { background: transparent; }
.terminal__log::-webkit-scrollbar-thumb { background: var(--text-4); border-radius: 2px; }
.terminal__log .t-prompt { color: var(--accent); }
.terminal__log .t-key { color: var(--accent-2); }
.terminal__log .t-str { color: var(--accent); }
.terminal__log .t-num { color: var(--text); }
.terminal__log .t-dim { color: var(--text-4); }
.terminal__chips {
  display: flex; gap: 6px; padding: 10px 0; flex-wrap: wrap;
  border-top: 1px solid var(--border);
}
.chip {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--text-3); padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 2px;
  transition: border-color .15s, color .15s;
}
.chip:hover { border-color: var(--text-3); color: var(--text-2); }
.chip.is-active {
  border-color: var(--accent); color: var(--accent);
  background: rgba(16,185,129,0.08);
}
.terminal__input-row {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--border); padding: 10px 0 0;
}
.terminal__prompt { color: var(--accent); font-weight: 500; }
#terminal-input {
  flex: 1; background: transparent; border: 0;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text); outline: none;
  caret-color: var(--accent);
}
#terminal-input::placeholder { color: var(--text-4); }

/* ============================================================
   BENTO / CAPABILITIES
   ============================================================ */
.bento {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.bento-card {
  background: var(--bg); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
  transition: background .2s, box-shadow .2s;
}
.bento-card:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.3);
}
.bento-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(16,185,129,0.04), transparent 60%);
  pointer-events: none; opacity: 0; transition: opacity .3s;
}
.bento-card:hover::before { opacity: 1; }
.bento-card:hover { background: var(--bg-2); }
.bento-card:hover .bento-card__title { color: #fff; }
.bento-card--wide { grid-column: span 2; }
.bento-card__num {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-4);
}
.bento-card__title {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: -0.02em; transition: color .2s;
}
.bento-card__body {
  color: var(--text-2); font-size: 14px; line-height: 1.6;
  max-width: 52ch; flex: 1;
}
.bento-card__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: auto; }
.bento-card__tags span {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-4); padding: 3px 8px;
  border: 1px solid var(--border);
}
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card--wide { grid-column: span 1; }
}

/* ============================================================
   ARCHITECTURE
   ============================================================ */
.arch {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.arch__layers { display: flex; flex-direction: column; }
.arch-layer {
  background: var(--bg); padding: 16px 24px;
  display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center;
  text-align: left; border-bottom: 1px solid var(--border);
  transition: background .2s, opacity .3s;
}
.arch-layer:last-child { border-bottom: none; }
.arch-layer.is-dimmed { opacity: 0.35; }
.arch-layer.is-active { background: var(--bg-2); }
.arch-layer__id {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--text-4); transition: color .2s;
}
.arch-layer.is-active .arch-layer__id { color: var(--accent); }
.arch-layer__text { display: flex; flex-direction: column; gap: 2px; }
.arch-layer__name {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em;
}
.arch-layer__desc { font-size: 12px; color: var(--text-3); }
.arch__detail {
  background: var(--bg); padding: 36px;
  display: flex; flex-direction: column; justify-content: center;
}
.arch__detail-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 12px;
}
.arch__detail-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em; margin-bottom: 16px;
}
.arch__detail-body {
  color: var(--text-2); font-size: 14px; line-height: 1.7; max-width: 48ch;
}
@media (max-width: 768px) { .arch { grid-template-columns: 1fr; } }

/* ============================================================
   SERVICES
   ============================================================ */
.services-list { display: flex; flex-direction: column; }
.service-item { border-bottom: 1px solid var(--border); }
.service-item:first-child { border-top: 1px solid var(--border); }
.service-summary {
  width: 100%; display: grid; grid-template-columns: 48px 1fr auto;
  gap: 16px; align-items: center; padding: 20px 0;
  text-align: left; font-family: var(--font-display);
  cursor: pointer; transition: color .15s; list-style: none;
}
.service-summary::-webkit-details-marker { display: none; }
.service-summary:hover { color: var(--text); }
.service-summary__num {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-4);
}
.service-summary__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.service-summary__icon {
  font-family: var(--font-mono); font-size: 16px; color: var(--text-4);
  transition: transform .25s ease;
}
details[open] .service-summary__icon { transform: rotate(45deg); color: var(--accent); }
.service-panel {
  padding: 0 0 24px 64px;
  color: var(--text-2); font-size: 14px; line-height: 1.7;
  max-width: 56ch;
}
@media (max-width: 768px) {
  .service-summary { grid-template-columns: 32px 1fr auto; }
  .service-panel { padding-left: 48px; }
}

/* ============================================================
   ESTIMATOR
   ============================================================ */
.estimator {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.estimator__controls { background: var(--bg); padding: 28px; }
.estimator__label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4);
  margin-bottom: 6px; display: block;
}
.estimator__select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--border);
  padding: 10px 12px; font-family: var(--font-mono); font-size: 12px;
  color: var(--text); border-radius: 2px; appearance: none;
  cursor: pointer; transition: border-color .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235c5c66'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.estimator__select:focus { outline: none; border-color: var(--accent); }
.estimator__field { margin-bottom: 16px; }
.estimator__field:last-child { margin-bottom: 0; }
.estimator__disclaimer {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--text-4); margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.estimator__output {
  background: var(--bg-2); padding: 28px;
  font-family: var(--font-mono); font-size: 12px;
  display: flex; flex-direction: column; gap: 20px;
}
.estimator__row { display: flex; flex-direction: column; gap: 4px; }
.estimator__row-label {
  font-size: 9px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-4);
}
.estimator__row-value { color: var(--text-2); font-size: 12px; line-height: 1.5; }
.estimator__rating { display: flex; align-items: center; gap: 8px; }
.estimator__rating-bars { display: flex; gap: 3px; }
.estimator__rating-bar {
  width: 20px; height: 6px; background: var(--text-4); border-radius: 1px;
}
.estimator__rating-bar.is-filled { background: var(--accent); }
.estimator__rating-label { font-size: 11px; font-weight: 500; color: var(--text-2); }
@media (max-width: 768px) { .estimator { grid-template-columns: 1fr; } }

/* ============================================================
   STACK MARQUEE
   ============================================================ */
.stack-marquee {
  overflow: hidden; border: 1px solid var(--border);
  background: var(--bg-2); margin-top: 32px;
}
.stack-marquee__track {
  display: flex; gap: 32px; padding: 16px 24px;
  width: max-content; animation: scroll-marquee 40s linear infinite;
}
.stack-marquee:hover .stack-marquee__track { animation-play-state: paused; }
.stack-marquee__track span {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; color: var(--text-3); white-space: nowrap;
}
@keyframes scroll-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   BUILDS / CASE STUDIES
   ============================================================ */
.builds-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-3); max-width: 60ch; margin-bottom: 32px;
  margin-top: -32px;
}
.builds-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.build {
  background: var(--bg); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background .2s, box-shadow .2s;
}
.build:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.3);
}
.build:hover { background: var(--bg-2); }
.build:hover .build__kicker { border-color: rgba(16,185,129,0.4); }
.build__kicker {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); padding: 3px 10px;
  border: 1px solid rgba(16,185,129,0.2); border-radius: 2px;
  display: inline-block; width: fit-content;
}
.build__title {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  letter-spacing: -0.02em;
}
.build__section { display: flex; flex-direction: column; gap: 4px; }
.build__section-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4);
}
.build__section-body {
  color: var(--text-2); font-size: 14px; line-height: 1.6; max-width: 52ch;
}
.build__outcome {
  font-size: 14px; color: var(--text-2);
  padding-top: 14px; border-top: 1px solid var(--border);
  margin-top: auto; line-height: 1.6;
}
.build__outcome strong { color: var(--text); font-weight: 500; }
@media (max-width: 768px) { .builds-grid { grid-template-columns: 1fr; } }

/* ============================================================
   TIMELINE / APPROACH
   ============================================================ */
.timeline {
  display: flex; flex-direction: column;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.timeline-step {
  background: var(--bg); padding: 24px 28px;
  display: grid; grid-template-columns: 48px 1fr; gap: 20px;
  transition: background .2s;
}
.timeline-step:hover { background: var(--bg-2); }
.timeline-step__num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--accent); padding-top: 2px;
}
.timeline-step__title {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.timeline-step__body {
  color: var(--text-2); font-size: 14px; line-height: 1.65; max-width: 52ch;
}

/* ============================================================
   PRINCIPLES
   ============================================================ */
.principles-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.principle {
  background: var(--bg); padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background .2s, box-shadow .2s;
}
.principle:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.3);
}
.principle:hover { background: var(--bg-2); }
.principle:hover .principle__quote { color: #fff; }
.principle__quote {
  font-family: var(--font-display); font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
  transition: color .2s;
}
.principle__body {
  color: var(--text-2); font-size: 14px; line-height: 1.65; max-width: 48ch;
}
@media (max-width: 768px) { .principles-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
}
.contact__sub {
  color: var(--text-2); font-size: 14px; line-height: 1.65;
  max-width: 44ch; margin-bottom: 28px;
}
.contact__details {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px;
}
.contact__details p {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
}
.contact__details strong { color: var(--text-2); font-weight: 500; }
.contact__clock {
  margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px;
}
.contact__clock-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4);
}
.contact__clock-value {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
}
.contact__legal {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-4);
  margin-top: 12px; letter-spacing: 0.04em; line-height: 1.5;
}

.field { margin-bottom: 18px; }
.field label {
  display: block; font-family: var(--font-mono); font-size: 10px;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 6px;
}
.field input, .field textarea, .field select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--border);
  padding: 11px 14px; font-size: 14px; color: var(--text);
  border-radius: var(--radius); transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(16,185,129,0.15);
}
.field textarea { resize: vertical; min-height: 110px; }
.field select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235c5c66'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.field-error {
  font-family: var(--font-mono); font-size: 11px; color: var(--danger);
  min-height: 1em; margin-top: 4px;
}
.is-invalid { border-color: var(--danger) !important; }
#form-success { padding: 32px 0; }
#form-success h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em; margin-bottom: 12px;
}
#form-success p { color: var(--text-2); margin-bottom: 24px; font-size: 14px; line-height: 1.6; }
#form-success[hidden], #contact-form[hidden] { display: none; }

/* toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--accent); color: #050505; padding: 8px 20px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; border-radius: 2px;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s, transform .2s;
  z-index: 200; white-space: nowrap;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

@media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; gap: 40px; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--border); padding: 48px var(--gutter);
}
.footer__inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 32px; align-items: start;
}
.footer__left { display: flex; flex-direction: column; gap: 6px; }
.footer__brand {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em;
}
.footer__tagline {
  font-size: 12px; color: var(--text-4); max-width: 32ch; line-height: 1.5;
}
.footer__nav { display: flex; gap: 24px; }
.footer__nav a {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-4);
  letter-spacing: 0.04em; transition: color .15s;
}
.footer__nav a:hover { color: var(--text); }
.footer__social {
  display: flex; gap: 16px; justify-content: flex-end; align-items: center;
}
.footer__social a {
  color: var(--text-4); transition: color .15s;
  display: flex; align-items: center; justify-content: center;
}
.footer__social a:hover { color: var(--text-2); }
.footer__copy {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-4);
  letter-spacing: 0.04em; padding-top: 24px;
  border-top: 1px solid var(--border);
}
@media (max-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr; text-align: center;
    justify-items: center; gap: 20px;
  }
  .footer__nav { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .footer__social { justify-content: center; }
}

/* ============================================================
   CUSTOM CURSOR (desktop only)
   ============================================================ */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 999;
  pointer-events: none; will-change: transform;
}
.cursor-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  transform: translate(-50%, -50%);
  transition: width .2s, height .2s, border-color .2s;
}
.cursor-ring.is-hot {
  width: 40px; height: 40px; border-color: rgba(16,185,129,0.4);
}
body:not(.has-custom-cursor) .cursor-dot,
body:not(.has-custom-cursor) .cursor-ring { display: none; }

/* ============================================================
   PAGE LOADER
   ============================================================ */
.page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
.page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader__text {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: 0.22em; color: var(--text-3);
  animation: loader-pulse 1.2s ease-in-out infinite;
}
@keyframes loader-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
body.is-loading { overflow: hidden; }

/* scroll progress */
.scroll-progress {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  height: 1px; z-index: 51; background: var(--accent);
  transform-origin: left; transform: scaleX(0);
  will-change: transform;
}

/* back to top */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 70;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, visibility .25s, transform .25s, border-color .15s, color .15s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { border-color: var(--border-2); color: var(--text); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .strip__inner, .stack-marquee__track {
    animation: none !important;
    flex-wrap: wrap; width: auto; justify-content: center; gap: 16px;
  }
  .strip span::after { display: none; }
  #hero-canvas { display: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 390px) {
  .hero__title { font-size: 36px; }
  .hero__metrics { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento-card--wide { grid-column: span 1; }
  .builds-grid { grid-template-columns: 1fr; }
  .arch { grid-template-columns: 1fr; }
  .estimator { grid-template-columns: 1fr; }
  .section { padding: 64px var(--gutter); }
}
@media (min-width: 391px) and (max-width: 768px) {
  .hero__title { font-size: clamp(36px, 10vw, 52px); }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .hero__inner { max-width: 1200px; }
}

/* ============================================================
   SUB-PAGE HERO
   ============================================================ */
.page-hero {
  padding: 96px var(--gutter) 64px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.page-hero__inner { max-width: var(--max); margin: 0 auto; }
.page-hero__eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4);
  margin-bottom: 16px;
}
.page-hero__title {
  font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  margin-bottom: 20px;
}
.page-hero__sub {
  color: var(--text-2); font-size: 15px; line-height: 1.65;
  max-width: 52ch;
}
@media (max-width: 768px) {
  .page-hero { padding: 72px var(--gutter) 48px; }
}

/* active nav link */
.header__nav a.is-active { color: var(--text); }
.header__nav a.is-active::after { width: 100%; }

/* ============================================================
   CASE STUDIES DEEP
   ============================================================ */
.cs-deep {
  padding: 80px var(--gutter);
  border-bottom: 1px solid var(--border);
}
.cs-deep--alt { background: var(--bg-2); }
.cs-deep__inner { max-width: var(--max); margin: 0 auto; }
.cs-deep__meta {
  display: flex; align-items: center; gap: 16px; margin-bottom: 12px;
}
.cs-deep__kicker {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); padding: 3px 10px;
  border: 1px solid rgba(16,185,129,0.2); border-radius: 2px;
}
.cs-deep__date {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-4);
  letter-spacing: 0.06em;
}
.cs-deep__title {
  font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
  margin-bottom: 32px;
}
.cs-deep__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px; margin-bottom: 32px;
}
.cs-deep__block { display: flex; flex-direction: column; gap: 8px; }
.cs-deep__label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4);
}
.cs-deep__block p {
  color: var(--text-2); font-size: 14px; line-height: 1.65; max-width: 52ch;
}
.cs-deep__outcome {
  padding-top: 24px; border-top: 1px solid var(--border);
}
.cs-deep__metrics {
  display: flex; gap: 32px; margin-bottom: 20px;
}
.cs-deep__metric {
  display: flex; flex-direction: column; gap: 2px;
}
.cs-deep__metric-value {
  font-family: var(--font-mono); font-size: 18px; font-weight: 500;
  letter-spacing: -0.02em;
}
.cs-deep__metric-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4);
}
.cs-deep__outcome > p {
  color: var(--text-2); font-size: 14px; line-height: 1.65; max-width: 60ch;
}
@media (max-width: 768px) {
  .cs-deep__grid { grid-template-columns: 1fr; gap: 24px; }
  .cs-deep__metrics { flex-wrap: wrap; gap: 20px; }
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.svc-list {
  display: flex; flex-direction: column;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.svc-card {
  background: var(--bg); padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: background .2s;
}
.svc-card:hover { background: var(--bg-2); }
.svc-card:hover .svc-card__num { color: var(--text); }
.svc-card__head {
  display: flex; align-items: baseline; gap: 16px;
}
.svc-card__num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--accent); min-width: 24px;
}
.svc-card__title {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em;
}
.svc-card__body {
  color: var(--text-2); font-size: 14px; line-height: 1.65;
  max-width: 60ch;
}
.svc-card__details {
  display: flex; gap: 32px; padding-top: 16px;
  border-top: 1px solid var(--border); margin-top: auto;
}
.svc-card__detail { display: flex; flex-direction: column; gap: 3px; }
.svc-card__detail-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4);
}
.svc-card__detail-value {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
}
@media (max-width: 768px) {
  .svc-card__details { flex-direction: column; gap: 12px; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-story {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px;
  align-items: start;
}
.about-story__main {
  display: flex; flex-direction: column; gap: 16px;
}
.about-story__main p {
  color: var(--text-2); font-size: 15px; line-height: 1.65; max-width: 55ch;
}
.about-story__side {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
}
.about-stat-block {
  background: var(--bg); padding: 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.about-stat-block__value {
  font-family: var(--font-mono); font-size: 24px; font-weight: 500;
  letter-spacing: -0.02em;
}
.about-stat-block__label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4);
}
.team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.team-member {
  background: var(--bg); padding: 28px;
  display: flex; flex-direction: column; gap: 8px;
  transition: background .2s;
}
.team-member:hover { background: var(--bg-2); }
.team-member__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--text-3); margin-bottom: 4px;
}
.team-member__name {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em;
}
.team-member__role {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4);
}
.team-member__bio {
  color: var(--text-2); font-size: 13px; line-height: 1.6;
}
.practices-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.practice {
  background: var(--bg); padding: 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.practice__title {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  letter-spacing: -0.02em;
}
.practice__body {
  color: var(--text-2); font-size: 14px; line-height: 1.6;
}
@media (max-width: 768px) {
  .about-story { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .practices-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PROCESS PAGE
   ============================================================ */
.process-timeline {
  display: flex; flex-direction: column;
}
.process-step {
  display: grid; grid-template-columns: 64px 1fr; gap: 0;
  position: relative;
}
.process-step__marker {
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.process-step__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--accent); width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(16,185,129,0.25); border-radius: 50%;
  background: var(--bg); position: relative; z-index: 1;
}
.process-step__line {
  flex: 1; width: 1px; background: var(--border);
  margin: 4px 0;
}
.process-step__content {
  padding: 0 0 48px 24px;
}
.process-step__title {
  font-family: var(--font-display); font-size: 24px; font-weight: 600;
  letter-spacing: -0.02em; margin-bottom: 4px;
}
.process-step__duration {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4);
  margin-bottom: 12px; display: block;
}
.process-step__body {
  color: var(--text-2); font-size: 14px; line-height: 1.65;
  max-width: 56ch; margin-bottom: 16px;
}
.process-step__outputs {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.process-step__output-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4);
  margin-right: 4px;
}
.process-step__output {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 2px;
}
.process-step:last-child .process-step__line { display: none; }
@media (max-width: 768px) {
  .process-step { grid-template-columns: 48px 1fr; }
  .process-step__content { padding-left: 16px; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px;
  align-items: start;
}
.contact-page__form-wrap { display: flex; flex-direction: column; }
.contact-page__side {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border);
}
.contact-page__block {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.contact-page__block:last-child { border-bottom: none; }
.contact-page__label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4);
}
.contact-page__value {
  font-family: var(--font-mono); font-size: 13px; color: var(--text-2);
}
a.contact-page__value { color: var(--text-2); transition: color .15s; }
a.contact-page__value:hover { color: var(--text); }
.contact-page__list {
  display: flex; flex-direction: column; gap: 6px;
}
.contact-page__list li {
  font-size: 13px; color: var(--text-2); line-height: 1.5;
  padding-left: 12px; position: relative;
}
.contact-page__list li::before {
  content: "\2022"; position: absolute; left: 0;
  color: var(--text-4);
}
@media (max-width: 768px) { .contact-page { grid-template-columns: 1fr; gap: 40px; } }

/* ============================================================
   STATUS DASHBOARD
   ============================================================ */
.status-dash {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.status-card {
  background: var(--bg); padding: 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.status-card__label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4);
}
.status-card__value {
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  color: var(--text-2);
}
.status-card__value--ok { color: var(--accent); }
@media (max-width: 768px) {
  .status-dash { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .status-dash { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.blog-card {
  background: var(--bg); padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background .2s;
}
.blog-card:hover { background: var(--bg-2); }
.blog-card__meta {
  display: flex; align-items: center; gap: 12px;
}
.blog-card__tag {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); padding: 2px 8px;
  border: 1px solid rgba(16,185,129,0.2); border-radius: 2px;
}
.blog-card__date {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-4);
}
.blog-card__title {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.25;
}
.blog-card__body {
  color: var(--text-2); font-size: 14px; line-height: 1.6;
  flex: 1;
}
.blog-card__footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--border);
  margin-top: auto;
}
.blog-card__read {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-4);
}
.blog-card__link {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--text-3); transition: color .15s;
}
.blog-card__link:hover { color: var(--text); }
@media (max-width: 768px) { .blog-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  display: flex; flex-direction: column;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.faq-item {
  background: var(--bg);
}
.faq-summary {
  padding: 20px 24px; cursor: pointer;
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  transition: color .15s;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 18px;
  color: var(--text-4); transition: transform .2s, color .2s;
  flex-shrink: 0; margin-left: 16px;
}
.faq-item[open] .faq-summary::after {
  transform: rotate(45deg); color: var(--accent);
}
.faq-summary:hover { color: var(--text); }
.faq-body {
  padding: 0 24px 20px 24px;
  color: var(--text-2); font-size: 14px; line-height: 1.65;
  max-width: 60ch;
}
.faq-body p { margin-bottom: 8px; }
.faq-body p:last-child { margin-bottom: 0; }

/* ============================================================
   DOCS
   ============================================================ */
.docs-layout {
  display: grid; grid-template-columns: 200px 1fr; gap: 48px;
  align-items: start;
}
.docs-nav {
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 88px;
}
.docs-nav__link {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
  padding: 8px 12px; border-radius: 2px; transition: color .15s, background .15s;
}
.docs-nav__link:hover { color: var(--text); background: var(--surface); }
.docs-nav__link.is-active { color: var(--text); background: var(--surface); }
.docs-content {
  display: flex; flex-direction: column; gap: 48px;
}
.docs-section { scroll-margin-top: 88px; }
.docs-section__title {
  font-family: var(--font-display); font-size: 24px; font-weight: 600;
  letter-spacing: -0.02em; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.docs-section__body {
  color: var(--text-2); font-size: 14px; line-height: 1.7;
  max-width: 60ch; margin-bottom: 12px;
}
.docs-code {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
  margin: 16px 0; overflow-x: auto;
}
.docs-code pre {
  margin: 0; font-family: var(--font-mono); font-size: 12px;
  line-height: 1.7; color: var(--text-2);
}
.docs-list {
  padding-left: 20px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.docs-list li {
  color: var(--text-2); font-size: 14px; line-height: 1.6;
  list-style: disc; padding-left: 4px;
}
@media (max-width: 768px) {
  .docs-layout { grid-template-columns: 1fr; gap: 24px; }
  .docs-nav { flex-direction: row; flex-wrap: wrap; position: static; gap: 4px; }
  .docs-nav__link { padding: 6px 10px; font-size: 11px; }
}

/* ============================================================
   CHANGELOG
   ============================================================ */
.changelog-timeline {
  display: flex; flex-direction: column;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.changelog-entry {
  background: var(--bg); padding: 24px 28px;
  display: grid; grid-template-columns: 80px 1fr; gap: 24px;
  transition: background .2s;
}
.changelog-entry:hover { background: var(--bg-2); }
.changelog-entry__date {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 2px;
}
.changelog-entry__month {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--text-3);
}
.changelog-entry__year {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-4);
}
.changelog-entry__content {
  display: flex; flex-direction: column; gap: 8px;
}
.changelog-entry__tag {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 2px; display: inline-block; width: fit-content;
}
.changelog-entry__tag--release {
  color: var(--accent); border: 1px solid rgba(16,185,129,0.2);
}
.changelog-entry__tag--update {
  color: var(--accent-2); border: 1px solid rgba(6,182,212,0.2);
}
.changelog-entry__tag--post {
  color: var(--text-3); border: 1px solid var(--border);
}
.changelog-entry__title {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  letter-spacing: -0.02em;
}
.changelog-entry__body {
  color: var(--text-2); font-size: 14px; line-height: 1.6; max-width: 56ch;
}
@media (max-width: 768px) {
  .changelog-entry { grid-template-columns: 1fr; gap: 8px; }
  .changelog-entry__date { flex-direction: row; gap: 8px; }
}

/* ============================================================
   OPEN SOURCE
   ============================================================ */
.oss-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.oss-card {
  background: var(--bg); padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background .2s;
}
.oss-card:hover { background: var(--bg-2); }
.oss-card__header {
  display: flex; justify-content: space-between; align-items: baseline;
}
.oss-card__name {
  font-family: var(--font-mono); font-size: 16px; font-weight: 500;
  color: var(--text);
}
.oss-card__stars {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-4);
}
.oss-card__lang {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2);
}
.oss-card__body {
  color: var(--text-2); font-size: 13px; line-height: 1.6; flex: 1;
}
.oss-card__meta {
  display: flex; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; color: var(--text-4);
}
@media (max-width: 900px) { .oss-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .oss-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CAREERS
   ============================================================ */
.careers-grid {
  display: flex; flex-direction: column;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.career-card {
  background: var(--bg); padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: background .2s;
}
.career-card:hover { background: var(--bg-2); }
.career-card__header {
  display: flex; justify-content: space-between; align-items: baseline;
}
.career-card__title {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em;
}
.career-card__type {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4);
}
.career-card__body {
  color: var(--text-2); font-size: 14px; line-height: 1.65; max-width: 60ch;
}
.career-card__reqs {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.career-card__req {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; color: var(--text-3); padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 2px;
}
.careers-process {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.careers-step {
  background: var(--bg); padding: 28px;
  display: flex; gap: 16px; align-items: start;
}
.careers-step__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--accent); min-width: 24px; padding-top: 2px;
}
.careers-step__title {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.careers-step__body {
  color: var(--text-2); font-size: 13px; line-height: 1.6;
}
@media (max-width: 768px) {
  .careers-process { grid-template-columns: 1fr; }
}

/* VEYRION 2026 VISUAL PASS */
:root{--ink:#0a0b0d;--paper:#f3f1eb;--muted-2:#8d8b84;--line-strong:rgba(255,255,255,.18);--accent:#d7ff4f;--accent-soft:rgba(215,255,79,.14);--shadow-deep:0 28px 90px rgba(0,0,0,.28)}
html{scroll-behavior:smooth}body{background:radial-gradient(circle at 72% 8%,rgba(215,255,79,.055),transparent 28rem),linear-gradient(180deg,#090a0c 0%,#0b0c0e 48%,#101113 100%)}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.header{backdrop-filter:blur(18px) saturate(120%);background:rgba(9,10,12,.72);border-bottom:1px solid rgba(255,255,255,.08)}.header__brand{letter-spacing:.18em}.header__nav a{position:relative;transition:color .25s ease,opacity .25s ease}.header__nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-.55rem;height:1px;background:var(--accent);transition:right .28s ease}.header__nav a:hover:after{right:0}.header__cta{border:1px solid rgba(215,255,79,.42);box-shadow:0 0 0 rgba(215,255,79,0);transition:transform .25s ease,box-shadow .25s ease,background .25s ease}.header__cta:hover{transform:translateY(-2px);background:rgba(215,255,79,.1);box-shadow:0 10px 35px rgba(215,255,79,.12)}
.hero{min-height:100svh;position:relative;overflow:hidden;isolation:isolate}.hero:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.65) 55%,transparent 100%)}.hero__grid{position:absolute;width:62vw;height:62vw;max-width:900px;max-height:900px;right:-18vw;top:8vh;border:1px solid rgba(215,255,79,.12);transform:perspective(900px) rotateX(58deg) rotateZ(-18deg);background:linear-gradient(90deg,rgba(215,255,79,.09) 1px,transparent 1px),linear-gradient(rgba(215,255,79,.09) 1px,transparent 1px);background-size:48px 48px;opacity:.42;z-index:-1;animation:hero-grid-drift 16s ease-in-out infinite alternate}.hero__orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px);z-index:-1}.hero__orb--one{width:22rem;height:22rem;right:8%;top:18%;background:radial-gradient(circle,rgba(215,255,79,.16),rgba(215,255,79,0) 68%);animation:orb-float 8s ease-in-out infinite}.hero__orb--two{width:34rem;height:34rem;left:35%;bottom:-18rem;background:radial-gradient(circle,rgba(255,255,255,.055),transparent 68%);animation:orb-float 11s ease-in-out infinite reverse}.hero__inner{position:relative;z-index:2}.hero__eyebrow{letter-spacing:.22em;color:rgba(255,255,255,.58)}.hero__eyebrow span{color:var(--accent)}.hero__title{text-wrap:balance;letter-spacing:-.055em}.hero__title span{display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1),letter-spacing .6s ease}.hero__title span:hover{transform:translateX(12px);letter-spacing:-.035em}.hero__body{max-width:42rem;color:rgba(255,255,255,.68)}.hero__actions .btn{transition:transform .25s ease,border-color .25s ease,background .25s ease}.hero__actions .btn:hover{transform:translateY(-3px)}.hero__metrics li{transition:transform .3s ease,border-color .3s ease}.hero__metrics li:hover{transform:translateY(-5px);border-color:rgba(215,255,79,.32)}
.terminal{box-shadow:var(--shadow-deep);transform-style:preserve-3d;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}.terminal:hover{transform:perspective(1200px) rotateX(2deg) rotateY(-2deg) translateY(-4px);border-color:rgba(215,255,79,.24);box-shadow:0 36px 100px rgba(0,0,0,.38)}.chip{transition:transform .2s ease,border-color .2s ease,background .2s ease}.chip:hover{transform:translateY(-2px);border-color:rgba(215,255,79,.45);background:rgba(215,255,79,.07)}
.section{position:relative;overflow:clip}.section:after{content:"";position:absolute;width:22rem;height:22rem;right:-14rem;top:20%;border:1px solid rgba(255,255,255,.05);border-radius:50%;pointer-events:none}.section__title{max-width:12ch;text-wrap:balance}.section__label{letter-spacing:.18em}
.bento{perspective:1400px}.bento-card{position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform;box-shadow:0 18px 55px rgba(0,0,0,.12);transition:border-color .35s ease,box-shadow .35s ease,background .35s ease}.bento-card:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(215,255,79,.13),transparent 24%);opacity:0;transition:opacity .3s ease;pointer-events:none}.bento-card:hover:before{opacity:1}.bento-card:hover{border-color:rgba(215,255,79,.28);box-shadow:0 28px 80px rgba(0,0,0,.22)}
.arch-layer{transition:transform .3s ease,border-color .3s ease,background .3s ease}.arch-layer:hover{transform:translateX(8px);border-color:rgba(215,255,79,.28)}.arch-layer.is-active{box-shadow:inset 4px 0 0 var(--accent)}.service-item{transition:border-color .3s ease,transform .3s ease}.service-item:hover{transform:translateX(4px);border-color:rgba(215,255,79,.2)}.service-summary__icon{transition:transform .35s ease}.service-item[open] .service-summary__icon{transform:rotate(45deg)}
.estimator{box-shadow:0 30px 90px rgba(0,0,0,.18)}.estimator__select,.field input,.field textarea{transition:border-color .25s ease,box-shadow .25s ease,transform .2s ease}.estimator__select:focus,.field input:focus,.field textarea:focus{border-color:rgba(215,255,79,.6);box-shadow:0 0 0 4px rgba(215,255,79,.08);outline:none}
.build{position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease}.build:after{content:"";position:absolute;left:-30%;right:-30%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(215,255,79,.7),transparent);transform:translateX(-60%);transition:transform .8s ease}.build:hover{transform:translateY(-8px);border-color:rgba(215,255,79,.25);box-shadow:0 30px 80px rgba(0,0,0,.2)}.build:hover:after{transform:translateX(60%)}.timeline-step{position:relative;transition:transform .3s ease}.timeline-step:hover{transform:translateX(8px)}.timeline-step:hover .timeline-step__num{color:var(--accent);border-color:rgba(215,255,79,.5)}.principle{transition:transform .35s ease,border-color .35s ease}.principle:hover{transform:translateY(-7px) rotateX(1deg);border-color:rgba(215,255,79,.22)}
.contact-left{position:sticky;top:7rem;align-self:start}.contact-right{box-shadow:0 30px 90px rgba(0,0,0,.2)}.page-loader{background:radial-gradient(circle at 50% 45%,rgba(215,255,79,.08),transparent 26rem),#090a0c}.page-loader__text{letter-spacing:.35em;animation:loader-breathe 1.8s ease-in-out infinite}.page-loader__line{display:block;width:min(280px,45vw);height:1px;margin-top:1.1rem;background:rgba(255,255,255,.12);overflow:hidden;position:relative}.page-loader__line:after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);animation:loader-progress 1.45s cubic-bezier(.65,0,.35,1) forwards}.page-loader__meta{display:block;margin-top:.75rem;font:500 .62rem/1 "JetBrains Mono",monospace;letter-spacing:.16em;color:rgba(255,255,255,.36)}.footer__brand{letter-spacing:.2em}.footer__nav a{transition:color .2s ease,transform .2s ease}.footer__nav a:hover{color:var(--accent);transform:translateX(3px)}.back-to-top{transition:opacity .25s ease,transform .25s ease,border-color .25s ease}.back-to-top:hover{transform:translateY(-4px);border-color:rgba(215,255,79,.5)}
@keyframes hero-grid-drift{from{transform:perspective(900px) rotateX(58deg) rotateZ(-18deg) translate3d(0,0,0)}to{transform:perspective(900px) rotateX(58deg) rotateZ(-18deg) translate3d(-18px,22px,0)}}@keyframes orb-float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,-24px,0) scale(1.04)}}@keyframes loader-breathe{0%,100%{opacity:.55;letter-spacing:.35em}50%{opacity:1;letter-spacing:.43em}}@keyframes loader-progress{to{transform:translateX(0)}}
@media(max-width:900px){.header__right{display:none}.hero__grid{width:90vw;height:90vw;right:-38vw;opacity:.3}.hero__orb--one{width:18rem;height:18rem;right:-5rem;top:22%}.contact-left{position:static}}@media(max-width:640px){.hero{min-height:auto}.hero__title{font-size:clamp(3.1rem,16vw,5.6rem)}.hero__grid{width:130vw;height:130vw;right:-62vw;top:14%}.hero__body{font-size:.98rem}.hero__actions{display:grid;grid-template-columns:1fr}.hero__actions .btn{width:100%}.hero__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.terminal{margin-top:1.25rem}.section{padding-left:1.1rem;padding-right:1.1rem}.section__title{max-width:10ch}.bento-card:hover,.build:hover,.principle:hover{transform:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero__grid,.hero__orb,.page-loader__text,.page-loader__line:after{animation:none!important}.hero__title span:hover,.bento-card:hover,.build:hover,.principle:hover,.timeline-step:hover,.service-item:hover{transform:none!important}.terminal:hover{transform:none}}


/* VEYRION — editorial design system: precise, composed, quietly technical. */
:root {
  --bg:#0b0d14; --bg-2:#0e1119; --surface:#11151f; --elevated:#171d29;
  --text:#eef0f5; --text-2:#b1b7c4; --text-3:#858d9d; --text-4:#697283;
  --border:rgba(238,240,245,.09); --border-2:rgba(238,240,245,.16);
  --accent:#a5c9b8; --accent-2:#a5c9b8; --accent-dim:rgba(165,201,184,.10);
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --radius:4px; --nav-h:76px; --max:1248px; --gutter:clamp(20px,4vw,48px);
}
html{scroll-padding-top:88px}
body{background:var(--bg);color:var(--text);font-size:15px;line-height:1.7}
::selection{background:var(--accent);color:#0b0d14}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.header{height:var(--nav-h);background:rgba(11,13,20,.94);border-bottom-color:var(--border);backdrop-filter:blur(12px)}
.header__inner{max-width:1440px;gap:32px}
.header__brand{font-size:14px;letter-spacing:.22em}
.header__nav{gap:clamp(14px,1.8vw,28px)}
.header__nav a{color:var(--text-3);font-size:12px;letter-spacing:0;text-transform:none;transition:color .18s ease}
.header__nav a::after{background:var(--accent);transition:width .2s ease}
.header__status{color:var(--text-3);font-size:10px;letter-spacing:.02em;text-transform:none}
.header__dot{background:var(--accent);box-shadow:none;animation:none}
.header__cta{color:var(--text);border-color:var(--border-2);font-family:var(--font-body);font-size:12px;letter-spacing:0;text-transform:none;padding:10px 16px;transition:color .18s ease,border-color .18s ease,background .18s ease}
.header__cta:hover{border-color:var(--accent);color:var(--accent)}
.mobile-nav{background:rgba(11,13,20,.985);padding:64px var(--gutter);gap:12px}
.mobile-nav a{width:fit-content;font-size:clamp(30px,7vw,48px);font-weight:500;letter-spacing:-.04em;color:var(--text-2);line-height:1.25}
.mobile-nav a:hover{color:var(--accent)}
.hero{min-height:min(820px,calc(100svh - var(--nav-h)));background:var(--bg)}
.hero__inner{max-width:1440px;padding:clamp(64px,9vh,112px) var(--gutter);grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:clamp(40px,6vw,88px)}
.hero__eyebrow{color:var(--accent);font-size:11px;letter-spacing:.04em;text-transform:none;margin-bottom:28px}
.hero__title{max-width:780px;font-size:clamp(48px,6.3vw,88px);font-weight:500;letter-spacing:-.065em;line-height:.99}
.hero__title span:last-child{color:var(--accent)}
.hero__body{max-width:54ch;margin-top:28px;color:var(--text-2);font-size:clamp(15px,1.2vw,17px);line-height:1.75}
.hero__actions{gap:12px;margin-top:36px;flex-wrap:wrap}
.btn{height:48px;padding:0 20px;border-radius:3px;font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease}
.btn--primary{background:var(--accent);color:#0b0d14;border-color:var(--accent);box-shadow:none}
.btn--primary:hover{background:#c0d9cd;border-color:#c0d9cd;color:#0b0d14;box-shadow:none}
.btn:not(.btn--primary):hover{border-color:var(--accent);color:var(--accent)}
.btn:active{transform:translateY(1px)}
.hero__metrics{gap:0;background:transparent;border:0;border-top:1px solid var(--border);border-left:1px solid var(--border)}
.hero__metrics li{min-height:104px;justify-content:center;background:var(--surface);padding:20px 22px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background-color .18s ease}
.hero__metrics li:hover{background:var(--elevated)}
.metric__value{color:var(--text);font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-.04em}
.metric__label{color:var(--text-3);font-family:var(--font-body);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none}
.terminal{min-height:340px;margin-top:16px;background:#0d1119;border:1px solid var(--border-2);border-radius:4px;box-shadow:0 18px 48px rgba(0,0,0,.18)}
.terminal__bar{height:40px;padding:0 16px}
.terminal__title{color:var(--text-3);font-size:10px;letter-spacing:.03em}
.terminal__body{padding:18px}
.terminal__log{color:var(--text-2);font-size:11px;line-height:1.8}
.terminal__log .t-prompt,.terminal__log .t-key,.terminal__log .t-str{color:var(--accent)}
.terminal__log .t-dim{color:var(--text-3)}
.terminal__chips{gap:8px;padding:14px 0}
.chip{color:var(--text-2);padding:6px 10px;border-color:var(--border);border-radius:3px;letter-spacing:0;transition:color .18s ease,border-color .18s ease,background-color .18s ease}
.chip:hover,.chip.is-active{color:var(--accent);border-color:rgba(165,201,184,.45);background:var(--accent-dim)}
#terminal-input{font-size:12px}
.strip{background:var(--bg);border-color:var(--border)}
.strip__inner{width:100%;justify-content:space-between;flex-wrap:wrap;gap:12px 28px;padding:18px var(--gutter);animation:none}
.strip__inner span{font-size:10px;letter-spacing:.06em;color:var(--text-3)}
.strip__inner span:nth-child(n+5){display:none}
.strip span::after{color:var(--accent);opacity:.65}
.section{padding:clamp(76px,9vw,120px) var(--gutter)}
.section--alt{background:var(--bg-2)}
.section__inner{max-width:var(--max)}
.section__label{color:var(--accent);font-size:11px;font-weight:400;letter-spacing:.02em;text-transform:none;margin-bottom:18px}
.section__label::after{background:var(--border);max-width:240px}
.section__title{max-width:18ch;font-size:clamp(32px,4.2vw,52px);font-weight:500;letter-spacing:-.055em;line-height:1.04;margin-bottom:44px}
.bento{gap:12px;background:transparent;border:0}
.bento-card{min-height:248px;padding:clamp(22px,2.4vw,32px);gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:4px;transition:background-color .2s ease,border-color .2s ease}
.bento-card::before{display:none}
.bento-card:hover{background:var(--elevated);border-color:var(--border-2);box-shadow:none}
.bento-card__num,.bento-card__tags span{color:var(--text-3);letter-spacing:.02em}
.bento-card__title{font-size:20px;font-weight:500;letter-spacing:-.035em}
.bento-card__body{color:var(--text-2);line-height:1.7}
.bento-card__tags{gap:8px}
.bento-card__tags span{padding:4px 8px;border-radius:2px;font-size:10px;text-transform:none;border-color:var(--border)}
.arch{gap:12px;background:transparent;border:0}
.arch__layers,.arch__detail{border:1px solid var(--border);border-radius:4px;overflow:hidden}
.arch-layer{min-height:76px;padding:16px 20px;background:var(--surface);border-bottom-color:var(--border);transition:background-color .18s ease,opacity .18s ease}
.arch-layer.is-active{background:var(--elevated)}
.arch-layer__id,.arch__detail-label{color:var(--accent)}
.arch-layer__name{font-size:15px;font-weight:500}
.arch-layer__desc{color:var(--text-3)}
.arch__detail{background:var(--surface);padding:clamp(24px,3vw,40px)}
.arch__detail-title{font-size:25px;font-weight:500;letter-spacing:-.04em}
.arch__detail-body{color:var(--text-2)}
.services-list{border-top:1px solid var(--border)}
.service-item{border-bottom-color:var(--border)}
.service-summary{padding:24px 0}
.service-summary__title{font-size:19px;font-weight:500}
.service-summary__num{color:var(--accent)}
.service-summary__icon{color:var(--text-3)}
.service-panel{color:var(--text-2)}
.estimator{gap:12px;background:transparent;border:0}
.estimator__controls,.estimator__output{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:clamp(22px,2.5vw,32px)}
.estimator__label{color:var(--text-3);letter-spacing:.02em;text-transform:none}
.estimator__select{border-color:var(--border-2);border-radius:3px;background-color:var(--bg-2)}
.estimator__select:focus{border-color:var(--accent)}
.stack-marquee{overflow:visible}
.stack-marquee__track{width:100%;flex-wrap:wrap;justify-content:flex-start;gap:10px;animation:none}
.stack-marquee__track span{padding:8px 12px;border:1px solid var(--border);border-radius:3px;color:var(--text-2);background:var(--surface);font-size:12px;letter-spacing:0;text-transform:none}
.stack-marquee__track span:nth-child(n+16){display:none}
.builds-grid{gap:12px}
.build{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:clamp(22px,2.5vw,32px);transition:background-color .18s ease,border-color .18s ease}
.build:hover{background:var(--elevated);border-color:var(--border-2)}
.build__kicker,.build__section-label{color:var(--accent);letter-spacing:.03em}
.build__title{font-weight:500;letter-spacing:-.035em}
.build__section-body,.build__outcome{color:var(--text-2)}
.timeline-step{border-color:var(--border)}
.timeline-step__num{color:var(--accent)}
.principles-grid{gap:12px}
.principle{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:28px}
.principle__quote{font-weight:500;letter-spacing:-.035em}
.principle__body{color:var(--text-2)}
.contact-layout{gap:clamp(32px,6vw,80px)}
.contact-left .section__title{max-width:12ch}
.contact__sub,.contact__details,.contact__details p{color:var(--text-2)}
.contact__clock-label{color:var(--text-3);letter-spacing:.02em}
.contact-right form{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:clamp(22px,3vw,36px)}
.field label{color:var(--text-2)}
.field input,.field select,.field textarea{background:var(--bg-2);border-color:var(--border-2);border-radius:3px}
.footer{background:#080a10;border-top:1px solid var(--border)}
.footer__inner{max-width:1440px}
.footer__brand{color:var(--text);letter-spacing:.2em}
.footer__tagline{color:var(--text-3)}
.footer__nav a{color:var(--text-3);transition:color .18s ease}
.footer__nav a:hover{color:var(--accent)}
.footer__copy{color:var(--text-3)}
.back-to-top{border:1px solid var(--border-2);background:var(--surface);border-radius:3px;transition:opacity .18s ease,background-color .18s ease,border-color .18s ease}
.back-to-top:hover{background:var(--elevated);border-color:var(--accent)}
.scroll-progress{background:var(--accent)}
.page-loader,.cursor-dot,.cursor-ring{display:none!important}
@media(max-width:1024px){.hero__inner{grid-template-columns:1fr;max-width:880px}.hero{min-height:auto}}
@media(max-width:768px){
 .header__right{display:none}
 .hero__inner{padding:64px var(--gutter) 56px;gap:40px}
 .hero__title{font-size:clamp(46px,12vw,72px)}
 .hero__metrics li{min-height:92px;padding:16px}
 .section{padding:76px var(--gutter)}
 .section__title{margin-bottom:32px}
 .strip__inner{justify-content:flex-start}
 .contact-right form{padding:22px}
}
@media(max-width:480px){
 .hero__actions{flex-direction:column;align-items:stretch}
 .hero__actions .btn{width:100%}
 .hero__metrics{grid-template-columns:1fr 1fr}
 .terminal{min-height:360px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* VEYRION / CINEMATIC PASS — restrained lighting, editorial typography, purposeful motion. */
:root{--bg:#080a0e;--bg-2:#0d1118;--surface:#111720;--elevated:#171f2a;--text:#f1f0ed;--text-2:#c0c3c8;--text-3:#8d96a3;--text-4:#697381;--border:rgba(235,238,242,.085);--border-2:rgba(235,238,242,.16);--accent:#c7a77b;--accent-2:#e0c49b;--accent-dim:rgba(199,167,123,.12);--radius:5px}
html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.header{background:rgba(8,10,14,.82);border-bottom:1px solid var(--border);backdrop-filter:blur(18px) saturate(135%)}.header__brand{color:var(--text);letter-spacing:.24em}.header__nav a{color:#a4aab4;transition:color .22s ease}.header__nav a:hover,.header__nav a.is-active{color:var(--accent-2)}.header__nav a::after{background:var(--accent);height:1px}
.header__cta{border:1px solid rgba(199,167,123,.42);color:var(--accent-2);border-radius:3px;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}.header__cta:hover{background:var(--accent);border-color:var(--accent);color:#111318;transform:translateY(-1px)}
.hero{position:relative;isolation:isolate;min-height:min(900px,calc(100svh - var(--nav-h)));overflow:hidden;background:radial-gradient(ellipse at 75% 48%,rgba(116,91,64,.13),transparent 39%),linear-gradient(118deg,#080a0e 0%,#0b1017 58%,#10141a 100%)}
.hero::before{content:"";position:absolute;z-index:-2;inset:-22%;pointer-events:none;background:radial-gradient(ellipse at 68% 42%,rgba(199,167,123,.16),transparent 30%),radial-gradient(ellipse at 18% 78%,rgba(71,104,121,.12),transparent 35%);filter:blur(36px);animation:veyrion-atmosphere 20s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.17;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:76px 76px;mask-image:radial-gradient(ellipse at 68% 46%,#000 0%,transparent 72%)}
.hero__grid{opacity:.45;background-image:linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);background-size:76px 76px;mask-image:radial-gradient(ellipse at 70% 45%,#000 0%,transparent 68%)}
.hero__orb{pointer-events:none;filter:blur(100px);opacity:.28;animation:veyrion-drift 22s ease-in-out infinite alternate}.hero__orb--one{background:#8d6c45}.hero__orb--two{background:#355565;animation-delay:-9s}
.hero__inner{max-width:1460px;padding-top:clamp(88px,12vh,144px);padding-bottom:clamp(76px,10vh,120px);gap:clamp(44px,7vw,104px)}
.hero__eyebrow{color:var(--accent-2);letter-spacing:.16em;font-size:10px}.hero__title{max-width:850px;color:#f3f1ed;font-size:clamp(54px,7.2vw,104px);font-weight:500;letter-spacing:-.075em;line-height:.94;text-wrap:balance}.hero__title span:last-child{color:var(--accent-2);text-shadow:0 0 42px rgba(199,167,123,.12)}
.hero__body{max-width:52ch;color:#b5bbc4;font-size:clamp(15px,1.15vw,17px);line-height:1.85}.hero__actions{gap:14px}
.btn{border-radius:3px;min-height:48px;transition:transform .24s cubic-bezier(.2,.75,.25,1),background .24s ease,border-color .24s ease,color .24s ease,box-shadow .24s ease}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#111318;box-shadow:0 8px 28px rgba(199,167,123,.12)}.btn--primary:hover{background:#dfc39a;border-color:#dfc39a;color:#111318;box-shadow:0 12px 34px rgba(199,167,123,.2)}
.hero__metrics{border-top:1px solid rgba(255,255,255,.11);border-left:1px solid rgba(255,255,255,.11);gap:0}.hero__metrics li{background:rgba(18,23,31,.76);border-color:rgba(255,255,255,.09);backdrop-filter:blur(12px);min-height:112px;transition:background .3s ease,transform .3s ease}.hero__metrics li:hover{background:rgba(32,39,49,.88);transform:translateY(-2px)}.metric__value{color:var(--accent-2);font-size:23px}.metric__label{color:#9ba3ae}
.terminal{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(20,26,35,.94),rgba(9,12,17,.96));border:1px solid rgba(199,167,123,.2);border-radius:5px;box-shadow:0 30px 90px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.035)}.terminal::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(224,196,155,.65),transparent)}
.terminal__bar{border-bottom-color:var(--border)}.terminal__title{color:#a4aab3}.terminal__log{color:#c3c8cf}.terminal__log .t-prompt,.terminal__log .t-key,.terminal__log .t-str{color:var(--accent-2)}.chip{border-color:rgba(255,255,255,.12)}.chip:hover,.chip.is-active{color:var(--accent-2);border-color:rgba(199,167,123,.55);background:var(--accent-dim)}
.strip{background:#090c11;border-color:var(--border)}.strip__inner span{color:#8f98a5;letter-spacing:.12em}
.section{position:relative;padding-top:clamp(88px,10vw,136px);padding-bottom:clamp(88px,10vw,136px)}.section--alt{background:linear-gradient(180deg,#0d1118 0%,#0b0f15 100%);border-top:1px solid rgba(255,255,255,.025);border-bottom:1px solid rgba(255,255,255,.025)}.section__label{color:var(--accent-2);letter-spacing:.12em}.section__label::after{background:linear-gradient(90deg,rgba(199,167,123,.4),transparent)}.section__title{color:#f0efeb;font-weight:500;letter-spacing:-.065em;text-wrap:balance}
.bento-card,.build,.principle,.status-card{background:linear-gradient(145deg,rgba(20,26,35,.94),rgba(14,18,25,.98));border:1px solid rgba(255,255,255,.085);border-radius:5px;box-shadow:inset 0 1px rgba(255,255,255,.025);transition:transform .32s cubic-bezier(.2,.75,.25,1),border-color .32s ease,background .32s ease,box-shadow .32s ease}
.bento-card:hover,.build:hover,.principle:hover{transform:translateY(-5px);border-color:rgba(199,167,123,.36);background:linear-gradient(145deg,rgba(27,34,45,.98),rgba(15,20,28,.99));box-shadow:0 22px 54px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.04)}
.bento-card__num,.build__kicker,.build__section-label{color:var(--accent)}.bento-card__title,.build__title{color:#f0efeb;font-weight:500;letter-spacing:-.045em}.bento-card__body,.build__section-body,.build__outcome,.principle__body{color:#adb5c0}.bento-card__tags span{color:#aab2bd;border-color:rgba(255,255,255,.12);border-radius:3px;background:rgba(255,255,255,.025)}
.arch__layers,.arch__detail,.estimator__controls,.estimator__output{background:rgba(16,21,29,.92);border-color:rgba(255,255,255,.09);border-radius:5px}.arch-layer{background:rgba(17,23,32,.9);border-bottom-color:var(--border)}.arch-layer.is-active{background:rgba(199,167,123,.09)}.arch-layer__id,.arch__detail-label,.timeline-step__num{color:var(--accent-2)}.arch__detail-title{color:#f0efeb}.arch__detail-body{color:#b3bbc5}
.service-item{border-color:rgba(255,255,255,.1)}.service-summary__title{color:#f0efeb}.service-summary__num{color:var(--accent)}.service-summary__icon{color:#aab2bd}
.estimator__select,.field input,.field textarea,.field select{background-color:#0b1017;border-color:rgba(255,255,255,.14);color:#f0efeb;border-radius:4px}.estimator__select:focus,.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(199,167,123,.1)}
.stack-marquee__track span{color:#bac1ca;border-color:rgba(255,255,255,.1);background:rgba(17,23,32,.8);border-radius:3px}
.contact-right form,.contact-page__form-wrap form{background:linear-gradient(145deg,rgba(18,24,33,.96),rgba(12,16,23,.98));border:1px solid rgba(255,255,255,.09);border-radius:6px;padding:clamp(24px,3.5vw,42px);box-shadow:0 24px 70px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035)}
.contact__legal,.field-help{color:#909aa7;font-size:12px;line-height:1.6}.field label{color:#d2d5da;font-size:12px}.field input,.field textarea,.field select{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(199,167,123,.35)}
.booking-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field--booking{min-width:0}.field-help{margin-top:6px}
.form-error{margin:4px 0 16px;padding:12px 14px;color:#f1c4b9;background:rgba(168,73,56,.12);border:1px solid rgba(201,110,91,.28);border-radius:4px;font-size:13px;line-height:1.5}.form-error[hidden]{display:none}.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
#form-success{padding:28px;background:linear-gradient(145deg,rgba(18,24,33,.96),rgba(12,16,23,.98));border:1px solid rgba(199,167,123,.25);border-radius:6px}#form-success h3{color:var(--accent-2);font-weight:500}#form-success p{color:#b6bec8}
.contact-page__side{background:rgba(17,23,32,.8);border-color:var(--border);border-radius:5px}.contact-page__block{border-color:var(--border)}.contact-page__label{color:var(--accent)}.contact-page__value{color:#d5d8dc}
.footer{background:#07090d;border-top-color:rgba(255,255,255,.08)}.footer__brand{color:#f1f0ed}.footer__tagline,.footer__copy{color:#87909d}.footer__nav a{color:#a3abb6;transition:color .2s ease}.footer__nav a:hover{color:var(--accent-2)}
.scroll-progress{background:linear-gradient(90deg,#98764e,#e0c49b);height:2px}.page-hero{background:radial-gradient(ellipse at 78% 28%,rgba(199,167,123,.13),transparent 36%),linear-gradient(120deg,#080a0e,#10151d);border-bottom:1px solid var(--border)}.page-hero__eyebrow{color:var(--accent-2);letter-spacing:.15em}.page-hero__title{color:#f1f0ed;letter-spacing:-.065em;font-weight:500}.page-hero__sub{color:#b6bec8}
@keyframes veyrion-atmosphere{0%{transform:translate3d(-1.5%,-1%,0) scale(1);opacity:.7}100%{transform:translate3d(2%,1.5%,0) scale(1.08);opacity:1}}
@keyframes veyrion-drift{0%{transform:translate3d(-24px,-18px,0) scale(.96)}100%{transform:translate3d(32px,22px,0) scale(1.08)}}
@media(max-width:768px){.hero__inner{padding-top:76px;padding-bottom:64px}.hero__title{font-size:clamp(48px,12vw,76px)}.booking-fields{grid-template-columns:1fr;gap:0}.contact-right form,.contact-page__form-wrap form{padding:22px}.hero::after{background-size:54px 54px}}
@media(max-width:420px){.hero__title{font-size:clamp(43px,12vw,58px)}.hero__metrics{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero::before,.hero__orb{animation:none!important}*,*::before,*::after{transition-duration:.01ms!important}}

.auth-nav{display:flex;align-items:center;gap:8px}.header__auth{font:500 11px var(--font-body);color:var(--text-2);border:1px solid var(--border-2);padding:8px 12px;border-radius:3px}.header__auth:hover{color:var(--accent-2);border-color:rgba(199,167,123,.5)}.header__auth--primary{background:rgba(199,167,123,.12);color:var(--accent-2)}.auth-modal[hidden]{display:none}.auth-modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px}.auth-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(12px)}.auth-modal__card{position:relative;width:min(460px,100%);max-height:90vh;overflow:auto;background:linear-gradient(145deg,#151b24,#0c1017);border:1px solid rgba(199,167,123,.28);border-radius:7px;padding:32px;box-shadow:0 30px 100px rgba(0,0,0,.5)}.auth-modal__close{position:absolute;right:16px;top:12px;color:var(--text-3);font-size:28px}.auth-modal__card h2{font:500 clamp(28px,6vw,40px)/1.05 var(--font-display);letter-spacing:-.05em;margin:6px 0 10px}.auth-modal__sub,.auth-modal__note{color:var(--text-2);font-size:13px}.auth-modal__note{margin-top:18px;color:var(--text-3);font-size:11px}.auth-form{display:grid;gap:14px;margin-top:22px}.auth-form[hidden]{display:none}.auth-error{min-height:20px;color:#e9a99b;font-size:12px}.auth-switch{margin-top:8px;color:var(--accent-2);font-size:12px}.auth-switch:hover{text-decoration:underline}@media(max-width:1024px){.auth-nav{display:none}}


/* ============================================================
   VEYRION / EDITORIAL SYSTEM — 2026
   A quieter, more considered visual language.
   ============================================================ */
:root {
  --bg: #efeee8;
  --bg-2: #e7e5dc;
  --bg-3: #dedbd0;
  --text: #1b1d19;
  --text-2: #50534c;
  --text-3: #74776e;
  --text-4: #96988e;
  --border: rgba(27,29,25,.13);
  --border-2: rgba(27,29,25,.25);
  --accent: #d95335;
  --accent-2: #b94b34;
  --radius: 0px;
  --gutter: clamp(22px, 5.4vw, 84px);
  --nav-h: 76px;
  --max: 1320px;
  --font-display: 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--bg); }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: #fffaf2; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 4px; }
.skip-link { background: var(--accent); color: #fff; }
.scroll-progress { background: var(--accent); height: 2px; }

/* Navigation */
.header { height: var(--nav-h); padding: 0 var(--gutter); background: rgba(239,238,232,.94); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.header__inner { max-width: 1500px; gap: clamp(14px,2vw,34px); }
.header__brand { position: relative; gap: 12px; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .19em; color: var(--text); white-space: nowrap; }
.header__brand::before { content: 'V'; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--text); font-family: 'Instrument Serif',serif; font-size: 19px; font-weight: 400; letter-spacing: 0; }
.header__nav { align-items: center; gap: clamp(13px,1.75vw,28px); }
.header__nav a { color: var(--text-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: .045em; text-transform: uppercase; transition: color .2s ease; }
.header__nav a:hover, .header__nav a.is-active { color: var(--accent); }
.header__nav a::after { background: var(--accent); height: 1px; bottom: -7px; }
.header__right { gap: 14px; }
.header__status { color: var(--text-3); font-size: 9px; letter-spacing: .06em; }
.header__dot { background: var(--accent); box-shadow: none; animation: none; }
.header__cta { color: var(--bg); background: var(--text); border: 1px solid var(--text); padding: 12px 16px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; transition: background .2s,color .2s,border-color .2s; }
.header__cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.auth-nav { display: flex; align-items: center; gap: 7px; }
.header__auth { min-height: 38px; padding: 0 12px; border: 1px solid var(--border-2); color: var(--text-2); font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; transition: .2s ease; }
.header__auth:hover { border-color: var(--text); color: var(--text); }
.header__auth--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.header__auth--primary:hover { background: var(--text); border-color: var(--text); color: #fff; }
.header__toggle { width: 46px; height: 46px; border: 1px solid var(--border-2); }
.header__toggle span { width: 18px; height: 1px; background: var(--text); }
.mobile-nav { background: var(--bg); color: var(--text); justify-content: flex-start; overflow-y: auto; padding: 100px var(--gutter) 40px; gap: 0; }
.mobile-nav::before { content: 'VEYRION / MENU'; position: absolute; top: 31px; left: var(--gutter); font: 10px var(--font-mono); letter-spacing: .16em; color: var(--text-3); }
.mobile-nav a { padding: 13px 0; border-bottom: 1px solid var(--border); color: var(--text); font-family: 'Instrument Serif',serif; font-size: clamp(34px,8vw,52px); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; }
.mobile-nav a:hover { color: var(--accent); }
.mobile-nav__close { top: 18px; right: var(--gutter); border: 1px solid var(--border-2); color: var(--text); }
.mobile-nav__account { display: flex; gap: 10px; margin-top: 28px; }
.mobile-nav__account button { min-height: 48px; flex: 1; padding: 0 14px; border: 1px solid var(--text); color: var(--text); font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.mobile-nav__account button[data-auth-signup] { background: var(--accent); border-color: var(--accent); color: #fff; }
.mobile-nav__account button[data-auth-logout] { background: var(--text); color: var(--bg); }

/* Hero */
.hero--editorial { min-height: min(820px,calc(100svh - var(--nav-h))); background: #1c201c; color: #f1eee6; overflow: hidden; position: relative; }
.hero--editorial::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg,black,transparent 92%); }
.hero--editorial .hero__inner { max-width: 1500px; min-height: inherit; padding: clamp(70px,9vw,132px) var(--gutter); grid-template-columns: minmax(0,1.02fr) minmax(340px,.98fr); gap: clamp(34px,6vw,100px); align-items: center; }
.hero--editorial .hero__eyebrow { display: flex; align-items: center; gap: 12px; color: #aaa99e; font: 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 31px; }
.eyebrow-mark { width: 7px; height: 7px; background: var(--accent); display: inline-block; }
.eyebrow-sep { color: var(--accent); }
.hero--editorial .hero__title { max-width: 740px; font-family: 'Instrument Serif',serif; font-size: clamp(68px,9.3vw,136px); line-height: .82; letter-spacing: -.045em; font-weight: 400; }
.hero--editorial .hero__title span { display: block; white-space: nowrap; }
.hero--editorial .hero__title em { display: block; margin: 13px 0 0 .12em; color: #e16a4d; font-style: italic; font-weight: 400; }
.hero--editorial .hero__body { max-width: 470px; margin-top: 36px; color: #c2c1b7; font-size: clamp(15px,1.35vw,17px); line-height: 1.75; }
.hero--editorial .hero__actions { align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.hero--editorial .btn { min-height: 52px; height: auto; padding: 0 19px; border-radius: 0; font: 10px var(--font-mono); letter-spacing: .05em; }
.hero--editorial .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.hero--editorial .btn--primary:hover { background: #f0eee7; border-color: #f0eee7; color: var(--text); }
.hero--editorial .btn--quiet { border-color: rgba(255,255,255,.24); color: #e8e6de; background: transparent; }
.hero--editorial .btn--quiet:hover { border-color: #e8e6de; color: #fff; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 64px; color: #898b81; font: 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.hero__meta span::before { content: '—'; color: var(--accent); margin-right: 8px; }
.hero-art { position: relative; min-height: 480px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(239,238,232,.23); padding: 17px 18px 16px; color: #e6e3da; background: rgba(255,255,255,.018); }
.hero-art::before,.hero-art::after { content: ''; position: absolute; width: 18px; height: 18px; border-color: var(--accent); border-style: solid; }
.hero-art::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.hero-art::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.hero-art__top,.hero-art__bottom { display: flex; justify-content: space-between; gap: 12px; color: #999a90; font: 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.hero-art__drawing { display: block; width: 100%; max-height: 420px; overflow: visible; }
.hero-art__bottom { color: #e2ded3; text-transform: none; letter-spacing: .02em; font-size: 10px; }
.hero__aside-note { max-width: 320px; margin: 18px 0 0 auto; color: #9c9e94; font: italic 17px 'Instrument Serif',serif; text-align: right; }

/* Editorial ribbon */
.strip--editorial { border: 0; background: #d95335; overflow: hidden; }
.strip--editorial .strip__inner { width: 100%; max-width: 1500px; margin: auto; padding: 17px var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 18px; animation: none; }
.strip--editorial span { color: #fff4ec; font: 10px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.strip--editorial i { color: rgba(255,255,255,.7); font-style: normal; font-size: 12px; }

/* General sections */
.section { padding: clamp(76px,9vw,128px) var(--gutter); }
.section--alt { background: var(--bg-2); }
.section__inner { max-width: 1320px; }
.section__label { color: var(--accent); font: 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.section__label::after { background: var(--border-2); }
.section__title { max-width: 850px; margin-bottom: clamp(30px,4vw,56px); font-family: 'Instrument Serif',serif; font-size: clamp(42px,6vw,76px); font-weight: 400; letter-spacing: -.025em; line-height: .98; }
.status-dash { gap: 0; background: var(--border); border-color: var(--border); }
.status-card { min-height: 132px; padding: 23px; background: var(--bg); }
.status-card__label { color: var(--accent); font: 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.status-card__value { color: var(--text-2); font-size: 13px; line-height: 1.6; }
.bento { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--border); border-color: var(--border); }
.bento-card { min-height: 250px; padding: clamp(20px,2.6vw,34px); background: var(--bg); border-radius: 0; box-shadow: none !important; }
.bento-card::before { display: none; }
.bento-card:hover { background: #e7e4da; transform: none; }
.bento-card__num { color: var(--accent); font: 10px var(--font-mono); }
.bento-card__title { color: var(--text); font-family: 'Instrument Serif',serif; font-size: clamp(25px,2.7vw,34px); font-weight: 400; letter-spacing: -.01em; }
.bento-card__body { max-width: 42ch; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.bento-card__tags span { border: 1px solid var(--border-2); border-radius: 0; color: var(--text-3); font: 9px var(--font-mono); }
.arch-layer,.service-item,.case-card,.blog-card,.process-step,.faq-item { border-radius: 0 !important; }
.arch-layer { background: var(--bg); border-color: var(--border); color: var(--text); }
.arch-layer:hover,.arch-layer.is-active { border-color: var(--accent); background: #e7e4da; }
.arch-layer__id,.service-summary__num { color: var(--accent); }
.arch-layer__desc,.service-panel p { color: var(--text-2); }
.service-item { border-color: var(--border); background: transparent; }
.service-summary { color: var(--text); }
.service-summary__icon { color: var(--accent); }
.stack-marquee { border-color: var(--border); }
.stack-marquee span { color: var(--text-2); }

/* Page headers, content pages, footer */
.page-hero { background: #1c201c; color: #f1eee6; padding: clamp(75px,9vw,130px) var(--gutter); }
.page-hero__eyebrow { color: #d96a4e; font: 10px var(--font-mono); letter-spacing: .12em; }
.page-hero__title { font: 400 clamp(52px,8vw,100px)/.9 'Instrument Serif',serif; letter-spacing: -.035em; }
.page-hero__body { max-width: 650px; color: #c2c1b7; }
.footer { background: #1c201c; color: #f1eee6; border-top: 0; }
.footer__tagline,.footer__nav a,.footer__legal { color: #aaa99e; }
.footer__brand { font-family: 'Instrument Serif',serif; font-size: 36px; letter-spacing: .02em; }
.footer__nav a:hover { color: #e16a4d; }

/* Buttons and forms */
.btn { min-height: 46px; height: auto; padding: 13px 18px; border-radius: 0; border-color: var(--border-2); color: var(--text); font: 10px var(--font-mono); letter-spacing: .05em; }
.btn--primary { background: var(--text); border-color: var(--text); color: var(--bg); box-shadow: none; }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
.field label { color: var(--text-2); font: 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.field input,.field select,.field textarea { min-height: 48px; border: 1px solid var(--border-2); border-radius: 0; background: rgba(255,255,255,.32); color: var(--text); font-size: 15px; }
.field input:focus,.field select:focus,.field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(217,83,53,.1); }
.field input::placeholder,.field textarea::placeholder { color: #999a90; }
.field-help,.contact__legal { color: var(--text-3); }
.contact-page__block { border-color: var(--border); }
.contact-page__label { color: var(--accent); font: 9px var(--font-mono); letter-spacing: .1em; }
.contact-page__value { color: var(--text); }
.contact-page__list { color: var(--text-2); }
.form-error,.auth-error { color: #b43d27; }

/* Account dialog */
.auth-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 18px; }
.auth-modal[hidden] { display: none; }
.auth-modal__backdrop { position: absolute; inset: 0; background: rgba(16,19,16,.76); backdrop-filter: blur(7px); }
.auth-modal__card { position: relative; width: min(100%,480px); max-height: min(88svh,760px); overflow-y: auto; padding: clamp(26px,5vw,42px); background: var(--bg); color: var(--text); border: 1px solid var(--border-2); border-radius: 0; box-shadow: 0 24px 90px rgba(0,0,0,.25); }
.auth-modal__card h2 { margin: 12px 0; font: 400 clamp(34px,6vw,48px)/.95 'Instrument Serif',serif; }
.auth-modal__sub,.auth-modal__note { color: var(--text-2); font-size: 13px; line-height: 1.6; }
.auth-modal__close { border: 1px solid var(--border-2); color: var(--text); width: 42px; height: 42px; }
.auth-form { display: grid; gap: 14px; margin-top: 22px; }
.auth-form[hidden] { display: none; }
.auth-form .btn { width: 100%; }
.auth-switch { margin-top: 18px; color: var(--accent); font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.auth-modal__note { margin-top: 20px; font-size: 11px; }
body.auth-open { overflow: hidden; }

/* Mobile-first refinements */
@media (max-width: 1100px) {
  .header__nav,.header__status { display: none; }
  .header__toggle { display: flex; }
  .header__right { margin-left: auto; }
  .header__cta { display: none; }
  .hero--editorial .hero__inner { grid-template-columns: 1fr minmax(300px,.85fr); gap: 32px; }
  .hero--editorial .hero__title { font-size: clamp(64px,8vw,100px); }
  .hero-art { min-height: 400px; }
}
@media (max-width: 760px) {
  :root { --nav-h: 66px; --gutter: 22px; }
  .header { height: var(--nav-h); }
  .header__brand { font-size: 13px; }
  .header__brand::before { width: 27px; height: 27px; }
  .header__right { gap: 6px; }
  .header__right .auth-nav { display: none; }
  .header__toggle { width: 44px; height: 44px; }
  .hero--editorial { min-height: auto; }
  .hero--editorial .hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: 48px; padding: 70px var(--gutter) 50px; }
  .hero--editorial .hero__eyebrow { flex-wrap: wrap; font-size: 9px; margin-bottom: 28px; }
  .hero--editorial .hero__title { font-size: clamp(58px,16vw,92px); line-height: .84; }
  .hero--editorial .hero__title span { white-space: normal; }
  .hero--editorial .hero__title em { margin-top: 9px; }
  .hero--editorial .hero__body { margin-top: 26px; font-size: 15px; line-height: 1.7; }
  .hero--editorial .hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .hero--editorial .btn { width: 100%; min-height: 50px; }
  .hero__meta { gap: 12px 18px; margin-top: 35px; font-size: 8px; }
  .hero-art { min-height: 300px; padding: 13px; }
  .hero-art__drawing { max-height: 270px; }
  .hero__aside-note { max-width: 280px; font-size: 15px; }
  .strip--editorial .strip__inner { justify-content: flex-start; overflow: hidden; flex-wrap: wrap; gap: 10px 14px; padding: 16px var(--gutter); }
  .strip--editorial span { font-size: 8px; }
  .strip--editorial i { display: none; }
  .section { padding: 72px var(--gutter); }
  .section__title { font-size: clamp(40px,12vw,60px); margin-bottom: 30px; }
  .status-dash { grid-template-columns: 1fr 1fr; }
  .status-card { min-height: 125px; padding: 16px; }
  .status-card__value { font-size: 12px; }
  .bento { grid-template-columns: 1fr; }
  .bento-card { min-height: auto; padding: 23px 20px; }
  .bento-card__title { font-size: 30px; }
  .page-hero { padding: 72px var(--gutter); }
  .page-hero__title { font-size: clamp(48px,13vw,74px); }
  .contact-page,.contact-layout,.contact-grid { grid-template-columns: 1fr !important; }
  .booking-fields { grid-template-columns: 1fr !important; }
  .field input,.field select,.field textarea { font-size: 16px; }
  .footer__inner { gap: 30px; }
  .footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
  .auth-modal { padding: 10px; align-items: end; }
  .auth-modal__card { width: 100%; max-height: 90svh; padding: 26px 20px calc(22px + env(safe-area-inset-bottom)); }
}
@media (max-width: 390px) {
  .hero--editorial .hero__title { font-size: 56px; }
  .hero-art { min-height: 260px; }
  .hero-art__top,.hero-art__bottom { font-size: 8px; }
  .status-dash { grid-template-columns: 1fr; }
  .mobile-nav a { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Content surfaces: editorial rules instead of floating AI cards */
.case-card,.blog-card,.process-step,.faq-item,.docs-card,.service-card,.feature-card,.status-panel,.architecture-card {
  border-radius:0 !important; box-shadow:none !important; background:var(--bg); border:1px solid var(--border);
}
.case-card:hover,.blog-card:hover,.service-card:hover,.feature-card:hover { transform:none !important; box-shadow:none !important; border-color:var(--accent); }
.case-card__title,.blog-card__title,.process-step__title,.faq-item__question { font-family:'Instrument Serif',serif; font-weight:400; letter-spacing:-.015em; }
.case-card__meta,.blog-card__meta,.process-step__num,.faq-item__num { color:var(--accent); font-family:var(--font-mono); }
.docs-sidebar { background:var(--bg-2); border-right:1px solid var(--border); }
.docs-sidebar a,.docs-nav a { color:var(--text-2); }
.docs-sidebar a:hover,.docs-nav a:hover { color:var(--accent); }
.docs-content,.docs-article { color:var(--text-2); }
.docs-content h1,.docs-content h2,.docs-content h3,.docs-article h1,.docs-article h2,.docs-article h3 { color:var(--text); font-family:'Instrument Serif',serif; font-weight:400; }
pre,code { border-radius:0 !important; }
pre { border:1px solid var(--border); background:#20231f !important; }
blockquote { border-left:2px solid var(--accent); background:transparent; color:var(--text-2); }

.contact-page__form-wrap form { background:var(--bg-2) !important; border:1px solid var(--border-2) !important; border-radius:0 !important; box-shadow:none !important; }
.contact-page__form-wrap .field input,.contact-page__form-wrap .field select,.contact-page__form-wrap .field textarea { background:#f6f4ed !important; color:var(--text) !important; border:1px solid var(--border-2) !important; }
.contact-page__form-wrap .field label { color:var(--text-2) !important; }
.contact-page__form-wrap .contact__legal { color:var(--text-3) !important; }
/* ============================================================
   VEYRION / CINEMATIC SYSTEM STUDY
   ============================================================ */
.hero { isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(ellipse at 74% 48%,rgba(217,90,59,.10),transparent 34%),radial-gradient(ellipse at 18% 78%,rgba(16,185,129,.055),transparent 36%); }
.hero__inner { perspective:1400px; }
.hero__left { position:relative; z-index:2; }
.hero__right { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; transform-style:preserve-3d; }
.hero-art { position:relative; isolation:isolate; width:min(100%,620px); min-height:470px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.008) 42%,rgba(217,90,59,.035)); box-shadow:0 30px 100px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.06); overflow:hidden; transform:rotateY(var(--scene-y,0deg)) rotateX(var(--scene-x,0deg)); transform-style:preserve-3d; transition:transform .18s ease-out,border-color .3s; }
.hero-art::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.55; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:32px 32px; mask-image:radial-gradient(ellipse at center,#000 18%,transparent 78%); }
.hero-art__top,.hero-art__bottom { position:absolute; z-index:4; left:20px; right:20px; display:flex; justify-content:space-between; gap:12px; font:9px var(--font-mono); letter-spacing:.14em; color:var(--text-3); text-transform:uppercase; }
.hero-art__top { top:18px; }
.hero-art__bottom { bottom:18px; color:var(--text-2); letter-spacing:.08em; }
.hero-art__drawing { position:absolute; width:100%; height:100%; inset:0; opacity:.16; transform:scale(.88); }
.hero-orbit { position:absolute; width:min(78%,440px); aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-50%) translateZ(65px); transform-style:preserve-3d; filter:drop-shadow(0 20px 35px rgba(0,0,0,.35)); }
.hero-orbit::before,.hero-orbit::after { content:""; position:absolute; inset:9%; border:1px solid rgba(255,255,255,.10); border-radius:50%; transform:rotateX(72deg) rotateZ(-22deg); }
.hero-orbit::after { inset:19%; border-color:rgba(217,90,59,.24); transform:rotateX(72deg) rotateZ(54deg); }
.hero-orbit__plane { position:absolute; inset:8%; border:1px solid rgba(255,255,255,.24); border-radius:50%; transform-style:preserve-3d; animation:orbit-spin 24s linear infinite; }
.hero-orbit__plane::before { content:""; position:absolute; inset:15%; border:1px dashed rgba(255,255,255,.14); border-radius:50%; }
.hero-orbit__plane i { position:absolute; top:7%; left:50%; width:9px; height:9px; border-radius:50%; background:#e16c4c; box-shadow:0 0 18px rgba(225,108,76,.9),0 0 42px rgba(225,108,76,.45); }
.hero-orbit__plane--one { transform:rotateX(68deg) rotateZ(0deg); }
.hero-orbit__plane--two { inset:15%; border-color:rgba(16,185,129,.36); transform:rotateX(68deg) rotateZ(70deg); animation-duration:31s; animation-direction:reverse; }
.hero-orbit__plane--two i { background:#10b981; box-shadow:0 0 18px rgba(16,185,129,.8); top:3%; }
.hero-orbit__plane--three { inset:2%; border-color:rgba(255,255,255,.12); transform:rotateY(66deg) rotateX(18deg); animation-duration:38s; }
.hero-orbit__plane--three i { width:6px; height:6px; background:#f2e8d8; box-shadow:0 0 15px rgba(255,255,255,.7); }
.hero-orbit__core { position:absolute; width:32%; aspect-ratio:1; left:34%; top:34%; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; background:radial-gradient(circle at 34% 28%,#34302e 0,#151617 42%,#08090a 78%); border:1px solid rgba(255,255,255,.24); box-shadow:inset 0 0 28px rgba(255,255,255,.08),0 0 60px rgba(217,90,59,.16),0 0 0 12px rgba(255,255,255,.018); transform:translateZ(42px); }
.hero-orbit__core::before { content:""; position:absolute; inset:-12px; border:1px solid rgba(217,90,59,.28); border-radius:50%; border-right-color:transparent; border-bottom-color:transparent; transform:rotate(-24deg); }
.hero-orbit__core-mark { font:500 clamp(34px,5vw,54px)/1 var(--font-display); letter-spacing:-.1em; padding-right:.1em; color:#f3eee6; text-shadow:0 0 24px rgba(217,90,59,.3); }
.hero-orbit__core-line { width:34px; height:1px; margin:10px 0 7px; background:#d95a3b; }
.hero-orbit__core-label { font:8px/1.5 var(--font-mono); letter-spacing:.18em; color:var(--text-3); text-align:center; }
.hero-orbit__satellite { position:absolute; z-index:3; padding:7px 10px; border:1px solid rgba(255,255,255,.16); background:rgba(8,9,10,.82); backdrop-filter:blur(12px); font:9px var(--font-mono); letter-spacing:.16em; color:var(--text-2); box-shadow:0 8px 24px rgba(0,0,0,.25); }
.hero-orbit__satellite--a { top:13%; right:4%; color:#e78a70; }
.hero-orbit__satellite--b { bottom:15%; left:0; color:#72d6b2; }
.hero-orbit__satellite--c { bottom:7%; right:12%; }
.hero-orbit__crosshair { position:absolute; width:18px; height:18px; opacity:.55; }
.hero-orbit__crosshair::before,.hero-orbit__crosshair::after { content:""; position:absolute; background:#d95a3b; }
.hero-orbit__crosshair::before { width:18px; height:1px; top:8px; }
.hero-orbit__crosshair::after { height:18px; width:1px; left:8px; }
.hero-orbit__crosshair--a { top:5%; left:18%; }
.hero-orbit__crosshair--b { bottom:12%; right:3%; transform:scale(.65); }
.hero-orbit__readout { position:absolute; left:50%; bottom:-5%; transform:translateX(-50%); display:flex; gap:12px; align-items:center; white-space:nowrap; font:8px var(--font-mono); letter-spacing:.14em; color:var(--text-4); }
.hero-orbit__readout strong { color:#d95a3b; font-weight:500; }
.hero__aside-note { max-width:440px; width:100%; padding:15px 2px 0; color:var(--text-3); font:10px/1.6 var(--font-mono); letter-spacing:.04em; }
@keyframes orbit-spin { to { rotate:360deg; } }
.hero__eyebrow { display:flex; align-items:center; gap:10px; }
.eyebrow-mark { display:inline-block; width:7px; height:7px; background:#d95a3b; border-radius:50%; box-shadow:0 0 12px rgba(217,90,59,.75); }
.hero__title em { display:block; font-style:normal; color:#d7a08f; }
.hero__actions .btn { position:relative; overflow:hidden; }
.hero__actions .btn::after { content:""; position:absolute; inset:0; transform:translateX(-120%); background:linear-gradient(100deg,transparent,rgba(255,255,255,.24),transparent); transition:transform .6s; }
.hero__actions .btn:hover::after { transform:translateX(120%); }
.section { position:relative; }
.section__inner { position:relative; }
.section__label { color:#b77a67; }
.section__title { text-wrap:balance; }
.status-card,.bento-card,.build-card,.arch-layer { transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,background .35s; }
.status-card:hover { transform:translateY(-5px); background:#101012; }
.build-card:hover,.bento-card:hover { transform:translateY(-6px); }
@media (max-width:960px) {
 .hero__right { width:100%; }
 .hero-art { min-height:420px; }
 .hero-orbit { width:min(72vw,390px); }
}
@media (max-width:600px) {
 .hero-art { min-height:330px; }
 .hero-art__top,.hero-art__bottom { left:12px; right:12px; font-size:7px; }
 .hero-orbit { width:min(82vw,320px); }
 .hero-orbit__satellite { padding:5px 7px; font-size:7px; }
 .hero-orbit__readout { bottom:-3%; font-size:6px; gap:7px; }
 .hero__aside-note { font-size:9px; }
 .hero__actions { flex-wrap:wrap; }
 .hero__actions .btn { min-height:46px; }
}
@media (prefers-reduced-motion:reduce) {
 .hero-orbit__plane { animation:none !important; }
 .hero-art { transform:none !important; transition:none !important; }
 .hero__actions .btn::after { display:none; }
}


/* ============================================================
   VEYRION / MOTION STUDY 02 — art direction + spatial interaction
   ============================================================ */
:root {
  --bg: #070809;
  --bg-2: #0b0d0e;
  --surface: #101314;
  --elevated: #15191a;
  --accent: #c6ff4d;
  --accent-2: #77e7d0;
  --accent-dim: rgba(198,255,77,.12);
  --text-2: #a6aeaa;
  --border: rgba(224,239,229,.105);
  --border-2: rgba(224,239,229,.19);
}
::selection { background: var(--accent); color: #080a08; }
body { background-image: radial-gradient(ellipse at 72% 7%, rgba(111,144,119,.095), transparent 36%), radial-gradient(ellipse at 8% 42%, rgba(198,255,77,.035), transparent 34%); }
.hero { isolation: isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.34; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(90deg,transparent,black 42%,black 90%,transparent); }
.hero__title { letter-spacing:-.075em; text-wrap:balance; }
.hero__title em { color:var(--accent); text-shadow:0 0 42px rgba(198,255,77,.13); }
.hero-art { isolation:isolate; overflow:hidden; transform-style:preserve-3d; will-change:transform; border-color:rgba(198,255,77,.22)!important; background:radial-gradient(ellipse at 50% 48%,rgba(198,255,77,.105),transparent 44%),linear-gradient(145deg,rgba(255,255,255,.035),transparent 42%),#0a0d0c!important; box-shadow:0 35px 100px rgba(0,0,0,.42),inset 0 0 70px rgba(198,255,77,.025); }
.hero-art::before { content:""; position:absolute; inset:-35%; z-index:-1; pointer-events:none; background:conic-gradient(from 0deg at 50% 50%,transparent 0 30%,rgba(198,255,77,.08) 37%,transparent 44% 70%,rgba(119,231,208,.07) 77%,transparent 84%); animation:veyrion-aura 26s linear infinite; }
.hero-art::after { content:""; position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.2; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.035) 4px,transparent 5px); mix-blend-mode:screen; }
.hero-art__atmosphere { position:absolute; inset:0; z-index:0; pointer-events:none; perspective:900px; }
.hero-art__atmosphere span { position:absolute; width:42%; aspect-ratio:1; left:29%; top:28%; border:1px solid rgba(198,255,77,.16); border-radius:50%; transform:rotateX(68deg) rotateZ(var(--spin,0deg)) translateZ(-28px); box-shadow:0 0 45px rgba(198,255,77,.05); animation:veyrion-ring 18s linear infinite; }
.hero-art__atmosphere span:nth-child(2) { width:64%; left:18%; top:17%; border-color:rgba(119,231,208,.14); animation-duration:27s; animation-direction:reverse; }
.hero-art__atmosphere span:nth-child(3) { width:86%; left:7%; top:7%; border-style:dashed; border-color:rgba(255,255,255,.12); animation-duration:42s; }
.hero-art__atmosphere i { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--accent); left:19%; top:30%; box-shadow:0 0 18px 5px rgba(198,255,77,.45); animation:veyrion-orbit-dot 12s linear infinite; }
.hero-art__drawing { position:relative; z-index:1; filter:drop-shadow(0 0 10px rgba(198,255,77,.13)); }
.hero-orbit { z-index:3; transform-style:preserve-3d; }
.hero-orbit__plane { border-color:rgba(198,255,77,.46)!important; box-shadow:0 0 24px rgba(198,255,77,.07); }
.hero-orbit__plane--two { border-color:rgba(119,231,208,.42)!important; }
.hero-orbit__core { box-shadow:0 0 70px rgba(198,255,77,.16),inset 0 0 24px rgba(198,255,77,.12); }
.hero-orbit__satellite { border-color:rgba(198,255,77,.34)!important; backdrop-filter:blur(14px); }
.btn { position:relative; isolation:isolate; overflow:hidden; transform:translateZ(0); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s!important; }
.btn::after { content:""; position:absolute; z-index:-1; inset:-1px; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.19) 48%,transparent 70%); transform:translateX(-130%); transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.btn:hover::after { transform:translateX(130%); }
.btn--primary { color:#080a08!important; background:var(--accent)!important; box-shadow:0 8px 28px rgba(198,255,77,.13); }
.btn--primary:hover { box-shadow:0 14px 42px rgba(198,255,77,.23); }
.bento-card,.build,.principle,.arch-layer,.service-item { transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s,background .35s,box-shadow .35s; }
.bento-card { position:relative; overflow:hidden; }
.bento-card::before,.build::before,.principle::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(360px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(198,255,77,.105),transparent 62%); transition:opacity .35s; }
.bento-card:hover::before,.build:hover::before,.principle:hover::before { opacity:1; }
.bento-card:hover,.build:hover,.principle:hover { border-color:rgba(198,255,77,.3); box-shadow:0 22px 60px rgba(0,0,0,.25); }
.bento-card__num,.build__kicker,.section__label { color:var(--accent)!important; }
.section__title { letter-spacing:-.065em; text-wrap:balance; }
.section { position:relative; }
.section--alt { background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 55%); }
.section__label::before { content:""; display:inline-block; width:18px; height:1px; margin:0 10px 4px 0; background:var(--accent); box-shadow:0 0 12px rgba(198,255,77,.6); }
.arch-layer[aria-pressed="true"],.arch-layer.is-active { border-color:rgba(198,255,77,.55)!important; box-shadow:inset 3px 0 var(--accent),0 0 30px rgba(198,255,77,.07); }
.stack-marquee__track { animation-duration:38s!important; }
.footer { border-top:1px solid rgba(198,255,77,.2); }
.footer__brand { color:var(--accent)!important; letter-spacing:.2em; }
.footer__copy { color:#7f8983!important; }
.scroll-progress { background:var(--accent)!important; box-shadow:0 0 12px rgba(198,255,77,.65); }
.cursor-dot { background:var(--accent)!important; box-shadow:0 0 12px rgba(198,255,77,.5); }
.cursor-ring.is-hot { border-color:var(--accent)!important; }
[data-motion-reveal] { will-change:transform,opacity; }
@keyframes veyrion-aura { to { transform:rotate(360deg); } }
@keyframes veyrion-ring { to { transform:rotateX(68deg) rotateZ(360deg) translateZ(-28px); } }
@keyframes veyrion-orbit-dot { from { transform:rotate(0deg) translateX(180px) rotate(0deg); } to { transform:rotate(360deg) translateX(180px) rotate(-360deg); } }
@media (max-width:900px) { .hero-art__atmosphere span:nth-child(3){width:94%;left:3%;top:3%;} }
@media (max-width:600px) { .hero::before{background-size:48px 48px;} .hero-art__atmosphere span{width:56%;left:22%;top:22%;} .hero-art__atmosphere span:nth-child(2){width:78%;left:11%;top:11%;} .hero-art__atmosphere span:nth-child(3){width:98%;left:1%;top:1%;} }
@media (prefers-reduced-motion:reduce) { .hero-art::before,.hero-art__atmosphere span,.hero-art__atmosphere i{animation:none!important;} .btn,.bento-card,.build,.principle{transition:none!important;} }


/* Account recovery and form status */
.auth-forgot { display:block; margin:12px auto 0; padding:4px 0; border:0; background:transparent; color:var(--text-2); font-size:12px; cursor:pointer; }
.auth-forgot:hover { color:var(--accent); }
.auth-error.is-success { color:var(--accent); }
.auth-forgot:disabled { opacity:.55; cursor:wait; }


/* ============================================================
   VEYRION / STUDIO SYSTEM — cohesive art direction
   Warm graphite, mineral neutrals and a restrained copper accent.
   ============================================================ */
:root {
  --bg:#090b09; --bg-2:#10120f; --surface:#151813; --elevated:#1c2019;
  --text:#f1ede4; --text-2:#c5bfb3; --text-3:#918b80; --text-4:#625e55;
  --border:rgba(239,231,216,.095); --border-2:rgba(239,231,216,.18);
  --accent:#cf7558; --accent-2:#b9a58e; --accent-dim:rgba(207,117,88,.13);
  --font-display:'Instrument Serif',Georgia,serif; --font-body:'DM Sans',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace; --radius:2px; --gutter:clamp(18px,4vw,48px);
}
html { scroll-padding-top:calc(var(--nav-h) + 18px); }
body { color:var(--text); background-color:var(--bg); background-image:radial-gradient(ellipse at 78% 4%,rgba(153,112,83,.075),transparent 38%),radial-gradient(ellipse at 5% 48%,rgba(92,105,82,.055),transparent 40%); font-family:var(--font-body); }
::selection { background:rgba(207,117,88,.36); color:#fff8ed; }
:focus-visible { outline:2px solid var(--accent)!important; outline-offset:4px; }
.header { z-index:80; background:rgba(9,11,9,.78); border-color:rgba(239,231,216,.085); backdrop-filter:blur(24px) saturate(125%); }
.header__inner { max-width:1500px; gap:clamp(10px,2vw,28px); }
.header__brand,.footer__brand { letter-spacing:.24em; }
.header__nav { gap:clamp(13px,1.8vw,26px); }
.header__nav a { font-size:10px; letter-spacing:.075em; color:#aaa498; }
.header__nav a::after { background:var(--accent); }
.header__right { gap:clamp(8px,1.25vw,18px); }
.header__status { color:#9c968b; font-size:8px; letter-spacing:.11em; }
.header__dot { background:var(--accent); box-shadow:0 0 13px rgba(207,117,88,.48); }
.header__auth { min-height:36px; padding:0 11px; border-color:rgba(239,231,216,.16); color:#c9c2b5; font:9px var(--font-mono); letter-spacing:.04em; }
.header__auth--primary { background:rgba(207,117,88,.12); border-color:rgba(207,117,88,.34); color:#f1d8cb; }
.header__cta { min-height:38px; border-color:rgba(207,117,88,.42); color:#f0d9cf; font-size:9px; letter-spacing:.05em; }
.header__toggle { border:1px solid rgba(239,231,216,.13); }
.header__toggle span { background:#e8dfd0; }
.mobile-nav { z-index:100; justify-content:flex-start; padding:calc(var(--nav-h) + 48px) clamp(24px,8vw,64px) 40px; gap:clamp(12px,2vh,22px); background:radial-gradient(ellipse at 90% 6%,rgba(207,117,88,.11),transparent 38%),#0b0d0a; overflow-y:auto; }
.mobile-nav[hidden] { display:none; }
.mobile-nav a { width:max-content; max-width:100%; color:#ddd5c8; font:clamp(35px,8vw,58px)/.95 var(--font-display); letter-spacing:-.025em; }
.mobile-nav a:hover,.mobile-nav a:focus-visible { color:var(--accent); }
.mobile-nav__close { top:calc(env(safe-area-inset-top) + 12px); right:16px; color:#d7cfc2; }
.mobile-nav__account { display:flex; flex-wrap:wrap; gap:10px; padding-top:22px; border-top:1px solid var(--border); }
.mobile-nav__account button { min-height:44px; padding:0 16px; border:1px solid var(--border-2); color:var(--text); font:10px var(--font-mono); }
.mobile-nav__account button[data-auth-signup] { background:var(--accent); color:#1a100d; border-color:var(--accent); }
.hero--editorial { min-height:min(850px,calc(100svh - var(--nav-h))); background:radial-gradient(ellipse at 76% 48%,rgba(146,116,88,.14),transparent 34%),linear-gradient(118deg,#171b16 0%,#1a1d18 45%,#111510 100%); }
.hero--editorial::before { opacity:.16; background-size:84px 84px; mask-image:linear-gradient(90deg,transparent,black 50%,black 78%,transparent); }
.hero--editorial .hero__inner { max-width:1540px; padding:clamp(58px,8vw,112px) var(--gutter) clamp(48px,7vw,88px); grid-template-columns:minmax(0,1fr) minmax(330px,.92fr); gap:clamp(24px,4vw,70px); }
.hero--editorial .hero__eyebrow { color:#bcb4a7; font-size:9px; letter-spacing:.13em; }
.eyebrow-mark { background:var(--accent); box-shadow:0 0 14px rgba(207,117,88,.5); }
.hero--editorial .hero__title { font-size:clamp(64px,8.2vw,124px); line-height:.84; letter-spacing:-.055em; }
.hero--editorial .hero__title em { color:#d9876c; text-shadow:0 12px 40px rgba(207,117,88,.12); }
.hero--editorial .hero__body { color:#c8c2b7; max-width:440px; font-size:clamp(14px,1.2vw,16px); line-height:1.75; }
.hero--editorial .btn { min-height:50px; padding-inline:18px; border-radius:1px; font-size:9px; transition:transform .32s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s,color .3s,box-shadow .3s; }
.hero--editorial .btn--primary { background:var(--accent); border-color:var(--accent); color:#160f0c; box-shadow:0 10px 28px rgba(207,117,88,.12); }
.hero--editorial .btn--primary:hover { background:#e2a18b; border-color:#e2a18b; color:#17100d; box-shadow:0 16px 36px rgba(207,117,88,.2); }
.hero--editorial .btn--quiet { color:#e8e0d4; border-color:rgba(239,231,216,.26); }
.hero__meta { color:#9f9a8f; font-size:8px; gap:clamp(12px,2vw,22px); margin-top:clamp(38px,5vw,64px); }
.hero__meta span::before { color:var(--accent); }
.hero__right { min-width:0; }
.hero-art { position:relative; min-height:clamp(390px,42vw,590px); display:block; overflow:visible!important; padding:0!important; border:0!important; color:#e9e1d5; background:transparent!important; box-shadow:none!important; transform-style:preserve-3d; }
.hero-art::before,.hero-art::after { display:none!important; }
.hero-art__atmosphere { inset:4% -8% 0; opacity:.82; filter:blur(1px); }
.hero-art__atmosphere span { border-color:rgba(207,117,88,.15); box-shadow:0 0 65px rgba(207,117,88,.04); }
.hero-art__atmosphere span:nth-child(2) { border-color:rgba(218,203,178,.12); }
.hero-art__atmosphere span:nth-child(3) { border-color:rgba(218,203,178,.075); }
.hero-art__atmosphere i { background:#d9876c; box-shadow:0 0 18px 5px rgba(207,117,88,.4); }
.hero-art__top,.hero-art__bottom { position:absolute; z-index:6; left:0; right:0; color:#aaa396; font:8px var(--font-mono); letter-spacing:.1em; }
.hero-art__top { top:2px; }
.hero-art__bottom { bottom:0; color:#c8beae; text-transform:none; letter-spacing:.02em; }
.hero-art__drawing { display:none!important; }
.hero__aside-note { color:#b1a99c; font:italic 17px var(--font-display); margin:22px 0 0 auto; }
.hero-orbit { position:absolute; z-index:2; inset:7% -2% 5%; width:auto; aspect-ratio:auto; left:auto; top:auto; transform:translateZ(0) rotateX(var(--drag-y,0deg)) rotateY(var(--drag-x,0deg)); transform-style:preserve-3d; filter:drop-shadow(0 22px 35px rgba(0,0,0,.2)); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; outline:none; }
.hero-orbit.is-dragging { cursor:grabbing; }
.hero-orbit::before,.hero-orbit::after { inset:10% 8%; border-color:rgba(218,203,178,.12); transform:rotateX(71deg) rotateZ(-22deg) translateZ(-22px); }
.hero-orbit::after { inset:18% 15%; border-color:rgba(207,117,88,.18); transform:rotateX(71deg) rotateZ(49deg) translateZ(-12px); }
.hero-orbit__plane { inset:8% 6%; border-color:rgba(218,203,178,.2); animation-duration:36s; }
.hero-orbit__plane::before { border-color:rgba(218,203,178,.12); }
.hero-orbit__plane i { background:#d9876c; box-shadow:0 0 18px rgba(207,117,88,.7),0 0 38px rgba(207,117,88,.25); }
.hero-orbit__plane--two { border-color:rgba(179,192,168,.24)!important; animation-duration:48s; }
.hero-orbit__plane--two i { background:#b6c2ad; box-shadow:0 0 14px rgba(182,194,173,.55); }
.hero-orbit__plane--three { border-color:rgba(218,203,178,.13); animation-duration:54s; }
.hero-stack { position:absolute; left:50%; top:47%; width:min(62%,360px); aspect-ratio:1; transform:translate(-50%,-50%) translateZ(40px) rotateX(58deg) rotateZ(-34deg); transform-style:preserve-3d; filter:drop-shadow(0 22px 22px rgba(0,0,0,.24)); }
.hero-stack__layer { position:absolute; left:9%; top:10%; width:82%; height:74%; border:1px solid rgba(231,216,192,.27); background:linear-gradient(145deg,rgba(219,211,193,.13),rgba(53,61,49,.34) 48%,rgba(15,20,15,.8)); box-shadow:inset 0 1px rgba(255,255,255,.11),0 22px 26px rgba(0,0,0,.16); clip-path:polygon(50% 0,100% 25%,100% 74%,50% 100%,0 74%,0 25%); display:flex; align-items:center; justify-content:center; transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s; }
.hero-stack__layer span { display:flex; gap:10px; align-items:center; color:rgba(239,231,216,.6); font:8px var(--font-mono); letter-spacing:.08em; transform:rotateZ(34deg) rotateX(-58deg); white-space:nowrap; }
.hero-stack__layer b { color:rgba(239,231,216,.86); font-weight:500; }
.hero-stack__layer i { position:absolute; width:4px; height:4px; border-radius:50%; right:18%; top:30%; background:var(--accent); box-shadow:0 0 18px 3px rgba(207,117,88,.55); }
.hero-stack__layer--interface { transform:translateZ(132px) translateY(-12px); background:linear-gradient(140deg,rgba(219,163,133,.3),rgba(70,68,54,.55) 50%,rgba(19,23,18,.82)); animation:veyrion-layer-breathe 7s ease-in-out infinite; }
.hero-stack__layer--api { transform:translateZ(104px) translateY(-7px); }
.hero-stack__layer--flow { transform:translateZ(76px); background:linear-gradient(140deg,rgba(174,188,164,.21),rgba(49,58,48,.54),rgba(17,22,17,.82)); }
.hero-stack__layer--services { transform:translateZ(48px) translateY(5px); border-color:rgba(207,117,88,.42); }
.hero-stack__layer--data { transform:translateZ(20px) translateY(10px); }
.hero-stack__layer--infra { transform:translateZ(-8px) translateY(15px); background:linear-gradient(140deg,rgba(218,203,178,.1),rgba(19,25,19,.9)); }
.hero-stack__core { position:absolute; left:43%; top:40%; z-index:8; width:14%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 32% 28%,#f1c3aa,#a95841 48%,#2a1c18 76%); border:1px solid rgba(247,218,196,.7); box-shadow:0 0 38px rgba(207,117,88,.35),0 0 0 12px rgba(207,117,88,.045); transform:translateZ(145px); color:#2a1711; font:italic 23px var(--font-display); }
.hero-orbit__satellite { border:1px solid rgba(222,208,187,.2)!important; border-radius:1px!important; background:rgba(19,24,18,.42)!important; color:#d9cfc0!important; font:8px var(--font-mono)!important; letter-spacing:.12em; padding:7px 10px!important; backdrop-filter:blur(10px); }
.hero-orbit__satellite--a { top:18%; left:8%; }
.hero-orbit__satellite--b { top:67%; right:8%; }
.hero-orbit__satellite--c { bottom:12%; left:13%; }
.hero-orbit__crosshair { border-color:rgba(207,117,88,.36)!important; }
.hero-orbit__readout { position:absolute; left:50%; bottom:3%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; color:#a99e8d; white-space:nowrap; font:7px var(--font-mono); letter-spacing:.1em; }
.hero-orbit__readout strong { color:#e5b5a0; font-weight:500; }
.hero-orbit__hint { position:absolute; left:50%; top:4%; transform:translateX(-50%); display:flex; gap:8px; align-items:center; color:rgba(229,218,201,.54); white-space:nowrap; font:7px var(--font-mono); letter-spacing:.12em; }
.drag-icon { color:var(--accent); font-size:14px; }
.hero-orbit__hint i { font-style:normal; color:var(--accent); }
@keyframes veyrion-layer-breathe { 0%,100%{filter:brightness(.94)} 50%{filter:brightness(1.08)} }
.strip--editorial { background:#b85e45; }
.strip--editorial .strip__inner { padding-block:15px; }
.strip--editorial span { font-size:9px; letter-spacing:.11em; }
.section { padding:clamp(72px,8vw,118px) var(--gutter); }
.section__inner { width:100%; max-width:1320px; margin-inline:auto; }
.section__label { color:var(--accent)!important; font-size:9px; letter-spacing:.13em; }
.section__label::before { background:var(--accent); box-shadow:0 0 10px rgba(207,117,88,.4); }
.section__title { max-width:900px; color:var(--text); font:400 clamp(42px,6vw,78px)/.97 var(--font-display); letter-spacing:-.035em; text-wrap:balance; }
.section__title em { color:var(--accent); font-weight:400; }
.status-dash { border-color:var(--border); background:var(--border); }
.status-card { background:rgba(18,21,17,.78); }
.status-card__label,.bento-card__num,.build__kicker { color:var(--accent)!important; }
.bento-card,.build,.principle { background:linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.008)); border-color:var(--border); }
.bento-card:hover,.build:hover,.principle:hover { border-color:rgba(207,117,88,.36); box-shadow:0 24px 65px rgba(0,0,0,.28); }
.arch { background:transparent; border:0; gap:clamp(22px,4vw,56px); align-items:stretch; }
.arch__layers { gap:0; background:transparent; }
.arch-layer { background:transparent; border-bottom-color:var(--border); padding:15px 8px; }
.arch-layer.is-active { background:linear-gradient(90deg,rgba(207,117,88,.09),transparent); box-shadow:inset 2px 0 var(--accent); }
.arch-layer.is-dimmed { opacity:.48; }
.arch__detail { background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); border:1px solid var(--border); padding:clamp(24px,3vw,42px); }
.arch__detail-label { color:var(--accent); }
.arch__detail-title { margin:0; }
.arch__detail-body { margin:0; }
.service-item { border-color:var(--border); }
.service-summary { min-height:72px; }
.service-summary__icon { color:var(--accent); }
.estimator { border-color:var(--border); background:rgba(255,255,255,.015); }
.estimator__output { background:rgba(255,255,255,.018); }
.stack-marquee { border-block-color:var(--border); }
.stack-marquee__track span { color:#c2b9aa; }
.builds-eyebrow { color:var(--text-3); }
.timeline-step__num,.principle__quote { color:var(--accent); }
.contact-layout { gap:clamp(30px,6vw,90px); }
.contact-right { border-color:var(--border); }
.field input,.field select,.field textarea { border-color:var(--border-2); background:rgba(255,255,255,.025); color:var(--text); min-height:46px; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--accent); outline:0; box-shadow:0 0 0 3px rgba(207,117,88,.1); }
.footer { border-top-color:var(--border-2); background:#080a08; }
.footer__brand { color:var(--accent)!important; }
.footer__copy { color:var(--text-3)!important; }
.scroll-progress { background:var(--accent)!important; box-shadow:0 0 12px rgba(207,117,88,.36); }
.back-to-top { border-color:rgba(207,117,88,.36); background:rgba(15,18,14,.86); color:#f1e7d8; }
.auth-modal__card { border-color:rgba(207,117,88,.28); background:#141713; }
.auth-modal__card h2 { font-family:var(--font-display); font-weight:400; }
.auth-modal__close { color:var(--text-2); }
.auth-form .btn--primary { background:var(--accent); border-color:var(--accent); color:#160f0c; }
/* Interactive system study */
.section--lab { position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.008),transparent 68%); }
.section--lab::before { content:""; position:absolute; width:56vw; aspect-ratio:1; right:-23vw; top:5%; border-radius:50%; background:radial-gradient(circle,rgba(207,117,88,.07),transparent 68%); pointer-events:none; }
.lab-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.42fr); align-items:end; column-gap:42px; margin-bottom:28px; }
.lab-intro .section__label { grid-column:1/-1; margin-bottom:22px; }
.lab-intro .section__title { margin:0; }
.lab-intro__copy { max-width:31ch; color:var(--text-3); font-size:13px; line-height:1.7; padding-bottom:6px; }
.system-lab { position:relative; border-top:1px solid var(--border-2); border-bottom:1px solid var(--border-2); background:radial-gradient(ellipse at 50% 54%,rgba(169,145,117,.09),transparent 54%); }
.system-lab__topline { display:flex; justify-content:space-between; gap:16px; padding:17px 0; border-bottom:1px solid var(--border); color:var(--text-3); font:8px var(--font-mono); letter-spacing:.13em; }
.system-lab__topline span:last-child { display:flex; align-items:center; gap:8px; }
.system-lab__topline i { width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(207,117,88,.6); }
.system-lab__controls { display:flex; gap:clamp(10px,2vw,26px); padding:16px 0 4px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.system-lab__controls::-webkit-scrollbar { display:none; }
.lab-tab { position:relative; display:flex; align-items:center; gap:10px; flex:0 0 auto; padding:8px 0 15px; color:#8d887e; font:11px var(--font-body); white-space:nowrap; transition:color .25s; }
.lab-tab span { color:#6b665c; font:8px var(--font-mono); }
.lab-tab::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .32s; }
.lab-tab:hover,.lab-tab.is-active { color:var(--text); }
.lab-tab.is-active::after { transform:scaleX(1); }
.lab-tab.is-active span { color:var(--accent); }
.system-lab__stage { position:relative; height:clamp(260px,32vw,370px); overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 50% 50%,rgba(146,135,112,.085),transparent 60%); }
.system-lab__stage::before { content:""; position:absolute; inset:0; opacity:.19; background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse,black,transparent 76%); }
.lab-connections { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.lab-path { fill:none; stroke:rgba(215,204,185,.16); stroke-width:1.1; vector-effect:non-scaling-stroke; }
.lab-path--lower { stroke-dasharray:3 8; opacity:.65; }
.lab-path--active { stroke:rgba(207,117,88,.65); stroke-width:1.6; stroke-dasharray:5 8; animation:lab-flow 12s linear infinite; filter:drop-shadow(0 0 6px rgba(207,117,88,.24)); }
.lab-path__pulse { fill:#e4a084; filter:drop-shadow(0 0 8px rgba(207,117,88,.9)); }
.lab-path__pulse--two { fill:#bdc9b4; filter:drop-shadow(0 0 8px rgba(189,201,180,.7)); }
.lab-route--automation,.lab-route--operations,.lab-route--data,.lab-pulse--automation,.lab-pulse--operations,.lab-pulse--data { opacity:0; }
.system-lab[data-mode="automation"] .lab-route--automation,.system-lab[data-mode="automation"] .lab-pulse--automation { opacity:1; }
.system-lab[data-mode="operations"] .lab-route--operations,.system-lab[data-mode="operations"] .lab-pulse--operations { opacity:1; }
.system-lab[data-mode="data"] .lab-route--data,.system-lab[data-mode="data"] .lab-pulse--data { opacity:1; }
.system-lab[data-mode="data"] .lab-route--data { stroke:rgba(187,199,177,.78); }
@keyframes lab-flow { to { stroke-dashoffset:-104; } }
.lab-node { position:absolute; z-index:2; width:clamp(112px,14vw,150px); min-height:78px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:13px 14px; border-left:1px solid rgba(207,117,88,.5); border-bottom:1px solid rgba(239,231,216,.2); background:linear-gradient(140deg,rgba(34,38,31,.92),rgba(17,20,16,.55)); backdrop-filter:blur(10px); box-shadow:0 18px 32px rgba(0,0,0,.15); transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s; }
.lab-node::after { content:""; position:absolute; width:5px; height:5px; right:12px; top:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(207,117,88,.7); }
.lab-node__index { color:var(--accent); font:8px var(--font-mono); }
.lab-node strong { color:#eee7db; font:500 14px var(--font-display); }
.lab-node small { color:#938d82; font:8px var(--font-mono); }
.lab-node--one { left:5%; top:calc(50% - 39px); }
.lab-node--two { left:28%; top:calc(25% - 39px); }
.lab-node--three { right:28%; top:calc(25% - 39px); }
.lab-node--four { right:5%; top:calc(50% - 39px); }
.system-lab[data-mode="operations"] .lab-node--two { top:calc(68% - 39px); }
.system-lab[data-mode="operations"] .lab-node--three { top:calc(68% - 39px); }
.system-lab[data-mode="operations"] .lab-path--active { stroke:rgba(207,117,88,.78); }
.system-lab[data-mode="data"] .lab-node--two { top:calc(25% - 39px); }
.system-lab[data-mode="data"] .lab-node--three { top:calc(68% - 39px); }
.system-lab[data-mode="data"] .lab-path--active { stroke:rgba(187,199,177,.7); }
.lab-stage-caption { position:absolute; right:0; bottom:13px; left:0; display:flex; justify-content:space-between; color:#7c786e; font:7px var(--font-mono); letter-spacing:.12em; }
.system-lab__footer { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:28px; padding:20px 0 22px; border-top:1px solid var(--border); }
.lab-kicker { display:block; margin-bottom:9px; color:var(--accent); font:8px var(--font-mono); letter-spacing:.12em; }
.lab-explanation p { max-width:56ch; color:#b1aa9e; font-size:12px; line-height:1.7; }
.lab-readout strong { color:#e2d9cb; font:12px var(--font-display); font-weight:400; line-height:1.4; }
.system-lab__footnote { padding:10px 0; border-top:1px solid var(--border); color:#716b61; font:7px var(--font-mono); letter-spacing:.12em; }
/* Exploded architecture model */
.arch { grid-template-columns:minmax(210px,.82fr) minmax(250px,1fr); }
.arch__layers { grid-column:1; grid-row:1; }
.arch-model { grid-column:2; grid-row:1; min-width:0; display:flex; flex-direction:column; align-items:stretch; }
.arch-model__heading { display:flex; justify-content:space-between; gap:12px; color:#8e887c; font:7px var(--font-mono); letter-spacing:.12em; }
.arch-model__heading span:last-child { color:var(--accent); }
.arch-model__stage { position:relative; min-height:300px; flex:1; display:grid; place-items:center; perspective:1000px; overflow:hidden; touch-action:none; cursor:grab; }
.arch-model__stage.is-dragging { cursor:grabbing; }
.arch-model__stage::before { content:""; position:absolute; width:86%; aspect-ratio:1.45; border:1px solid rgba(207,117,88,.13); border-radius:50%; transform:rotateX(68deg) rotateZ(-30deg); box-shadow:0 0 70px rgba(207,117,88,.05); }
.arch-model__stage::after { content:""; position:absolute; width:62%; aspect-ratio:1.2; border:1px dashed rgba(228,216,195,.13); border-radius:50%; transform:rotateX(68deg) rotateZ(52deg); }
.arch-model__stack { position:relative; width:220px; height:190px; transform-style:preserve-3d; transform:rotateX(calc(58deg + var(--drag-y,0deg))) rotateZ(calc(-34deg + var(--drag-x,0deg))); transition:transform .18s ease-out; }
.arch-model__plate { position:absolute; left:10%; top:10%; width:80%; height:80%; display:flex; align-items:center; justify-content:center; gap:12px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); border:0; background:linear-gradient(140deg,rgba(196,179,151,.22),rgba(47,56,46,.76) 50%,rgba(15,18,15,.9)); transform:translateZ(var(--layer-z,0px)); box-shadow:inset 0 1px rgba(255,255,255,.14); color:#e9dfd0; transition:filter .25s,background .25s; }
.arch-model__plate::before { content:""; position:absolute; inset:7%; border:1px solid rgba(228,216,195,.14); clip-path:inherit; }
.arch-model__plate span { color:var(--accent); font:9px var(--font-mono); transform:rotateZ(34deg) rotateX(-58deg); }
.arch-model__plate b { color:rgba(239,231,216,.78); font:8px var(--font-mono); letter-spacing:.08em; transform:rotateZ(34deg) rotateX(-58deg); }
.arch-model__plate.is-active { background:linear-gradient(140deg,rgba(207,117,88,.44),rgba(67,56,46,.82) 50%,rgba(17,20,16,.92)); filter:brightness(1.18); }
.arch-model__axis { position:absolute; width:1px; height:75%; background:linear-gradient(transparent,rgba(207,117,88,.55),transparent); transform:rotate(45deg); opacity:.45; }
.arch-model__axis--y { transform:rotate(-45deg); background:linear-gradient(transparent,rgba(185,197,174,.42),transparent); }
.arch-model__hint { color:#817b70; font:9px/1.6 var(--font-mono); text-align:center; margin:0 10px 12px; }
.arch__detail { grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:minmax(130px,.3fr) 1fr 1.3fr; align-items:center; gap:18px; }
.arch__detail-title { margin:0; }
.arch__detail-body { margin:0; }
/* All-page responsiveness and touch targets */
@media(max-width:1100px) {
 .header__nav,.header__status { display:none; }
 .header__toggle { display:flex; }
 .header__right { margin-left:auto; }
 .header__cta { display:none; }
 .hero--editorial .hero__inner { grid-template-columns:minmax(0,1fr) minmax(290px,.9fr); gap:24px; }
}
@media(max-width:860px) {
 .hero--editorial { min-height:auto; }
 .hero--editorial .hero__inner { grid-template-columns:1fr; gap:18px; padding-top:58px; }
 .hero--editorial .hero__title { font-size:clamp(65px,12vw,106px); }
 .hero--editorial .hero__body { margin-top:25px; }
 .hero__meta { margin-top:34px; }
 .hero-art { min-height:clamp(350px,68vw,500px); max-width:700px; width:100%; margin-inline:auto; }
 .hero__aside-note { margin-top:0; }
 .arch { grid-template-columns:1fr 1fr; }
 .arch__detail { grid-template-columns:1fr 1.2fr; }
 .arch__detail-body { grid-column:1/-1; }
}
@media(max-width:680px) {
 :root { --nav-h:64px; --gutter:19px; }
 .header { padding-inline:var(--gutter); }
 .header__inner { gap:8px; }
 .header__brand { font-size:12px; letter-spacing:.2em; }
 .header__right { gap:0; }
 .auth-nav { display:none!important; }
 .header__toggle { width:42px; height:42px; flex:0 0 42px; }
 .hero--editorial .hero__inner { padding:47px var(--gutter) 42px; gap:12px; }
 .hero--editorial .hero__title { font-size:clamp(56px,13.8vw,84px); line-height:.84; }
 .hero--editorial .hero__title span { white-space:normal; }
 .hero--editorial .hero__body { max-width:38ch; font-size:14px; margin-top:24px; }
 .hero--editorial .hero__actions { margin-top:26px; gap:9px; }
 .hero--editorial .btn { min-height:48px; padding-inline:14px; font-size:8px; }
 .hero__meta { gap:12px; font-size:7px; margin-top:30px; }
 .hero-art { min-height:clamp(310px,88vw,390px); margin-top:0; }
 .hero-art__top,.hero-art__bottom { font-size:7px; }
 .hero-orbit { inset:7% -8% 5%; }
 .hero-stack { width:min(74%,300px); }
 .hero-stack__layer span { font-size:6px; gap:6px; }
 .hero-orbit__satellite { font-size:6px!important; padding:5px 7px!important; }
 .hero-orbit__hint { font-size:6px; top:1%; }
 .hero-orbit__readout { font-size:6px; gap:8px; bottom:0; }
 .hero__aside-note { max-width:260px; font-size:15px; }
 .strip--editorial .strip__inner { width:max-content; justify-content:flex-start; gap:18px; animation:scroll-strip 34s linear infinite; }
 .section { padding-block:68px; }
 .section__title { font-size:clamp(40px,11vw,58px); }
 .lab-intro { display:block; }
 .lab-intro .section__label { margin-bottom:18px; }
 .lab-intro__copy { max-width:42ch; margin-top:17px; }
 .system-lab__topline { font-size:7px; }
 .system-lab__controls { gap:17px; }
 .lab-tab { font-size:10px; }
 .system-lab__stage { height:390px; }
 .lab-node { width:112px; min-height:70px; padding:10px; }
 .lab-node--one { left:2%; top:calc(50% - 35px); }
 .lab-node--two { left:auto; right:3%; top:8%; }
 .lab-node--three { left:3%; right:auto; top:auto; bottom:9%; }
 .lab-node--four { right:3%; top:calc(50% - 35px); }
 .system-lab[data-mode="operations"] .lab-node--two { top:8%; }
 .system-lab[data-mode="operations"] .lab-node--three { bottom:9%; top:auto; }
 .system-lab[data-mode="data"] .lab-node--two { top:8%; }
 .system-lab[data-mode="data"] .lab-node--three { bottom:9%; top:auto; }
 .lab-connections { transform:rotate(90deg) scale(1.14); }
 .lab-path--active { opacity:.75; }
 .lab-stage-caption { bottom:7px; font-size:6px; }
 .system-lab__footer { grid-template-columns:1fr 1fr; gap:18px 14px; }
 .lab-explanation { grid-column:1/-1; }
 .lab-readout strong { font-size:11px; }
 .arch { display:flex; flex-direction:column; gap:20px; }
 .arch__layers { order:1; }
 .arch-model { order:2; }
 .arch__detail { order:3; display:block; padding:22px; }
 .arch__detail-title { margin:10px 0; }
 .arch-model__stage { min-height:270px; }
 .arch-model__stack { transform:rotateX(calc(58deg + var(--drag-y,0deg))) rotateZ(calc(-34deg + var(--drag-x,0deg))); }
 .arch-layer { padding:13px 5px; }
 .contact-layout { grid-template-columns:1fr; }
 .contact-right { padding:20px 16px; }
 .footer__inner { gap:24px; }
}
@media(max-width:390px) {
 .header__brand { font-size:11px; }
 .hero--editorial .hero__title { font-size:55px; }
 .hero--editorial .hero__actions .btn { font-size:7px; padding-inline:11px; }
 .system-lab__stage { height:360px; }
 .lab-node { width:103px; }
}
@media(hover:none) {
 .bento-card:hover,.build:hover,.principle:hover,.status-card:hover { transform:none; }
 .hero-orbit__hint { color:rgba(229,218,201,.74); }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
 .lab-path--active { animation:none!important; }
 .hero-stack__layer--interface { animation:none!important; }
}
.v-reveal { opacity:0; transform:translate3d(0,18px,0); transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1); }
.v-reveal.is-in-view { opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){.v-reveal{opacity:1!important;transform:none!important;transition:none!important;}}

/* ============================================================
   VEYRION / CINEMATIC NAV + HUMAN LAYER
   ============================================================ */
.header {
  height: 78px;
  background: rgba(5,5,5,.58);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}
.header::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(207,117,88,.55), transparent);
  opacity:.55;
}
.header__inner { max-width: 1480px; }
.header__brand {
  position:relative; letter-spacing:.34em; font-size:14px;
  padding:10px 14px 10px 0;
}
.header__brand::before {
  content:""; position:absolute; left:-18px; top:50%; width:8px; height:8px;
  border:1px solid rgba(207,117,88,.7); transform:translateY(-50%) rotate(45deg);
}
.header__nav {
  gap: 6px; padding: 5px; border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025); border-radius:999px;
}
.header__nav a {
  padding:8px 12px; border-radius:999px; font-size:10px;
  letter-spacing:.09em; color:#8f8f96; transition:all .25s ease;
}
.header__nav a::after { display:none; }
.header__nav a:hover, .header__nav a.is-active {
  color:#fff; background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.header__right { gap:12px; }
.header__status { display:flex; }
.header__cta {
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  padding:10px 15px; color:#ddd; background:rgba(255,255,255,.035);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.header__cta:hover { transform:translateY(-1px); border-color:rgba(207,117,88,.55); background:rgba(207,117,88,.08); }
.header__account {
  display:inline-flex; align-items:center; gap:8px; min-height:38px;
  padding:0 13px; border-radius:999px; color:#d9d9dc;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.025);
  font-family:var(--font-body); font-size:12px; letter-spacing:0;
  transition:all .25s ease;
}
.header__account span { color:#cf7558; transition:transform .25s ease; }
.header__account:hover { color:#fff; border-color:rgba(207,117,88,.45); background:rgba(207,117,88,.07); }
.header__account:hover span { transform:translate(2px,-2px); }
@media (max-width: 1120px) {
  .header__nav { display:none; }
}
@media (max-width: 768px) {
  .header__status, .header__cta { display:none; }
  .header__account { margin-left:auto; }
}
.hero-art {
  border-radius:28px !important;
  border-color:rgba(255,255,255,.09) !important;
  box-shadow:0 30px 100px rgba(0,0,0,.35), inset 0 0 80px rgba(207,117,88,.035);
}
.hero-art::before {
  content:""; position:absolute; inset:12px; border:1px solid rgba(207,117,88,.12);
  border-radius:20px; pointer-events:none; z-index:4;
}
.hero-orbit__satellite {
  box-shadow:0 0 30px rgba(207,117,88,.12);
}
.page-hero {
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:""; position:absolute; width:60vw; height:60vw; max-width:800px; max-height:800px;
  right:-25vw; top:-45vw; border:1px solid rgba(207,117,88,.12); border-radius:50%;
  box-shadow:0 0 120px rgba(207,117,88,.05);
}
.page-hero__inner { position:relative; z-index:1; }
.page-hero__title { max-width:11ch; }
.service-showcase {
  display:grid; grid-template-columns:1.1fr .9fr; gap:1px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08);
}
.service-showcase > * { background:#080809; padding:34px; }
.service-showcase__lead { min-height:340px; display:flex; flex-direction:column; justify-content:space-between; }
.service-showcase__lead h2 { font-family:var(--font-display); font-size:clamp(34px,5vw,68px); line-height:.95; letter-spacing:-.045em; }
.service-showcase__lead h2 em { font-family:"Instrument Serif",serif; font-weight:400; color:#cf7558; }
.service-list { display:grid; gap:1px; background:rgba(255,255,255,.08); }
.service-list a { padding:20px 22px; background:#0c0c0e; display:flex; justify-content:space-between; gap:20px; transition:background .25s, transform .25s; }
.service-list a:hover { background:#111114; transform:translateX(5px); }
.service-list small { color:#71717a; font-family:var(--font-mono); }
.service-list strong { font-size:15px; font-weight:500; }
@media(max-width:800px){ .service-showcase{grid-template-columns:1fr;} .service-showcase__lead{min-height:260px;} }

/* ============================================================
   VEYRION ATLAS / CINEMATIC GLOBAL NAVIGATION
   ============================================================ */
:root{--ink:#111214;--paper:#e9e6df;--line:rgba(17,18,20,.14);--quiet:#686a70;--accent:#8d9390}
body{background:var(--paper);color:var(--ink)}
.header{position:sticky!important;top:0;z-index:900;height:64px;background:rgba(233,230,223,.86)!important;color:var(--ink);border-bottom:1px solid rgba(17,18,20,.12)!important;backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);transition:transform .35s ease,background .3s ease}
.header__inner{height:100%;max-width:1500px}
.header__brand{color:var(--ink)!important}
.header__nav{background:rgba(17,18,20,.045)!important;border:1px solid rgba(17,18,20,.09)!important}
.header__nav a{color:#5e6065!important}
.header__nav a:hover,.header__nav a.is-active{color:#111214!important;background:rgba(17,18,20,.08)!important}
.header__status{color:#66686c!important}
.header__cta{color:#111214!important;background:#d9d7d0!important;border-color:rgba(17,18,20,.2)!important;box-shadow:0 8px 24px rgba(17,18,20,.08)}
.header__cta:hover{background:#111214!important;color:#eeeae3!important;border-color:#111214!important}
.header__account{position:relative!important;width:42px;height:42px;min-height:42px!important;padding:0!important;display:inline-flex!important;justify-content:center;align-items:center;border-radius:50%!important;border:1px solid rgba(17,18,20,.18)!important;background:transparent!important;color:#111214!important}
.header__account:hover{background:rgba(17,18,20,.07)!important}
.account-label{display:none!important}
.account-sketch{position:relative;width:19px;height:19px;display:block}
.account-sketch:before{content:"";position:absolute;left:6px;top:1px;width:7px;height:7px;border:1.5px solid currentColor;border-radius:50%}
.account-sketch i{position:absolute;left:2px;bottom:1px;width:15px;height:9px;border:1.5px solid currentColor;border-bottom:0;border-radius:11px 11px 0 0}
.account-sketch b{position:absolute;left:1px;top:8px;width:17px;height:1px;background:currentColor;transform:rotate(-18deg);opacity:.35}
.account-menu{position:absolute;right:0;top:50px;min-width:150px;padding:6px;border:1px solid rgba(17,18,20,.14);background:rgba(233,230,223,.97);box-shadow:0 20px 60px rgba(17,18,20,.18);border-radius:14px;animation:atlasDrop .22s ease both}
.account-menu button{width:100%;padding:11px 12px;border:0;background:transparent;text-align:left;color:#111214;display:flex;justify-content:space-between;border-radius:9px;cursor:pointer}
.account-menu button:hover{background:rgba(17,18,20,.07);transform:translateX(3px)}
@keyframes atlasDrop{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
.header__toggle{color:#111214!important}
.veyrion-atlas{position:fixed;right:20px;top:82px;z-index:850;width:min(520px,calc(100vw - 40px));pointer-events:none}
.atlas__toggle{pointer-events:auto;display:flex;align-items:center;gap:10px;margin-left:auto;border:1px solid rgba(17,18,20,.16);background:rgba(233,230,223,.9);color:#111214;padding:10px 13px;border-radius:999px;box-shadow:0 12px 34px rgba(17,18,20,.12);font:600 11px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(18px)}
.atlas__toggle small{font:500 9px/1 var(--font-mono);color:#6d6e72}
.atlas__glyph{display:flex;gap:2px;align-items:flex-end;height:13px}.atlas__glyph i{display:block;width:3px;background:#111214;border-radius:2px}.atlas__glyph i:nth-child(1){height:6px}.atlas__glyph i:nth-child(2){height:10px}.atlas__glyph i:nth-child(3){height:13px}
.atlas__panel{pointer-events:auto;margin-top:8px;border:1px solid rgba(17,18,20,.16);background:rgba(233,230,223,.96);box-shadow:0 30px 100px rgba(17,18,20,.2);border-radius:20px;overflow:hidden;animation:atlasPanel .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes atlasPanel{from{opacity:0;transform:translateY(-12px) scale(.985)}to{opacity:1;transform:none}}
.atlas__head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 18px 12px;border-bottom:1px solid rgba(17,18,20,.1)}
.atlas__head strong{display:block;font:500 19px/1.1 "Instrument Serif",serif;margin-top:5px}
.atlas__kicker,.atlas__checker-label{font:500 9px/1 var(--font-mono);letter-spacing:.14em;color:#77797d}
.atlas__close{border:0;background:transparent;font-size:23px;cursor:pointer;color:#111214;opacity:.55;transition:.2s}.atlas__close:hover{opacity:1;transform:rotate(90deg)}
.atlas__sentence{margin:0;padding:12px 18px;color:#686a70;font-size:11px;line-height:1.5;border-bottom:1px solid rgba(17,18,20,.08)}
.atlas__workbench{display:grid;grid-template-columns:1.25fr .75fr;gap:1px;background:rgba(17,18,20,.1)}
.atlas__scene{position:relative;min-height:270px;overflow:hidden;background:#17191b;perspective:1000px;touch-action:none}
.atlas__platform{position:absolute;left:50%;top:54%;width:76%;height:42%;transform:translate(-50%,-50%) rotateX(66deg);border:1px solid rgba(233,230,223,.24);border-radius:50%;box-shadow:0 0 80px rgba(233,230,223,.06),inset 0 0 50px rgba(233,230,223,.035)}
.atlas__platform:before,.atlas__platform:after{content:"";position:absolute;inset:12%;border:1px solid rgba(233,230,223,.12);border-radius:50%}
.atlas__platform:after{inset:27%;border-color:rgba(233,230,223,.08)}
.atlas__layers{position:absolute;inset:0;transform-style:preserve-3d}
.atlas-layer{position:absolute;left:50%;top:50%;width:150px;height:38px;margin:-19px 0 0 -75px;border:1px solid color-mix(in srgb,var(--atlas-color) 50%,white 10%);background:linear-gradient(180deg,rgba(35,37,40,.96),rgba(21,23,25,.92));color:#ece9e2;border-radius:8px;box-shadow:0 12px 35px rgba(0,0,0,.28),0 0 30px color-mix(in srgb,var(--atlas-color) 12%,transparent);transform:translate3d(var(--atlas-x),var(--atlas-y),var(--atlas-z)) rotateX(58deg) rotateZ(calc(var(--atlas-i) * 1deg));cursor:grab;transition:box-shadow .25s,filter .25s,transform .16s}
.atlas-layer:hover,.atlas-layer.is-selected{filter:brightness(1.15);box-shadow:0 16px 45px rgba(0,0,0,.35),0 0 40px color-mix(in srgb,var(--atlas-color) 20%,transparent);z-index:20}
.atlas-layer.is-dragging{cursor:grabbing;transition:none;filter:brightness(1.2)}
.atlas-layer__number{font:500 8px/1 var(--font-mono);opacity:.55;margin-right:8px}.atlas-layer strong{font:600 10px/1 var(--font-body);letter-spacing:.04em}
.atlas__checker{background:#e4e1da;padding:18px;display:flex;flex-direction:column;gap:10px}
.atlas__drop{min-height:90px;border:1px dashed rgba(17,18,20,.25);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;text-align:center;font-size:10px;color:#77797d;transition:.25s}
.atlas__drop:hover,.atlas__drop:focus{border-color:#111214;background:rgba(17,18,20,.04);outline:none}
.atlas__drop-mark{width:32px;height:32px;border-radius:8px;background:#202225;color:#e9e6df;display:grid;place-items:center;font:500 12px var(--font-mono)}
.atlas__result{padding:10px;border-left:2px solid #111214;background:rgba(17,18,20,.045);animation:atlasReveal .25s ease}
@keyframes atlasReveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.atlas__result-code{display:block;font:500 8px var(--font-mono);letter-spacing:.12em;color:#77797d}.atlas__result strong{display:block;margin-top:4px;font:500 22px/1 "Instrument Serif",serif}.atlas__result span:last-child{display:block;margin-top:4px;font:500 8px var(--font-mono);color:#77797d}
.atlas__go{border:1px solid #111214;background:#111214;color:#eeeae3;padding:11px 13px;border-radius:999px;font:600 10px var(--font-body);cursor:pointer;transition:.25s}.atlas__go:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 30px rgba(17,18,20,.18)}.atlas__go:disabled{opacity:.35;cursor:not-allowed}
.atlas__footer{display:flex;justify-content:space-between;padding:9px 18px;font:500 8px var(--font-mono);letter-spacing:.05em;color:#77797d}
.atlas__footer b{color:#111214}
.hero-stack--atlas{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.hero-atlas-layer{position:absolute;left:50%;top:50%;width:min(320px,56%);height:46px;margin:-23px 0 0 -160px;border:1px solid rgba(233,230,223,.3);border-radius:8px;background:linear-gradient(180deg,rgba(31,33,35,.95),rgba(17,18,20,.9));color:#ece9e2;box-shadow:0 20px 45px rgba(0,0,0,.3);transform:translate3d(calc((var(--atlas-i) - 10) * 4px),calc((var(--atlas-i) - 10) * 7px),calc(var(--atlas-i) * 8px)) rotateX(58deg) rotateZ(calc(var(--atlas-i) * .8deg));cursor:pointer;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .25s}
.hero-atlas-layer:hover,.hero-atlas-layer.is-selected{filter:brightness(1.2);box-shadow:0 24px 55px rgba(0,0,0,.4);z-index:50}
.hero-atlas-layer span{font:500 8px var(--font-mono);opacity:.55;margin-right:9px}.hero-atlas-layer b{font:600 10px var(--font-body);letter-spacing:.06em}
.page-transition{position:fixed;inset:0;z-index:3000;background:#111214;pointer-events:none;opacity:1;transform:translateY(0);transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
.page-transition.is-in{opacity:0;transform:translateY(100%)}.page-transition.is-out{opacity:1;transform:translateY(0)}
body:has(.page-transition.is-out){overflow:hidden}
@media(max-width:900px){
  .header{height:58px}.header__nav,.header__status,.header__cta{display:none!important}.header__account{margin-left:auto;margin-right:8px}.header__toggle{display:flex!important}
  .mobile-nav{background:rgba(233,230,223,.97)!important;color:#111214!important;border-left:1px solid rgba(17,18,20,.12);box-shadow:-20px 0 60px rgba(17,18,20,.12)}
  .mobile-nav a{color:#111214!important;transition:.25s}.mobile-nav a:hover{transform:translateX(6px);opacity:.65}
  .veyrion-atlas{top:72px;right:12px;width:min(480px,calc(100vw - 24px))}
  .atlas__workbench{grid-template-columns:1fr}.atlas__scene{min-height:250px}.atlas__checker{padding:14px}
  .atlas__panel{max-height:calc(100vh - 86px);overflow:auto}
  .hero-atlas-layer{width:min(260px,58%);margin-left:min(-130px,-29%);height:40px;margin-top:-20px}
}
@media(max-width:560px){
  .header__brand{font-size:12px}.veyrion-atlas{top:68px}.atlas__toggle{padding:9px 11px}.atlas__toggle span:not(.atlas__glyph){font-size:9px}
  .atlas__head{padding:14px}.atlas__head strong{font-size:17px}.atlas__sentence{font-size:10px}
  .atlas-layer{width:128px;height:34px;margin-left:-64px;margin-top:-17px}.atlas-layer strong{font-size:9px}
  .atlas__scene{min-height:230px}
  .hero-orbit__readout strong{font-size:12px!important}
}
@media(prefers-reduced-motion:reduce){
  .atlas__panel,.account-menu,.atlas__result{animation:none!important}.page-transition{transition:none!important}
  .atlas-layer,.hero-atlas-layer{transition:none!important}
}

@media(max-width:900px){.mobile-nav{position:relative!important;inset:auto!important;z-index:800!important;max-height:0;overflow:hidden;padding:0 24px!important;gap:14px!important;justify-content:flex-start!important;border-bottom:0;transition:max-height .34s cubic-bezier(.2,.8,.2,1),padding .34s ease}.mobile-nav:not([hidden]){max-height:390px;padding:18px 24px 24px!important;border-bottom:1px solid rgba(17,18,20,.12)}.mobile-nav a{font-size:22px!important;line-height:1.05!important;padding:3px 0}.mobile-nav__close{position:relative!important;top:auto!important;right:auto!important;align-self:flex-end;margin-bottom:2px}}
.hero-atlas-layer.is-dragging{cursor:grabbing;transition:none!important;transform:translate3d(calc((var(--atlas-i) - 10) * 4px + var(--move-x,0px)),calc((var(--atlas-i) - 10) * 7px + var(--move-y,0px)),calc(var(--atlas-i) * 8px)) rotateX(58deg) rotateZ(calc(var(--atlas-i) * .8deg));filter:brightness(1.2)}