/* Building AI page-specific styles */

.ai-hero {
  --ai-bg-x: 0px;
  --ai-bg-y: 0px;
  --ai-copy-y: 0px;
  --ai-panel-y: 0px;
  --ai-panel-rotate: 0deg;
  --ai-rail-progress: 0;
  --ai-rail-x: -100%;
  --ai-node-green-x: 0px;
  --ai-node-green-y: 0px;
  --ai-node-blue-x: 0px;
  --ai-node-blue-y: 0px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--nav-height));
  display: grid;
  align-items: center;
}

.ai-hero::before {
  content: '';
  position: absolute;
  inset: -24px;
  z-index: -3;
  background-image: url("/assets/og-image.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.22;
  filter: saturate(1.08) contrast(1.08);
  transform: translate3d(var(--ai-bg-x), var(--ai-bg-y), 0) scale(1.06);
  transition: transform var(--t-fast) linear;
}

.ai-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at calc(72% + var(--ai-bg-x)) calc(38% + var(--ai-bg-y)), rgba(88,166,255,0.15), transparent 28%),
    radial-gradient(circle at calc(42% + var(--ai-bg-x)) calc(54% + var(--ai-bg-y)), rgba(63,207,142,0.1), transparent 26%),
    linear-gradient(90deg, rgba(15,26,46,0.96), rgba(15,26,46,0.78) 42%, rgba(13,17,23,0.72)),
    linear-gradient(180deg, rgba(15,26,46,0.08), rgba(13,17,23,0.82));
  pointer-events: none;
}

.ai-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--sp-16);
  align-items: center;
}

.ai-hero__copy {
  transform: translateY(var(--ai-copy-y));
  transition: transform var(--t-fast) linear;
}

.ai-hero__signal-rail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 36px;
  border-top: 1px solid rgba(88,166,255,0.16);
  border-bottom: 1px solid rgba(63,207,142,0.14);
  opacity: 0.68;
  pointer-events: none;
  overflow: hidden;
}

.ai-hero__signal-rail::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent, rgba(88,166,255,0.13), transparent),
    radial-gradient(circle, rgba(238,243,248,0.14) 1px, transparent 1px);
  background-size: 100% 100%, 30px 30px;
}

.ai-hero__signal-rail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(63,207,142,0.3), rgba(88,166,255,0.22), transparent);
  transform: translateX(var(--ai-rail-x));
}

.ai-hero__rail-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  height: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  filter: drop-shadow(0 0 10px rgba(88,166,255,0.38));
  transform: rotate(-1.3deg);
}

.ai-hero__rail-line--green {
  left: 0;
  right: 0;
  top: 19px;
  background: linear-gradient(90deg, transparent, var(--green-light), transparent);
  filter: drop-shadow(0 0 10px rgba(142,224,160,0.38));
  transform: rotate(1.1deg);
}

.ai-hero__rail-node {
  position: absolute;
  top: 12px;
  left: 58%;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--green);
  box-shadow: 0 0 22px rgba(63,207,142,0.55);
  animation: ai-node-green-float 3.8s ease-in-out infinite alternate;
}

.ai-hero__rail-node--blue {
  left: 70%;
  background: var(--blue-light);
  box-shadow: 0 0 22px rgba(121,192,255,0.55);
  animation: ai-node-blue-float 4.2s ease-in-out infinite alternate;
  animation-delay: -1.4s;
}

@keyframes ai-node-green-float {
  from { transform: translate3d(calc(var(--ai-node-green-x) - 34px), calc(var(--ai-node-green-y) - 6px), 0); }
  to { transform: translate3d(calc(var(--ai-node-green-x) + 34px), calc(var(--ai-node-green-y) + 7px), 0); }
}

@keyframes ai-node-blue-float {
  from { transform: translate3d(calc(var(--ai-node-blue-x) + 32px), calc(var(--ai-node-blue-y) + 7px), 0); }
  to { transform: translate3d(calc(var(--ai-node-blue-x) - 32px), calc(var(--ai-node-blue-y) - 6px), 0); }
}

