/* ==========================================================================
   NOPA — corporate site stylesheet
   Bilingual (EN / AR-RTL). Logical properties throughout so one sheet
   serves both directions.
   ========================================================================== */

:root{
  --navy-900:#07121f;
  --navy-800:#0b1b2b;
  --navy-700:#112639;
  --navy-600:#1a3a52;
  --ink:#16202b;
  --ink-soft:#4a5b6d;
  --line:#e2e8f0;
  --bg:#ffffff;
  --bg-alt:#f6f9fc;
  --teal:#4A9FE8;
  --teal-dark:#2F6BD1;
  --teal-soft:#E9F2FD;
  --amber:#f5a524;
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(11,27,43,.06), 0 2px 8px rgba(11,27,43,.05);
  --shadow-md:0 10px 30px rgba(11,27,43,.10);
  --maxw:1180px;
  --font-en:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar:'IBM Plex Sans Arabic', system-ui, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font-en);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:17px;
  overflow-x:hidden;
}
html[dir="rtl"] body{font-family:var(--font-ar); line-height:1.85}

img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

h1,h2,h3,h4{margin:0 0 .5em; line-height:1.2; font-weight:800; letter-spacing:-.02em}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{letter-spacing:0; line-height:1.4}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.4rem)}
h3{font-size:1.2rem; font-weight:700}
p{margin:0 0 1.1em}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.section{padding-block:clamp(64px,8vw,110px)}
.section--alt{background:var(--bg-alt); border-block:1px solid var(--line)}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(7,18,31,.92);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex; align-items:center; gap:28px; height:74px}
.brand{display:flex; align-items:center; gap:11px; flex-shrink:0}
.brand__mark{width:40px; height:40px; flex-shrink:0}
.brand__text{font-weight:800; font-size:1.32rem; letter-spacing:.02em; color:#fff}
.brand__text span{color:var(--teal)}

.nav__links{
  display:flex; align-items:center; gap:4px;
  margin-inline-start:auto;
  list-style:none; margin-block:0; padding:0;
}
.nav__links a{
  display:block; padding:9px 15px; border-radius:9px;
  color:rgba(255,255,255,.78); font-size:.95rem; font-weight:600;
  transition:color .15s ease, background .15s ease;
}
.nav__links a:hover{color:#fff; background:rgba(255,255,255,.08)}
.nav__links a.is-active{color:#fff; background:rgba(74,159,232,.18)}

.nav__actions{display:flex; align-items:center; gap:10px; flex-shrink:0}

.lang-btn{
  border:1px solid rgba(255,255,255,.22); background:transparent; color:#fff;
  font:inherit; font-size:.85rem; font-weight:700;
  height:38px; min-width:46px; padding-inline:12px; border-radius:9px;
  cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.lang-btn:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4)}

.nav__toggle{
  display:none; width:40px; height:38px; border-radius:9px;
  border:1px solid rgba(255,255,255,.22); background:transparent;
  cursor:pointer; padding:0; position:relative;
}
.nav__toggle span{
  position:absolute; inset-inline:9px; height:2px; background:#fff; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav__toggle span:nth-child(1){top:12px}
.nav__toggle span:nth-child(2){top:18px}
.nav__toggle span:nth-child(3){top:24px}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border-radius:11px;
  font-weight:700; font-size:.98rem; border:1px solid transparent;
  cursor:pointer; transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--teal); color:#03231f; box-shadow:0 6px 18px rgba(74,159,232,.32)}
.btn--primary:hover{background:#15c7b6}
.btn--ghost{border-color:rgba(255,255,255,.28); color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.btn--dark{background:var(--navy-800); color:#fff}
.btn--dark:hover{background:var(--navy-700)}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(74,159,232,.30), transparent 62%),
    radial-gradient(700px 420px at 8% 108%, rgba(36,99,235,.22), transparent 60%),
    linear-gradient(170deg, var(--navy-900), var(--navy-800) 58%, #0d2236);
  color:#fff;
  padding-block:clamp(72px,11vw,132px);
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(circle at 60% 40%, #000 10%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 60% 40%, #000 10%, transparent 78%);
}
.hero .wrap{position:relative; z-index:1}
.hero__inner{max-width:760px}
.hero h1{color:#fff; margin-bottom:.35em}
.hero__lead{font-size:clamp(1.05rem,1.9vw,1.28rem); color:rgba(255,255,255,.80); max-width:62ch; margin-bottom:2rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); margin-bottom:1.1rem;
}
html[dir="rtl"] .eyebrow{letter-spacing:0; text-transform:none; font-size:.85rem}
.eyebrow::before{content:''; width:26px; height:2px; background:var(--teal); border-radius:2px}

/* ---------- Stats strip ---------- */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:2px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg);
  overflow:hidden; margin-top:3.4rem;
}
.stat{background:rgba(7,18,31,.72); padding:24px 22px}
.stat__n{font-size:1.85rem; font-weight:800; color:#fff; line-height:1.1}
.stat__l{font-size:.86rem; color:rgba(255,255,255,.62); margin-top:4px}

/* ---------- Section heading ---------- */
.shead{max-width:660px; margin-bottom:3rem}
.shead--center{margin-inline:auto; text-align:center}
.shead p{color:var(--ink-soft); font-size:1.06rem; margin-bottom:0}

/* ---------- Cards ---------- */
.grid{display:grid; gap:22px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(225px,1fr))}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px 28px; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#cfe0ea}
.card__icon{
  width:50px; height:50px; border-radius:13px;
  background:var(--teal-soft); color:var(--teal-dark);
  display:grid; place-items:center; margin-bottom:18px;
}
.card__icon svg{width:26px; height:26px}
.card p{color:var(--ink-soft); font-size:.97rem; margin-bottom:0}
.card ul{margin:14px 0 0; padding-inline-start:18px; color:var(--ink-soft); font-size:.93rem}
.card ul li{margin-bottom:5px}

/* numbered / why cards */
.why{display:flex; gap:16px; align-items:flex-start}
.why__n{
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  background:var(--navy-800); color:var(--teal);
  display:grid; place-items:center; font-weight:800; font-size:.95rem;
}
.why h3{margin-bottom:.25em}
.why p{color:var(--ink-soft); font-size:.95rem; margin:0}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--navy-800),#123049);
  color:#fff; border-radius:var(--radius-lg);
  padding:clamp(34px,5vw,56px);
  display:flex; flex-wrap:wrap; align-items:center; gap:26px; justify-content:space-between;
}
.cta-band h2{color:#fff; margin-bottom:.3em}
.cta-band p{color:rgba(255,255,255,.75); margin:0; max-width:52ch}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:42px; align-items:start}
.info-item{display:flex; gap:15px; align-items:flex-start; padding-block:18px; border-bottom:1px solid var(--line)}
.info-item:last-child{border-bottom:0}
.info-item__icon{
  width:42px;height:42px;flex-shrink:0;border-radius:11px;
  background:var(--teal-soft); color:var(--teal-dark); display:grid; place-items:center;
}
.info-item__icon svg{width:20px;height:20px}
.info-item__label{font-size:.8rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em}
html[dir="rtl"] .info-item__label{text-transform:none; letter-spacing:0}
.info-item__value{font-weight:700; font-size:1.02rem; word-break:break-word}

.form{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px; box-shadow:var(--shadow-sm);
}
.field{margin-bottom:17px}
.field label{display:block; font-size:.88rem; font-weight:700; margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%; padding:12px 14px; font:inherit; font-size:.97rem;
  border:1px solid var(--line); border-radius:11px; background:#fbfdfe; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(74,159,232,.16); background:#fff;
}
.form .btn{width:100%}
.form__note{font-size:.84rem; color:var(--ink-soft); margin:14px 0 0; text-align:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900); color:rgba(255,255,255,.62); padding-block:56px 0; font-size:.94rem}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:38px; padding-bottom:40px}
.site-footer h4{color:#fff; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1em}
html[dir="rtl"] .site-footer h4{letter-spacing:0; text-transform:none; font-size:.95rem}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin-bottom:9px}
.site-footer a:hover{color:var(--teal)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-block:22px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.87rem;
}
.footer-about{max-width:40ch}

