/* Design: Orbit — the company as a world, agents in orbit, work travelling as light.
   Dark first. Applies only when <html data-design="orbit">. The hero is drawn by design-orbit.js (three.js). */

:root[data-design="orbit"] {
  --ink: #05070D;
  --ink-2: #080B14;
  --surface: #0B1020;
  --surface-2: #121A30;
  --line: rgba(170, 190, 255, 0.09);
  --line-strong: rgba(170, 190, 255, 0.19);
  --text: #EEF1FF;
  --text-rgb: 238, 241, 255;
  --text-2: #B5BDDC;
  --muted: #8089AE;
  --glass: #6EE7F9;
  --glass-rgb: 110, 231, 249;
  --glass-hover: #A5F3FC;
  --on-glass: #03121A;
  --violet: #8B7CFF;
  --violet-rgb: 139, 124, 255;
  --amber: #F7B955;
  --danger: #FF8A7A;
  --aurora-1: rgba(139, 124, 255, 0.20);
  --aurora-2: rgba(110, 231, 249, 0.10);
  --spot: rgba(110, 231, 249, 0.10);
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
:root[data-design="orbit"][data-theme="light"] {
  --ink: #F4F6FC;
  --ink-2: #ECEFF8;
  --surface: #FFFFFF;
  --surface-2: #E3E7F5;
  --line: rgba(16, 24, 64, 0.10);
  --line-strong: rgba(16, 24, 64, 0.20);
  --text: #0B1030;
  --text-rgb: 11, 16, 48;
  --text-2: #363E68;
  --muted: #5E668C;
  --glass: #2F4BF0;
  --glass-rgb: 47, 75, 240;
  --glass-hover: #2238C8;
  --on-glass: #FFFFFF;
  --violet: #6D5BF5;
  --violet-rgb: 109, 91, 245;
  --amber: #9A6200;
  --aurora-1: rgba(109, 91, 245, 0.14);
  --aurora-2: rgba(47, 75, 240, 0.08);
  --spot: rgba(47, 75, 240, 0.08);
}

/* the estate map belongs to the classic design */
:root[data-design="orbit"] .hero-art > #estate,
:root[data-design="orbit"] .hero-art > .tip { display: none; }

/* type */
:root[data-design="orbit"] h1 { font-weight: 600; letter-spacing: -0.045em; line-height: 1.0; }
:root[data-design="orbit"] h2 { font-weight: 600; letter-spacing: -0.035em; }
:root[data-design="orbit"] h3, :root[data-design="orbit"] h4 { font-weight: 500; letter-spacing: -0.02em; }
:root[data-design="orbit"] .hero-copy h1 .w:nth-last-child(-n+3) > span {
  background: linear-gradient(100deg, var(--glass), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* header */
:root[data-design="orbit"] .top { background: color-mix(in oklab, var(--ink) 70%, transparent); }
:root[data-design="orbit"] .brand .mark { border-radius: 50%; background: transparent; border: 1.5px solid rgba(var(--glass-rgb), .7); box-shadow: 0 0 14px rgba(var(--glass-rgb), .35); }
:root[data-design="orbit"] .brand .mark::after { inset: 5px; background: linear-gradient(135deg, var(--glass), var(--violet)); }
:root[data-design="orbit"] .top .progress { background: linear-gradient(90deg, var(--glass), var(--violet)); height: 2px; }

/* buttons: a lit edge, not a flat block */
:root[data-design="orbit"] .btn { border-radius: 999px; background: linear-gradient(120deg, var(--glass), var(--violet)); color: var(--on-glass); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 8px 28px -8px rgba(var(--violet-rgb), .55); }
:root[data-design="orbit"] .btn:hover { background: linear-gradient(120deg, var(--glass-hover), var(--violet)); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 12px 36px -8px rgba(var(--glass-rgb), .6); }
:root[data-design="orbit"][data-theme="light"] .btn { color: #fff; }
:root[data-design="orbit"] .btn.ghost { background: color-mix(in oklab, var(--surface) 55%, transparent); color: var(--text); border-color: var(--line-strong); box-shadow: none; backdrop-filter: blur(8px); }
:root[data-design="orbit"] .btn.ghost:hover { border-color: rgba(var(--glass-rgb), .6); }
:root[data-design="orbit"] .themer, :root[data-design="orbit"] .menu-btn { border-radius: 999px; }

/* hero: the world sits to the right and bleeds off the edge */
:root[data-design="orbit"] .hero .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; min-height: min(86vh, 860px); padding-block: 24px 48px; }
:root[data-design="orbit"] .hero-copy { position: relative; z-index: 2; }
:root[data-design="orbit"] .hero .hero-art { width: 112%; max-height: none; margin: 0 0 0 -6%; aspect-ratio: 1 / 1; }
:root[data-design="orbit"] .hero-art canvas { -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 72%); mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 72%); }
:root[data-design="orbit"] .hero::before { width: 70vw; height: 70vw; max-width: 980px; max-height: 980px; right: -22vw; top: -10vw; }
:root[data-design="orbit"] .hero-copy .who { border-left: 2px solid rgba(var(--glass-rgb), .5); padding-left: 14px; }
@media (max-width: 980px) {
  :root[data-design="orbit"] .hero .wrap { grid-template-columns: 1fr; min-height: 0; }
  :root[data-design="orbit"] .hero .hero-art { width: 100%; margin: 0; max-height: 400px; aspect-ratio: 1 / 1; }
}

/* labels that follow the agents in orbit */
.orbit-label { position: absolute; left: 0; top: 0; pointer-events: none; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .02em; color: var(--text-2); white-space: nowrap; padding: 3px 8px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 60%, transparent); border: 1px solid var(--line-strong); backdrop-filter: blur(6px); transition: opacity .3s; will-change: transform; }
.orbit-label i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--glass); margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 8px var(--glass); }
.orbit-label.waiting i { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.orbit-status { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); font-family: var(--font-mono); font-size: .74rem; color: var(--muted); white-space: nowrap; }
.orbit-status b { color: var(--text); font-weight: 500; }
.orbit-status .w { color: var(--amber); }
@media (max-width: 560px) { .orbit-label { display: none; } }

