.homepage-variant {
  position: relative;
  min-height: 100%;
}

.homepage-variant .lp-container {
  position: relative;
  z-index: 2;
}

.homepage-variant .lp-nav {
  backdrop-filter: blur(10px);
}

.homepage-variant::before {
  content: "";
  position: fixed;
  inset: -20vh 0 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.92;
}

.homepage-variant .lp-section,
.homepage-variant .lp-form-shell {
  position: relative;
  z-index: 1;
}

.homepage-variant-1 {
  --graphite: #0f1733;
  --warm-white: #f5f8ff;
  --teal: #43d7ff;
  --silver: #91a4df;
  --stone: #d7e4ff;
  --admiral: #162447;
  --ink: #f7f9ff;
  --ink-soft: #c5d4ff;
  --ink-inverse: #f7f9ff;
  --success: #4feca6;
  --warning: #ffd166;
  --danger: #ff8fb1;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.28);
  --lp-highlight: #4de1ff;
  --lp-paper-top: rgba(12, 20, 48, 0.92);
  --lp-paper-bottom: rgba(18, 30, 66, 0.94);
  --lp-paper-line: rgba(128, 169, 255, 0.25);
  --lp-paper-shadow: 0 24px 52px rgba(5, 10, 32, 0.42);
  --lp-rail-top: rgba(17, 29, 62, 0.98);
  --lp-rail-bottom: rgba(24, 40, 90, 0.98);
  --lp-rail-line: rgba(151, 180, 255, 0.3);
  --lp-rail-chip: rgba(255, 255, 255, 0.08);
  --lp-rail-chip-hover: rgba(255, 255, 255, 0.16);
  --lp-rail-card-top: rgba(255, 255, 255, 0.97);
  --lp-rail-card-bottom: rgba(244, 248, 255, 0.91);
  background:
    linear-gradient(140deg, #0a1026 0%, #101b47 38%, #12295b 100%);
}

.homepage-variant-1::before {
  background:
    radial-gradient(circle at 12% 14%, rgba(67, 215, 255, 0.32) 0, rgba(67, 215, 255, 0) 33%),
    radial-gradient(circle at 80% 82%, rgba(109, 77, 255, 0.26) 0, rgba(109, 77, 255, 0) 38%),
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 70%);
}

.homepage-variant-1 .lp-hero .lp-container,
.homepage-variant-1 .lp-proof-strip,
.homepage-variant-1 .lead-capture-form,
.homepage-variant-1 .lp-bottom-cta {
  border-color: rgba(145, 184, 255, 0.35);
}

.homepage-variant-2 {
  --graphite: #2a2118;
  --warm-white: #fdf4e7;
  --teal: #e26b3c;
  --silver: #cdb79a;
  --stone: #f0dbbe;
  --admiral: #4a3a2b;
  --ink: #2d2116;
  --ink-soft: #735f49;
  --ink-inverse: #fff3dd;
  --lp-highlight: #ff7f50;
  --lp-paper-top: rgba(255, 243, 224, 0.98);
  --lp-paper-bottom: rgba(255, 230, 198, 0.94);
  --lp-paper-line: rgba(154, 100, 52, 0.24);
  --lp-paper-shadow: 0 24px 52px rgba(64, 35, 14, 0.16);
  --lp-rail-top: rgba(69, 45, 25, 0.98);
  --lp-rail-bottom: rgba(38, 27, 16, 0.98);
  --lp-rail-line: rgba(181, 133, 80, 0.28);
  --lp-rail-copy: rgba(249, 244, 234, 0.9);
  --lp-rail-chip: rgba(249, 244, 234, 0.1);
  --lp-rail-chip-hover: rgba(249, 244, 234, 0.16);
  --lp-rail-card-top: rgba(255, 247, 233, 0.98);
  --lp-rail-card-bottom: rgba(255, 237, 214, 0.92);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 184, 128, 0.36) 0, rgba(255, 184, 128, 0) 36%),
    linear-gradient(180deg, #fef4df 0%, #f6dcc6 58%, #e7c6a8 100%);
}

.homepage-variant-2::before {
  background:
    linear-gradient(70deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px),
    linear-gradient(160deg, rgba(87, 60, 31, 0.18) 0%, rgba(87, 60, 31, 0) 52%),
    linear-gradient(20deg, rgba(255, 153, 102, 0.22), rgba(255, 212, 177, 0.02));
}

.homepage-variant-2 .lp-hero .lp-container {
  grid-template-columns: 1fr;
}

.homepage-variant-2 .lp-mini-assistant {
  order: -1;
  margin-bottom: 8px;
}

.homepage-variant-2 .lp-proof-pill-group {
  grid-template-columns: 1fr 1fr 1fr;
}

.homepage-variant-2 .lp-bottom-cta,
.homepage-variant-2 .lp-proof-strip,
.homepage-variant-2 .lead-capture-form {
  border-width: 2px;
}