/* ---------- Page header (inner pages) ---------- */
.page-head{
  background:linear-gradient(165deg,var(--navy-900),var(--navy-800));
  color:#fff; padding-block:clamp(54px,7vw,84px);
  position:relative; overflow:hidden;
}
.page-head::after{
  content:''; position:absolute; inset-block-start:-40%; inset-inline-end:-10%;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(74,159,232,.25), transparent 68%);
}
.page-head .wrap{position:relative; z-index:1}
.page-head h1{color:#fff; margin-bottom:.25em}
.page-head p{color:rgba(255,255,255,.74); max-width:60ch; margin:0; font-size:1.05rem}

/* ---------- Utility ---------- */
.lead{font-size:1.1rem; color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.mt-0{margin-top:0}
.tag{
  display:inline-block; padding:5px 12px; border-radius:99px;
  background:var(--teal-soft); color:var(--teal-dark);
  font-size:.8rem; font-weight:700; margin:0 6px 6px 0;
}
html[dir="rtl"] .tag{margin:0 0 6px 6px}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .grid--2{grid-template-columns:1fr}
}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-about{grid-column:1/-1}
}
@media (max-width:780px){
  .nav__toggle{display:block; margin-inline-start:auto}
  .nav__actions{margin-inline-start:10px}
  .nav__links{
    position:absolute; inset-inline:0; top:74px;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy-900); border-bottom:1px solid rgba(255,255,255,.1);
    padding:10px 16px 18px; margin:0;
    display:none;
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:13px 12px; font-size:1rem; border-radius:10px}
  .cta-band{flex-direction:column; align-items:flex-start}
  .footer-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}