/*
 * assets/css/omgx-brand.css
 * OMGX AI — brand theme derived from the logo.
 *
 * Palette (sampled from the BUILD. logo):
 *   Electric blue  #3d6bff   left face of the V, light sweep
 *   Crimson        #ff2e4d   right face of the V, light sweep
 *   White          #ffffff   centre face, wordmark
 *   Near-black     #05070c   plate / background
 *
 * MUST be linked AFTER each page's inline <style> block so it wins on
 * source order. It is deliberately the last word on colour.
 *
 * Non-negotiable rule enforced here: headings are painted with a solid
 * colour. The previous theme used `-webkit-text-fill-color: transparent`
 * with a gradient, which made the h1 invisible whenever the gradient
 * stops were dark. That technique is removed site-wide.
 */

:root {
  /* ── Brand ── */
  --omgx-blue:      #3d6bff;
  --omgx-blue-soft: #6d8fff;
  --omgx-blue-deep: #2340c8;
  --omgx-red:       #ff2e4d;
  --omgx-red-soft:  #ff6b80;
  --omgx-white:     #ffffff;
  --omgx-ink:       #05070c;

  /* ── Text ── */
  --omgx-text:      #e6ecfa;
  --omgx-text-mute: #9fb0cc;
  --omgx-text-dim:  #7d8ea8;

  /* ── Surfaces ── */
  --omgx-surface:      rgba(8, 12, 22, .82);
  --omgx-surface-solid:#080c16;
  --omgx-line:         rgba(61, 107, 255, .22);
  --omgx-line-strong:  rgba(61, 107, 255, .38);

  /* ── Back-compat aliases ──
     Existing rules across the site reference --cyan and --magenta.
     Remapping them here retints everything without touching each rule. */
  --cyan:    #3d6bff;
  --magenta: #ff2e4d;
  --blue:    #3d6bff;
  --grid:    rgba(61, 107, 255, .06);
}

/* ═══════════════════════════════════════════════════════════
   BACKGROUND — mirrors the logo's blue→red light sweep
═══════════════════════════════════════════════════════════ */
body {
  background: var(--omgx-ink);
  color: var(--omgx-text);
}
body::before {
  background:
    radial-gradient(900px 520px at 12% -8%,  rgba(61, 107, 255, .20), transparent 58%),
    radial-gradient(820px 480px at 92% 8%,   rgba(255, 46,  77, .15), transparent 55%),
    radial-gradient(700px 420px at 50% 108%, rgba(61, 107, 255, .10), transparent 60%),
    linear-gradient(#05070c, #000);
}

/* ═══════════════════════════════════════════════════════════
   HEADINGS — solid fill, always visible
   The !important flags exist to defeat the transparent text-fill
   rules in premium.css. This is the fix for the invisible h1.
═══════════════════════════════════════════════════════════ */
.hero-copy h1,
.hero-copy-mvp h2,
.benefits b,
h1.sec-title,
h2.sec-title {
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  animation: none !important;
}

.hero-copy h1 {
  color: var(--omgx-white) !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
/* The accent line of the headline takes the logo blue */
.hero-copy h1 span {
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  animation: none !important;
  filter: none !important;
  color: var(--omgx-blue) !important;
  text-shadow: 0 0 26px rgba(61, 107, 255, .55);
}

.hero-copy-mvp h2 {
  color: var(--omgx-white) !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
/* Second headline accent takes the logo crimson — the two together
   read as the blue/red V from the mark. */
.hero-copy-mvp h2 span {
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  animation: none !important;
  filter: none !important;
  color: var(--omgx-red) !important;
  text-shadow: 0 0 26px rgba(255, 46, 77, .5);
}

.benefits b     { color: var(--omgx-white) !important; }
h1.sec-title,
h2.sec-title    { color: var(--omgx-blue)  !important; text-shadow: 0 0 20px rgba(61,107,255,.35); }
/* Enterprise XR owns the crimson half of the mark */
.group.xr > h1.sec-title,
.group.xr > h2.sec-title { color: var(--omgx-red) !important; text-shadow: 0 0 20px rgba(255,46,77,.32); }

/* Section headings on solutions/contact keep the blue, body copy stays light */
.line           { color: var(--omgx-text-mute); }

/* ═══════════════════════════════════════════════════════════
   GLASS BADGE — the octagon emblem beside "FROM IDEA TO MVP."

   Design notes:
   - Uses badge-omgx-320.webp: the octagon mark with the OMGX AI
     wordmark inside it, on a transparent background. Derived from
     brand/mark-wordmark-dark.png, resized to 320 and encoded to webp
     at 16KB. The alternative, img/omgxailogo.png, is the same artwork
     as a 1.6MB poster with the dark background baked in, which would
     read as a dark square inside a glass frame.
   - Frosted glass: layered inset highlights top, coloured bounce
     light bottom, plus a real backdrop blur. Falls back to a flat
     translucent panel where backdrop-filter is unsupported.
   - Sized in clamp() so it never overpowers the headline on mobile.
═══════════════════════════════════════════════════════════ */
.mvp-head {
  display: flex;
  align-items: center;
  gap: clamp(.65rem, 1.8vw, 1.05rem);
}
.mvp-head h2 { margin: 0 !important; }

.brand-badge {
  /* Scaled up to carry more weight in the hero's left column, which
     had dead space below the CTAs. Still capped so it never competes
     with the headline it sits beside. */
  --badge: clamp(68px, 10vw, 104px);
  position: relative;
  flex: 0 0 auto;
  width: var(--badge);
  height: var(--badge);
  display: grid;
  place-items: center;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;

  /* glass body */
  background:
    linear-gradient(155deg,
      rgba(255, 255, 255, .16) 0%,
      rgba(255, 255, 255, .05) 42%,
      rgba(61, 107, 255, .12) 78%,
      rgba(255, 46, 77, .10) 100%);
  border: 1px solid rgba(255, 255, 255, .18);

  /* depth: top highlight, inner colour bounce, outer drop + brand glow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -10px 20px rgba(61, 107, 255, .12),
    0 10px 28px rgba(0, 0, 0, .5),
    0 0 24px rgba(61, 107, 255, .16);

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1),
              box-shadow .3s ease;
}

/* Specular sweep — rests off-canvas, crosses the badge on hover */
.brand-badge::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(255, 255, 255, .26) 48%,
    transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}
.brand-badge:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    inset 0 -10px 20px rgba(61, 107, 255, .18),
    0 14px 34px rgba(0, 0, 0, .55),
    0 0 32px rgba(61, 107, 255, .26);
}
.brand-badge:hover::after {
  transform: translateX(130%);
  transition: transform 1s ease;
}

.brand-badge picture { display: block; width: 100%; height: 100%; }

.brand-badge img {
  /* The mark now carries the OMGX AI wordmark inside the octagon, so it
     needs the full frame rather than sitting inset like a lone emblem.
     92% keeps a hairline of glass visible at the corners. */
  width: 92%;
  height: 92%;
  margin: 4%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55));
}

