/* ============================================
   علاء مطر — Premium Style v5
   ============================================ */

:root {
  --ac:   #6366f1;
  --acl:  #818cf8;
  --acg:  rgba(99,102,241,.28);
  --neo:  #a78bfa;
  --bg:   #07070f;
  --bg2:  #0d0d1c;
  --bg3:  #131325;
  --sur:  rgba(255,255,255,.042);
  --brd:  rgba(255,255,255,.09);
  --brd2: rgba(255,255,255,.16);
  --txt:  #f0f0ff;
  --mut:  rgba(240,240,255,.58);
  --dim:  rgba(240,240,255,.3);
  --r:    16px;
  --rs:   10px;
  --ease: cubic-bezier(.16,1,.3,1);
  --font: 'Tajawal', sans-serif;

  /* Service icon colors */
  --design-c: #f59e0b;
  --iptv-c:   #6366f1;
  --research-c: #10b981;
}

[data-theme="light"] {
  --bg:#f5f5ff; --bg2:#eeeefa; --bg3:#e6e6f7;
  --sur:rgba(0,0,0,.038); --brd:rgba(0,0,0,.09); --brd2:rgba(0,0,0,.16);
  --txt:#08081a; --mut:rgba(8,8,26,.58); --dim:rgba(8,8,26,.35);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { direction:rtl; font-size:16px; overflow-x:hidden; scroll-behavior:smooth; }
body  { font-family:var(--font); background:var(--bg); color:var(--txt); line-height:1.7; overflow-x:hidden; transition:background .4s,color .4s; }
a     { color:inherit; text-decoration:none; }
ul    { list-style:none; }
button { cursor:pointer; font-family:var(--font); border:none; background:none; }
::selection { background:var(--ac); color:#fff; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--ac),var(--neo)); border-radius:3px; }

/* ── Helpers ── */
.container { max-width:1100px; margin:0 auto; padding:0 1.5rem; }
.grad {
  background:linear-gradient(135deg,var(--acl) 0%,var(--neo) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.9rem; border-radius:999px;
  background:linear-gradient(135deg,var(--ac),#7c3aed);
  color:#fff; font-size:.95rem; font-weight:700; font-family:var(--font);
  transition:transform .25s var(--ease),box-shadow .25s;
  border:none; cursor:pointer;
}
.btn-primary svg { width:17px; height:17px; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 32px var(--acg); }

.btn-outline {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.9rem; border-radius:999px;
  background:var(--sur); border:1px solid var(--brd2);
  color:var(--txt); font-size:.95rem; font-weight:600; font-family:var(--font);
  transition:border-color .25s,background .25s,transform .25s; cursor:pointer;
}
.btn-outline svg { width:17px; height:17px; }
.btn-outline:hover { border-color:var(--ac); background:rgba(99,102,241,.08); transform:translateY(-3px); }

/* Fade animation */
.fade { opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease),transform .7s var(--ease); transition-delay:var(--fd,0s); }
.fade.in { opacity:1; transform:none; }

/* ============================================
   NAVBAR
   ============================================ */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:1.1rem 0; transition:all .4s;
}
#nav.stuck {
  background:rgba(7,7,15,.88);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:0 1px 0 var(--brd),0 8px 28px rgba(0,0,0,.35);
  padding:.75rem 0;
}
[data-theme="light"] #nav.stuck { background:rgba(245,245,255,.92); }

.nav-row {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

/* Logo */
.logo { display:flex; align-items:center; gap:.65rem; font-size:1.35rem; font-weight:700; }
.logo-icon { width:38px; height:38px; flex-shrink:0; }
.logo-icon svg { width:100%; height:100%; }
.logo-icon.small { width:32px; height:32px; }
.logo span { display:flex; gap:.3rem; align-items:baseline; }
.logo strong { color:var(--acl); }

.nav-links { display:flex; gap:.2rem; }
.nl { padding:.45rem .95rem; border-radius:var(--rs); font-size:.875rem; font-weight:600; color:var(--mut); transition:color .2s,background .2s; }
.nl:hover { color:var(--txt); background:rgba(99,102,241,.08); }

.nav-end { display:flex; align-items:center; gap:.65rem; }

/* Theme toggle */
.theme-toggle {
  width:38px; height:38px; border-radius:50%;
  background:var(--sur); border:1px solid var(--brd);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s,background .2s; position:relative;
}
.theme-toggle svg { width:17px; height:17px; color:var(--txt); position:absolute; transition:opacity .3s,transform .3s; }
.icon-sun  { opacity:1; transform:rotate(0deg); }
.icon-moon { opacity:0; transform:rotate(-90deg); }
[data-theme="light"] .icon-sun  { opacity:0; transform:rotate(90deg); }
[data-theme="light"] .icon-moon { opacity:1; transform:rotate(0deg); }
.theme-toggle:hover { border-color:var(--ac); background:rgba(99,102,241,.08); }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  padding:7px; background:var(--sur); border:1px solid var(--brd); border-radius:var(--rs);
}
.hamburger span { display:block; width:20px; height:2px; background:var(--txt); border-radius:1px; transition:.3s; }

/* ============================================
   MOBILE DRAWER
   ============================================ */
#mOverlay {
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  backdrop-filter:blur(5px); z-index:600;
  opacity:0; visibility:hidden; transition:opacity .35s,visibility .35s;
}
#mOverlay.on { opacity:1; visibility:visible; }

