/* Homepage hero centre treatment.
   Preserve the approved motion and interaction while giving the block system
   restrained physical depth. No glow, neon or broad lighting effects. */

/* Floating navigation ----------------------------------------------------
   Borrow the architectural idea of a self-contained nav surface without
   copying the reference styling. The outer header disappears into the page;
   Brawnd's logo, links and CTA sit inside one restrained charcoal bar. */
.site-header {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-header .nav {
  width: min(82vw, 1140px) !important;
  height: 62px !important;
  margin-top: 12px;
  padding: 0 16px;
  border: 1px solid rgba(231, 224, 226, .06);
  border-radius: 12px;
  background: rgba(44,32,35, .95);
  box-shadow:
    0 9px 24px rgba(0, 0, 0, .09),
    inset 0 1px 0 rgba(255, 255, 255, .015);
  backdrop-filter: blur(20px) saturate(118%);
  -webkit-backdrop-filter: blur(20px) saturate(118%);
  transition:
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

.site-header .brand-logo {
  transform: scale(.82);
  transform-origin: left center;
}

.site-header .nav-links {
  gap: 28px;
}

.site-header.scrolled .nav {
  background: rgba(44,32,35, .98);
  border-color: rgba(231, 224, 226, .085);
  box-shadow:
    0 11px 28px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .02);
}

/* Keep the CTA integrated with the floating bar rather than reading as a
   separate oversized object. */
.site-header .nav-cta {
  padding: 10px 16px !important;
  border-radius: 8px !important;
}

/* Keep the hand-drawn emphasis restrained, but give the phrase enough room so
   the ring still frames the full wording rather than clipping it optically. */
.b2-hero .hero-edge-accent::after {
  transform: rotate(-.6deg) scaleX(.97) scaleY(.92) !important;
  transform-origin: left center !important;
  opacity: .9;
}

/* Ground the object with a shallow floor shadow/reflection. This is deliberately
   tight and low-contrast so it adds weight without reading as a glow source. */
.b2-hero .hero-visual > .brawnd-block-stage {
  isolation: isolate;
  filter: drop-shadow(0 28px 56px rgba(0,0,0,.38)) !important;
}

.b2-hero .hero-visual > .brawnd-block-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 75%;
  width: 56%;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      rgba(169, 167, 161, .07) 0%,
      rgba(169, 167, 161, .055) 28%,
      rgba(0,0,0,.30) 56%,
      transparent 78%);
  filter: blur(9px);
  opacity: .68;
  transform: translate(-50%, -50%) scaleX(1.12);
  pointer-events: none;
}

.b2-hero .hero-visual > .brawnd-block-stage .brawnd-block-frame {
  position: relative;
  z-index: 2;
}

/* Make the abstract website feel like a machined object rather than flat UI.
   The existing translateZ choreography remains untouched; these rules only add
   a shallow side wall, matte face shading and restrained bevel definition. */
.b2-hero .brawnd-piece {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background: linear-gradient(154deg, #352528 0%, #352528 22%, #2C2023 58%, #2C2023 100%) !important;
  border-color: rgba(169, 167, 161, .11) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 1px 0 0 rgba(255,255,255,.025),
    inset 0 -10px 18px rgba(41, 40, 37, .16),
    0 12px 24px rgba(0,0,0,.18) !important;
}

.b2-hero .brawnd-piece::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: #2C2023;
  border: 1px solid rgba(0,0,0,.24);
  transform: translate3d(3px, 5px, -2px);
  opacity: .92;
  pointer-events: none;
}

.b2-hero .brawnd-piece::after {
  background: linear-gradient(120deg, rgba(255,255,255,.075), transparent 24%, transparent 73%, rgba(0,0,0,.08)) !important;
  opacity: .72;
}

/* Smaller interface pieces keep the same material family but with shallower
   thickness so they still read as details on the larger object. */
