/* === NAVBAR === */
.custom-navbar {
  background-color: rgba(250, 251, 252, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--skybee-border);
  padding-top: 16px;
  padding-bottom: 16px;
  /* Shrink is a class flip on a compositor-only property. The old version
     wrote inline `padding` on every scroll frame, forcing a reflow each time. */
  transition: box-shadow var(--dur-base) var(--ease-out-quart),
              background-color var(--dur-base) linear;
}
.custom-navbar > .container {
  transition: transform 450ms var(--ease-spatial);
  transform-origin: top center;
}
.custom-navbar.is-scrolled {
  box-shadow: var(--shadow-1);
  background-color: rgba(250, 251, 252, 0.96);
}
.custom-navbar.is-scrolled > .container {
  transform: scaleY(.9) translateZ(0);
}
/* The logo is a transparent PNG now, so the old multiply hack that knocked
   out a white JPG background is no longer needed. */
.navbar-logo {
  height: auto;
}
.navbar-nav .nav-link {
  color: var(--skybee-slate) !important;
  font-weight: 500;
  margin: 0 6px;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--dur-fast) linear;
}
.navbar-nav .nav-link:hover {
  color: var(--skybee-navy) !important;
}
.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
}

/* === SECTION 1: HERO === */
.hero-section {
  min-height: 100vh;
  min-height: 100dvh; /* iOS address bar must not push the CTA out of view */
  padding-top: calc(var(--nav-h) + 24px);
  padding-bottom: var(--space-lg);
  background: linear-gradient(135deg, var(--skybee-warm-white) 0%, var(--skybee-ice) 100%);
  position: relative;
  overflow: hidden;
}
.hero-text-col {
  padding-right: 40px; /* Asymmetric spacing */
}
.hero-visual-col {
  transform: translateX(40px); /* Slight shift */
  perspective: 1400px;         /* owns the 3D frame; the mockup only rotates */
}

/* Mock data grid: headers wrapped onto a second line, which gave every header
   cell a different height and knocked the sort chevrons out of alignment. */
.hero-portal-mockup thead th {
  white-space: nowrap;
  vertical-align: middle;
  /* Fixed box: the differently-sized sort and visibility icons were dragging
     each header cell to its own height (46-49px). */
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}
.hero-portal-mockup thead th svg {
  vertical-align: middle;
  opacity: .55;
}
/* The sticky header sat straight on top of the first row with no separation. */
.hero-portal-mockup thead {
  box-shadow: inset 0 -1px 0 var(--skybee-border);
}
.hero-portal-mockup tbody tr:first-child td {
  padding-top: 14px;
}
.hero-portal-mockup {
  border-radius: var(--r-box);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  /* No transform-style: preserve-3d here. It has no 3D children to hold and
     it stops `overflow: hidden` from clipping, which let the mock toolbar
     spill outside the card. The parent's `perspective` is what tilts it. */
  /* Resting rotation is set by GSAP so the entrance tween lands on it
     instead of decomposing a shorthand `perspective()` transform away. */
  transform: rotateY(-5deg) rotateX(2deg);
  background: #fff;
}

/* === SECTION 3: PROBLEM === */
.metrics-stack {
  border-left: 2px solid var(--skybee-border);
  padding-left: 40px;
}
.metric-label {
  color: var(--skybee-slate);
  font-size: var(--fs-base);
  margin-top: 8px;
}

/* Cost curve: the one animation on the page that carries the argument
   rather than decorating it. Draws as the reader scrolls the claim. */
.cost-curve {
  width: 100%;
  height: auto;
  overflow: visible;
  margin-bottom: var(--space-md);
  color: var(--skybee-navy);
}