#mDrawer {
  position:fixed; top:0; right:0; width:275px; height:100dvh;
  background:rgba(7,7,15,.99); border-left:1px solid var(--brd2);
  z-index:700; padding:0; overflow-y:auto;
  transform:translateX(100%); transition:transform .4s var(--ease);
  display:flex; flex-direction:column;
}
[data-theme="light"] #mDrawer { background:rgba(245,245,255,.99); }
#mDrawer.on { transform:translateX(0); }

.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 1rem; border-bottom:1px solid var(--brd);
  background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.06));
  flex-shrink:0;
}
.drawer-logo { display:flex; align-items:center; gap:.6rem; font-size:1rem; font-weight:700; }

#mClose {
  width:32px; height:32px; border-radius:50%;
  background:var(--sur); border:1px solid var(--brd);
  color:var(--mut); display:flex; align-items:center; justify-content:center;
  transition:background .2s,color .2s,transform .3s;
}
#mClose svg { width:14px; height:14px; }
#mClose:hover { background:rgba(239,68,68,.12); color:#f87171; transform:rotate(90deg); }

.drawer-nav { padding:.75rem; flex-shrink:0; }
.dlink {
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; border-radius:var(--rs);
  font-size:.95rem; font-weight:600; color:var(--mut);
  transition:background .2s,color .2s; margin-bottom:.3rem;
}
.dlink svg { width:18px; height:18px; flex-shrink:0; }
.dlink:hover { background:rgba(99,102,241,.08); color:var(--txt); }

.drawer-socials { padding:.75rem; border-top:1px solid var(--brd); margin-top:auto; flex-shrink:0; }
.drawer-socials>p { font-size:.72rem; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:.09em; margin-bottom:.65rem; }
.dsoc {
  display:flex; align-items:center; gap:.7rem;
  padding:.65rem .9rem; border-radius:var(--rs);
  background:var(--sur); border:1px solid var(--brd);
  font-size:.875rem; font-weight:600; color:var(--mut);
  transition:background .2s,border-color .2s,color .2s; margin-bottom:.35rem;
}
.dsoc svg { width:17px; height:17px; flex-shrink:0; }
.dsoc:hover { background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.3); color:var(--acl); }

/* ============================================
   HERO
   ============================================ */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:7rem 1.5rem 5rem; overflow:hidden; text-align:center;
}
#particles-js { position:absolute; inset:0; z-index:0; }

