/* ═══════════════════════════════════════════════════════════════
   GO ORBIT + GO LIVE PANEL
   Drop-in showpiece section for static LSG sites.

   Usage:
     <link rel="stylesheet" href="/css/go-orbit.css">
     <div id="go-orbit"></div>
     <script src="/js/go-orbit.js"></script>
     <script>GoOrbit.mount('#go-orbit', { ...config });</script>

   Everything is namespaced .gorb- so it cannot collide with host styles.
   Only transform and opacity animate. Honors prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

.gorb {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5rem 0;
  background:
    radial-gradient(50% 40% at 80% 0%, rgba(var(--gorb-accent-rgb), 0.18) 0%, transparent 70%),
    radial-gradient(40% 35% at 10% 90%, rgba(var(--gorb-action-rgb), 0.10) 0%, transparent 70%),
    linear-gradient(180deg, var(--gorb-bg-1) 0%, var(--gorb-bg-2) 100%);
  color: #fff;
}
@media (min-width: 1024px) { .gorb { padding: 7rem 0; } }

/* ── Colour lock ──
   Host stylesheets often set element-level colours (e.g. `h1,h2,h3 { color: var(--color-text) }`).
   An element selector beats inheritance, so pin every colour the component owns. */
.gorb h1, .gorb h2, .gorb h3, .gorb h4, .gorb h5, .gorb h6,
.gorb p, .gorb span, .gorb li, .gorb b, .gorb i, .gorb a, .gorb button { color: inherit; }
.gorb .gorb__title { color: #fff; }
.gorb .gorb__eyebrow { color: var(--gorb-accent); }
.gorb .gorb__blurb { color: rgba(255,255,255,.82); }
.gorb .gorb__ptitle { color: rgba(255,255,255,.6); }
.gorb .gorb__headline { color: #fff; }
.gorb .gorb__row { color: rgba(255,255,255,.85); }
.gorb .gorb__pill { color: #F2F9FF; }
.gorb .gorb__pill i { color: #DFF3FF; }
.gorb .gorb__hint { color: rgba(255,255,255,.45); }
.gorb .gorb__label, .gorb .gorb__foot { color: rgba(255,255,255,.35); }
/* re-pin element-based children so the generic inherit rules above can't beat them */
.gorb .gorb__tab { color: rgba(255,255,255,.45); }   /* active tab gets inline #fff from JS */
.gorb .gorb__btn { color: #fff; }
.gorb .gorb__result span { color: rgba(255,255,255,.5); }

/* hairline grid */
.gorb::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background-image:
    linear-gradient(rgba(var(--gorb-accent-rgb), 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--gorb-accent-rgb), 0.6) 1px, transparent 1px);
  background-size: 64px 64px;
}
/* grain */
.gorb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.gorb__inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 1024px) { .gorb__inner { padding: 0 2rem; } }

.gorb__head { max-width: 44rem; margin-bottom: 3rem; }
.gorb__rule { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.gorb__eyebrow {
  font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gorb-accent); white-space: nowrap;
}
.gorb__rule-line { position: relative; flex: 1; height: 9px; }
.gorb__rule-line::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background: rgba(255,255,255,.28); }
.gorb__rule-line::after  { content:""; position:absolute; right:0; top:0; bottom:0; width:1px; background: rgba(255,255,255,.28); }

.gorb__title {
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.02; font-weight: 800;
  text-transform: uppercase; margin: 0 0 1rem; letter-spacing: -.01em;
  color: #fff;
}
.gorb__blurb { font-size: 1.05rem; line-height: 1.65; color: rgba(255,255,255,.82); margin: 0; }
.gorb__blurb--m { display: none; }
@media (max-width: 639px) {
  .gorb__blurb--d { display: none; }
  .gorb__blurb--m { display: block; }
}

.gorb__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .gorb__grid { grid-template-columns: 1.15fr .85fr; gap: 3rem; } }

