/* TOBI homepage hero repair — 2026-08-20
   Purpose: integrate the verified E6 reference image into a premium dark hero without a white card. */

body.tobi-home-redesigned.tobi-official-visuals #hero {
  isolation: isolate;
  min-height: clamp(620px, 100vh, 800px) !important;
  background:
    linear-gradient(90deg, rgba(3, 13, 27, .99) 0%, rgba(3, 13, 27, .98) 32%, rgba(3, 13, 27, .64) 40%, rgba(3, 13, 27, .22) 52%, rgba(3, 13, 27, .06) 100%),
    linear-gradient(180deg, rgba(2, 11, 23, .14), rgba(2, 11, 23, .54)),
    url('/assets/official/tobi-hero-composite-v5-20260820.webp') center center / cover no-repeat !important;
}

body.tobi-home-redesigned.tobi-official-visuals #hero .hero-grid-bg {
  opacity: .16 !important;
}

body.tobi-home-redesigned.tobi-official-visuals #hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 75% 36%, rgba(61, 196, 228, .18), transparent 26%),
    radial-gradient(circle at 88% 78%, rgba(255, 98, 52, .10), transparent 25%);
}

/* Product image is a verified white-background reference: multiply removes the white field at composite time,
   leaving the original device geometry, materials and proportions unchanged. */
body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-hero-device {
  z-index: 2;
  top: clamp(112px, 11vw, 146px);
  right: clamp(-76px, -3vw, -30px);
  width: min(48vw, 680px);
  height: min(34vw, 474px);
  min-height: 0;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-hero-device::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 72%;
  height: 28%;
  left: 13%;
  bottom: 1%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .56);
  filter: blur(24px);
}

body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-hero-device::after {
  content: 'TOBI E6 · MULTIMODAL EGO CAPTURE';
  position: absolute;
  z-index: 3;
  right: 3%;
  bottom: -14px;
  left: auto;
  color: rgba(218, 241, 250, .72);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  pointer-events: none;
}

body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-hero-device .tobi-official-stage__eyebrow,
body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-hero-device .tobi-official-stage__caption,
body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-mobile-device .tobi-official-stage__eyebrow,
body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-mobile-device .tobi-official-stage__caption {
  display: none !important;
}

body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-hero-device .tobi-official-stage__image {
  display: block;
  width: 100% !important;
  max-width: none;
  max-height: none;
  height: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 30px 28px rgba(0, 0, 0, .44)) !important;
  transform: none !important;
}

body.tobi-home-redesigned.tobi-official-visuals #hero .max-w-3xl,
body.tobi-home-redesigned.tobi-official-visuals #hero [data-dom-id="hero-pillars"] {
  position: relative;
  z-index: 3;
}

@media (max-width: 1100px) {
  body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-hero-device {
    right: -120px;
    top: 144px;
    width: min(60vw, 650px);
    height: min(39vw, 430px);
    opacity: .74;
  }

  body.tobi-home-redesigned.tobi-official-visuals #hero .max-w-3xl {
    max-width: 40rem;
  }
}

@media (max-width: 760px) {
  body.tobi-home-redesigned.tobi-official-visuals #hero {
    min-height: auto !important;
    padding-bottom: 56px !important;
    background-position: 63% center !important;
  }

  body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-hero-device {
    display: none !important;
  }

  body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-mobile-device {
    display: grid !important;
    min-height: 190px;
    margin: 22px 0 28px;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-mobile-device::after {
    display: none !important;
  }

  body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-mobile-device .tobi-official-stage__image {
    width: min(100%, 500px) !important;
    max-height: none;
    height: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .42)) !important;
    transform: none !important;
  }
}

/* The official stage component creates an isolated stacking context; disable it only in the hero
   so the white reference field can multiply against the generated ambient background. */
body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-hero-device,
body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-mobile-device {
  isolation: auto !important;
}

body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-hero-device::before,
body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-mobile-device::before {
  display: none !important;
}

/* The generated hero already contains the complete, unframed product visual; hide legacy reference-image layers. */
body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-hero-device,
body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-mobile-device {
  display: none !important;
}

/* Explicit foreground visual: avoids CSS-background decode/crop ambiguity and makes the hero image responsive. */
body.tobi-home-redesigned.tobi-official-visuals #hero {
  background: #020b17 !important;
}

body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-hero-composite {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

body.tobi-home-redesigned.tobi-official-visuals #hero::before,
body.tobi-home-redesigned.tobi-official-visuals #hero .hero-grid-bg {
  z-index: 1;
}

@media (max-width: 760px) {
  body.tobi-home-redesigned.tobi-official-visuals #hero .tobi-home-hero-composite {
    object-position: 68% center;
  }
}

/* The original inline hero overlays sit above the explicit visual and unnecessarily dim the device. */
body.tobi-home-redesigned.tobi-official-visuals #hero > div[style*="linear-gradient(to right"],
body.tobi-home-redesigned.tobi-official-visuals #hero > div[style*="linear-gradient(to top"] {
  display: none !important;
}