/* =========================================================
   Hamza718 Solutions — brand stylesheet
   Palette derived from the logo (blue → green gradient on navy)
   Fonts: Poppins (headings) + Inter (body)
   ========================================================= */
:root{
  --ink:#0E2440;         /* deep navy (logo wordmark) */
  --ink-soft:#20344F;
  --blue:#1577DE;        /* logo blue */
  --blue-deep:#0F5AB8;
  --green:#54C22C;       /* logo green */
  --green-deep:#3AA015;
  --paper:#FFFFFF;
  --panel:#F4F8FC;       /* soft blue-grey surface */
  --panel-2:#EAF1F9;
  --line:#E0E8F1;
  --steel:#5C6C82;       /* muted text */
  --steel-light:#8695A8;
  --ok:#2E9E4F;
  --warn:#D8443B;
  --grad:linear-gradient(120deg,var(--blue) 0%,var(--green) 100%);
  --grad-soft:linear-gradient(120deg,rgba(21,119,222,.10),rgba(84,194,44,.10));
  --shadow:0 10px 30px rgba(14,36,64,.08);
  --shadow-sm:0 4px 14px rgba(14,36,64,.07);
  --radius:14px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --head:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--paper); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:var(--head); color:var(--ink); line-height:1.2; margin:0 0 .5em; font-weight:600;}
h1{font-size:clamp(30px,5vw,46px); letter-spacing:-.02em;}
h2{font-size:clamp(24px,3.4vw,34px); letter-spacing:-.01em;}
h3{font-size:20px;}
p{margin:0 0 1em;}
a{color:var(--blue-deep); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
.wrap{max-width:1140px; margin:0 auto; padding:0 22px;}
.section{padding:74px 0;}
.section.tight{padding:48px 0;}
.center{text-align:center;}
.muted{color:var(--steel);}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--head); font-weight:600; font-size:15px;
  padding:13px 26px; border-radius:10px; cursor:pointer; border:none; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-2px);}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 8px 22px rgba(21,119,222,.28);}
.btn-primary:hover{box-shadow:0 12px 28px rgba(21,119,222,.36);}
.btn-ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--blue);}
.btn-small{font-size:13px; padding:9px 18px;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 22px; max-width:1140px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:42px; width:auto;}
.nav-links{display:flex; align-items:center; gap:26px;}
.nav-links a{font-family:var(--head); font-weight:500; font-size:15px; color:var(--ink); }
.nav-links a:hover{color:var(--blue-deep); text-decoration:none;}
.nav-links a.active{color:var(--blue-deep);}
.nav-cta{display:flex; align-items:center; gap:12px;}
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.hamburger span{width:24px; height:2.5px; background:var(--ink); border-radius:2px;}
.mobile-menu{display:none; flex-direction:column; padding:10px 22px 18px; border-bottom:1px solid var(--line); background:#fff;}
.mobile-menu a{padding:11px 0; font-family:var(--head); font-weight:500; border-bottom:1px solid var(--line); color:var(--ink);}
.mobile-menu a:last-child{border-bottom:none;}

/* ---------- hero ---------- */
.hero{background:var(--grad-soft); padding:84px 0 74px; position:relative; overflow:hidden;}
.hero .wrap{position:relative; z-index:2;}
.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.hero-media img{width:100%; height:auto; border-radius:18px; box-shadow:0 24px 60px rgba(14,36,64,.28); object-fit:cover;}
.hero .eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--head); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-deep); background:#fff; padding:7px 14px; border-radius:30px; box-shadow:var(--shadow-sm); margin-bottom:20px;}
.hero h1{max-width:15ch;}
.hero p.lead{font-size:19px; color:var(--steel); max-width:56ch; margin:0 0 28px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
.hero-badges{display:flex; gap:26px; flex-wrap:wrap; margin-top:38px;}
.hero-badges div{font-size:14px; color:var(--steel);}
.hero-badges strong{display:block; font-family:var(--head); font-size:24px; color:var(--ink);}

/* ---------- eyebrow (generic) ---------- */
.eyebrow{font-family:var(--head); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--green-deep); margin-bottom:12px;}

