:root {
  color-scheme: dark;

  --bg:
    #070b14;

  --bg-soft:
    #0b1220;

  --surface:
    rgba(17, 27, 45, 0.88);

  --surface-solid:
    #111b2d;

  --surface-light:
    #17253b;

  --line:
    rgba(255, 255, 255, 0.09);

  --text:
    #f5f7fb;

  --muted:
    #93a3b8;

  --primary:
    #4d8dff;

  --primary-light:
    #76a8ff;

  --accent:
    #8f6bff;

  --success:
    #31c48d;

  --danger:
    #ff6077;

  --warning:
    #f4bd50;

  --radius:
    18px;

  --shadow:
    0 20px 60px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;

  color: var(--text);
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(77, 141, 255, 0.15),
      transparent 35%
    ),
    radial-gradient(
      circle at 85% 10%,
      rgba(143, 107, 255, 0.12),
      transparent 30%
    ),
    var(--bg);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color:
    transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;

  display: grid;
  grid-template-columns:
    auto minmax(260px, 720px) auto;
  align-items: center;
  gap: 24px;

  min-height: 74px;
  padding: 12px
    clamp(18px, 4vw, 64px);

  border-bottom:
    1px solid var(--line);

  background:
    rgba(7, 11, 20, 0.84);

  backdrop-filter:
    blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--accent)
    );

  box-shadow:
    0 10px 30px
    rgba(77, 141, 255, 0.3);
}

.header-search {
  display: flex;
  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.045);
}

.header-search input {
  flex: 1;

  min-width: 0;
  padding: 13px 18px;

  color: var(--text);
  border: 0;
  outline: none;
  background: transparent;
}

.header-search button {
  padding: 0 20px;

  color: var(--text);
  border: 0;
  background:
    rgba(77, 141, 255, 0.15);
}

.top-actions {
  display: flex;
  gap: 10px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 42px;
  padding: 0 18px;

  color: var(--text);

  border:
    1px solid transparent;

  border-radius:
    12px;

  font-weight: 700;
}

.button-primary {
  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--accent)
    );

  box-shadow:
    0 12px 28px
    rgba(77, 141, 255, 0.2);
}

.button-ghost {
  border-color:
    var(--line);

  background:
    rgba(255, 255, 255, 0.045);
}

.button-danger {
  background:
    rgba(255, 96, 119, 0.13);

  border-color:
    rgba(255, 96, 119, 0.2);
}

main {
  min-height:
    calc(100vh - 74px);

  padding-bottom: 90px;
}

.container {
  width:
    min(1240px, calc(100% - 36px));

  margin:
    0 auto;
}

.hero {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, 0.8fr);
  gap: 50px;
  align-items: center;

  min-height: 590px;
  padding: 72px 0;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: inline-flex;
  padding: 8px 13px;

  color:
    var(--primary-light);

  border:
    1px solid
    rgba(77, 141, 255, 0.22);

  border-radius:
    999px;

  background:
    rgba(77, 141, 255, 0.08);

  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero h1 {
  max-width: 800px;
  margin: 24px 0 18px;

  font-size:
    clamp(46px, 7vw, 84px);

  line-height: 0.98;
  letter-spacing: -0.055em;
}

.hero h1 span {
  color:
    transparent;

  background:
    linear-gradient(
      110deg,
      var(--primary-light),
      #b39cff
    );

  background-clip: text;
}

.hero p {
  max-width: 720px;
  margin: 0;

  color: var(--muted);

  font-size:
    clamp(17px, 2vw, 21px);

  line-height: 1.65;
}

.hero-search {
  display: flex;
  gap: 10px;

  max-width: 720px;
  margin-top: 34px;
  padding: 8px;

  border:
    1px solid var(--line);

  border-radius: 17px;

  background:
    rgba(255, 255, 255, 0.06);

  box-shadow: var(--shadow);
}

.hero-search input {
  flex: 1;
  min-width: 0;

  padding: 14px 15px;

  color: var(--text);
  border: 0;
  outline: none;
  background: transparent;

  font-size: 17px;
}

