/* ==========================================================================
   Awad Tech — inner page components
   Shared design system; each page varies its accent and section order so no
   two pages read as the same template.
   ========================================================================== */

/* ---- page hero ---- */
.phero{
  position:relative;isolation:isolate;overflow:hidden;
  background:#060D1A;
  padding-block:calc(var(--nav-h) + clamp(3rem,2rem + 4vw,5.5rem)) clamp(3rem,2rem + 4vw,5rem);
}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media img{inline-size:100%;block-size:100%;object-fit:cover;object-position:60% 50%}
[dir="rtl"] .phero__media img{transform:scaleX(-1)}
.phero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right, rgba(6,13,26,.95) 0%, rgba(6,13,26,.84) 42%, rgba(6,13,26,.40) 78%, rgba(6,13,26,.22) 100%),
    linear-gradient(to bottom, rgba(6,13,26,.66) 0%, rgba(6,13,26,0) 34%, rgba(6,13,26,.60) 100%);
}
[dir="rtl"] .phero__veil{
  background:
    linear-gradient(to left, rgba(6,13,26,.95) 0%, rgba(6,13,26,.84) 42%, rgba(6,13,26,.40) 78%, rgba(6,13,26,.22) 100%),
    linear-gradient(to bottom, rgba(6,13,26,.66) 0%, rgba(6,13,26,0) 34%, rgba(6,13,26,.60) 100%);
}
.phero__inner{max-inline-size:min(100%,660px)}
.phero .eyebrow{color:var(--gold-400)}
.phero h1{color:#F1F6FF;font-size:var(--fs-h1);max-inline-size:18ch}
.phero__lead{color:#AFC3E4;font-size:var(--fs-lead);margin-block-start:var(--sp-4);max-inline-size:54ch}
.phero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-block-start:var(--sp-6)}

/* ---- breadcrumbs ---- */
.crumbs{margin-block-end:var(--sp-4);font-size:.82rem;color:#8FA6CC}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.crumbs a{color:#AFC3E4;transition:color var(--dur) var(--ease-soft)}
.crumbs a:hover{color:#fff}
.crumbs li:not(:last-child)::after{content:"/";margin-inline-start:.45rem;opacity:.5}
[dir="rtl"] .crumbs li:not(:last-child)::after{content:"\\"}
.crumbs [aria-current]{color:var(--gold-400)}

/* ---- overview split ---- */
.split{
  display:grid;gap:clamp(1.8rem,1.2rem + 3vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}
.split--visual{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.split__visual{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border);aspect-ratio:4/3;
}
.split__visual img{inline-size:100%;block-size:100%;object-fit:cover}
.split__visual::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(6,13,26,.06),rgba(6,13,26,.42))}
@media (max-width:860px){.split,.split--visual{grid-template-columns:1fr}}

.prose p + p{margin-block-start:var(--sp-4)}
.prose{color:var(--text-2);max-inline-size:60ch}
.prose strong{color:var(--text);font-weight:600}

/* ---- capability list (two columns of ticked items) ---- */
.caps{display:grid;gap:.1rem 2rem;grid-template-columns:1fr 1fr}
.caps li{
  display:flex;gap:.7rem;align-items:flex-start;
  padding-block:.62rem;border-block-end:1px solid var(--border);
  font-size:.93rem;color:var(--text-2);
}
.caps li svg{inline-size:16px;block-size:16px;flex:none;margin-block-start:.28em;color:var(--primary)}
@media (max-width:700px){.caps{grid-template-columns:1fr}}

/* ---- benefit tiles ---- */
.tiles{display:grid;gap:clamp(1rem,.7rem + 1vw,1.4rem);grid-template-columns:repeat(3,1fr)}
.tile{
  padding:clamp(1.3rem,1rem + 1vw,1.8rem);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);
  transition:border-color var(--dur) var(--ease-soft),transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.tile:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.tile__k{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--accent);display:block;margin-block-end:var(--sp-3);
}
:lang(ar) .tile__k{font-family:var(--font-body);letter-spacing:0;text-transform:none}
.tile h3{font-size:1.05rem;margin-block-end:var(--sp-2)}
.tile p{font-size:.92rem;color:var(--text-2)}
@media (max-width:880px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}

/* ---- numbered delivery steps (vertical rail) ---- */
.rail{display:grid;gap:0;max-inline-size:820px}
.rail__item{
  position:relative;padding-inline-start:3.2rem;padding-block:0 var(--sp-6);
}
.rail__item::before{
  content:"";position:absolute;inset-inline-start:15px;inset-block:.55rem 0;
  inline-size:1px;background:var(--border);
}
.rail__item:last-child::before{display:none}
.rail__n{
  position:absolute;inset-inline-start:0;inset-block-start:0;
  inline-size:32px;block-size:32px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary);
  font-family:var(--font-mono);font-size:.76rem;font-weight:600;
  border:1px solid var(--border-strong);
}
.rail__item h3{font-size:1.05rem;margin-block-end:var(--sp-2)}
.rail__item p{color:var(--text-2);font-size:.94rem;max-inline-size:58ch}