/* Gradient orbs */
.hero-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px); }
.orb1 { width:500px;height:500px; background:rgba(99,102,241,.18); top:-150px;right:-100px; animation:orbFloat 9s ease-in-out infinite; }
.orb2 { width:380px;height:380px; background:rgba(139,92,246,.13); bottom:-100px;left:-80px; animation:orbFloat 11s ease-in-out infinite reverse; }
.orb3 { width:280px;height:280px; background:rgba(167,139,250,.1); top:40%;left:40%; animation:orbFloat 13s ease-in-out infinite 2s; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0);} 33%{transform:translate(20px,-25px);} 66%{transform:translate(-15px,15px);} }

.hero-content { position:relative; z-index:1; max-width:720px; margin:0 auto; }

/* Chip */
.hero-chip {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.42rem 1.1rem; border:1px solid rgba(99,102,241,.35); border-radius:999px;
  font-size:.78rem; font-weight:600; color:var(--acl);
  background:rgba(99,102,241,.08); margin-bottom:1.5rem;
  animation:fadeUp .6s var(--ease) .05s both;
}
.pulse-dot {
  width:7px; height:7px; background:#22c55e; border-radius:50%;
  box-shadow:0 0 0 0 rgba(34,197,94,.7);
  animation:pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,.7); }
  70%  { box-shadow:0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* Title */
.hero-content h1 { font-size:clamp(3rem,11vw,5.8rem); font-weight:900; line-height:1.05; letter-spacing:-.03em; margin-bottom:1rem; animation:fadeUp .65s var(--ease) .15s both; }
.hero-tagline { font-size:clamp(.95rem,2.5vw,1.2rem); color:var(--mut); margin-bottom:.75rem; font-weight:500; animation:fadeUp .65s var(--ease) .25s both; }
.hero-desc    { font-size:.95rem; color:var(--dim); line-height:1.8; margin-bottom:2.25rem; animation:fadeUp .65s var(--ease) .35s both; }

@keyframes fadeUp { from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;} }

.hero-actions {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-bottom:2.5rem; animation:fadeUp .65s var(--ease) .45s both;
}

/* Mini badges */
.hero-badges { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; animation:fadeUp .65s var(--ease) .55s both; }
.hbadge {
  display:flex; align-items:center; gap:.4rem;
  padding:.38rem .9rem; border-radius:999px;
  background:var(--sur); border:1px solid var(--brd);
  font-size:.78rem; font-weight:600; color:var(--mut);
}
.hbadge svg { width:14px; height:14px; color:var(--ac); flex-shrink:0; }

/* Scroll hint */
.scroll-hint {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:var(--dim); font-size:.72rem;
  animation:shBounce 2.5s ease-in-out infinite;
}
.sh-mouse  { width:20px;height:33px; border:1.5px solid var(--brd2); border-radius:10px; display:flex; align-items:flex-start; justify-content:center; padding-top:4px; }
.sh-wheel  { width:2px;height:6px; background:var(--acl); border-radius:2px; animation:shWheel 2s ease-in-out infinite; }
@keyframes shWheel  { 0%,100%{transform:translateY(0);opacity:1;}50%{transform:translateY(4px);opacity:.4;} }
@keyframes shBounce { 0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(5px);} }

/* ============================================
   SECTIONS COMMON
   ============================================ */
.sec { padding:6rem 0; position:relative; }

.sec-head { text-align:center; margin-bottom:3.5rem; }
.sec-tag-wrap {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.38rem 1.1rem; border:1px solid rgba(99,102,241,.35); border-radius:999px;
  color:var(--acl); font-size:.78rem; font-weight:700; letter-spacing:.06em;
  background:rgba(99,102,241,.08); margin-bottom:.9rem;
}
.sec-tag-wrap svg { width:14px; height:14px; }
.sec-head h2 { font-size:clamp(1.8rem,4vw,2.7rem); font-weight:800; letter-spacing:-.02em; margin-bottom:.65rem; }
.sec-head p  { color:var(--mut); font-size:.95rem; max-width:480px; margin:0 auto; }

/* ============================================
   SERVICES
   ============================================ */
