/* =========================================================
   DIBKIL EVENT — Design Tokens
   مبني على اللون الأساسي المعتمد في دليل الهوية: #783AA9
   ========================================================= */
:root{
  --purple-950:#190A2E;
  --purple-900:#231041;
  --purple-800:#331A5C;
  --purple-700:#452278;
  --purple-600:#5B2C96;
  --purple-500:#783AA9;   /* اللون الأساسي المعتمد */
  --purple-400:#9256C2;
  --purple-300:#AF7CD6;
  --purple-200:#CDA9E7;
  --purple-100:#E6D3F4;
  --purple-50:#F6EFFB;
  --sand:#FBF8FC;

  /* Warm gold accent — a deliberate, minority (~10%) partner to the brand
     purple. Purple stays the dominant identity color everywhere; gold is
     reserved for connecting threads (timelines/paths), quotes, and small
     premium highlights, echoing the celebratory spirit of an events brand. */
  --gold-800:#6B5416;
  --gold-700:#8A6D1C;
  --gold-500:#C9A227;
  --gold-400:#D9BB55;
  --gold-200:#ECDCA0;
  --gold-100:#F7F0DC;
  --gradient-royal:linear-gradient(135deg, var(--purple-600) 0%, var(--purple-500) 45%, var(--gold-700) 130%);
  --paper:#FFFFFF;
  --ink:#20122F;
  --ink-soft:#5C4E6E;
  --ink-faint:#8A7D9B;
  --ring:rgba(120,58,169,.16);
  --shadow-sm:0 6px 18px -8px rgba(35,16,65,.18);
  --shadow-md:0 18px 40px -14px rgba(35,16,65,.28);
  --shadow-lg:0 30px 70px -20px rgba(35,16,65,.38);
  --ease:cubic-bezier(.19,1,.22,1);
  --font-head:'Tajawal', sans-serif;
  --font-body:'IBM Plex Sans Arabic', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-head{
  font-family:var(--font-head);
  font-weight:800;
  color:var(--ink);
  margin:0;
  letter-spacing:-.01em;
}
h1, .section-title, .page-hero h1, .cta-title{ letter-spacing:-.02em; }
p{ color:var(--ink-soft); line-height:1.9; margin:0; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--purple-200); color:var(--purple-900); }

/* Tabular numerals everywhere a figure is meant to feel engineered, not typed */
.num, .hero-stat .num, .why-stat .num, .ach-cell .num, .t-year, .step-num, .svc-num{
  font-variant-numeric:tabular-nums;
}

/* Fixed grain overlay — injected once by main.js, styled here.
   The single cheapest, highest-impact texture cue used by high-craft studio sites. */
.grain-overlay{
  position:fixed; inset:0;
  z-index:9990;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Crisp precision cursor dot, paired with the softer lagged glow, inside glow-zones */
.cursor-dot{
  position:fixed; top:-4px; inset-inline-start:-4px;
  width:8px; height:8px; border-radius:50%;
  background:var(--gold-400);
  pointer-events:none; z-index:5001;
  opacity:0;
  transition:opacity .3s ease, transform .15s ease;
  will-change:transform;
}

.container-xl{
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:24px;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--purple-400);
  outline-offset:3px;
  border-radius:6px;
}

/* Eyebrow label */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.3px;
  color:var(--purple-600);
  background:var(--purple-50);
  border:1px solid var(--purple-100);
  padding:7px 16px;
  border-radius:100px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  border-radius:2px;
  background:var(--purple-500);
  transform:rotate(45deg);
  flex:none;
}

.section{ padding:110px 0; position:relative; }
.section--tight{ padding:80px 0; }
@media (max-width:768px){
  .section{ padding:76px 0; }
  .section--tight{ padding:56px 0; }
}

.section-head{ max-width:680px; margin-bottom:56px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-title{
  font-size:clamp(2rem, 3.6vw, 2.85rem);
  line-height:1.25;
  margin-top:18px;
}
.section-lead{
  margin-top:16px;
  font-size:1.08rem;
  color:var(--ink-soft);
}

/* Buttons */
.btn-dibkil{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1rem;
  padding:15px 30px;
  border-radius:12px;
  border:1.5px solid transparent;
  position:relative;
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn-dibkil.primary::before{
  content:"";
  position:absolute; top:0; bottom:0; width:60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:translateX(-160%) skewX(-12deg);
  transition:transform .85s var(--ease);
}
.btn-dibkil.primary:hover::before{ transform:translateX(220%) skewX(-12deg); }
.btn-dibkil svg{ width:18px; height:18px; flex:none; transition:transform .35s var(--ease); transform:scaleX(-1); }
.btn-dibkil.primary{
  background:var(--purple-500);
  color:#fff;
  box-shadow:0 14px 30px -10px rgba(120,58,169,.55);
}
.btn-dibkil.primary:hover{
  background:var(--purple-600);
  transform:translateY(-3px);
  box-shadow:0 20px 38px -12px rgba(120,58,169,.65);
}
.btn-dibkil.ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.45);
}
.btn-dibkil.ghost:hover{
  background:rgba(255,255,255,.12);
  border-color:#fff;
  transform:translateY(-3px);
}
.btn-dibkil.outline-dark{
  background:transparent;
  color:var(--purple-600);
  border-color:var(--purple-200);
}
.btn-dibkil.outline-dark:hover{
  background:var(--purple-50);
  border-color:var(--purple-400);
  transform:translateY(-3px);
}
.btn-dibkil:hover svg{ transform:translateX(-4px) scaleX(-1); }

