:root{
  --bg:#fff; --fg:#0f172a; --muted:#475569;
  --brand:#22c55e; --line:#e2e8f0; --card:#f8fafc;
  --radius:14px;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Naskh Arabic", "Noto Kufi Arabic", Arial, sans-serif;
  background:linear-gradient(160deg, #f1f5f9 0%, #f8fafc 40%, #eefcf4 100%);
  color:var(--fg);
  line-height:1.7;
  min-height:100vh;
}

/* ====== Mobile base ====== */
.topbar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  background:color-mix(in oklab, var(--brand) 14%, #fff 88%);
  color:#064e3b;
  font-weight:600;
  font-size:14px;
  text-align:center;
  flex-wrap:wrap;
}
.topbar__link{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--brand) 60%, transparent);
  color:#064e3b;
  text-decoration:none;
  background:color-mix(in oklab, var(--brand) 18%, transparent);
  transition:background-color .2s ease, transform .2s ease;
}
.topbar__text{
  margin:0;
}
.topbar__link:hover,
.topbar__link:focus-visible{
  background:color-mix(in oklab, var(--brand) 28%, transparent);
  transform:translateY(-1px);
}

.nav{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line);
  background:color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter:saturate(140%) blur(6px);
  flex-wrap:wrap;
}
.brand{
  font-weight:800;
  margin:0;
  text-decoration:none;
  color:var(--fg);
}
.burger{font-size:20px; background:transparent; border:0; padding:6px}
.menu{
  display:none;
  flex-direction:column;
  gap:10px;
  width:100%;
  order:10;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.menu[data-open="true"]{display:flex}
.menu a{color:var(--fg); text-decoration:none; font-weight:700}
.menu a:not(.btn){
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:color-mix(in oklab, var(--card) 92%, transparent);
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
  width:100%;
}
.menu a:not(.btn):hover,
.menu a:not(.btn):focus-visible{
  background:color-mix(in oklab, var(--brand) 18%, transparent);
  border-color:color-mix(in oklab, var(--brand) 40%, var(--line));
}
.btn{display:inline-block; padding:10px 16px; border-radius:999px; border:1px solid var(--line); text-decoration:none; font-weight:700; transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease}
.btn-primary{
  background:var(--brand);
  color:#052e1a;
  border-color:transparent;
  box-shadow:0 14px 30px rgba(34, 197, 94, 0.25);
}
.btn-primary:hover,
.btn-primary:focus-visible{
  background:color-mix(in oklab, var(--brand) 88%, #15803d);
  transform:translateY(-1px);
  box-shadow:0 20px 40px rgba(34, 197, 94, 0.35);
}
.btn-ghost{
  background:transparent;
  color:var(--fg);
  border-color:color-mix(in oklab, var(--line) 50%, transparent);
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  color:#03624b;
  border-color:color-mix(in oklab, var(--brand) 40%, transparent);
  background:color-mix(in oklab, var(--brand) 12%, transparent);
  transform:translateY(-1px);
}

main{padding:32px 16px}
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:center;
  text-align:center;
  padding:24px;
  overflow:hidden;
  background:color-mix(in oklab, #ffffff 94%, var(--card) 6%);
  border:1px solid color-mix(in oklab, var(--line) 55%, transparent);
  border-radius:28px;
  box-shadow:0 24px 60px rgba(15, 23, 42, 0.08);
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:auto -30% -40% -30%;
  height:60%;
  background:radial-gradient(circle at 50% 0%, color-mix(in oklab, var(--brand) 40%, transparent) 0%, transparent 65%);
  z-index:-1;
  opacity:.45;
}
.hero__text h1{font-size:clamp(26px,6vw,38px); margin:12px 0}
.hero__lead{color:var(--muted); margin:0 0 16px}
.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  background:color-mix(in oklab, var(--brand) 20%, #fff);
  color:#047857;
  font-size:14px;
  font-weight:700;
}
.hero__features{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:grid;
  gap:8px;
  font-weight:600;
  color:var(--fg);
}
.hero__features li{
  background:color-mix(in oklab, var(--card) 92%, transparent);
  padding:10px 16px;
  border-radius:var(--radius);
  border:1px solid color-mix(in oklab, var(--line) 70%, transparent);
}
.hero__media{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.hero__media img{
  width:min(90vw,420px);
  height:auto;
  border-radius:24px;
  border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(15, 23, 42, 0.12);
}
.cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}

.card{
  background:color-mix(in oklab, var(--card) 92%, transparent);
  border:1px solid color-mix(in oklab, var(--line) 60%, transparent);
  border-radius:20px;
  padding:24px;
  margin-top:24px;
  box-shadow:0 16px 40px rgba(15, 23, 42, 0.06);
}
.bullets{padding-inline:18px; margin:8px 0}

.grid{display:grid; gap:16px; grid-template-columns:1fr}

.contact .socials{display:flex; flex-wrap:wrap; gap:10px}
.social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:18px;
  text-decoration:none;
  color:#fff;
  font-weight:700;
  text-align:start;
  flex:1 1 auto;
  box-shadow:0 10px 30px rgba(15, 23, 42, 0.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.social:hover,
.social:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(15, 23, 42, 0.12);
}
.social[data-channel="whatsapp"]{background:#25d366}
.social[data-channel="instagram"]{background:linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)}
.social[data-channel="facebook"]{background:#1877f2}
.social[data-channel="tiktok"]{background:#000}
.social[data-channel="email"]{background:#0ea5e9}
.social[data-channel="tiktok"] .social__label{color:#fff}
.social[data-channel="tiktok"] .social__icon{filter:invert(1)}
.social[data-channel="email"] .social__label{color:#fff}
.social[data-channel="instagram"] .social__icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25))}
.social__icon{
  width:24px;
  height:24px;
  flex:0 0 auto;
  object-fit:contain;
}
.social__label{
  line-height:1.2;
  flex:1;
  text-align:center;
}

.footer{
  border-top:0;
  margin-top:48px;
  background:#0f172a;
  color:#e2e8f0;
  padding:32px 16px;
}
.footer__inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.footer__brand{
  font-size:20px;
  font-weight:800;
}
.footer__copy{
  margin:6px 0 0;
  color:color-mix(in oklab, #e2e8f0 70%, #94a3b8);
}
.footer__meta small{
  color:color-mix(in oklab, #e2e8f0 70%, #94a3b8);
}

.videos{display:flex; flex-direction:column; gap:12px}
.videos__intro{color:var(--muted); margin:0}
.videos__player iframe{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:var(--radius);
  background:#000;
}
.videos__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  align-self:flex-start;
}
.videos__icon{
  width:24px;
  height:24px;
  flex:0 0 auto;
  object-fit:contain;
}

.calculator{
  display:grid;
  gap:16px;
  margin-top:24px;
}
.calculator__intro{
  margin:0;
  color:var(--muted);
}
.calculator__media{
  margin:0;
  display:flex;
  justify-content:center;
}
.calculator__media img{
  width:min(100%, 360px);
  height:auto;
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(15, 23, 42, 0.08);
}
.calculator__form{
  display:grid;
  gap:14px;
}
.calculator__field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.calculator__field--inline{
  border:1px dashed var(--line);
  padding:12px;
  border-radius:var(--radius);
}
.calculator__label{
  font-weight:700;
}
.calculator__input{
  padding:12px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#fff;
  font-size:16px;
}
.calculator__input:focus-visible{
  outline:2px solid color-mix(in oklab, var(--brand) 60%, transparent);
  border-color:color-mix(in oklab, var(--brand) 70%, var(--line));
}
.calculator__radio{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
}
.calculator__radio input{
  width:18px;
  height:18px;
}
.calculator__submit{
  justify-self:stretch;
  cursor:pointer;
  padding:14px 18px;
  font-size:18px;
  text-align:center;
  box-shadow:0 12px 30px rgba(34, 197, 94, 0.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.calculator__submit:hover,
.calculator__submit:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 16px 36px rgba(34, 197, 94, 0.35);
}
.calculator__result{
  padding:14px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:color-mix(in oklab, var(--card) 85%, transparent);
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:18px;
  line-height:1.7;
}
.calculator__result-main{
  font-size:clamp(20px, 4vw, 22px);
  font-weight:700;
}
.calculator__result-details{
  font-weight:600;
  color:var(--muted);
}
.calculator__result[data-ready="false"] .calculator__result-details{
  display:none;
}
.calculator__note{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

/* ====== ≥480px ====== */
@media (min-width:480px){
  .menu{
    flex-direction:row;
    align-items:center;
    width:100%;
    margin-top:0;
    padding-top:0;
    border-top:0;
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  .menu a:not(.btn){
    width:auto;
  }
  .social{flex:0 0 calc(50% - 10px)}
}

/* ====== ≥768px ====== */
@media (min-width:768px){
  .nav{justify-content:space-between; flex-wrap:nowrap}
  .burger{display:none}
  .menu{display:flex; width:auto; order:0; gap:14px; flex-wrap:wrap}
  .menu a:not(.btn){
    width:auto;
  }
  .brand{order:1}
  .hero{
    flex-direction:row;
    text-align:start;
    justify-content:space-between;
    padding:48px 48px 48px 56px;
    border-radius:32px;
  }
  .hero::before{
    inset:-40% -20% 20% 35%;
    height:auto;
    transform:skewX(-12deg);
  }
  .hero__text{max-width:520px}
  .hero__features{grid-template-columns:1fr}
  .hero__media img{
    width:360px;
  }
  .grid{grid-template-columns:repeat(2,1fr); gap:20px}
  .footer__inner{
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-end;
  }
}

/* ====== ≥1024px ====== */
@media (min-width:1024px){
  main{max-width:1100px; margin-inline:auto}
  .grid{grid-template-columns:repeat(3,1fr)}
  .hero__features{grid-template-columns:repeat(3,1fr)}
  .hero__features li{text-align:center}
}

@media (min-width:1280px){
  .grid{grid-template-columns:repeat(4,1fr)}
}