.hero-visual {
  position: relative;

  min-height: 430px;
}

.poster-stack {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;
}

.poster-card {
  position: absolute;

  width: 250px;
  aspect-ratio: 2 / 3;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      #1a2c48,
      #0d1423
    );

  box-shadow:
    0 30px 70px
    rgba(0, 0, 0, 0.5);
}

.poster-card::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(77, 141, 255, 0.45),
      transparent 35%
    ),
    linear-gradient(
      transparent,
      rgba(0, 0, 0, 0.8)
    );
}

.poster-card strong {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;

  font-size: 24px;
}

.poster-card:nth-child(1) {
  z-index: 3;
  transform:
    translateY(-10px);
}

.poster-card:nth-child(2) {
  transform:
    translate(-120px, 30px)
    rotate(-10deg);
}

.poster-card:nth-child(3) {
  transform:
    translate(120px, 35px)
    rotate(10deg);
}

.section {
  padding: 50px 0;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;

  margin-bottom: 24px;
}

.section-heading h2 {
  margin: 0;

  font-size:
    clamp(28px, 4vw, 42px);

  letter-spacing: -0.04em;
}

.section-heading p {
  margin: 8px 0 0;
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(230px, 1fr)
    );
  gap: 18px;
}

.card {
  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius);

  background:
    var(--surface);

  box-shadow:
    0 12px 34px
    rgba(0, 0, 0, 0.15);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(77, 141, 255, 0.35);
}

.entity-card {
  display: flex;
  min-height: 220px;
  flex-direction: column;
}

.entity-image {
  position: relative;

  min-height: 140px;

  background:
    linear-gradient(
      145deg,
      #152943,
      #10192a
    );
}

.entity-image img {
  width: 100%;
  height: 100%;
  max-height: 260px;

  object-fit: cover;
}

.entity-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 140px;
  place-items: center;

  color:
    rgba(255, 255, 255, 0.75);

  font-size: 42px;
  font-weight: 800;
}

.entity-content {
  display: flex;
  flex: 1;
  flex-direction: column;

  padding: 18px;
}

.entity-content h3 {
  margin: 0 0 8px;

  font-size: 19px;
}

.entity-content p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.5;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  margin-top: auto;
  padding-top: 16px;
}

.badge {
  display: inline-flex;
  align-items: center;

  padding: 6px 9px;

  border:
    1px solid var(--line);

  border-radius: 999px;

  color: var(--muted);

  background:
    rgba(255, 255, 255, 0.035);

  font-size: 12px;
  font-weight: 700;
}

.search-layout {
  padding: 48px 0;
}

.page-header {
  margin-bottom: 34px;
}

.page-header h1 {
  margin: 0 0 10px;

  font-size:
    clamp(36px, 6vw, 64px);

  letter-spacing: -0.05em;
}

.page-header p {
  margin: 0;

  color: var(--muted);
  font-size: 18px;
}

.search-panel {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 180px auto;
  gap: 10px;

  margin-bottom: 30px;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;

  color: var(--text);

  border:
    1px solid var(--line);

  border-radius: 12px;

  outline: none;

  background:
    rgba(255, 255, 255, 0.045);
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color:
    rgba(77, 141, 255, 0.65);
}

.result-group {
  margin-top: 36px;
}

.result-group h2 {
  margin-bottom: 18px;
}

.entity-hero {
  position: relative;

  overflow: hidden;

  padding: 70px 0 45px;
}

.entity-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(77, 141, 255, 0.16),
      transparent 35%
    );
}

.entity-header {
  position: relative;

  display: grid;
  grid-template-columns:
    230px minmax(0, 1fr);
  gap: 36px;
}

.entity-poster {
  min-height: 330px;
  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 22px;

  background:
    var(--surface-solid);

  box-shadow: var(--shadow);
}

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

.entity-info h1 {
  margin: 12px 0;

  font-size:
    clamp(38px, 6vw, 72px);

  letter-spacing: -0.05em;
}

