@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f8fbfb;
  --white:#fff;
  --ink:#102f3a;
  --muted:#6a7c82;
  --teal:#0c7f86;
  --teal2:#0fa0a7;
  --teal-soft:#e6f4f4;
  --navy:#073544;
  --line:#dce8e9;
  --shadow:0 18px 45px rgba(15,52,63,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
}
a{text-decoration:none;color:inherit}
.container{width:min(1460px,calc(100% - 64px));margin:auto}

/* NAV */
.site-header{
  background:#fff;
  border-bottom:1px solid #e9eeee;
  position:sticky;top:0;z-index:100;
}
.nav{
  min-height:92px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}
.brand{display:flex;align-items:center;gap:14px;justify-self:start}
.logo{
  width:52px;height:52px;border-radius:13px;
  background:linear-gradient(135deg,#0e7480,#11979e);
  color:#fff;display:grid;place-items:center;font-size:31px;font-weight:800;
  box-shadow:0 10px 22px rgba(12,127,134,.16)
}
.brand b{display:block;font-size:18px;font-weight:800}
.brand span{display:block;font-size:11px;color:#5c737a;margin-top:2px}
.menu{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:700}
.menu a{position:relative;padding:34px 0 31px}
.menu a.active:after{
  content:"";position:absolute;right:20%;left:20%;bottom:20px;height:3px;border-radius:99px;background:var(--teal)
}
.menu a:hover{color:var(--teal)}
.nav-actions{display:flex;gap:12px;justify-self:end;align-items:center}
.lang{
  height:48px;padding:0 16px;border:1px solid var(--line);border-radius:12px;
  background:#fff;font-weight:700;color:var(--ink)
}
.login{
  height:50px;padding:0 22px;border-radius:12px;background:var(--navy);color:#fff;
  display:inline-flex;align-items:center;gap:10px;font-weight:800;
  box-shadow:0 12px 24px rgba(7,53,68,.16)
}

/* HERO */
.hero{
  position:relative;
  overflow:hidden;
  min-height:575px;
  background:
    radial-gradient(circle at 8% 12%,rgba(41,178,186,.09),transparent 27%),
    linear-gradient(180deg,#fbfefe 0%,#f7fbfb 100%);
}
.hero:before{
  content:"";
  position:absolute;left:-115px;bottom:-75px;width:440px;height:440px;border-radius:50%;
  border:58px solid rgba(12,127,134,.045)
}
.hero-inner{
  min-height:575px;
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:28px;
  align-items:center;
  position:relative;
  z-index:1;
}
.hero-copy{padding:54px 0 44px}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  background:#e4f3f3;color:#08747b;
  padding:10px 17px;border-radius:999px;font-size:13px;font-weight:800
}
.badge:before{content:"";width:7px;height:7px;border-radius:50%;background:#0fa06f}
.hero h1{
  margin:22px 0 22px;
  font-size:54px;line-height:1.28;
  font-weight:800;letter-spacing:-0.9px
}
.hero h1 span{display:block;color:var(--teal)}
.hero p{
  margin:0 0 30px;
  max-width:595px;
  font-size:17px;line-height:2;
  color:#5e7178;
}
.cta-row{display:flex;gap:13px;flex-wrap:wrap}
.btn{
  min-height:54px;padding:0 24px;border-radius:13px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;font-weight:800
}
.btn-primary{background:linear-gradient(135deg,#075264,#0c8088);color:#fff;box-shadow:0 12px 25px rgba(7,82,100,.15)}
.btn-secondary{background:#fff;border:1px solid #d5e1e3;color:var(--ink)}
.hero-features{
  display:flex;align-items:center;gap:0;margin-top:34px;
  font-size:12px;color:#486269;font-weight:700;flex-wrap:wrap
}
.hero-features span{
  display:flex;align-items:center;gap:8px;padding:0 17px;border-left:1px solid #d4e1e2
}
.hero-features span:last-child{border-left:0}
.hero-features i{font-style:normal;color:#07858c;font-size:18px}

/* visual */
.hero-visual{
  min-height:560px;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  direction:ltr;
}
.hero-visual img{
  width:104%;
  max-width:none;
  height:auto;
  transform:translateX(-1%) translateY(-1.5%);
  filter:drop-shadow(0 20px 38px rgba(9,52,61,.09));
}
/* feature strip */
.feature-strip-wrap{position:relative;margin-top:-22px;z-index:5}
.feature-strip{
  background:#fff;border:1px solid #e0e9ea;border-radius:22px;
  box-shadow:var(--shadow);
  display:grid;grid-template-columns:repeat(6,1fr);overflow:hidden
}
.feature-mini{
  padding:22px 18px;text-align:center;border-left:1px solid #e3ebec
}
.feature-mini:last-child{border-left:0}
.feature-mini .ico{
  margin:auto;width:42px;height:42px;border-radius:12px;background:#f0f7f7;color:#0d7e85;
  display:grid;place-items:center;font-size:22px;font-weight:800
}
.feature-mini b{display:block;font-size:12px;margin-top:8px}
.feature-mini span{display:block;font-size:10px;color:#778a8f;margin-top:4px}

/* units */
.units{padding:48px 0 74px;background:#fff}
.section-title{text-align:center;margin-bottom:28px}
.section-title h2{font-size:30px;margin:0;font-weight:800}
.section-title .line{display:inline-flex;align-items:center;gap:12px}
.section-title .line:before,.section-title .line:after{
  content:"";width:54px;height:2px;background:linear-gradient(90deg,transparent,#0d858c)
}
.section-title .line:after{background:linear-gradient(90deg,#0d858c,transparent)}
.units-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.unit-card{
  background:#fff;border:1px solid #e5ecec;border-radius:18px;
  padding:22px 18px 18px;text-align:center;min-height:245px;
  box-shadow:0 9px 22px rgba(15,52,63,.055);
  transition:.2s ease
}
.unit-card:hover{transform:translateY(-5px);box-shadow:0 17px 35px rgba(15,52,63,.10)}
.unit-icon{
  width:55px;height:55px;margin:0 auto 13px;border-radius:15px;
  display:grid;place-items:center;background:#edf6f5;color:#0b7d83;font-size:27px;font-weight:800
}
.unit-card h3{font-size:17px;margin:0 0 10px}
.unit-card p{font-size:12px;line-height:1.8;color:#708388;margin:0;min-height:64px}
.unit-card a{display:inline-block;margin-top:12px;font-size:12px;color:#0a7c83;font-weight:800}

/* bottom accent */
.bottom-accent{height:10px;background:linear-gradient(90deg,#0c7f86,#1a9ca2,#cfa860)}
.footer{padding:24px 0 34px;border-top:1px solid #edf1f1;color:#75868a;font-size:11px}
.footer .container{display:flex;justify-content:space-between;gap:20px}

/* responsive */
@media(max-width:1200px){
  .menu{gap:20px;font-size:12px}
  .hero h1{font-size:49px}
  .units-grid{grid-template-columns:repeat(3,1fr)}
  .feature-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:960px){
  .nav{grid-template-columns:1fr auto}.menu{display:none}
  .hero-inner{grid-template-columns:1fr}
  .hero-copy{padding-bottom:8px}
  .hero-visual{min-height:450px}
  .hero-visual img{width:100%;transform:none}
  }
@media(max-width:700px){
  .container{width:min(100% - 28px,1460px)}
  .site-header .nav{min-height:74px}
  .brand span{display:none}.brand b{font-size:13px}.logo{width:42px;height:42px}
  .lang{display:none}.login{height:44px;padding:0 15px;font-size:12px}
  .hero{min-height:auto}.hero-inner{min-height:auto}
  .hero h1{font-size:37px}.hero p{font-size:15px}
  .hero-features span{padding:6px 10px}
  .hero-visual{min-height:340px;overflow:hidden}
  .hero-visual img{width:126%;max-width:none}
  .feature-strip{grid-template-columns:repeat(2,1fr)}
  .units-grid{grid-template-columns:1fr}
  .footer .container{flex-direction:column}
}

.svg-ico{
  width:22px;height:22px;display:block;
  stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.feature-mini .ico .svg-ico{width:23px;height:23px}
.unit-icon .svg-ico{width:28px;height:28px}
.section-title h2{letter-spacing:-.3px}
.section-title .line:before,.section-title .line:after{height:1px}
.login .arrow{font-size:14px;opacity:.8}



/* Hero visual after removing KPI cards */
.clean-hero-visual{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:visible;
  padding-top:0;
}
.clean-hero-visual .hero-person-visual{
  width:104%;
  max-width:none;
  height:auto;
  transform:translateX(-1%) translateY(-1.5%);
  filter:drop-shadow(0 20px 38px rgba(9,52,61,.09));
}
@media(max-width:960px){
  .clean-hero-visual{min-height:450px}
  .clean-hero-visual .hero-person-visual{width:100%;transform:none}
}
@media(max-width:700px){
  .clean-hero-visual{min-height:340px;overflow:hidden}
  .clean-hero-visual .hero-person-visual{width:126%;max-width:none}
}


/* Refined feature-strip icons — lower section only */
.feature-strip .feature-mini .ico{
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(180deg,#eff8f7 0%,#e7f3f2 100%);
  border:1px solid #dceceb;
  display:grid;
  place-items:center;
  margin:0 auto 9px;
  box-shadow:0 6px 16px rgba(12,127,134,.05);
}
.feature-strip .feature-mini .ico img{
  width:28px;
  height:28px;
  object-fit:contain;
  display:block;
}
.feature-strip .feature-mini b{
  color:#163940;
  font-weight:800;
}
.feature-strip .feature-mini:hover .ico{
  transform:translateY(-2px);
  box-shadow:0 9px 20px rgba(12,127,134,.10);
  transition:.2s ease;
}