/* =========================================================
   ROOT VARIABLES
========================================================= */
:root {
  --bg: #0b0c10;
  --panel: rgba(0,0,0,1);
  --text: #f5f7fa;
  --muted: #a9afbd;

  --purple: #833ab4;
  --pink: #fd1d1d;
  --green: #39FF14;
  --red: #ff2d2d;

  --radius: 26px;

  --border-purple: 1px solid rgba(131, 58, 180, 0.30);
  --border-pink:   1px solid rgba(253, 29, 29, 0.25);
  --border-green:  1px solid rgba(57, 255, 20, 0.25);

  --glow-purple: 0 0 15px rgba(131, 58, 180, 0.15);
  --glow-pink:   0 0 15px rgba(253, 29, 29, 0.15);
  --glow-green:  0 0 18px rgba(57, 255, 20, 0.28);
}

/* =========================================================
   BASE
========================================================= */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(131,58,180,.15), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, rgba(253,29,29,.12), transparent 55%),
    radial-gradient(900px 500px at 70% 120%, rgba(57,255,20,.10), transparent 55%),
    var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

strong, b {
  font-weight: 900;
}

.nowrap {
  white-space: nowrap;
}

/* =========================================================
   LAYOUT
========================================================= */
/* =========================================================
   SECTION CONTENT ALIGNMENT FIX
========================================================= */

/* Any section that is also a neon-frame gets consistent padding */
.section.neon-frame {
  padding: 44px 56px;
}

/* Headings inside sections align cleanly */
.section.neon-frame h2 {
  margin-top: 0;
}


h2.accent-soft-green {
  color: #6909b2cd;
  text-shadow: 0 0 8px rgba(69, 8, 80, 0.4);
}



/* Paragraph spacing inside sections */
.section.neon-frame > p {
  max-width: 900px;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 80px;
}

.section {
  margin-top: 56px;
}

.center {
  text-align: center;
}

/* =========================================================
   NEON FRAMES
========================================================= */
.neon-frame {
  border-radius: var(--radius);
  background: rgba(5, 0, 5, 0.872); 
  position: relative;
}


.neon-frame::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}

.neon-purple {
  border: var(--border-purple);
  box-shadow: var(--glow-purple);
}

.neon-green {
  border: var(--border-green);
  box-shadow: var(--glow-green);
}

.neon-pink {
  border: var(--border-pink);
  box-shadow: var(--glow-pink);
}

/* =========================================================
   HEADER
========================================================= */
.header {
  max-width: 1100px;
  margin: 22px auto 0;
  padding: 18px 22px;
  position: relative;
  z-index: 1000;
}

/* ---------- DESKTOP ---------- */
.header-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo {
  height: 40px;
}

.nav {
  display: flex;
  gap: 14px;
}

.nav a {
  font-size: 14px;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 14px;
}

.nav-pill {
  border: var(--border-green);
  box-shadow: var(--glow-green);
  color: var(--text);
}

/* ---------- MOBILE ---------- */
.header-mobile {
  display: none;
}

.hamburger {
  background: none;
  border: none;
  color: var(--text);
  font-size: 28px;
  cursor: pointer;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: rgba(5,0,5,.95);
  border-top: 1px solid rgba(255,255,255,.08);
}

.mobile-nav.active {
  display: flex;
}


/* =========================================================
   URGENCY BAR (GLOBAL)
========================================================= */
.urgency-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  background: rgba(57, 255, 20, 0.12);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(57, 255, 20, 0.35);
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.25);

  text-align: center;
  padding: 10px 14px;

  font-size: 13px;
  font-weight: 700;
  color: #eaffea;
}

.urgency-bar strong {
  color: #39FF14;
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
}