/* surfaces: glass over the dark */
:root[data-design="orbit"] .frame,
:root[data-design="orbit"] .prodgrid { background: color-mix(in oklab, var(--surface) 72%, transparent); border-color: var(--line-strong); backdrop-filter: blur(10px); border-radius: 18px; }
:root[data-design="orbit"] .prodgrid { gap: 1px; background: var(--line-strong); }
:root[data-design="orbit"] .prod { background: var(--ink-2); }
:root[data-design="orbit"] .prod:hover { background: var(--surface); }
:root[data-design="orbit"] .prod::after { background: linear-gradient(90deg, var(--glass), var(--violet)); height: 2px; }
:root[data-design="orbit"] .cols > .spot { border-radius: 16px; }
:root[data-design="orbit"] .seq > div::before { background: linear-gradient(135deg, var(--glass), var(--violet)); color: var(--on-glass); border: 0; font-weight: 600; }
:root[data-design="orbit"][data-theme="light"] .seq > div::before { color: #fff; }
:root[data-design="orbit"] .ledger td.free { color: var(--glass); }

/* sections: a faint horizon line instead of a plain rule */
:root[data-design="orbit"] section + section { border-top: 0; background-image: linear-gradient(90deg, transparent, rgba(var(--glass-rgb), .25), rgba(var(--violet-rgb), .25), transparent); background-size: 100% 1px; background-repeat: no-repeat; }
:root[data-design="orbit"] .band { position: relative; overflow: hidden; background: radial-gradient(80% 140% at 85% 0%, rgba(var(--violet-rgb), .22), transparent 60%), radial-gradient(60% 120% at 10% 100%, rgba(var(--glass-rgb), .12), transparent 60%), var(--surface); border: 0; }

/* page heads: a small world */
:root[data-design="orbit"] .page-head .hero-art { width: min(100%, 380px); max-height: 380px; }

:root[data-design="orbit"] form input, :root[data-design="orbit"] form textarea, :root[data-design="orbit"] form select { border-radius: 12px; background: color-mix(in oklab, var(--surface) 70%, transparent); }