:root{
  --accent-3d: linear-gradient(135deg,#0D3444 0%, #0f4b5a 40%, #D4AF37 100%);
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
  --float-duration: 8s;
  --float-ease: cubic-bezier(.22,.9,.36,1);
}

/* Hero 3D / cinematic look */
.hero{
  position:relative;
  overflow:visible;
  color:var(--text, #FDFCF3);
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding:4.5rem 0;
}

.hero .wrap{position:relative;z-index:5}

/* frosted glass panels for cards */
.hero-card, .tier-card, .payment-card, .payment-card.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid var(--glass-border);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 10px 30px rgba(13,52,68,0.45), 0 2px 6px rgba(0,0,0,0.5);
  border-radius:14px;
}

/* Floating shapes */
.hero .floating-shape{
  position:absolute;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45));
  mix-blend-mode: screen;
  opacity:.95;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

.floating-shape.shape-1{width:360px;height:360px;border-radius:48%;background:radial-gradient(circle at 30% 30%, rgba(212,175,55,0.85), rgba(15,75,90,0.85));left:-8%;top:6%;animation:float-1 var(--float-duration) var(--float-ease) infinite}
.floating-shape.shape-2{width:320px;height:320px;border-radius:44%;background:radial-gradient(circle at 70% 70%, rgba(255,255,255,0.06), rgba(13,52,68,0.18));right:-6%;top:26%;animation:float-2 calc(var(--float-duration) * 1.15) var(--float-ease) infinite}
.floating-shape.shape-3{width:220px;height:220px;border-radius:40%;background:conic-gradient(from 120deg at 50% 50%, rgba(212,175,55,0.7), rgba(15,75,90,0.6));left:10%;bottom:-8%;animation:float-3 calc(var(--float-duration) * 0.9) var(--float-ease) infinite}

@keyframes float-1{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-28px) rotate(6deg)}100%{transform:translateY(0) rotate(0deg)}}
@keyframes float-2{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(-4deg)}100%{transform:translateY(0) rotate(0deg)}}
@keyframes float-3{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-34px) rotate(12deg)}100%{transform:translateY(0) rotate(0deg)}}

/* Accent CTA treatment */
.btn.btn-primary{background:var(--accent-3d);color:var(--bg, #081f27);box-shadow:0 8px 24px rgba(13,52,68,0.45);border:none}

/* Subtle 3D lift on hover */
.btn:hover{transform:translateY(-4px);transition:transform .24s ease}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .floating-shape{animation:none!important}
  .btn:hover{transform:none}
}

/* Make sure text remains readable */
.hero-title, .hero-subtitle, .hero-copy .hero-title, .hero .eyebrow{color:var(--text, #FDFCF3)}
 /* Divider visual fix — subtle, premium, never harsh black */
.divider{
  position: relative;
  background: transparent !important;
  overflow: visible;
  margin-top: 0;
  padding: 0.2rem 0;
  height: 72px;
  border: none !important;
  box-shadow: none !important;
}

.divider svg {
  display: none !important;
}

.divider::before{
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,175,55,0.95) 16%,
    rgba(84,196,201,0.7) 50%,
    rgba(212,175,55,0.95) 84%,
    transparent 100%);
  opacity: 0.95;
}

.divider::after{
  content: "♥";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0);
  border: 1px solid rgba(212,175,55,0.8);
  border-radius: 50%;
  color: rgba(212,175,55,0.96);
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: none;
  animation: divider-heart-pulse 3.2s ease-in-out infinite;
}

@keyframes divider-heart-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* subtle parallax of the svg stroke for depth */
@keyframes divider-sweep{
  0%{ left: -40%; opacity:0}
  10%{ opacity:0.9 }
  50%{ left: 70%; opacity:0.9 }
  90%{ opacity:0 }
  100%{ left: 120%; opacity:0 }
}

@media (prefers-reduced-motion: reduce){
  .divider::after,
  .divider::before{ animation: none !important; filter: none !important; opacity: 1; }
  .divider svg path{ filter: none; transition: none; }
}

@media (prefers-color-scheme: dark), body.dark {
  .divider {
    background: transparent;
    margin-top: 0;
    padding: 0.2rem 0;
  }

  .divider svg path {
    stroke: rgba(255,255,255,0.12) !important;
    opacity: 0.8 !important;
    filter: blur(0.2px) contrast(0.96);
  }

  .divider::before{
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(212,175,55,0.55) 15%,
      rgba(255,255,255,0.18) 50%,
      rgba(212,175,55,0.55) 85%,
      transparent 100%);
  }

  .divider::after{
    background: linear-gradient(135deg, rgba(12,28,36,0.96), rgba(28,53,63,0.9));
    border-color: rgba(255,255,255,0.14);
  }
}