/* CrossTeams homepage — light-first aurora + dark enterprise surfaces.
   Scoped to #top so product/app routes remain untouched.

   Direction:
   - Flowlink: brighter, more expressive hero and transitions.
   - Orizon: deep product surfaces for enterprise contrast.
   - CrossTeams: cyan / indigo / violet remain the core brand colors.
*/

#top {
  background: #f8f9fc;
}

/* Header keeps the light navigation treatment but absorbs a little of the
   hero color so it does not feel disconnected from the first fold. */
#top > header {
  border-color: rgba(92, 76, 160, 0.08) !important;
  background: rgba(249, 248, 255, 0.8) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

/* Hero — the main requested color change.
   Warm peach on the left balances the CrossTeams violet/blue spectrum and
   keeps the page from looking like another generic blue SaaS homepage. */
#top main > section:first-child {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(54% 64% at -3% 18%, rgba(255, 154, 104, 0.28) 0%, rgba(255, 177, 142, 0.12) 42%, transparent 72%),
    radial-gradient(52% 70% at 101% 6%, rgba(70, 116, 255, 0.28) 0%, rgba(79, 95, 235, 0.14) 40%, transparent 72%),
    radial-gradient(50% 56% at 50% 13%, rgba(150, 88, 255, 0.25) 0%, rgba(150, 88, 255, 0.10) 43%, transparent 74%),
    linear-gradient(180deg, #fff9f6 0%, #f8f3ff 38%, #f4f7ff 72%, #f8f9fc 100%) !important;
}

#top main > section:first-child::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -10%;
  right: -10%;
  top: 285px;
  height: 260px;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 9%, rgba(255, 154, 104, 0.11) 27%, rgba(151, 94, 255, 0.14) 48%, rgba(56, 124, 255, 0.12) 70%, transparent 91%);
  transform: rotate(-5deg);
  filter: blur(34px);
}

/* Keep the decorative hero layers out of normal document flow. The previous
   blanket `> * { position: relative }` rule overrode Tailwind's `absolute`
   utility on these large gradient layers and stacked ~1368px of empty height
   before the actual hero content. */
#top main > section:first-child > .pointer-events-none.absolute {
  position: absolute !important;
  z-index: 0;
}

#top main > section:first-child > div.relative {
  position: relative;
  z-index: 1;
}

/* Give large gradient headline glyphs enough vertical paint area for
   descenders such as the `j` in "juntos". The original .97 line-height is
   visually tight enough to clip the last-line descender in Chromium. */
#top main > section:first-child h1 {
  line-height: 1.02 !important;
  overflow: visible;
}

#top main > section:first-child h1 > span {
  padding-bottom: 0.08em;
  overflow: visible;
}

/* Light content sections now alternate subtly instead of sitting on one flat
   white/gray canvas. */
#top #produto {
  background:
    radial-gradient(48% 85% at 90% 10%, rgba(75, 112, 255, 0.09), transparent 72%),
    radial-gradient(44% 75% at 5% 95%, rgba(147, 85, 255, 0.08), transparent 70%),
    linear-gradient(180deg, #f8f9fc 0%, #f3f5ff 100%);
}

#top #como-funciona + section {
  background:
    radial-gradient(44% 74% at 4% 18%, rgba(255, 167, 122, 0.08), transparent 72%),
    radial-gradient(42% 70% at 96% 82%, rgba(88, 92, 255, 0.09), transparent 70%),
    #f8f9fc;
}

#top #agentes {
  background:
    radial-gradient(48% 76% at 98% 20%, rgba(54, 135, 255, 0.09), transparent 72%),
    radial-gradient(42% 72% at 5% 82%, rgba(149, 82, 255, 0.08), transparent 72%),
    linear-gradient(180deg, #f8f9fc 0%, #f5f4ff 100%);
}

#top #agentes + section {
  background:
    linear-gradient(180deg, #f5f4ff 0%, #f8f9fc 46%, #f8f9fc 100%);
}

#top #contato {
  background:
    radial-gradient(46% 100% at 0% 50%, rgba(255, 156, 107, 0.08), transparent 76%),
    radial-gradient(44% 100% at 100% 38%, rgba(60, 126, 255, 0.09), transparent 74%),
    #f8f9fc;
}