/* No backdrop-filter support: keep it legible with a solid-ish panel */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .brand-badge { background: rgba(12, 18, 34, .9); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-badge, .brand-badge::after { transition: none; }
  .brand-badge:hover { transform: none; }
  .brand-badge:hover::after { transform: translateX(-130%); }
}

/* ═══════════════════════════════════════════════════════════
   WORDMARK — "OMGX AI" with the logo's gradient on AI only
═══════════════════════════════════════════════════════════ */
.wordmark       { color: var(--omgx-white); }
.wordmark .ai {
  color: var(--omgx-blue);
  text-shadow: 0 0 14px rgba(61, 107, 255, .8);
}

/* ═══════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════ */
header { border-bottom: 1px solid var(--omgx-line); }
nav a  { color: var(--omgx-text-mute); transition: color .18s ease; }
nav a:hover,
nav a.active { color: var(--omgx-blue); }
nav a.active { position: relative; }
nav a.active::after {
  content: '';
  position: absolute;
  left: .34rem; right: .34rem; bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--omgx-blue), var(--omgx-red));
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.btn-dm {
  border: 1px solid transparent;
  background:
    linear-gradient(#070a12, #070a12) padding-box,
    linear-gradient(90deg, var(--omgx-blue), var(--omgx-red)) border-box;
  color: var(--omgx-white);
  box-shadow: 0 0 22px rgba(61, 107, 255, .22);
  transition: box-shadow .2s ease, transform .2s ease;
}
.btn-dm:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 30px rgba(61, 107, 255, .34), 0 0 18px rgba(255, 46, 77, .2);
}
.btn-ghost {
  border: 1px solid rgba(61, 107, 255, .3);
  color: var(--omgx-text);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.btn-ghost:hover {
  border-color: rgba(61, 107, 255, .55);
  background: rgba(61, 107, 255, .08);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   CARDS / PANELS
═══════════════════════════════════════════════════════════ */
.card {
  background: var(--omgx-surface);
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.group.build .card { border: 1px solid rgba(61, 107, 255, .26); }
.group.xr    .card { border: 1px solid rgba(255, 46,  77, .26); }
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(61, 107, 255, .5);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45), 0 0 22px rgba(61, 107, 255, .14);
}
.group.xr .card:hover {
  border-color: rgba(255, 46, 77, .5);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45), 0 0 22px rgba(255, 46, 77, .14);
}
.card h3 { color: var(--omgx-white); }
.card p  { color: var(--omgx-text-mute); }

