:root{
  --bg:#06091c;
  --bg2:#0d1233;
  --panel:#111742;
  --text:#f8fbff;
  --muted:#b7c3dc;
  --dark:#111833;
  --body:#f5f8ff;
  --purple:#8613d4;
  --purple2:#b90ff0;
  --blue:#66c8ff;
  --blue2:#3195ff;
  --line:rgba(255,255,255,.13);
  --shadow:0 24px 70px rgba(11,15,45,.18);
  --font:'Alexandria','IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;
  --max:1220px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font);background:var(--body);color:var(--dark);line-height:1.75;overflow-x:hidden}a{color:inherit;text-decoration:none}img,video{max-width:100%;display:block}button,input,select,textarea{font-family:var(--font)}svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.skip-link{position:absolute;right:-999px;top:10px;background:#fff;color:#000;padding:8px 14px;z-index:1000}.skip-link:focus{right:10px}.site-header{position:fixed;top:16px;right:50%;transform:translateX(50%);z-index:100;width:min(1180px,calc(100% - 32px));height:74px;padding:12px 18px;border-radius:24px;display:flex;align-items:center;gap:18px;background:rgba(5,8,24,.72);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(18px);box-shadow:0 18px 60px rgba(0,0,0,.22)}.brand img{width:122px}.main-nav{display:flex;align-items:center;gap:6px;margin-inline-start:auto}.main-nav a{color:#e8efff;padding:9px 13px;border-radius:14px;font-size:14px;font-weight:700}.main-nav a:hover,.main-nav a.active{color:#fff;background:linear-gradient(135deg,rgba(102,200,255,.14),rgba(185,15,240,.18))}.header-actions{display:flex;align-items:center;gap:10px}.header-cta,.admin-link{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;padding:10px 15px;font-weight:900;font-size:13px}.header-cta{color:#fff;background:linear-gradient(135deg,var(--blue2),var(--purple2));box-shadow:0 10px 28px rgba(140,20,220,.28)}.admin-link{color:#d9e8ff;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06)}.menu-toggle{display:none;margin-inline-start:auto;background:transparent;border:0;width:42px}.menu-toggle span{display:block;height:2px;background:#fff;margin:7px;border-radius:4px}.hero-video{position:relative;min-height:100svh;width:100vw;display:grid;place-items:center;isolation:isolate;overflow:hidden;background:#050816}.hero-bg-video,.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}.hero-poster{background-size:cover;background-position:center}.hero-shade{position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 20% 35%,rgba(102,200,255,.27),transparent 34%),radial-gradient(circle at 70% 28%,rgba(185,15,240,.35),transparent 38%),linear-gradient(90deg,rgba(5,8,22,.92),rgba(5,8,22,.62),rgba(5,8,22,.92))}.hero-inner{width:min(1120px,calc(100% - 34px));padding-top:92px;text-align:center;color:#fff}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#86d6ff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:7px 13px;font-weight:900;font-size:14px}.eyebrow.dark{color:var(--purple);background:#eef5ff;border-color:#dbe7ff}.hero-inner h1{margin:20px auto 18px;font-size:clamp(42px,7.6vw,96px);line-height:1.15;max-width:980px;letter-spacing:-1.8px}.hero-inner h1 strong{display:block;background:linear-gradient(135deg,#fff 0%,var(--blue) 40%,var(--purple2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-inner p{max-width:780px;margin:0 auto 30px;color:#e1e7f8;font-size:clamp(17px,2vw,23px)}.hero-actions,.video-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;padding:13px 22px;font-weight:900;cursor:pointer;transition:.2s ease}.btn:hover{transform:translateY(-2px)}.btn-primary{color:#fff;background:linear-gradient(135deg,var(--blue2),var(--purple2));box-shadow:0 18px 38px rgba(132,19,212,.24)}.btn-ghost{color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.19)}.video-actions{margin-top:18px}.control-btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:10px 16px;font-weight:900;cursor:pointer;backdrop-filter:blur(10px)}.upload-reminder{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:min(720px,calc(100% - 30px));text-align:center;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:12px 16px;font-weight:800}.stats-wrap{padding:0 clamp(18px,5vw,72px);margin-top:-64px;position:relative;z-index:3}.stats-card{max-width:var(--max);margin:auto;background:#fff;border:1px solid rgba(13,19,55,.08);border-radius:28px;padding:12px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(8,1fr)}.stat-item{min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:12px;border-left:1px solid #e3e9f5}.stat-item:last-child{border-left:0}.stat-icon{color:var(--purple);font-size:28px}.stat-item strong{font-size:clamp(22px,2vw,31px);line-height:1;color:#11193d}.stat-item small{font-weight:800;color:#5c6681;font-size:12px;line-height:1.55}.section{padding:88px clamp(18px,5vw,72px)}.section-dark{background:radial-gradient(circle at 20% 0%,rgba(102,200,255,.12),transparent 30%),linear-gradient(135deg,#050816,#11133a 60%,#180726);color:#fff}.section-head{max-width:780px;margin:0 auto 38px;text-align:center}.section-head h2,.impact-copy h2{font-size:clamp(30px,4.5vw,54px);line-height:1.25;margin:12px 0 10px;color:#11183d;letter-spacing:-.5px}.section-head.light h2,.section-head.light p{color:#fff}.section-head p,.impact-copy p{color:#626d86;font-size:18px}.intro-impact{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}.impact-numbers{display:grid;gap:18px}.impact-numbers div{border-radius:28px;padding:30px;background:linear-gradient(135deg,#111742,#290a42);color:#fff;box-shadow:var(--shadow)}.impact-numbers strong{display:block;font-size:66px;line-height:1;background:linear-gradient(135deg,var(--blue),var(--purple2));-webkit-background-clip:text;background-clip:text;color:transparent}.impact-numbers span{font-weight:900;color:#e4ecff}.services{background:linear-gradient(180deg,#fff,#f4f8ff)}.services-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.service-card{background:#fff;border:1px solid rgba(15,25,68,.08);border-radius:26px;padding:26px 20px;box-shadow:0 18px 48px rgba(23,29,76,.08);min-height:290px;transition:.2s ease}.service-card:hover{transform:translateY(-7px)}.service-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--blue2),var(--purple2));font-size:27px;box-shadow:0 14px 28px rgba(132,19,212,.2)}.service-card h3{font-size:21px;margin:18px 0 8px;color:#12183b}.service-card p{color:#59647e;font-size:15px}.content-note{max-width:var(--max);margin:24px auto 0;border:1px solid #dfe8fb;background:#fff;border-radius:26px;padding:22px;display:flex;gap:18px;align-items:flex-start;box-shadow:0 18px 48px rgba(23,29,76,.06)}.content-note h3{margin:0 0 5px;color:#11183d;font-size:24px}.content-note p{margin:0;color:#59647e}.faces{padding:88px clamp(18px,5vw,72px)}.faces-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1fr 86px 1fr;align-items:center;gap:22px}.face-card{border:1px solid rgba(255,255,255,.13);border-radius:30px;padding:24px;background:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.face-card h3{font-size:26px;margin:20px 0 8px}.face-card p{color:#cdd5ec}.face-visual{height:250px;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;text-align:center}.face-visual:after{content:"";position:absolute;inset:20px;border:1px solid rgba(255,255,255,.28);border-radius:18px}.face-visual span{font-size:23px;font-weight:900;z-index:1}.face-visual strong{font-size:64px;line-height:1;color:#fff;z-index:1}.digital-face{background:radial-gradient(circle at 30% 20%,rgba(112,205,255,.4),transparent 36%),linear-gradient(135deg,#15134b,#7117de)}.vinyl-face{background:linear-gradient(135deg,#f7faff,#d6e9ff);color:#161a40}.vinyl-face strong{color:#5b14ce}.switch-mark{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;margin:auto;font-size:34px;font-weight:900;background:linear-gradient(135deg,var(--blue),var(--purple2));box-shadow:0 16px 45px rgba(132,19,212,.38);color:#fff}.map-layout{max-width:var(--max);margin:auto;display:grid;grid-template-columns:360px 1fr;gap:20px}.locations-list{display:grid;gap:10px;max-height:620px;overflow:auto;padding-left:8px}.location-btn{width:100%;text-align:right;border:1px solid #dbe5f8;background:#fff;border-radius:20px;padding:15px;cursor:pointer;transition:.18s ease}.location-btn strong{display:block;color:#11183d;font-weight:900}.location-btn span{display:block;color:#66718e;font-size:13px;font-weight:700}.location-btn.active,.location-btn:hover{border-color:rgba(134,19,212,.5);box-shadow:0 10px 25px rgba(24,31,78,.1);transform:translateY(-2px)}.map-panel{background:#fff;border:1px solid #dce6fa;border-radius:28px;padding:14px;box-shadow:var(--shadow)}.google-map{height:620px;border-radius:22px;overflow:hidden;background:#111742;position:relative}.map-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;color:#64708a;font-weight:800}.map-actions .btn-ghost{color:#11183d;border-color:#dce6fa;background:#fff}.packages{padding:88px clamp(18px,5vw,72px)}.packages-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.package-card{position:relative;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:30px;overflow:hidden}.package-card.featured{background:linear-gradient(135deg,rgba(83,192,255,.15),rgba(176,13,240,.17));border-color:rgba(108,202,255,.42);transform:translateY(-12px)}.package-card h3{font-size:27px;margin-bottom:7px}.package-card p{color:#ccd6ee}.package-card ul{padding:0;margin:22px 0;list-style:none}.package-card li{padding:8px 0;color:#eef4ff}.package-card li:before{content:"✓";color:var(--blue);font-weight:900;margin-left:8px}.ribbon{position:absolute;top:20px;left:20px;border-radius:999px;background:linear-gradient(135deg,var(--blue),var(--purple2));padding:7px 12px;font-weight:900;font-size:13px}.works{background:#f7faff}.works-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.work-reel{background:#fff;border:1px solid rgba(16,28,70,.08);border-radius:24px;overflow:hidden;box-shadow:0 16px 38px rgba(23,29,76,.08);transition:.2s ease}.work-reel:hover{transform:translateY(-6px)}.reel-media{position:relative;aspect-ratio:9/14;background:#101638;overflow:hidden}.reel-media img,.reel-media video{width:100%;height:100%;object-fit:cover}.play-badge{position:absolute;top:10px;left:10px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.88);color:#8115d4;font-size:14px}.reel-body{padding:14px}.reel-body h3{margin:0 0 4px;color:#11183d;font-size:16px;line-height:1.45}.reel-body p{margin:0;color:#65708b;font-size:12px}.reel-body a,.muted{display:inline-block;margin-top:10px;font-weight:900;font-size:12px;color:var(--purple)}.muted{color:#8790a8}.contact{padding:88px clamp(18px,5vw,72px)}.contact-panel{max-width:var(--max);margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:34px;padding:30px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.contact-copy h2{font-size:clamp(30px,4vw,50px);line-height:1.25}.contact-copy p{color:#cbd4ee}.social-strip{display:grid;gap:10px;margin-top:28px}.social-strip a{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:16px;padding:13px 15px;font-weight:900}.social-strip svg{color:var(--blue);font-size:22px}.lead-form{background:#fff;border-radius:28px;padding:24px;color:#131a40;display:grid;grid-template-columns:1fr 1fr;gap:16px}.lead-form label{font-weight:900;color:#1d254b}.lead-form input,.lead-form select,.lead-form textarea{width:100%;margin-top:8px;border:1px solid #dbe3f6;background:#f7f9ff;border-radius:14px;padding:13px 14px;font-size:15px;outline:none}.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(134,19,212,.1)}.lead-form label:nth-child(5),.lead-form button,.form-note{grid-column:1/-1}.form-note{margin:0;color:#66708c;font-weight:700;font-size:14px}.hp{position:absolute;right:-9999px;opacity:0}.site-footer{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px;padding:46px clamp(18px,5vw,72px);background:#040817;color:#dbe5ff}.footer-logo{width:150px;margin-bottom:12px}.site-footer p{color:#aeb8d6;margin:0 0 8px}.site-footer h3{color:#fff;margin-bottom:10px}.site-footer a{display:block;color:#b7c8ff;margin:7px 0}.site-footer a:hover{color:#fff}.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.14s}
@media (max-width:1200px){.stats-card{grid-template-columns:repeat(4,1fr)}.stat-item:nth-child(4n){border-left:0}.services-grid{grid-template-columns:repeat(3,1fr)}.works-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:980px){.main-nav{display:none;position:absolute;top:82px;left:14px;right:14px;background:rgba(5,9,22,.98);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:14px;flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{text-align:center}.menu-toggle{display:block}.header-actions{margin-inline-start:auto}.header-cta,.admin-link{display:none}.intro-impact,.contact-panel,.map-layout{grid-template-columns:1fr}.faces-grid{grid-template-columns:1fr}.switch-mark{transform:rotate(90deg)}.packages-grid{grid-template-columns:1fr}.google-map{height:480px}}
@media (max-width:720px){.site-header{top:10px;width:calc(100% - 20px);padding:10px 14px;height:66px;border-radius:20px}.brand img{width:108px}.hero-inner{padding-top:78px}.hero-inner h1{font-size:clamp(34px,12vw,54px)}.hero-actions .btn{width:100%}.stats-wrap{padding-inline:12px}.stats-card{grid-template-columns:repeat(2,1fr);border-radius:22px}.stat-item{min-height:122px;border-left:0;border-bottom:1px solid #edf1f8}.section,.faces,.packages,.contact{padding:62px 18px}.intro-impact{padding-top:72px}.services-grid{grid-template-columns:1fr}.content-note{flex-direction:column}.lead-form{grid-template-columns:1fr;padding:18px}.site-footer{grid-template-columns:1fr}.face-visual{height:190px}.face-visual strong{font-size:46px}.works-grid{grid-template-columns:repeat(2,1fr);gap:12px}.reel-body h3{font-size:14px}.map-actions .btn{width:100%}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}.hero-bg-video{display:none}}
.footer-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.footer-social a{width:42px;height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff}.footer-social a:hover{background:linear-gradient(135deg,rgba(102,200,255,.25),rgba(185,15,240,.28));transform:translateY(-2px)}.footer-social svg{font-size:20px}

/* v4: تحسين عرض فيديو المقدمة وتوازن الخطوط على الهاتف + تنظيف حاوية رسالة الخريطة */
.map-layout-list-only{
  grid-template-columns:1fr;
}
.map-layout-list-only .locations-list{
  max-height:none;
  overflow:visible;
  padding-left:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.map-panel-minimal{
  display:none;
}
.map-actions span{
  display:none;
}

@media (max-width:980px){
  .map-layout-list-only .locations-list{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:720px){
  .hero-video{
    display:block;
    min-height:auto;
    place-items:initial;
    overflow:visible;
    background:linear-gradient(180deg,#050816 0%,#070b23 58%,#101739 100%);
    padding:0 0 46px;
  }
  .hero-bg-video,
  .hero-poster{
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:auto;
    width:100%;
    height:min(62svh,520px);
    min-height:390px;
    object-fit:cover;
    object-position:center top;
    z-index:0;
    border-radius:0 0 34px 34px;
    box-shadow:0 24px 70px rgba(0,0,0,.38);
  }
  .hero-shade{
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:auto;
    height:min(62svh,520px);
    min-height:390px;
    z-index:1;
    background:
      linear-gradient(180deg,rgba(4,7,22,.18) 0%,rgba(4,7,22,.36) 46%,rgba(5,8,22,.94) 100%),
      radial-gradient(circle at 28% 18%,rgba(102,200,255,.24),transparent 32%),
      radial-gradient(circle at 74% 20%,rgba(185,15,240,.22),transparent 38%);
    border-radius:0 0 34px 34px;
  }
  .hero-inner{
    position:relative;
    z-index:3;
    width:calc(100% - 24px);
    margin:0 auto;
    padding:calc(min(62svh,520px) - 34px) 16px 0;
    text-align:right;
    color:#fff;
  }
  .hero-inner::before{
    content:"";
    position:absolute;
    top:calc(min(62svh,520px) - 64px);
    right:0;
    left:0;
    bottom:-24px;
    z-index:-1;
    border-radius:30px;
    background:linear-gradient(145deg,rgba(7,12,35,.92),rgba(20,20,67,.82));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 24px 68px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
  }
  .hero-inner h1{
    margin:14px 0 12px;
    max-width:100%;
  }
  .hero-inner p{
    margin:0 0 18px;
    max-width:100%;
    color:#e6edff;
  }
  .hero-actions,
  .video-actions{
    justify-content:stretch;
    align-items:stretch;
    gap:10px;
  }
  .hero-actions .btn,
  .video-actions .control-btn{
    width:100%;
    min-height:48px;
  }
  .video-actions{
    margin-top:12px;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .control-btn{
    padding:9px 10px;
    white-space:nowrap;
  }
  .upload-reminder{
    position:relative;
    inset:auto;
    transform:none;
    margin:16px auto 0;
    width:calc(100% - 24px);
  }
  .stats-wrap{
    margin-top:0;
    padding-top:20px;
    background:#f5f8ff;
  }
  .stats-card{
    box-shadow:0 16px 42px rgba(16,23,63,.12);
  }
  .map-layout-list-only .locations-list,
  .locations-list{
    grid-template-columns:1fr;
    max-height:none;
    overflow:visible;
    padding-left:0;
  }
  .location-btn{
    border-radius:18px;
    padding:14px;
  }
}

/* v5: TikTok-like reels experience on mobile */
.works-feed{
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}
.work-reel.has-video .reel-media{
  cursor:pointer;
}
.reel-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#070a20;
}
.reel-sound-toggle{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:4;
  border:1px solid rgba(255,255,255,.32);
  color:#fff;
  background:rgba(5,8,24,.55);
  backdrop-filter:blur(12px);
  border-radius:999px;
  padding:8px 11px;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.reel-open{
  border-radius:999px;
  padding:7px 10px;
  background:#f1f5ff;
}

@media (max-width:1200px){
  .works-feed{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:720px){
  .works{
    padding:0;
    background:
      radial-gradient(circle at 20% 0%,rgba(102,200,255,.18),transparent 30%),
      radial-gradient(circle at 84% 15%,rgba(185,15,240,.22),transparent 34%),
      linear-gradient(180deg,#050816,#0b0f2a 52%,#080817);
    color:#fff;
  }
  .works .section-head{
    margin:0;
    max-width:none;
    padding:68px 18px 20px;
    text-align:right;
  }
  .works .section-head .eyebrow.dark{
    color:#9fe0ff;
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.16);
  }
  .works .section-head h2,
  .works .section-head p{
    color:#fff !important;
  }
  .works .section-head p{
    color:#d6def3 !important;
  }
  .works-feed{
    width:100%;
    max-width:none;
    height:calc(100svh - 104px);
    min-height:560px;
    display:block;
    overflow-y:auto;
    overflow-x:hidden;
    scroll-snap-type:y mandatory;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:0 12px 18px;
  }
  .works-feed::-webkit-scrollbar{width:0;height:0}
  .work-reel{
    position:relative;
    height:calc(100svh - 126px);
    min-height:520px;
    max-height:780px;
    margin:0 0 18px;
    border-radius:30px;
    border:1px solid rgba(255,255,255,.12);
    background:#050816;
    overflow:hidden;
    box-shadow:0 26px 70px rgba(0,0,0,.34);
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .work-reel:hover{transform:none}
  .reel-media{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    border-radius:0;
    background:#050816;
  }
  .reel-media:after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(180deg,rgba(0,0,0,.30) 0%,transparent 26%,transparent 56%,rgba(0,0,0,.84) 100%),
      radial-gradient(circle at 72% 15%,rgba(102,200,255,.18),transparent 32%);
  }
  .reel-media img,
  .reel-media video{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .reel-body{
    position:absolute;
    z-index:3;
    right:0;
    left:0;
    bottom:0;
    padding:92px 18px 20px;
    color:#fff;
    background:linear-gradient(0deg,rgba(0,0,0,.70),rgba(0,0,0,0));
  }
  .reel-body h3{
    color:#fff !important;
    margin:0 0 6px;
    font-size:clamp(19px,5.6vw,25px) !important;
    line-height:1.35 !important;
    text-shadow:0 2px 18px rgba(0,0,0,.45);
  }
  .reel-body p{
    color:#e8eeff !important;
    margin:0;
    font-size:clamp(13px,3.8vw,15px) !important;
    font-weight:800;
  }
  .reel-body a,
  .reel-body .muted{
    color:#fff !important;
    margin-top:12px;
    font-size:13px !important;
  }
  .reel-open{
    display:inline-flex;
    width:auto;
    color:#fff !important;
    background:linear-gradient(135deg,var(--blue2),var(--purple2));
    box-shadow:0 12px 30px rgba(132,19,212,.26);
  }
  .reel-sound-toggle{
    left:16px;
    bottom:94px;
    font-size:12px;
    padding:10px 13px;
  }
  .play-badge{
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(.92);
    width:68px;
    height:68px;
    z-index:5;
    opacity:0;
    transition:.18s ease;
    background:rgba(255,255,255,.92);
    color:#7c15d2;
    font-size:23px;
    box-shadow:0 18px 42px rgba(0,0,0,.28);
  }
  .work-reel.is-paused .play-badge,
  .work-reel.has-image .play-badge{
    opacity:1;
  }
  .work-reel.is-playing .play-badge{
    opacity:0;
  }
}

/* v6: Google Maps direct screen links + full mobile video + galaxy/digital/glass visual system */
:root{
  --doit-scroll:0;
  --ink:#101733;
  --ink2:#202a52;
  --ice:#f7fbff;
  --glass-light:rgba(255,255,255,.78);
  --glass-dark:rgba(8,12,35,.62);
  --cyan:#70d7ff;
  --violet:#8a19dd;
  --magenta:#c413f4;
}
body{
  background:
    radial-gradient(circle at 12% 5%,rgba(102,200,255,.18),transparent 30%),
    radial-gradient(circle at 88% 18%,rgba(185,15,240,.14),transparent 34%),
    linear-gradient(180deg,#f7fbff 0%,#eef5ff 48%,#f8fbff 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-10;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%,rgba(112,215,255,.18),transparent 28%),
    radial-gradient(circle at 77% 14%,rgba(196,19,244,.14),transparent 30%),
    radial-gradient(circle at 65% 82%,rgba(49,149,255,.13),transparent 34%);
  transform:translate3d(0,calc(var(--doit-scroll) * -72px),0) scale(1.04);
  transition:transform .08s linear;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-9;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(rgba(49,149,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(185,15,240,.13) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 80%,transparent 100%);
}
.site-header{
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(238,247,255,.86)) !important;
  border:1px solid rgba(112,215,255,.44) !important;
  box-shadow:0 18px 58px rgba(18,30,70,.18), inset 0 1px 0 rgba(255,255,255,.8) !important;
  backdrop-filter:blur(22px) saturate(1.35);
  overflow:hidden;
}
.site-header::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  background:
    radial-gradient(circle at 9% 50%,rgba(102,200,255,.28),transparent 28%),
    radial-gradient(circle at 90% 20%,rgba(185,15,240,.18),transparent 31%);
}
body.is-scrolled .site-header{
  top:10px;
  height:68px;
  box-shadow:0 15px 50px rgba(18,30,70,.22), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:18px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 26px rgba(35,70,130,.08);
}
.main-nav a{color:#142044 !important;text-shadow:none !important;position:relative;overflow:hidden}
.main-nav a:hover,.main-nav a.active{color:#fff !important;background:linear-gradient(135deg,var(--blue2),var(--purple2)) !important;box-shadow:0 10px 24px rgba(132,19,212,.20)}
.admin-link{color:#17234b !important;border-color:rgba(49,149,255,.22) !important;background:rgba(255,255,255,.58) !important}
.header-cta{color:#fff !important;background:linear-gradient(135deg,#169dff,#8a19dd 72%,#c413f4) !important}
.menu-toggle span{background:#142044 !important}
.main-nav.open{background:rgba(255,255,255,.97) !important;border-color:rgba(49,149,255,.22) !important;box-shadow:0 20px 55px rgba(20,32,68,.18)}
.hero-video::after,.section-dark::after,.packages::after,.contact::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(112,215,255,.23) 1px,transparent 1px),
    linear-gradient(90deg,rgba(196,19,244,.18) 1px,transparent 1px);
  background-size:54px 54px;
  transform:translateY(calc(var(--doit-scroll) * -44px));
}
.hero-video,.section-dark,.packages,.contact{position:relative;overflow:hidden}
.hero-shade{
  background:
    radial-gradient(circle at 20% 35%,rgba(112,215,255,.32),transparent 34%),
    radial-gradient(circle at 70% 28%,rgba(196,19,244,.34),transparent 38%),
    linear-gradient(90deg,rgba(5,8,22,.90),rgba(5,8,22,.50),rgba(5,8,22,.90)) !important;
}
.stats-card,.service-card,.content-note,.map-panel,.package-card,.contact-panel,.lead-form,.face-card,.work-reel,.location-btn{
  position:relative;
  overflow:hidden;
}
.stats-card,.service-card,.content-note,.map-panel,.lead-form,.location-btn{
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(245,250,255,.76)) !important;
  border-color:rgba(49,149,255,.16) !important;
  box-shadow:0 24px 72px rgba(22,35,82,.11), inset 0 1px 0 rgba(255,255,255,.88) !important;
  backdrop-filter:blur(14px) saturate(1.22);
}
.service-card::before,.package-card::before,.work-reel::before,.stat-item::before,.face-card::before,.location-btn::before,.content-note::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(112,215,255,.32),transparent 24%),radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(196,19,244,.18),transparent 36%);
  transition:opacity .24s ease;
}
.service-card:hover::before,.package-card:hover::before,.work-reel:hover::before,.stat-item:hover::before,.face-card:hover::before,.location-btn:hover::before,.content-note:hover::before{opacity:1}
.service-card > *,.package-card > *,.work-reel > *,.stat-item > *,.face-card > *,.location-btn > *,.content-note > *{position:relative;z-index:1}
.section-head h2,.impact-copy h2,.contact-copy h2{color:#101733;text-wrap:balance}
.section-head p,.impact-copy p,.contact-copy p{color:#4c5878}
.section-head.light h2,.section-head.light p,.section-dark .section-head h2,.section-dark .section-head p,.packages .section-head h2,.packages .section-head p,.contact .contact-copy h2,.contact .contact-copy p{color:#fff !important}
.service-icon,.stat-icon,.switch-mark{filter:drop-shadow(0 12px 24px rgba(132,19,212,.22))}
.location-btn{display:block;text-align:right;color:inherit;text-decoration:none}
.location-btn em{display:inline-flex;margin-top:8px;font-style:normal;font-size:12px;font-weight:900;color:#7b18d4;background:#f0e8ff;border-radius:999px;padding:5px 10px}
.location-btn:hover em{color:#fff;background:linear-gradient(135deg,var(--blue2),var(--purple2))}
.location-btn:focus-visible,.btn:focus-visible,.control-btn:focus-visible,.reel-sound-toggle:focus-visible{outline:3px solid rgba(112,215,255,.65);outline-offset:3px}
.faces,.packages,.contact{background:radial-gradient(circle at 18% 5%,rgba(112,215,255,.20),transparent 34%),radial-gradient(circle at 82% 18%,rgba(196,19,244,.22),transparent 36%),linear-gradient(135deg,#050816,#0b0f2d 52%,#180726) !important}
.works{background:linear-gradient(180deg,#ffffff,#f4f8ff 70%,#eef5ff) !important}
.site-footer{background:radial-gradient(circle at 15% 0%,rgba(112,215,255,.18),transparent 30%),linear-gradient(135deg,#050816,#101438 58%,#170720) !important;color:#dfe8ff}
.reveal{transition:opacity .78s cubic-bezier(.2,.8,.2,1),transform .78s cubic-bezier(.2,.8,.2,1),filter .78s cubic-bezier(.2,.8,.2,1) !important;filter:blur(5px)}
.reveal.visible{filter:blur(0)}
.delay-1{transition-delay:.12s}

@media (max-width:720px){
  .site-header{top:8px;width:calc(100% - 18px);height:62px;border-radius:19px;padding:8px 12px}
  .brand{padding:5px 8px;border-radius:15px}
  .brand img{width:100px}
  .hero-video{
    display:block;
    min-height:auto;
    padding:72px 0 42px !important;
    background:linear-gradient(180deg,#050816 0%,#070b23 58%,#11183b 100%) !important;
  }
  .hero-bg-video{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:clamp(220px,56vw,430px) !important;
    min-height:0 !important;
    object-fit:contain !important;
    object-position:center center !important;
    z-index:0 !important;
    background:#020414 !important;
    border-radius:0 0 28px 28px !important;
    box-shadow:0 18px 55px rgba(0,0,0,.36) !important;
  }
  .hero-poster{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:clamp(220px,56vw,430px) !important;
    min-height:0 !important;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    z-index:0 !important;
    background-color:#020414 !important;
    border-radius:0 0 28px 28px !important;
  }
  .hero-shade{
    top:72px !important;
    height:clamp(220px,56vw,430px) !important;
    min-height:0 !important;
    border-radius:0 0 28px 28px !important;
    background:linear-gradient(180deg,rgba(2,4,14,.05),rgba(2,4,14,.08) 45%,rgba(5,8,22,.58) 100%) !important;
  }
  .hero-inner{
    width:calc(100% - 22px) !important;
    margin:-22px auto 0 !important;
    padding:16px 15px 0 !important;
    text-align:right !important;
  }
  .hero-inner::before{
    top:0 !important;
    bottom:-18px !important;
    border-radius:26px !important;
    background:linear-gradient(145deg,rgba(8,12,35,.92),rgba(27,21,72,.82)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    backdrop-filter:blur(18px) saturate(1.25) !important;
  }
  .hero-inner h1{margin-top:12px !important}
  .video-actions{grid-template-columns:1fr 1fr !important}
  .control-btn{background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.20) !important;color:#fff !important}
  .map-layout-list-only .locations-list,.locations-list{grid-template-columns:1fr !important}
  .location-btn{border-radius:18px !important;padding:15px !important}
  .location-btn em{font-size:11px}
  .works{background:radial-gradient(circle at 20% 0%,rgba(112,215,255,.18),transparent 30%),radial-gradient(circle at 84% 15%,rgba(196,19,244,.22),transparent 34%),linear-gradient(180deg,#050816,#0b0f2a 52%,#080817) !important}
}

/* v7: video covers, light footer, WhatsApp chat, creative team, stronger modern overlay */
.hero-video{z-index:1}
.hero-bg-video{filter:saturate(1.15) contrast(1.05)}
.hero-digital-overlay{
  position:absolute;
  left:clamp(18px,5vw,72px);
  bottom:clamp(24px,8vh,92px);
  z-index:1;
  width:min(330px,calc(100% - 36px));
  padding:18px 18px 16px;
  border-radius:28px;
  color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(18px) saturate(1.28);
  box-shadow:0 22px 70px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.22);
  overflow:hidden;
  transform:translateY(calc(var(--doit-scroll) * -36px));
}
.hero-digital-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.28;
  background-image:linear-gradient(rgba(112,215,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(196,19,244,.24) 1px,transparent 1px);
  background-size:24px 24px;
}
.hero-digital-overlay::after{
  content:"";
  position:absolute;
  width:140px;height:140px;
  left:-42px;top:-54px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(112,215,255,.45),transparent 66%);
}
.hero-digital-overlay > *{position:relative;z-index:1;display:block}
.hero-digital-overlay .screen-chip{font-size:13px;font-weight:900;color:#8fe0ff;margin-bottom:5px}
.hero-digital-overlay strong{font-size:56px;line-height:1;letter-spacing:-1px;background:linear-gradient(135deg,#fff,#83dcff 46%,#c760ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-digital-overlay em{font-style:normal;font-size:13px;font-weight:800;color:#e7efff}
.hero-shade{background:radial-gradient(circle at 22% 28%,rgba(112,215,255,.20),transparent 32%),radial-gradient(circle at 76% 25%,rgba(196,19,244,.24),transparent 36%),linear-gradient(90deg,rgba(5,8,22,.72),rgba(5,8,22,.34),rgba(5,8,22,.78)) !important}

.reel-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:opacity .28s ease,transform .35s ease;filter:saturate(1.08) contrast(1.04)}
.reel-video{position:absolute;inset:0;z-index:1}
.work-reel.is-playing .reel-cover{opacity:0;transform:scale(1.025);pointer-events:none}
.work-reel.is-paused .reel-cover,.work-reel.has-image .reel-cover{opacity:1}
.work-reel.has-video .play-badge{z-index:6}
.reel-sound-toggle{z-index:7}

.team-section{background:linear-gradient(180deg,#f8fbff,#eef5ff 58%,#ffffff)}
.team-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.team-card{position:relative;overflow:hidden;border-radius:30px;padding:18px;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(245,250,255,.78));border:1px solid rgba(49,149,255,.16);box-shadow:0 24px 72px rgba(22,35,82,.11), inset 0 1px 0 rgba(255,255,255,.88);transition:.25s ease;backdrop-filter:blur(14px) saturate(1.24)}
.team-card::before{content:"";position:absolute;inset:0;opacity:.75;background:radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--member-accent,#8613d4) 22%,transparent),transparent 36%),radial-gradient(circle at 88% 18%,rgba(112,215,255,.22),transparent 32%);pointer-events:none}
.team-card:hover{transform:translateY(-7px);box-shadow:0 30px 84px rgba(22,35,82,.16), inset 0 1px 0 rgba(255,255,255,.95)}
.team-card > *{position:relative;z-index:1}
.team-photo-frame{position:relative;aspect-ratio:1/1;border-radius:28px;padding:5px;background:linear-gradient(135deg,var(--member-accent,#8613d4),#66c8ff);box-shadow:0 16px 40px color-mix(in srgb,var(--member-accent,#8613d4) 22%,transparent);overflow:hidden}
.team-photo-frame::after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.42);border-radius:22px;pointer-events:none}
.team-photo-frame img{width:100%;height:100%;object-fit:cover;border-radius:23px;background:#eef5ff}
.team-info{padding:17px 4px 4px;text-align:right}
.team-info h3{margin:0 0 4px;color:#101733;font-size:22px;line-height:1.35}
.team-info span{display:block;color:#576380;font-weight:800;font-size:14px;margin-bottom:8px}
.team-info strong{display:inline-flex;border-radius:999px;padding:7px 11px;color:#fff;background:linear-gradient(135deg,var(--member-accent,#8613d4),#3195ff);font-size:12px;line-height:1.4}
.team-info p{margin:12px 0 0;color:#58647f;font-size:14px;line-height:1.75}

.office-address{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin:18px 0 0;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;font-weight:900}
.office-address svg{color:var(--blue);font-size:20px;flex:none}

.site-footer{
  grid-template-columns:1.4fr 1fr 1.1fr !important;
  background:radial-gradient(circle at 14% 12%,rgba(112,215,255,.20),transparent 28%),radial-gradient(circle at 86% 24%,rgba(196,19,244,.13),transparent 31%),linear-gradient(135deg,#ffffff,#f4f9ff 58%,#eef5ff) !important;
  color:#111833 !important;
  border-top:1px solid rgba(49,149,255,.16);
  box-shadow:0 -18px 60px rgba(22,35,82,.08);
}
.site-footer,.site-footer p,.site-footer a{color:#273252 !important}
.site-footer > div:first-child{padding:16px;border-radius:26px;background:rgba(255,255,255,.72);border:1px solid rgba(49,149,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.84)}
.footer-logo{width:160px;background:#fff;border-radius:20px;padding:8px 12px;border:1px solid rgba(49,149,255,.15);box-shadow:0 12px 32px rgba(20,32,68,.08)}
.site-footer h3{color:#101733 !important;font-size:19px}
.site-footer a{font-weight:800}
.site-footer a:hover{color:#8613d4 !important}
.footer-social a{color:#8613d4 !important;border-color:rgba(49,149,255,.18) !important;background:#fff !important;box-shadow:0 10px 24px rgba(20,32,68,.08)}
.footer-social a:hover{color:#fff !important;background:linear-gradient(135deg,var(--blue2),var(--purple2)) !important}

.whatsapp-chat{position:fixed;left:20px;bottom:20px;z-index:120;font-family:var(--font)}
.wa-chat-toggle{display:flex;align-items:center;gap:9px;border:0;border-radius:999px;padding:13px 16px;background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;font-weight:900;box-shadow:0 18px 45px rgba(18,140,126,.34);cursor:pointer}
.wa-chat-toggle svg{font-size:22px}
.wa-chat-panel{position:absolute;left:0;bottom:62px;width:min(330px,calc(100vw - 40px));border-radius:24px;padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(244,250,255,.90));border:1px solid rgba(49,149,255,.16);box-shadow:0 26px 78px rgba(15,25,62,.22);backdrop-filter:blur(18px);color:#101733;overflow:hidden}
.wa-chat-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 0%,rgba(37,211,102,.16),transparent 35%),radial-gradient(circle at 90% 15%,rgba(134,19,212,.12),transparent 36%);pointer-events:none}
.wa-chat-panel > *{position:relative;z-index:1}
.wa-chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.wa-chat-head strong{font-size:18px;color:#101733}
.wa-chat-close{width:32px;height:32px;border:0;border-radius:50%;background:#eef5ff;color:#111833;font-size:22px;cursor:pointer}
.wa-chat-panel p{margin:0 0 14px;color:#56627e;font-weight:800;line-height:1.75}
.wa-chat-action{display:flex;justify-content:center;align-items:center;border-radius:16px;padding:12px 14px;background:linear-gradient(135deg,#25d366,#128c7e);color:#fff !important;font-weight:900;box-shadow:0 14px 32px rgba(18,140,126,.22)}

@media (max-width:980px){.team-grid{grid-template-columns:repeat(2,1fr)}.site-footer{grid-template-columns:1fr !important}}
@media (max-width:720px){
  .hero-digital-overlay{position:relative;left:auto;bottom:auto;z-index:3;width:calc(100% - 24px);margin:-12px auto 12px;padding:14px 15px;border-radius:22px;transform:none;text-align:right}
  .hero-digital-overlay strong{font-size:39px}
  .hero-digital-overlay em{font-size:12px}
  .hero-shade{background:linear-gradient(180deg,rgba(2,4,14,.02),rgba(2,4,14,.12) 50%,rgba(5,8,22,.38) 100%) !important}
  .team-section{padding:64px 18px}
  .team-grid{grid-template-columns:1fr;gap:16px}
  .team-card{display:grid;grid-template-columns:116px 1fr;gap:14px;align-items:center;border-radius:24px;padding:12px}
  .team-photo-frame{border-radius:22px}
  .team-photo-frame img{border-radius:18px}
  .team-info{padding:0;text-align:right}
  .team-info h3{font-size:18px !important}
  .team-info span,.team-info p{font-size:12px !important}
  .team-info strong{font-size:11px}
  .office-address{width:100%;font-size:13px;line-height:1.7}
  .whatsapp-chat{left:14px;bottom:14px}
  .wa-chat-toggle{padding:12px 14px}.wa-chat-toggle span{display:none}
  .wa-chat-panel{left:0;bottom:58px}
}

/* v8: autoplay sound priority, neon icons, and improved TikTok-like mobile reels */
.hero-bg-video{cursor:pointer}
.hero-sound-on #toggleMute{background:linear-gradient(135deg,rgba(102,200,255,.26),rgba(185,15,240,.34)) !important;border-color:rgba(112,215,255,.45) !important;box-shadow:0 0 28px rgba(112,215,255,.22),0 0 42px rgba(185,15,240,.16)}
.hero-sound-muted #toggleMute{background:rgba(255,255,255,.12) !important;border-color:rgba(255,255,255,.22) !important}
.hero-video::after{content:"اضغط على الفيديو لكتم/تشغيل الصوت";position:absolute;right:clamp(18px,5vw,72px);bottom:clamp(22px,5vh,52px);z-index:2;color:#fff;font-weight:900;font-size:13px;padding:9px 13px;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.20);backdrop-filter:blur(14px);box-shadow:0 14px 42px rgba(0,0,0,.18)}

/* Neon interactive icon system */
.stat-icon,.service-icon,.switch-mark,.footer-social a,.wa-chat-toggle,.office-address svg,.contact-links a svg,.main-nav a svg,.header-cta svg,.admin-link svg,.btn svg,.control-btn svg,.location-btn svg,.package-card svg,.team-card svg,.reel-open svg,.wa-chat-action svg{
  transition:transform .24s ease,filter .24s ease,box-shadow .24s ease,color .24s ease,background .24s ease,border-color .24s ease;
}
.stat-icon,.service-icon{
  position:relative;
  isolation:isolate;
}
.stat-icon::after,.service-icon::after,.footer-social a::after,.wa-chat-toggle::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,rgba(112,215,255,.35),rgba(196,19,244,.22) 42%,transparent 70%);
  filter:blur(10px);
  transition:opacity .24s ease;
  z-index:-1;
}
.stat-item:hover .stat-icon,.service-card:hover .service-icon,.content-note:hover .service-icon,.footer-social a:hover,.wa-chat-toggle:hover,.location-btn:hover svg,.btn:hover svg,.control-btn:hover svg,.office-address:hover svg,.contact-links a:hover svg{
  transform:translateY(-2px) scale(1.07);
  filter:drop-shadow(0 0 10px rgba(112,215,255,.65)) drop-shadow(0 0 22px rgba(185,15,240,.42));
}
.stat-item:hover .stat-icon::after,.service-card:hover .service-icon::after,.content-note:hover .service-icon::after,.footer-social a:hover::after,.wa-chat-toggle:hover::after{opacity:1}
.stat-icon svg,.service-icon svg,.footer-social svg,.wa-chat-toggle svg,.contact-links svg,.office-address svg{stroke-width:2.15}
.stat-item:hover,.service-card:hover,.package-card:hover,.work-reel:hover,.location-btn:hover,.team-card:hover{
  border-color:rgba(112,215,255,.36) !important;
}

@media (max-width:720px){
  .hero-video::after{right:14px;bottom:12px;font-size:11px;padding:7px 10px;z-index:4}
  .works{
    padding:0 !important;
    background:
      radial-gradient(circle at 18% 4%,rgba(112,215,255,.20),transparent 29%),
      radial-gradient(circle at 85% 10%,rgba(196,19,244,.23),transparent 33%),
      linear-gradient(180deg,#050816 0%,#06081e 48%,#090719 100%) !important;
    color:#fff;
    overflow:clip;
  }
  .works .section-head{
    min-height:42svh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    margin:0 !important;
    max-width:none !important;
    padding:92px 18px 34px !important;
    text-align:right !important;
    background:
      linear-gradient(180deg,rgba(5,8,22,.18),rgba(5,8,22,.86)),
      radial-gradient(circle at 15% 22%,rgba(112,215,255,.20),transparent 30%),
      radial-gradient(circle at 86% 20%,rgba(196,19,244,.22),transparent 32%);
    border-bottom:1px solid rgba(255,255,255,.11);
  }
  .works .section-head::after{
    content:none;
    display:inline-flex;
    width:max-content;
    max-width:100%;
    margin-top:16px;
    padding:8px 12px;
    border-radius:999px;
    color:#fff;
    font-weight:900;
    font-size:12px;
    background:linear-gradient(135deg,rgba(112,215,255,.16),rgba(196,19,244,.16));
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 0 24px rgba(112,215,255,.16);
  }
  .works-feed{
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
    overflow:visible !important;
    padding:0 !important;
    scroll-snap-type:none !important;
    overscroll-behavior:auto !important;
  }
  .work-reel{
    position:relative !important;
    height:100svh !important;
    min-height:620px !important;
    max-height:none !important;
    margin:0 !important;
    border-radius:0 !important;
    border:0 !important;
    background:#050816 !important;
    box-shadow:none !important;
    overflow:hidden !important;
    scroll-snap-align:start;
  }
  .work-reel::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    opacity:.52;
    background-image:
      linear-gradient(rgba(112,215,255,.13) 1px,transparent 1px),
      linear-gradient(90deg,rgba(196,19,244,.10) 1px,transparent 1px);
    background-size:34px 34px;
    mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 76%,transparent 100%);
  }
  .work-reel::after{
    content:"DOit Reel";
    position:absolute;
    top:86px;
    right:16px;
    z-index:5;
    padding:7px 11px;
    border-radius:999px;
    color:#fff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.2px;
    background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(12px);
    box-shadow:0 0 22px rgba(112,215,255,.18);
  }
  .work-reel:hover{transform:none !important}
  .reel-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
    border-radius:0 !important;
    background:#050816 !important;
  }
  .reel-media:after{
    z-index:3;
    background:
      linear-gradient(180deg,rgba(0,0,0,.30) 0%,transparent 22%,transparent 54%,rgba(0,0,0,.88) 100%),
      radial-gradient(circle at 78% 16%,rgba(112,215,255,.22),transparent 28%),
      radial-gradient(circle at 18% 80%,rgba(196,19,244,.22),transparent 34%) !important;
  }
  .reel-media img,.reel-media video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  .reel-cover{z-index:2 !important;transform:scale(1.01)}
  .work-reel.is-playing .reel-cover{opacity:0 !important;transform:scale(1.04) !important}
  .reel-video{z-index:1 !important;background:#050816 !important}
  .reel-body{
    position:absolute !important;
    z-index:6 !important;
    right:0 !important;
    left:0 !important;
    bottom:0 !important;
    padding:120px 18px 30px 84px !important;
    color:#fff !important;
    background:linear-gradient(0deg,rgba(0,0,0,.76),rgba(0,0,0,0)) !important;
  }
  .reel-body h3{
    color:#fff !important;
    margin:0 0 8px !important;
    font-size:clamp(22px,7vw,32px) !important;
    line-height:1.26 !important;
    text-shadow:0 4px 24px rgba(0,0,0,.58);
  }
  .reel-body p{
    color:#e9f0ff !important;
    margin:0 !important;
    font-size:clamp(13px,4.2vw,16px) !important;
    font-weight:900 !important;
  }
  .reel-body a,.reel-body .muted{
    display:inline-flex;
    margin-top:13px !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:900 !important;
    padding:9px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(10px);
  }
  .reel-sound-toggle{
    right:auto !important;
    left:16px !important;
    bottom:162px !important;
    z-index:8 !important;
    width:54px !important;
    height:54px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    border-radius:50% !important;
    font-size:0 !important;
    background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.07)) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:0 0 26px rgba(112,215,255,.20),0 16px 42px rgba(0,0,0,.28) !important;
    backdrop-filter:blur(16px) saturate(1.25) !important;
  }
  .reel-sound-toggle::before{
    content:"♪";
    font-size:25px;
    line-height:1;
    color:#fff;
    text-shadow:0 0 12px rgba(112,215,255,.8),0 0 20px rgba(196,19,244,.55);
  }
  .work-reel.is-playing .reel-sound-toggle{animation:doitReelPulse 1.6s ease-in-out infinite}
  .play-badge{
    z-index:7 !important;
    width:72px !important;
    height:72px !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:linear-gradient(135deg,rgba(112,215,255,.25),rgba(196,19,244,.28)) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    color:#fff !important;
    box-shadow:0 0 34px rgba(112,215,255,.26),0 0 42px rgba(196,19,244,.18) !important;
    backdrop-filter:blur(12px) !important;
    transition:opacity .2s ease,transform .2s ease !important;
  }
  .work-reel.is-playing .play-badge{opacity:0 !important;transform:translate(-50%,-50%) scale(.82) !important;pointer-events:none !important}
  .work-reel.is-paused .play-badge,.work-reel.has-image .play-badge{opacity:1 !important}
}

@keyframes doitReelPulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 10px rgba(112,215,255,.55))}
  50%{transform:scale(1.08);filter:drop-shadow(0 0 18px rgba(196,19,244,.66))}
}

/* v8.2: mobile hero controls near the video, cleaner TikTok reels, and fixed reel sound states */
.hero-video-controls{
  position:absolute;
  z-index:8;
  right:clamp(18px,5vw,72px);
  bottom:clamp(24px,8vh,92px);
  justify-content:flex-start;
  margin:0 !important;
}
.hero-video-controls .control-btn{
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  border-color:rgba(255,255,255,.24);
  box-shadow:0 0 26px rgba(112,215,255,.18),0 14px 36px rgba(0,0,0,.22);
}
.reel-sound-toggle.sound-on::before{content:"🔊" !important;font-size:23px !important}
.reel-sound-toggle:not(.sound-on)::before{content:"🔇" !important;font-size:22px !important}

@media (max-width:720px){
  .hero-video-controls{
    top:calc(72px + clamp(220px,56vw,430px) - 66px) !important;
    bottom:auto !important;
    right:12px !important;
    left:12px !important;
    width:auto !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    z-index:9 !important;
  }
  .hero-video-controls .control-btn{
    min-height:48px !important;
    border-radius:16px !important;
    font-size:13px !important;
    padding:8px 10px !important;
    color:#fff !important;
    background:linear-gradient(145deg,rgba(5,8,22,.70),rgba(28,21,74,.54)) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    backdrop-filter:blur(14px) saturate(1.25) !important;
  }
  .hero-video::after{display:none !important;content:none !important}

  .works .section-head{
    min-height:auto !important;
    padding:86px 18px 22px !important;
    justify-content:flex-start !important;
  }
  .works .section-head::after{
    display:none !important;
    content:none !important;
  }
  .works .section-head h2{
    font-size:clamp(25px,8vw,34px) !important;
    line-height:1.25 !important;
  }
  .works .section-head p{
    font-size:13px !important;
    line-height:1.8 !important;
    color:#d8e4ff !important;
  }
  .works-feed{
    height:100svh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scroll-snap-type:y mandatory !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
    background:#050816 !important;
  }
  .work-reel{
    height:100svh !important;
    min-height:560px !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
  }
  .reel-sound-toggle{
    bottom:132px !important;
    left:18px !important;
    background:linear-gradient(145deg,rgba(5,8,22,.72),rgba(28,21,74,.46)) !important;
    border-color:rgba(112,215,255,.30) !important;
  }
  .reel-sound-toggle.sound-on{
    box-shadow:0 0 28px rgba(112,215,255,.32),0 0 44px rgba(196,19,244,.20),0 16px 42px rgba(0,0,0,.28) !important;
  }
  .reel-body{
    padding-bottom:24px !important;
  }
}

/* v8.3: إصلاح صوت الريلز، إظهار الكفر في الديسكتوب، وتحسين أزرار فيديو الهاتف */
.work-reel.has-video:not(.is-playing) .reel-cover,
.work-reel.has-video.cover-visible .reel-cover,
.work-reel.has-video.is-paused .reel-cover{
  opacity:1 !important;
  visibility:visible !important;
  transform:scale(1.01) !important;
  z-index:5 !important;
  pointer-events:none !important;
}
.work-reel.has-video:not(.is-playing) .reel-video,
.work-reel.has-video.cover-visible .reel-video,
.work-reel.has-video.is-paused .reel-video{
  z-index:1 !important;
}
.work-reel.has-video.is-playing .reel-cover{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.reel-sound-toggle{
  pointer-events:auto !important;
  touch-action:manipulation !important;
  user-select:none !important;
}
.reel-sound-toggle.sound-on{
  background:linear-gradient(145deg,rgba(112,215,255,.28),rgba(196,19,244,.22)) !important;
  border-color:rgba(112,215,255,.48) !important;
}

@media (min-width:721px){
  .work-reel.has-video .reel-cover{
    opacity:1 !important;
    visibility:visible !important;
    z-index:5 !important;
  }
  .work-reel.has-video.is-playing .reel-cover{
    opacity:0 !important;
    visibility:hidden !important;
  }
  .work-reel.has-video .play-badge{
    opacity:1 !important;
    z-index:7 !important;
  }
  .work-reel.has-video.is-playing .play-badge{
    opacity:0 !important;
  }
}

@media (max-width:720px){
  .hero-video-controls{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    bottom:auto !important;
    width:calc(100% - 24px) !important;
    max-width:460px !important;
    margin:8px auto 6px !important;
    z-index:6 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    padding:0 !important;
  }
  .hero-video-controls .control-btn{
    min-height:38px !important;
    height:38px !important;
    border-radius:999px !important;
    font-size:11px !important;
    line-height:1.2 !important;
    padding:6px 8px !important;
    white-space:nowrap !important;
    color:#fff !important;
    background:linear-gradient(145deg,rgba(5,8,22,.62),rgba(27,21,72,.48)) !important;
    border:1px solid rgba(112,215,255,.28) !important;
    box-shadow:0 0 18px rgba(112,215,255,.14),0 10px 26px rgba(0,0,0,.20) !important;
    backdrop-filter:blur(12px) saturate(1.2) !important;
  }
  .hero-inner{
    margin:-4px auto 0 !important;
  }
  .reel-sound-toggle{
    bottom:118px !important;
    left:18px !important;
    width:52px !important;
    height:52px !important;
    z-index:12 !important;
  }
  .work-reel::before,
  .reel-media:after{
    pointer-events:none !important;
  }
  .work-reel.has-video:not(.is-playing) .play-badge,
  .work-reel.has-video.is-paused .play-badge{
    opacity:1 !important;
  }
}

/* v8.5: تحسين خاص لصوت ريلز الهاتف */
.reel-sound-toggle.needs-tap{
  background:linear-gradient(145deg,rgba(255,122,122,.22),rgba(112,215,255,.18)) !important;
  border-color:rgba(255,255,255,.38) !important;
  animation:doitReelPulse 1.15s ease-in-out infinite !important;
}
@media (max-width:720px){
  .reel-sound-toggle{
    -webkit-tap-highlight-color:transparent !important;
    cursor:pointer !important;
  }
  .reel-sound-toggle.needs-tap::before{
    content:"🔊" !important;
    font-size:23px !important;
  }
}


/* v8.9: stronger sound status feedback for mobile reels */
.reel-sound-toggle.sound-on{
  background:linear-gradient(135deg,#16d98f,#66c8ff);
  color:#04111c;
  border-color:rgba(255,255,255,.65);
  box-shadow:0 0 22px rgba(102,200,255,.55),0 0 36px rgba(22,217,143,.28);
}
.reel-sound-toggle.needs-tap{
  animation:doitSoundPulse 1.2s ease-in-out infinite;
}
@keyframes doitSoundPulse{
  0%,100%{transform:translateY(0);box-shadow:0 0 16px rgba(102,200,255,.25)}
  50%{transform:translateY(-2px);box-shadow:0 0 30px rgba(102,200,255,.62)}
}
@media (max-width:720px){
  .reel-video[controls]{
    z-index:3;
    position:relative;
  }
}