.entity-description {
  max-width: 820px;

  color: var(--muted);

  font-size: 18px;
  line-height: 1.7;
}

.entity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin-top: 26px;
}

.tabs {
  display: flex;
  gap: 8px;

  overflow-x: auto;

  margin-bottom: 22px;
  padding-bottom: 4px;
}

.tab {
  white-space: nowrap;

  padding: 10px 14px;

  color: var(--muted);

  border:
    1px solid var(--line);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.035);
}

.tab.active {
  color: var(--text);

  border-color:
    rgba(77, 141, 255, 0.4);

  background:
    rgba(77, 141, 255, 0.14);
}

.list {
  display: grid;
  gap: 12px;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 18px;

  border:
    1px solid var(--line);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.035);
}

.list-item h3 {
  margin: 0 0 5px;
}

.list-item p {
  margin: 0;
  color: var(--muted);
}

.empty {
  padding: 36px;

  text-align: center;
  color: var(--muted);

  border:
    1px dashed var(--line);

  border-radius:
    var(--radius);
}

.loading-screen {
  display: grid;
  min-height: 60vh;
  place-items: center;

  color: var(--muted);
}

.loader {
  width: 44px;
  height: 44px;

  border:
    4px solid
    rgba(255, 255, 255, 0.1);

  border-top-color:
    var(--primary);

  border-radius: 50%;

  animation:
    spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform:
      rotate(360deg);
  }
}

dialog {
  width:
    min(460px, calc(100% - 30px));

  padding: 28px;

  color: var(--text);

  border:
    1px solid var(--line);

  border-radius: 20px;

  background:
    #101827;

  box-shadow: var(--shadow);
}

dialog::backdrop {
  background:
    rgba(0, 0, 0, 0.72);

  backdrop-filter:
    blur(5px);
}

.dialog-close {
  position: absolute;
  top: 14px;
  right: 16px;

  width: 36px;
  height: 36px;

  color: var(--muted);

  border: 0;
  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.06);

  font-size: 24px;
}

.auth-tabs {
  display: grid;
  grid-template-columns:
    1fr 1fr;
  gap: 8px;

  margin: 20px 0 24px;
}

.auth-tabs button {
  padding: 11px;

  color: var(--muted);

  border:
    1px solid var(--line);

  border-radius: 10px;

  background: transparent;
}