.group.build { border-top: 1px solid rgba(61, 107, 255, .26); }
.group.xr    { border-top: 1px solid rgba(255, 46,  77, .26); }

.card-icon {
  background: rgba(61, 107, 255, .08);
  border: 1px solid rgba(61, 107, 255, .18);
}
.group.xr .card-icon {
  background: rgba(255, 46, 77, .08);
  border-color: rgba(255, 46, 77, .18);
}

/* ═══════════════════════════════════════════════════════════
   BENEFITS STRIP
═══════════════════════════════════════════════════════════ */
.benefits       { background: rgba(61, 107, 255, .14); }
.benefits div   { background: #070b14; }
.benefits small { color: var(--omgx-text-dim); }

/* ═══════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════ */
label { color: var(--omgx-text-mute); }
input, textarea {
  background: rgba(61, 107, 255, .04);
  border: 1px solid rgba(61, 107, 255, .2);
  color: var(--omgx-white);
  transition: border-color .18s ease, background .18s ease;
}
input:focus, textarea:focus {
  outline: none;
  border-color: rgba(61, 107, 255, .55);
  background: rgba(61, 107, 255, .07);
}
input::placeholder, textarea::placeholder { color: var(--omgx-text-dim); }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
footer   { border-top: 1px solid rgba(61, 107, 255, .14); color: var(--omgx-text-dim); }
footer a { color: var(--omgx-blue); }

/* ═══════════════════════════════════════════════════════════
   FLOATING CHAT BUTTON
═══════════════════════════════════════════════════════════ */
.fab {
  color: var(--omgx-blue);
  border: 1px solid rgba(61, 107, 255, .3);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 0 20px rgba(61, 107, 255, .18);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fab:hover {
  border-color: rgba(61, 107, 255, .48);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .55), 0 0 26px rgba(61, 107, 255, .28);
}
.fab-label {
  border: 1px solid rgba(61, 107, 255, .24);
  color: var(--omgx-text);
}

/* ═══════════════════════════════════════════════════════════
   Reduced motion
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .card:hover, .btn-dm:hover, .btn-ghost:hover, .fab:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   FAB ATTENTION SYSTEM

   Four layers, escalating, all dismissible:
     1. Sonar rings   — ambient, always on, very low opacity
     2. Preview bubble — types "Ask me anything", shows the product
     3. Notify dot     — honest: the agent is waiting
     4. Tap hand       — once per session, then retired for good

   Everything decorative is pointer-events:none so the button itself
   stays the only hit target. Nothing renders on /chat (already there),
   and nothing renders under prefers-reduced-motion except the dot.
═══════════════════════════════════════════════════════════ */

/* ── 1. Sonar rings ───────────────────────────────────── */
.omgx-fab-sonar {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.omgx-fab-sonar span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(61, 107, 255, .5);
  opacity: 0;
  animation: omgx-sonar 3.4s cubic-bezier(.2, .6, .3, 1) infinite;
}
.omgx-fab-sonar span:nth-child(2) { animation-delay: 1.7s; }

@keyframes omgx-sonar {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { transform: scale(2.1);  opacity: 0;  }
  100% { transform: scale(2.1);  opacity: 0;  }
}

/* Louder ping while the hint is on screen */
.omgx-fab-hinting .omgx-fab-sonar span {
  border-color: rgba(61, 107, 255, .8);
  animation-duration: 2.1s;
}

/* ── 2. Preview bubble ────────────────────────────────── */
.omgx-fab-preview {
  position: fixed;
  z-index: 31;
  max-width: min(15rem, calc(100vw - 6.5rem));
  padding: .6rem .85rem;
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(140deg, rgba(10, 15, 28, .96), rgba(8, 12, 22, .96));
  border: 1px solid rgba(61, 107, 255, .34);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 0 22px rgba(61, 107, 255, .16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #e6ecfa;
  font-size: .86rem;
  line-height: 1.4;
  letter-spacing: .01em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.omgx-fab-preview.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Typing dots inside the preview */
.omgx-fab-preview .dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 1.2em;
}
.omgx-fab-preview .dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3d6bff;
  opacity: .35;
  animation: omgx-preview-dot .95s ease-in-out infinite;
}
.omgx-fab-preview .dots i:nth-child(2) { animation-delay: .13s; }
.omgx-fab-preview .dots i:nth-child(3) { animation-delay: .26s; }

@keyframes omgx-preview-dot {
  0%, 100% { opacity: .35; transform: translateY(0); }
  45%      { opacity: 1;   transform: translateY(-4px); }
}

/* Caret while the message types itself in */
.omgx-fab-preview .caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: #3d6bff;
  animation: omgx-caret .6s steps(1) infinite;
}
@keyframes omgx-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── 3. Notification dot ──────────────────────────────── */
.omgx-fab-notify {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff2e4d;
  border: 2px solid #05070c;
  box-shadow: 0 0 10px rgba(255, 46, 77, .8);
  pointer-events: none;
  animation: omgx-notify 2.2s ease-in-out infinite;
}
@keyframes omgx-notify {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 8px  rgba(255, 46, 77, .7); }
  50%      { transform: scale(1.18); box-shadow: 0 0 16px rgba(255, 46, 77, .95); }
}

