/* MBLF Consulting — Design System
   Palette extracted from the hero Seedance video:
     - deep navy backdrop with subtle gradient
     - neon green code accents
     - warm amber highlights from the neural mesh
*/

:root {
  --navy-950: #03070f;
  --navy-900: #050b1a;
  --navy-800: #0a1326;
  --navy-700: #101e3a;
  --navy-600: #1a2b4a;
  --navy-500: #2a3d62;

  --green-500: #00ff88;
  --green-400: #2dffa0;
  --green-300: #6cffbe;
  --green-soft: rgba(0, 255, 136, 0.18);

  --amber-400: #ffb56b;
  --amber-soft: rgba(255, 181, 107, 0.14);

  --text: #e8edf5;
  --text-soft: #97a3b6;
  --text-dim: #6b7585;

  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 1240px;

  --easing: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--navy-950);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}
.container-narrow { max-width: 760px; }

/* ========= SITE-WIDE ANIMATED BACKGROUND ========= */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 255, 136, 0.08) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 100%, rgba(255, 181, 107, 0.06) 0%, transparent 45%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 50%, var(--navy-950) 100%);
}

/* Drifting neural mesh — pure CSS, no JS needed.
   Uses a tiled SVG-as-data-URI pattern of dots + connecting lines, animated
   slowly to suggest the AI mesh from the hero video. */
.site-bg-mesh {
  position: absolute;
  inset: -20%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%2300ff88' stroke-width='0.6' opacity='0.18'><circle cx='40' cy='40' r='2'/><circle cx='180' cy='60' r='1.6'/><circle cx='110' cy='120' r='2.2'/><circle cx='50' cy='190' r='1.8'/><circle cx='200' cy='180' r='2'/><line x1='40' y1='40' x2='110' y2='120'/><line x1='180' y1='60' x2='110' y2='120'/><line x1='110' y1='120' x2='50' y2='190'/><line x1='110' y1='120' x2='200' y2='180'/><line x1='180' y1='60' x2='200' y2='180'/></g></svg>");
  background-size: 320px 320px;
  opacity: 0.55;
  animation: meshDrift 60s linear infinite;
  mix-blend-mode: screen;
}

@keyframes meshDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-320px, -320px); }
}

/* Vertical code-line strips, like distant terminals scrolling.
   Pseudo-random hairline gradients, slowly sliding upward. */
.site-bg-code {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(0, 255, 136, 0.08) 50%, transparent 100%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 80px,
      rgba(0, 255, 136, 0.06) 80px,
      rgba(0, 255, 136, 0.06) 81px,
      transparent 81px,
      transparent 200px,
      rgba(255, 181, 107, 0.045) 200px,
      rgba(255, 181, 107, 0.045) 201px,
      transparent 201px,
      transparent 320px
    );
  background-size: 100% 100%, 320px 100%;
  animation: codeScroll 30s linear infinite;
  opacity: 0.7;
}

@keyframes codeScroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 -300px, 0 0; }
}

/* Floating dust particles for depth. */
.site-bg-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(108, 255, 190, 0.35), transparent 50%),
    radial-gradient(1.5px 1.5px at 65% 70%, rgba(255, 181, 107, 0.3), transparent 50%),
    radial-gradient(1.8px 1.8px at 80% 20%, rgba(0, 255, 136, 0.4), transparent 50%),
    radial-gradient(1.2px 1.2px at 35% 80%, rgba(255, 181, 107, 0.25), transparent 50%),
    radial-gradient(2.2px 2.2px at 50% 50%, rgba(108, 255, 190, 0.3), transparent 50%);
  background-size: 800px 800px;
  animation: particlesDrift 80s linear infinite;
  opacity: 0.6;
}

@keyframes particlesDrift {
  from { background-position: 0 0; }
  to   { background-position: 800px -800px; }
}

