/* ============ engenuityhub.ai — landing ============ */

/* While the landing page is mounted, paint the whole document dark so
   overscroll and mid-scroll repaints never flash the default white body. */
html:has(.eg) {
  scroll-behavior: smooth;
  background: #04070d;
  color-scheme: dark;
}

body:has(.eg) {
  background: #04070d;
}

.eg {
  --eg-bg: #04070d;
  --eg-bg2: #060b14;
  --eg-panel: rgba(10, 17, 28, 0.62);
  --eg-line: rgba(125, 170, 235, 0.1);
  --eg-line-2: rgba(125, 170, 235, 0.22);
  --eg-cyan: #38d4ff;
  --eg-blue: #4f8dff;
  --eg-red: #fb7185;
  --eg-text: #e9eff9;
  --eg-dim: #92a5c2;
  --eg-dim-2: #5d6f8a;
  --eg-mono:
    ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  background: var(--eg-bg);
  color: var(--eg-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.eg ::selection {
  background: rgba(56, 212, 255, 0.28);
}

/* ---------- primitives ---------- */

.eg-wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.eg-mono {
  font-family: var(--eg-mono);
}

.eg-kicker {
  font-family: var(--eg-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--eg-cyan);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.eg-kicker::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--eg-cyan));
}

.eg-h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.eg-gradient-text {
  background: linear-gradient(92deg, #7de6ff 0%, var(--eg-cyan) 38%, var(--eg-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.75rem 1.5rem;
  transition:
    filter 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.eg-btn-primary {
  background: linear-gradient(92deg, #35cff2, #3f7dff);
  color: #03111c;
  box-shadow:
    0 0 0 1px rgba(120, 220, 255, 0.25) inset,
    0 8px 32px -8px rgba(56, 180, 255, 0.55);
}

.eg-btn-primary:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(140, 230, 255, 0.4) inset,
    0 12px 40px -8px rgba(56, 180, 255, 0.7);
}

/* ---------- reveal on scroll ---------- */

.eg-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}

.eg-reveal.eg-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- nav ---------- */

.eg-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    backdrop-filter 0.3s ease;
  border-bottom: 1px solid transparent;
}

.eg-nav.eg-scrolled {
  background: rgba(4, 8, 14, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--eg-line);
}

.eg-logo-tile {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  font-family: var(--eg-mono);
  font-weight: 700;
  font-size: 0.9375rem;
  color: #a5ecff;
  background:
    linear-gradient(var(--eg-bg2), var(--eg-bg2)) padding-box,
    linear-gradient(135deg, rgba(56, 212, 255, 0.9), rgba(79, 141, 255, 0.35)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 18px -4px rgba(56, 212, 255, 0.45);
}

.eg-nav-link {
  font-size: 0.875rem;
  color: var(--eg-dim);
  transition: color 0.2s ease;
}

.eg-nav-link:hover {
  color: #fff;
}

/* ---------- hero ---------- */

.eg-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.eg-grid-layer {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(125, 170, 235, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(125, 170, 235, 0.055) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 30%, transparent 78%);
  pointer-events: none;
}

.eg-hero-img {
  position: absolute;
  top: 50%;
  right: -6%;
  transform: translateY(-52%);
  width: min(66vw, 66rem);
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 52% 50%, black 42%, transparent 74%);
  mask-image: radial-gradient(ellipse 62% 62% at 52% 50%, black 42%, transparent 74%);
  opacity: 0.94;
  pointer-events: none;
  animation: eg-float 9s ease-in-out infinite;
}

@keyframes eg-float {
  0%,
  100% {
    transform: translateY(-52%);
  }
  50% {
    transform: translateY(-54%);
  }
}

.eg-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.65;
  pointer-events: none;
}

.eg-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  pointer-events: none;
}

.eg-scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, transparent, rgba(56, 212, 255, 0.7));
  overflow: visible;
}

