:root { --phone-width: 430px; }
* { -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x: hidden;
  background:
    radial-gradient(900px 380px at 50% -10%, rgba(236, 72, 153, 0.35), transparent 65%),
    radial-gradient(900px 420px at 0% 25%, rgba(59, 130, 246, 0.35), transparent 60%),
    radial-gradient(900px 420px at 100% 20%, rgba(34, 197, 94, 0.18), transparent 60%),
    linear-gradient(180deg, #05070d 0%, #060a16 55%, #070a12 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.phone {
  width: min(100%, var(--phone-width));
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 98px;
  background:
    radial-gradient(1200px 600px at 50% -35%, rgba(236, 72, 153, 0.30), transparent 62%),
    radial-gradient(900px 500px at 85% 10%, rgba(59, 130, 246, 0.28), transparent 58%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(2, 6, 23, 0.94) 35%, rgba(2, 6, 23, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.72);
  position: relative;
  isolation: isolate;
}

.bg-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(2, 6, 23, 0.20) 0%, rgba(2, 6, 23, 0.92) 68%, rgba(2, 6, 23, 0.98) 100%),
    url('https://images.unsplash.com/photo-1526378722346-8c7b8e6f0d1b?auto=format&fit=crop&w=1200&q=60');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: saturate(1.05) contrast(1.05);
}

.glass {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}

.neon-line {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.0), rgba(236, 72, 153, 0.55), rgba(59, 130, 246, 0.55), rgba(34, 197, 94, 0.35), rgba(236, 72, 153, 0.0));
  height: 2px;
  border-radius: 999px;
  filter: blur(0.1px);
  opacity: 0.95;
}

.img-card { overflow: hidden; border-radius: 18px; }
.img-card img { display: block; width: 100%; height: auto; }

.img-caption {
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.15) 0%, rgba(2, 6, 23, 0.65) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.cta-image-button { border: 0; padding: 0; background: transparent; width: 100%; display: block; }
.cta-image-button img { width: 100%; height: auto; display: block; border-radius: 18px; }
.cta-image-button:active img { transform: scale(0.988); }

.primary-cta {
  background: linear-gradient(135deg, rgba(236,72,153,0.95) 0%, rgba(59,130,246,0.95) 55%, rgba(34,197,94,0.78) 120%);
  box-shadow:
    0 18px 44px rgba(236, 72, 153, 0.18),
    0 18px 44px rgba(59, 130, 246, 0.16);
}
.primary-cta:active { transform: scale(0.985); }

.chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.social-rail {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(calc(var(--phone-width) / 2 + 10px), -50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 60;
}

@media (max-width: 460px) {
  .social-rail { left: auto; right: 10px; transform: translateY(-50%); }
}