/* =========================================================
   Production Signal — Aiventra Digital theme layer.
   Hand-written CSS loaded AFTER app.css (the prebuilt Tailwind
   file). Uses the existing --c-* design tokens so light + dark
   modes work through the existing [data-theme] toggle.

   Design thesis: a studio that ships production software should
   have a homepage that reads like a healthy live system —
   telemetry, signal traces, instrument panels — not a generic
   gradient agency hero. Cyan/violet stay, but as SIGNAL color
   on instrumentation, not decorative frosting.
   ========================================================= */

:root {
  /* Signal palette, expressed against the existing ground tokens.
     Two roles per hue:
       --sig-*       = the raw brand hue (great on dark grounds)
       --sig-*-ink   = an accessible variant for TEXT/icons, flips per
                       theme so cyan/green never wash out on white. */
  --sig-cyan: 0 247 255;
  --sig-violet: 139 92 246;
  --sig-green: 0 255 148;

  /* On dark, the ink variants are the raw hues — they read fine. */
  --sig-cyan-ink: 0 247 255;
  --sig-violet-ink: 139 92 246;
  --sig-green-ink: 0 255 148;

  /* Chosen, hue-biased hairline — cyan-tinted on dark. Reads
     intentional rather than a default white/10. */
  --sig-line: rgb(var(--c-text) / 0.10);
  --sig-line-strong: rgb(var(--c-text) / 0.16);
  --sig-panel: rgb(var(--c-surface) / 0.45);
  --sig-panel-solid: rgb(var(--c-surface) / 0.92);

  /* Telemetry mono treatment. */
  --sig-readout: rgb(var(--c-text) / 0.55);

  --sig-radius: 14px;
  --sig-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="light"] {
  /* On light, hairlines pick up a slate bias rather than pure black. */
  --sig-line: rgb(15 23 42 / 0.10);
  --sig-line-strong: rgb(15 23 42 / 0.16);
  --sig-panel: rgb(255 255 255 / 0.85);
  --sig-panel-solid: rgb(255 255 255 / 0.96);

  /* Accessible ink variants for light backgrounds. Cyan and green
     are the offenders on white; darken + desaturate them so text
     and labels meet contrast. Violet only needs a small nudge. */
  --sig-cyan-ink: 14 116 144;   /* #0E7490 deep teal */
  --sig-green-ink: 5 122 85;    /* #057A55 forest */
  --sig-violet-ink: 109 40 217; /* #6D28D9 deep violet */
}

/* Map the raw brand hexes (used in inline style="color:#..." on
   service/industry tiles) to their accessible ink variants in light
   mode. attr-style can't be overridden, so the tiles instead set a
   --tile-ink var that this rule supplies; see [data-hue]. */
:root[data-theme="light"] [data-hue="#00F7FF"],
:root[data-theme="light"] [data-hue="#00f7ff"] { color: rgb(var(--sig-cyan-ink)) !important; }
:root[data-theme="light"] [data-hue="#00FF94"],
:root[data-theme="light"] [data-hue="#00ff94"] { color: rgb(var(--sig-green-ink)) !important; }
:root[data-theme="light"] [data-hue="#8B5CF6"],
:root[data-theme="light"] [data-hue="#8b5cf6"] { color: rgb(var(--sig-violet-ink)) !important; }

/* ---------- Telemetry eyebrow (mono labels) ---------- */
.sig-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--sig-cyan-ink));
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.sig-eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--sig-cyan-ink)), transparent);
}
/* Violet-variant eyebrow (industries) — uses the violet ink token. */
.sig-eyebrow--violet { color: rgb(var(--sig-violet-ink)); }
.sig-eyebrow--violet::before { background: linear-gradient(90deg, rgb(var(--sig-violet-ink)), transparent); }

/* ---------- Live status dot ---------- */
.sig-live {
  position: relative;
  display: inline-flex;
  width: 0.5rem;
  height: 0.5rem;
}
.sig-live::before,
.sig-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: rgb(var(--sig-green));
}
.sig-live::after {
  animation: sig-ping 1.8s var(--sig-ease) infinite;
}
@keyframes sig-ping {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* ---------- Hero code terminal (right column) ----------
   A live "code shipping to production" panel: typed lines with
   syntax colors, a build/deploy sequence, blinking cursor. Fills
   the previously-empty right side of the hero. */
.sig-term {
  border: 1px solid var(--sig-line-strong);
  border-radius: var(--sig-radius);
  background: rgb(var(--c-surface) / 0.7);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.55),
              0 1px 0 rgb(var(--c-text) / 0.05) inset;
  overflow: hidden;
  backdrop-filter: blur(6px);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
:root[data-theme="dark"] .sig-term {
  background: rgb(8 12 20 / 0.85);   /* a true terminal ground on dark */
}

.sig-term-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--sig-line);
  background: rgb(var(--c-text) / 0.03);
}
.sig-term-dot {
  width: 0.7rem; height: 0.7rem;
  border-radius: 9999px;
  flex: none;
}
.sig-term-dot--r { background: #ff5f56; }
.sig-term-dot--y { background: #ffbd2e; }
.sig-term-dot--g { background: #27c93f; }
.sig-term-title {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--sig-readout);
}
.sig-term-tag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--sig-green-ink));
}