.auth-tabs button.active {
  color: var(--text);

  background:
    rgba(77, 141, 255, 0.13);

  border-color:
    rgba(77, 141, 255, 0.35);
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-form h2 {
  margin: 0 0 4px;
}

.auth-form label {
  display: grid;
  gap: 8px;

  color: var(--muted);
}

.auth-form input {
  min-height: 48px;
  padding: 12px 14px;

  color: var(--text);

  border:
    1px solid var(--line);

  border-radius: 11px;

  outline: none;

  background:
    rgba(255, 255, 255, 0.045);
}

.form-message {
  min-height: 20px;
  color: var(--danger);
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 100;

  max-width: 360px;
  padding: 14px 18px;

  border:
    1px solid var(--line);

  border-radius: 13px;

  background:
    #17253b;

  box-shadow: var(--shadow);
}

.mobile-nav {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 50;

  display: none;
  grid-template-columns:
    repeat(5, 1fr);

  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 16px;

  background:
    rgba(11, 18, 32, 0.94);

  backdrop-filter:
    blur(18px);
}

.mobile-nav a {
  padding: 13px 6px;
  text-align: center;

  color: var(--muted);

  font-size: 11px;
}

@media (
  max-width: 900px
) {
  .topbar {
    grid-template-columns:
      auto 1fr;
  }

  .header-search {
    grid-column:
      1 / -1;

    grid-row: 2;
  }

  .top-actions {
    justify-content:
      flex-end;
  }

  .hero {
    grid-template-columns:
      1fr;
  }

  .hero-visual {
    display: none;
  }

  .entity-header {
    grid-template-columns:
      150px minmax(0, 1fr);
  }

  .entity-poster {
    min-height: 230px;
  }
}

@media (
  max-width: 640px
) {
  .topbar {
    gap: 10px;
    padding: 10px 14px;
  }

  .brand {
    font-size: 17px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .top-actions
    .button {
    min-height: 38px;
    padding: 0 11px;

    font-size: 13px;
  }

  .header-search button {
    padding: 0 13px;
  }

  .container {
    width:
      min(
        100% - 24px,
        1240px
      );
  }

  .hero {
    min-height: auto;
    padding: 52px 0;
  }

  .hero h1 {
    font-size: 48px;
  }

  .hero-search {
    flex-direction: column;
  }

  .search-panel {
    grid-template-columns: 1fr;
  }

  .entity-header {
    grid-template-columns:
      100px minmax(0, 1fr);

    gap: 18px;
  }

  .entity-poster {
    min-height: 150px;
  }

  .entity-info h1 {
    font-size: 34px;
  }

  .entity-description {
    grid-column: 1 / -1;
  }

  .mobile-nav {
    display: grid;
  }

  .list-item {
    align-items:
      flex-start;
    flex-direction: column;
  }
}

/* VEGAWATCH GROUNDED AI */

.grounded-ai-panel {
  margin-bottom: 22px;

  border-color:
    rgba(143, 107, 255, 0.24);

  background:
    linear-gradient(
      135deg,
      rgba(77, 141, 255, 0.08),
      rgba(143, 107, 255, 0.07)
    ),
    var(--surface);
}

.grounded-ai-panel h2 {
  margin-bottom: 0;
}

.grounded-ai-panel h3 {
  margin-top: 22px;
}

.ai-hook {
  color:
    var(--primary-light);

  font-size: 19px;
  font-weight: 700;
}

.ai-prompts {
  display: grid;
  gap: 9px;
}

.ai-copy-prompt {
  width: 100%;
  color: var(--text);
  text-align: left;
}

.ai-disclaimer {
  margin:
    20px 0 0;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.5;
}

/* VEGAWATCH HOME GROWTH V1 */

.vw-original-hero-hidden {
  display: none !important;
}

#vw-home-growth {
  --vw-bg:
    #070b14;

  --vw-surface:
    rgba(
      18,
      29,
      48,
      0.82
    );

  --vw-surface-strong:
    #121d30;

  --vw-line:
    rgba(
      255,
      255,
      255,
      0.10
    );

  --vw-text:
    #f5f7fc;

  --vw-muted:
    #9eacc0;

  --vw-primary:
    #6294ff;

  --vw-accent:
    #9274ff;

  color:
    var(--vw-text);

  overflow: hidden;
}

.vw-growth-hero {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(
      0,
      0.95fr
    )
    minmax(
      420px,
      1.05fr
    );

  gap: clamp(
    44px,
    7vw,
    110px
  );

  align-items: center;

  min-height:
    calc(
      100vh - 72px
    );

  padding:
    clamp(
      70px,
      9vw,
      130px
    )
    max(
      28px,
      calc(
        (
          100vw -
          1240px
        ) / 2
      )
    );

  isolation: isolate;

  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(
        127,
        91,
        255,
        0.20
      ),
      transparent 32%
    ),
    radial-gradient(
      circle at 28% 10%,
      rgba(
        62,
        132,
        255,
        0.16
      ),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #0b1323 0%,
      #070b14 92%
    );
}

.vw-growth-hero-glow {
  position: absolute;

  inset:
    12% auto auto 58%;

  width: 430px;
  height: 430px;

  border-radius: 50%;

  background:
    rgba(
      76,
      131,
      255,
      0.11
    );

  filter:
    blur(90px);

  z-index: -1;
}

.vw-growth-copy {
  position: relative;
  z-index: 3;
}

.vw-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding:
    8px 13px;

  border:
    1px solid
    rgba(
      99,
      153,
      255,
      0.32
    );

  border-radius:
    999px;

  color:
    #85b1ff;

  background:
    rgba(
      53,
      107,
      197,
      0.12
    );

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}