.homepage-variant-3 {
  --graphite: #1f2622;
  --warm-white: #f3f9f5;
  --teal: #4ac3a5;
  --silver: #9db0a6;
  --stone: #d0ddd5;
  --admiral: #2b3934;
  --ink: #edf7f0;
  --ink-soft: #c0cec8;
  --ink-inverse: #eff8f4;
  --lp-highlight: #5de0a7;
  --lp-paper-top: rgba(14, 29, 25, 0.96);
  --lp-paper-bottom: rgba(27, 53, 44, 0.95);
  --lp-paper-line: rgba(101, 171, 136, 0.32);
  --lp-paper-shadow: 0 26px 54px rgba(7, 21, 17, 0.46);
  --lp-rail-top: rgba(27, 44, 38, 0.98);
  --lp-rail-bottom: rgba(20, 33, 28, 0.98);
  --lp-rail-line: rgba(130, 184, 161, 0.3);
  --lp-rail-chip: rgba(230, 245, 237, 0.1);
  --lp-rail-chip-hover: rgba(230, 245, 237, 0.2);
  --lp-rail-card-top: rgba(229, 243, 236, 0.97);
  --lp-rail-card-bottom: rgba(214, 235, 223, 0.93);
  background:
    repeating-linear-gradient(120deg, rgba(95, 191, 154, 0.1) 0 2px, rgba(30, 36, 34, 0) 2px 70px),
    linear-gradient(145deg, #101d18 0%, #13231e 40%, #1b322b 100%);
}

.homepage-variant-3::before {
  background:
    radial-gradient(circle at 16% 86%, rgba(93, 224, 167, 0.22) 0, rgba(93, 224, 167, 0) 30%),
    radial-gradient(circle at 84% 14%, rgba(74, 195, 165, 0.25) 0, rgba(74, 195, 165, 0) 44%);
}

.homepage-variant-3 .lp-hero .lp-container {
  grid-template-columns: 1fr 1.05fr;
  align-items: stretch;
}

.homepage-variant-3 .lp-hero-copy {
  transform: translateY(12px);
}

.homepage-variant-3 .lp-mini-assistant {
  transform: translateY(-12px);
}

.homepage-variant-3 .lp-step-grid,
.homepage-variant-3 .lp-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.homepage-variant-3 .lp-step,
.homepage-variant-3 .lp-proof-card {
  border-radius: 28px;
  transform: rotate(-0.8deg);
}

.homepage-variant-4 {
  --graphite: #1f242a;
  --warm-white: #f6f4ef;
  --teal: #2f6b73;
  --silver: #a6b6c3;
  --stone: #d8d1c6;
  --admiral: #27395a;
  --lp-highlight: #2c95a7;
  --lp-paper-top: rgba(255, 254, 250, 0.98);
  --lp-paper-bottom: rgba(245, 236, 223, 0.92);
  --lp-paper-line: rgba(47, 107, 115, 0.34);
  --lp-paper-shadow: 0 26px 56px rgba(31, 36, 42, 0.18);
  --lp-rail-top: rgba(47, 107, 115, 0.98);
  --lp-rail-bottom: rgba(31, 36, 42, 0.98);
  --lp-rail-line: rgba(166, 182, 195, 0.34);
  --lp-rail-copy: rgba(246, 244, 239, 0.94);
  --lp-rail-chip: rgba(246, 244, 239, 0.12);
  --lp-rail-chip-hover: rgba(246, 244, 239, 0.2);
  --lp-rail-card-top: rgba(255, 255, 255, 0.99);
  --lp-rail-card-bottom: rgba(246, 242, 236, 0.92);
  background:
    linear-gradient(120deg, rgba(253, 250, 244, 0.98) 0, rgba(238, 229, 212, 0.93) 50%, rgba(255, 246, 232, 0.98) 100%),
    radial-gradient(circle at 18% 72%, rgba(47, 107, 115, 0.18), transparent 35%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.35), transparent 40%);
}

.homepage-variant-4::before {
  background:
    repeating-linear-gradient(
      160deg,
      rgba(47, 107, 115, 0.09) 0,
      rgba(47, 107, 115, 0.09) 2px,
      rgba(255, 255, 255, 0) 2px,
      rgba(255, 255, 255, 0) 94px
    );
}

.homepage-variant-4 .lp-nav {
  background: linear-gradient(180deg, rgba(255, 250, 244, 0.95) 0%, rgba(247, 244, 238, 0.86) 100%);
  border-bottom: 1px solid rgba(166, 182, 195, 0.28);
}

.homepage-variant-4 .lp-hero-copy {
  border-width: 2px;
}

.homepage-variant-4 .lp-mini-assistant,
.homepage-variant-4 .lead-capture-form,
.homepage-variant-4 .lp-proof-strip {
  border: 1px solid rgba(47, 107, 115, 0.28);
}

.homepage-variant-4 .lp-bottom-cta {
  background:
    linear-gradient(145deg, rgba(47, 107, 115, 0.95) 0%, rgba(31, 36, 42, 0.95) 100%);
}

.homepage-variant .lp-btn {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.homepage-variant .lp-btn:hover {
  transform: translateY(-1px);
}

.homepage-variant .lp-form-shell {
  position: relative;
}

.homepage-variant .lp-form-shell::before,
.homepage-variant .lp-form-shell::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(56px);
  pointer-events: none;
  z-index: 0;
}

.homepage-variant .lp-form-shell::before {
  left: -240px;
  top: -170px;
  background: rgba(255, 255, 255, 0.2);
}

.homepage-variant .lp-form-shell::after {
  right: -250px;
  bottom: -180px;
  background: rgba(0, 0, 0, 0.08);
}

.homepage-variant .lp-form-shell > .lp-container {
  position: relative;
  z-index: 1;
}