.header {
  max-width: 1100px;
  margin: 22px auto 0;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-tagline {
  font-size: 13px;
  color: var(--muted);
}
body {
  padding-top: 44px;
}


.nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.nav a {
  font-size: 14px;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 14px;
}

.nav a:hover {
  background: rgba(255,255,255,0.04);
}

.nav-pill {
  border: var(--border-green);
  box-shadow: var(--glow-green);
  color: var(--text) !important;
}

/* =========================================================
   HERO
========================================================= */
.hero {
  margin-top: 26px;
  padding: 70px 46px 44px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 950;
  line-height: 1.05;
  margin: 0 auto;
  max-width: 920px;
}

.accent-red { 
  color: var(--red); 
}

.accent-purple { 
  color: var(--purple);
  text-shadow: 0 0 8px rgba(131, 58, 180, 0.35); /* ✨ optional polish */
}

.accent-soft-green {
  color: #e0efe2;
  text-shadow: 0 0 8px rgba(224, 239, 226, 0.4);
}


.hero-sub {
  margin: 22px auto 0;
  max-width: 900px;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
}

.hero-cta {
  margin-top: 30px;
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-proof {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

.hero-cards {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.mini-card {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mini-card strong {
  font-size: 15px;
}

.mini-card span {
  font-size: 13px;
  color: var(--muted);
}

/* =========================================================
   BUTTONS
========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border-radius: 18px;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn:active {
  transform: translateY(1px);
}

/* --- CTA BREATHING ANIMATION --- */
@keyframes breathe {
  0% {
    transform: scale(1);
    box-shadow: 0 0 18px rgba(57,255,20,0.25);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 28px rgba(57,255,20,0.35);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 18px rgba(57,255,20,0.25);
  }
}

.btn-green {
  background: var(--green);
  color: #071008;
  animation: breathe 3.2s ease-in-out infinite;
}

.btn-outline-purple {
  border: var(--border-purple);
  box-shadow: var(--glow-purple);
  color: var(--text);
}

.btn-outline-green {
  border: var(--border-green);
  box-shadow: var(--glow-green);
  color: var(--text);
}

.btn-white {
  background: #ffffff;
  color: #000000;
  font-weight: 900;
}

.btn-block {
  width: 100%;
  margin-top: 28px;
}

/* =========================================================
   GRIDS & CARDS
========================================================= */
.card,
.mini-card,
.demo-box,
.guarantee {
  background: transparent; /* inherit solid neon-frame */
}

.grid-3 {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.grid-2 {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.card {
  padding: 28px;
}

.card h3 {
  margin-top: 0;
}

.card p,
.card li {
  color: var(--muted);
}

/* =========================================================
   VALUE STACK
========================================================= */
#value.neon-frame {
  padding: 44px 56px 56px;
}

.value-list {
  list-style: none;
  padding: 0;
  margin-top: 32px;
}

.value-list li {
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pricing {
  margin-top: 48px;
  text-align: center;
}

.total {
  font-size: 22px;
  font-weight: 950;
  margin-bottom: 18px;
  color: var(--green);
  text-shadow: 0 0 12px rgba(57, 255, 20, 0.45);
}


.price-line {
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 32px;
}

.price {
  color: #fdfdfd
}

#value .btn {
  background: var(--green);
  color: #071008;
  animation: breathe 3.2s ease-in-out infinite;
}

/* =========================================================
   DEMO / TESTIMONIALS
========================================================= */
.demo-box {
  margin-top: 22px;
  padding: 52px;
  text-align: center;
}

.testimonials blockquote {
  margin: 0;
  padding: 22px;
  font-style: italic;
  color: var(--muted);
}

/* =========================================================
   GUARANTEE
========================================================= */
.guarantee {
  margin-top: 34px;
  padding: 32px;
  text-align: center;
}

.legal-small {
  font-size: 13px;
  color: var(--muted);
}

/* =========================================================
   CONNECT
========================================================= */
#connect.neon-frame {
  padding: 44px 56px;
}

.connect-actions {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.legal {
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* =========================================================
   FADE-IN ON SCROLL
========================================================= */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(.2,.65,.3,1);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   FOOTER
========================================================= */
.footer {
  margin-top: 60px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* =========================================================
   ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .btn-green {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 900px) {
  .hero-cards,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .header {
    flex-direction: column;
    gap: 12px;
  }

  #value.neon-frame,
  #connect.neon-frame {
    padding: 34px 28px 38px;
  }
}
/* =========================================================
   MOBILE OPTIMIZATION (FINAL OVERRIDES)
========================================================= */
@media (max-width: 600px) {

  /* PAGE */
  .page {
    padding: 14px 12px 60px;
  }

@media (max-width: 600px) {
  .urgency-bar {
    font-size: 12px;
    padding: 8px 12px;
  }
}

  /* HEADER */
  @media (max-width: 600px) {
  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
@media (max-width: 600px) {
  .cta-inline {
    margin-top: 28px;
  }

  .cta-inline .btn {
    width: 100%;
    max-width: 360px;
  }
}

  .header-tagline {
    font-size: 12px;
  }
}
/* =========================================================
   INLINE SECTION CTA
========================================================= */
.cta-inline {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  width: 100%;
}


@media (max-width: 600px) {
  .cta-inline {
    margin-top: 28px;
  }

  .cta-inline .btn {
    width: 100%;
    max-width: 360px;
  }
}
.cta-inline .btn-green {
  animation: breathe 3s ease-in-out infinite;
}


  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
  }

  .nav {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .nav a {
    font-size: 13px;
    padding: 6px 10px;
  }

  /* SECTIONS */
  .section,
  .section.neon-frame {
    padding: 28px 18px;
    margin-top: 40px;
  }

  /* HEADINGS */
  h1 {
    font-size: clamp(30px, 9vw, 38px);
    line-height: 1.15;
  }

  h2 {
    font-size: 22px;
    line-height: 1.25;
  }

  /* TEXT */
  p {
    font-size: 15px;
    line-height: 1.6;
  }

  /* HERO */
  .hero {
    padding: 44px 18px 36px;
  }

  .hero-cta {
    flex-direction: column;
    gap: 14px;
  }

  .hero-cta .btn {
    width: 100%;
  }

  /* CARDS */
  .card,
  .mini-card,
  .demo-box,
  .guarantee {
    padding: 22px;
  }

  /* GRIDS */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* VALUE STACK */
  .pricing {
    text-align: center;
  }

  .total {
    font-size: 20px;
  }

  .price-line {
    font-size: 16px;
  }

  /* BUTTONS */
  .btn {
    width: 100%;
    font-size: 15px;
    padding: 16px;
  }

  /* FOOTER */
  .footer {
    font-size: 12px;
    padding: 20px 12px;
  }
  .neon-frame {
  box-shadow: none;
}

.neon-purple,
.neon-green,
.neon-pink {
  box-shadow: none;
}
@media (max-width: 600px) {
  .btn-green {
    font-size: 16px;
    border-radius: 22px;
  }
}

}
/* =========================================================
   FORCE CENTER CTA BUTTON
   This overrides grid/section influences so the CTA truly centers
========================================================= */
.cta-inline {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  margin-top: 32px;
}

/* Make sure the button does not shrink */
.cta-inline .btn {
  flex-shrink: 0;
}

/* Full-width on mobile */
@media (max-width: 600px) {
  .cta-inline .btn {
    width: 100%;
    max-width: 360px;
  }
}


/* Centered brand */
.brand-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


.brand-center .header-tagline {
  font-size: 13px;
  color: var(--muted);
}

/* MOBILE ONLY */
@media (max-width: 900px) {
  .header {
    padding: 20px 16px;
  }

  /* Show mobile header */
  .header-mobile {
    display: flex;
    justify-content: center;
    position: relative;
  }

  /* Hide desktop nav by default */
  .nav {
    display: none;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
    text-align: center;
  }

  /* Show nav when active */
  .nav.open {
    display: flex;
  }
}
.nav {
  transition: all 0.25s ease;
}
/* =========================================================
   HEADER LAYOUT FIX (DESKTOP + MOBILE)
========================================================= */

.header-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.header-mobile {
  display: none;
}


/* Centered brand for mobile */
.brand-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


.header-tagline {
  font-size: 13px;
  color: var(--muted);
}

/* Hide mobile nav by default */
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  text-align: center;
}

/* =========================================================
   MOBILE OVERRIDES
========================================================= */
@media (max-width: 900px) {
  .header-desktop {
    display: none;
  }

  .header-mobile {
    display: flex;
    justify-content: center;
    position: relative;
    padding: 20px 0;
  }

  .mobile-nav.open {
    display: flex;
  }
}
/* =========================================================
   CLEAN HEADER + MOBILE MENU (FINAL OVERRIDE)
========================================================= */

/* Base header */
.header {
  position: relative;
  z-index: 1000;
}

/* ================= DESKTOP ================= */
.header-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-desktop .brand-logo {
  height: 40px;
}

/* ================= MOBILE ================= */

/* Mobile nav hidden by default */
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: rgba(5, 0, 5, 0.95);
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Show mobile nav when open */
.mobile-nav.active {
  display: flex;
}

/* ================= MOBILE BREAKPOINT ================= */
@media (max-width: 900px) {

  /* Hide desktop header */
  .header-desktop {
    display: none;
  }

  /* Show mobile header */
  .header-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 18px 16px;
  }

  /* Center logo */
  .header-mobile .mobile-logo {
    display: flex;
    justify-content: center;
  }

  .header-mobile .brand-logo {
    height: 42px;
  }

  /* Mobile menu links */
  .mobile-nav a {
    text-align: center;
    font-size: 16px;
  }
}
/* ===== FINAL HEADER ALIGNMENT OVERRIDES ===== */

/* Stop .header from being the flex layout container */
.header {
  display: block !important;
}

/* Make the desktop row be the flex container */
.header-desktop {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* Force nav to the far right */
.header-desktop .nav {
  margin-left: auto !important;
}

/* =========================================================
   HEADER – CLEAN SINGLE-LOGO MOBILE + DESKTOP
========================================================= */

/* Base header wrapper */
.header {
  max-width: 1100px;
  margin: 22px auto 0;
  padding: 18px 22px;
  position: relative;
  z-index: 1000;
}

/* ================= DESKTOP ================= */
.header-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-desktop .brand-logo {
  height: 40px;
}

.nav {
  display: flex;
  gap: 14px;
}

/* ================= MOBILE ================= */

/* Hide mobile header by default */
.header-mobile {
  display: none;
}

/* Hamburger */
.hamburger {
  background: none;
  border: none;
  color: var(--text);
  font-size: 28px;
  cursor: pointer;
}

/* Mobile dropdown menu */
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: rgba(5,0,5,0.95);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.mobile-nav.active {
  display: flex;
}

/* ================= MOBILE BREAKPOINT ================= */
@media (max-width: 900px) {

  /* Hide desktop header entirely */
  .header-desktop {
    display: none;
  }

  /* Show mobile header */
  .header-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 18px 16px;
  }

  /* Center logo */
  .header-mobile .brand-logo {
    height: 42px;
  }

  /* Hamburger RIGHT */
  .hamburger {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Mobile nav links */
  .mobile-nav a {
    text-align: center;
    font-size: 16px;
  }
}
/* =========================================================
   FORCE DESKTOP ELEMENTS OFF ON MOBILE
========================================================= */
@media (max-width: 900px) {

  /* Hide desktop header completely */
  .header-desktop {
    display: none !important;
  }

  /* Hide desktop nav if it exists anywhere */
  .header > .nav {
    display: none !important;
  }

}
/* Remove neon borders from Connect section */
#connect.neon-frame {
  border: none !important;
  box-shadow: none !important;
}

#connect.neon-frame::after {
  display: none !important;
}
.neon-frame::after {
  display: none;
}