/* ============================================================
   Ahmed Mostafa — portfolio design system
   Ported from the source page for an Elementor container build.
   Elementor-specific adjustments are marked  [E]
   ============================================================ */
:root{
  --void:#05060A;
  --void-2:#090B11;
  --panel:#0C0F16;
  --panel-2:#11151E;
  --edge:#1B2130;
  --edge-2:#141A26;
  --txt:#E9EBF2;
  --txt-2:#9AA1B4;
  --txt-3:#5E6679;
  --aqua:#4FD8C4;
  --violet:#8B6CFF;
  --glow-a:rgba(79,216,196,.16);
  --glow-v:rgba(139,108,255,.16);

  --f-disp:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --s--1:clamp(.72rem,.69rem + .12vw,.8rem);
  --s-0:clamp(.95rem,.92rem + .16vw,1.05rem);
  --s-1:clamp(1.1rem,1.02rem + .34vw,1.3rem);
  --s-2:clamp(1.5rem,1.25rem + 1.1vw,2.3rem);
  --s-3:clamp(2.1rem,1.5rem + 2.6vw,3.9rem);
  --s-4:clamp(2.9rem,1.4rem + 7vw,8rem);

  --gut:clamp(1.1rem,4vw,3rem);
  --maxw:1320px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--void);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:var(--s-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[dir="rtl"] body{
  --f-disp:"Noto Kufi Arabic","Bricolage Grotesque",sans-serif;
  --f-body:"IBM Plex Sans Arabic","Instrument Sans",sans-serif;
  --f-mono:"IBM Plex Sans Arabic",monospace;
  line-height:1.85;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:1px solid var(--aqua);outline-offset:4px}
::selection{background:var(--violet);color:#fff}

/* [E] neutralise Elementor's own wrappers so the design's own spacing rules
   are the only ones in play */
.e-con{
  --padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;
  --row-gap:0px;--column-gap:0px;
}
/* [E] Elementor's global typography/colour defaults hit widget internals at
   0,2,0 — heavier than a bare tag rule — so restate the design's values at
   the same weight. Per-element classes further down override these. */
.elementor-widget-heading .elementor-heading-title{
  font-family:var(--f-disp);font-weight:200;color:var(--txt);
}
.elementor-widget-heading h3.elementor-heading-title{font-weight:400;letter-spacing:-.02em}
.elementor-widget-text-editor{
  font-family:var(--f-body);font-weight:400;color:var(--txt-2);
}
.elementor-widget-container{margin:0}
.elementor-widget:not(:last-child){margin-block-end:0}
.elementor-element{--widgets-spacing:0px}
.pf-sec>.e-con-inner{width:100%;max-width:none;padding:0}

/* particle field --------------------------------------------- */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
#halo{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% 34%, var(--glow-v), transparent 68%),
    radial-gradient(42% 34% at 62% 46%, var(--glow-a), transparent 70%);
}
#grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

/* [E] every top-level band sits above the fixed canvas layers */
.pf-sec{position:relative;z-index:2;width:100%;max-width:none;--display:block;display:block}
.pf-flow{padding-block:clamp(3.5rem,8vw,7rem)}

.wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  --display:block;display:block;
}

.mono{
  font-family:var(--f-mono);font-size:var(--s--1);
  letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);
}
.mono .elementor-heading-title,.mono p{font:inherit;color:inherit;letter-spacing:inherit}
html[dir="rtl"] .mono{letter-spacing:0;text-transform:none;font-size:var(--s-0)}

