:root{
  --public-max: min(1240px, calc(100vw - 40px));
  --hero-radius: 26px;
  --soft-line: rgba(148,163,184,.18);
}

html,body{font-family:"Tajawal","Manrope",system-ui,-apple-system,sans-serif !important;}
body,[dir="rtl"] body,.brand-text,.nav a,.btn,.sec-head h2,.sec-head p,.focus-card h3,.focus-card p,.hero-title,.hero-desc,.foot-title,.foot-links a,.foot-contact,.team-name,.team-title,.team-bio,input,textarea,label{font-family:"Tajawal","Manrope",system-ui,-apple-system,sans-serif !important;}

.container{width:var(--public-max) !important;max-width:var(--public-max) !important;}
.topbar{width:var(--public-max) !important;max-width:var(--public-max) !important;}
main.container{padding-inline:0 !important;}

/* Hero: simpler, use width better, no artificial left empty column */
.hero{
  min-height:clamp(420px, 66vh, 680px) !important;
  border-radius:var(--hero-radius) !important;
  margin:18px 0 26px !important;
  box-shadow:0 24px 70px rgba(2,6,23,.14) !important;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(3,15,35,.70) 0%, rgba(3,15,35,.38) 34%, rgba(3,15,35,.18) 58%, rgba(3,15,35,.62) 100%);
  z-index:1;
  pointer-events:none;
}
[dir="rtl"] .hero::before{
  background:linear-gradient(90deg, rgba(3,15,35,.55) 0%, rgba(3,15,35,.22) 30%, rgba(3,15,35,.10) 52%, rgba(3,15,35,.82) 100%);
}
.hero-overlay{display:none !important;}
.hero-content{
  position:absolute; inset:0; z-index:3;
  display:flex !important; align-items:center !important; justify-content:flex-end !important;
  padding:34px clamp(18px,4vw,54px) !important;
}
.hero-simple-shell,
.hero-simple-shell--compact{
  width:100% !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
}
.hero-copy,
.hero-copy--compact{
  width:min(100%, 620px) !important;
  max-width:620px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:18px !important;
  padding:28px clamp(18px,2.2vw,30px) !important;
  border-radius:24px !important;
  background:linear-gradient(180deg, rgba(6,23,49,.78), rgba(4,20,44,.88)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(8px);
}
.hero-title{
  margin:0 !important;
  max-width:11ch !important;
  font-size:clamp(2.55rem, 5vw, 5.2rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.02em !important;
  text-wrap:balance;
}
.hero-desc{
  margin:0 !important;
  max-width:46ch !important;
  font-size:1.06rem !important;
  line-height:1.95 !important;
  color:rgba(255,255,255,.90) !important;
}
.hero-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  margin-top:2px !important;
}
.hero-actions .btn{
  min-width:auto !important;
  width:auto !important;
  padding:14px 20px !important;
  border-radius:14px !important;
  font-size:1rem !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
.hero-actions .btn.primary{
  background:#ffffff !important;
  color:#0d3558 !important;
  border-color:#ffffff !important;
}
.hero-actions .btn:not(.primary){
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#fff !important;
}
.hero-notes,.hero-metrics{display:none !important;}
.controls,.dots{z-index:4 !important;}
.controls{top:auto !important; bottom:18px !important; right:18px !important;}
[dir="ltr"] .controls{left:18px !important; right:auto !important;}
.dots{bottom:20px !important; left:18px !important;}
[dir="ltr"] .dots{right:18px !important; left:auto !important;}
.iconbtn{
  width:42px !important; height:42px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
.dot{background:rgba(255,255,255,.34) !important;}
.dot.active{background:#fff !important;}
.tag{
  margin-bottom:0 !important;
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.12) !important;
  font-size:.84rem !important;
  padding:9px 14px !important;
}

/* Focus blocks: smaller, cleaner, better icon block, 2 per row on mobile */
#focus{padding-top:12px !important;}
.focus-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
}
.focus-card{
  grid-column:auto !important;
  min-height:182px !important;
  padding:20px 18px !important;
  border-radius:22px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  gap:16px !important;
  background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
  border:1px solid rgba(207,220,234,.9) !important;
  box-shadow:0 14px 36px rgba(15,23,42,.06) !important;
}
.focus-card::before{display:none !important;}
.focus-ic{
  width:54px !important;
  height:54px !important;
  border-radius:18px !important;
  margin:0 0 2px !important;
  background:linear-gradient(180deg,#f5f9ff,#ecf5ff) !important;
  border:1px solid rgba(191,219,254,.85) !important;
  color:#1d5f96 !important;
  box-shadow:0 14px 28px rgba(56,189,248,.12) !important;
}
.focus-copy h3,.focus-card h3{
  margin:0 0 8px !important;
  font-size:1.05rem !important;
  line-height:1.45 !important;
  color:#0f2340 !important;
}
.focus-copy p,.focus-card p{
  margin:0 !important;
  font-size:.92rem !important;
  line-height:1.9 !important;
  color:#5b6d82 !important;
}
.focus-card:hover{transform:translateY(-3px) !important; box-shadow:0 20px 40px rgba(15,23,42,.08) !important;}

/* Team image reliability */
.team-avatar{overflow:hidden !important; background:#edf3f9 !important;}
.team-avatar img{display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center top !important;}
.brand img,.drawer-brand img,.foot-logo img{display:block !important; object-fit:contain !important;}

/* Footer better distribution */
.site-footer{
  margin-top:30px !important;
  padding:30px clamp(18px,2vw,28px) 16px !important;
  border-radius:28px 28px 0 0 !important;
  background:linear-gradient(180deg,#0f2744,#0b1e35) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
.foot-top{
  display:grid !important;
  grid-template-columns:minmax(280px,1.35fr) minmax(180px,.9fr) minmax(180px,.9fr) minmax(260px,1fr) !important;
  gap:24px !important;
  align-items:start !important;
}
.foot-brand,.foot-col,.foot-cta-box{
  padding:0 !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}
.foot-brand{display:grid !important; grid-template-columns:74px 1fr !important; gap:16px !important; align-items:start !important;}
.foot-logo{
  width:74px !important; height:74px !important; border-radius:20px !important;
  background:#fff !important; border:1px solid rgba(255,255,255,.16) !important;
}
.foot-brand-copy strong,.foot-title{color:#fff !important;}
.foot-brand-desc,.foot-col p,.foot-contact span,.foot-links a,.foot-bottom span,.foot-bottom a,.muted{color:rgba(255,255,255,.78) !important;}
.foot-links{display:flex !important; flex-direction:column !important; gap:10px !important;}
.foot-links a{padding:0 !important; background:none !important; border:none !important; min-height:auto !important;}
.foot-contact{display:flex !important; flex-direction:column !important; gap:12px !important;}
.foot-contact div{display:flex !important; align-items:center !important; gap:10px !important; color:rgba(255,255,255,.82) !important;}
.foot-contact i{width:18px; text-align:center; color:#8ad3ff !important;}
.foot-social{display:flex !important; gap:10px !important; margin-top:14px !important;}
.foot-social .soc{
  width:40px !important; height:40px !important; border-radius:14px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.12) !important; color:#fff !important;
}
.foot-social .soc i{color:currentColor !important;}
.foot-cta-box{
  padding:20px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
.foot-cta-box p{color:rgba(255,255,255,.80) !important; margin:0 0 14px !important;}
.foot-cta{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;
  min-height:48px !important; padding:0 18px !important; border-radius:14px !important;
  background:#ffffff !important; color:#0f2744 !important; border:1px solid #ffffff !important;
  font-weight:800 !important;
}
.foot-cta i{color:#0f2744 !important;}
.foot-bottom{
  margin-top:22px !important;
  padding-top:14px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}

/* Header logo reliability */
.brand img{width:58px !important; height:58px !important;}
.drawer-brand img{width:52px !important; height:52px !important;}

/* Responsive */
@media (max-width: 1199px){
  :root{--public-max:min(1120px, calc(100vw - 30px));}
  .hero-title{font-size:clamp(2.3rem,4.8vw,4.4rem) !important; max-width:10.5ch !important;}
  .focus-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width: 767px){
  :root{--public-max:calc(100vw - 18px);}
  .hero{min-height:460px !important; margin-top:12px !important;}
  .hero::before{background:linear-gradient(180deg, rgba(3,15,35,.38) 0%, rgba(3,15,35,.70) 100%) !important;}
  .hero-content{padding:16px !important; align-items:flex-end !important;}
  .hero-simple-shell,.hero-simple-shell--compact{justify-content:stretch !important;}
  .hero-copy,.hero-copy--compact{
    width:100% !important; max-width:100% !important; padding:18px 16px !important; gap:14px !important; border-radius:20px !important;
  }
  .hero-title{font-size:clamp(2rem, 9vw, 3.15rem) !important; max-width:9.5ch !important; line-height:1.08 !important;}
  .hero-desc{font-size:.95rem !important; line-height:1.9 !important;}
  .hero-actions{display:grid !important; grid-template-columns:1fr 1fr !important; width:100% !important;}
  .hero-actions .btn{width:100% !important; padding:13px 12px !important; font-size:.94rem !important;}
  .controls{bottom:14px !important; right:14px !important;}
  .dots{left:14px !important; bottom:18px !important;}
  .sec-head h2{font-size:1.75rem !important;}
  .focus-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important;}
  .focus-card{min-height:160px !important; padding:16px 14px !important; border-radius:18px !important; gap:12px !important;}
  .focus-ic{width:46px !important; height:46px !important; border-radius:15px !important;}
  .focus-copy h3,.focus-card h3{font-size:.92rem !important;}
  .focus-copy p,.focus-card p{font-size:.78rem !important; line-height:1.75 !important;}
  .site-footer{border-radius:24px 24px 0 0 !important; padding-inline:16px !important;}
  .foot-top{grid-template-columns:1fr !important; gap:18px !important;}
  .foot-brand{grid-template-columns:64px 1fr !important;}
}