.b2-hero .brawnd-piece.p5,
.b2-hero .brawnd-piece.p6,
.b2-hero .brawnd-piece.p7 {
  background: linear-gradient(150deg, #443035 0%, #352528 46%, #2C2023 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -5px 10px rgba(41, 40, 37, .14),
    0 7px 14px rgba(0,0,0,.16) !important;
}

.b2-hero .brawnd-piece.p5::before,
.b2-hero .brawnd-piece.p6::before,
.b2-hero .brawnd-piece.p7::before {
  transform: translate3d(2px, 3px, -2px);
}

/* Keep the refined phase dimensional without a broad glow. */
.b2-hero .brawnd-block-stage.is-refine .p7 {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -5px 10px rgba(41, 40, 37, .14),
    0 9px 18px rgba(0,0,0,.20) !important;
}

/* Interaction outcome chip ------------------------------------------------ */
.b2-hero-outcome-chip {
  --chip-origin-x: 0px;
  --chip-origin-y: 0px;
  --chip-x: 0px;
  --chip-y: 0px;
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 13px 7px 11px;
  border: 1px solid rgba(169, 167, 161, .26);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(90, 73, 63, .96), rgba(41, 40, 37, .97));
  box-shadow: 0 13px 32px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.05);
  color: #ece6e8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .015em;
  white-space: nowrap;
  opacity: 0;
  filter: blur(.7px);
  transform: translate(-50%, -50%) translate(var(--chip-origin-x), calc(var(--chip-origin-y) + 10px)) scale(.97);
  transform-origin: center;
  transition:
    opacity .82s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1),
    filter .78s ease;
  pointer-events: none;
  will-change: opacity, transform, filter;
}

.b2-hero-outcome-chip::before {
  content: "";
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  margin-right: 8px;
  border-radius: 50%;
  background: #F1EEE7;
}

.b2-hero-outcome-chip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  width: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169, 167, 161, .42));
  transform: translateY(-50%);
  opacity: .48;
}

.b2-hero-outcome-chip[data-side="left"]::after {
  left: auto;
  right: -15px;
  background: linear-gradient(90deg, rgba(169, 167, 161, .42), transparent);
}

.b2-hero-outcome-chip.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) translate(var(--chip-x), var(--chip-y)) scale(1);
}

.b2-hero-outcome-chip.is-leaving {
  opacity: 0;
  filter: blur(.6px);
  transform: translate(-50%, -50%) translate(var(--chip-x), calc(var(--chip-y) - 6px)) scale(.99);
  transition:
    opacity .9s ease-out,
    transform .95s ease-out,
    filter .85s ease-out;
}

@media (max-width: 760px) {
  .site-header .nav {
    width: calc(100% - 24px) !important;
    height: 58px !important;
    margin-top: 9px;
    padding: 0 12px;
    border-radius: 11px;
    border-color: rgba(231, 224, 226, .065);
    background: rgba(11, 9, 10, .62);
    box-shadow:
      0 8px 22px rgba(0,0,0,.11),
      inset 0 1px 0 rgba(255,255,255,.015);
  }

  .site-header .brand-logo {
    transform: scale(.78);
  }

  .site-header .mobile-nav {
    inset: 76px 12px auto !important;
    width: auto !important;
    border: 1px solid rgba(231, 224, 226, .08) !important;
    border-radius: 11px;
    background: rgba(11, 9, 10, .94) !important;
    box-shadow: 0 13px 32px rgba(0,0,0,.22);
    overflow: hidden;
  }

  .b2-hero .hero-visual > .brawnd-block-stage::before {
    top: 74%;
    width: 52%;
    height: 20px;
    filter: blur(8px);
    opacity: .58;
  }

  .b2-hero .brawnd-piece::before {
    transform: translate3d(2px, 4px, -2px);
  }

  .b2-hero-outcome-chip {
    min-height: 28px;
    padding: 6px 11px 6px 9px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .b2-hero-outcome-chip {
    transition: none !important;
  }
}