/* A more balanced first viewport: a compact message beside a prominent brand ecosystem. */
.brand-stack {
  width: 330px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
}

.brand {
  position: relative;
  width: 100%;
  height: 53px;
  padding: 2px 10px 2px 6px;
  border-color: rgba(7, 92, 240, 0.22);
  background: linear-gradient(135deg, #fff 55%, #eef8ff 82%, #ebfff9);
  box-shadow: 0 10px 28px rgba(7, 27, 83, 0.11), 0 0 0 3px rgba(8, 189, 233, 0.04);
}

.brand::after {
  content: "";
  position: absolute;
  inset: auto 15px -1px 15px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--teal));
  opacity: 0.8;
}

.brand img {
  max-height: 48px;
  filter: drop-shadow(0 5px 8px rgba(7, 27, 83, 0.11));
}

.brand-capabilities {
  display: block;
  padding-inline: 7px;
  color: var(--blue);
  font: 800 0.61rem/1.1 'Manrope', sans-serif;
  letter-spacing: 0.115em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-shell {
  height: 74px;
}

.nav-shell > .button-small {
  padding: 10px 16px;
  border-radius: 10px;
}

.hero {
  padding-top: 74px;
}

.hero-grid {
  min-height: 620px;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(30px, 4vw, 68px);
}

.hero-grid.container {
  width: min(1360px, calc(100% - 72px));
}

.hero-copy {
  padding-block: 44px 36px;
}

.hero h1 {
  max-width: 640px;
  font-size: clamp(3rem, 4.2vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -0.06em;
  text-align: left;
}

.hero h1 > span {
  display: block;
  white-space: nowrap;
}

.hero h1::selection,
.hero h1 *::selection {
  color: var(--navy);
  background: rgba(8, 189, 233, 0.2);
}

.hero-copy > p {
  max-width: 610px;
  margin: 22px 0 28px;
  font-size: 1.08rem;
  line-height: 1.65;
}

.hero .eyebrow {
  width: max-content;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 8px 14px 8px 10px;
  border: 1px solid rgba(7, 92, 240, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 24px rgba(7, 27, 83, 0.07);
}

.trust-line {
  margin-top: 34px;
}

.ecosystem {
  width: min(620px, 100%);
  max-width: 620px;
  filter: drop-shadow(0 34px 50px rgba(7, 92, 240, 0.12));
}

.ecosystem::before {
  inset: 7%;
  background: radial-gradient(circle at 35% 30%, #fff 5%, rgba(8, 189, 233, 0.2) 34%, rgba(7, 92, 240, 0.09) 57%, transparent 72%);
}

.orb-main {
  width: 194px;
  height: 194px;
  border-color: rgba(7, 92, 240, 0.24);
  box-shadow: 0 0 0 24px rgba(7, 92, 240, 0.08), 0 28px 60px rgba(7, 27, 83, 0.24), 0 0 46px rgba(8, 189, 233, 0.18);
}

.orb-main img {
  width: 92%;
  max-height: 78%;
  filter: drop-shadow(0 9px 14px rgba(1, 18, 65, 0.2));
}

.node {
  width: 86px;
  height: 86px;
  border: 1px solid rgba(7, 92, 240, 0.08);
  box-shadow: 0 18px 40px rgba(7, 27, 83, 0.16);
}

.signal-band div {
  padding-block: 17px;
}

@media (max-width: 1400px) {
  .brand-stack { width: 295px; }
  .main-nav { gap: 18px; }
}

@media (max-width: 1180px) {
  .brand-stack { width: 278px; }
  .main-nav { gap: 20px; }
  .hero-grid { grid-template-columns: 0.95fr 1.05fr; }
  .hero-grid.container { width: min(1180px, calc(100% - 48px)); }
  .ecosystem { width: min(570px, 100%); }
}

@media (max-width: 980px) {
  .main-nav.open { top: 74px; }
  .hero-grid {
    grid-template-columns: 1fr;
    padding: 58px 0 42px;
  }
  .hero-copy { padding-block: 0; }
  .hero h1 { max-width: 760px; }
  .ecosystem { width: min(580px, 100%); }
}

@media (max-width: 650px) {
  .nav-shell { height: 66px; }
  .brand-stack { width: 230px; gap: 1px; }
  .brand { height: 48px; padding: 2px 7px 2px 5px; }
  .brand img { max-height: 43px; }
  .brand-capabilities { font-size: 0.5rem; letter-spacing: 0.08em; padding-inline: 2px; }
  .hero { padding-top: 66px; }
  .main-nav.open { top: 66px; }
  .hero-grid { padding: 48px 0 34px; }
  .hero-grid.container { width: min(100% - 30px, 1180px); }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(2.55rem, 12.5vw, 3.2rem);
    line-height: 1.04;
  }
  .hero-copy > p { font-size: 1rem; }
  .hero .eyebrow { width: auto; border-radius: 16px; }
  .ecosystem { width: 100%; }
  .orb-main { width: 154px; height: 154px; }
  .node { width: 72px; height: 72px; }
  .trust-line { margin-top: 28px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .brand, .ecosystem, .orb-main { transition: none; }
}