h1,h2,h3{font-family:var(--f-disp);font-weight:200;margin:0;line-height:.98;letter-spacing:-.035em;text-wrap:balance}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{letter-spacing:0;line-height:1.3;font-weight:200}
h2{font-size:var(--s-3)}
h3{font-size:var(--s-1);font-weight:400;letter-spacing:-.02em;line-height:1.2}
p{margin:0}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  background:linear-gradient(180deg, rgba(5,6,10,.88), rgba(5,6,10,0));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .4s;
}
.nav-in{display:flex;align-items:center;gap:1.2rem;height:64px}
.mark{display:flex;align-items:center;gap:.55rem;text-decoration:none;margin-inline-end:auto}
.mark i{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--aqua),var(--violet));
  box-shadow:0 0 14px 2px rgba(139,108,255,.65);
}
.mark span{font-family:var(--f-disp);font-size:1rem;font-weight:400;letter-spacing:-.02em}
.nav-links{display:none;gap:2rem}
@media (min-width:900px){.nav-links{display:flex}}
.nav-links a{
  text-decoration:none;font-family:var(--f-mono);font-size:var(--s--1);
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);transition:color .3s;
}
html[dir="rtl"] .nav-links a{letter-spacing:0;text-transform:none;font-size:var(--s-0)}
.nav-links a:hover{color:var(--txt)}
.lang{display:inline-flex;border:1px solid var(--edge);border-radius:999px;padding:2px;background:rgba(12,15,22,.7)}
.lang button{
  font:inherit;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;
  border:0;background:none;color:var(--txt-3);cursor:pointer;padding:.3rem .6rem;border-radius:999px;
  line-height:1;transition:.25s;
}
.lang button[aria-pressed="true"]{background:var(--txt);color:var(--void)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:clamp(560px,84vh,900px);
  display:flex;--display:flex;flex-direction:column;--flex-direction:column;
  justify-content:flex-end;
  padding-block:8rem 3.2rem;
}
.hero-top{
  display:flex;--display:flex;flex-direction:row;--flex-direction:row;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-block-end:auto;
  width:100%;
}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--edge);border-radius:999px;padding:.34rem .8rem;
  background:rgba(12,15,22,.55);color:var(--txt-2);
  font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase;
}
html[dir="rtl"] .chip{letter-spacing:0;text-transform:none}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--aqua);box-shadow:0 0 10px var(--aqua)}
.hero-top>.chip-w{width:auto;flex:0 0 auto}
.hero-top>.mono{width:auto;flex:0 0 auto;align-self:center}

