/* VEGAWATCH HOME GROWTH STANDALONE V2 */

body.vwh-home-active main >
.vwh-legacy-home {
  display: none !important;
}

#vwh-home {
  --vwh-bg: #070b14;
  --vwh-surface: #121d30;
  --vwh-line: rgba(255,255,255,.10);
  --vwh-text: #f5f7fc;
  --vwh-muted: #98a8bd;
  --vwh-primary: #6193ff;
  --vwh-accent: #9272ff;

  display: block;
  width: 100%;
  color: var(--vwh-text);
  background: var(--vwh-bg);
  overflow: hidden;
}

#vwh-home *,
#vwh-home *::before,
#vwh-home *::after {
  box-sizing: border-box;
}

#vwh-home a {
  color: inherit;
  text-decoration: none;
}

.vwh-hero {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0,.95fr)
    minmax(430px,1.05fr);
  align-items: center;
  gap: clamp(45px,7vw,100px);
  min-height: calc(100vh - 70px);
  padding:
    clamp(70px,9vw,125px)
    max(
      24px,
      calc((100vw - 1240px)/2)
    );
  background:
    radial-gradient(
      circle at 76% 18%,
      rgba(130,91,255,.22),
      transparent 33%
    ),
    radial-gradient(
      circle at 24% 10%,
      rgba(62,132,255,.16),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #0b1425,
      #070b14
    );
}

.vwh-eyebrow {
  display: inline-flex;
  padding: 8px 13px;
  border: 1px solid rgba(99,153,255,.32);
  border-radius: 999px;
  color: #85b1ff;
  background: rgba(53,107,197,.12);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.vwh-copy h1 {
  max-width: 720px;
  margin: 24px 0 22px;
  font-size: clamp(52px,6vw,88px);
  line-height: .98;
  letter-spacing: -.055em;
}

.vwh-copy h1 strong {
  display: block;
  color: transparent;
  background:
    linear-gradient(
      105deg,
      #69a1ff,
      #a881ff
    );
  background-clip: text;
  -webkit-background-clip: text;
}

.vwh-lead {
  max-width: 650px;
  color: var(--vwh-muted);
  font-size: clamp(18px,1.7vw,22px);
  line-height: 1.65;
}

#vwh-search,
#vwh-waitlist {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  max-width: 650px;
  margin-top: 27px;
  padding: 8px;
  border: 1px solid var(--vwh-line);
  border-radius: 17px;
  background: rgba(255,255,255,.055);
}

#vwh-search input,
#vwh-waitlist input {
  min-height: 48px;
  padding: 0 15px;
  border: 0;
  outline: 0;
  color: var(--vwh-text);
  background: transparent;
  font: inherit;
}

#vwh-search button,
#vwh-waitlist button,
.vwh-actions a,
.vwh-actions button,
.vwh-app-buttons a,
.vwh-app-buttons button,
.vwh-final a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--vwh-line);
  border-radius: 12px;
  color: var(--vwh-text);
  background: rgba(255,255,255,.055);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

#vwh-home .vwh-primary,
#vwh-search button,
#vwh-waitlist button {
  border-color: transparent;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      var(--vwh-primary),
      var(--vwh-accent)
    );
  box-shadow:
    0 12px 34px
    rgba(92,121,255,.24);
}

.vwh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.vwh-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 36px;
}

.vwh-stats div {
  display: grid;
  gap: 3px;
}

.vwh-stats strong {
  font-size: 24px;
}

.vwh-stats span {
  color: var(--vwh-muted);
  font-size: 13px;
}

.vwh-visual {
  position: relative;
  min-height: 570px;
}

#vwh-posters {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}

.vwh-poster {
  position: absolute;
  width: clamp(180px,18vw,270px);
  aspect-ratio: 2/3;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 24px;
  background: #101a2b;
  box-shadow: 0 30px 80px rgba(0,0,0,.50);
  transition:
    transform .55s ease,
    opacity .55s ease,
    filter .55s ease;
}