/* === SECTION 4: SOLUTION === */
.solution-blades-container {
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  gap: 0;
  padding: 40px 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.solution-blade {
  /* Share the container instead of forcing it to scroll: three fixed 360px
     blades plus their content exceeded the 1320px container at desktop. */
  flex: 1 1 0;
  min-width: 320px;
  background: #fff;
  border: 1px solid var(--skybee-border);
  border-radius: 0;
  margin-left: -1px;
  box-shadow: var(--shadow-1);
  scroll-snap-align: start;
}
.solution-blade:first-child {
  border-radius: var(--r-box) 0 0 var(--r-box);
  margin-left: 0;
}
.solution-blade:last-child {
  border-radius: 0 var(--r-box) var(--r-box) 0;
}
.blade-header {
  height: 40px;
  background: var(--skybee-surface);
  border-bottom: 1px solid var(--skybee-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--skybee-graphite);
}
.blade-content {
  padding: 24px;
}
.blade-number {
  font-size: 40px;
  font-weight: 600;
  color: var(--skybee-ice);
  line-height: 1;
  margin-bottom: 16px;
}
.mini-mockup {
  border-radius: var(--r-box);
}

/* === SECTION 5: FEATURES ===
   Six equal cards in a 3-up grid is the template answer. Alternating a
   wide cell against a narrow one gives the grid rhythm and still resolves
   to exactly six cells with no empty tile. */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.features-grid > .feature-service-card:nth-child(1),
.features-grid > .feature-service-card:nth-child(4),
.features-grid > .feature-service-card:nth-child(5) {
  grid-column: span 2;
}
.feature-service-card {
  background: #fff;
  border: 1px solid var(--skybee-border);
  border-radius: var(--r-box);
  padding: 32px;
  transition: transform var(--dur-base) var(--ease-out-quart),
              box-shadow var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-fast) linear;
}
.feature-service-card:hover {
  border-color: var(--skybee-azure);
  box-shadow: var(--shadow-2);
  transform: translate3d(0, -4px, 0);
}
.feature-service-card .card-icon {
  width: 48px;
  height: 48px;
  background: var(--skybee-ice);
  color: var(--skybee-royal);
  border-radius: var(--r-box);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.feature-service-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--skybee-navy);
  margin-bottom: 12px;
}
.feature-service-card .card-problem {
  font-size: 14px;
  color: var(--skybee-slate);
  font-style: italic;
  margin-bottom: 12px;
  padding-left: 16px;
  border-left: 2px solid var(--skybee-azure);
}
.feature-service-card .card-solution {
  font-size: var(--fs-base);
  color: var(--skybee-graphite);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Azure Portal Demo Styles.
   The instant tab switch is a deliberate portal impersonation, not an
   oversight - Azure's own blade tabs do not animate. Leave it. */
.az-tabs .nav-link {
  color: var(--skybee-graphite) !important;
  background: transparent !important;
  border-left: 3px solid transparent !important;
  transition: none !important;
}
.az-tabs .nav-link:hover {
  background-color: var(--skybee-surface) !important;
}
.az-tabs .nav-link.active {
  background-color: #fff !important;
  border-left: 3px solid var(--skybee-royal) !important;
  font-weight: 600 !important;
  color: var(--skybee-royal) !important;
}
.demo-portal-blade {
  border-radius: var(--r-box);
  box-shadow: var(--shadow-2);
}

/* === SECTION 6: TESTIMONIALS === */
.testimonial-card {
  border-radius: var(--r-box);
  border: 1px solid var(--skybee-border);
  box-shadow: var(--shadow-1);
}
.rating-stars {
  color: var(--skybee-amber-mark); /* 3.6:1 on white, passes non-text AA */
}

/* === SECTION 7: CLOSING CTA + FOOTER === */
.cta-band {
  background-color: var(--skybee-navy);
  padding: var(--space-xl) 0;
}
.cta-sub {
  color: var(--skybee-sky);
  font-size: 18px;
  max-width: 46ch;
}

.footer-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px);
  background-size: 40px 40px;
  opacity: 0.1;
  pointer-events: none;
}
/* The mark is dark artwork (mean luminance 79/255) and would all but vanish
   on the navy footer, so it is knocked out to solid white here. */
.footer-logo {
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
/* Override Bootstrap's dark text-muted for the footer so it's readable */
footer .text-muted {
  color: #94A3B8 !important;
}
.footer-link {
  transition: color var(--dur-fast) linear;
}
.footer-link:hover {
  color: var(--skybee-white) !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .skybee-display-2 { font-size: 2.5rem; }
  .hero-text-col { padding-right: 15px; }
  .hero-visual-col { transform: none; perspective: none; }
  .hero-portal-mockup { transform: none; }
  .hero-h1, .section-h2 { max-width: none; }

  .metrics-stack {
    border-left: none;
    padding-left: 0;
    margin-top: 2rem;
  }

  /* Blades stack instead of clipping. The old rule kept them in a
     1080px-wide flex row inside a 960px container with overflow hidden,
     which made the third blade unreachable. */
  .solution-blades-container {
    flex-direction: column;
    overflow-x: visible;
  }
  .solution-blade {
    min-width: 0;
    width: 100%;
    margin-left: 0;
    border-radius: var(--r-box);
    margin-bottom: 16px;
  }
  .solution-blade:first-child,
  .solution-blade:last-child {
    border-radius: var(--r-box);
  }

  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid > .feature-service-card:nth-child(1),
  .features-grid > .feature-service-card:nth-child(4),
  .features-grid > .feature-service-card:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 576px) {
  .features-grid { grid-template-columns: 1fr; }
  .feature-service-card { padding: 24px; }
}