.ai-hero__panel {
  background: var(--bg-white);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transform: translateY(var(--ai-panel-y)) rotate(var(--ai-panel-rotate));
  transition:
    border-color var(--t-base),
    box-shadow var(--t-base) var(--ease),
    transform var(--t-fast) linear;
}

.ai-hero__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(63,207,142,0.12), transparent 44%),
    linear-gradient(315deg, rgba(88,166,255,0.1), transparent 40%);
  opacity: 0.72;
  pointer-events: none;
}

.ai-hero__panel > * {
  position: relative;
  z-index: 1;
}

.ai-hero__logo {
  height: 30px;
  width: auto;
  margin-bottom: var(--sp-8);
}

.ai-hero__status,
.ai-stack__header {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}

.ai-hero__status {
  margin-bottom: var(--sp-5);
}

.ai-signal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.ai-signal {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--t-base),
    transform var(--t-base) var(--ease),
    background var(--t-base);
}

.ai-signal::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}

.ai-signal:hover {
  background: #0D1117;
  border-color: var(--border-dark);
  transform: translateY(-2px);
}

.ai-signal:hover::after {
  transform: scaleX(1);
}

.ai-signal__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--sp-2);
}

.ai-signal__value {
  display: block;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--navy);
}

.ai-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

.ai-process .pillar {
  --ai-card-y: 0px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--green);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  transition:
    border-color var(--t-base),
    box-shadow var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
  transform: translateY(var(--ai-card-y));
}

.ai-process .pillar:hover {
  border-color: var(--border-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--ai-card-y) - 2px));
}

.ai-process .pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-5);
  border-radius: var(--radius-md);
  background: var(--green-dim);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
}

.ai-process .pillar__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-3);
}

.ai-process .pillar__body {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.75;
}

.ai-inhouse {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: var(--sp-16);
  align-items: start;
}

.ai-inhouse__body {
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: 1.85;
  margin-bottom: var(--sp-5);
}

.ai-stack {
  --ai-card-y: 0px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--sp-8);
  transform: translateY(var(--ai-card-y));
  transition:
    border-color var(--t-base),
    box-shadow var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
}

.ai-stack:hover {
  border-color: var(--border-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--ai-card-y) - 2px));
}

.ai-stack__header {
  color: var(--blue);
  margin-bottom: var(--sp-6);
}

.cta-banner {
  position: relative;
  overflow: hidden;
  background: var(--navy-bg);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-2xl);
  padding: var(--sp-16);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 3px solid var(--green);
  pointer-events: none;
}

.cta-banner__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-light);
  margin-bottom: var(--sp-4);
}

.cta-banner__headline {
  color: var(--text);
  font-size: var(--text-4xl);
  margin-bottom: var(--sp-5);
}

.cta-banner__sub {
  color: var(--navy-mid);
  font-size: var(--text-lg);
  line-height: 1.8;
  max-width: 620px;
  margin: 0 auto var(--sp-8);
}

.cta-banner__actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.ai-motion-card {
  --ai-card-y: 0px;
  transform: translateY(var(--ai-card-y));
  transition:
    border-color var(--t-base),
    box-shadow var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
}

.ai-motion-card:hover {
  transform: translateY(calc(var(--ai-card-y) - 3px));
}

@media (max-width: 1024px) {
  .ai-hero__grid,
  .ai-inhouse {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .ai-hero__panel,
  .ai-stack {
    max-width: 640px;
  }

  .ai-process {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .ai-hero {
    min-height: 0;
  }

  .ai-hero::before {
    opacity: 0.16;
    background-position: center top;
  }

  .ai-hero__signal-rail {
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
  }

  .ai-process,
  .ai-signal-grid {
    grid-template-columns: 1fr;
  }

  .ai-hero__panel,
  .ai-stack,
  .cta-banner {
    border-radius: var(--radius-xl);
  }

  .cta-banner {
    padding: var(--sp-10) var(--sp-6);
  }

  .cta-banner__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-hero,
  .ai-hero__copy,
  .ai-hero__panel,
  .ai-hero__rail-node,
  .ai-process .pillar,
  .ai-stack,
  .ai-motion-card {
    animation: none;
    transform: none;
  }
}