.vw-growth-copy h1 {
  max-width:
    700px;

  margin:
    24px 0 22px;

  font-size:
    clamp(
      51px,
      6vw,
      88px
    );

  line-height:
    0.98;

  letter-spacing:
    -0.055em;
}

.vw-growth-copy h1 strong {
  display: block;

  color:
    transparent;

  background:
    linear-gradient(
      105deg,
      #69a1ff,
      #a881ff
    );

  background-clip:
    text;

  -webkit-background-clip:
    text;
}

.vw-growth-lead {
  max-width:
    650px;

  margin:
    0 0 28px;

  color:
    var(--vw-muted);

  font-size:
    clamp(
      18px,
      1.7vw,
      22px
    );

  line-height:
    1.65;
}

.vw-growth-search {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  gap: 8px;

  max-width:
    650px;

  padding: 8px;

  border:
    1px solid
    var(--vw-line);

  border-radius:
    17px;

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );

  box-shadow:
    0 20px 60px
    rgba(
      0,
      0,
      0,
      0.24
    );
}

.vw-growth-search input,
.vw-waitlist-form input {
  width: 100%;

  min-height:
    48px;

  border: 0;
  outline: 0;

  padding:
    0 16px;

  color:
    var(--vw-text);

  background:
    transparent;

  font:
    inherit;
}

.vw-growth-search input::placeholder,
.vw-waitlist-form input::placeholder {
  color:
    #7f8da2;
}

.vw-button,
.vw-link-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height:
    48px;

  padding:
    0 20px;

  border:
    1px solid
    transparent;

  border-radius:
    12px;

  font-weight:
    800;

  font-size:
    14px;

  text-decoration: none;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.vw-button:hover,
.vw-link-button:hover {
  transform:
    translateY(-2px);
}

.vw-button-primary {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      var(--vw-primary),
      var(--vw-accent)
    );

  box-shadow:
    0 12px 34px
    rgba(
      92,
      121,
      255,
      0.24
    );
}

.vw-button-secondary {
  color:
    var(--vw-text);

  border-color:
    var(--vw-line);

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );
}

.vw-button-muted {
  color:
    var(--vw-muted);

  border-color:
    var(--vw-line);

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );

  cursor:
    not-allowed;
}

.vw-link-button {
  color:
    #a8b9d1;

  background:
    transparent;
}

.vw-growth-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top:
    18px;
}

.vw-home-stats {
  display: flex;

  flex-wrap: wrap;

  gap:
    30px;

  margin-top:
    38px;
}

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

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

.vw-home-stats span {
  color:
    var(--vw-muted);

  font-size:
    13px;
}

.vw-growth-visual {
  position: relative;

  min-height:
    560px;
}

.vw-random-posters {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  perspective:
    1400px;
}

.vw-hero-poster {
  position: absolute;

  width:
    clamp(
      180px,
      18vw,
      270px
    );

  aspect-ratio:
    2 / 3;

  overflow: hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-radius:
    24px;

  background:
    #101a2b;

  box-shadow:
    0 30px 80px
    rgba(
      0,
      0,
      0,
      0.48
    );

  transition:
    transform 0.6s
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      ),
    opacity 0.6s ease,
    filter 0.6s ease;

  text-decoration: none;
}

.vw-hero-poster img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.vw-hero-poster span {
  position: absolute;

  inset:
    auto 0 0;

  padding:
    55px 17px 18px;

  color: #fff;

  background:
    linear-gradient(
      transparent,
      rgba(
        0,
        0,
        0,
        0.88
      )
    );

  font-weight:
    800;

  transform:
    translateY(10px);

  opacity: 0;

  transition:
    0.25s ease;
}

.vw-hero-poster:hover span {
  transform:
    translateY(0);

  opacity: 1;
}

