/*
Theme Name: InstaCams LP
Version: 5.2
*/

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  min-height: 100dvh;
  font-family: Outfit, "Segoe UI", sans-serif;
  background: #140c1c;
  color: #f6f0ff;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.app {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.blur {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  object-fit: cover;
  object-position: center 28%;
  filter: blur(26px) saturate(1.02);
  transform: scale(1.08);
}

.veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 42% at 50% 16%, rgba(20, 12, 28, .12), transparent 64%),
    linear-gradient(180deg, rgba(12, 10, 14, .22) 0%, rgba(12, 10, 14, .08) 36%, rgba(12, 10, 14, .58) 74%, #120e14 100%);
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
}

.brand, .hit, .legal { position: relative; z-index: 1; }

.brand {
  display: flex;
  justify-content: center;
  padding: calc(16px + env(safe-area-inset-top)) 20px 0;
}
.brand img {
  height: 52px;
  width: auto;
  padding: 8px 14px 6px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

.hit {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 24px 8px;
}

.orb {
  position: relative;
  width: min(58vw, 228px);
  aspect-ratio: 1;
  margin: 8px 0 28px;
}
.orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .7);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, .08),
    0 28px 50px rgba(0, 0, 0, .45);
}
.ring, .ring.delay {
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  animation: ripple 2.4s ease-out infinite;
}
.ring.delay { animation-delay: 1.2s; }
@keyframes ripple {
  0% { transform: scale(.86); opacity: .55; }
  100% { transform: scale(1.18); opacity: 0; }
}

.live {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(20, 12, 28, .78);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
  animation: pulse 1.4s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } }

h1 {
  margin: 18px 0 10px;
  font-size: clamp(34px, 10vw, 46px);
  line-height: 1.02;
  font-weight: 650;
  letter-spacing: -.04em;
}
h1 em {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-optical-sizing: auto;
  color: #f4eef8;
}

.lead {
  margin: 0 0 24px;
  max-width: 18em;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(246, 240, 255, .78);
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(360px, 100%);
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8b5cf6, #6d28d9);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 16px 36px rgba(109, 40, 217, .42);
}

.bar {
  display: block;
  width: min(360px, 100%);
  height: 2px;
  margin-top: 16px;
  border-radius: 99px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
}
.bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 0;
  background: #d8b4fe;
  animation: fill 2.8s linear forwards;
}
@keyframes fill { to { width: 100%; } }

.legal {
  margin: 0;
  padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
  font-size: 11px;
  color: rgba(246, 240, 255, .55);
  text-align: center;
}
.legal a { color: rgba(246, 240, 255, .8); text-decoration: underline; }

.wrap.section {
  width: min(640px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 64px;
}
.wrap.section h1 { font-size: 24px; letter-spacing: 0; }
.wrap.section p { line-height: 1.55; color: rgba(246, 240, 255, .75); }