/* ========= HERO ========= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--navy-900);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: opacity 1.6s var(--easing), filter 1.6s var(--easing);
}
.hero.is-entered .hero-video {
  /* Camera arrived in the screen — soften the video so the UI emerges
     "from inside" without hard cut. Keeps the loop running underneath. */
  opacity: 0.32;
  filter: blur(2px) saturate(0.85);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5, 11, 26, 0.55) 100%);
  z-index: 1;
  pointer-events: none;
  transition: background 1.6s var(--easing);
}
.hero.is-entered .hero-overlay {
  background: linear-gradient(180deg, rgba(5, 11, 26, 0.55) 0%, rgba(5, 11, 26, 0.85) 100%);
}

/* Topbar */
.topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 1.4s var(--easing), transform 1.4s var(--easing);
}
.topbar.is-revealed { opacity: 1; transform: translateY(0); }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 24px var(--green-500), 0 0 6px var(--green-300);
}
.brand-name-light { color: var(--text-soft); font-weight: 400; }

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
}
.nav a { color: var(--text-soft); transition: color 0.2s; }
.nav a:hover { color: var(--text); }
.nav-cta {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--green-500);
  color: var(--navy-900) !important;
  font-weight: 600;
}
.nav-cta:hover { background: var(--green-400); color: var(--navy-900) !important; }

/* Hero content */
.hero-content {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 48px;
  max-width: 980px;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity 1.6s var(--easing) 0.3s,
              transform 1.6s var(--easing) 0.3s,
              filter 1.6s var(--easing) 0.3s;
}
.hero-content.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.hero-title {
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin-bottom: 24px;
  color: var(--text);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
}

.hero-sub {
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--text-soft);
  max-width: 620px;
  margin-bottom: 36px;
  line-height: 1.55;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.2s var(--easing);
  text-decoration: none;
}
.btn-primary {
  background: var(--green-500);
  color: var(--navy-900);
  box-shadow: 0 8px 28px rgba(0, 255, 136, 0.25);
}
.btn-primary:hover {
  background: var(--green-400);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0, 255, 136, 0.35);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Audio toggle */
.audio-toggle {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s;
  opacity: 0;
}
.audio-toggle.is-revealed { opacity: 1; }
.audio-toggle:hover { color: var(--green-400); border-color: var(--green-soft); }
.audio-toggle.is-playing { color: var(--green-500); border-color: var(--green-500); }

/* ========= SECTIONS ========= */
.section {
  padding: 120px 0;
  position: relative;
  /* Sections sit on the global animated bg — keep them transparent so the
     mesh + code lines + particles bleed through. */
  background: transparent;
}
.section + .section::before {
  /* Soft horizon between sections — a glowing hairline that picks up the
     palette accents from the video. */
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-soft) 30%, var(--amber-soft) 70%, transparent);
}

.eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--green-500);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
  padding: 4px 12px;
  border: 1px solid var(--green-soft);
  border-radius: 999px;
  background: rgba(0, 255, 136, 0.04);
  backdrop-filter: blur(8px);
}

.section-title {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 820px;
  margin-bottom: 56px;
}

.section-lead {
  font-size: 18px;
  color: var(--text-soft);
  max-width: 600px;
  margin-bottom: 32px;
}

/* Grids */
.grid-3, .grid-4 {
  display: grid;
  gap: 28px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ========= GLASS CARDS ========= */
.card,
.usecase,
.pricing {
  /* Glass-morphism — translucent over the animated mesh background. */
  background: linear-gradient(180deg, rgba(16, 30, 58, 0.55) 0%, rgba(10, 19, 38, 0.45) 100%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--easing);
}
.card::before,
.usecase::before,
.pricing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, var(--green-soft), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.card:hover,
.usecase:hover,
.pricing:hover {
  transform: translateY(-4px);
  border-color: var(--green-soft);
  box-shadow: 0 16px 60px rgba(0, 255, 136, 0.06);
}
.card:hover::before,
.usecase:hover::before,
.pricing:hover::before { opacity: 1; }
.card > *, .usecase > *, .pricing > * { position: relative; z-index: 1; }

.card { padding: 36px; }
.card-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--green-500);
  margin-bottom: 16px;
  font-weight: 500;
}
.card h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.card p {
  color: var(--text-soft);
  margin-bottom: 20px;
  font-size: 15px;
}
.card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card li {
  font-size: 14px;
  color: var(--text-soft);
  padding-left: 18px;
  position: relative;
}
.card li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-500);
  position: absolute;
  left: 0;
  top: 8px;
  box-shadow: 0 0 8px var(--green-500);
}