.vw-hero-poster-0 {
  opacity: 0.28;

  filter:
    saturate(0.45);

  transform:
    translateX(-230px)
    translateZ(-180px)
    rotateY(24deg)
    scale(0.78);
}

.vw-hero-poster-1 {
  opacity: 0.72;

  transform:
    translateX(-128px)
    translateZ(-80px)
    rotateY(14deg)
    scale(0.90);
}

.vw-hero-poster-2 {
  z-index: 5;

  transform:
    translateZ(45px)
    scale(1.06);
}

.vw-hero-poster-3 {
  opacity: 0.72;

  transform:
    translateX(128px)
    translateZ(-80px)
    rotateY(-14deg)
    scale(0.90);
}

.vw-hero-poster-4 {
  opacity: 0.28;

  filter:
    saturate(0.45);

  transform:
    translateX(230px)
    translateZ(-180px)
    rotateY(-24deg)
    scale(0.78);
}

.vw-poster-controls {
  position: absolute;

  inset:
    auto 0 18px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 16px;

  color:
    var(--vw-muted);

  font-size:
    12px;
}

.vw-poster-controls button {
  width: 40px;
  height: 40px;

  border:
    1px solid
    var(--vw-line);

  border-radius: 50%;

  color:
    var(--vw-text);

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );

  cursor: pointer;
}

.vw-discovery-strip,
.vw-mobile-section,
.vw-final-cta {
  width:
    min(
      1240px,
      calc(
        100% - 40px
      )
    );

  margin:
    0 auto;
}

.vw-discovery-strip {
  padding:
    95px 0 110px;
}

.vw-discovery-strip > div:first-child {
  max-width:
    720px;

  margin-bottom:
    38px;
}

.vw-discovery-strip h2,
.vw-mobile-copy h2,
.vw-final-cta h2 {
  margin:
    18px 0 12px;

  font-size:
    clamp(
      34px,
      4.5vw,
      58px
    );

  line-height:
    1.05;

  letter-spacing:
    -0.04em;
}

.vw-discovery-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 16px;
}

.vw-feature-card {
  position: relative;

  min-height:
    235px;

  padding: 24px;

  overflow: hidden;

  border:
    1px solid
    var(--vw-line);

  border-radius:
    20px;

  color:
    var(--vw-text);

  background:
    linear-gradient(
      145deg,
      rgba(
        24,
        39,
        65,
        0.88
      ),
      rgba(
        12,
        20,
        35,
        0.92
      )
    );

  text-decoration: none;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.vw-feature-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(
      112,
      155,
      255,
      0.38
    );
}

.vw-feature-card-featured {
  grid-column:
    span 2;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(
        131,
        100,
        255,
        0.24
      ),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(
        37,
        72,
        126,
        0.90
      ),
      rgba(
        15,
        25,
        44,
        0.96
      )
    );
}

.vw-feature-icon {
  display: grid;

  place-items: center;

  width: 44px;
  height: 44px;

  margin-bottom: 25px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  border-radius:
    13px;

  color:
    #a8c6ff;

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );

  font-size:
    22px;
}

.vw-feature-card strong {
  display: block;

  margin-bottom: 9px;

  font-size:
    19px;
}

.vw-feature-card p {
  max-width:
    520px;

  margin: 0;

  color:
    var(--vw-muted);

  line-height:
    1.6;
}

.vw-feature-action {
  display: inline-flex;

  margin-top: 24px;

  color:
    #a9c5ff;

  font-weight:
    750;
}

.vw-mobile-section {
  display: grid;

  grid-template-columns:
    minmax(
      300px,
      0.9fr
    )
    minmax(
      0,
      1.1fr
    );

  gap:
    clamp(
      50px,
      8vw,
      120px
    );

  align-items: center;

  padding:
    110px
    clamp(
      30px,
      6vw,
      85px
    );

  border:
    1px solid
    var(--vw-line);

  border-radius:
    30px;

  background:
    radial-gradient(
      circle at 20% 35%,
      rgba(
        83,
        141,
        255,
        0.19
      ),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(
        19,
        31,
        52,
        0.96
      ),
      rgba(
        9,
        15,
        27,
        0.98
      )
    );
}

