:root{
  --bg0:#0b1020;
  --bg1:#0e1630;
  --text:#f5f7ff;
  --muted:rgba(245,247,255,.72);
  --accent:#ff7a18;
  --accent2:#ffb44a;
  --border:rgba(255,255,255,.08);
}

html, body{
  /* background handled by theme */
  /* color handled by theme */
}

.site-header .navbar{
  background: rgba(11,16,32,.65);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.brand-logo{
  width: 34px; height: 34px;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(255,255,255,.08);
  padding: 4px;
}

.btn-accent{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border: 0;
  color: #1a1206;
  font-weight: 800;
}
.btn-accent:hover{ filter: brightness(1.05); color:#1a1206; }

.hero{ padding: 72px 0 18px 0; }
.platform-hero{ padding: 56px 0 12px; }

.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}
.glow-line{
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,122,24,.9), rgba(255,180,74,.9), transparent);
}

.hero-badge{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding: .35rem .65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size: .9rem;
}

.card-soft{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.card-soft .card-body{ padding: 18px; }

.section-title{ font-size: 1.6rem; font-weight: 900; }
.section-subtitle{ color: var(--muted); }

.kpi{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 14px;
}
.kpi .value{ font-size: 1.2rem; font-weight: 900; }
.kpi .label{ color: var(--muted); font-size: .9rem; }

.feature{ display:flex; gap: .9rem; }
.feature i{
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(255,122,24,.14);
  border: 1px solid rgba(255,122,24,.28);
}
.feature .t{ font-weight: 900; }
.feature .d{ color: var(--muted); }

.site-footer{
  background: rgba(0,0,0,.22);
  border-top: 1px solid var(--border);
}
.footer-title{ font-weight: 900; margin-bottom: .7rem; }
.footer-links a{ color: var(--muted); text-decoration: none; }
.footer-links a:hover{ color: var(--text); text-decoration: underline; }

.form-control, .form-select, .form-control:focus{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--text);
}
.form-control::placeholder{ color: rgba(245,247,255,.55); }
.form-label{ color: var(--muted); }

hr{ border-color: var(--border) !important; }


.page-hero-img{width:100%;height:auto;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.04);}
.page-hero-wrap{margin-top:18px;}


/* UI TWEAKS */
.site-header .navbar {
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand-logo {
  width: 52px !important;
  height: 52px !important;
  padding: 6px;
}

/* Lighter background */
html, body {
  /* background handled by theme */
}


/* Floating WhatsApp button */
.whatsapp-float{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(30,215,96,.18);
  border: 1px solid rgba(30,215,96,.35);
  color: #d8ffe9;
  text-decoration: none;
  z-index: 9999;
  backdrop-filter: blur(10px);
}
.whatsapp-float:hover{ filter: brightness(1.06); color:#ffffff; }

/* Trust badges */
.trust-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.trust-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  color: var(--muted);
}
.trust-badge i{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(255,122,24,.14);
  border:1px solid rgba(255,122,24,.28);
  color: #ffd7b3;
}

/* Mobile spacing improvements */
@media (max-width: 576px){
  .hero{ padding: 44px 0 14px 0; }
  .platform-hero{ padding: 36px 0 10px; }
  .hero-card .p-4{ padding: 18px !important; }
  .card-soft .card-body{ padding: 14px; }
  .display-5{ font-size: 2rem; }
  .display-6{ font-size: 1.8rem; }
  .navbar .btn{ width:100%; }
  .whatsapp-float{ right: 16px; bottom: 16px; width: 52px; height: 52px; }
}


/* ================= THEME MODES (FINAL) ================= */

/* LIGHT — clean white */
[data-theme="light"]{
  --bg-main: #f5f7fb;
  --card-bg: #ffffff;
  --text-main: #1a1f36;
  --muted: rgba(26,31,54,.70);
  --border: rgba(26,31,54,.12);
}

/* SOFT — gradient marketing look */
[data-theme="soft"]{
  --bg-main: linear-gradient(180deg, #f9fafc 0%, #eef1ff 100%);
  --card-bg: rgba(255,255,255,0.92);
  --text-main: #1a1f36;
  --muted: rgba(26,31,54,.75);
  --border: rgba(26,31,54,.10);
}

/* DARK — premium */
[data-theme="dark"]{
  --bg-main: radial-gradient(1200px 800px at 10% 0%, rgba(255,122,24,.18), transparent 60%),
             radial-gradient(900px 600px at 90% 10%, rgba(255,180,74,.14), transparent 55%),
             linear-gradient(180deg, #0b1020, #0e1630);
  --card-bg: rgba(255,255,255,.06);
  --text-main: #f5f7ff;
  --muted: rgba(245,247,255,.72);
  --border: rgba(255,255,255,.08);
}

/* APPLY */
html, body{
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
}

.card-soft,
.hero-card,
.kpi{
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
}

.text-white-50{ color: var(--muted) !important; }
.site-header .navbar{ border-bottom: 1px solid var(--border) !important; }
.site-footer{ border-top: 1px solid var(--border) !important; }