/* ── Scene ── */
.gorb__scene {
  position: relative; width: 100%; max-width: 640px; margin: 0 auto;
  aspect-ratio: 4 / 3; user-select: none; perspective: 1100px;
}
.gorb__stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.gorb__bloom {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -44%);
  border-radius: 50%; pointer-events: none; filter: blur(16px); z-index: 1;
}
.gorb__rings { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; overflow: visible; pointer-events: none; }
.gorb__spark {
  position: absolute; border-radius: 50%; background: #DFF3FF;
  animation-name: gorb-spark; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  will-change: opacity, transform;
}
@keyframes gorb-spark { 0%,100% { opacity:.12; transform: scale(.6); } 50% { opacity:1; transform: scale(1.25); } }

.gorb__pedestal {
  position: absolute; left: 50%; top: 58%; border-radius: 50%; pointer-events: none; z-index: 6;
  animation: gorb-pedestal 5.2s ease-in-out infinite; will-change: opacity, transform;
}
@keyframes gorb-pedestal {
  0%,100% { opacity:.5; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity:.95; transform: translate(-50%,-50%) scale(1.045); }
}
.gorb__shadow {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%,-50%);
  border-radius: 50%; pointer-events: none; z-index: 7; filter: blur(10px);
  background: radial-gradient(ellipse at center, rgba(1,7,16,.9) 0%, transparent 72%);
}
.gorb__reflection {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, 0) scaleY(-1);
  opacity: .15; z-index: 6; pointer-events: none; filter: blur(1.1px);
  -webkit-mask-image: linear-gradient(to top, transparent 34%, rgba(0,0,0,.7) 92%);
          mask-image: linear-gradient(to top, transparent 34%, rgba(0,0,0,.7) 92%);
}
.gorb__modelwrap { position: absolute; inset: 0; z-index: 10; will-change: transform; }
.gorb__model { position: absolute; left: 50%; animation: gorb-float 7.5s ease-in-out infinite; will-change: transform; }
@keyframes gorb-float { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,-2.2%); } }
.gorb__model img, .gorb__reflection img { width: 100%; height: auto; display: block; }

.gorb__comet { position: absolute; left: 50%; top: 50%; z-index: 28; pointer-events: none; will-change: transform; }
.gorb__comet span { display: block; width: 7px; height: 7px; border-radius: 50%; background: #EAF7FF; }

.gorb__chip {
  position: absolute; left: 50%; top: 50%; z-index: 30; will-change: transform;
}
.gorb__pill {
  display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap;
  border-radius: 999px; padding: .25rem .75rem .25rem .25rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #F2F9FF;
  background: linear-gradient(145deg, rgba(8,26,48,.86), rgba(4,14,28,.9));
  border: 1px solid rgba(var(--gorb-accent-rgb), .35);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 14px 30px -14px rgba(1,7,16,.95), inset 0 1px 0 rgba(255,255,255,.16);
}
.gorb__pill i {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 21px; height: 21px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(var(--gorb-accent-rgb),.35), rgba(var(--gorb-accent-rgb),.10));
  box-shadow: inset 0 0 0 1px rgba(var(--gorb-accent-rgb),.4), 0 0 10px rgba(var(--gorb-accent-rgb),.25);
  color: #DFF3FF;
}
.gorb__pill svg { width: 13px; height: 13px; }

/* Phone: chips become a legible grid under the home */
.gorb__chipgrid { display: none; }
@media (max-width: 639px) {
  .gorb__chip { display: none !important; }
  .gorb__scene { margin-bottom: 1rem; }
  .gorb__chipgrid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    position: absolute; left: 0; right: 0; bottom: -.5rem; padding: 0 .25rem;
  }
  .gorb__chipgrid .gorb__pill { font-size: .58rem; width: 100%; }
}

.gorb__hint {
  margin: .75rem 0 0; text-align: center; font-size: .68rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45);
}

