/* ============ NETAQ — نطاق ============ */
/* Fonts (self-hosted) */
@font-face{font-family:'Tajawal';src:url('fonts/tajawal-arabic-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Tajawal';src:url('fonts/tajawal-arabic-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Tajawal';src:url('fonts/tajawal-arabic-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Tajawal';src:url('fonts/tajawal-arabic-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Alexandria';src:url('fonts/alexandria-arabic-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Alexandria';src:url('fonts/alexandria-arabic-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Alexandria';src:url('fonts/alexandria-arabic-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Alexandria';src:url('fonts/alexandria-arabic-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --bg:#0B101E;
  --bg-2:#0E1526;
  --card:#111a2e;
  --gold:#E0A75E;
  --gold-light:#F1C27D;
  --gold-deep:#B9803E;
  --gold-grad:linear-gradient(92deg,#F3CD8B 0%,#E0A75E 45%,#C98F45 100%);
  --text:#F4EFE7;
  --muted:#CBA76E;
  --muted-2:#9AA3B5;
  --line:rgba(224,167,94,.25);
  --radius:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Tajawal',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  direction:rtl;
  overflow-x:hidden;
  line-height:1.7;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:95%;margin-inline:auto}

/* ---------- header (integrated, v14) ---------- */
header{
  position:fixed;top:0;right:0;left:0;z-index:50;
  background:linear-gradient(180deg,rgba(8,12,24,.78) 0%,rgba(8,12,24,.35) 62%,transparent 100%);
  border:none;border-radius:0;box-shadow:none;
  transition:background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
header::after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,167,94,.35),transparent);
  opacity:0;transition:opacity .4s}
header.scrolled{
  background:rgba(10,15,28,.86);
  backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
header.scrolled::after{opacity:1}
body{padding-top:112px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 0;position:relative}
.brand{position:relative;display:flex;align-items:center}
.brand img{height:96px;width:auto;margin:-18px 0;position:relative;z-index:2;filter:drop-shadow(0 6px 18px rgba(224,167,94,.35))}
.brand .logo-dust{position:absolute;top:-42px;bottom:-42px;right:-46px;left:-46px;z-index:1;pointer-events:none}
.nav-links{display:flex;align-items:center;gap:34px;list-style:none}
.nav-links a{font-weight:500;font-size:1.02rem;color:#EDE7DC;transition:color .25s}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.has-menu{position:relative}
.has-menu>a::after{content:"⌄";margin-inline-start:6px;color:var(--gold);font-size:.85em}
.dropdown{
  position:absolute;top:100%;right:0;min-width:250px;
  background:#101828;border:1px solid var(--line);border-radius:16px;
  padding:10px;display:none;box-shadow:0 20px 50px rgba(0,0,0,.5);
  margin-top:14px;
}
.dropdown::before{content:"";position:absolute;top:-20px;right:0;left:0;height:20px}
.has-menu::after{content:"";position:absolute;top:100%;right:0;left:0;height:20px}
.has-menu:hover .dropdown,.has-menu:focus-within .dropdown{display:block}
.dropdown a{display:block;padding:10px 14px;border-radius:10px;font-size:.98rem}
.dropdown a:hover{background:rgba(224,167,94,.1);color:var(--gold)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 32px;border-radius:12px;font-weight:800;font-size:1.02rem;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;
  -webkit-font-smoothing:antialiased;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
header .nav>.btn{border-radius:999px}
.btn-gold::after,.btn-outline::after{border-radius:inherit}
/* keep gloss layers UNDER the label so text stays crisp */
.btn-gold::before,.btn-gold::after,.btn-outline::before,.btn-outline::after{z-index:-1}
/* ---- 3D shiny gold (animated) ---- */
.btn-gold{
  background:linear-gradient(115deg,#FFEDB8 0%,#F8D896 20%,#F0C376 42%,#E4AC5C 64%,#D2954A 84%,#F1C983 100%);
  background-size:230% 100%;background-position:92% 0;
  color:#241300;
  border:1px solid rgba(255,241,210,.7);
  text-shadow:none;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.75),
    inset 0 -6px 10px rgba(160,100,30,.4),
    0 4px 0 #a5732f,
    0 12px 26px rgba(0,0,0,.45),
    0 10px 34px rgba(240,195,118,.38);
  transition:transform .25s ease, box-shadow .25s ease, background-position .6s ease, filter .25s ease;
}
.btn-gold::after{
  content:"";position:absolute;top:1px;bottom:52%;left:7%;right:7%;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
}
.btn-gold::before{
  content:"";position:absolute;top:-4px;bottom:-4px;width:38%;left:-60%;
  transform:skewX(-22deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28) 30%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.28) 70%,transparent);
}
@keyframes btnSheen{0%{left:-60%}100%{left:120%}}
@keyframes btnGlow{
  0%{box-shadow:inset 0 2px 3px rgba(255,255,255,.7),inset 0 -6px 10px rgba(122,72,16,.45),0 6px 0 #8a5c22,0 16px 32px rgba(0,0,0,.5),0 10px 34px rgba(224,167,94,.38)}
  100%{box-shadow:inset 0 2px 3px rgba(255,255,255,.7),inset 0 -6px 10px rgba(122,72,16,.45),0 6px 0 #8a5c22,0 20px 40px rgba(0,0,0,.55),0 16px 54px rgba(240,190,110,.72)}
}
.btn-gold:hover{
  transform:translateY(-3px) scale(1.03);
  background-position:8% 0;filter:saturate(1.12) brightness(1.06);
  animation:btnGlow 1.3s ease-in-out infinite alternate;
}
.btn-gold:hover::before{animation:btnSheen 1.05s cubic-bezier(.4,0,.4,1) infinite}
.btn-gold:active{transform:translateY(2px) scale(.99);animation:none;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.5),
    inset 0 -4px 8px rgba(122,72,16,.5),
    0 1px 0 #8a5c22,
    0 6px 14px rgba(0,0,0,.4);}
@media(prefers-reduced-motion:reduce){
  .btn-gold:hover{animation:none}
  .btn-gold:hover::before{animation:none;left:120%;transition:left .6s ease}
}
/* ---- 3D elegant outline (glass) ---- */
.btn-outline{
  border:1px solid rgba(224,167,94,.75);color:var(--gold-light);
  background:linear-gradient(180deg,rgba(224,167,94,.14),rgba(224,167,94,.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -5px 10px rgba(0,0,0,.35),
    0 3px 0 rgba(90,58,18,.85),
    0 10px 24px rgba(0,0,0,.4);
}
.btn-outline::before{
  content:"";position:absolute;top:-4px;bottom:-4px;width:38%;left:-60%;
  transform:skewX(-22deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(243,205,139,.45),transparent);
}
.btn-outline:hover::before{animation:btnSheen 1.2s cubic-bezier(.4,0,.4,1) infinite}
.btn-outline:hover{transform:translateY(-2px) scale(1.02);background:linear-gradient(180deg,rgba(224,167,94,.24),rgba(224,167,94,.07));
  border-color:var(--gold-light);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -5px 10px rgba(0,0,0,.35),
    0 5px 0 rgba(90,58,18,.85),
    0 14px 30px rgba(0,0,0,.45),
    0 8px 34px rgba(224,167,94,.35);}
.btn-outline:active{transform:translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -4px 8px rgba(0,0,0,.4),
    0 1px 0 rgba(90,58,18,.85),
    0 5px 12px rgba(0,0,0,.35);}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--gold);border-radius:10px;padding:8px 12px;font-size:1.2rem;cursor:pointer}

/* ---------- full-bleed hero (v5) ---------- */
.hero-full{
  position:relative;overflow:hidden;
  margin-top:-112px;padding:112px 0 0;
  min-height:100vh;display:flex;align-items:center;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg video,.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:38% center;display:block;
}
.hero-overlay{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,16,30,0) 42%, rgba(11,16,30,.55) 66%, rgba(11,16,30,.94) 92%),
    linear-gradient(180deg, rgba(11,16,30,.55) 0%, rgba(11,16,30,0) 22%, rgba(11,16,30,0) 72%, #0B101E 100%);
}
.hero-full-copy{position:relative;z-index:2;width:95%;margin-inline:auto;display:flex;justify-content:flex-start}
.hero-full-copy .inner{max-width:560px;text-align:right}
.hero-full-copy .kicker{
  font-family:'Alexandria';font-weight:800;font-size:clamp(3.2rem,6.5vw,5rem);
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1.25;filter:drop-shadow(0 4px 22px rgba(224,167,94,.35));
}
.hero-full-copy h1{
  font-family:'Alexandria';font-weight:700;font-size:clamp(1.8rem,3.6vw,2.8rem);
  margin:14px 0 18px;line-height:1.6;color:#fff;text-shadow:0 4px 26px rgba(0,0,0,.6);
}
.hero-full-copy p{color:#E8D9BC;font-size:1.1rem;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.hero-full-copy .btn{margin-top:34px}
@media(max-width:1020px){
  .hero-full{min-height:88vh}
  .hero-bg video,.hero-bg img{object-position:30% center}
  .hero-overlay{background:linear-gradient(180deg, rgba(11,16,30,.35), rgba(11,16,30,.75) 60%, #0B101E 100%)}
  .hero-full-copy{justify-content:center}
  .hero-full-copy .inner{text-align:center}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-bg-glow{
  position:absolute;inset:auto;width:900px;height:900px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,167,94,.14) 0%,transparent 60%);
  top:-200px;left:-200px;pointer-events:none;
}
.hero-grid{
  display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;
  min-height:calc(100vh - 190px);padding:10px 0 10px;
}
.hero-copy{padding-inline-start:10px}
.hero-copy .kicker{
  font-family:'Alexandria';font-weight:800;font-size:clamp(3rem,6vw,4.6rem);
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1.25;
}
.hero-copy h1{
  font-family:'Alexandria';font-weight:700;font-size:clamp(1.7rem,3.4vw,2.6rem);
  margin:14px 0 18px;line-height:1.6;color:#fff;
}
.hero-copy p{color:var(--muted);font-size:1.08rem;max-width:520px}
.hero-copy .btn{margin-top:34px}
.hero-art{position:relative}
.hero-art img,.hero-art video{
  width:100%;height:auto;display:block;
  -webkit-mask-image:radial-gradient(90% 90% at 50% 50%,#000 58%,transparent 96%);
  mask-image:radial-gradient(90% 90% at 50% 50%,#000 58%,transparent 96%);
}

/* ---------- stats ---------- */
.stats{padding:30px 0 70px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.stat{text-align:center}
.stat .num{
  font-family:'Alexandria';font-weight:800;font-size:clamp(2.6rem,4.6vw,4rem);
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  direction:ltr;
}
.stat .num span{font-size:.7em}
.stat .label{
  margin-top:14px;display:inline-block;padding:14px 26px;width:100%;
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(224,167,94,.07),rgba(224,167,94,.02));
  font-weight:700;font-size:1.05rem;color:#F0E8DA;
}

/* ---------- sections ---------- */
section{padding:70px 0}
.sec-head{text-align:center;margin-bottom:48px}
.sec-head h2{
  font-family:'Alexandria';font-weight:800;font-size:clamp(2rem,4.4vw,3.2rem);
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.sec-head p{color:#E7DFD2;font-size:1.25rem;margin-top:14px;font-weight:500}
.sec-head .sub{color:var(--muted);font-size:1.02rem;max-width:720px;margin:10px auto 0}

/* service cards */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(224,167,94,.22);border-radius:var(--radius);
  padding:34px 28px;position:relative;transition:.35s;
}
.card:hover{transform:translateY(-6px);border-color:rgba(224,167,94,.5);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.card.highlight{background:linear-gradient(180deg,rgba(224,167,94,.16),rgba(224,167,94,.05));border-color:rgba(224,167,94,.45)}
.card h3{
  font-family:'Alexandria';font-weight:700;font-size:1.45rem;color:var(--gold);
  text-align:center;margin-bottom:22px;line-height:1.7;
}
.card ul{list-style:none;display:grid;gap:12px}
.card ul li{position:relative;padding-inline-start:22px;font-size:1.02rem;color:#EDE5D6}
.card ul li::before{content:"";position:absolute;right:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.card .card-cta{margin-top:26px;text-align:center}

/* portfolio */
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.project{
  border:1px solid rgba(224,167,94,.22);border-radius:var(--radius);overflow:hidden;
  background:var(--card);transition:.35s;
}
.project:hover{transform:translateY(-6px);border-color:rgba(224,167,94,.5);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.project img{width:100%;height:260px;object-fit:cover}
.project .p-body{padding:24px 26px 30px}
.project h3{font-family:'Alexandria';font-weight:700;color:var(--gold);font-size:1.3rem;margin-bottom:8px}
.project p{color:var(--muted-2);font-size:1rem}
.project .tags{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.project .tags span{font-size:.85rem;color:var(--gold);border:1px solid var(--line);padding:4px 14px;border-radius:999px}

/* about */
.about-intro{max-width:900px;margin-inline:auto;text-align:center}
.about-intro .lead{font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:700;color:#fff;line-height:2}
.about-intro .lead .g{color:var(--gold)}
.about-intro .follow{color:var(--muted);margin-top:18px;font-size:1.05rem}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.value{border:1px solid rgba(224,167,94,.22);border-radius:var(--radius);padding:30px 26px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.value .icon{font-size:2rem;margin-bottom:14px}
.value h3{font-family:'Alexandria';color:var(--gold);font-size:1.25rem;margin-bottom:10px}
.value p{color:var(--muted-2);font-size:.98rem}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.step{border:1px solid rgba(224,167,94,.2);border-radius:18px;padding:26px 22px;text-align:center;position:relative}
.step::before{
  counter-increment:step;content:counter(step);
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--gold-grad);color:#22150a;font-weight:800;font-family:'Alexandria';font-size:1.2rem;margin-bottom:14px;
}
.step h4{color:#fff;font-size:1.08rem;margin-bottom:8px;font-family:'Alexandria';font-weight:600}
.step p{color:var(--muted-2);font-size:.93rem}

/* CTA band */
.cta-band{
  border:1px solid var(--line);border-radius:28px;text-align:center;
  padding:56px 30px;position:relative;overflow:hidden;
  background:radial-gradient(80% 140% at 50% 0%,rgba(224,167,94,.16),rgba(224,167,94,.02));
}
.cta-band h2{font-family:'Alexandria';font-weight:800;font-size:clamp(1.6rem,3.4vw,2.4rem);color:#fff;margin-bottom:12px}
.cta-band p{color:var(--muted);margin-bottom:28px}
.cta-band .btn{margin-inline:8px}

/* contact */
.contact-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.form-card{border:1px solid var(--line);border-radius:var(--radius);padding:34px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .full{grid-column:1/-1}
label{display:block;font-weight:700;margin-bottom:8px;color:#F0E8DA;font-size:.98rem}
input,select,textarea{
  width:100%;padding:13px 16px;border-radius:12px;border:1px solid rgba(224,167,94,.3);
  background:#0d1424;color:var(--text);font-family:inherit;font-size:1rem;transition:.25s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(224,167,94,.15)}
textarea{min-height:130px;resize:vertical}
.form-msg{margin-top:16px;font-weight:700;display:none;padding:12px 16px;border-radius:12px}
.form-msg.ok{display:block;color:#8fe3a1;background:rgba(60,180,100,.12);border:1px solid rgba(60,180,100,.35)}
.form-msg.err{display:block;color:#ff9d9d;background:rgba(220,80,80,.12);border:1px solid rgba(220,80,80,.35)}
.contact-info{display:grid;gap:20px}
.info-item{border:1px solid rgba(224,167,94,.2);border-radius:18px;padding:22px 24px;display:flex;gap:16px;align-items:center}
.info-item .ic{font-size:1.6rem}
.info-item b{display:block;color:var(--gold);font-family:'Alexandria';font-weight:600;margin-bottom:4px}
.info-item span{color:var(--muted-2);direction:ltr;unicode-bidi:isolate}

/* footer */
footer{border-top:1px solid rgba(224,167,94,.15);margin-top:40px;background:#0a0f1c}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:34px;padding:56px 0 40px}
.footer-grid img{height:70px;width:auto;margin-bottom:14px}
.footer-grid p{color:var(--muted-2);font-size:.95rem;max-width:300px}
.footer-grid h4{color:var(--gold);font-family:'Alexandria';font-weight:600;margin-bottom:16px;font-size:1.05rem}
.footer-grid ul{list-style:none;display:grid;gap:10px}
.footer-grid ul a{color:#cfd6e4;font-size:.96rem}
.footer-grid ul a:hover{color:var(--gold)}
.copyright{border-top:1px solid rgba(255,255,255,.06);padding:18px 0;text-align:center;color:var(--muted-2);font-size:.9rem}

/* floating whatsapp */
.wa-float{
  position:fixed;bottom:26px;left:26px;z-index:60;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.4);transition:.3s;
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px;height:32px;fill:#fff}

/* reveal animation */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .hero-grid{grid-template-columns:1fr;min-height:auto;text-align:center;padding-top:40px}
  .hero-copy p{margin-inline:auto}
  .hero-art{order:-1;max-width:560px;margin-inline:auto}
  .cards-3,.values{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .steps{grid-template-columns:repeat(2,1fr)}
  .projects{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav-links{
    position:fixed;inset:100px 2.5% auto 2.5%;background:#0d1424;flex-direction:column;
    padding:26px;gap:20px;border:1px solid var(--line);border-radius:18px;display:none;
  }
  .brand img{height:72px;margin:-8px 0}
  .nav-links.open{display:flex}
  .burger{display:block}
  .nav .btn{display:none}
  .stats-grid{grid-template-columns:1fr;gap:18px}
  .steps{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .dropdown{position:static;display:block;border:none;background:transparent;box-shadow:none;padding:0 14px}
}

/* ============ v2 sections (match Figma home) ============ */
.sec-head .subtitle{color:var(--muted);font-size:1.05rem;margin-top:12px}
.cards-6{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;max-width:1280px;margin-inline:auto}
.svc-card{
  background:
    linear-gradient(180deg,rgba(20,27,46,.85),rgba(12,17,31,.9));
  border:1px solid rgba(224,167,94,.15);border-radius:32px;
  padding:42px 34px 38px;position:relative;overflow:hidden;transition:.35s;display:flex;flex-direction:column;
  box-shadow:0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.svc-card:hover{transform:translateY(-6px);border-color:rgba(224,167,94,.45);box-shadow:0 28px 66px rgba(0,0,0,.5)}
/* Figma-style highlighted card: warm gold glow from the top melting downward */
.svc-card.hl{
  background:
    radial-gradient(130% 100% at 50% -20%, rgba(238,186,112,.6) 0%, rgba(198,145,80,.34) 40%, rgba(120,88,50,.16) 66%, rgba(20,26,44,.08) 100%),
    linear-gradient(180deg,rgba(224,167,94,.12),rgba(20,26,44,.6));
  border-color:rgba(240,195,120,.55);
  box-shadow:0 22px 56px rgba(0,0,0,.42), 0 0 54px rgba(224,167,94,.16), inset 0 1px 0 rgba(255,240,210,.3);
}
.svc-card.hl h3{color:#FFF3DF}
.svc-card h3{font-family:'Alexandria';font-weight:700;font-size:1.52rem;color:var(--gold);text-align:center;margin-bottom:30px;line-height:1.8;position:relative;z-index:1}
.svc-card ul{list-style:none;display:grid;gap:15px;margin-bottom:32px;position:relative;z-index:1}
.svc-card ul li{position:relative;padding-inline-start:20px;font-size:1.03rem;color:#EDE5D6;line-height:1.75}
.svc-card ul li::before{content:"";position:absolute;right:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.svc-card .svc-cta{margin-top:auto;text-align:center;position:relative;z-index:1}
.svc-card .btn{width:auto;padding:14px 36px}
/* faint watermark illustration behind card content (Figma) */
.svc-card::after{
  content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  width:250px;height:250px;z-index:0;pointer-events:none;opacity:.10;
  background-position:center bottom;background-repeat:no-repeat;background-size:contain;
}
.svc-card.hl::after{opacity:.15}
@media(max-width:1180px){.cards-6{gap:26px}}
.wm-social::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0A75E' stroke-width='1.1'%3E%3Crect x='7' y='2' width='10' height='20' rx='2.5'/%3E%3Cpath d='M11 18.5h2M4 8l-2 2 2 2M20 8l2 2-2 2'/%3E%3Cpath d='M9.5 9.5c.8-1.2 2.2-1.2 2.6 0 .4-1.2 1.8-1.2 2.6 0 .5 1-.6 2.2-2.6 3.6-2-1.4-3.1-2.6-2.6-3.6z'/%3E%3C/svg%3E")}
.wm-ads::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0A75E' stroke-width='1.1'%3E%3Cpath d='M3 10v4l4 .8L16 20V4L7 9.2 3 10z'/%3E%3Cpath d='M18.5 9a4.5 4.5 0 010 6M20.5 6.5a8 8 0 010 11'/%3E%3C/svg%3E")}
.wm-stores::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0A75E' stroke-width='1.1'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='17' cy='20' r='1.6'/%3E%3Cpath d='M2.5 3.5h2.6L7.6 15h11l2.4-8.5H6'/%3E%3C/svg%3E")}
.wm-plan::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0A75E' stroke-width='1.1'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.8'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3Cpath d='M12 3.5V1M12 23v-2.5M3.5 12H1M23 12h-2.5'/%3E%3C/svg%3E")}
.wm-design::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0A75E' stroke-width='1.1'%3E%3Cpath d='M12 19.5l7.5-7.5-4.5-4.5L7.5 15l-1.2 5.7 5.7-1.2z'/%3E%3Cpath d='M14.5 8l1.2-1.2a3 3 0 014.2 4.2L18.7 12'/%3E%3C/svg%3E")}
.wm-seo::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0A75E' stroke-width='1.1'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M15 15l6.5 6.5M7 10.5l2 2 3.5-4'/%3E%3C/svg%3E")}
.wm-app::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0A75E' stroke-width='1.1'%3E%3Crect x='6.5' y='1.5' width='11' height='21' rx='2.6'/%3E%3Cpath d='M10.5 19.5h3M9 5h6'/%3E%3C/svg%3E")}
.wm-celebs::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0A75E' stroke-width='1.1'%3E%3Cpath d='M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9L12 2.8z'/%3E%3C/svg%3E")}
.more-btn{text-align:center;margin-top:44px}

/* CTA split section */
.cta-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;margin:20px 0}
.cta-split .cta-img img{width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-composite:intersect}
.cta-split .cta-text{text-align:right}
.cta-split .cta-text .k{font-family:'Alexandria';font-weight:800;font-size:clamp(2.4rem,4.4vw,3.4rem);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-split .cta-text h2{font-family:'Alexandria';font-weight:700;font-size:clamp(1.5rem,3vw,2.3rem);color:#fff;margin:16px 0 30px;line-height:1.6}

/* FAQ accordion — Figma style: warm translucent pill, icon LEFT, answer below */
.faq-wrap{max-width:1080px;margin-inline:auto;display:grid;gap:26px}
.faq-item{border:none;background:transparent;overflow:visible}
.faq-q{
  display:flex;align-items:center;gap:18px;padding:19px 28px;cursor:pointer;
  font-family:'Alexandria';font-weight:600;font-size:1.2rem;color:#F5EEE2;
  background:linear-gradient(180deg,rgba(122,96,62,.52),rgba(78,60,38,.46));
  backdrop-filter:blur(8px);
  border:1px solid rgba(224,167,94,.16);border-radius:24px;
  box-shadow:0 16px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  transition:background .3s;
}
.faq-q:hover{background:linear-gradient(180deg,rgba(134,106,68,.58),rgba(88,68,43,.5))}
.faq-q .ic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--gold-grad);color:#22150a;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;transition:.3s;order:2}
.faq-q .q-txt{flex:1;text-align:right;order:1}
.faq-item.open .faq-q .ic{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;color:#D9D0C1;padding:0 30px;font-size:1.05rem}
.faq-item.open .faq-a{max-height:320px;padding:16px 30px 4px}

/* testimonials — Figma style: warm translucent brown cards */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.testi-card{
  border:1px solid rgba(224,167,94,.2);border-radius:26px;padding:26px 28px;
  background:linear-gradient(180deg,rgba(112,88,58,.5),rgba(70,54,36,.44));
  backdrop-filter:blur(8px);
  box-shadow:0 18px 40px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
}
.testi-top{display:flex;align-items:center;gap:14px;justify-content:flex-start;flex-direction:row-reverse;margin-bottom:14px}
.testi-top .av{width:56px;height:56px;border-radius:50%;background:#cfcdc9;display:flex;align-items:center;justify-content:center;color:#8a8a92;font-size:1.7rem;overflow:hidden}
.testi-top .who{text-align:right}
.testi-top .who b{display:block;font-family:'Alexandria';color:#fff;font-size:1.15rem}
.testi-top .stars{color:#F3CD8B;font-size:.95rem;letter-spacing:2px}
.testi-card p{color:#EFE7D8;font-size:1rem;line-height:1.95}

/* footer contact card — elegant navy + gold (v5) */
.foot-card{
  position:relative;border:1px solid rgba(224,167,94,.32);border-radius:28px;
  background:
    radial-gradient(70% 120% at 85% 10%, rgba(224,167,94,.12), transparent 60%),
    radial-gradient(60% 100% at 10% 100%, rgba(224,167,94,.07), transparent 55%),
    linear-gradient(180deg,#121b31,#0c1424);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
  padding:36px 42px;display:grid;grid-template-columns:1.1fr 1fr;gap:36px;overflow:hidden;align-items:center;
}
.foot-card .dots{position:absolute;top:0;bottom:0;right:0;width:280px;pointer-events:none;opacity:.4;
  background-image:radial-gradient(rgba(224,167,94,.6) 1.6px,transparent 1.6px);background-size:16px 16px;
  -webkit-mask-image:radial-gradient(120% 90% at 100% 50%,#000,transparent 70%);mask-image:radial-gradient(120% 90% at 100% 50%,#000,transparent 70%)}
.foot-brand{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.foot-brand img{height:235px;width:auto;margin:-14px 0 6px;filter:drop-shadow(0 12px 40px rgba(224,167,94,.4))}
@media(max-width:1020px){.foot-brand img{height:190px;margin:0 0 8px}}
.foot-brand .ln{display:flex;align-items:center;gap:12px;color:#EFE7D8;font-size:1.12rem;margin-bottom:9px;direction:ltr;justify-content:center}
.foot-brand .ln .ci{width:36px;height:36px;border-radius:50%;background:rgba(224,167,94,.16);border:1px solid rgba(224,167,94,.3);display:flex;align-items:center;justify-content:center;color:var(--gold)}
.foot-brand .ln .ci svg{display:block}
.foot-brand .btn{margin-top:14px}
.foot-form input,.foot-form textarea{padding:13px 18px}
.foot-form textarea{min-height:96px}
.foot-form{gap:13px}
.foot-form{position:relative;z-index:2;display:grid;gap:16px}
.foot-form input,.foot-form textarea{
  background:rgba(224,167,94,.07);color:var(--text);
  border:1px solid rgba(224,167,94,.32);border-radius:14px;
  padding:16px 20px;font-family:inherit;font-size:1rem;text-align:right;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.foot-form input:focus,.foot-form textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(224,167,94,.11);
  box-shadow:0 0 0 3px rgba(224,167,94,.15);
}
.foot-form input::placeholder,.foot-form textarea::placeholder{color:#B9A377}
.foot-form textarea{min-height:120px;resize:vertical}
.foot-copy{text-align:center;color:var(--muted-2);font-size:.9rem;padding:26px 0 8px}

@media(max-width:1020px){
  .cards-6{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .cta-split{grid-template-columns:1fr}
  .cta-split .cta-img{order:-1;max-width:520px;margin-inline:auto}
  .testi-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .foot-card{grid-template-columns:1fr;padding:36px 26px}
  .foot-brand{text-align:center}
  .foot-brand .ln{justify-content:center}
}

/* ============ v2 inner-page sections (match Figma) ============ */
/* gold pill label used across inner pages */
.gpill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 46px;border-radius:999px;font-family:'Alexandria';font-weight:700;
  font-size:1.35rem;color:#fff;
  background:linear-gradient(180deg,rgba(224,167,94,.22),rgba(224,167,94,.05));
  border:1px solid rgba(224,167,94,.4);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}

/* page hero (image left / copy right, full width) */
.page-hero{position:relative;overflow:hidden;padding:24px 0 10px}
.page-hero .ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;min-height:60vh}
.page-hero .ph-art img{width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-composite:intersect}
.page-hero .ph-copy{text-align:right;padding-inline-start:10px}
.page-hero .ph-copy h1{
  font-family:'Alexandria';font-weight:800;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:.06em;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:20px;
}
.page-hero .ph-copy p{color:#EAE1D1;font-size:clamp(1.1rem,2vw,1.5rem);font-weight:500;max-width:560px;margin-inline-start:auto;line-height:1.9}

/* about intro centered statement */
.intro-statement{max-width:920px;margin-inline:auto;text-align:center}
.intro-statement h2{font-family:'Alexandria';font-weight:700;font-size:clamp(1.4rem,3vw,2.1rem);color:#fff;line-height:1.9}
.intro-statement p{color:var(--gold-light);margin-top:20px;font-size:1.12rem;line-height:1.9;font-weight:500}

/* vision / mission rows */
.vm-wrap{display:grid;gap:38px;max-width:1080px;margin-inline:auto}
.vm-row{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.vm-row .vm-text{text-align:right;font-size:clamp(1.15rem,2.2vw,1.55rem);font-weight:500;color:#EDE6D8;line-height:1.9}
.vm-row .gpill{min-width:210px}

/* 4 value cards */
.values-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:20px}
.val-card{
  border:1px solid rgba(224,167,94,.24);border-radius:20px;padding:30px 24px;text-align:center;
  background:linear-gradient(180deg,rgba(224,167,94,.06),rgba(255,255,255,.01));transition:.35s;
}
.val-card:hover{transform:translateY(-6px);border-color:rgba(224,167,94,.5);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.val-card h3{font-family:'Alexandria';font-weight:700;color:var(--gold);font-size:1.4rem;margin-bottom:14px}
.val-card p{color:var(--muted-2);font-size:1rem;line-height:1.8}

/* process (كيف نعمل؟) — steps staggered + team art on the right (Figma) */
.process{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:center}
.process .proc-steps{display:grid;gap:44px;padding:20px 0}
.proc-step .gpill{margin-bottom:16px}
.proc-step p{color:#DED6C7;font-size:1.12rem;line-height:1.9;max-width:440px}
.proc-step{text-align:right}
.proc-step p{margin-inline-start:auto}
.proc-step:nth-child(even){padding-inline-end:14%}
.process .proc-art{position:relative}
.process .proc-art img{width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-composite:intersect}

/* portfolio gallery (device mockups) */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.shot{border:1px solid rgba(224,167,94,.22);border-radius:24px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);transition:.35s;position:relative}
.shot:hover{transform:translateY(-6px);border-color:rgba(224,167,94,.5);box-shadow:0 26px 64px rgba(0,0,0,.5)}
.shot .shot-img{aspect-ratio:16/10;overflow:hidden}
.shot .shot-img img{width:100%;height:100%;object-fit:cover}
.shot .ph-tile{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.shot .ph-tile .mk{font-family:'Alexandria';font-weight:800;font-size:1.9rem;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.5);z-index:2;text-align:center;padding:0 20px}
.shot .s-body{padding:22px 26px 26px;text-align:right}
.shot .s-body h3{font-family:'Alexandria';font-weight:700;color:var(--gold);font-size:1.25rem;margin-bottom:8px}
.shot .s-body p{color:var(--muted-2);font-size:.98rem;line-height:1.8}
.shot .s-body .tags{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap;justify-content:flex-end}
.shot .s-body .tags span{font-size:.82rem;color:var(--gold);border:1px solid var(--line);padding:4px 13px;border-radius:999px}

@media(max-width:1020px){
  .page-hero .ph-grid{grid-template-columns:1fr;text-align:center;min-height:auto}
  .page-hero .ph-art{order:-1;max-width:560px;margin-inline:auto}
  .page-hero .ph-copy{text-align:center}
  .page-hero .ph-copy p{margin-inline:auto}
  .vm-row{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px}
  .vm-row .vm-text{text-align:center}
  .values-4{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr}
  .process .proc-art{order:-1;max-width:520px;margin-inline:auto}
  .proc-step,.proc-step:nth-child(odd),.proc-step:nth-child(even){text-align:center;padding-inline-end:0}
  .proc-step p,.proc-step:nth-child(odd) p,.proc-step:nth-child(even) p{margin-inline:auto}
  .gallery{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
}
@media(max-width:620px){
  .values-4{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
}

/* ============ v7: brand wordmark + animated laptops ============ */
.wordmark{display:block;width:auto;filter:drop-shadow(0 6px 26px rgba(224,167,94,.35))}
.hero-full-copy .wordmark{height:92px;margin:0 0 4px auto}
.hero-full-copy .wm-divider{
  width:170px;height:3px;border-radius:999px;margin:12px 0 18px auto;
  background:linear-gradient(270deg,#F3CD8B,rgba(224,167,94,.05));
  box-shadow:0 0 14px rgba(224,167,94,.45);
}
/* CTA: wordmark sits elegantly ABOVE the heading, away from the screen edge */
.cta-split .cta-text{text-align:right;padding-inline:6% 7%}
.cta-text .wordmark{height:80px;margin:0 0 6px auto;position:relative}
.cta-text .wm-divider{
  width:150px;height:3px;border-radius:999px;margin:14px 0 20px auto;
  background:linear-gradient(270deg,#F3CD8B,rgba(224,167,94,.05));
  box-shadow:0 0 14px rgba(224,167,94,.45);
}
@media(max-width:1020px){
  .hero-full-copy .wordmark{margin-inline:auto;height:72px}
  .cta-split .cta-text{text-align:center;padding-inline:0}
  .cta-text .wordmark{margin-inline:auto}
  .cta-text .wm-divider{margin-inline:auto}
}

/* animated REALISTIC laptop mockup (MacBook-style) */
.lap{position:relative;padding:6px 30px 26px;perspective:1400px}
.lap-inner{transform-style:preserve-3d;transform:rotateX(7deg);transition:transform .6s cubic-bezier(.2,.7,.2,1);animation:lapFloat 5.5s ease-in-out infinite}
.lap:hover .lap-inner{transform:rotateX(0) scale(1.03)}
@keyframes lapFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
.lap-screen{
  position:relative;overflow:hidden;
  padding:9px 9px 11px;
  border-radius:16px 16px 0 0;
  background:linear-gradient(180deg,#e2e6ee 0%,#aab1c0 3%,#12141c 6%,#05070d 100%);
  box-shadow:
    0 34px 70px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 -2px 6px rgba(0,0,0,.6);
}
.lap-screen::before{content:"";position:absolute;top:3.5px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 35%,#5a6a8a,#10141f 65%);
  box-shadow:0 0 3px rgba(120,160,255,.35)}
.lap-view{aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:#000}
.lap-view img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;
  transition:transform 4s ease}
.lap:hover .lap-view img{transform:translateY(-4%) scale(1.06)}
.lap-screen::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.08) 55%,transparent 70%);
  transform:translateX(-130%);}
.lap:hover .lap-screen::after{animation:lapGlare 1.6s ease}
@keyframes lapGlare{to{transform:translateX(130%)}}
/* aluminum deck */
.lap-base{
  position:relative;height:15px;margin:0 -30px;
  background:linear-gradient(180deg,#d6dbe6 0%,#b4bac9 18%,#8b93a6 45%,#5f6779 72%,#3c4354 100%);
  border-radius:2px 2px 14px 14px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.28) inset,
    0 -1px 0 rgba(0,0,0,.25) inset,
    0 22px 40px rgba(0,0,0,.55);
}
/* thumb notch */
.lap-base::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:110px;height:6px;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#6d7488,#454c5e);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.4)}
/* rubber feet shadow + golden ambient reflection */
.lap-base::after{content:"";position:absolute;top:15px;left:4%;right:4%;height:26px;
  background:
    radial-gradient(46% 100% at 50% 0, rgba(0,0,0,.55), transparent 70%),
    radial-gradient(60% 90% at 50% 10%, rgba(224,167,94,.18), transparent 75%);
  filter:blur(5px)}
/* screen mirror reflection on the ground */
.lap::after{content:"";position:absolute;left:30px;right:30px;bottom:-4px;height:26px;
  background:linear-gradient(180deg,rgba(224,167,94,.10),transparent 80%);
  border-radius:50%;filter:blur(8px);pointer-events:none}
/* ============ v11: Figma-style showcase carousel (أعمالنا السابقة) ============ */
.showcase{position:relative}
/* full-bleed stage escaping the container, screens cut at viewport edges (Figma) */
.sc-stage{position:relative;height:560px;perspective:1600px;overflow:hidden;
  width:100vw;margin-inline:calc(50% - 50vw)}
.sc-item{position:absolute;top:26px;left:50%;width:44%;margin-left:-22%;cursor:pointer;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s,filter .7s;will-change:transform}
.sc-item .scr{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;
  box-shadow:0 34px 80px rgba(0,0,0,.6)}
.sc-item img{width:100%;height:100%;object-fit:cover;display:block}
/* center screen = gold-framed monitor (Figma) */
.sc-item.center .scr{
  border:5px solid #B98D4F;border-radius:16px;
  box-shadow:0 44px 100px rgba(0,0,0,.7), 0 0 60px rgba(224,167,94,.18), inset 0 0 0 1px rgba(255,230,190,.35);
}
/* monitor stand — only on the centered screen */
.sc-item::before{content:"";position:absolute;left:50%;top:calc(100% - 2px);transform:translateX(-50%);
  width:96px;height:52px;opacity:0;transition:opacity .5s;
  background:linear-gradient(180deg,#C2A06A 0%,#8a6f42 55%,#6b5430 100%);
  clip-path:polygon(36% 0,64% 0,74% 100%,26% 100%)}
.sc-item::after{content:"";position:absolute;left:50%;top:calc(100% + 48px);transform:translateX(-50%);
  width:240px;height:14px;border-radius:999px;opacity:0;transition:opacity .5s;
  background:linear-gradient(180deg,#C9A868,#7a6138);
  box-shadow:0 16px 30px rgba(0,0,0,.55), 0 0 34px rgba(224,167,94,.18)}
.sc-item.center::before,.sc-item.center::after{opacity:1}
/* controls */
.sc-ctrl{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:26px}
.sc-btn{width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.25rem;line-height:1;
  color:var(--gold-light);background:linear-gradient(180deg,rgba(224,167,94,.16),rgba(224,167,94,.04));
  border:1px solid rgba(224,167,94,.5);transition:.3s}
.sc-btn:hover{background:var(--gold-grad);color:#22150a;transform:scale(1.08)}
.sc-count{font-family:'Alexandria';color:var(--muted);font-size:1rem;direction:ltr}
.sc-meta{text-align:center;margin-top:20px;min-height:74px}
.sc-meta h3{font-family:'Alexandria';font-weight:700;color:var(--gold);font-size:1.35rem;margin-bottom:6px;transition:opacity .4s}
.sc-meta p{color:var(--muted-2);font-size:1rem;transition:opacity .4s}
@media(max-width:1020px){
  .sc-stage{height:340px}
  .sc-item{width:72%;margin-left:-36%}
}

/* card wrappers keep text below */
.project .lap,.shot .lap{margin-top:14px}
.project,.shot{background:transparent}
.shot{border:none;box-shadow:none}
.shot:hover{transform:none;box-shadow:none;border:none}
.project{border:none}
.project:hover{transform:none;box-shadow:none}
.project .p-body,.shot .s-body{padding-top:18px}