/* =========================================================
   EASY TECHNOLOGY — Showcase
   Indigo & navy "executive-console" theme (OPOS / clientOS)
========================================================= */
:root{
  --navy:#13174B; --purple:#C20ECF; --indigo:#6366f1; --indigo-300:#818cf8; --indigo-200:#a5b4fc;
  --bg:#081120; --surface:#0d1428; --surface-2:#111a33; --stroke:#1b2440;
  --fg:#f1f5f9; --muted:#94a3b8; --muted-2:#64748b;
  --emerald:#34d399; --amber:#fbbf24; --rose:#fb7185; --cyan:#22d3ee;
  --ff:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --radius:24px; --radius-sm:16px;
  --maxw:1180px; --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
  --brand-gradient:
    radial-gradient(at 85% 0%,   rgba(194,14,207,0.45) 0, transparent 55%),
    radial-gradient(at 10% 100%, rgba(99,102,241,0.35) 0, transparent 55%),
    linear-gradient(135deg, #0a0d2e 0%, #13174B 45%, #3b1a6b 100%);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff); background:var(--bg); color:var(--fg);
  line-height:1.65; -webkit-font-smoothing:antialiased; font-feature-settings:"liga" 1,"kern" 1,"cv11" 1;
  /* subtle navy radial wash */
  background-image:
    radial-gradient(at 0% 0%, hsla(230,80%,30%,.30) 0, transparent 42%),
    radial-gradient(at 100% 0%, hsla(200,80%,40%,.18) 0, transparent 42%);
  background-attachment:fixed;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3{ letter-spacing:-.02em; line-height:1.12; font-weight:800; }
::selection{ background:rgba(34,211,238,.3); color:#cffafe; }

/* ---------- micro-labels (the signature) ---------- */
.section-label{ display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); }
.app-kicker{ display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.22em; color:var(--indigo-200); }
.tone-dot{ width:8px; height:8px; border-radius:50%; background:var(--indigo); box-shadow:0 0 10px currentColor; color:var(--indigo); flex:none; display:inline-block; }
.td-indigo{ background:var(--indigo); color:var(--indigo); }
.td-emerald{ background:var(--emerald); color:var(--emerald); }
.td-cyan{ background:var(--cyan); color:var(--cyan); }
.td-amber{ background:var(--amber); color:var(--amber); }

.text-gradient{ background:linear-gradient(120deg,#fff 0%,#dbe2f1 45%,#94a3b8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- sheen sweep ---------- */
.sheen{ position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit; }
.sheen::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.16) 45%, rgba(255,255,255,.04) 55%, transparent 75%);
  transform:translateX(-140%) skewX(-20deg); animation:sheen 6.5s ease-in-out infinite; mix-blend-mode:screen; }
@keyframes sheen{ 0%{ transform:translateX(-140%) skewX(-20deg); } 55%,100%{ transform:translateX(220%) skewX(-20deg); } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,var(--indigo),var(--indigo-300)); color:#fff; font-weight:700; font-size:15px;
  padding:12px 22px; border-radius:var(--radius-sm); border:1px solid transparent;
  box-shadow:0 14px 34px rgba(99,102,241,.30);
  transition:transform .25s var(--ease), box-shadow .25s, background .25s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 20px 44px rgba(99,102,241,.45); }