.eg-scroll-cue::after {
  content: '';
  position: absolute;
  left: -1.5px;
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--eg-cyan);
  animation: eg-drip 2.2s ease-in-out infinite;
}

@keyframes eg-drip {
  0% {
    top: 0;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .eg-hero-img {
    right: 50%;
    top: 34%;
    transform: translate(50%, -50%);
    width: 150vw;
    max-width: none;
    opacity: 0.4;
    animation: none;
  }
}

/* ---------- capability tiles ---------- */

.eg-tile {
  position: relative;
  border: 1px solid var(--eg-line);
  border-radius: 1rem;
  padding: 1.5rem 1.375rem 1.375rem;
  background: linear-gradient(180deg, rgba(12, 20, 34, 0.55), rgba(7, 12, 21, 0.4));
  transition:
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
  overflow: hidden;
}

.eg-tile:hover {
  border-color: rgba(56, 212, 255, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 20px 50px -24px rgba(56, 180, 255, 0.35);
}

.eg-tile-idx {
  font-family: var(--eg-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--eg-dim-2);
}

.eg-tile-glyph {
  height: 3.25rem;
  margin: 1rem 0 0.875rem;
  color: var(--eg-cyan);
}

.eg-tile-glyph svg {
  height: 100%;
  overflow: visible;
}

.eg-dash {
  stroke-dasharray: 6 8;
  animation: eg-dash-move 2.6s linear infinite;
}

@keyframes eg-dash-move {
  to {
    stroke-dashoffset: -56;
  }
}

.eg-pulse-dot {
  animation: eg-glyph-pulse 2.2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes eg-glyph-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

.eg-wave {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: eg-wave-draw 3.2s ease-in-out infinite;
}

@keyframes eg-wave-draw {
  0% {
    stroke-dashoffset: 240;
    opacity: 0.4;
  }
  55% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -240;
    opacity: 0.4;
  }
}

/* ---------- industries ---------- */

.eg-ind-card {
  position: relative;
  border: 1px solid var(--eg-line);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--eg-bg2);
  transition:
    border-color 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.eg-ind-card:hover {
  border-color: rgba(56, 212, 255, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -28px rgba(56, 180, 255, 0.4);
}

.eg-ind-img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) brightness(0.92);
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease;
}

.eg-ind-card:hover .eg-ind-img {
  transform: scale(1.045);
  filter: saturate(1.15) brightness(1.05);
}

.eg-ind-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(4, 7, 13, 0.92) 88%);
  pointer-events: none;
}

/* ---------- statement / provenance ---------- */

.eg-statement {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.eg-provenance {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  border: 1px solid var(--eg-line);
  border-radius: 9999px;
  padding: 0.625rem 1.375rem;
  font-family: var(--eg-mono);
  font-size: 0.71875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eg-dim);
  background: rgba(10, 17, 28, 0.5);
}

/* ---------- form ---------- */

.eg-input {
  width: 100%;
  border: 1px solid var(--eg-line-2);
  border-radius: 0.625rem;
  background: rgba(8, 14, 24, 0.7);
  color: var(--eg-text);
  padding: 0.75rem 0.9375rem;
  font-size: 0.9375rem;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.eg-input::placeholder {
  color: var(--eg-dim-2);
}

.eg-input:focus {
  border-color: rgba(56, 212, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(56, 212, 255, 0.14);
}

.eg-form-card {
  border: 1px solid var(--eg-line-2);
  border-radius: 1.125rem;
  background: linear-gradient(180deg, rgba(13, 22, 37, 0.8), rgba(7, 12, 21, 0.9));
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, 0.8),
    0 0 70px -34px rgba(56, 180, 255, 0.3);
  backdrop-filter: blur(10px);
}

/* ---------- misc ---------- */

.eg-hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--eg-line-2), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .eg *,
  .eg *::before,
  .eg *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .eg-reveal {
    opacity: 1;
    transform: none;
  }
}