/* ==========================================================================
   Awad Tech — Homepage sections
   ========================================================================== */

/* ---- hero ---- */
.hero{
  position:relative;isolation:isolate;
  min-block-size:min(92vh,860px);
  display:flex;align-items:center;
  padding-block:calc(var(--nav-h) + 3rem) 4rem;
  background:#050A15;
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero__media img{
  inline-size:100%;block-size:100%;object-fit:cover;object-position:70% 50%;
  animation:heroDrift 46s var(--ease-soft) -6s infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  from{transform:scale(1.04) translate3d(-1.2%,-.6%,0)}
  to{transform:scale(1.12) translate3d(1.2%,.8%,0)}
}
/* live particle network drawn over the still */
.hero__canvas{
  position:absolute;inset:0;z-index:-2;
  inline-size:100%;block-size:100%;pointer-events:none;
}
/* the shot is composed calm-left / detailed-right: mirror it for RTL so the
   headline always sits over the calm half */
[dir="rtl"] .hero__media img{animation-name:heroDriftRtl}
@keyframes heroDriftRtl{
  from{transform:scaleX(-1) scale(1.04) translate3d(-1.2%,-.6%,0)}
  to{transform:scaleX(-1) scale(1.12) translate3d(1.2%,.8%,0)}
}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right, rgba(5,10,21,.94) 0%, rgba(5,10,21,.82) 38%, rgba(5,10,21,.30) 72%, rgba(5,10,21,.15) 100%),
    linear-gradient(to bottom, rgba(5,10,21,.55) 0%, rgba(5,10,21,0) 30%, rgba(5,10,21,.5) 100%);
}
[dir="rtl"] .hero__veil{
  background:
    linear-gradient(to left, rgba(5,10,21,.94) 0%, rgba(5,10,21,.82) 38%, rgba(5,10,21,.30) 72%, rgba(5,10,21,.15) 100%),
    linear-gradient(to bottom, rgba(5,10,21,.55) 0%, rgba(5,10,21,0) 30%, rgba(5,10,21,.5) 100%);
}
.hero__inner{max-inline-size:min(100%,720px)}
.hero__eyebrow{color:var(--gold-400)}
.hero h1{
  font-size:var(--fs-display);color:var(--hero-ink);
  max-inline-size:17ch;margin-block-end:var(--sp-5);
}
:lang(ar) .hero h1{max-inline-size:19ch}
.hero__sub{
  color:var(--hero-ink-2);font-size:var(--fs-lead);max-inline-size:56ch;
  margin-block-end:var(--sp-6);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.hero__pills{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-block-start:var(--sp-7);padding-block-start:var(--sp-5);
  border-block-start:1px solid rgba(255,255,255,.14);
}
.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .9rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  color:var(--hero-ink-2);font-size:.83rem;font-weight:500;
}
.pill::before{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:var(--gold-400);flex:none}
@media (max-width:700px){
  .hero{min-block-size:auto;padding-block:calc(var(--nav-h) + 2.5rem) 3rem}
  .hero__media img{object-position:60% 50%}
  .hero__veil{background:linear-gradient(to bottom, rgba(5,10,21,.86) 0%, rgba(5,10,21,.78) 55%, rgba(5,10,21,.92) 100%)}
  [dir="rtl"] .hero__veil{background:linear-gradient(to bottom, rgba(5,10,21,.86) 0%, rgba(5,10,21,.78) 55%, rgba(5,10,21,.92) 100%)}
}

/* ---- services ---- */
.svc-grid{display:grid;gap:clamp(1rem,.6rem + 1vw,1.4rem);grid-template-columns:repeat(6,1fr)}
.svc-grid > *:nth-child(1),
.svc-grid > *:nth-child(2),
.svc-grid > *:nth-child(3){grid-column:span 2}
.svc-grid > *:nth-child(4),
.svc-grid > *:nth-child(5){grid-column:span 3}
@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .svc-grid > *{grid-column:span 1 !important}
}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}}

/* ---- technology capabilities band ---- */
.techband{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(3rem,2rem + 4vw,5.5rem);
  background:#060D1A;
}
.techband__media{position:absolute;inset:0;z-index:-2}
.techband__media img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 60%}
.techband__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom, rgba(6,13,26,.92) 0%, rgba(6,13,26,.62) 45%, rgba(6,13,26,.90) 100%);
}
.techband .eyebrow{color:var(--gold-400)}
.techband h2{color:#EEF4FF;font-size:var(--fs-h2);max-inline-size:20ch}
.techband__lead{color:#AFC3E4;margin-block-start:var(--sp-4);max-inline-size:56ch}
.tech-cols{
  display:grid;gap:clamp(1.2rem,.8rem + 1.6vw,2.2rem);
  grid-template-columns:repeat(4,1fr);
  margin-block-start:clamp(2rem,1.4rem + 2vw,3rem);
}
.tech-col h3{
  color:#EEF4FF;font-size:.98rem;margin-block-end:var(--sp-3);
  padding-block-end:var(--sp-3);border-block-end:1px solid rgba(255,255,255,.16);
}
.tech-col li{
  color:#A9BEDF;font-size:.88rem;line-height:1.5;
  padding-block:.32rem;padding-inline-start:1rem;position:relative;
}
.tech-col li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.72em;
  inline-size:4px;block-size:4px;border-radius:50%;background:var(--gold-400);
}
@media (max-width:900px){.tech-cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tech-cols{grid-template-columns:1fr}}

/* ---- business applications ---- */
.apps-feature{
  display:grid;gap:clamp(1.6rem,1rem + 3vw,3.5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  padding:clamp(1.6rem,1rem + 2.4vw,3rem);
  border-radius:var(--r-xl);
  background:
    linear-gradient(135deg,var(--primary-soft),transparent 62%),
    var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}
.apps-feature__visual{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border);aspect-ratio:16/11;
}
.apps-feature__visual img{inline-size:100%;block-size:100%;object-fit:cover}
.apps-feature__visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(5,10,21,.05),rgba(5,10,21,.45));
}
.badge{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.32rem .8rem;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent);
  font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  margin-block-end:var(--sp-4);
}
:lang(ar) .badge{text-transform:none;letter-spacing:0;font-size:.8rem}
.apps-feature h3{font-size:var(--fs-h2);margin-block-end:var(--sp-4)}
.apps-feature__text{color:var(--text-2);margin-block-end:var(--sp-5)}
.apps-feature__note{
  margin-block-start:var(--sp-4);font-size:.84rem;color:var(--text-3);
  padding-inline-start:.75rem;border-inline-start:2px solid var(--accent);
}
@media (max-width:880px){.apps-feature{grid-template-columns:1fr}}

