/* ===== BRAND FOUNDATION ===== */
:root {
  --sd-bg: #05050a;
  --sd-bg-soft: #0b0b12;
  --sd-purple: #7b2cff;
  --sd-purple-2: #a855f7;
  --sd-purple-3: #c084fc;
  --sd-blue: #173fff;
  --sd-white: #ffffff;
  --sd-text: #d7d7e5;
  --sd-text-soft: #b9b9c9;
  --sd-border: rgba(168, 85, 247, 0.22);
  --sd-glow: 0 0 24px rgba(168, 85, 247, 0.45);
  --sd-glow-strong: 0 0 40px rgba(168, 85, 247, 0.75);
  --sd-card-bg: rgba(255,255,255,0.03);
  --sd-glass-bg: rgba(20,10,40,0.35);
}

/* ===== GLOBAL ===== */
html, body {
  background: var(--sd-bg);
  color: var(--sd-white);
}

body, p, li, a, span, div, input, textarea, select, button {
  font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: var(--sd-white);
  letter-spacing: 0.5px;
}

/* smoother visuals */
* {
  box-sizing: border-box;
}

/* ===== TEXT ===== */
p {
  color: var(--sd-text);
  line-height: 1.7;
}

a {
  color: var(--sd-white);
  transition: all 0.25s ease;
}

a:hover {
  color: var(--sd-purple-3);
}

/* ===== SECTION CLEANUP ===== */
.zpsection,
.zprow,
.zpcolumn {
  border: none !important;
}

.zpsection {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* ===== BUTTONS ===== */
button,
.zpelem-button,
a.zpelem-button,
.zpbutton {
  background: linear-gradient(135deg, var(--sd-purple), var(--sd-purple-2)) !important;
  color: var(--sd-white) !important;
  border: 1px solid rgba(192, 132, 252, 0.25) !important;
  border-radius: 10px !important;
  box-shadow: var(--sd-glow) !important;
  padding: 14px 30px !important;
  font-weight: 600 !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
}

button:hover,
.zpelem-button:hover,
a.zpelem-button:hover,
.zpbutton:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: var(--sd-glow-strong) !important;
  filter: brightness(1.06) !important;
}

/* ===== CARDS / CONTENT BLOCKS ===== */
.sd-card,
.zpcolumn .zptext,
.zpcolumn .zpelem-image,
.zpcolumn .zpelem-button {
  position: relative;
  z-index: 1;
}

.sd-glass,
.zpcolumn {
  background: transparent;
}

/* optional premium card helper */
.sd-premium-card {
  background: var(--sd-card-bg) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.12) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 30px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sd-premium-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.24) !important;
  border-color: rgba(192, 132, 252, 0.45) !important;
}

/* ===== HERO POLISH ===== */
.sd-hero h1,
.sd-hero h2 {
  text-shadow: 0 0 14px rgba(168, 85, 247, 0.22);
}

.sd-hero p {
  color: var(--sd-text);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== GLOW TEXT ===== */
.sd-glow-text {
  text-shadow:
    0 0 10px rgba(168, 85, 247, 0.45),
    0 0 24px rgba(168, 85, 247, 0.18);
}

/* ===== IMAGE POLISH ===== */
img {
  max-width: 100%;
  height: auto;
}

.sd-glow-image img,
.zpelem-image img {
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.22));
}

/* ===== FORMS ===== */
input,
textarea,
select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(192,132,252,0.18) !important;
  color: var(--sd-white) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: rgba(192,132,252,0.45) !important;
  box-shadow: 0 0 0 3px rgba(168,85,247,0.12) !important;
}

/* ===== DIVIDERS ===== */
.sd-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(168,85,247,0.45),
    transparent
  );
  margin: 30px 0;
}

/* ===== HEADER / NAV POLISH ===== */
header,
.zpheader {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ===== FOOTER ===== */
footer,
.zpfooter {
  background: #06060d !important;
  color: var(--sd-text-soft) !important;
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
  .zpsection {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  h1 {
    font-size: 40px !important;
    line-height: 1.15 !important;
  }

  h2 {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  button,
  .zpelem-button,
  a.zpelem-button,
  .zpbutton {
    width: auto !important;
    padding: 14px 24px !important;
  }

  .sd-premium-card {
    padding: 22px !important;
  }
}
/* DARK OVERLAY FOR IMAGE SECTIONS */
.sd-overlay {
  background: linear-gradient(
    rgba(5,5,10,0.75),
    rgba(5,5,10,0.85)
  );
  backdrop-filter: blur(2px);
}
.sd-divider {
  width: 2px;
  height: 80px;
  background: linear-gradient(
    to bottom,
    transparent,
    #a855f7,
    #7c3aed,
    transparent
  );
  margin: auto;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.7);
}
/* ===== DARK OVERLAY FOR SECTIONS ===== */
.sd-overlay {
  position: relative;
}

.sd-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 0, 25, 0.65);
  z-index: 0;
}

.sd-overlay * {
  position: relative;
  z-index: 1;
}

/* ===== PREMIUM GLASS CARDS ===== */
.sd-premium-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 30px;
  border: 1px solid rgba(160, 90, 255, 0.25);
  box-shadow: 0 0 25px rgba(123, 47, 247, 0.35);
  transition: all 0.3s ease;
}

.sd-premium-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 45px rgba(168, 85, 247, 0.7);
}

/* ===== GLOW DIVIDER ===== */
.sd-divider {
  width: 2px;
  height: 80px;
  background: linear-gradient(
    to bottom,
    transparent,
    #a855f7,
    #7c3aed,
    transparent
  );
  margin: auto;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.7);
}

