/* --- Brand Colors --- */
:root {
  --primary-accent: #E800E7;
  --gradient-start: #FF51EB;
  --gradient-end: #A020F0;
  --primary-button-text: #FFFFFF;
  --theme-blue: #1479EC;
  --theme-cyan: #0CEAD9;
  --theme-light-accent: #FFF5EE;
  --theme-dark-accent: #16181D;
  --body-bg: #FAF7F5;
  --body-text: #313647;
  --callout-bg: #D78FEE;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--body-text);
  background: radial-gradient(circle at top left, #FFF3F0, #FFFCF5, #FFEDED);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.5rem 1rem;border-radius:.5rem;z-index:1000}

h1,h2,h3{
  font-family:'Playfair Display','Nunito',sans-serif;
  font-weight:800;
  margin:0 0 .6rem;
  line-height:1.2;
  background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.container{max-width:1100px;margin:0 auto;padding:0 1.25rem}
.section{padding:4rem 0;text-align:center}
.section:nth-of-type(even){background:transparent}
.section-headline{font-size:2rem;margin-bottom:2rem;border-bottom:3px solid var(--primary-accent);display:inline-block;padding-bottom:.5rem}

.hero{background:transparent;padding:4.5rem 0 2rem;text-align:center}
.hero-logo{width:180px;max-width:60vw;height:auto;margin:0 auto 1.25rem;display:block}
.headline{font-size:2.4rem}
.headline .accent{color:var(--primary-accent)}
.sub-headline{max-width:800px;margin:1rem auto 2rem;font-size:1.15rem}
.cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem}
.device-mock img{width:min(420px,95vw);height:auto;border-radius:1rem;
  padding:1rem 1.5rem;
  border-radius:.6rem;
  text-decoration:none;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border:3px solid transparent;
}
.primary-cta{background:var(--primary-accent);color:var(--primary-button-text);border-color:var(--primary-accent)}
.primary-cta:hover{transform:translateY(-1px)}
.secondary-cta{background:transparent;border-color:var(--primary-accent);color:var(--primary-accent)}
.secondary-cta:hover{background:var(--primary-accent);color:var(--primary-button-text)}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.25rem;
  margin-top:1.5rem;
}
.feature-card{
  background:var(--card);
  padding:1.25rem;
  border-radius:.75rem;
  text-align:left;
  
  
}
.feature-card h3{color:var(--primary-accent);border-bottom:2px solid var(--primary-accent);padding-bottom:.35rem;margin-top:0}

.screens{display:flex;gap:1rem;justify-content:center;align-items:flex-start;margin-top:1.5rem;flex-wrap:wrap}
.screens img{width:min(360px,90vw);border-radius:1rem;gap:1.25rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}

.badge{
  display:inline-block;
  background:var(--primary-accent);
  color:#fff;
  padding:.25rem .5rem;
  border-radius:.5rem;
  font-size:.8rem;
  margin-right:.4rem;
}
.best-value{border:4px solid var(--primary-accent);background:var(--body-bg)}
.price{font-size:2.25rem;color:var(--primary-accent);margin:.25rem 0 1rem}
.one-time{font-size:.9rem;color:#555}
.price-option ul{list-style:none;padding:0;margin:0 0 1rem;text-align:center}
.price-option li{margin:.5rem 0}
.check{color:var(--primary-accent);font-weight:900;margin-right:.4rem}
.cross{color:#a55}
.small.muted{color:#666;margin-top:.5rem}
.tiny.note{font-size:.85rem;color:#555;margin-top:1rem}

.guarantee{margin-top:1rem;font-weight:700}
.faq{max-width:760px;margin:2rem auto 0;text-align:left}
details{background:#fff;border:1px solid var(--primary-accent);border-radius:.6rem;padding:1rem;margin:.5rem 0}
summary{cursor:pointer;font-weight:800}
details p{margin:.5rem 0 0;padding-top:.5rem;border-top:1px dashed var(--primary-accent)}

footer{text-align:center;padding:1.25rem;background:#3D2B3D;color:#fff;font-size:.9rem}
footer a{color:var(--primary-accent)}

@media (max-width:768px){
  .headline{font-size:2rem}
  .sub-headline{font-size:1.05rem}
}


/* --- Pricing Table Layout Fix (2025-10-26) --- */
.pricing-table {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  flex-wrap: nowrap;
  margin-top: 2rem;
}

.price-option {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.25s ease;
}

.price-option:hover {
  transform: translateY(-4px);
}

@media (max-width: 768px) {
  .pricing-table {
    flex-direction: column;
    gap: 1.5rem;
  }
}


/* --- Phone mockups: vertical centering & equal heights (2025-10-26) --- */
.device-mock { display:flex; justify-content:center; align-items:center; margin: 1.25rem 0 0; }
.device-mock img {
  display:block;
  height: clamp(420px, 48vh, 560px);
  width: auto;
  margin: 0 auto;
}

.screens { display:flex; justify-content:center; align-items:center; gap: 1.5rem; flex-wrap: wrap; }
.screens img {
  display:block;
  height: clamp(420px, 46vh, 540px); /* equal visual height for the pair */
  width: auto;
  border-radius: 1rem;
  /* no box-shadow per user's request */
}

/* Ensure section content is nicely centered without jumping */
.hero .container,
.features .container { display:block; }

@media (max-width: 900px) {
  .device-mock img,
  .screens img {
    height: auto;          /* let images size naturally */
    max-width: min(420px, 92vw);
  }
}
.hero-logo {
  border-radius: 20px;       /* soften corners */
  overflow: hidden;          /* clips any square edges */
  display: inline-block;
}

.final-cta-faq .cta,
.final-cta-faq .guarantee {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 400px; /* Optional: to control the width of the button and text */
}

.large-cta {
  font-size: 1.5rem;
  padding: 1.2rem 2rem;
  border-radius: 50px; /* Added for rounded corners */
  -webkit-animation: pulse 2s infinite;
  animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 0, 231, 0.7);
  }
  70% {
    box-shadow: 0 0 10px 20px rgba(232, 0, 231, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(232, 0, 231, 0);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 0, 231, 0.7);
  }
  70% {
    box-shadow: 0 0 10px 20px rgba(232, 0, 231, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(232, 0, 231, 0);
  }
}

.about-creator {
  background-color: var(--theme-light-accent);
}

.creator-photo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.5rem auto; /* Centered horizontally, with bottom margin */
  display: block; /* Ensures margin: auto works for centering */
}