:root{
  --accent:#00fff7;
  --cta1:#ff00b8; --cta2:#7a00ff;
  --bg1:#0a0024; --bg2:#21004f; --bg3:#5a00c9; --bg4:#00eaff;
  --glass:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.15);
}

/* ========== Base ========== */
html,body{margin:0;padding:0;font-family:'Poppins',sans-serif;color:#fff;overflow-x:hidden}
body{
  background:linear-gradient(-45deg,var(--bg1),var(--bg2),var(--bg3),var(--bg4));
  background-size:400% 400%;
  animation:bgShift 20s ease infinite;
}
@keyframes bgShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:url("../images/money.png") repeat;
  background-size:113px 113px;
  opacity:0.45;mix-blend-mode:normal;
  filter:brightness(1.2) contrast(1.6);
}

/* Attention bar */
.attention-bar{
  position:fixed;top:0;left:0;width:100%;z-index:999;
  background:linear-gradient(90deg,#8e2de2,#4a00e0);
  text-align:center;font-weight:700;padding:12px 10px;
  box-shadow:0 3px 15px rgba(0,0,0,.35);
}


/* --- HERO SPACING + WIDTH FIX --- */
.top-hero {
  position: relative;
  text-align: center;
  padding: 85px 20px 60px; /* tighter vertical rhythm */
  background: linear-gradient(to bottom, rgba(0,0,0,0.12) 0%, transparent 100%);
}

/* keep the hero content visually wide but controlled */
.hero-headline {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  line-height: 1.12;
  margin: 8px auto 16px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.6px;
  max-width: 1100px;  /* wider headline body */
}

.hero-headline .gradient {
  background: linear-gradient(90deg, #b5faff 0%, #cfc2ff 50%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(255,255,255,0.35));
}

.hero-headline span {
  display: inline;           /* restores tight flow per line */
  white-space: normal;       /* allows text to wrap naturally */
  word-break: keep-all;
}


/* enlarge subheadline slightly and pull it closer upward */
.subhead-lg {
  font-family: 'Oswald', sans-serif;
  font-size: 1.85rem;
  line-height: 1.65;
  color: #f4f4ff;
  font-weight: 600;
  margin: 0 auto 18px;  /* tighter gap under it */
  max-width: 1000px;
}

.subhead-box {
  margin-top: 18px; /* bring it upward to reduce excess white space */
  display: inline-block;
  background: rgba(255,255,255,0.06);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 28px 36px;
  box-shadow: 0 0 30px rgba(0,0,0,0.4), inset 0 0 12px rgba(255,255,255,0.08);
  max-width: 950px;  /* slightly wider balance box */
}

.subhead-box p {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  color: #f0f0ff;
  line-height: 1.7;
  margin: 0 0 10px;
}
.subhead-box strong {
  color: #ffffff;
}
.subhead-box .blue-tag {
  display: inline-block;
  background: linear-gradient(90deg, #00d0ff, #00fff7);
  color: #fff;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0,255,255,0.6);
  font-size: 1.05rem;
}



/* Split section */
.split{padding:40px 20px 80px}
.split-wrap{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.2fr .8fr;gap:40px;
}
@media(max-width:980px){.split-wrap{grid-template-columns:1fr;gap:28px}}
.video-frame{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  box-shadow:0 0 55px rgba(0,0,0,.55),0 0 45px rgba(122,0,255,.35);
  background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(8px);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bullet-list{list-style:none;padding:0;margin:22px 0 0}
.bullet-list li{display:flex;align-items:flex-start;gap:10px;font-family:'Oswald',sans-serif;font-size:1.08rem;color:#eaeaf7;margin:10px 0;line-height:1.5}
.bullet-list i{color:var(--accent);margin-top:2px}

/* Offer Card */
.offer-card{
  background:var(--glass);border:1px solid var(--border);border-radius:22px;
  padding:28px;backdrop-filter:blur(10px);
  box-shadow:0 0 55px rgba(0,0,0,.5),inset 0 0 25px rgba(255,255,255,.06);
}
.badge{
  display:block;width:100%;text-align:center;font-weight:800;font-size:1rem;
  letter-spacing:.4px;background:#ff477e;color:#fff;padding:10px 0;border-radius:12px;
  margin-bottom:18px;box-shadow:0 0 18px rgba(255,71,126,.6);
}
.offer-title{font-family:'Anton',sans-serif;font-size:1.9rem;margin:6px 0 6px;
  background:linear-gradient(90deg,#fff,#b7fbff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.offer-copy{color:#cfcfe6;margin:0 0 18px}
.cta-btn.big{
  display:block;text-decoration:none;text-align:center;color:#fff;font-weight:800;
  border-radius:16px;padding:18px 28px;
  background:linear-gradient(90deg,var(--cta1),var(--cta2));
  box-shadow:0 0 35px rgba(255,0,184,.55);transition:.25s ease;
}
.cta-btn.big:hover{transform:translateY(-3px)scale(1.02);box-shadow:0 0 60px rgba(255,0,184,.8)}
.share-line{font-size:.92rem;color:#bdbde0;margin:4px 0 14px}
.mini-points{list-style:none;padding:0;margin:10px 0 0}
.mini-points li{display:flex;gap:10px;align-items:center;color:#e9e9ff;margin:8px 0;font-size:.98rem}
.mini-points i{color:#ffe28a}

/* Features */
.features{padding:70px 20px;background:rgba(255,255,255,.05);text-align:center}
.features-inner{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;justify-content:center}
.feature{
  flex:1 1 250px;background:rgba(255,255,255,.08);
  border:1px solid var(--border);border-radius:18px;padding:30px 25px;
  box-shadow:0 0 40px rgba(0,0,0,.4),inset 0 0 15px rgba(255,255,255,.06);
  backdrop-filter:blur(8px);transition:transform .3s,box-shadow .3s;
}
.feature:hover{transform:translateY(-6px);box-shadow:0 0 60px rgba(0,255,247,.5)}
.feature i{font-size:2rem;color:var(--accent);margin-bottom:12px}
.feature h3{font-family:'Oswald',sans-serif;margin:6px 0 8px;font-size:1.3rem}
.feature p{color:#cfcfe6;font-size:.95rem}

/* Footer */
.footer{text-align:center;padding:40px 20px;font-size:.9rem;color:#aaa}


.error-box {
  max-width: 600px;
  margin: 180px auto;
  padding: 50px 30px;
  text-align: center;
  border-radius: 22px;
  background: rgba(255, 60, 60, 0.08);
  border: 1px solid rgba(255, 120, 120, 0.4);
  box-shadow: 0 0 50px rgba(255, 80, 80, 0.3);
  color: #fff;
}
.error-box i {
  font-size: 3rem;
  color: #ff9a9a;
  margin-bottom: 10px;
}
.error-box h2 {
  font-family: 'Anton', sans-serif;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.error-box p {
  font-family: 'Poppins', sans-serif;
  color: #f0f0f0;
  margin-bottom: 25px;
  font-size: 1.05rem;
}

/* ==============================
   DEMO WATERMARK – vivid version
============================== */
.demo-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: clamp(2.4rem, 6.5vw, 4.5rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.25); /* brighter core text */
  text-transform: uppercase;
  z-index: 9999;
  text-align: center;
  pointer-events: none;
  user-select: none;
  line-height: 1.3;
  letter-spacing: 2px;
  text-shadow:
    0 0 8px rgba(0, 255, 255, 0.5),
    0 0 18px rgba(122, 0, 255, 0.4),
    0 0 28px rgba(255, 255, 255, 0.2);
  mix-blend-mode: screen; /* brighter on dark backgrounds */
  opacity: 0.8; /* makes sure the glow shows through */
  filter: blur(0.3px);
}

.demo-watermark small {
  display: block;
  font-size: 1rem;
  opacity: 0.85;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow:
    0 0 6px rgba(0, 255, 255, 0.4),
    0 0 10px rgba(255, 255, 255, 0.3);
}