.btn--ghost{ background:rgba(255,255,255,.04); color:#fff; border:1px solid rgba(255,255,255,.18); box-shadow:none; backdrop-filter:blur(8px); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); box-shadow:none; }
.btn--light{ background:#fff; color:var(--navy); box-shadow:0 14px 34px rgba(0,0,0,.3); }
.btn--light:hover{ background:#fff; }
.btn--sm{ font-size:13.5px; padding:9px 16px; }
.btn--lg{ font-size:16px; padding:15px 28px; }

/* ---------- header ---------- */
.head{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px var(--pad);
  background:rgba(8,17,32,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.head__brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; }
.head__logo{ width:30px; height:26px; object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 4px 14px rgba(99,102,241,.5)); }
.head__nav{ display:flex; gap:28px; margin-inline-start:auto; }
.head__nav a{ font-size:14.5px; font-weight:600; color:var(--muted); transition:color .2s; }
.head__nav a:hover{ color:var(--fg); }
.head__right{ display:flex; align-items:center; gap:14px; }
.head__cta{ font-size:14.5px; font-weight:700; padding:9px 18px; border:1px solid rgba(255,255,255,.16); border-radius:100px; transition:.2s; }
.head__cta:hover{ border-color:var(--indigo-300); color:var(--indigo-300); }
.lang-toggle{ font-family:var(--ff); font-size:13.5px; font-weight:700; color:var(--fg); cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:100px; padding:8px 16px; transition:.2s; }
.lang-toggle:hover{ background:rgba(99,102,241,.18); border-color:var(--indigo-300); }

/* ---------- RTL / Arabic ---------- */
:root[dir="rtl"] body, :root[lang="ar"] body{ font-family:"IBM Plex Sans Arabic", var(--ff); }
:root[dir="rtl"] .head__nav{ margin-inline-start:auto; }
/* mirror the alternating project layout so media/text stay balanced in RTL */
:root[dir="rtl"] .proj--rev .proj__media{ order:0; }
:root[dir="rtl"] .proj:not(.proj--rev) .proj__media{ order:2; }
:root[dir="rtl"] .app__cat, :root[dir="rtl"] .proj__cat, :root[dir="rtl"] .section-label, :root[dir="rtl"] .app-kicker{ letter-spacing:0; }
:root[dir="rtl"] .head__logo, :root[dir="rtl"] .foot__logo{ filter:brightness(0) invert(1) drop-shadow(0 4px 14px rgba(99,102,241,.5)); }

/* ---------- hero ---------- */
.hero{ max-width:var(--maxw); margin:0 auto; padding:clamp(40px,7vw,80px) var(--pad); }
.hero__panel{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid rgba(255,255,255,.12); color:#fff; background-image:var(--brand-gradient); padding:clamp(36px,7vw,84px); box-shadow:0 30px 70px -30px rgba(0,0,0,.6); }
.hero__title{ font-size:clamp(38px,7vw,76px); margin-top:22px; }
.hero__sub{ max-width:60ch; margin-top:22px; font-size:clamp(16px,1.8vw,20px); color:rgba(226,232,240,.82); }
.hero__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.hero__tags span{ font-size:13px; font-weight:600; color:rgba(255,255,255,.85); padding:7px 15px; border:1px solid rgba(255,255,255,.18); border-radius:100px; background:rgba(255,255,255,.05); backdrop-filter:blur(6px); }

/* ---------- section ---------- */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(50px,8vw,100px) var(--pad); }
#platforms{ padding-top:clamp(56px,9vw,110px); }
.section--alt{ max-width:none; background:linear-gradient(180deg, rgba(13,20,40,.5), rgba(8,17,32,.5)); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.section--alt .section__head,.section--alt .apps{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.section__head{ margin-bottom:clamp(36px,5vw,64px); }
.section__head .section-label{ margin-bottom:16px; }
.section__head h2{ font-size:clamp(26px,3.6vw,40px); }
.section__head p{ margin-top:12px; font-size:clamp(15px,1.6vw,18px); color:var(--muted); max-width:50ch; }

/* ---------- project row (each project = its own distinct card) ---------- */
.proj{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px,5vw,70px); align-items:center;
  padding:clamp(26px,4vw,46px);
  margin-bottom:clamp(20px,3vw,32px);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  background:radial-gradient(at 0% 0%, rgba(99,102,241,.06) 0, transparent 55%), linear-gradient(180deg, rgba(13,20,40,.7), rgba(8,12,26,.6));
  transition:transform .3s var(--ease), border-color .3s;
}
.proj:hover{ border-color:rgba(255,255,255,.16); transform:translateY(-3px); }
.proj:last-of-type{ margin-bottom:0; }
.proj--rev .proj__media{ order:2; }
.proj__head{ display:flex; align-items:center; gap:15px; margin-bottom:18px; }
.proj__logo{ width:54px; height:54px; border-radius:14px; object-fit:cover; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 10px 24px rgba(0,0,0,.4); }
.proj__logo--mono{ display:grid; place-items:center; font-size:24px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--amber),#f59e0b); box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 10px 24px rgba(251,191,36,.3); }
.proj__cat{ font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--indigo-300); }
.proj__name{ font-size:clamp(26px,3.6vw,40px); line-height:1.05; }
.proj__desc{ font-size:clamp(15px,1.6vw,18px); color:var(--muted); max-width:46ch; }
.proj__links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* ---------- frames (glass surfaces, no shadow in dark — border+gradient) ---------- */
.frame{ position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(at 0% 0%, rgba(99,102,241,.10) 0, transparent 55%), linear-gradient(180deg, rgba(13,20,40,.96), rgba(8,12,26,.94)); }
.frame img{ width:100%; height:auto; display:block; }
.frame--web::before{ content:""; display:block; height:34px; background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.07);
  background-image:radial-gradient(circle 4px at 18px 17px,rgba(255,255,255,.2) 50%,transparent 52%),radial-gradient(circle 4px at 36px 17px,rgba(255,255,255,.2) 50%,transparent 52%),radial-gradient(circle 4px at 54px 17px,rgba(255,255,255,.2) 50%,transparent 52%); }
.frame--ipad{ padding:14px; border-radius:28px; }
.frame--ipad img{ border-radius:14px; }
.frame__ph{ display:none; }
.frame--placeholder{ aspect-ratio:16/10; display:grid; place-items:center; }
.frame--placeholder .frame__ph{ display:block; font-weight:700; color:var(--muted); font-size:15px; }
.frame--placeholder::before{ display:none; }

/* ---------- Aura mini-recreation (matches the live site) ---------- */
.aura{ aspect-ratio:16/10; position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(20,32,52,.9), transparent 60%),
    linear-gradient(160deg,#0a1020 0%,#0c1424 50%,#0a0f1c 100%);
  background-color:#0a0f1c;
  display:flex; flex-direction:column;
  font-family:Georgia, "Times New Roman", serif;
}
.aura::before{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(212,175,110,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,110,.05) 1px,transparent 1px);
  background-size:42px 42px; -webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent); mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent); }