/* Reveal on scroll */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal-delay="1"]{ transition-delay:.1s; }
[data-reveal-delay="2"]{ transition-delay:.2s; }
[data-reveal-delay="3"]{ transition-delay:.3s; }
[data-reveal-delay="4"]{ transition-delay:.4s; }
[data-reveal-delay="5"]{ transition-delay:.5s; }
[data-reveal-delay="6"]{ transition-delay:.6s; }
/* ============================= HEADER ============================= */
.site-header{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:1000;
  padding:18px 0;
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header .container-xl{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-header.is-scrolled{
  padding:10px 0;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(150%);
  box-shadow:var(--shadow-sm);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:40px; width:auto; transition:filter .4s var(--ease); }
.site-header:not(.is-scrolled) .brand img.logo-color{ display:none; }
.site-header:not(.is-scrolled) .brand img.logo-white{ display:block; }
.site-header.is-scrolled .brand img.logo-color{ display:block; }
.site-header.is-scrolled .brand img.logo-white{ display:none; }

.main-nav{ display:flex; align-items:center; gap:8px; }
.main-nav a{
  font-family:var(--font-head);
  font-weight:700;
  font-size:.96rem;
  padding:10px 16px;
  border-radius:10px;
  color:#fff;
  transition:background .35s var(--ease), color .35s var(--ease);
  position:relative;
}
.site-header.is-scrolled .main-nav a{ color:var(--ink); }
.main-nav a:hover{ background:rgba(255,255,255,.14); }
.site-header.is-scrolled .main-nav a:hover{ background:var(--purple-50); color:var(--purple-600); }

.header-cta{ display:flex; align-items:center; gap:14px; }
.header-cta .btn-dibkil{ padding:11px 22px; font-size:.92rem; }
.site-header:not(.is-scrolled) .btn-dibkil.outline-dark{ color:#fff; border-color:rgba(255,255,255,.55); }
.site-header:not(.is-scrolled) .btn-dibkil.outline-dark:hover{ background:rgba(255,255,255,.14); border-color:#fff; }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:10px;
  border:1.5px solid rgba(255,255,255,.5);
  background:transparent;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
.site-header.is-scrolled .nav-toggle{ border-color:var(--purple-200); }
.nav-toggle span{
  width:20px; height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled .nav-toggle span{ background:var(--purple-600); }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:991px){
  .main-nav{
    position:fixed; inset:0 0 0 auto;
    width:min(340px,86vw); height:100vh;
    background:var(--purple-900);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:100px 28px 40px;
    gap:6px;
    transform:translateX(105%);
    transition:transform .5s var(--ease);
    box-shadow:-30px 0 60px rgba(0,0,0,.25);
  }
  html[dir="rtl"] .main-nav{ inset:0 auto 0 0; transform:translateX(-105%); }
  .main-nav.open{ transform:translateX(0); }
  html[dir="rtl"] .main-nav.open{ transform:translateX(0); }
  .main-nav a{ color:#fff; padding:14px 18px; font-size:1.1rem; border-bottom:1px solid rgba(255,255,255,.08); }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-scrim{
    position:fixed; inset:0; background:rgba(15,6,28,.55);
    opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
    z-index:900;
  }
  .nav-scrim.show{ opacity:1; pointer-events:auto; }
}

/* ============================= HERO ============================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#150826;
}
.hero-bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1100px 700px at 82% 8%, rgba(201,162,39,.16), transparent 55%),
    linear-gradient(180deg, rgba(21,8,38,.5) 0%, rgba(21,8,38,.74) 55%, rgba(15,6,28,.97) 100%),
    linear-gradient(100deg, rgba(35,16,65,.9) 0%, rgba(120,58,169,.42) 45%, rgba(21,8,38,.55) 100%),
    url('https://images.unsplash.com/photo-1663900108404-a05e8bf82cda?q=80&w=1920&auto=format&fit=crop');
  background-size:cover;
  background-position:center 65%;
  animation:heroZoom 26s ease-in-out infinite alternate;
}
@keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.09); } }

.hero-pattern{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.5;
}
.hero-pattern svg{
  position:absolute;
  color:var(--purple-300);
}
.mark-1{ width:220px; top:8%; inset-inline-end:6%; animation:driftA 22s ease-in-out infinite; opacity:.35;}
.mark-2{ width:140px; bottom:14%; inset-inline-start:4%; animation:driftB 18s ease-in-out infinite; opacity:.25; transform:rotate(180deg);}
.mark-3{ width:90px; top:38%; inset-inline-start:12%; animation:driftA 16s ease-in-out infinite reverse; opacity:.2;}
@keyframes driftA{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-22px) rotate(4deg);} }
@keyframes driftB{ 0%,100%{ transform:translateY(0) rotate(180deg);} 50%{ transform:translateY(18px) rotate(176deg);} }

.hero-content{ position:relative; z-index:2; padding-top:110px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:700; font-size:.85rem;
  color:#fff; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);
  padding:8px 18px; border-radius:100px;
  backdrop-filter:blur(6px);
  opacity:0; animation:fadeUp .9s var(--ease) .2s forwards;
}
.hero-eyebrow::before{ content:""; width:7px; height:7px; background:var(--gold-400); transform:rotate(45deg); border-radius:2px; }

.hero-title{
  font-size:clamp(2.8rem, 6.6vw, 5.4rem);
  line-height:1.14;
  color:#fff;
  margin-top:26px;
  opacity:0; animation:titleReveal 1.1s var(--ease) .35s forwards;
}
.hero-title .accent{
  background:linear-gradient(100deg, var(--gold-400) 10%, var(--purple-200) 60%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@keyframes titleReveal{
  from{ opacity:0; transform:translateY(34px) scale(.98); filter:blur(6px); }
  to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
.hero-sub{
  margin-top:24px;
  max-width:600px;
  font-size:1.18rem;
  color:rgba(255,255,255,.82);
  line-height:1.9;
  opacity:0; animation:fadeUp .9s var(--ease) .6s forwards;
}
.hero-actions{
  margin-top:42px;
  display:flex; flex-wrap:wrap; gap:16px;
  opacity:0; animation:fadeUp .9s var(--ease) .8s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:translateY(0);} }

.hero-stats{
  position:relative; z-index:2;
  margin-top:78px;
  display:flex; flex-wrap:wrap;
  gap:0;
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:30px;
  opacity:0; animation:fadeUp .9s var(--ease) 1s forwards;
}
.hero-stat{
  padding-inline-end:44px; margin-inline-end:44px;
  border-inline-end:1px solid rgba(255,255,255,.16);
}
.hero-stat:last-child{ border-inline-end:none; margin-inline-end:0; padding-inline-end:0; }
.hero-stat .num{ font-family:var(--font-head); font-weight:900; font-size:2.1rem; color:#fff; }
.hero-stat .num span{ color:var(--gold-400); }
.hero-stat .label{ font-size:.88rem; color:rgba(255,255,255,.66); margin-top:4px; }

.scroll-cue{
  position:absolute; bottom:34px; inset-inline-start:50%;
  transform:translateX(50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.7);
  font-size:.78rem;
  font-family:var(--font-head); font-weight:700;
  opacity:0; animation:fadeUp .9s var(--ease) 1.2s forwards;
}
html[dir="rtl"] .scroll-cue{ transform:translateX(50%); }
.scroll-cue .line{
  width:1px; height:38px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), transparent);
  position:relative; overflow:hidden;
}
.scroll-cue .line::after{
  content:""; position:absolute; top:-100%; inset-inline:0; height:100%;
  background:linear-gradient(180deg, transparent, #fff);
  animation:scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{ to{ top:100%; } }

@media (max-width:768px){
  .hero-stats{ gap:22px 0; }
  .hero-stat{ width:50%; padding-inline-end:0; margin-inline-end:0; border-inline-end:none; padding-bottom:14px; }
}
@media (max-height:800px){
  .hero-content{ padding-top:96px; }
  .hero-stats{ margin-top:40px; padding-top:20px; }
  .scroll-cue{ display:none; }
}
@media (max-height:700px){
  .hero-title{ margin-top:16px; }
  .hero-sub{ margin-top:14px; }
  .hero-actions{ margin-top:26px; }
}

/* ============================= ABOUT ============================= */
.about{ background:var(--paper); position:relative; }
.about-grid{
  display:grid;
  grid-template-columns:.86fr 1fr;
  gap:70px;
  align-items:center;
}
@media (max-width:991px){
  .about-grid{ grid-template-columns:1fr; gap:56px; }
}

/* animated logo stage */
.logo-stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-width:420px;
  margin-inline:auto;
  display:flex; align-items:center; justify-content:center;
}
.logo-stage::before{
  content:"";
  position:absolute; inset:6%;
  border-radius:50%;
  background:linear-gradient(155deg, var(--purple-50), #fff 60%);
  box-shadow:var(--shadow-md), inset 0 1px 1px rgba(255,255,255,.8);
  border:1px solid var(--purple-100);
}
.logo-stage .ring{
  position:absolute;
  border-radius:50%;
  border:1.5px dashed var(--purple-200);
}
.logo-stage .ring--1{ inset:0; animation:spin 34s linear infinite; }
.logo-stage .ring--1::after{
  content:""; position:absolute; top:-4px; inset-inline-start:50%; margin-inline-start:-4px;
  width:8px; height:8px; border-radius:50%; background:var(--gold-400);
  box-shadow:0 0 12px 2px rgba(201,162,39,.7);
}
.logo-stage .ring--2{ inset:13%; border-style:solid; border-color:var(--purple-100); animation:spin 26s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.logo-stage .glow{
  position:absolute; inset:18%;
  background:radial-gradient(circle, rgba(120,58,169,.22), transparent 70%);
  border-radius:50%;
  animation:pulseGlow 4.5s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{ opacity:.6; transform:scale(.94);} 50%{ opacity:1; transform:scale(1.05);} }

.logo-stage .dot{
  position:absolute;
  width:9px; height:9px;
  border-radius:2px;
  background:var(--purple-400);
  transform:rotate(45deg);
}
.logo-stage .dot--1{ top:6%; inset-inline-start:18%; animation:floaty 6s ease-in-out infinite; }
.logo-stage .dot--2{ bottom:10%; inset-inline-end:12%; background:var(--purple-300); animation:floaty 7s ease-in-out infinite 1s; }
.logo-stage .dot--3{ top:44%; inset-inline-end:2%; width:6px; height:6px; background:var(--purple-200); animation:floaty 5s ease-in-out infinite .5s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(45deg);} 50%{ transform:translateY(-14px) rotate(45deg);} }

.logo-stage .mark-wrap{
  position:relative; z-index:2;
  width:56%;
  filter:drop-shadow(0 24px 40px rgba(69,29,120,.28));
  transition:transform .6s var(--ease);
}
.logo-stage:hover .mark-wrap{ transform:scale(1.04) rotate(-2deg); }

.about-copy h2{ }
.about-copy .section-lead{ margin-top:20px; }
.about-mini-stats{
  margin-top:38px;
  display:flex;
  gap:0;
  flex-wrap:wrap;
}
.about-mini-stats .mini-stat{
  padding-inline-end:36px; margin-inline-end:36px;
  border-inline-end:1px solid var(--purple-100);
}
.about-mini-stats .mini-stat:last-child{ border-inline-end:none; margin-inline-end:0; padding-inline-end:0; }
.about-mini-stats .num{
  font-family:var(--font-head); font-weight:900; font-size:2rem; color:var(--purple-600);
}
.about-mini-stats .label{ font-size:.86rem; color:var(--ink-faint); margin-top:2px; }

.about-copy .btn-dibkil{ margin-top:38px; }

/* ============================= SERVICES ============================= */
.services{ background:var(--sand); }
.services .section-head{ max-width:640px; }
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
@media (max-width:991px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .svc-grid{ grid-template-columns:1fr; } }

.svc-card{
  background:var(--paper);
  border:1px solid var(--purple-100);
  border-radius:20px;
  padding:34px 30px;
  position:relative;
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  transform-style:preserve-3d;
}
.svc-card::before{
  content:"";
  position:absolute; inset-inline-end:-30px; top:-30px;
  width:120px; height:120px;
  background:var(--purple-50);
  border-radius:30px;
  transform:rotate(20deg);
  transition:transform .6s var(--ease), background .6s var(--ease);
  z-index:0;
}
.svc-card:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-md), 0 0 0 1px var(--purple-200), 0 26px 46px -18px rgba(120,58,169,.35);
  border-color:var(--purple-200);
}
.svc-card:hover::before{ transform:rotate(0deg) scale(1.15); background:var(--purple-100); }

.svc-icon{
  position:relative; z-index:1;
  width:58px; height:58px;
  border-radius:16px;
  background:linear-gradient(150deg, var(--purple-400), var(--purple-600));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 10px 20px -8px rgba(120,58,169,.55);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  margin-bottom:24px;
  transition:transform .5s var(--ease), border-radius .5s var(--ease);
}
.svc-card:hover .svc-icon{ transform:rotate(-8deg) scale(1.06); border-radius:20px 8px 20px 8px; }
.svc-icon svg{ width:28px; height:28px; }

.svc-card h3{
  position:relative; z-index:1;
  font-size:1.2rem;
  margin-bottom:12px;
}
.svc-card p{ position:relative; z-index:1; font-size:.96rem; }
.svc-num{
  position:absolute; bottom:18px; inset-inline-end:24px;
  font-family:var(--font-head); font-weight:900; font-size:2.4rem;
  color:var(--purple-50); z-index:0;
}

/* ============================= PROCESS ============================= */
.process{ background:var(--paper); }
.process-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:36px;
  margin-top:20px;
}
.process-track::before{
  content:"";
  position:absolute;
  top:34px; inset-inline:6%;
  height:2px;
  background:repeating-linear-gradient(to left, var(--gold-400) 0 10px, transparent 10px 18px);
  transform-origin:right center;
  transform:scaleX(0);
  transition:transform 1.4s var(--ease);
}
html[dir="rtl"] .process-track::before{ transform-origin:right center; }
.process-track.in-view::before{ transform:scaleX(1); }

@media (max-width:900px){
  .process-track{ grid-template-columns:1fr; gap:44px; }
  .process-track::before{ display:none; }
}

.process-step{ position:relative; }
.process-step .step-num{
  width:68px; height:68px;
  border-radius:18px;
  background:var(--paper);
  border:2px solid var(--purple-200);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:900; font-size:1.3rem;
  color:var(--purple-500);
  position:relative; z-index:1;
  transition:background .5s var(--ease), color .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease);
}
.process-step:hover .step-num{
  background:var(--purple-500); color:#fff; border-color:var(--purple-500);
  transform:rotate(-8deg) scale(1.06);
}
.process-step h3{ margin-top:22px; font-size:1.12rem; }
.process-step p{ margin-top:10px; font-size:.95rem; }
.process-step .step-arrow{
  position:absolute; top:26px; inset-inline-end:calc(100% + 4px);
  width:28px; height:28px; color:var(--purple-200);
  transform:scaleX(-1);
}
@media (max-width:900px){ .process-step .step-arrow{ display:none; } }