/* ---------- cards / services ---------- */
.grid{display:grid; gap:24px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.card .ico{width:52px; height:52px; border-radius:12px; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:24px;}
/* centered-icon card variant (Home "What we do") */
.cards-center .card{text-align:center;}
.cards-center .card .ico{margin-left:auto; margin-right:auto;}
.card h3{margin-bottom:8px;}
.card p{font-size:14.5px; color:var(--steel); margin-bottom:0;}
.card .price{font-family:var(--head); font-weight:700; font-size:22px; color:var(--ink); margin-top:16px;}
.card .price span{font-size:13px; font-weight:500; color:var(--steel);}
.card ul{margin:14px 0 0; padding-left:18px;}
.card ul li{font-size:14px; color:var(--steel); margin-bottom:6px;}

/* ---------- feature strip ---------- */
.strip{background:var(--ink); color:#DCE6F2;}
.strip .eyebrow{color:var(--green);}
.strip h2{color:#fff;}
.strip .card{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); box-shadow:none;}
.strip .card h3{color:#fff;} .strip .card p{color:#AFC0D6;}

/* ---------- steps ---------- */
.steps{counter-reset:step; display:grid; gap:22px; grid-template-columns:repeat(3,1fr);}
.step{position:relative; padding:26px 24px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius); background:rgba(255,255,255,.03);}
.step .num{font-family:var(--head); font-weight:700; font-size:15px; color:#fff; width:34px; height:34px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.step h4{margin-bottom:6px;}
.step p{font-size:14px; color:var(--steel); margin:0;}
.strip .step h4{color:#fff;}
.strip .step p{color:#AFC0D6;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--grad); border-radius:20px; padding:52px; text-align:center; color:#fff; box-shadow:var(--shadow);}
.cta-band h2{color:#fff;} .cta-band p{color:rgba(255,255,255,.9); max-width:52ch; margin:0 auto 24px;}
.cta-band .btn-ghost{background:#fff; color:var(--ink); border:none;}

/* ---------- checkout ---------- */
.co-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:start;}
.form-panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm);}
.form-row{margin-bottom:18px;}
label{display:block; font-family:var(--head); font-size:13px; font-weight:500; color:var(--ink); margin-bottom:7px;}
input,select{width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; font-family:var(--sans); font-size:15px; background:#fff; color:var(--ink);}
input:focus,select:focus{outline:none; border-color:var(--blue);}
.qty-row{display:flex; align-items:center; gap:10px;}
.qty-row button{font-family:var(--head); font-size:18px; font-weight:600; width:44px; height:44px; border:1.5px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; color:var(--ink);}
.qty-row input{width:80px; text-align:center; font-weight:600;}
.hint{font-size:12.5px; color:var(--steel); margin-top:6px;}
.summary{background:var(--ink); color:#DCE6F2; border-radius:var(--radius); padding:26px; position:sticky; top:96px;}
.summary h3{color:#fff; font-size:16px; margin-bottom:16px;}
.summary .row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:14px;}
.summary .row:last-child{border-bottom:none;}
.summary .k{color:#9DB1CC;} .summary .v{color:#fff; font-weight:500; text-align:right;}
.summary .total .v{font-family:var(--head); font-size:22px; color:var(--green);}
.msg{font-size:13.5px; padding:12px 16px; border-radius:10px; margin-top:16px; display:none;}
.msg.err{display:block; background:#FDECEA; color:var(--warn); border:1px solid #F5C6C2;}
.msg.ok{display:block; background:#E9F7EE; color:var(--ok); border:1px solid #BFE6CC;}
.trust-line{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--steel); margin-top:16px;}

/* ---------- page hero (inner pages) ---------- */
.page-hero{background:var(--panel); padding:56px 0 40px; border-bottom:1px solid var(--line);}
.page-hero p{color:var(--steel); max-width:60ch; font-size:17px;}

/* ---------- legal / prose ---------- */
.prose{max-width:800px; margin:0 auto;}
.prose h2{margin-top:36px; font-size:24px;}
.prose h3{margin-top:26px;}
.prose p,.prose li{color:var(--ink-soft); font-size:15.5px;}
.prose ul{padding-left:20px;}

/* ---------- footer ---------- */
footer.site{background:var(--ink); color:#AFC0D6; padding:56px 0 28px;}
footer.site a{color:#C7D5E8;}
footer.site a:hover{color:#fff;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px; margin-bottom:36px;}
.foot-grid h5{font-family:var(--head); color:#fff; font-size:14px; margin-bottom:14px; text-transform:uppercase; letter-spacing:.05em;}
.foot-grid a{display:block; font-size:14px; padding:5px 0;}
.foot-brand img{height:40px; margin-bottom:14px;}
.foot-brand p{font-size:14px; color:#8FA3BE; max-width:34ch;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#8FA3BE;}
.foot-bottom a{font-size:13px;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links,.nav-cta .btn{display:none;}
  .hamburger{display:flex;}
  .grid-3,.grid-2,.steps{grid-template-columns:1fr;}
  .hero-inner{grid-template-columns:1fr; gap:34px;}
  .hero-media{order:-1;}
  .co-grid{grid-template-columns:1fr;}
  .summary{position:static;}
  .foot-grid{grid-template-columns:1fr; gap:24px;}
  .cta-band{padding:36px 24px;}
  .section{padding:52px 0;}
}

/* ---------- checkout: service detail panel ---------- */
.svc-detail{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; margin:0 0 18px;
}
.svc-detail-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:8px;
}
.svc-detail-head h4{
  font-family:var(--head); font-size:16px; font-weight:600;
  color:var(--ink); margin:0;
}
.svc-detail-price{
  font-family:var(--head); font-weight:700; font-size:16px;
  color:var(--blue-deep); white-space:nowrap;
}
.svc-detail p{ font-size:14px; color:var(--steel); margin:0 0 10px; line-height:1.6; }
.svc-detail ul{ margin:0 0 10px; padding-left:20px; }
.svc-detail ul li{ font-size:13.5px; color:var(--steel); margin-bottom:5px; line-height:1.5; }
.svc-detail-meta{
  font-size:12.5px; color:var(--steel);
  border-top:1px solid var(--line); padding-top:10px; margin-top:2px;
}
.svc-detail-meta strong{ color:var(--ink); font-weight:600; }

/* description inside the dark order summary panel */
.summary-desc{
  font-size:13px; line-height:1.6; color:#AFC0D6;
  margin:10px 0 4px; padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

/* ---------- footer address (UK) ---------- */
.foot-address{
  font-style:normal; font-size:14px; line-height:1.7;
  color:#8FA3BE; margin-top:16px;
}
.foot-address strong{ color:#DCE6F2; font-weight:600; }
.foot-flag{ display:inline-block; margin-top:6px; font-size:13px; color:#8FA3BE; }

/* ---------- development services cards ---------- */
.price-quote{ font-size:16px; color:var(--blue-deep); }
#development .card ul{ margin-top:14px; }

/* ---------- homepage contact section ---------- */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;
}
.contact-copy p{ color:#AFC0D6; font-size:15.5px; max-width:52ch; }
.contact-points{ list-style:none; padding:0; margin:22px 0 24px; }
.contact-points li{
  position:relative; padding-left:26px; margin-bottom:12px;
  font-size:14.5px; color:#AFC0D6;
}
.contact-points li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--green); font-weight:700;
}
.contact-points strong{ color:#fff; font-weight:600; }
.contact-alt{ font-size:14px; color:#8FA3BE; border-top:1px solid rgba(255,255,255,.12); padding-top:18px; }
.contact-alt a{ color:var(--green); }

.contact-panel{
  background:#fff; border-radius:var(--radius); padding:30px;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.contact-panel label{ color:var(--ink); }
.contact-panel textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:var(--sans); font-size:15px; background:#fff; color:var(--ink);
  resize:vertical; min-height:120px;
}
.contact-panel textarea:focus{ outline:none; border-color:var(--blue); }
.contact-panel .consent-label{
  font-family:var(--sans); font-weight:400; font-size:13px;
  color:var(--steel); margin:0;
}
label .opt{ font-weight:400; color:var(--steel-light); }

/* honeypot — visually hidden, still focusable-free for bots */
.hp-field{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; gap:30px; }
  .contact-panel{ padding:24px; }
}