/* Use cases */
.usecase {
  padding: 28px;
  border-radius: var(--radius);
}
.usecase-icon {
  font-size: 32px;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 12px var(--green-soft));
}
.usecase h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}
.usecase p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.55;
}

/* Pipeline */
.pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.pipeline::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-soft) 20%, var(--amber-soft) 50%, var(--green-soft) 80%, transparent);
  z-index: 0;
}
.step {
  position: relative;
  padding: 0 20px;
  z-index: 1;
}
.step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(10, 19, 38, 0.7);
  backdrop-filter: blur(14px);
  border: 2px solid var(--green-500);
  color: var(--green-500);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  box-shadow: 0 0 24px var(--green-soft);
}
.step h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.step p {
  color: var(--text-soft);
  font-size: 14px;
  padding-right: 12px;
}

/* Pricing */
.pricing {
  padding: 36px 32px;
}
.pricing-highlight {
  border: 1px solid var(--green-500);
  background: linear-gradient(180deg, rgba(0, 255, 136, 0.06) 0%, rgba(10, 19, 38, 0.55) 100%);
  box-shadow: 0 12px 48px rgba(0, 255, 136, 0.10);
}
.pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green-500);
  color: var(--navy-900);
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  z-index: 2;
}
.pricing-name {
  font-family: 'JetBrains Mono', monospace;
  color: var(--green-500);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}
.pricing-price {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.pricing-meta {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pricing ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pricing li {
  font-size: 14px;
  color: var(--text-soft);
  padding-left: 22px;
  position: relative;
}
.pricing li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green-500);
  font-weight: 700;
}

/* CTA section + form */
.section-cta { text-align: center; }
.section-cta .section-title,
.section-cta .eyebrow { margin-left: auto; margin-right: auto; }
.section-cta .section-title { text-align: center; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 540px;
  margin: 0 auto 32px;
  text-align: left;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 18px;
  background: rgba(16, 30, 58, 0.55);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
  transition: border-color 0.2s, background 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--green-500);
  background: rgba(16, 30, 58, 0.75);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-dim); }
.contact-form .btn { align-self: center; margin-top: 8px; }

.contact-direct {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--text-soft);
}
.contact-direct a {
  color: var(--text);
  border-bottom: 1px dashed var(--green-soft);
  transition: color 0.2s, border-color 0.2s;
}
.contact-direct a:hover { color: var(--green-500); border-color: var(--green-500); }

/* Footer */
.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 32px 0;
  background: rgba(3, 7, 15, 0.6);
  backdrop-filter: blur(12px);
  position: relative;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--text-dim);
}
.footer-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

/* ========= RESPONSIVE ========= */
@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pipeline { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .pipeline::before { display: none; }
  .topbar { padding: 20px 24px; }
  .nav { gap: 18px; font-size: 13px; }
  .hero-content { padding: 0 24px; }
  .section { padding: 80px 0; }
  .container { padding: 0 24px; }
}

@media (max-width: 620px) {
  .grid-3, .grid-4, .pipeline { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .nav a:not(.nav-cta) { display: none; }
  .nav { gap: 12px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
}

/* Reduce motion respectfully. */
@media (prefers-reduced-motion: reduce) {
  .site-bg-mesh, .site-bg-code, .site-bg-particles { animation: none; }
  * { transition: none !important; }
}