.vw-mobile-visual {
  display: grid;
  place-items: center;
}

.vw-phone {
  position: relative;

  width:
    min(
      280px,
      75vw
    );

  aspect-ratio:
    0.52;

  padding: 10px;

  overflow: hidden;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      0.20
    );

  border-radius:
    42px;

  background:
    #05070c;

  box-shadow:
    0 38px 100px
    rgba(
      0,
      0,
      0,
      0.55
    ),
    0 0 80px
    rgba(
      83,
      134,
      255,
      0.17
    );
}

.vw-phone img {
  width: 100%;
  height: 100%;

  border-radius:
    32px;

  object-fit: cover;

  opacity: 0.78;
}

.vw-phone-bar {
  position: absolute;

  z-index: 3;

  top: 17px;
  left: 50%;

  width: 90px;
  height: 21px;

  border-radius:
    999px;

  background:
    #03050a;

  transform:
    translateX(-50%);
}

.vw-phone-overlay {
  position: absolute;

  inset:
    auto 10px 10px;

  display: grid;
  gap: 8px;

  padding:
    85px 22px 24px;

  border-radius:
    0 0 32px 32px;

  background:
    linear-gradient(
      transparent,
      rgba(
        3,
        7,
        14,
        0.96
      )
    );
}

.vw-phone-overlay span {
  color:
    #9fc0ff;

  font-size:
    13px;

  font-weight:
    800;
}

.vw-phone-overlay strong {
  font-size:
    22px;

  line-height:
    1.2;
}

.vw-mobile-copy > p {
  color:
    var(--vw-muted);

  font-size:
    18px;

  line-height:
    1.7;
}

.vw-check-list {
  display: grid;
  gap: 11px;

  margin:
    26px 0;

  padding: 0;

  list-style: none;
}

.vw-check-list li {
  position: relative;

  padding-left:
    30px;

  color:
    #c8d2e1;
}

.vw-check-list li::before {
  position: absolute;

  left: 0;

  content: "✓";

  color:
    #82aaff;

  font-weight:
    900;
}

.vw-app-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}

.vw-google-play-coming {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-top:
    26px;

  padding:
    15px 17px;

  border:
    1px solid
    var(--vw-line);

  border-radius:
    15px;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );
}

.vw-play-icon {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  border-radius:
    12px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #52c986,
      #5f8eff,
      #df65af
    );
}

.vw-google-play-coming div {
  display: grid;
  gap: 3px;
}

.vw-google-play-coming span {
  color:
    var(--vw-muted);

  font-size:
    13px;
}

.vw-google-play-coming strong {
  color:
    var(--vw-text);

  font-size:
    14px;
}

.vw-waitlist-form {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  gap: 8px;

  margin-top:
    14px;

  padding: 7px;

  border:
    1px solid
    var(--vw-line);

  border-radius:
    15px;

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );
}

.vw-form-status {
  min-height:
    20px;

  margin:
    10px 0 0;

  color:
    #98afd1;

  font-size:
    13px;
}

.vw-final-cta {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 40px;

  margin-top:
    90px;

  margin-bottom:
    110px;

  padding:
    clamp(
      38px,
      6vw,
      75px
    );

  border:
    1px solid
    rgba(
      107,
      145,
      255,
      0.25
    );

  border-radius:
    28px;

  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(
        137,
        99,
        255,
        0.21
      ),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(
        28,
        54,
        96,
        0.87
      ),
      rgba(
        17,
        26,
        45,
        0.95
      )
    );
}

.vw-final-cta > div:first-child {
  max-width:
    750px;
}

.vw-final-cta p {
  color:
    var(--vw-muted);

  line-height:
    1.65;
}

.vw-final-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}

#vw-home-footer {
  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  color:
    #e8edf6;

  background:
    #050811;
}