#top #contato > div {
  background:
    radial-gradient(54% 130% at 0% 0%, rgba(255, 170, 125, 0.10), transparent 64%),
    radial-gradient(52% 120% at 100% 0%, rgba(76, 120, 255, 0.12), transparent 66%),
    radial-gradient(44% 105% at 50% 0%, rgba(145, 84, 255, 0.10), transparent 68%),
    rgba(255, 255, 255, 0.94) !important;
}

#top footer {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(18px);
}

/* Dark product / intelligence surfaces — Orizon-inspired depth, but shifted
   toward the CrossTeams purple spectrum instead of neutral black. */
#top [class~="bg-[#080912]"],
#top [class~="bg-[#090a14]"],
#top #verticais > div {
  position: relative;
  isolation: isolate;
}

#top [class~="bg-[#080912]"] {
  background-color: #08070f !important;
  background-image:
    radial-gradient(105% 145% at -8% 8%, rgba(126, 63, 226, 0.62) 0%, rgba(93, 43, 177, 0.34) 28%, rgba(32, 18, 58, 0.08) 52%, transparent 68%),
    radial-gradient(82% 118% at 102% 2%, rgba(62, 96, 230, 0.40) 0%, rgba(56, 35, 130, 0.2) 34%, transparent 62%),
    radial-gradient(100% 100% at 42% 118%, rgba(96, 45, 188, 0.52) 0%, rgba(48, 25, 96, 0.18) 42%, transparent 68%),
    linear-gradient(118deg, #08080e 0%, #0b0812 34%, #160d25 55%, #09090f 76%, #07070c 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

#top [class~="bg-[#090a14]"] {
  background-color: #090710 !important;
  background-image:
    radial-gradient(95% 120% at 0% 12%, rgba(125, 62, 222, 0.62) 0%, rgba(78, 38, 150, 0.3) 34%, transparent 64%),
    radial-gradient(75% 100% at 100% 4%, rgba(66, 107, 231, 0.34) 0%, transparent 62%),
    radial-gradient(85% 90% at 48% 112%, rgba(79, 38, 160, 0.42) 0%, transparent 68%),
    linear-gradient(128deg, #08080e 0%, #110a1b 46%, #0a0910 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

#top #verticais > div {
  background-color: #0a0810 !important;
  background-image:
    radial-gradient(105% 145% at -10% 5%, rgba(132, 67, 232, 0.72) 0%, rgba(92, 46, 175, 0.38) 31%, rgba(39, 22, 74, 0.1) 52%, transparent 68%),
    radial-gradient(82% 120% at 102% 0%, rgba(63, 99, 224, 0.44) 0%, rgba(51, 34, 120, 0.18) 40%, transparent 65%),
    radial-gradient(90% 90% at 44% 115%, rgba(105, 48, 198, 0.5) 0%, rgba(46, 25, 92, 0.15) 45%, transparent 70%),
    linear-gradient(120deg, #0a0a0f 0%, #0d0915 34%, #1a0f2a 55%, #0b0a11 78%, #08080d 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Luminous ribbon for depth without sacrificing contrast. */
#top [class~="bg-[#080912]"]::before,
#top [class~="bg-[#090a14]"]::before,
#top #verticais > div::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    transparent 27%,
    rgba(148, 84, 245, 0.12) 40%,
    rgba(72, 116, 235, 0.06) 51%,
    transparent 65%
  );
  transform: rotate(-4deg);
  filter: blur(18px);
  opacity: 0.9;
}

#top [class~="bg-[#080912]"] > *,
#top [class~="bg-[#090a14]"] > *,
#top #verticais > div > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  #top main > section:first-child {
    background:
      radial-gradient(78% 52% at -10% 12%, rgba(255, 154, 104, 0.22), transparent 72%),
      radial-gradient(72% 52% at 108% 8%, rgba(70, 116, 255, 0.23), transparent 72%),
      radial-gradient(76% 54% at 50% 16%, rgba(150, 88, 255, 0.17), transparent 74%),
      linear-gradient(180deg, #fff9f6 0%, #f7f3ff 42%, #f5f7ff 74%, #f8f9fc 100%) !important;
  }

  #top [class~="bg-[#080912]"],
  #top [class~="bg-[#090a14]"],
  #top #verticais > div {
    background-position: 35% center !important;
  }
}