.vwh-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vwh-poster span {
  position: absolute;
  inset: auto 0 0;
  padding: 60px 17px 18px;
  color: #fff;
  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.9)
    );
  font-weight: 800;
  opacity: 0;
  transform: translateY(10px);
  transition: .22s ease;
}

.vwh-poster:hover span {
  opacity: 1;
  transform: none;
}

.vwh-poster-0 {
  opacity: .26;
  filter: saturate(.45);
  transform:
    translateX(-235px)
    translateZ(-180px)
    rotateY(24deg)
    scale(.78);
}

.vwh-poster-1 {
  opacity: .72;
  transform:
    translateX(-125px)
    translateZ(-80px)
    rotateY(14deg)
    scale(.90);
}

.vwh-poster-2 {
  z-index: 5;
  transform:
    translateZ(45px)
    scale(1.06);
}

.vwh-poster-3 {
  opacity: .72;
  transform:
    translateX(125px)
    translateZ(-80px)
    rotateY(-14deg)
    scale(.90);
}

.vwh-poster-4 {
  opacity: .26;
  filter: saturate(.45);
  transform:
    translateX(235px)
    translateZ(-180px)
    rotateY(-24deg)
    scale(.78);
}

.vwh-poster-nav {
  position: absolute;
  inset: auto 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: var(--vwh-muted);
  font-size: 12px;
}

.vwh-poster-nav button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--vwh-line);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.055);
  cursor: pointer;
}

.vwh-features,
.vwh-app,
.vwh-final {
  width: min(1240px,calc(100% - 40px));
  margin-inline: auto;
}

.vwh-features {
  padding: 100px 0 110px;
}

.vwh-heading {
  max-width: 760px;
  margin-bottom: 38px;
}

.vwh-heading h2,
.vwh-app-copy h2,
.vwh-final h2 {
  margin: 18px 0 12px;
  font-size: clamp(35px,4.6vw,59px);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.vwh-heading p,
.vwh-app-copy > p,
.vwh-final p {
  color: var(--vwh-muted);
  font-size: 17px;
  line-height: 1.7;
}

.vwh-feature-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

.vwh-feature {
  min-height: 230px;
  padding: 24px;
  border: 1px solid var(--vwh-line);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(24,39,65,.88),
      rgba(12,20,35,.94)
    );
}

.vwh-feature-main {
  grid-column: span 2;
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(131,100,255,.24),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(37,72,126,.90),
      rgba(15,25,44,.96)
    );
}

.vwh-feature > span {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  margin-bottom: 24px;
  border: 1px solid var(--vwh-line);
  border-radius: 13px;
  color: #a8c6ff;
  background: rgba(255,255,255,.055);
  font-size: 22px;
}

.vwh-feature strong {
  display: block;
  margin-bottom: 9px;
  font-size: 19px;
}

.vwh-feature p {
  color: var(--vwh-muted);
  line-height: 1.6;
}

.vwh-feature b {
  display: inline-block;
  margin-top: 20px;
  color: #a9c5ff;
}

.vwh-app {
  display: grid;
  grid-template-columns: minmax(280px,.85fr) minmax(0,1.15fr);
  align-items: center;
  gap: clamp(50px,8vw,120px);
  padding: 100px clamp(28px,6vw,85px);
  border: 1px solid var(--vwh-line);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 20% 35%,
      rgba(83,141,255,.20),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(19,31,52,.96),
      rgba(9,15,27,.99)
    );
}

.vwh-phone {
  position: relative;
  width: min(285px,72vw);
  aspect-ratio: .52;
  margin: auto;
  padding: 10px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.20);
  border-radius: 42px;
  background: #05070c;
  box-shadow:
    0 38px 100px rgba(0,0,0,.55),
    0 0 80px rgba(83,134,255,.18);
}

.vwh-phone img {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  object-fit: cover;
  opacity: .78;
}

.vwh-phone > div {
  position: absolute;
  inset: auto 10px 10px;
  display: grid;
  gap: 8px;
  padding: 90px 22px 25px;
  border-radius: 0 0 32px 32px;
  background:
    linear-gradient(
      transparent,
      rgba(3,7,14,.97)
    );
}