.sig-term-body {
  padding: 1.1rem 1.2rem 1.3rem;
  font-size: 0.82rem;
  line-height: 1.75;
  /* Reserve height so typing doesn't make the layout jump. */
  min-height: 21rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.sig-term-line { display: block; }
.sig-term-gutter {
  color: rgb(var(--c-text) / 0.28);
  user-select: none;
  margin-right: 0.9rem;
}

/* Syntax token colors — derived from the signal palette, using the
   accessible ink variants so they hold up in light mode too. */
.tok-key   { color: rgb(var(--sig-violet-ink)); }
.tok-fn    { color: rgb(var(--sig-cyan-ink)); }
.tok-str   { color: rgb(var(--sig-green-ink)); }
.tok-num   { color: #d97706; }
.tok-com   { color: rgb(var(--c-text) / 0.4); font-style: italic; }
.tok-punct { color: rgb(var(--c-text) / 0.6); }
.tok-ok    { color: rgb(var(--sig-green-ink)); }

/* Service-of-interest chevron: the precompiled Tailwind bundle is missing
   the `right-3 top-1/2 -translate-y-1/2` utilities, so the absolutely-
   positioned SVG collapsed to the wrapper's top-left and showed up as a
   stray chevron below the field. Position it correctly here (this file
   loads after app.css). */
.select-chevron {
  right: 0.75rem;               /* right-3 */
  top: 50%;                     /* top-1/2 */
  transform: translateY(-50%);  /* -translate-y-1/2 */
  left: auto;
}

/* Hide the browser's native <select> arrow so only .select-chevron shows.
   (The precompiled Tailwind `appearance-none` isn't reliably applied, which
   left the native arrow visible alongside our custom one.) */
select[name="service"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}
select[name="service"]::-ms-expand { display: none; }

/* Blinking caret that follows the typed text. */
.sig-caret {
  display: inline-block;
  width: 0.55ch;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: rgb(var(--sig-cyan-ink));
  animation: sig-blink 1s steps(1) infinite;
}
@keyframes sig-blink { 50% { opacity: 0; } }

/* ---------- Hero ---------- */
.sig-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.sig-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Fade the signal field out toward the content. */
  mask-image: radial-gradient(120% 90% at 70% 10%, black 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, black 25%, transparent 80%);
  opacity: 0.9;
}

/* Display headline — true large scale, balanced wrap. */
.sig-display {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.96;
  text-wrap: balance;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
}
.sig-display .sig-ink {
  background: linear-gradient(100deg, rgb(var(--sig-cyan)), rgb(var(--sig-violet)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Orchestrated page-load reveal of hero lines. */
.sig-rise {
  opacity: 0;
  transform: translateY(14px);
  animation: sig-rise 0.9s var(--sig-ease) forwards;
}
.sig-rise[data-d="1"] { animation-delay: 0.05s; }
.sig-rise[data-d="2"] { animation-delay: 0.18s; }
.sig-rise[data-d="3"] { animation-delay: 0.32s; }
.sig-rise[data-d="4"] { animation-delay: 0.46s; }
@keyframes sig-rise {
  to { opacity: 1; transform: none; }
}

/* ---------- Call-to-call: primary action ---------- */
.sig-call {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.95rem 1.5rem;
  border-radius: 10px;
  color: #05070a;
  background-image: linear-gradient(135deg, #00f7ff, #2ad4ff 55%, #8b5cf6 165%);
  box-shadow: 0 10px 30px -10px rgb(var(--sig-cyan) / 0.7);
  transition: transform 0.18s var(--sig-ease), box-shadow 0.18s var(--sig-ease);
}
.sig-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgb(var(--sig-cyan) / 0.8);
}
.sig-call .sig-call-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.sig-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.9rem;
  padding: 0.95rem 1.4rem;
  border-radius: 10px;
  border: 1px solid var(--sig-line-strong);
  color: rgb(var(--c-text) / 0.8);
  transition: border-color 0.18s var(--sig-ease), color 0.18s var(--sig-ease);
}
.sig-ghost:hover {
  border-color: rgb(var(--sig-cyan) / 0.55);
  color: rgb(var(--sig-cyan));
}

/* ---------- Telemetry stat readouts ---------- */
.sig-stat {
  border: 1px solid var(--sig-line);
  border-radius: var(--sig-radius);
  background: var(--sig-panel);
  padding: 1.1rem 1.2rem;
  position: relative;
  overflow: hidden;
}
.sig-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, rgb(var(--sig-cyan) / 0.7), transparent 60%);
}
.sig-stat-value {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  color: rgb(var(--c-text));
  font-variant-numeric: tabular-nums;
}
.sig-stat-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sig-readout);
  margin-top: 0.3rem;
}