/* ── Live panel ── */
.gorb__panel { position: relative; perspective: 1100px; }
.gorb__tilt { transform-style: preserve-3d; transition: transform 420ms cubic-bezier(.22,1,.36,1); }
.gorb__halo {
  position: absolute; inset: -3px; border-radius: 1.15rem; pointer-events: none; filter: blur(14px);
  animation: gorb-halo 4.2s ease-in-out infinite;
}
@keyframes gorb-halo { 0%,100% { opacity:.55; } 50% { opacity:1; } }
.gorb__edge { position: absolute; inset: -1px; border-radius: 1.05rem; pointer-events: none; }
.gorb__glass {
  position: relative; border-radius: 1rem; overflow: hidden;
  background: linear-gradient(160deg, var(--gorb-panel-1) 0%, var(--gorb-panel-2) 100%);
  box-shadow: 0 50px 110px -34px rgba(2,10,22,.95), inset 0 1px 0 rgba(255,255,255,.10);
}
.gorb__runner { position: absolute; top: 0; left: 0; right: 0; height: 1px; overflow: hidden; }
.gorb__runner i { display: block; height: 100%; width: 33%; animation: gorb-run 4.6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes gorb-run { from { transform: translateX(-120%); } to { transform: translateX(320%); } }

.gorb__chrome { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.gorb__dots { display: flex; gap: .375rem; }
.gorb__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.gorb__ptitle { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 0; }
.gorb__live { margin-left: auto; display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .5rem; border-radius: 999px; }
.gorb__live b { width: 6px; height: 6px; border-radius: 50%; animation: gorb-dot 1.8s ease-in-out infinite; }
.gorb__live span { font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
@keyframes gorb-dot { 0%,100% { opacity:1; transform: scale(1);} 50% { opacity:.55; transform: scale(.86);} }

.gorb__tabs { display: flex; gap: .25rem; padding: .75rem .75rem 0; }
.gorb__tab {
  flex: 1; border: 0; cursor: pointer; border-radius: .5rem; padding: .5rem;
  font: inherit; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: rgba(255,255,255,.45); transition: background .25s, color .25s, box-shadow .25s;
}
.gorb__body { padding: 1rem 1.25rem 1.25rem; min-height: 300px; }
.gorb__label { font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.35); margin: 0 0 .5rem; }
.gorb__headline { font-size: 1.2rem; font-weight: 800; color: #fff; margin: 0 0 1.25rem; min-height: 1.9rem; }
.gorb__caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: middle; margin-left: 2px; animation: gorb-caret 1.05s steps(1) infinite; }
@keyframes gorb-caret { 0%,45% { opacity:1; } 50%,95% { opacity:0; } }

.gorb__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.gorb__row {
  display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem;
  border-radius: .5rem; border: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.02);
  opacity: .32; transform: translateX(-8px);
  transition: opacity .42s ease, transform .42s cubic-bezier(.22,1,.36,1), background .42s ease, border-color .42s ease, box-shadow .42s ease;
  font-size: .875rem; color: rgba(255,255,255,.85);
}
.gorb__row b { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.12); }
.gorb__row.is-on { opacity: 1; transform: translateX(0); }
.gorb__result {
  margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem 1rem; border-radius: .75rem; border: 1px solid;
  opacity: 0; transform: translateY(8px); transition: opacity .52s ease, transform .52s cubic-bezier(.22,1,.36,1);
}
.gorb__result.is-on { opacity: 1; transform: translateY(0); }
.gorb__result span { font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.gorb__result b { font-size: 1.25rem; font-weight: 800; }
.gorb__foot { padding: 0 1.25rem 1rem; font-size: .62rem; line-height: 1.5; color: rgba(255,255,255,.35); margin: 0; }
.gorb__sheen { position: absolute; inset: 0; border-radius: 1rem; pointer-events: none; opacity: 0; transition: opacity .32s ease; mix-blend-mode: screen; }

.gorb__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.gorb__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: .625rem; font-weight: 800; text-decoration: none;
  text-transform: uppercase; letter-spacing: .02em; font-size: .95rem;
  transition: transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow .24s ease, filter .2s ease;
}
.gorb__btn:hover { transform: translateY(-1px); filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .gorb__spark, .gorb__pedestal, .gorb__model, .gorb__halo, .gorb__runner i,
  .gorb__live b, .gorb__caret { animation: none !important; }
  .gorb__tilt { transition: none; }
}