/* 2026-09-13: approved local review — full-width first view and sticky header. */
html { scroll-padding-top: 0; }
.bitto-lp { --bitto-header-height: 78px; --bitto-journey-height: 63px; }
.bitto-lp > .header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  height: var(--bitto-header-height);
  margin: 0;
  padding: 14px max(24px, calc((100% - 1200px) / 2));
  border: 0;
  border-bottom: 1px solid #205064;
  border-radius: 0;
  background: #05192bf2;
  backdrop-filter: blur(16px);
}
.bitto-lp .skip { z-index: 200; }
.bitto-lp .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: calc(100vh - var(--bitto-header-height));
  min-height: calc(100svh - var(--bitto-header-height));
  margin: 0;
  padding: clamp(32px, 5vh, 70px) 20px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: radial-gradient(ellipse at 50% 14%, #12324b 0%, #04192c 52%, #021323 100%);
}
.bitto-lp .hero .hero-network {
  width: min(36%, 550px);
  max-width: none;
  background-position-y: 24.5%;
}
.bitto-lp .hero .hero-network-right { background-position-y: 24.5%; }
/* Keep the existing artwork and move only its decorative layers. */
.bitto-lp .hero .hero-network {
  mask-image: linear-gradient(to right, #000 10%, transparent 100%),
    linear-gradient(to bottom, transparent 22px, #000 75px, #000 70%, transparent 100%);
}
.bitto-lp .hero .hero-network-right {
  mask-image: linear-gradient(to left, #000 10%, transparent 100%),
    linear-gradient(to bottom, transparent 22px, #000 75px, #000 70%, transparent 100%);
}
.bitto-lp .hero[data-motion="on"] .hero-network {
  animation: bitto-network-drift 12s ease-in-out infinite both;
  transform-origin: 15% 35%;
  will-change: transform, opacity;
}
.bitto-lp .hero[data-motion="on"] .hero-network-right {
  animation: bitto-network-drift-right 15s ease-in-out infinite both;
  transform-origin: 85% 35%;
}
.bitto-lp .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 14% 35%, #12b7d212, transparent 38%),
              radial-gradient(ellipse at 87% 48%, #00ddc914, transparent 40%);
  opacity: .35;
}
.bitto-lp .hero[data-motion="on"]::before {
  animation: bitto-network-glow 9s ease-in-out infinite alternate;
}
.bitto-lp .hero.motion-offscreen .hero-network,
.bitto-lp .hero.motion-offscreen::before { animation-play-state: paused; }
.bitto-lp .hero[data-motion="off"] .hero-network,
.bitto-lp .hero[data-motion="off"]::before { animation: none; will-change: auto; }
@keyframes bitto-network-drift {
  0%, 100% { transform: translate3d(-6px, -8px, 0) scale(1.015); opacity: .63; }
  50% { transform: translate3d(12px, 10px, 0) scale(1.04); opacity: .9; }
}
@keyframes bitto-network-drift-right {
  0%, 100% { transform: translate3d(8px, 8px, 0) scale(1.03); opacity: .86; }
  50% { transform: translate3d(-12px, -10px, 0) scale(1.005); opacity: .56; }
}
@keyframes bitto-network-glow {
  from { opacity: .2; }
  to { opacity: .9; }
}
.bitto-lp .hero > :not(.hero-network) { flex-shrink: 0; }
.bitto-lp .hero h1 { max-width: 1060px; }
.bitto-lp .hero .hero-copy { margin-bottom: 0; }
.bitto-lp .hero .hero-note { margin-bottom: 0; }
.bitto-lp .hero .hero-scroll { margin-bottom: 0; }
.bitto-lp .journey-nav {
  top: var(--bitto-header-height);
  z-index: 90;
  margin-top: 0;
}
.bitto-lp .journey-nav a { min-height: var(--bitto-journey-height); }
.bitto-lp .journey-section,
.bitto-lp .faq-section,
.bitto-lp .capabilities,
.bitto-lp .service-flow {
  scroll-margin-top: calc(var(--bitto-header-height) + var(--bitto-journey-height) + 16px);
}
.bitto-lp #main { scroll-margin-top: var(--bitto-header-height); }
@media (max-width: 700px) {
  .bitto-lp { --bitto-header-height: 68px; --bitto-journey-height: 50px; }
  .bitto-lp > .header { padding: 10px 16px; gap: 12px; }
  .bitto-lp .hero {
    padding: 30px 12px;
    min-height: calc(100svh - var(--bitto-header-height));
  }
  .bitto-lp .hero .hero-network { width: 43%; }
  .bitto-lp .hero .hero-start { width: min(430px, calc(100% - 24px)); }
  .bitto-lp .journey-nav a { padding: 12px 6px; font-size: 13px; gap: 7px; }
  .bitto-lp .journey-nav a span { font-size: 11px; }
  .bitto-lp .hero[data-motion="on"] .hero-network { animation-name: bitto-network-drift-mobile; }
  .bitto-lp .hero[data-motion="on"] .hero-network-right { animation-direction: reverse; }
}
@keyframes bitto-network-drift-mobile {
  0%, 100% { transform: translate3d(0, -5px, 0) scale(1.01); opacity: .38; }
  50% { transform: translate3d(5px, 7px, 0) scale(1.035); opacity: .58; }
}
@media (prefers-reduced-motion: reduce) {
  .bitto-lp .hero .hero-network,
  .bitto-lp .hero::before { animation: none !important; transform: none !important; will-change: auto !important; }
}