/* ---------- Instrument tiles (services / industries) ---------- */
.sig-tile {
  position: relative;
  display: block;
  border: 1px solid var(--sig-line);
  border-radius: var(--sig-radius);
  background: var(--sig-panel);
  padding: 1.4rem;
  overflow: hidden;
  transition: border-color 0.22s var(--sig-ease), transform 0.22s var(--sig-ease);
}
/* The igniting edge — a hairline that lights up on hover. */
.sig-tile::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--tile-accent, rgb(var(--sig-cyan)));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.28s var(--sig-ease);
}
.sig-tile:hover {
  border-color: var(--sig-line-strong);
  transform: translateY(-3px);
}
.sig-tile:hover::after { transform: scaleY(1); }

.sig-index {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--sig-readout);
}
.sig-tile-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  margin-top: 0.5rem;
}
.sig-tile-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgb(var(--c-text) / 0.55);
  margin-top: 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Sticky call bar (mobile-first persistent CTA) ---------- */
.sig-callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: var(--sig-panel-solid);
  border-top: 1px solid var(--sig-line-strong);
  backdrop-filter: blur(12px);
  transform: translateY(110%);
  transition: transform 0.4s var(--sig-ease);
}
.sig-callbar[data-shown="1"] { transform: none; }
.sig-callbar-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.sig-callbar-meta b {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.9rem;
}
.sig-callbar-meta span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sig-readout);
}
@media (min-width: 768px) {
  /* On desktop the call bar floats as a compact pill, bottom-right. */
  .sig-callbar {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    border-radius: 9999px;
    border: 1px solid var(--sig-line-strong);
    padding: 0.55rem 0.7rem 0.55rem 1.1rem;
    box-shadow: 0 18px 50px -18px rgb(0 0 0 / 0.55);
  }
}

/* ---------- Section scaffolding ---------- */
.sig-section-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  text-wrap: balance;
}

/* ---------- Reduced motion: drop to a calm static state ---------- */
@media (prefers-reduced-motion: reduce) {
  .sig-rise { opacity: 1; transform: none; animation: none; }
  .sig-live::after { animation: none; }
  .sig-call:hover, .sig-tile:hover { transform: none; }
  .sig-callbar { transition: none; }
}

/* =========================================================
   SITE-WIDE LIGHT-MODE CONTRAST FIXES
   The prebuilt app.css only darkens solid .text-cyan in light
   mode. The opacity variants, signal-green, and inline hex
   colors stayed at their dark-tuned hues and washed out on the
   near-white ground (eyebrows like "// OVERVIEW", cyan service
   titles, "Available now" labels). This loads after app.css so
   these win. Applies to EVERY view, not just the homepage.
   ========================================================= */
:root[data-theme="light"] {

  /* --- Tailwind opacity utility classes (eyebrows, labels, links) --- */
  .text-cyan\/70,
  .text-cyan\/90 { color: #0e7490 !important; }   /* deep teal */
  .text-signal,
  .text-signal\/70 { color: #057a55 !important; } /* forest green */
  .text-violet\/70 { color: #6d28d9 !important; } /* deep violet */

  /* --- Inline style="color:#hex" used for TEXT on service/industry
         pages (titles, eyebrows, markers). Match the color: declaration
         specifically so we don't touch elements that use the same hex
         only for border-color/background (icon swatches, dots). --- */
  [style*="color: #00F7FF"], [style*="color:#00F7FF"],
  [style*="color: #00f7ff"], [style*="color:#00f7ff"] { color: #0e7490 !important; }
  [style*="color: #00FF94"], [style*="color:#00FF94"],
  [style*="color: #00ff94"], [style*="color:#00ff94"] { color: #057a55 !important; }
  [style*="color: #8B5CF6"], [style*="color:#8B5CF6"],
  [style*="color: #8b5cf6"], [style*="color:#8b5cf6"] { color: #6d28d9 !important; }

  /* --- HOVER states. app.css turns text bright cyan (#00F7FF) on
         hover, which vanishes against the pale hover background in
         light mode — e.g. the Services dropdown item, nav links,
         footer links, service-card titles. Darken the hovered text
         and hovered borders to the accessible variants. --- */
  .hover\:text-cyan:hover,
  .group:hover .group-hover\:text-cyan,
  .group-hover\:text-cyan { color: #0e7490 !important; }

  .hover\:border-cyan\/40:hover,
  .hover\:border-cyan\/50:hover { border-color: #0e7490 !important; }

  /* The dropdown "View all services →" and similar use text-cyan/90
     on a pale hover bg; already covered by the opacity rules above,
     but re-assert on hover so the hover bg can't reduce contrast. */
  .hover\:bg-white\/5:hover .text-cyan,
  .hover\:bg-white\/5:hover.text-cyan { color: #0e7490 !important; }
}

/* The hero gradient headline ("works in production") already uses
   .from-cyan/.to-violet which app.css darkens in light mode, so it
   stays legible — no change needed there. */