.vwh-phone span {
  color: #9fc0ff;
  font-size: 13px;
  font-weight: 800;
}

.vwh-phone strong {
  font-size: 22px;
  line-height: 1.2;
}

.vwh-app-copy ul {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.vwh-app-copy li::before {
  content: "✓";
  margin-right: 12px;
  color: #82aaff;
  font-weight: 900;
}

.vwh-app-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.vwh-play {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 25px;
  padding: 15px 17px;
  border: 1px solid var(--vwh-line);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}

.vwh-play > span {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 12px;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #52c986,
      #5f8eff,
      #df65af
    );
}

.vwh-play div {
  display: grid;
  gap: 3px;
}

.vwh-play small {
  color: var(--vwh-muted);
}

#vwh-waitlist-status {
  min-height: 20px;
  color: #9fb1cd;
  font-size: 13px;
}

.vwh-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 90px;
  margin-bottom: 100px;
  padding: clamp(38px,6vw,75px);
  border: 1px solid rgba(107,145,255,.25);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(137,99,255,.22),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(28,54,96,.88),
      rgba(17,26,45,.96)
    );
}

.vwh-final > div:first-child {
  max-width: 760px;
}

.vwh-final > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#vwh-footer {
  border-top: 1px solid rgba(255,255,255,.09);
  background: #050811;
}

.vwh-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4,1fr);
  gap: clamp(28px,5vw,70px);
  width: min(1240px,calc(100% - 40px));
  margin: auto;
  padding: 68px 0 55px;
}

.vwh-footer-brand > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 900;
}

.vwh-footer-brand > a span {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 11px;
  background:
    linear-gradient(
      135deg,
      #5c8eff,
      #8a6dff
    );
}

.vwh-footer-brand p {
  max-width: 290px;
  color: #8797ad;
  line-height: 1.6;
}

.vwh-footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vwh-footer-badges span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  color: #8fa4c0;
  font-size: 11px;
}

.vwh-footer-grid > div:not(.vwh-footer-brand) {
  display: grid;
  align-content: start;
  gap: 12px;
}

.vwh-footer-grid strong {
  margin-bottom: 6px;
  color: #fff;
}

.vwh-footer-grid a {
  color: #8797ad;
  font-size: 13px;
}

.vwh-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: min(1240px,calc(100% - 40px));
  margin: auto;
  padding: 22px 0 30px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #6f7d91;
  font-size: 12px;
}

@media (max-width:1050px) {
  .vwh-hero {
    grid-template-columns: 1fr;
  }

  .vwh-visual {
    min-height: 520px;
  }

  .vwh-feature-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .vwh-footer-grid {
    grid-template-columns: repeat(3,1fr);
  }

  .vwh-footer-brand {
    grid-column: 1/-1;
  }
}

@media (max-width:760px) {
  .vwh-hero {
    padding: 65px 20px 45px;
  }

  .vwh-copy h1 {
    font-size: clamp(44px,13vw,65px);
  }

  #vwh-search,
  #vwh-waitlist {
    grid-template-columns: 1fr;
  }

  .vwh-actions {
    display: grid;
  }

  .vwh-actions > * {
    width: 100%;
  }

  .vwh-stats {
    display: grid;
    grid-template-columns: 1fr;
  }

  .vwh-visual {
    min-height: 390px;
  }

  .vwh-poster {
    width: 180px;
  }

  .vwh-poster-0,
  .vwh-poster-4 {
    display: none;
  }

  .vwh-poster-1 {
    transform:
      translateX(-78px)
      scale(.82);
  }

  .vwh-poster-3 {
    transform:
      translateX(78px)
      scale(.82);
  }

  .vwh-feature-grid {
    grid-template-columns: 1fr;
  }

  .vwh-feature-main {
    grid-column: auto;
  }

  .vwh-app {
    grid-template-columns: 1fr;
    padding: 55px 22px;
  }

  .vwh-final {
    display: grid;
  }

  .vwh-footer-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .vwh-footer-bottom {
    display: grid;
  }
}

@media (max-width:480px) {
  .vwh-footer-grid {
    grid-template-columns: 1fr;
  }
}