.aura__nav{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:4.5% 5% 0; }
.aura__brand{ font-size:clamp(11px,1.5vw,17px); letter-spacing:.02em; }
.aura__brand b{ color:#d4af6e; font-weight:700; }
.aura__links{ font-family:var(--ff); font-size:clamp(7px,.85vw,10px); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.aura__hero{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 6% 5%; }
.aura__eyebrow{ font-family:var(--ff); font-size:clamp(7px,.9vw,11px); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#d4af6e; margin-bottom:3%; }
.aura__title{ font-family:Georgia, serif; font-weight:400; font-size:clamp(20px,4.4vw,52px); line-height:1.04; letter-spacing:-.01em; color:#f4f1ea; }
.aura__title em{ color:#d4af6e; font-style:italic; }
.aura__sub{ font-family:var(--ff); font-size:clamp(8px,1.15vw,14px); color:rgba(226,232,240,.6); margin-top:3.5%; max-width:46ch; }
.aura__btns{ display:flex; gap:2.5%; margin-top:5%; }
.aura__btn{ font-family:var(--ff); font-size:clamp(7px,.95vw,11px); font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.9em 1.8em; border:1px solid rgba(255,255,255,.4); color:#fff; }
.aura__btn--gold{ background:#d4af6e; color:#1a1206; border-color:#d4af6e; }

/* ---------- apps grid — uniform 2-up cards ---------- */
.apps{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,32px); }
.app{ display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(at 0% 0%, rgba(99,102,241,.08) 0, transparent 55%), linear-gradient(180deg, rgba(13,20,40,.92), rgba(8,12,26,.9));
  transition:transform .3s var(--ease), border-color .3s; }
.app:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.16); }

/* the stage: identical size for every app; screenshot centered & fully visible */
.app__stage{ position:relative; height:340px; display:flex; align-items:center; justify-content:center;
  padding:26px; border-bottom:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(70% 60% at 50% 35%, rgba(99,102,241,.16), transparent 70%),
    linear-gradient(180deg, rgba(8,12,26,.5), rgba(8,12,26,.2)); }
.app__stage img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.5); }

.app__info{ display:flex; flex-direction:column; padding:22px clamp(18px,2vw,26px) 24px; }
.app__meta{ display:flex; align-items:center; gap:13px; }
.app__icon{ width:46px; height:46px; border-radius:12px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.1); flex:none; }
.app__meta h3{ font-size:20px; font-weight:800; }
.app__cat{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--indigo-300); }
.app__desc{ font-size:14.5px; color:var(--muted); margin:14px 0 20px; }
.app .btn{ align-self:flex-start; }

/* ---------- contact ---------- */
.contact{ max-width:var(--maxw); margin:0 auto; padding:clamp(40px,7vw,90px) var(--pad); }
.contact__panel{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid rgba(255,255,255,.12); background-image:var(--brand-gradient); text-align:center; padding:clamp(50px,9vw,110px) clamp(24px,5vw,60px); color:#fff; box-shadow:0 30px 70px -30px rgba(0,0,0,.6); }
.contact__panel .app-kicker{ margin-bottom:20px; }
.contact__title{ font-size:clamp(34px,6vw,64px); }
.contact__sub{ margin-top:16px; font-size:clamp(16px,1.8vw,20px); color:rgba(226,232,240,.82); }
.contact__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:36px; }
.contact__locs{ display:flex; gap:48px; justify-content:center; margin-top:48px; flex-wrap:wrap; }
.contact__locs strong{ display:block; font-size:15px; color:#fff; }
.contact__locs span{ font-size:14px; color:rgba(226,232,240,.7); }

/* ---------- footer ---------- */
.foot{ border-top:1px solid rgba(255,255,255,.06); padding:32px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:var(--maxw); margin:0 auto; }
.foot__brand{ display:flex; align-items:center; gap:9px; font-weight:800; }
.foot__logo{ width:26px; height:22px; object-fit:contain; filter:brightness(0) invert(1); }
.foot__copy{ font-size:13.5px; color:var(--muted-2); }

/* ---------- scroll reveal (subtle, the only motion) ---------- */
.proj,.app,.section__head{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.is-in{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce){ .proj,.app,.section__head{ opacity:1; transform:none; } .sheen::after{ display:none; } }

/* ---------- responsive ---------- */
@media (max-width:760px){
  .head__nav{ display:none; }
  .proj{ grid-template-columns:1fr; gap:24px; }
  .proj--rev .proj__media{ order:0; }
  .apps{ grid-template-columns:1fr; }
  .app__stage{ height:300px; }
}
@media (max-width:460px){
  .contact__locs{ gap:28px; }
}