/* ============================= WHY US ============================= */
.why{
  position:relative;
  background:
    radial-gradient(1100px 500px at 85% 0%, rgba(120,58,169,.35), transparent 60%),
    linear-gradient(160deg, var(--purple-900) 0%, #2A1245 55%, var(--purple-950) 100%);
  color:#fff;
  overflow:hidden;
}
.why-icon-bg{
  position:absolute; width:520px; opacity:.06; color:#fff;
  top:-8%; inset-inline-end:-6%;
  animation:driftA 30s ease-in-out infinite;
}
.why .eyebrow{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:var(--purple-200); }
.why .eyebrow::before{ background:var(--purple-300); }
.why .section-title{ color:#fff; }
.why .section-lead{ color:rgba(255,255,255,.72); }

.why-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
  margin-top:20px;
}
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr; gap:44px; } }

.why-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.why-stat{
  padding:28px 22px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  transition:background .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
}
.why-stat:hover{ background:rgba(255,255,255,.08); transform:translateY(-6px); border-color:rgba(255,255,255,.3); }
.why-stat .num{
  font-family:var(--font-head); font-weight:900;
  font-size:2.6rem; color:#fff;
}
.why-stat .num span{ color:var(--gold-400); }
.why-stat:hover{ border-color:var(--gold-400); }
.why-stat .label{ margin-top:8px; font-size:.92rem; color:rgba(255,255,255,.65); }

