/* ─── CSS VARIABLES — light default ─── */
:root {
  --bg-page:        #FAFAFA;
  --bg-section:     #FFFFFF;
  --bg-section-alt: #F8F4FF;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #F8F4FF;
  --border:         rgba(123,53,193,0.12);
  --border-hover:   rgba(123,53,193,0.35);
  --text-primary:   #1A0A2E;
  --text-secondary: #4A3065;
  --text-muted:     #8B6EA8;
  --text-on-accent: #FFFFFF;
  --nav-bg:         rgba(255,255,255,0.85);
  --nav-border:     rgba(123,53,193,0.15);
  --input-bg:       #F8F4FF;
  --input-border:   rgba(123,53,193,0.2);
  --shadow:         0 4px 24px rgba(123,53,193,0.10);
  --shadow-card:    0 2px 12px rgba(123,53,193,0.08);
}
[data-theme="dark"] {
  --bg-page:        #0D0818;
  --bg-section:     #130F22;
  --bg-section-alt: #100C1E;
  --bg-card:        #1C1530;
  --bg-card-hover:  #241D3A;
  --border:         rgba(168,85,247,0.15);
  --border-hover:   rgba(168,85,247,0.40);
  --text-primary:   #F0E8FF;
  --text-secondary: #C4A8E8;
  --text-muted:     #8B7AAA;
  --nav-bg:         rgba(13,8,24,0.90);
  --nav-border:     rgba(168,85,247,0.20);
  --input-bg:       #1C1530;
  --input-border:   rgba(168,85,247,0.25);
  --shadow:         0 4px 24px rgba(0,0,0,0.4);
  --shadow-card:    0 2px 12px rgba(0,0,0,0.3);
}

*  { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  transition: background 0.4s ease, color 0.4s ease;
}