.sec::before { content:''; position:absolute; top:0;left:0;right:0; height:1px; background:linear-gradient(90deg,transparent,var(--ac),transparent); }

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  align-items:stretch;
}

.scard {
  position:relative; overflow:hidden;
  background:var(--sur); border:1px solid var(--brd); border-radius:var(--r);
  padding:2rem 1.8rem 1.8rem;
  display:flex; flex-direction:column; gap:.75rem;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.scard-glow {
  position:absolute; top:-60px; right:-60px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.12),transparent 70%);
  pointer-events:none; transition:opacity .4s;
  opacity:0;
}
.scard:hover { transform:translateY(-6px); box-shadow:0 20px 55px rgba(99,102,241,.14); border-color:rgba(99,102,241,.3); }
.scard:hover .scard-glow { opacity:1; }

/* Featured card */
.scard.featured {
  border-color:rgba(99,102,241,.4);
  background:linear-gradient(160deg,rgba(99,102,241,.09) 0%,rgba(139,92,246,.05) 100%);
  box-shadow:0 4px 24px rgba(99,102,241,.1);
}
.scard.featured:hover { transform:translateY(-8px); box-shadow:0 24px 65px rgba(99,102,241,.22); }
.featured-glow { opacity:.7; background:radial-gradient(circle,rgba(99,102,241,.18),transparent 70%); }

.featured-label {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .75rem; border-radius:999px;
  background:linear-gradient(135deg,var(--ac),#7c3aed);
  color:#fff; font-size:.72rem; font-weight:700;
  width:fit-content; margin-bottom:.25rem;
}
.featured-label svg { width:12px; height:12px; }

/* Card header */
.scard-header { display:flex; align-items:center; justify-content:space-between; }

/* Icon */
.scard-icon {
  width:54px; height:54px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:transform .3s,box-shadow .3s;
}
.scard-icon svg { width:30px; height:30px; }
.scard:hover .scard-icon { transform:scale(1.1); }

.scard-icon.design   { background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.25); color:#f59e0b; }
.scard-icon.iptv     { background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25); color:var(--acl); }
.scard-icon.research { background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.25); color:#10b981; }
.scard:hover .scard-icon.design   { box-shadow:0 0 20px rgba(245,158,11,.25); }
.scard:hover .scard-icon.iptv     { box-shadow:0 0 20px var(--acg); }
.scard:hover .scard-icon.research { box-shadow:0 0 20px rgba(16,185,129,.25); }

.scard-num { font-size:2.8rem; font-weight:900; color:rgba(99,102,241,.08); line-height:1; }

/* Card content */
.scard h3 { font-size:1.1rem; font-weight:700; }
.scard>p  { color:var(--mut); font-size:.875rem; line-height:1.7; }

.scard-features { display:flex; flex-direction:column; gap:.45rem; flex:1; }
.scard-features li {
  display:flex; align-items:center; gap:.55rem;
  font-size:.82rem; color:var(--mut);
}
.scard-features svg { width:14px; height:14px; flex-shrink:0; color:var(--ac); }

/* CTA button */
.scard-cta {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem 1.4rem; border-radius:999px;
  background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.25);
  color:var(--acl); font-size:.85rem; font-weight:700;
  transition:background .25s,border-color .25s,transform .25s; margin-top:.5rem;
  font-family:var(--font);
}
.scard-cta svg { width:15px; height:15px; transition:transform .25s; }
.scard-cta:hover { background:rgba(99,102,241,.18); border-color:var(--ac); transform:translateY(-2px); }
.scard-cta:hover svg { transform:translateX(-3px); }

.featured-cta {
  background:linear-gradient(135deg,var(--ac),#7c3aed);
  border:none; color:#fff;
}
.featured-cta:hover { box-shadow:0 8px 24px var(--acg); }

/* ============================================
   CONTACT
   ============================================ */
.contact-sec { background:var(--bg2); }
.contact-sec::before { background:linear-gradient(90deg,transparent,var(--neo),transparent); }

.cways-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem;
  max-width:720px; margin:0 auto;
}