/* ── 4. Tap hand ──────────────────────────────────────── */
.omgx-fab-hand {
  position: fixed;
  z-index: 32;
  width: 34px;
  height: 34px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-4px, 6px) rotate(-12deg);
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .7));
}
.omgx-fab-hand.is-in {
  opacity: 1;
  transform: translate(0, 0) rotate(-12deg);
}
/* Two deliberate taps, then rest */
.omgx-fab-hand.is-tapping {
  animation: omgx-hand-tap 1.5s cubic-bezier(.34, 1.4, .5, 1) 2;
}
@keyframes omgx-hand-tap {
  0%, 100% { transform: translate(0, 0)      rotate(-12deg); }
  22%      { transform: translate(-5px, -7px) rotate(-16deg); }
  44%      { transform: translate(0, 2px)     rotate(-10deg); }
  60%      { transform: translate(0, 0)       rotate(-12deg); }
}

/* Ripple under the hand, timed to the tap */
.omgx-fab-hand::before {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(61, 107, 255, .85);
  opacity: 0;
}
.omgx-fab-hand.is-tapping::before {
  animation: omgx-hand-ripple 1.5s ease-out 2;
}
@keyframes omgx-hand-ripple {
  0%, 18% { transform: scale(.4); opacity: 0;   }
  30%     { transform: scale(1);  opacity: .85; }
  62%     { transform: scale(2.3); opacity: 0;  }
  100%    { transform: scale(2.3); opacity: 0;  }
}

/* ── Reduced motion: keep the honest signal, drop the theatre ── */
@media (prefers-reduced-motion: reduce) {
  .omgx-fab-sonar,
  .omgx-fab-hand { display: none !important; }
  .omgx-fab-preview {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .omgx-fab-notify { animation: none; }
  .omgx-fab-preview .dots i { animation: none; opacity: .8; }
}

/* ═══════════════════════════════════════════════════════════
   AUDIO TOGGLE — minimal, sits over video artwork

   It was covering the text baked into the video, so it loses the
   filled disc entirely. What remains is just the glyph.

   Touch target: the visible control is 26px, but an invisible
   expanded hit box (::before, inset -9px) gives it a 44px target.
   Small to look at, easy to hit.

   Legibility over bright video comes from a drop-shadow on the glyph
   rather than a background plate.
═══════════════════════════════════════════════════════════ */
.audio-toggle,
.chat-stage .video-portrait .audio-toggle,
.solutions-media-inner .audio-toggle {
  /* Self-contained positioning.

     index.html and chat/index.html declare position/top/right in their
     inline <style>; solutions/index.html never had an .audio-toggle rule,
     so the button rendered static in normal flow instead of over the
     video. Declaring it here means the control works on any page that
     drops the markup into a positioned container, with no per-page CSS. */
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: auto;
  left: auto;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  width: 26px;
  height: 26px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: rgba(255, 255, 255, .82);
  opacity: .72;
  transition: opacity .2s ease, color .2s ease, transform .2s ease;
}

/* Invisible 44px hit area, centred on the glyph */
.audio-toggle::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}

.audio-toggle svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Dark halo keeps the glyph readable on light video frames */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .95))
          drop-shadow(0 0 8px rgba(0, 0, 0, .6));
}

.audio-toggle:hover,
.chat-stage .video-portrait .audio-toggle:hover {
  background: transparent;
  box-shadow: none;
  opacity: 1;
  color: #ffffff;
  transform: scale(1.12);
}

