/* ===========================
   Szittles Brand Pack (Elementor Pro)
   =========================== */

:root{
  --sz-primary:#00E5FF;
  --sz-secondary:#7B61FF;
  --sz-accent:#FF3DCE;

  --sz-bg:#070A12;
  --sz-surface:#0E1220;
  --sz-surface-2:#121A2A;

  --sz-text:#EAF1FF;
  --sz-muted:#A8B3CF;
  --sz-border:rgba(255,255,255,.10);

  --sz-shadow:0 18px 50px rgba(0,0,0,.45);
}

html, body{
  background: var(--sz-bg);
  color: var(--sz-text);
}

/* Links */
a{ color: var(--sz-primary); }
a:hover{ opacity:.92; }

/* Headings */
h1,h2,h3,h4,h5,h6{
  color: var(--sz-text);
  letter-spacing: -0.02em;
}

/* ===========================
   Elementor helper classes
   Add these in Elementor: Advanced → CSS Classes
   =========================== */

/* Section background helpers */
.sz-surface{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--sz-border);
  border-radius: 18px;
  box-shadow: var(--sz-shadow);
}
.sz-card{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sz-border);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.sz-soft-border{
  border: 1px solid var(--sz-border);
  border-radius: 18px;
}

/* Glow hero */
.sz-glow{
  position: relative;
  overflow: visible;
}
.sz-glow:before{
  content:"";
  position:absolute;
  inset:-140px -60px auto -60px;
  height:320px;
  background: radial-gradient(closest-side,
    rgba(0,229,255,.35),
    rgba(123,97,255,.22),
    rgba(255,61,206,.12),
    transparent 70%
  );
  filter: blur(10px);
  pointer-events:none;
  z-index:0;
}
.sz-glow > *{ position: relative; z-index:1; }

/* Sticky launch bar */
.sz-launchbar{
  background: linear-gradient(90deg, rgba(0,229,255,.16), rgba(123,97,255,.14), rgba(255,61,206,.10));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.sz-launchbar .sz-launchbar__text{
  color: var(--sz-text);
  font-weight: 800;
  letter-spacing: .02em;
}

/* Button styles (apply class on Elementor Button widget) */
.sz-btn .elementor-button,
.elementor-button.sz-btn{
  background: linear-gradient(90deg, var(--sz-primary), var(--sz-secondary), var(--sz-accent)) !important;
  border: 0 !important;
  color: #07101B !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 45px rgba(0,229,255,.12) !important;
  text-transform: none !important;
}
.sz-btn .elementor-button:hover,
.elementor-button.sz-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Outline button */
.sz-outline .elementor-button,
.elementor-button.sz-outline{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  color: var(--sz-text) !important;
  border-radius: 999px !important;
  text-transform: none !important;
}
.sz-outline .elementor-button:hover,
.elementor-button.sz-outline:hover{
  border-color: rgba(255,255,255,.35) !important;
}

/* Kicker text */
.sz-kicker{
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sz-muted);
  font-weight: 800;
  font-size: 12px;
}

/* “Included” pill */
.sz-included{
  display:inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,229,255,.10);
  border: 1px solid rgba(0,229,255,.22);
  color: var(--sz-text);
  font-weight: 900;
  font-size: 12px;
}

/* FAQ accordion readability */
.elementor-accordion .elementor-tab-title{
  color: var(--sz-text) !important;
}
.elementor-accordion .elementor-accordion-item{
  border-color: rgba(255,255,255,.10) !important;
}