.why-list{ display:flex; flex-direction:column; gap:22px; }
.why-item{
  display:flex; gap:16px; align-items:flex-start;
  padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.why-item:last-child{ border-bottom:none; padding-bottom:0; }
.why-item .ico{
  flex:none; width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  color:var(--purple-200);
}
.why-item .ico svg{ width:20px; height:20px; }
.why-item h4{ font-family:var(--font-head); font-weight:700; font-size:1.03rem; color:#fff; margin-bottom:6px; }
.why-item p{ color:rgba(255,255,255,.66); font-size:.94rem; }

/* ============================= CTA BANNER ============================= */
.cta-banner{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(700px 380px at 100% 0%, rgba(201,162,39,.25), transparent 60%),
    linear-gradient(135deg, var(--purple-600) 0%, var(--purple-500) 45%, var(--purple-700) 100%);
  padding:100px 0;
  text-align:center;
}
.cta-banner .deco{
  position:absolute; width:340px; color:#fff; opacity:.08;
}
.cta-banner .deco--1{ top:-10%; inset-inline-start:-6%; animation:driftB 24s ease-in-out infinite; }
.cta-banner .deco--2{ bottom:-14%; inset-inline-end:-8%; animation:driftA 20s ease-in-out infinite; }

.cta-inner{ position:relative; z-index:1; max-width:760px; margin-inline:auto; }
.cta-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:700; font-size:.85rem;
  color:#fff; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  padding:8px 18px; border-radius:100px;
}
.cta-eyebrow::before{ content:""; width:7px; height:7px; background:#fff; transform:rotate(45deg); border-radius:2px; }
.cta-title{
  color:#fff;
  font-size:clamp(2rem, 4.4vw, 3.2rem);
  line-height:1.28;
  margin-top:22px;
}
.cta-title .line2{ color:var(--gold-200); display:block; }
.cta-sub{
  margin-top:20px;
  color:rgba(255,255,255,.85);
  font-size:1.08rem;
  max-width:560px; margin-inline:auto;
}
.cta-actions{
  margin-top:38px;
  display:flex; justify-content:center; flex-wrap:wrap; gap:16px;
}
.cta-actions .btn-dibkil.primary{
  background:#fff; color:var(--purple-600);
  box-shadow:0 16px 34px -10px rgba(20,8,40,.4);
}
.cta-actions .btn-dibkil.primary:hover{ background:var(--purple-50); }

/* ============================= FOOTER ============================= */
.site-footer{
  background:var(--purple-950);
  color:rgba(255,255,255,.7);
  padding-top:90px;
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute; top:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg, var(--purple-500), var(--gold-400) 50%, var(--purple-500));
}
.site-footer .deco{
  position:absolute; width:420px; color:#fff; opacity:.04;
  bottom:-10%; inset-inline-start:-8%;
}
.footer-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.3fr .8fr .9fr 1fr;
  gap:44px;
  padding-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

.footer-brand img{ height:38px; margin-bottom:20px; }
.footer-brand p{ color:rgba(255,255,255,.55); font-size:.94rem; max-width:280px; }
.footer-social{ display:flex; gap:10px; margin-top:26px; }
.footer-social a{
  width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s;
}
.footer-social a:hover{ background:var(--purple-500); border-color:var(--purple-500); transform:translateY(-4px); }
.footer-social svg{ width:18px; height:18px; }

.footer-col h5{
  font-family:var(--font-head); font-weight:700; font-size:1.02rem;
  color:#fff; margin-bottom:22px;
}
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.footer-col a{ color:rgba(255,255,255,.6); font-size:.94rem; transition:color .3s var(--ease), padding-inline-start .3s var(--ease); }
.footer-col a:hover{ color:#fff; }
.footer-contact li{ display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.6); font-size:.94rem; }
.footer-contact svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--purple-300); }