/* ===== GLOW BUTTON ===== */
.sd-glow-button {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-radius: 12px;
  padding: 14px 28px;
  color: white !important;
  font-weight: 600;
  border: none;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
  transition: all 0.3s ease;
}
h2 {
  margin-bottom: 15px;
}
.sd-glow-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 35px rgba(192, 132, 252, 0.9);
}
h2 {
  margin-bottom: 15px;
}
h1, h2, h3 {
  text-shadow: 0 0 10px rgba(173, 102, 255, 0.6),
               0 0 20px rgba(173, 102, 255, 0.4);
    
}
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(173, 102, 255, 0.3);
  box-shadow: 0 0 25px rgba(173, 102, 255, 0.25);
  padding: 30px;
}
.glass-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 40px rgba(173, 102, 255, 0.6);
  border: 1px solid rgba(173, 102, 255, 0.6);
  transition: all 0.3s ease;
}
button {
  box-shadow: 0 0 15px rgba(173, 102, 255, 0.7),
              0 0 30px rgba(173, 102, 255, 0.4);
}
.glass-card {
  background: rgba(20, 10, 40, 0.45); /* darker glass */
  backdrop-filter: blur(12px); /* LOWER blur */
  border-radius: 20px;
  border: 1px solid rgba(173, 102, 255, 0.35);
  box-shadow: 0 0 25px rgba(173, 102, 255, 0.25);
  padding: 30px;
}
.glass-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 0 50px rgba(173, 102, 255, 0.7);
  border: 1px solid rgba(173, 102, 255, 0.7);
  transition: all 0.3s ease;
}
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(circle at top left, rgba(173,102,255,0.2), transparent 60%);
  pointer-events: none;
}
h2 {
  text-shadow: 0 0 10px rgba(173,102,255,0.6);
}
.glass-card {
  background: rgba(10, 5, 25, 0.65); /* darker = better contrast */
  backdrop-filter: blur(8px); /* reduce blur more */
  -webkit-backdrop-filter: blur(8px); /* for iPad/Safari */
  
  border-radius: 20px;
  border: 1px solid rgba(173, 102, 255, 0.4);
  
  box-shadow: 
    0 0 20px rgba(173, 102, 255, 0.25),
    inset 0 0 20px rgba(173, 102, 255, 0.1); /* depth */
  
  padding: 30px;
 .glass-card h3 {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(173,102,255,0.6);
}

.glass-card p {
  color: rgba(255,255,255,0.85);
}position: relative;
}
.glass-card:hover {
  transform: translateY(-10px) scale(1.02);
  
  box-shadow: 
    0 0 50px rgba(173, 102, 255, 0.7),
    inset 0 0 30px rgba(173, 102, 255, 0.2);
  
  border: 1px solid rgba(173, 102, 255, 0.7);
  
  transition: all 0.3s ease;
}
.glass-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  border-radius: 20px;
  
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.15),
    transparent
  );
  
  pointer-events: none;
}
.card-divider {
  height: 1px;
  width: 60%;
  margin: 15px 0;
  
  background: linear-gradient(
    to right,
    rgba(173,102,255,0.8),
    rgba(173,102,255,0.2)
  );
  
  box-shadow: 0 0 8px rgba(173,102,255,0.6);
}
.glow-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(173,102,255,0.8),
    transparent
  );
  box-shadow: 0 0 10px rgba(173,102,255,0.7);
  margin: 40px auto;
  width: 70%;
}
/* 🌌 GLASS CARD EFFECT */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 30px;
  transition: all 0.3s ease;
}

/* ✨ HOVER LIFT EFFECT */
.glass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(128, 0, 255, 0.4);
}

/* 💎 TEXT GLOW (HEADINGS) */
.glass-card h2,
.glass-card h3 {
  text-shadow: 0 0 12px rgba(180, 120, 255, 0.8);
}

/* 🌈 DIVIDER LINE */
.lux-divider {
  width: 60px;
  height: 2px;
  margin: 15px auto;
  background: linear-gradient(90deg, #a855f7, #9333ea, #6b21a8);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
}
/* MAIN DIVIDER */
.lux-divide {
  width: 80px;
  height: 2px;
  margin: 18px auto;
  border-radius: 50px;

  background: linear-gradient(
    90deg,
    transparent,
    #a855f7,
    #d8b4fe,
    #a855f7,
    transparent
  );

  box-shadow:
    0 0 8px rgba(168, 85, 247, 0.7),
    0 0 18px rgba(216, 180, 254, 0.5);
}background: linear-gradient(90deg, #e9d5ff, #c084fc, #a855f7);

box-shadow: 0 0 16px rgba(255, 255, 255, 0.6);
.lux-divide-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 12px 0;
}

.lux-divide-stack span {
  display: block;
  height: 2px;
  border-radius: 50px;

  background: linear-gradient(
    90deg,
    transparent,
    #c084fc,
    transparent
  );

  box-shadow: 0 0 10px rgba(192, 132, 252, 0.7);
}

/* sizes (THIS fixes your spacing issue) */
.lux-divide-stack span:nth-child(1) { width: 60px; }
.lux-divide-stack span:nth-child(2) { width: 35px; }
.lux-divide-stack span:nth-child(3) { width: 20px; }
<div class="lux-divide-stack">
  <span></span>
  <span></span>
  <span></span>
.lux-glass {
  background: rgba(20, 10, 40, 0.55); /* darker = better contrast */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 25px rgba(168, 85, 247, 0.25);

  padding: 30px;.lux-title {
  color: #ffffff;
  letter-spacing: 2px;
}

.lux-subtitle {
  color: #d8b4fe;
}

.lux-body {
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}
    .lux-img {
  border-radius: 16px;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.5),
    0 0 20px rgba(168,85,247,0.4);
}
    .lux-row {
  display: flex;
  gap: 40px;
  align-items: center;
}
}