.vw-footer-main {
  display: grid;

  grid-template-columns:
    1.6fr
    repeat(
      4,
      1fr
    );

  gap:
    clamp(
      30px,
      5vw,
      75px
    );

  width:
    min(
      1240px,
      calc(
        100% - 40px
      )
    );

  margin:
    0 auto;

  padding:
    68px 0 55px;
}

.vw-footer-logo {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #fff;

  font-size:
    20px;

  font-weight:
    900;

  text-decoration: none;
}

.vw-footer-logo span {
  display: grid;

  place-items: center;

  width: 36px;
  height: 36px;

  border-radius:
    11px;

  background:
    linear-gradient(
      135deg,
      #5c8eff,
      #8a6dff
    );
}

.vw-footer-brand p {
  max-width:
    290px;

  color:
    #8797ad;

  line-height:
    1.6;
}

.vw-footer-apps {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top:
    20px;
}

.vw-footer-apps span {
  padding:
    7px 10px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  border-radius:
    999px;

  color:
    #8fa4c0;

  font-size:
    11px;
}

.vw-footer-column {
  display: grid;

  align-content: start;

  gap: 12px;
}

.vw-footer-column strong {
  margin-bottom: 7px;

  color: #fff;

  font-size:
    14px;
}

.vw-footer-column a {
  color:
    #8797ad;

  font-size:
    13px;

  text-decoration: none;
}

.vw-footer-column a:hover {
  color:
    #b8caff;
}

.vw-footer-bottom {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  width:
    min(
      1240px,
      calc(
        100% - 40px
      )
    );

  margin:
    0 auto;

  padding:
    22px 0 30px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );

  color:
    #6f7d91;

  font-size:
    12px;
}

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

    min-height:
      auto;
  }

  .vw-growth-copy {
    max-width:
      760px;
  }

  .vw-growth-visual {
    min-height:
      520px;
  }

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

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

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

@media (
  max-width: 760px
) {
  .vw-growth-hero {
    gap: 20px;

    padding:
      65px 20px 45px;
  }

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

  .vw-growth-lead {
    font-size:
      17px;
  }

  .vw-growth-search,
  .vw-waitlist-form {
    grid-template-columns:
      1fr;
  }

  .vw-growth-search button,
  .vw-waitlist-form button {
    width: 100%;
  }

  .vw-home-stats {
    display: grid;

    grid-template-columns:
      repeat(
        3,
        1fr
      );

    gap: 12px;
  }

  .vw-home-stats div {
    padding:
      13px 10px;

    border:
      1px solid
      var(--vw-line);

    border-radius:
      12px;

    background:
      rgba(
        255,
        255,
        255,
        0.035
      );
  }

  .vw-home-stats strong {
    font-size:
      19px;
  }

  .vw-growth-visual {
    min-height:
      390px;
  }

  .vw-hero-poster {
    width:
      180px;
  }

  .vw-hero-poster-0 {
    display: none;
  }

  .vw-hero-poster-1 {
    transform:
      translateX(-78px)
      scale(0.82);
  }

  .vw-hero-poster-3 {
    transform:
      translateX(78px)
      scale(0.82);
  }

  .vw-hero-poster-4 {
    display: none;
  }

  .vw-discovery-strip {
    padding:
      70px 0;
  }

  .vw-discovery-grid {
    grid-template-columns:
      1fr;
  }

  .vw-feature-card-featured {
    grid-column:
      auto;
  }

  .vw-mobile-section {
    grid-template-columns:
      1fr;

    padding:
      55px 22px;
  }

  .vw-mobile-copy {
    text-align: left;
  }

  .vw-final-cta {
    display: grid;

    margin-top:
      60px;

    margin-bottom:
      70px;
  }

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

    padding-top:
      50px;
  }

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

@media (
  max-width: 480px
) {
  .vw-growth-actions {
    display: grid;

    grid-template-columns:
      1fr;
  }

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

  .vw-home-stats {
    grid-template-columns:
      1fr;
  }

  .vw-footer-main {
    grid-template-columns:
      1fr;
  }
}