.apps-list{margin-block-start:clamp(2rem,1rem + 3vw,3.5rem)}
.apps-list h3{font-size:var(--fs-h3);margin-block-end:var(--sp-5)}
.chip-grid{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1.05rem;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);
  font-size:.9rem;color:var(--text-2);
  transition:border-color var(--dur) var(--ease-soft),color var(--dur) var(--ease-soft),
             background-color var(--dur) var(--ease-soft),transform var(--dur) var(--ease-out);
}
.chip:hover{border-color:var(--primary);color:var(--text);transform:translateY(-2px)}
.chip svg{inline-size:15px;block-size:15px;color:var(--primary);flex:none}

/* ---- why ---- */
.why-grid{display:grid;gap:clamp(1.4rem,1rem + 1.6vw,2.4rem);grid-template-columns:repeat(3,1fr)}
.why{padding-block-start:var(--sp-4);border-block-start:2px solid var(--border)}
.why:hover{border-block-start-color:var(--accent)}
.why{transition:border-color var(--dur) var(--ease-soft)}
.why__n{
  font-family:var(--font-mono);font-size:.76rem;color:var(--accent);
  letter-spacing:.1em;display:block;margin-block-end:var(--sp-3);
}
.why h3{font-size:1.06rem;margin-block-end:var(--sp-2)}
.why p{color:var(--text-2);font-size:.93rem}
@media (max-width:880px){.why-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr}}

/* ---- industries ---- */
.ind-grid{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;grid-template-columns:repeat(4,1fr)}
.ind{
  background:var(--surface);padding:clamp(1.2rem,.9rem + 1vw,1.8rem);
  transition:background-color var(--dur) var(--ease-soft);
}
.ind:hover{background:var(--surface-2)}
.ind__icon{color:var(--primary);margin-block-end:var(--sp-3)}
.ind__icon svg{inline-size:24px;block-size:24px}
.ind h3{font-size:1rem;margin-block-end:var(--sp-2)}
.ind p{font-size:.87rem;color:var(--text-3)}
@media (max-width:980px){.ind-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ind-grid{grid-template-columns:1fr}}

/* ---- process ---- */
.proc{
  display:grid;gap:0;grid-template-columns:repeat(6,1fr);
  counter-reset:step;
}
.proc__step{position:relative;padding:var(--sp-5) var(--sp-4) var(--sp-4)}
.proc__step::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;
  block-size:2px;background:var(--border);
}
.proc__step::after{
  content:"";position:absolute;inset-block-start:-4px;inset-inline-start:0;
  inline-size:10px;block-size:10px;border-radius:50%;
  background:var(--bg);border:2px solid var(--primary);
}
.proc__step:first-child::before{border-start-start-radius:2px}
.proc__n{
  font-family:var(--font-mono);font-size:.74rem;color:var(--primary);
  letter-spacing:.12em;display:block;margin-block-end:var(--sp-2);
}
.proc__step h3{font-size:1rem;margin-block-end:var(--sp-2)}
.proc__step p{font-size:.86rem;color:var(--text-2)}
@media (max-width:1000px){.proc{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.proc{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.proc{grid-template-columns:1fr}}

/* ---- closing CTA ---- */
.cta{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(2.4rem,1.5rem + 4vw,5rem) clamp(1.5rem,1rem + 3vw,4rem);
  background:linear-gradient(135deg,#0C1A38 0%,#122A57 55%,#0A1730 100%);
  text-align:center;
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:
    radial-gradient(60% 70% at 15% 20%, rgba(91,147,255,.30), transparent 70%),
    radial-gradient(50% 60% at 85% 80%, rgba(197,160,89,.22), transparent 70%);
}
.cta h2{color:#F2F6FF;font-size:var(--fs-h2);max-inline-size:22ch;margin-inline:auto}
.cta p{color:#B9C8E6;margin-block:var(--sp-4) var(--sp-6);max-inline-size:56ch;margin-inline:auto}
.cta__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}
.cta .btn--primary{--btn-bg:#fff;--btn-fg:#0B1526}
.cta .btn--primary:hover{--btn-bg:var(--gold-400)}