.footer-bottom{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
  padding:26px 0;
  font-size:.86rem;
  color:rgba(255,255,255,.45);
}
.footer-bottom a{ color:rgba(255,255,255,.6); }
.footer-bottom a:hover{ color:#fff; }

/* ============================= WHATSAPP FLOAT ============================= */
.wa-float{
  position:fixed;
  left:24px; bottom:26px;
  z-index:1200;
  width:60px; height:60px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.6);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wa-float svg{ width:30px; height:30px; }
.wa-float::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  border:2px solid #25D366;
  opacity:.55;
  animation:waPulse 2.4s ease-out infinite;
}
@keyframes waPulse{ 0%{ transform:scale(.9); opacity:.55; } 100%{ transform:scale(1.5); opacity:0; } }
.wa-float:hover{ transform:scale(1.08); box-shadow:0 18px 38px -8px rgba(37,211,102,.75); }

@media (max-width:480px){
  .wa-float{ width:52px; height:52px; left:16px; bottom:18px; }
  .wa-float svg{ width:26px; height:26px; }
}

/* back to top (bonus, uses same chevron language) */
.to-top{
  position:fixed; right:24px; bottom:26px; z-index:1150;
  width:48px; height:48px; border-radius:50%;
  background:#fff; color:var(--purple-600);
  border:1px solid var(--purple-100);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top svg{ width:18px; height:18px; }
.to-top:hover{ background:var(--purple-500); color:#fff; }

/* =========================================================
   NEW: Page load curtain, progress bar, cursor glow, motion utils
   ========================================================= */
html{ background:var(--purple-950); }
body{ position:relative; }

#scrollProgress{
  position:fixed; top:0; inset-inline-start:0;
  height:3px; width:0%;
  background:linear-gradient(90deg, var(--purple-400), var(--purple-500) 55%, var(--gold-500));
  z-index:2000;
  transition:width .12s linear;
}

.page-curtain{
  position:fixed; inset:0; z-index:5000;
  background:
    radial-gradient(900px 500px at 50% 20%, rgba(120,58,169,.35), transparent 60%),
    linear-gradient(160deg, var(--purple-950) 0%, var(--purple-900) 55%, #150826 100%);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .85s var(--ease), visibility .85s var(--ease);
}
.page-curtain img{
  width:64px; height:auto;
  animation:curtainPulse 1.4s ease-in-out infinite;
}
@keyframes curtainPulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.12); opacity:1; } }
.page-curtain.curtain-hide{
  opacity:0; visibility:hidden; pointer-events:none;
}
.page-curtain.curtain-hide img{ transform:scale(1.3); }

.cursor-glow{
  position:fixed; top:-140px; inset-inline-start:-140px;
  width:280px; height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(120,58,169,.28), transparent 70%);
  pointer-events:none;
  z-index:5;
  opacity:0;
  transition:opacity .4s ease;
  will-change:transform;
}

.magnetic{ transition:transform .25s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }

/* Stagger helper: apply to a grid/flex container, children get incremental delay */
.stagger > *{ transition-delay:calc(var(--stagger-i, 0) * 90ms); }

/* Decorative blurred blob field */
.blob-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.blob{
  position:absolute; border-radius:50%;
  filter:blur(70px);
  opacity:.5;
  animation:blobMove 18s ease-in-out infinite;
}
.blob--a{ width:420px; height:420px; background:var(--purple-400); top:-10%; inset-inline-start:-8%; animation-duration:22s; }
.blob--b{ width:340px; height:340px; background:var(--purple-300); bottom:-12%; inset-inline-end:-6%; animation-duration:26s; animation-delay:-6s; }
.blob--c{ width:260px; height:260px; background:var(--purple-200); top:30%; inset-inline-end:18%; animation-duration:20s; animation-delay:-3s; opacity:.35; }
@keyframes blobMove{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(30px,-24px) scale(1.08); }
  66%{ transform:translate(-24px,20px) scale(.94); }
}

