/* === Base reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;color:#fff;line-height:1.4;min-height:100vh;}

/* Background photo */
.hero-bg{
  position:fixed;inset:0;
  background:url('background.jpg') no-repeat center/cover;
  z-index:-2;
}
/* Dark overlay */
body::before{
  content:"";position:fixed;inset:0;
  background:rgba(0,0,0,.6);z-index:-1;
}

/* Central column */
.page-container{
  width:100%;max-width:900px;
  margin-inline:auto;
  padding:2rem 1rem 4rem;
  display:flex;flex-direction:column;gap:3rem;
  backdrop-filter:none;
}

/* Each content block shares same translucent backdrop */
.header-box,
.tool-section,
.domain-sale{
  background:rgba(0,0,0,.65);
  padding:2rem 1.5rem;
  border-radius:12px;
}

/* Header styling */
.turn-text{color:#3492ff;font-weight:bold;margin-bottom:.25rem}
.main-heading{font-size:clamp(2rem,6vw,3rem);margin:.25rem 0;text-shadow:0 2px 4px rgba(0,0,0,.6);}
.subheader{font-size:1.1rem;text-align:center}

/* Quiz */
.question{margin-bottom:1.25rem}
.question h3{font-size:1.1rem;margin-bottom:.5rem}
select{width:100%;padding:.75rem;border-radius:6px;border:none;font-size:1rem}
.primary-btn{
  display:block;width:100%;padding:1rem;font-size:1.2rem;
  background:#ffd700;color:#000;border:none;border-radius:8px;cursor:pointer;
  margin-top:.5rem;
}
.primary-btn:hover{opacity:.9}
#result-heading{margin-top:1rem;text-align:center}
#result-text{margin-top:.5rem;text-align:center}

/* Sales section */
.domain-sale h2:first-child{font-size:clamp(1.8rem,5vw,2.4rem);margin-bottom:1rem;text-align:center}
.features{list-style:none;margin-left:0;margin-bottom:1.5rem;font-size:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.price-tag{font-size:1.6rem;margin-bottom:.5rem;text-align:center}
.cta-buttons{display:flex;gap:1rem;justify-content:center;margin:1rem 0}
.btn{padding:.8rem 1.4rem;border-radius:6px;text-decoration:none;font-weight:bold}
.buy{background:#ffd700;color:#000}
.contact{background:#777;color:#fff}
.note{text-align:center;font-size:.8rem;margin-top:1rem;opacity:.8}

/* Mobile tweaks */
@media(max-width:480px){
  .page-container{padding:1.5rem .75rem}
  .header-box,.tool-section,.domain-sale{padding:1.5rem}
  .main-heading{font-size:2rem}
}


/* === Rolling yellow gradient effect on heading === */
@keyframes glow-scroll{
  0%{background-position:0 50%;}
  100%{background-position:200% 50%;}
}
.main-heading{
  background:linear-gradient(90deg,#ffd700 0%, #fff 50%, #ffd700 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:glow-scroll 4s linear infinite;
}

/* Center text inside header box */
.header-box{ text-align:center; }

/* Ensure confetti canvas covers screen */
#confetti-canvas{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
}

/* Keep "It's Your Turn" left while headline centers */
.header-box{ text-align:center; position:relative; }
.turn-text{ position:absolute; left:0; top:0; transform:translateY(-100%); text-align:left; width:100%; padding-bottom:.5rem;}


/* Neat styling for action steps */
.action-steps {
  margin-top: 1em;
  padding-left: 1em;
  border-left: 3px solid #ffb800;
  font-size: 1rem;
  line-height: 1.6;
}

.action-steps strong {
  display: block;
  margin-bottom: 0.5em;
  font-size: 1.1rem;
}


/* Pop-out card for result */
.result-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #222;
  color: white;
  border: 3px solid #ffd700;
  border-radius: 12px;
  padding: 2em;
  max-width: 90%;
  width: 400px;
  z-index: 999;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  display: none;
}

.result-modal.show {
  display: block;
  animation: fadeInPop 0.4s ease-out forwards;
}

@keyframes fadeInPop {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.result-modal h2 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.result-modal .action-steps {
  margin-top: 1em;
  padding-left: 1em;
  border-left: 3px solid #ffb800;
}

.result-modal .action-steps ol {
  padding-left: 1em;
  margin: 0;
}


/* Neat stacked layout for action steps */
#result-text .action-steps {
  margin-top: 1em;
  padding-left: 1.5em;
  border-left: 4px solid #ffcc00;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
}

#result-text .action-steps strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.5em;
}

#result-text .action-steps ol {
  padding-left: 1.2em;
  margin: 0;
}

#result-text .action-steps ol li {
  margin-bottom: 0.4em;
}


/* Fix action steps number alignment */
#result-text .action-steps ol {
  list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
  text-align: left;
  max-width: 95%;
  margin: 0 auto;
}

#result-text .action-steps ol li {
  padding-left: 0.5em;
  text-indent: -0.5em;
  margin-bottom: 0.6em;
  line-height: 1.5;
}


/* Final fix: make list numbers vertically aligned */
#result-text .action-steps ol {
  list-style-position: outside;
  padding-left: 1.5em;
  margin-left: 0;
  text-align: left;
}

#result-text .action-steps ol li {
  margin-bottom: 0.6em;
  line-height: 1.5;
  padding-left: 0.5em;
  text-indent: 0;
}