.cway {
  display:flex; align-items:center; gap:1.1rem;
  padding:1.35rem 1.5rem; border-radius:var(--r);
  background:var(--sur); border:1px solid var(--brd);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
  position:relative; overflow:hidden;
}
.cway::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(99,102,241,.04),transparent); opacity:0; transition:opacity .3s; }
.cway:hover::before { opacity:1; }
.cway:hover { transform:translateY(-4px); }

/* Contact icon */
.cway-icon {
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s,box-shadow .3s;
}
.cway-icon svg { width:22px; height:22px; }
.cway:hover .cway-icon { transform:scale(1.1); }

.cway-icon.insta { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff; }
.cway-icon.tg    { background:#0088cc; color:#fff; }
.cway-icon.wa    { background:#25d366; color:#fff; }
.cway-icon.mail  { background:linear-gradient(135deg,var(--ac),#7c3aed); color:#fff; }

.cway:hover.cway { border-color:rgba(99,102,241,.35); box-shadow:0 10px 32px rgba(99,102,241,.1); }

.cway-info { flex:1; min-width:0; }
.cway-info strong { display:block; font-size:.95rem; font-weight:700; margin-bottom:2px; }
.cway-info span   { font-size:.82rem; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }

.cway-arrow { color:var(--dim); transition:color .25s,transform .25s; flex-shrink:0; }
.cway-arrow svg { width:18px; height:18px; }
.cway:hover .cway-arrow { color:var(--acl); transform:translateX(-4px); }

/* ============================================
   FOOTER
   ============================================ */
.footer { background:var(--bg2); border-top:1px solid var(--brd); padding:2rem 0; position:relative; }
.ft-line { position:absolute; top:0; left:50%; transform:translateX(-50%); width:320px; height:1px; background:linear-gradient(90deg,transparent,var(--ac),var(--neo),var(--ac),transparent); }

.ft-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.ft-logo  { display:flex; align-items:center; gap:.55rem; }
.ft-name  { font-size:1rem; font-weight:700; }
.ft-copy  { font-size:.8rem; color:var(--dim); }

.ft-socials { display:flex; gap:.75rem; }
.ft-socials a {
  width:36px; height:36px; border-radius:50%;
  background:var(--sur); border:1px solid var(--brd);
  display:flex; align-items:center; justify-content:center;
  color:var(--mut); transition:border-color .2s,color .2s,transform .2s;
}
.ft-socials a svg { width:16px; height:16px; }
.ft-socials a:hover { border-color:var(--ac); color:var(--acl); transform:scale(1.15); }

/* ============================================
   SCROLL TOP
   ============================================ */
#scrollTop {
  position:fixed; bottom:1.75rem; right:1.75rem; z-index:800;
  width:42px; height:42px; border-radius:50%;
  background:var(--sur); border:1px solid var(--brd2);
  color:var(--txt); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s,visibility .3s,transform .3s,border-color .2s,background .2s;
  backdrop-filter:blur(8px);
}
#scrollTop svg { width:18px; height:18px; }
#scrollTop.show { opacity:1; visibility:visible; transform:translateY(0); }
#scrollTop:hover { border-color:var(--ac); background:rgba(99,102,241,.12); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:900px) {
  .services-grid { grid-template-columns:1fr; max-width:460px; margin:0 auto; }
}

@media (max-width:768px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .sec { padding:4.5rem 0; }
  .cways-grid { grid-template-columns:1fr; max-width:420px; }
  .hero-actions { flex-direction:column; align-items:center; }
  .btn-primary,.btn-outline { width:100%; max-width:280px; justify-content:center; }
}

@media (max-width:600px) {
  .ft-inner { flex-direction:column; text-align:center; }
  .hero-badges { gap:.5rem; }
  .hbadge { font-size:.72rem; padding:.32rem .75rem; }
}

@media (max-width:480px) {
  .container { padding:0 1rem; }
  .hero { padding:7rem 1rem 5rem; }
}