/* Marquee / logo ticker */
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:64px;
  width:max-content;
  animation:marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.marquee-item{
  font-family:var(--font-head); font-weight:800; font-size:1.3rem;
  color:var(--ink-faint); opacity:.55; white-space:nowrap;
  display:flex; align-items:center; gap:10px;
  transition:opacity .3s ease, color .3s ease;
}
.marquee-item:hover{ opacity:1; color:var(--gold-700); }
.marquee-item svg{ width:20px; height:20px; }

/* Nav active state */
.main-nav a.active{ color:var(--purple-300); }
.site-header.is-scrolled .main-nav a.active{ color:var(--purple-600); background:var(--purple-50); }
.main-nav a{ overflow:hidden; }
.main-nav a::after{
  content:""; position:absolute; right:16px; left:16px; bottom:6px;
  height:2px; background:currentColor;
  transform:scaleX(0); transform-origin:center;
  transition:transform .35s var(--ease);
  border-radius:2px;
}
.main-nav a.active::after{ transform:scaleX(1); }

/* =========================================================
   INNER PAGE HERO (about / services / why / contact)
   ========================================================= */
.page-hero{
  position:relative;
  padding:190px 0 130px;
  overflow:hidden;
  background:
    radial-gradient(1000px 480px at 80% -10%, rgba(120,58,169,.4), transparent 60%),
    linear-gradient(165deg, var(--purple-950) 0%, var(--purple-900) 50%, #1c0c33 100%);
  color:#fff;
}
.page-hero::after{
  content:"";
  position:absolute; bottom:-1px; inset-inline:0; height:64px;
  background:var(--paper);
  clip-path:polygon(0 100%, 100% 45%, 100% 100%, 0 100%);
}
body[data-page="why"] .page-hero::after{ background:var(--purple-900); }
.page-hero .hero-pattern svg{ position:absolute; color:var(--purple-300); }
.breadcrumb-trail{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:700; font-size:.86rem;
  color:rgba(255,255,255,.55);
  position:relative; z-index:1;
  opacity:0; animation:fadeUp .8s var(--ease) .1s forwards;
}
.breadcrumb-trail a{ color:rgba(255,255,255,.75); transition:color .3s ease; }
.breadcrumb-trail a:hover{ color:#fff; }
.breadcrumb-trail .sep{ opacity:.5; }
.page-hero .eyebrow{
  position:relative; z-index:1;
  margin-top:22px;
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:var(--purple-200);
  opacity:0; animation:fadeUp .8s var(--ease) .2s forwards;
}
.page-hero .eyebrow::before{ background:var(--purple-300); }
.page-hero h1{
  position:relative; z-index:1;
  color:#fff;
  font-size:clamp(2.6rem, 5.6vw, 4.1rem);
  line-height:1.16;
  margin-top:20px;
  max-width:760px;
  opacity:0; animation:titleReveal 1.1s var(--ease) .35s forwards;
}
.page-hero .lead{
  position:relative; z-index:1;
  margin-top:20px;
  max-width:600px;
  font-size:1.1rem;
  color:rgba(255,255,255,.75);
  line-height:1.9;
  opacity:0; animation:fadeUp .8s var(--ease) .5s forwards;
}
.page-hero-stats{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:0;
  margin-top:52px;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:26px;
  opacity:0; animation:fadeUp .8s var(--ease) .65s forwards;
}
@media (max-width:768px){ .page-hero{ padding:150px 0 80px; } }

/* =========================================================
   ABOUT PAGE — specific sections
   ========================================================= */
.mv-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:26px;
}
@media (max-width:768px){ .mv-grid{ grid-template-columns:1fr; } }
.mv-card{
  padding:40px 34px;
  border-radius:22px;
  position:relative;
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.mv-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.mv-card--mission{ background:var(--purple-500); color:#fff; }
.mv-card--vision{ background:var(--sand); border:1px solid var(--purple-100); }
.mv-card .mv-icon{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
}
.mv-card--mission .mv-icon{ background:rgba(255,255,255,.16); color:#fff; }
.mv-card--vision .mv-icon{ background:var(--purple-500); color:#fff; }
.mv-card .mv-icon svg{ width:26px; height:26px; }
.mv-card h3{ font-size:1.3rem; }
.mv-card--mission h3{ color:#fff; }
.mv-card p{ margin-top:14px; font-size:1rem; }
.mv-card--mission p{ color:rgba(255,255,255,.86); }
.mv-card-deco{ position:absolute; width:180px; opacity:.14; bottom:-30px; inset-inline-end:-30px; }

/* Values grid */
.values-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
@media (max-width:991px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .values-grid{ grid-template-columns:1fr; } }
.value-card{
  text-align:center;
  padding:32px 20px;
  border-radius:18px;
  border:1px solid var(--purple-100);
  transition:transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
}
.value-card:hover{ transform:translateY(-8px); background:var(--purple-50); border-color:var(--purple-200); }
.value-card .v-icon{
  width:56px; height:56px; margin-inline:auto;
  border-radius:50%;
  background:var(--purple-50);
  border:1.5px solid var(--purple-200);
  display:flex; align-items:center; justify-content:center;
  color:var(--purple-500);
  margin-bottom:18px;
  transition:background .4s ease, color .4s ease, transform .4s ease;
}
.value-card:hover .v-icon{ background:var(--purple-500); color:#fff; transform:scale(1.08) rotate(-6deg); }
.value-card .v-icon svg{ width:24px; height:24px; }
.value-card h4{ font-size:1.02rem; }
.value-card p{ margin-top:8px; font-size:.88rem; }

/* Milestones timeline (vertical, alternating on desktop) */
.timeline{ position:relative; margin-top:20px; }
.timeline::before{
  content:"";
  position:absolute; inset-inline-start:50%; top:0; bottom:0;
  width:2px; margin-inline-start:-1px;
  background:repeating-linear-gradient(to bottom, var(--gold-400) 0 10px, transparent 10px 18px);
  transform-origin:top center;
  transform:scaleY(0);
  transition:transform 1.6s var(--ease);
}
.timeline[data-line].in-view::before{ transform:scaleY(1); }
.t-item{
  position:relative;
  width:calc(50% - 40px);
  margin-bottom:46px;
  padding:26px 28px;
  background:var(--paper);
  border:1px solid var(--purple-100);
  border-radius:18px;
  box-shadow:var(--shadow-sm);
}
.t-item:nth-child(odd){ margin-inline-start:0; }
.t-item:nth-child(even){ margin-inline-start:calc(50% + 40px); }
.t-item .t-year{
  font-family:var(--font-head); font-weight:900; color:var(--purple-500);
  font-size:1.4rem;
}
.t-item h4{ margin-top:8px; font-size:1.05rem; }
.t-item p{ margin-top:8px; font-size:.92rem; }
.t-dot{
  position:absolute; top:30px; inset-inline-start:50%;
  width:16px; height:16px; margin-inline-start:-8px;
  border-radius:50%; background:var(--purple-500);
  border:4px solid var(--purple-50);
  box-shadow:0 0 0 2px var(--gold-400);
}
@media (max-width:768px){
  .timeline::before{ inset-inline-start:18px; margin-inline-start:0; }
  .t-item, .t-item:nth-child(odd), .t-item:nth-child(even){ width:calc(100% - 56px); margin-inline-start:56px; }
  .t-dot{ inset-inline-start:18px; margin-inline-start:-8px; }
}

/* Team placeholder cards */
.team-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
@media (max-width:991px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .team-grid{ grid-template-columns:1fr; } }
.team-card{ text-align:center; }
.team-avatar{
  width:100%; aspect-ratio:1/1; border-radius:22px;
  background:linear-gradient(155deg, var(--purple-100), var(--purple-50));
  display:flex; align-items:center; justify-content:center;
  color:var(--purple-300);
  margin-bottom:18px;
  overflow:hidden;
  position:relative;
  transition:transform .5s var(--ease);
}
.team-card:hover .team-avatar{ transform:translateY(-6px); }
.team-avatar svg{ width:64px; height:64px; }
.team-card h4{ font-size:1rem; }
.team-card .role{ font-size:.85rem; color:var(--ink-faint); margin-top:4px; }

/* =========================================================
   SERVICES PAGE — detailed alternating rows
   ========================================================= */
.svc-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  padding:70px 0;
  border-bottom:1px solid var(--purple-100);
}
.svc-detail:last-child{ border-bottom:none; }
.svc-detail:nth-child(even) .svc-detail-media{ order:2; }
@media (max-width:900px){
  .svc-detail{ grid-template-columns:1fr; gap:32px; padding:50px 0; }
  .svc-detail:nth-child(even) .svc-detail-media{ order:0; }
}
.svc-detail-media{
  position:relative;
  aspect-ratio:4/3.2;
  border-radius:26px;
  background:linear-gradient(155deg, var(--purple-500), var(--purple-700));
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.svc-detail-media svg.big-icon{ width:34%; color:rgba(255,255,255,.9); }
.svc-detail-media .media-pattern{ position:absolute; inset:0; opacity:.18; color:#fff; }
.svc-detail-num{
  position:absolute; top:20px; inset-inline-start:20px;
  font-family:var(--font-head); font-weight:900; font-size:1.1rem;
  color:#fff; background:rgba(255,255,255,.16);
  padding:6px 16px; border-radius:100px;
  backdrop-filter:blur(4px);
}
.svc-detail-copy .eyebrow{ margin-bottom:18px; }
.svc-detail-copy h3{ font-size:clamp(1.5rem, 2.6vw, 2rem); line-height:1.3; }
.svc-detail-copy p{ margin-top:16px; font-size:1.02rem; }
.svc-feature-list{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.svc-feature-list li{
  display:flex; align-items:center; gap:10px;
  font-size:.96rem; color:var(--ink-soft); font-weight:500;
  list-style:none;
}
.svc-feature-list svg{ width:20px; height:20px; color:var(--purple-500); flex:none; }

/* =========================================================
   WHY PAGE — comparison + testimonials + achievements
   ========================================================= */
.compare-wrap{
  border-radius:24px;
  border:1px solid var(--purple-100);
  overflow:hidden;
}
.compare-row{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  align-items:center;
}
.compare-row + .compare-row{ border-top:1px solid var(--purple-100); }
.compare-row.head{ background:var(--purple-900); color:#fff; }
.compare-row.head .compare-cell{ font-family:var(--font-head); font-weight:800; }
.compare-cell{
  padding:18px 22px;
  font-size:.95rem;
  color:var(--ink-soft);
  text-align:center;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.compare-cell:first-child{ justify-content:flex-start; text-align:start; font-weight:600; color:var(--ink); }
.compare-row:nth-child(even):not(.head){ background:var(--sand); }
.compare-cell svg{ width:20px; height:20px; }
.compare-cell.yes svg{ color:var(--purple-500); }
.compare-cell.no svg{ color:var(--ink-faint); opacity:.5; }
@media (max-width:700px){
  .compare-cell{ padding:14px 10px; font-size:.82rem; }
}

.testi-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{
  background:var(--paper);
  border:1px solid var(--purple-100);
  border-radius:22px;
  padding:32px 28px;
  position:relative;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.testi-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.testi-quote{ width:34px; height:34px; color:var(--gold-400); margin-bottom:16px; }
.testi-card p{ font-size:.98rem; color:var(--ink-soft); }
.testi-person{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.testi-avatar{
  width:44px; height:44px; border-radius:50%;
  background:var(--gold-100); color:var(--gold-700);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800;
}
.testi-person h5{ font-family:var(--font-head); font-weight:700; font-size:.94rem; color:var(--ink); }
.testi-person span{ font-size:.82rem; color:var(--ink-faint); }

/* achievements strip */
.ach-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(255,255,255,.1);
  border-radius:22px;
  overflow:hidden;
}
@media (max-width:700px){ .ach-strip{ grid-template-columns:repeat(2,1fr); } }
.ach-cell{
  background:rgba(255,255,255,.03);
  padding:34px 20px;
  text-align:center;
  transition:background .4s ease;
}
.ach-cell:hover{ background:rgba(255,255,255,.07); }
.ach-cell .num{ font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#fff; }
.ach-cell .num span{ color:var(--gold-400); }
.ach-cell:hover{ background:rgba(201,162,39,.06); }
.ach-cell .label{ margin-top:8px; font-size:.86rem; color:rgba(255,255,255,.6); }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:.95fr 1.15fr;
  gap:54px;
  align-items:start;
}
@media (max-width:991px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }

.contact-info-card{
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(201,162,39,.16), transparent 65%),
    var(--purple-900);
  color:#fff;
  border-radius:26px;
  padding:44px 36px;
  position:relative;
  overflow:hidden;
}
.contact-info-card .mv-card-deco{ color:var(--gold-400); opacity:.16; }
.contact-info-card h3{ color:#fff; font-size:1.4rem; }
.contact-info-card > p{ margin-top:12px; color:rgba(255,255,255,.7); font-size:.96rem; }
.contact-info-list{ margin-top:32px; display:flex; flex-direction:column; gap:20px; position:relative; z-index:1; }
.contact-info-item{ display:flex; gap:16px; align-items:flex-start; }
.contact-info-item .ico{
  flex:none; width:46px; height:46px; border-radius:14px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; color:var(--purple-200);
}
.contact-info-item .ico svg{ width:21px; height:21px; }
.contact-info-item h5{ font-family:var(--font-head); font-weight:700; font-size:.92rem; color:rgba(255,255,255,.6); }
.contact-info-item p, .contact-info-item a{ color:#fff; font-size:1rem; margin-top:4px; }
.contact-info-social{ display:flex; gap:10px; margin-top:34px; position:relative; z-index:1; }
.contact-info-social a{
  width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .3s ease, transform .3s ease;
}
.contact-info-social a:hover{ background:var(--purple-500); transform:translateY(-4px); }
.contact-info-social svg{ width:18px; height:18px; }

.contact-form{
  background:var(--paper);
  border:1px solid var(--purple-100);
  border-radius:26px;
  padding:44px 40px;
  box-shadow:var(--shadow-sm);
}
@media (max-width:560px){ .contact-form{ padding:30px 22px; } }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-group{ margin-bottom:20px; }
.form-group label{
  display:block; font-family:var(--font-head); font-weight:700;
  font-size:.9rem; margin-bottom:8px; color:var(--ink);
}
.form-group input, .form-group select, .form-group textarea{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1.5px solid var(--purple-100);
  background:var(--sand);
  font-family:var(--font-body);
  font-size:.96rem;
  color:var(--ink);
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.form-group textarea{ resize:vertical; min-height:130px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none;
  border-color:var(--purple-400);
  background:var(--paper);
  box-shadow:0 0 0 4px var(--ring);
}
.form-submit{
  width:100%; justify-content:center;
  border:none; cursor:pointer;
}
.form-note{ margin-top:14px; font-size:.82rem; color:var(--ink-faint); text-align:center; }
.form-success{
  display:none;
  align-items:center; gap:12px;
  background:var(--purple-50); border:1px solid var(--purple-200);
  color:var(--purple-700); border-radius:14px;
  padding:16px 20px; font-size:.92rem; font-weight:600;
  margin-bottom:20px;
}
.form-success.show{ display:flex; }
.form-success svg{ width:22px; height:22px; flex:none; color:var(--purple-500); }

.map-wrap{
  margin-top:26px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--purple-100);
  aspect-ratio:16/6;
  position:relative;
  filter:grayscale(.15) saturate(1.1);
}
.map-wrap iframe{ width:100%; height:100%; border:0; display:block; }

/* FAQ (bootstrap accordion re-skin) */
.faq .accordion-item{
  border:1px solid var(--purple-100) !important;
  border-radius:16px !important;
  overflow:hidden;
  margin-bottom:14px;
}
.faq .accordion-button{
  font-family:var(--font-head); font-weight:700; font-size:1rem;
  color:var(--ink); background:var(--paper);
  padding:20px 24px;
}
.faq .accordion-button:not(.collapsed){
  color:var(--purple-600); background:var(--purple-50);
  box-shadow:none;
}
.faq .accordion-button:focus{ box-shadow:none; }
.faq .accordion-button::after{ filter:hue-rotate(220deg) saturate(2); }
.faq .accordion-body{ padding:6px 24px 24px; color:var(--ink-soft); font-size:.96rem; line-height:1.9; }

/* Parallax dots (mouse-driven, separate from CSS-animated marks to avoid transform conflicts) */
.parallax-dot{
  position:absolute;
  width:10px; height:10px;
  border-radius:3px;
  background:var(--purple-300);
  opacity:.55;
  will-change:transform;
  transition:transform .1s linear;
}
.pd-1{ top:22%; inset-inline-start:22%; }
.pd-2{ top:64%; inset-inline-end:20%; width:7px; height:7px; background:var(--purple-200); }
.pd-3{ top:40%; inset-inline-start:62%; width:13px; height:13px; opacity:.4; }



/* 

*/



  /* ===== إضافة: أنماط صور بطاقات الخدمات ===== */
  .svc-detail-media{
    position:relative;
    overflow:hidden;
    background-color:var(--sand, #f2ede4);
  }
  .svc-detail-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
    display:block;
  }
  .svc-detail-media::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg, rgba(20,16,10,.12) 0%, rgba(20,16,10,.62) 100%);
    pointer-events:none;
  }
  .svc-detail-media .media-pattern,
  .svc-detail-media .svc-detail-num,
  .svc-detail-media .big-icon{
    position:relative;
    z-index:2;
  }
  .svc-detail-media .big-icon{
    color:#fff;
  }
  .svc-detail-media .svc-detail-num{
    color:#fff;
  }