/* Unmuted is a real state change — brand blue makes it obvious */
.audio-toggle.is-unmuted {
  color: var(--omgx-blue);
  opacity: 1;
}

.audio-toggle:focus-visible {
  opacity: 1;
  outline: 2px solid rgba(61, 107, 255, .85);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .audio-toggle { transition: none; }
  .audio-toggle:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — one compact row so it stays inside the viewport

   Previously two stacked rows (copyright line + "Powered by" block)
   which pushed the last line below the fold on a 1080p laptop. The
   self-referential omgxai.com link is gone; the copyright already
   names the brand, so linking to the current page added nothing.
═══════════════════════════════════════════════════════════ */
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.1rem;
  padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom));
  font-size: .86rem;
  line-height: 1.3;
  text-align: center;
}

.foot-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

/* Thin separators between items, drawn rather than typed so they
   disappear cleanly when the row wraps on narrow screens. */
.foot-item + .foot-item::before {
  content: '';
  width: 1px;
  height: 12px;
  margin-right: .7rem;
  background: rgba(61, 107, 255, .3);
}

.foot-x {
  color: var(--omgx-text-mute);
  text-decoration: none;
  transition: color .18s ease;
}
.foot-x:hover { color: var(--omgx-blue); }

/* .powered was a block with a top margin; it now sits inline */
footer .powered {
  margin-top: 0;
  color: var(--omgx-text-dim);
  letter-spacing: .03em;
}
footer .powered .bot-mascot { width: 22px; height: 22px; }

/* Phones: allow wrapping, drop the separators to avoid orphan bars */
@media (max-width: 560px) {
  footer {
    gap: .35rem .8rem;
    font-size: .8rem;
    padding: .8rem .8rem calc(.9rem + env(safe-area-inset-bottom));
  }
  .foot-item + .foot-item::before { display: none; }
}

/* Reclaim a little vertical space above the footer so the whole
   thing lands inside the first screen on the home page. */
@media (min-width: 900px) {
  .stage { padding-bottom: .8rem; }
}

/* ═══════════════════════════════════════════════════════════
   CHAT BUBBLES — real frosted glass

   The old fill was a flat opaque gradient (#0b1725 → #0f1e2f) which
   read as muddy grey-white against the panel. These are translucent
   with a genuine backdrop blur, a top inner highlight to catch the
   light, and a brand-tinted edge. The VFX particles behind the panel
   now show through faintly, which is the whole point of having them.
═══════════════════════════════════════════════════════════ */
.chat-page .bubble {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  position: relative;
  isolation: isolate;
}

/* Bot: cool neutral glass, blue-leaning */
.chat-page .bubble.bot {
  background:
    linear-gradient(152deg,
      rgba(255, 255, 255, .07) 0%,
      rgba(61, 107, 255, .07) 45%,
      rgba(10, 16, 30, .30) 100%);
  border: 1px solid rgba(255, 255, 255, .11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -14px 26px rgba(61, 107, 255, .07),
    0 6px 20px rgba(0, 0, 0, .34);
  color: #eaf0fb;
}

/* User: brand blue glass, clearly the visitor's voice */
.chat-page .bubble.user {
  background:
    linear-gradient(152deg,
      rgba(61, 107, 255, .22) 0%,
      rgba(61, 107, 255, .13) 55%,
      rgba(255, 46, 77, .07) 100%);
  border: 1px solid rgba(61, 107, 255, .34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 6px 20px rgba(0, 0, 0, .34),
    0 0 18px rgba(61, 107, 255, .1);
  color: #f2f6ff;
}

/* Glass needs a highlight along the top edge to look like glass */
.chat-page .bubble::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .09) 0%,
    transparent 38%);
  z-index: -1;
}

/* Fallback: no backdrop-filter means no glass, so use solid surfaces
   that still respect the palette rather than a washed-out panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-page .bubble.bot  { background: #0d1524; }
  .chat-page .bubble.user { background: #14224a; }
}

/* ═══════════════════════════════════════════════════════════
   SOLUTIONS PAGE — media column + copy column

   The page was a wall of cards with nothing to anchor it. The build
   reveal now sits in a sticky left column on desktop so it stays in
   view while the visitor reads down the cards, and moves to the top
   row on mobile where sticky would eat the screen.

   Sticky is the deliberate choice over a fixed hero: it keeps the
   proof visible during the read without stealing scroll.
═══════════════════════════════════════════════════════════ */
.solutions-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  align-items: start;
}

.solutions-media { min-width: 0; }