.hero-h1 .elementor-heading-title,.hero-h1 h1{font-size:var(--s-4);max-width:14ch}
.hero-h1 em{
  font-style:normal;font-weight:400;
  background:linear-gradient(96deg,var(--aqua),var(--violet) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-foot{
  display:grid;--display:grid;gap:1.6rem;margin-block-start:2.2rem;align-items:end;
  border-block-start:1px solid var(--edge-2);padding-block-start:1.6rem;width:100%;
}
@media (min-width:900px){.hero-foot{grid-template-columns:minmax(0,1fr) auto}}
.lede,.lede p{color:var(--txt-2);max-width:50ch;font-size:var(--s-1);line-height:1.55}
.cta-row{
  display:flex;--display:flex;flex-direction:row;--flex-direction:row;
  flex-wrap:wrap;gap:.7rem;width:auto;
}

/* buttons — [E] Elementor button widget markup */
.btn{width:auto;flex:0 0 auto}
.btn .elementor-button{
  --bx:0px;
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;white-space:nowrap;
  font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em;text-transform:uppercase;
  padding:.9rem 1.5rem;border-radius:999px;border:1px solid transparent;
  background:var(--txt);color:var(--void);fill:var(--void);
  transform:translateX(var(--bx));
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .35s, color .35s;
}
html[dir="rtl"] .btn .elementor-button{letter-spacing:0;text-transform:none;font-size:var(--s-0)}
.btn .elementor-button:hover{box-shadow:0 0 34px -6px rgba(139,108,255,.7)}
.btn.arrow .elementor-button-text::after{content:"\2192";display:inline-block;margin-inline-start:.6rem;transition:transform .3s}
.btn.arrow .elementor-button:hover .elementor-button-text::after{transform:translateX(4px)}
html[dir="rtl"] .btn.arrow .elementor-button-text::after{transform:scaleX(-1)}
html[dir="rtl"] .btn.arrow .elementor-button:hover .elementor-button-text::after{transform:scaleX(-1) translateX(4px)}
.btn.ghost .elementor-button{background:none;color:var(--txt);border-color:var(--edge)}
.btn.ghost .elementor-button:hover{border-color:var(--aqua);color:var(--aqua);box-shadow:0 0 30px -10px rgba(79,216,196,.7)}

/* ============================================================
   BELT
   ============================================================ */
.belt{
  border-block:1px solid var(--edge-2);padding-block:.9rem;overflow:hidden;
  background:rgba(9,11,17,.6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.belt-track{display:flex;width:max-content;animation:slide 52s linear infinite}
.belt:hover .belt-track{animation-play-state:paused}
.belt b{
  font-family:var(--f-mono);font-weight:400;font-size:var(--s--1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-3);padding-inline:1.4rem;white-space:nowrap;
}
.belt b::after{content:"/";color:var(--violet);margin-inline-start:1.4rem}
@keyframes slide{to{transform:translateX(-50%)}}
html[dir="rtl"] .belt-track{animation-direction:reverse}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.sec-head{
  display:flex;--display:flex;flex-direction:row;--flex-direction:row;
  align-items:end;gap:1.5rem;flex-wrap:wrap;margin-block-end:clamp(1.8rem,4vw,3.2rem);width:100%;
}
.sec-head>.sec-h2{flex:1 1 16ch;width:auto}
.sec-note,.sec-note p{color:var(--txt-3);max-width:30ch;font-size:var(--s-0)}
.sec-head>.sec-note{flex:0 1 30ch;width:auto}

/* WORK ------------------------------------------------------- */
.work{display:grid;--display:grid;gap:clamp(1.2rem,2.6vw,2rem);grid-template-columns:1fr;width:100%}
@media (min-width:720px){.work{grid-template-columns:repeat(2,minmax(0,1fr))}}
.proj{display:block;--display:block;text-decoration:none;position:relative;width:100%}
.frame{
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:10px;
  border:1px solid var(--edge-2);
  background:
    radial-gradient(80% 70% at 30% 20%, rgba(139,108,255,.22), transparent 62%),
    radial-gradient(70% 60% at 76% 74%, rgba(79,216,196,.16), transparent 66%),
    linear-gradient(160deg,var(--panel),var(--void-2));
  display:grid;place-items:center;
  transition:border-color .5s, box-shadow .6s, transform .6s cubic-bezier(.2,.7,.2,1);
}
.proj:hover .frame{border-color:#2A3348;box-shadow:0 30px 70px -40px rgba(139,108,255,.9);transform:translateY(-4px)}
.frame img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .5s}
.proj:hover .frame img{transform:scale(1.045);opacity:1}
.glyph{
  font-family:var(--f-disp);font-weight:200;font-size:clamp(3.4rem,10vw,6rem);line-height:1;
  letter-spacing:-.05em;
  background:linear-gradient(150deg,#fff,var(--violet) 60%,var(--aqua));
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.proj:hover .glyph{transform:scale(1.07)}
.frame.empty{border-style:dashed;border-color:var(--edge);background:linear-gradient(160deg,rgba(12,15,22,.6),rgba(5,6,10,.6))}
.frame.empty .glyph{background:none;color:var(--txt-3);font-size:clamp(2.2rem,6vw,3.4rem);opacity:.7}
.sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.10) 50%,transparent 64%);
  transform:translateX(-130%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.proj:hover .sheen{transform:translateX(130%)}
.cap{
  display:flex;--display:flex;flex-direction:row;--flex-direction:row;
  align-items:baseline;gap:1rem;padding-block-start:1rem;width:100%;
}
.cap>.proj-title{flex:1;width:auto}
.cap>.kind{width:auto;flex:0 0 auto}
.kind,.kind .elementor-heading-title{font-family:var(--f-mono);font-size:var(--s--1);color:var(--txt-3);letter-spacing:.08em;white-space:nowrap;font-weight:400}
html[dir="rtl"] .kind{letter-spacing:0}
.desc,.desc p{color:var(--txt-2);font-size:calc(var(--s-0)*.96);margin-block-start:.5rem;max-width:52ch}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-start:.9rem}
.tag{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;color:var(--txt-3);
  border:1px solid var(--edge-2);border-radius:999px;padding:.2rem .6rem;
}
html[dir="rtl"] .tag{letter-spacing:0;font-size:.78rem}

/* CAPABILITIES ----------------------------------------------- */
.caps{border-block-start:1px solid var(--edge-2);width:100%;--display:block;display:block}
.cap-row{
  display:grid;--display:grid;gap:.4rem 2rem;grid-template-columns:auto 1fr;
  padding-block:1.5rem;border-block-end:1px solid var(--edge-2);
  transition:background .45s, padding-inline .45s;width:100%;
}
@media (min-width:840px){
  .cap-row{grid-template-columns:5rem minmax(0,20ch) minmax(0,1fr);align-items:start}
}
.cap-row:hover{background:linear-gradient(90deg,rgba(139,108,255,.07),transparent 70%)}
.idx,.idx .elementor-heading-title{font-family:var(--f-mono);font-size:var(--s--1);color:var(--violet);letter-spacing:.1em;font-weight:400}
.cap-row>.idx{padding-block-start:.4rem}
.cap-row>.cap-desc{grid-column:2}
.cap-row>.cap-desc,.cap-row>.cap-desc p{color:var(--txt-2);max-width:58ch;font-size:calc(var(--s-0)*.96)}
@media (min-width:840px){.cap-row>.cap-desc{grid-column:3}}

/* PROCESS ---------------------------------------------------- */
.steps{
  display:grid;--display:grid;gap:1px;background:var(--edge-2);
  border:1px solid var(--edge-2);border-radius:10px;overflow:hidden;width:100%;
}
@media (min-width:700px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{
  background:var(--void-2);padding:clamp(1.2rem,2.6vw,1.8rem);
  display:flex;--display:flex;flex-direction:column;--flex-direction:column;
  gap:.5rem;transition:background .4s;width:100%;
}
.step:hover{background:var(--panel)}
.step-n,.step-n .elementor-heading-title{font-family:var(--f-mono);font-size:var(--s--1);color:var(--aqua);letter-spacing:.14em;font-weight:400}
.step-d,.step-d p{color:var(--txt-2);font-size:calc(var(--s-0)*.95)}

/* ABOUT ------------------------------------------------------ */
.about{display:grid;--display:grid;gap:clamp(1.8rem,5vw,4rem);width:100%}
@media (min-width:900px){.about{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.pull,.pull .elementor-heading-title{
  font-family:var(--f-disp);font-weight:200;font-size:var(--s-2);line-height:1.22;letter-spacing:-.03em;
}
.pull{margin-block-start:1.1rem}
html[dir="rtl"] .pull{letter-spacing:0;line-height:1.6}
.about-col{--display:block;display:block;width:100%}
.about-copy p{color:var(--txt-2);max-width:56ch}
.about-copy p + p{margin-block-start:.9rem}
.figures{
  display:grid;--display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--edge-2);border:1px solid var(--edge-2);border-radius:10px;overflow:hidden;
  margin-block-start:2rem;width:100%;
}
.fig{
  background:var(--void-2);padding:1.1rem 1.2rem;width:100%;
  --display:block;display:block;
}
.fig-n,.fig-n .elementor-heading-title{
  display:block;font-family:var(--f-disp);font-weight:200;font-size:var(--s-2);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--txt);
}
.fig-l,.fig-l .elementor-heading-title{
  display:block;margin-block-start:.45rem;font-family:var(--f-mono);font-size:var(--s--1);
  color:var(--txt-3);letter-spacing:.06em;font-weight:400;
}
html[dir="rtl"] .fig-l{letter-spacing:0}

/* CONTACT ---------------------------------------------------- */
.contact{text-align:center;padding-block:clamp(4.5rem,11vw,9rem)}
.contact .sec-h2 .elementor-heading-title,.contact h2{font-size:var(--s-4);max-width:13ch;margin-inline:auto}
.contact .lede,.contact .lede p{margin:1.4rem auto 0;max-width:44ch}
.mailto{
  display:inline-block;margin-block-start:2rem;text-decoration:none;
  font-family:var(--f-mono);font-size:clamp(.9rem,2.6vw,1.4rem);color:var(--txt);
  border-block-end:1px solid var(--edge);padding-block-end:.35rem;transition:color .3s,border-color .3s;
}
.mailto:hover{color:var(--aqua);border-color:var(--aqua)}
.foot{
  border-block-start:1px solid var(--edge-2);
  display:flex;--display:flex;flex-direction:row;--flex-direction:row;flex-wrap:wrap;
  gap:.6rem 1.5rem;align-items:center;padding-block:1.4rem;width:100%;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;color:var(--txt-3);text-transform:uppercase;
}
.foot .elementor-heading-title{font:inherit;color:inherit;letter-spacing:inherit}
.foot>*{width:auto}
html[dir="rtl"] .foot{letter-spacing:0;text-transform:none;font-size:.85rem}
.foot .sp{margin-inline-start:auto}

/* ============================================================
   [E] CONTAINER LAYOUT OVERRIDES
   Elementor styles containers through `.e-con-full.e-flex` (0,2,0) and
   drives them with custom properties, which outranks a bare class rule.
   These set the properties Elementor actually reads, at matching weight.
   ============================================================ */
.e-con.hero{--flex-direction:column;flex-direction:column;--justify-content:flex-end}
.e-con.hero-top{
  --flex-direction:row;flex-direction:row;--flex-wrap:wrap;
  --justify-content:space-between;--row-gap:1rem;--column-gap:1rem;
}
.e-con.hero-foot{--row-gap:1.6rem;--column-gap:1.6rem;--align-items:end}
.e-con.cta-row{
  --flex-direction:row;flex-direction:row;--flex-wrap:wrap;
  --row-gap:.7rem;--column-gap:.7rem;
}
.e-con.sec-head{
  --flex-direction:row;flex-direction:row;--flex-wrap:wrap;--align-items:end;
  --row-gap:1.5rem;--column-gap:1.5rem;
}
.e-con.work{--row-gap:clamp(1.2rem,2.6vw,2rem);--column-gap:clamp(1.2rem,2.6vw,2rem)}
.e-con.cap{
  --flex-direction:row;flex-direction:row;--align-items:baseline;
  --row-gap:1rem;--column-gap:1rem;
}
.e-con.cap-row{--row-gap:.4rem;--column-gap:2rem}
.e-con.steps{--row-gap:1px;--column-gap:1px}
.e-con.step{--flex-direction:column;flex-direction:column;--row-gap:.5rem;--column-gap:.5rem}
.e-con.about{--row-gap:clamp(1.8rem,5vw,4rem);--column-gap:clamp(1.8rem,5vw,4rem)}
.e-con.figures{--row-gap:1px;--column-gap:1px}
.e-con.foot{
  --flex-direction:row;flex-direction:row;--flex-wrap:wrap;--align-items:center;
  --row-gap:.6rem;--column-gap:1.5rem;
}

/* MOTION ----------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.rise{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.d1{animation-delay:.1s}.d2{animation-delay:.22s}.d3{animation-delay:.36s}.d4{animation-delay:.5s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .rise{animation:none}
  .belt-track{animation:none}
}