/*
Theme Name: Habib Wahab Consulting
Theme URI: https://habibwahabconsulting.com/
Author: Habib Wahab
Description: A single-page landing theme for an eCommerce consultancy. Ethical, systems-driven positioning. No guaranteed-outcome language.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: habibwahab-consulting
*/

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0a1230; --navy2:#0d204a; --panel:#0c1738; --panel2:#08102a;
  --blue:#2d7fff; --lblue:#7fb0ff; --txt:#e8eefc; --mut:#9db0d4; --dim:#6f83a8; --line:#1e2f57;
}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--txt);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,18,48,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.navin{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:700;letter-spacing:-.2px}
.brand span{color:var(--lblue)}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{color:var(--mut);font-size:14.5px;font-weight:500}
.navlinks a:hover{color:var(--txt)}
.navcta{background:var(--blue);color:#fff!important;padding:9px 18px;border-radius:7px;font-size:14px;font-weight:600}

/* hero */
.hero{background:linear-gradient(160deg,#0a1230 0%,#0d204a 100%);padding:78px 0 68px;border-bottom:1px solid var(--line)}
.hgrid{display:flex;gap:48px;align-items:center;flex-wrap:wrap}
.pic{width:200px;height:200px;border-radius:50%;object-fit:cover;border:5px solid var(--blue);
  flex:none;box-shadow:0 14px 44px rgba(0,0,0,.45)}
.hct{flex:1;min-width:290px}
h1{font-size:42px;line-height:1.12;letter-spacing:-.7px;margin-bottom:12px}
.role{color:var(--lblue);font-size:18px;font-weight:600;margin-bottom:18px}
.lede{color:var(--mut);font-size:17.5px;max-width:540px;margin-bottom:28px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 27px;border-radius:9px;font-weight:600;font-size:15px;transition:.15s}
.b1{background:var(--blue);color:#fff}
.b1:hover{background:#4a90ff;transform:translateY(-1px)}
.b2{border:1.5px solid #33518f;color:var(--txt)}
.b2:hover{border-color:var(--blue);background:rgba(45,127,255,.09)}

/* proof */
.proof{background:var(--panel2);border-bottom:1px solid var(--line);padding:22px 0}
.plist{display:flex;gap:16px;flex-wrap:wrap;color:var(--mut);font-size:14.5px}
.plist span{display:flex;align-items:center;gap:9px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}

/* sections */
section{padding:66px 0;border-bottom:1px solid var(--line)}
h2{font-size:13px;letter-spacing:1.8px;text-transform:uppercase;color:var(--lblue);
  margin-bottom:12px;font-weight:700}
.h3big{font-size:29px;line-height:1.25;letter-spacing:-.4px;margin-bottom:30px;max-width:700px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;transition:.15s}
.card:hover{border-color:#2b4a8a}
.card h3{font-size:17px;margin-bottom:8px}
.card p{color:var(--mut);font-size:14.5px;line-height:1.62}

.prose{color:var(--mut);font-size:17px;max-width:660px}
.prose p{margin-bottom:16px}
.prose b{color:var(--txt)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.step .n{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--blue);color:var(--lblue);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;margin-bottom:14px}
.step h3{font-size:17px;margin-bottom:7px}
.step p{color:var(--mut);font-size:14.5px}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--lblue);font-size:22px;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--mut);font-size:15px;margin-top:12px;max-width:720px}

.cta{text-align:center;padding:74px 0;background:linear-gradient(160deg,#0a1230,#0d204a)}
.cta .h3big{margin-left:auto;margin-right:auto;margin-bottom:14px}
.cta .sub{color:var(--mut);margin-bottom:28px;max-width:540px;margin-left:auto;margin-right:auto}
.note{color:var(--dim);font-size:13.5px;margin-top:20px}

footer{background:var(--panel2);padding:36px 0;text-align:center;color:var(--dim);font-size:14px}
.soc{display:flex;gap:24px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
.soc a{color:var(--mut);font-weight:600;font-size:14.5px}
.soc a:hover{color:var(--lblue)}

@media(max-width:760px){
  .navlinks a:not(.navcta){display:none}
  h1{font-size:32px}.h3big{font-size:23px}
  .hero{padding:52px 0 48px}.pic{width:140px;height:140px}.hgrid{gap:28px}
  section{padding:52px 0}
}