.solutions-media-inner {
  position: relative;
  border: 1px solid rgba(61, 107, 255, .22);
  border-radius: 18px;
  overflow: hidden;
  background: #05070c;
  box-shadow:
    0 0 40px rgba(61, 107, 255, .10),
    0 10px 40px rgba(0, 0, 0, .45);
}

.solutions-media-inner video {
  display: block;
  width: 100%;
  height: auto;
  /* contain, never crop — the video has text baked into the frame */
  object-fit: contain;
  background: #000;
}

.solutions-copy { min-width: 0; }
/* Whichever group leads the column aligns with the top of the video
   card: no rule, no top padding. Written as :first-child so it holds on
   the Build page and on the XR page, which leads with .group.xr. */
.solutions-copy > .group:first-child { padding-top: 0; border-top: 0; margin-top: 0; }

/* ── Desktop: two columns, media sticks ── */
@media (min-width: 900px) {
  .solutions-layout {
    grid-template-columns: clamp(320px, 38%, 460px) 1fr;
    gap: clamp(1.4rem, 3vw, 2.4rem);
  }
  .solutions-media {
    position: sticky;
    /* clears the sticky header */
    top: calc(58px + 1.2rem);
  }
  .solutions-copy .group.xr:not(:first-child) { margin-top: 2rem; }
}

