/* GLOBAL ------------------------------------------------------ */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif;
  background: linear-gradient(135deg, #1d1234, #3d1f85 50%, #8a29b9);
  color: white;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page {
  display: flex;
  gap: 100px;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
}

/* iPHONE FRAME ------------------------------------------------ */
.iphone-wrapper {
  display: flex;
  justify-content: center;
}

.iphone-frame {
  width: 350px;
  height: 720px;
  border-radius: 50px;
  background: black;
  padding: 3px;
  position: relative;
  box-shadow: 0 0 60px rgba(0,0,0,0.4);
}

.iphone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 32px;
  background: #000;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}

.iphone-screen {
  width: 100%;
  height: 100%;
  border-radius: 48px;
  overflow: hidden;
  background: linear-gradient(135deg, #8a5cff, #ff8dd7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder {
  width: 90%;
  height: 90%;
  border-radius: 34px;
  background: rgba(255,255,255,0.15);
  border: 2px dashed rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CONTENT ------------------------------------------------------ */
.content {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.logo-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-img {
  width: 64px;
  height: 64px;
}

.title {
  font-size: 3.4rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.05;
}

.tagline {
  font-size: 1.55rem;
  opacity: 0.92;
  margin: 0;
  line-height: 1.35;
}

/* -------------------------------------------------------------
   BULLETS — colored circles + centered icons + hover animation
---------------------------------------------------------------- */
.bullets {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bullets div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.bullets div:hover {
  transform: translateX(4px);
  opacity: 1;
}

/* PERFECT CIRCLES */
.bullet-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  flex-shrink: 0;

  /* always center icons */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* RESTORED GRADIENT CIRCLES */
.icon1 { background: linear-gradient(135deg, #c46cff, #fe70a7); }
.icon2 { background: linear-gradient(135deg, #47c6ff, #71eaff); }
.icon3 { background: linear-gradient(135deg, #ff7ab6, #ff4d7d); }

/* WHITE ICON INSIDE CIRCLE */
.bullet-icon img {
  width: 22px;
  height: 22px;
  filter: invert(100%) brightness(200%);
}

.bullets span {
  font-size: 1.14rem;
  line-height: 1.3;
}

/* CTA ---------------------------------------------------------- */
.cta {
  padding: 20px 46px;
  font-size: 1.25rem;
  font-weight:700;
  border-radius: 32px;
  border: none;
  cursor: pointer;
  background: white;
  color: #7b32c9;
  box-shadow: 0 0 32px rgba(255,255,255,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(255,255,255,0.45);
}

.cta-subtext {
  text-align: center;
  opacity: 0.8;
  font-size: 0.95rem;
  letter-spacing: 0.1px;

  margin-top: -10px; /* MUCH closer to CTA */
}


/* -------------------------------------------------------------
   MOBILE RESPONSIVE (iPhone at bottom + clean bullets)
---------------------------------------------------------------- */
@media (max-width: 900px) {

  body {
    height: auto;
    padding-top: env(safe-area-inset-top, 30px);
    overflow-y: auto; /* prevent cutting off top */
  }

  .page {
    flex-direction: column;
    gap: 40px;
    padding: 20px;
    text-align: center;
  }

  .content {
    order: 1;
    max-width: 95%;
    align-items: center;
  }

 .content {
    margin-top: 20px; /* ← this is the missing spacing */
  }

  .logo-row {
    margin-top: 10px; /* small internal offset (optional) */
  }

  .iphone-wrapper {
    order: 2;
  }

 .logo-row {
    margin-top: 30px;  /* adjust to taste (10–40px works well) */
  }

  /* MOBILE BULLETS: left aligned but icon stays centered in circle */
  .bullets {
    width: 100%;
    align-items: flex-start;
    gap: 16px;
  }

  .bullets div {
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
  }

  .bullet-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .bullet-icon img {
    width: 20px;
    height: 20px;
  }

  /* MOBILE SIZE ADJUSTMENT */
  .iphone-frame {
    width: 280px;
    height: 580px;
  }
}