/* ─── Gradient accent ─── */
.grad-text {
  background: linear-gradient(135deg, #7B35C1 0%, #D4359A 50%, #E8A020 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-bg {
  background: linear-gradient(135deg, #7B35C1 0%, #D4359A 55%, #E8A020 100%);
}
.grad-bg-soft {
  background: linear-gradient(135deg, rgba(123,53,193,0.08) 0%, rgba(212,53,154,0.06) 100%);
}

/* ─── Navbar ─── */
#navbar {
  background: var(--nav-bg);
  border-bottom: 1px solid transparent;
  transition: all 0.35s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#navbar.scrolled { border-bottom-color: var(--nav-border); box-shadow: var(--shadow-card); }

/* ─── Spark particles ─── */
.spark-field { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.spark {
  position:absolute; bottom:0; border-radius:2px;
  animation: sparkrise linear infinite; opacity:0;
}
@keyframes sparkrise {
  0%   { transform:translateY(0) scaleY(1); opacity:0; }
  8%   { opacity:1; }
  85%  { opacity:0.7; }
  100% { transform:translateY(-105vh) scaleY(2.5); opacity:0; }
}

/* ─── Fog ─── */
.fog-layer {
  position:absolute; bottom:0; left:-15%; width:130%; height:180px;
  background: radial-gradient(ellipse 80% 100% at 50% 100%,
    rgba(123,53,193,0.12) 0%, rgba(212,53,154,0.06) 45%, transparent 100%);
  animation: fogdrift 9s ease-in-out infinite alternate;
  pointer-events:none;
}
[data-theme="dark"] .fog-layer {
  background: radial-gradient(ellipse 80% 100% at 50% 100%,
    rgba(123,53,193,0.22) 0%, rgba(212,53,154,0.10) 45%, transparent 100%);
}
@keyframes fogdrift { from{transform:translateX(0) scaleX(1)} to{transform:translateX(2.5%) scaleX(1.05)} }

/* ─── Reveal on scroll ─── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ─── Card ─── */
.se-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  box-shadow: var(--shadow-card);
}
.se-card:hover { transform:translateY(-4px); border-color:var(--border-hover); box-shadow:var(--shadow); }

/* ─── Buttons ─── */
.btn-primary {
  background: linear-gradient(135deg, #7B35C1, #D4359A);
  color: #fff;
  border-radius: 999px;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  position:relative; overflow:hidden;
}
.btn-primary::after {
  content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:left 0.5s;
}
.btn-primary:hover::after { left:160%; }
.btn-primary:hover { opacity:0.92; transform:translateY(-1px); box-shadow:0 6px 24px rgba(123,53,193,0.35); }

.btn-outline {
  border: 1.5px solid rgba(123,53,193,0.4);
  color: #7B35C1;
  border-radius: 999px;
  background: transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
[data-theme="dark"] .btn-outline { color:#A855F7; border-color:rgba(168,85,247,0.4); }
.btn-outline:hover { background:rgba(123,53,193,0.08); border-color:#7B35C1; }

/* ─── Theme toggle ─── */
.theme-toggle {
  width:52px; height:28px; border-radius:999px;
  background: linear-gradient(135deg,#7B35C1,#D4359A);
  position:relative; cursor:pointer; border:none;
  transition: background 0.3s;
  flex-shrink:0;
}
.theme-toggle::after {
  content:''; position:absolute;
  top:3px; left:3px;
  width:22px; height:22px; border-radius:50%;
  background:#fff;
  transition:transform 0.3s ease;
  display:flex; align-items:center; justify-content:center;
}
[data-theme="dark"] .theme-toggle::after { transform:translateX(24px); }

/* ─── FAQ ─── */
.faq-body { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.faq-item.open .faq-body { max-height:300px; }
.faq-icon { transition:transform 0.3s ease; display:inline-block; }
.faq-item.open .faq-icon { transform:rotate(45deg); }

/* ─── Section label ─── */
.sec-label {
  font-size:11px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase;
  background:linear-gradient(135deg,#7B35C1,#D4359A);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ─── Divider ─── */
.grad-line {
  height:2px; width:48px; border-radius:2px;
  background:linear-gradient(90deg,#7B35C1,#D4359A,#E8A020);
  display:inline-block;
}

/* ─── Inputs ─── */
input,textarea,select {
  background:var(--input-bg); border:1.5px solid var(--input-border);
  color:var(--text-primary); border-radius:12px;
  transition:border-color 0.2s, box-shadow 0.2s;
}
input::placeholder, textarea::placeholder { color:var(--text-muted); opacity:0.6; }
input:focus, textarea:focus, select:focus {
  outline:none;
  border-color:#7B35C1;
  box-shadow:0 0 0 3px rgba(123,53,193,0.12);
}
select option { background:var(--bg-card); color:var(--text-primary); }

/* ─── Mobile menu ─── */
#mobile-menu { max-height:0; overflow:hidden; transition:max-height 0.4s ease, opacity 0.3s; opacity:0; }
#mobile-menu.open { max-height:400px; opacity:1; }

/* ─── Hero radial glow ─── */
.hero-glow {
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 70% 60% at 50% 60%,
    rgba(212,53,154,0.08) 0%, rgba(123,53,193,0.06) 40%, transparent 70%);
}
[data-theme="dark"] .hero-glow {
  background: radial-gradient(ellipse 70% 60% at 50% 60%,
    rgba(212,53,154,0.18) 0%, rgba(123,53,193,0.14) 40%, transparent 70%);
}

/* ─── Badge ─── */
.badge-popular {
  background:linear-gradient(135deg,#7B35C1,#D4359A);
  color:#fff; font-size:11px; font-weight:600;
  padding:3px 14px; border-radius:999px; letter-spacing:0.04em;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg-page); }
::-webkit-scrollbar-thumb { background:linear-gradient(#7B35C1,#D4359A); border-radius:3px; }

/* ─── floating WA ─── */
.wa-float {
  position:fixed; bottom:24px; right:24px; z-index:50;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,0.4);
  transition:transform 0.2s, box-shadow 0.2s;
}
.wa-float:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,0.5); }

@keyframes fadeUp {
  from{opacity:0;transform:translateY(20px)}
  to  {opacity:1;transform:translateY(0)}
}
.hero-anim-1{animation:fadeUp 0.8s 0.2s both}
.hero-anim-2{animation:fadeUp 0.8s 0.45s both}
.hero-anim-3{animation:fadeUp 0.8s 0.65s both}
.hero-anim-4{animation:fadeUp 0.8s 0.85s both}
.hero-anim-5{animation:fadeUp 0.8s 1.05s both}