/* ── Mobile: media on top, full width ── */
@media (max-width: 899px) {
  .solutions-media { order: -1; }
  .solutions-media-inner { border-radius: 14px; }
  .solutions-copy .group.xr:not(:first-child) { margin-top: 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════
   VIDEO BOX + CORNER SCRIM

   .omgx-vidbox is sized by --ar to the source file's exact ratio, so
   the box edges coincide with the rendered video edges. That is what
   lets the scrim land on the true bottom-right corner at any viewport.
   Anchoring to the outer container fails wherever object-fit:contain
   letterboxes the frame.

   Measured ratios:
     home       omgxsitelanding.mp4  576x864  2/3
     chat       idea2mvp.mp4         736x400  46/25
     solutions  build-reveal.mp4     464x688  29/43

   The scrim is corner-weighted rather than a full-width band: these
   videos carry their own text near the bottom centre, and a broad band
   would dim it. A radial falloff on a dark frame edge reads as natural
   vignetting instead of a patch.
═══════════════════════════════════════════════════════════ */
.omgx-vidbox {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  margin-inline: auto;
  border-radius: inherit;
  overflow: hidden;
  background: #000;
}

.omgx-vidbox video {
  display: block;
  width: 100%;
  height: 100%;
  /* box matches the source ratio, so cover and contain agree —
     cover avoids sub-pixel seams at the edges */
  object-fit: cover;
  object-position: center;
  background: #000;
}

.omgx-vidbox::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  height: 20%;
  pointer-events: none;
  /* below .audio-toggle (z-index 5) */
  z-index: 2;
  background:
    radial-gradient(ellipse 100% 130% at 100% 100%,
      rgba(0, 0, 0, .97) 0%,
      rgba(0, 0, 0, .94) 34%,
      rgba(0, 0, 0, .70) 56%,
      rgba(0, 0, 0, .28) 74%,
      transparent 88%);
}

/* Chat desktop: the media column is a tall flex column, so centre the
   ratio box in the leftover space rather than pinning it to the top. */
@media (min-width: 900px) {
  .chat-stage .video-portrait .omgx-vidbox { margin-block: auto; }
}

/* The old per-page video rules assumed the <video> was a direct child
   and set their own sizing. Neutralise those inside the box. */
.hero-video-inner .omgx-vidbox video,
.chat-stage .video-portrait .omgx-vidbox video,
.solutions-media-inner .omgx-vidbox video {
  max-height: none;
  aspect-ratio: auto;
  flex: none;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE — two columns

   It was a bare form on black: dark, and with nothing to justify
   filling it in. A form converts better with reassurance beside it,
   so the left column carries the mark, the promise and a direct email
   route. That content is also what lifts the page out of the dark —
   brand-tinted glass surfaces rather than a brighter background.
═══════════════════════════════════════════════════════════ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
  padding-top: clamp(1.4rem, 3vw, 2.4rem);
}

/* ── Left: brand + promise ── */
.contact-aside {
  min-width: 0;
  padding: clamp(1.2rem, 2.6vw, 1.9rem);
  border-radius: 20px;
  border: 1px solid rgba(61, 107, 255, .2);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(61, 107, 255, .13), transparent 60%),
    radial-gradient(110% 90% at 100% 100%, rgba(255, 46, 77, .09), transparent 62%),
    rgba(8, 12, 22, .72);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(61, 107, 255, .07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contact-lead {
  font-family: Orbitron, sans-serif;
  font-size: clamp(1.35rem, 3.4vw, 1.95rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: clamp(.8rem, 2vw, 1.1rem) 0 0;
  color: #fff;
}
.contact-lead span {
  display: block;
  color: var(--omgx-blue);
  text-shadow: 0 0 24px rgba(61, 107, 255, .5);
}

.contact-sub {
  margin: .7rem 0 0;
  color: var(--omgx-text-mute);
  font-size: clamp(.92rem, 1.9vw, 1rem);
  line-height: 1.55;
  max-width: 30ch;
}

/* Promise strip — the same numbers the chat agent quotes */
.contact-facts {
  list-style: none;
  margin: clamp(1rem, 2.4vw, 1.4rem) 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.contact-facts li {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .55rem .75rem;
  border-radius: 11px;
  background: rgba(61, 107, 255, .07);
  border: 1px solid rgba(61, 107, 255, .16);
}
.contact-facts b {
  font-family: Orbitron, sans-serif;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--omgx-blue);
  flex: 0 0 auto;
  min-width: 4.6em;
}
.contact-facts span {
  font-size: .89rem;
  color: var(--omgx-text);
}

.contact-mail {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: clamp(1rem, 2.2vw, 1.3rem);
  padding: .6rem .95rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: .92rem;
  color: var(--omgx-white);
  border: 1px solid transparent;
  background:
    linear-gradient(#080c16, #080c16) padding-box,
    linear-gradient(90deg, var(--omgx-blue), var(--omgx-red)) border-box;
  transition: transform .2s ease, box-shadow .2s ease;
}
.contact-mail:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(61, 107, 255, .28);
}

/* ── Right: the form ── */
.contact-form-wrap {
  min-width: 0;
  padding: clamp(1.2rem, 2.6vw, 1.9rem);
  border-radius: 20px;
  border: 1px solid rgba(61, 107, 255, .18);
  background: rgba(8, 12, 22, .6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.contact-form-wrap form { max-width: none; }
.contact-form-wrap .sec-title { margin-bottom: 1rem; }

/* The badge is shared with the hero; it needs no top margin here */
.contact-aside .brand-badge { margin: 0; }

/* ── Desktop: side by side, form gets the room ── */
@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: clamp(300px, 36%, 420px) 1fr;
    gap: clamp(1.6rem, 3vw, 2.6rem);
  }
}

/* ── Mobile: promise first, then the form ── */
@media (max-width: 899px) {
  .contact-aside     { order: -1; }
  .contact-facts b   { min-width: 4.2em; }
}

/* ═══════════════════════════════════════════════════════════
   NAV MENU TREE — Solutions ▸ Build / Enterprise XR

   Solutions is now a section, not a page: Build lives at /solutions/
   and Enterprise XR at /solutions/xr/. The parent stays a real link
   (so it still works with JS off and on a keyboard) and the caret is a
   separate button that owns the open/close state. Splitting link from
   disclosure avoids the usual trap where tapping a parent link on
   mobile navigates away before the submenu can be read.

   Open on desktop comes from hover/focus-within; on touch it comes from
   .is-open, set by assets/js/omgx-nav.js.
═══════════════════════════════════════════════════════════ */
.nav-tree {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* The caret sits tight to the label so the pair reads as one item */
.nav-tree > .nav-tree-link { padding-right: .2rem; }

.nav-tree-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-width: 22px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--omgx-text-dim);
  cursor: pointer;
  transition: color .18s ease, transform .18s ease;
}
.nav-tree-caret svg { width: 11px; height: 11px; display: block; }
.nav-tree-caret:hover { color: var(--omgx-blue); }
.nav-tree-caret:focus-visible { outline: 2px solid var(--omgx-blue); outline-offset: 2px; border-radius: 6px; }

/* Parent reads as active on both child pages */
.nav-tree.is-section > .nav-tree-link,
.nav-tree.is-section > .nav-tree-caret { color: var(--omgx-blue); }

.nav-tree-menu {
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  z-index: 40;
  min-width: 15.5rem;
  max-width: min(86vw, 19rem);
  padding: .4rem;
  border: 1px solid var(--omgx-line);
  border-radius: 14px;
  background: rgba(6, 10, 18, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 22px rgba(61, 107, 255, .1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.nav-tree.is-open > .nav-tree-menu,
.nav-tree:focus-within > .nav-tree-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .nav-tree:hover > .nav-tree-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* Items are two-line: label plus the one-line reason to click */
nav .nav-tree-menu a {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  min-height: 44px;
  padding: .55rem .6rem;
  border-radius: 10px;
  color: var(--omgx-text);
  letter-spacing: .02em;
  line-height: 1.25;
  transition: background .18s ease, color .18s ease;
}
nav .nav-tree-menu a:hover,
nav .nav-tree-menu a:focus-visible { background: rgba(61, 107, 255, .1); color: var(--omgx-white); }
nav .nav-tree-menu a[aria-current="page"] { background: rgba(61, 107, 255, .14); color: var(--omgx-white); }
/* The underline treatment for top-level active links would sit wrong here */
nav .nav-tree-menu a.active::after { content: none; }

.nav-tree-menu .nt-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: .45rem;
  border-radius: 50%;
  background: var(--omgx-blue);
  box-shadow: 0 0 10px rgba(61, 107, 255, .8);
}
.nav-tree-menu a.nt-xr .nt-dot {
  background: var(--omgx-red);
  box-shadow: 0 0 10px rgba(255, 46, 77, .8);
}
.nav-tree-menu .nt-label { display: block; font-weight: 600; }
.nav-tree-menu .nt-note {
  display: block;
  margin-top: .1rem;
  color: var(--omgx-text-dim);
  font-size: .82em;
  letter-spacing: .01em;
}

/* Mobile: nav is a tight single row, so centre the panel under the item
   rather than left-aligning it off the edge. omgx-nav.js nudges it back
   inside the viewport if it still overflows. */
@media (max-width: 899px) {
  .nav-tree-menu {
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 14rem;
  }
  .nav-tree.is-open > .nav-tree-menu,
  .nav-tree:focus-within > .nav-tree-menu { transform: translateX(-50%); }
  .nav-tree-menu .nt-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-tree-menu { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   SECTION SWITCH — sibling-page link at the foot of a solutions page

   Build and Enterprise XR are peers, so each page ends with a plain
   route to the other. Cheaper than a second nav and it catches the
   visitor at the moment they have finished reading.
═══════════════════════════════════════════════════════════ */
.section-switch {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1.6rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--omgx-line);
  border-radius: 14px;
  background: rgba(8, 12, 22, .6);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.section-switch:hover {
  border-color: var(--omgx-line-strong);
  background: rgba(61, 107, 255, .08);
  transform: translateY(-2px);
}
.section-switch.to-xr { border-color: rgba(255, 46, 77, .26); }
.section-switch.to-xr:hover {
  border-color: rgba(255, 46, 77, .5);
  background: rgba(255, 46, 77, .08);
}
.section-switch .ss-copy { min-width: 0; }
.section-switch .ss-kicker {
  display: block;
  font-family: Orbitron, sans-serif;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--omgx-text-dim);
}
.section-switch .ss-title {
  display: block;
  margin-top: .2rem;
  font-weight: 700;
  color: var(--omgx-text);
}
.section-switch .ss-arrow {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--omgx-blue);
  transition: transform .2s ease;
}
.section-switch.to-xr .ss-arrow { color: var(--omgx-red); }
.section-switch:hover .ss-arrow { transform: translateX(3px); }
.section-switch .ss-arrow svg { width: 20px; height: 20px; display: block; }

/* ═══════════════════════════════════════════════════════════
   SOLUTIONS COPY — facts strip + CTAs

   With Build and Enterprise XR split onto their own pages, each copy
   column ends with the two things a visitor needs next: the shape of
   the engagement, and a route to start it.
═══════════════════════════════════════════════════════════ */
.sol-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 1.4rem;
  border-radius: 12px;
  overflow: hidden;
  background: var(--omgx-line);
}
.sol-facts > div {
  padding: .8rem .9rem;
  text-align: center;
  background: rgba(5, 9, 16, .96);
}
.sol-facts b {
  display: block;
  font-family: Orbitron, sans-serif;
  font-size: .92rem;
  letter-spacing: .05em;
  color: var(--omgx-white);
}
.sol-facts small {
  display: block;
  margin-top: .22rem;
  font-size: .82rem;
  color: var(--omgx-text-dim);
}
/* XR is scoped per deployment, so its strip takes the crimson edge */
.sol-facts.xr { background: rgba(255, 46, 77, .22); }

.sol-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.2rem;
}

/* Each page now carries one group of three, so the copy column holds
   three columns instead of wrapping the third card onto its own row.
   The per-page rule asks for minmax(220px), which is ~20px too wide
   once the media column takes its share. */
@media (min-width: 1100px) {
  .solutions-copy .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .sol-facts { grid-template-columns: 1fr; }
  .sol-ctas { flex-direction: column; }
  .sol-ctas .btn { width: 100%; }
}