/* ---- FAQ (reuses .qa from core.css) ---- */

/* ---- inline CTA band ---- */
.ctaband{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(2rem,1.4rem + 3vw,3.6rem) clamp(1.4rem,1rem + 3vw,3.2rem);
  background:linear-gradient(135deg,#0C1A38 0%,#122A57 55%,#0A1730 100%);
  display:grid;gap:var(--sp-5);
  grid-template-columns:minmax(0,1fr) auto;align-items:center;
}
.ctaband::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background:
    radial-gradient(58% 70% at 12% 20%, rgba(91,147,255,.32), transparent 70%),
    radial-gradient(50% 60% at 88% 82%, rgba(197,160,89,.22), transparent 70%);
}
.ctaband h2{color:#F2F6FF;font-size:var(--fs-h3);max-inline-size:26ch}
.ctaband p{color:#B9C8E6;margin-block-start:var(--sp-2);font-size:.95rem;max-inline-size:52ch}
.ctaband .btn--primary{--btn-bg:#fff;--btn-fg:#0B1526}
.ctaband .btn--primary:hover{--btn-bg:var(--gold-400)}
@media (max-width:760px){.ctaband{grid-template-columns:1fr}}

/* ---- stat strip ---- */
.strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
}
.strip__cell{background:var(--surface);padding:clamp(1.1rem,.9rem + .8vw,1.6rem)}
.strip__cell h3{font-size:.95rem;margin-block-end:var(--sp-2)}
.strip__cell p{font-size:.86rem;color:var(--text-2)}
@media (max-width:900px){.strip{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.strip{grid-template-columns:1fr}}

/* ---- product page: module grid ---- */
.modules{display:grid;gap:clamp(.9rem,.6rem + 1vw,1.3rem);grid-template-columns:repeat(3,1fr)}
.module{
  padding:clamp(1.2rem,.9rem + 1vw,1.6rem);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);
  transition:border-color var(--dur) var(--ease-soft),background-color var(--dur) var(--ease-soft);
}
.module:hover{border-color:var(--primary);background:var(--surface-2)}
.module__icon{color:var(--primary);margin-block-end:var(--sp-3)}
.module__icon svg{inline-size:20px;block-size:20px}
.module h3{font-size:.98rem;margin-block-end:var(--sp-2)}
.module p{font-size:.87rem;color:var(--text-2)}
@media (max-width:900px){.modules{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.modules{grid-template-columns:1fr}}

/* ---- product page: dashboard sketch (drawn, not a screenshot) ---- */
.sketch{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--shadow-lg);
}
.sketch__bar{
  display:flex;align-items:center;gap:.45rem;
  padding:.7rem .9rem;background:var(--surface-2);border-block-end:1px solid var(--border);
}
.sketch__dot{inline-size:9px;block-size:9px;border-radius:50%;background:var(--border-strong)}
.sketch__label{
  margin-inline-start:.6rem;font-family:var(--font-mono);font-size:.72rem;color:var(--text-3);
}
:lang(ar) .sketch__label{font-family:var(--font-body)}
.sketch__body{display:grid;grid-template-columns:170px 1fr;min-block-size:330px}
.sketch__side{
  border-inline-end:1px solid var(--border);padding:var(--sp-4);
  display:grid;gap:.55rem;align-content:start;background:var(--surface-2);
}
.sketch__nav{
  display:flex;align-items:center;gap:.55rem;
  padding:.45rem .55rem;border-radius:var(--r-sm);
  font-size:.82rem;color:var(--text-2);
}
.sketch__nav.is-on{background:var(--primary-soft);color:var(--primary);font-weight:600}
.sketch__nav span:first-child{inline-size:6px;block-size:6px;border-radius:2px;background:currentColor;flex:none}
.sketch__main{padding:var(--sp-4);display:grid;gap:var(--sp-4);align-content:start}
.sketch__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.kpi{padding:.7rem .8rem;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.kpi b{display:block;font-family:var(--font-mono);font-size:1.05rem;color:var(--text)}
.kpi span{font-size:.7rem;color:var(--text-3)}
.sketch__chart{
  block-size:110px;border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.7rem;display:flex;align-items:flex-end;gap:.4rem;background:var(--surface);
}
.sketch__chart i{
  flex:1;background:linear-gradient(to top,var(--primary),color-mix(in srgb,var(--primary) 40%,transparent));
  border-radius:2px 2px 0 0;
}
.sketch__rows{display:grid;gap:.4rem}
.sketch__row{
  display:grid;grid-template-columns:1fr 80px 70px;gap:.6rem;align-items:center;
  padding:.5rem .6rem;border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:.76rem;color:var(--text-2);background:var(--surface);
}
.pillbadge{
  justify-self:start;padding:.14rem .5rem;border-radius:var(--r-pill);
  font-size:.68rem;font-weight:600;
}
.pillbadge--ok{background:var(--success-soft);color:var(--success)}
.pillbadge--warn{background:var(--accent-soft);color:var(--accent)}
.sketch__note{
  padding:.7rem .9rem;font-size:.78rem;color:var(--text-3);
  border-block-start:1px solid var(--border);background:var(--surface-2);
}
@media (max-width:700px){
  .sketch__body{grid-template-columns:1fr}
  .sketch__side{border-inline-end:0;border-block-end:1px solid var(--border);grid-template-columns:repeat(2,1fr)}
  .sketch__kpis{grid-template-columns:1fr 1fr}
  .sketch__row{grid-template-columns:1fr 70px}
  .sketch__row span:last-child{display:none}
}

/* ---- about page ---- */
.values{display:grid;gap:clamp(1rem,.7rem + 1vw,1.5rem);grid-template-columns:repeat(2,1fr)}
.value{padding-inline-start:var(--sp-5);border-inline-start:2px solid var(--accent)}
.value h3{font-size:1.02rem;margin-block-end:var(--sp-2)}
.value p{color:var(--text-2);font-size:.93rem}
@media (max-width:700px){.values{grid-template-columns:1fr}}

/* ---- contact page ---- */
.contact-grid{
  display:grid;gap:clamp(1.8rem,1.2rem + 3vw,3.5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;
}
.info-list{display:grid;gap:var(--sp-4);margin-block-start:var(--sp-6)}
.info{display:flex;gap:.9rem;align-items:flex-start}
.info__ic{
  inline-size:38px;block-size:38px;flex:none;border-radius:var(--r-md);
  display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);
}
.info__ic svg{inline-size:17px;block-size:17px}
.info h3{font-size:.88rem;margin-block-end:.15rem}
.info p{font-size:.92rem;color:var(--text-2)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ---- related pages ---- */
.related{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
.related a{
  padding:var(--sp-5);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);
  transition:border-color var(--dur) var(--ease-soft),transform var(--dur) var(--ease-out);
}
.related a:hover{border-color:var(--primary);transform:translateY(-3px)}
.related h3{font-size:.98rem;margin-block-end:var(--sp-2)}
.related p{font-size:.86rem;color:var(--text-3)}
@media (max-width:800px){.related{grid-template-columns:1fr}}