:root{
  --or:#e8741a; --or-d:#c75d0a; --yl:#ffb81c; --navy:#14307a; --navy-d:#0c1f55;
  --wa:#1fa855; --wa-d:#168a45;
  --ink:#1b2236; --muted:#5b6478; --bg:#fff; --alt:#fff6ea; --line:#f0dfc8;
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Tajawal',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.8;font-size:17px;padding-bottom:70px}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.narrow{max-width:780px}
.center{text-align:center}
.muted{color:var(--muted);margin:.2rem 0 1rem}
.tiny{font-size:.85rem;color:var(--muted);margin:.6rem 0 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem 1.3rem;border-radius:999px;border:0;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-wa{background:var(--wa);color:#fff}.btn-wa:hover{background:var(--wa-d)}
.btn-call{background:var(--navy);color:#fff}.btn-call:hover{background:var(--navy-d)}
.btn-light{background:#fff;color:var(--or-d)}
.btn-ghost{background:transparent;color:#fff;border:2px solid #fff}
.btn-sm{padding:.4rem .9rem;font-size:.95rem}
.btn-lg{padding:.95rem 1.8rem;font-size:1.1rem}
.btn-block{width:100%}

/* topbar */
.topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.brand{display:flex;align-items:center}
.brand img{display:block;height:46px;width:auto}
.nav{display:flex;gap:18px;font-weight:700}
.nav a{text-decoration:none;color:var(--navy)}
.nav a:hover{color:var(--or)}
.topbar-actions{display:flex;gap:.5rem}

/* hero */
.hero{background:linear-gradient(135deg,var(--or) 0%,var(--or-d) 55%,#a94a05 100%);color:#fff;padding:36px 0 48px}
.hero-in{display:grid;gap:28px;grid-template-columns:1.2fr 1fr;align-items:center}
.badge{display:inline-block;background:rgba(255,255,255,.18);padding:.25rem .9rem;border-radius:999px;font-size:.9rem;margin-bottom:.8rem}
.hero h1{font-size:2.5rem;line-height:1.35;margin:.2rem 0 .8rem;font-weight:800}
.hl{color:var(--yl)}
.lead{font-size:1.15rem}
.ticks{list-style:none;padding:0;margin:1rem 0}
.ticks li{padding-inline-start:1.8rem;position:relative;margin:.3rem 0}
.ticks li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--yl);font-weight:800}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.cta-row.jc{justify-content:center}
.note{font-size:.95rem;opacity:.95;margin-top:.8rem}

/* cards & form */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:0 6px 20px rgba(0,0,0,.07)}
.form{color:var(--ink)}
.form h2{margin:0;font-size:1.4rem;color:var(--navy)}
.form label{display:block;font-weight:700;margin:.7rem 0;font-size:.95rem}
.form input,.form select{width:100%;margin-top:.25rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.form input:focus,.form select:focus{outline:2px solid var(--or);border-color:transparent}

/* strip */
.strip{background:var(--yl);color:#3a2600}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding:14px 16px;gap:8px}
.strip strong{display:block;font-size:1.2rem}
.strip span{font-size:.85rem}

/* sections */
.section{padding:56px 0}
.section.alt{background:var(--alt)}
.title{text-align:center;font-size:1.9rem;color:var(--navy);margin:0 0 28px}
.title.left{text-align:start}
.grid3{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.two{display:grid;gap:32px;grid-template-columns:1fr 1fr;align-items:center}
.two.rev img{order:2}
.shadow{border-radius:var(--r);box-shadow:0 10px 30px rgba(20,48,122,.18);width:100%;max-width:440px;justify-self:center}
.svc{display:flex;flex-direction:column;gap:.4rem}
.svc h3{margin:.3rem 0;font-size:1.2rem;color:var(--navy)}
.svc p{margin:0 0 .8rem;color:var(--muted);flex:1}
.ico{font-size:2rem}
.why{background:var(--alt);border-radius:var(--r);padding:14px 18px;margin-bottom:12px;border-inline-start:5px solid var(--or)}
.why b{font-size:1.1rem;color:var(--navy)}
.why p{margin:.2rem 0 0;color:var(--muted)}
.steps{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.steps li{background:#fff;border-radius:var(--r);padding:22px;text-align:center;border:1px solid var(--line)}
.steps h3{margin:.5rem 0 .2rem;color:var(--navy)}
.steps p{margin:0;color:var(--muted)}
.num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--or);color:#fff;font-weight:800;font-size:1.2rem}
.review p{margin:0 0 .6rem}
.review cite{color:var(--muted);font-size:.9rem}
.review-cta{margin-top:24px}
blockquote{margin:0}

/* blog cards */
.post{display:flex;flex-direction:column;gap:.4rem;text-decoration:none;padding:0;overflow:hidden}
.post img{display:block;width:100%;height:auto}
.post h3{margin:.6rem 16px 0;color:var(--navy);font-size:1.15rem}
.post p{margin:0 16px;color:var(--muted);flex:1}
.post .more{margin:0 16px 16px;color:var(--or-d);font-weight:700}
.post:hover{transform:translateY(-3px)}

/* article */
.article{padding:36px 0 56px}
.article h1{color:var(--navy);font-size:2rem;line-height:1.4;margin:.4rem 0 1rem}
.article h2{color:var(--or-d);margin:2rem 0 .4rem}
.article .cover{width:100%;border-radius:var(--r);margin:0 0 1.2rem}
.article .meta{color:var(--muted);font-size:.9rem}
.crumbs{font-size:.9rem;color:var(--muted)}
.crumbs a{text-decoration:none;color:var(--or-d)}
.cta-box{background:var(--alt);border:2px solid var(--yl);border-radius:var(--r);padding:20px;margin:2rem 0;text-align:center}
.cta-box h3{margin:0 0 .6rem;color:var(--navy)}
.related{margin-top:2rem}
.related a{color:var(--or-d);font-weight:700}

/* faq */
details{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:#fff}
summary{cursor:pointer;font-weight:700;color:var(--navy)}
details p{margin:.6rem 0 0;color:var(--muted)}

/* final & footer */
.final{background:linear-gradient(135deg,var(--navy),var(--navy-d));color:#fff;padding:48px 0}
.final h2{margin:0 0 6px;font-size:1.8rem}
.footer{background:#0b1535;color:#d7def0;padding:28px 0;text-align:center}
.footer p{margin:.3rem 0}
.footer a{color:var(--yl)}
.flogo{background:#fff;border-radius:10px;padding:6px 12px;margin-bottom:10px}

.mbar{display:none}

@media(max-width:900px){
  .nav{display:none}
}
@media(max-width:820px){
  body{font-size:16px}
  .hero-in,.two{grid-template-columns:1fr}
  .two.rev img{order:0}
  .hero h1{font-size:1.9rem}
  .grid3,.steps{grid-template-columns:1fr}
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .topbar-actions{display:none}
  .topbar-in{justify-content:center}
  .article h1{font-size:1.6rem}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;inset-inline:0;bottom:0;padding:8px 12px;background:#fff;border-top:1px solid var(--line);z-index:30}
  .mbar .btn{padding:.8rem}
}