:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --txt:rgba(15,23,42,.92);
  --mut:rgba(15,23,42,.62);
  --line:rgba(15,23,42,.12);
  --shadow:0 18px 60px rgba(2,6,23,.10);
  --grad: linear-gradient(135deg,#3b82f6,#7c3aed);
  --brand: rgba(59,130,246,.95);
}

*, *::before, *::after { box-sizing: border-box; }

html[data-theme="dark"]{
  --bg:#0b1220;
  --card:rgba(255,255,255,.06);
  --txt:rgba(255,255,255,.92);
  --mut:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.12);
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --grad: linear-gradient(135deg,#60a5fa,#a78bfa);
  --brand: rgba(96,165,250,.95);
}

body.app{
  margin:0;
  font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--txt);
}
a{color:inherit;text-decoration:none}

.container{max-width:1200px;margin:0 auto;padding:0 18px}
.gradient-bg{background:var(--grad);color:#fff}
.siteMain{
  background: var(--bg);
}
html[data-theme="dark"] .siteMain{
  background: var(--bg);
}
html[data-theme="light"] .siteMain{
  background: var(--bg);
}


/* ===== Header ===== */
.siteHeader.scrolled{
  background:color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 18px rgba(2,6,23,.04);
}
.hRow{height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brandLogo{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  font-weight:900;
}
.brandName{font-weight:900;font-size:18px}
.navDesk{display:none;gap:6px;align-items:center}
@media(min-width:1024px){ .navDesk{display:flex;} .burger{display:none;} }
.navLink{
  padding:10px 12px;border-radius:12px;
  font-weight:800;font-size:13px;
  color:var(--mut);
  transition:.15s;
}
.navLink:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.navLink.active{background:rgba(59,130,246,.12);color:var(--brand)}
.actions{display:flex;align-items:center;gap:10px}
.iconBtn{
  width:42px;height:42px;border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  display:grid;place-items:center;
  cursor:pointer;
  font-size:18px;
}
.btnGrad{
  height:42px;padding:0 14px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad);color:#fff;font-weight:900;
  border:1px solid rgba(255,255,255,.06);
}
.btnSoft{
  height:42px;padding:0 14px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  font-weight:900;color:var(--txt);
}
.ctaDesk{display:none}
@media(min-width:768px){ .ctaDesk{display:inline-flex;} }

.navMobile{
  padding:12px 0 16px;
  border-top:1px solid var(--line);
}
.mLinks{display:flex;flex-direction:column;gap:6px}
.mLink{
  padding:12px 12px;border-radius:14px;
  font-weight:900;color:var(--mut);
  background:rgba(255,255,255,.03);
  border:1px solid transparent;
}
.mLink:hover{border-color:var(--line);color:var(--txt)}
.mLink.active{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.18);color:var(--brand)}
.mActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ===== Main spacing ===== */
.siteMain{ padding-top: var(--hdrH, 72px); }

/* ===== Hero ===== */
.hero{padding:38px 0 26px}
.heroGrid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:1024px){ .heroGrid{grid-template-columns:1.15fr .85fr;gap:22px;} }
.heroTitle{font-size:34px;line-height:1.15;font-weight:900;margin:0 0 10px}
@media(min-width:768px){ .heroTitle{font-size:44px;} }
.heroSub{margin:0 0 16px;color:var(--mut);font-weight:800;max-width:60ch}
.heroBtns{display:flex;gap:10px;flex-wrap:wrap}
.heroCard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:12px;
}
.miniCard{
  display:flex;gap:12px;align-items:center;
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:rgba(255,255,255,.04);
}
.miniIc{
  width:42px;height:42px;border-radius:16px;
  display:grid;place-items:center;
  font-size:18px;
}
.miniCard b{display:block;font-weight:900}
.miniCard span{display:block;color:var(--mut);font-weight:800;margin-top:4px;font-size:13px}

/* ===== Sections ===== */
.section{padding:26px 0}
.secTitle{font-size:22px;margin:0 0 14px;font-weight:900}
.cards3{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){ .cards3{grid-template-columns:repeat(3,1fr);} }
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:16px;
  box-shadow:var(--shadow);
}
.cardIc{font-size:22px}
.card h3{margin:10px 0 6px;font-weight:900}
.card p{margin:0;color:var(--mut);font-weight:800}

/* ===== Footer ===== */
.siteFooter{margin-top:24px;border-top:1px solid var(--line);background:rgba(255,255,255,.03)}
.fGrid{padding:22px 0;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){ .fGrid{grid-template-columns:1.2fr .9fr .9fr;gap:18px} }
.fBrand{display:flex;flex-direction:column;gap:8px}
.fLogo{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;font-weight:900}
.fName{font-weight:900;font-size:18px}
.fDesc{color:var(--mut);font-weight:800;font-size:13px;max-width:52ch}
.fTitle{font-weight:900;margin-bottom:10px}
.fLink{display:block;color:var(--mut);font-weight:800;padding:6px 0}
.fLink:hover{color:var(--txt)}
.fLine{color:var(--mut);font-weight:800;padding:4px 0}
.fBottom{
  padding:12px 0;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  color:var(--mut);font-weight:800;font-size:13px;
}

/* ===== Coming Soon ===== */
.comingWrap{padding:46px 0}
.comingCard{
  max-width:560px;margin:0 auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:26px;
  padding:22px;
  box-shadow:var(--shadow);
  text-align:center;
}
.comingBadge{
  width:56px;height:56px;border-radius:18px;
  display:grid;place-items:center;
  font-weight:900;font-size:22px;
  margin:0 auto 12px;
}
.comingTitle{margin:0 0 8px;font-weight:900;font-size:34px}
.comingSub{margin:0 auto 14px;color:var(--mut);font-weight:800;max-width:46ch}
.comingMsg{
  margin:0 auto 14px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--txt);
  font-weight:800;
}
.countBox{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;margin:14px 0 16px;
}
@media (max-width:520px){
  .countBox{ grid-template-columns:repeat(2,1fr); }
}

.countItem{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:18px;
  padding:10px;
}
.countItem b{display:block;font-size:22px;font-weight:900}
.countItem span{display:block;color:var(--mut);font-weight:800;font-size:12px;margin-top:4px}
.comingActions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ✅ Fix: don't force bg to white in dark mode */
html[data-theme="light"] body.home.app{ --bg:#fefefe; }
html[data-theme="dark"]  body.home.app{ --bg:#0b1220; }

html[data-theme="light"] body.home.app{ background: var(--bg) !important; }
html[data-theme="dark"]  body.home.app{ background: var(--bg) !important; }