/* =====================================================
   VOD TEAM – Dream-Tier Dark UI (RTL)
   Layers: luxury dark base, glassmorphism, neon accents,
   soft shadows, magnetic buttons, parallax & tilt.
===================================================== */

:root{
  /* Palette */
  --bg:#07070A;
  --surface:#0C0D12;
  --card:#11121A;
  --elev:#171924;
  --text:#F8FAFC;
  --muted:#9AA3B2;
  --stroke:#ffffff14;
  --stroke-2:#ffffff0F;
  --grad-a:#7C3AED;   /* purple */
  --grad-b:#22D3EE;   /* cyan   */
  --grad-c:#E11D48;   /* rose   */

  /* Effects */
  --blur:14px;
  --radius:16px;
  --radius-xl:22px;
  --shadow-xl:0 20px 60px rgba(0,0,0,.45);
  --shadow-md:0 10px 30px rgba(0,0,0,.35);

  /* Typography */
  --font-ar:'Tajawal',system-ui,Segoe UI,Arial,sans-serif;
  --font-en:'Inter',system-ui,Segoe UI,Arial,sans-serif;
  --font-display:'Cairo',system-ui,Segoe UI,Arial,sans-serif;

  /* Motion */
  --dur:700ms;
  --ease:cubic-bezier(.22,.8,.24,1);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--font-ar);line-height:1.85}

/* Links */
a{color:var(--grad-b);text-decoration:none}
a:hover{opacity:.9}
a:focus-visible{outline:2px solid var(--grad-b);outline-offset:2px;border-radius:10px}

/* Containers */
.container{width:min(1200px,92vw);margin-inline:auto;padding-inline:16px}

/* ===== Fancy Background FX ===== */
.fx{position:fixed;inset:0;pointer-events:none;z-index:-2}
.fx--bg{
  background:
    radial-gradient(1200px 600px at 20% -10%, #3b0764 0%, transparent 60%),
    radial-gradient(1000px 700px at 120% 20%, #0e7490 0%, transparent 60%),
    radial-gradient(800px 500px at -10% 120%, #7f1d1d 0%, transparent 60%);
  opacity:.3;
  filter:saturate(120%);
}
.fx--orb{position:fixed;width:42vmax;height:42vmax;border-radius:50%;filter:blur(60px);opacity:.18;mix-blend-mode:screen}
.fx--orb-a{top:-10vmax;inset-inline-start:-8vmax;background:linear-gradient(135deg,var(--grad-a),transparent)}
.fx--orb-b{bottom:-12vmax;inset-inline-end:-10vmax;background:linear-gradient(135deg,var(--grad-b),transparent)}

/* ===== Glass Utility ===== */
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  backdrop-filter:saturate(140%) blur(var(--blur));
  box-shadow:var(--shadow-md);
}
.glass-strong{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid #ffffff2a;
  backdrop-filter:saturate(160%) blur(calc(var(--blur) + 4px));
}

/* ===== Header / Nav ===== */
header.sticky{position:sticky;top:0;z-index:50}
header .container{padding-inline:16px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:64px;height:64px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.5);flex:0 0 auto}
.brand-text{display:flex;flex-direction:column}
.brand-title{font-family:var(--font-display);font-weight:900;letter-spacing:.3px}
.brand-sub{font-size:12px;color:#c7d2fe}

/* nav links */
nav{display:flex;align-items:center;gap:12px;white-space:nowrap}
nav a{color:var(--text);padding:10px 12px;border-radius:12px;font-family:var(--font-display);font-weight:800;margin-inline:2px;transition:transform .2s var(--ease),background .2s}
nav a:hover{background:var(--stroke-2);transform:translateY(-1px)}
nav a.active{background:#ffffff15;border:1px solid var(--stroke)}

@media (max-width:900px){
  .nav{row-gap:10px}
  .brand{order:1}
  nav{order:2;width:100%;justify-content:space-between;flex-wrap:wrap;gap:8px}
}
@media (max-width:560px){
  nav{justify-content:center}
  nav a{flex:1 1 45%;text-align:center}
}

/* ===== Hero ===== */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:72px 0 40px}
@media (max-width:980px){.hero{grid-template-columns:1fr;gap:22px}}

.display{font-family:var(--font-display);font-size:clamp(32px,5vw,54px);line-height:1.15;margin:0 0 10px}
.grad{background:linear-gradient(90deg,var(--grad-b),var(--grad-a) 40%,var(--grad-c));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:clamp(15px,2.2vw,18px);margin:0 0 16px;max-width:68ch}

.badge{display:inline-block;background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#001018;padding:7px 12px;border-radius:999px;font-size:12px;margin-bottom:12px;font-weight:900;box-shadow:0 8px 20px #0003}

.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:14px;border:1px solid var(--stroke);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.btn-primary{background:linear-gradient(135deg,var(--grad-b),var(--grad-a));color:#001018;font-weight:900;box-shadow:0 10px 30px #0006}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px #0008}
.btn-ghost{background:#ffffff08;color:#fff}
.btn-ghost:hover{background:#ffffff14}
.btn:focus-visible{outline:2px solid var(--grad-b);outline-offset:3px}

/* Magnetic hover (handled in JS) */
.magnet{position:relative;isolation:isolate;overflow:hidden}
.magnet::after{content:"";position:absolute;inset:-30%;background:radial-gradient(300px 300px at var(--mx,50%) var(--my,50%),#ffffff22 0%,transparent 60%);opacity:0;transition:opacity .2s}
.magnet:hover::after{opacity:1}

/* Hero device */
.hero-visual{display:grid;place-items:center}
.device-card{width:min(560px,86%);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-xl);position:relative}
.device-top{height:38px;background:linear-gradient(180deg,#111,#0b0b0f);display:flex;align-items:center;gap:6px;padding-inline:12px;border-bottom:1px solid var(--stroke)}
.device-top .dot{width:10px;height:10px;border-radius:50%;background:#22d3ee22;border:1px solid #22d3ee55}
.device-body{position:relative;background:radial-gradient(120% 120% at 50% 0%,#0b0b0f 0%,#0a0a12 70%,#0b0b0f 100%);min-height:320px}
.device-body .lines{position:absolute;inset:0;background:
  repeating-linear-gradient(180deg,transparent 0 28px,#22d3ee06 30px 31px);
  mask:linear-gradient(#000,#0000 60%);
}
.mesh{position:absolute;inset:12% 8%;border-radius:18px;background:linear-gradient(135deg,#14151c,#0d0e14);border:1px solid var(--stroke);box-shadow:inset 0 0 40px #000a}
.mesh.grad{background:linear-gradient(135deg,#0f172a,#111827 30%,#111122 60%)}
.floating-cards{position:absolute;inset:auto;bottom:22px;inset-inline:22px;display:flex;gap:10px;flex-wrap:wrap}
.fc{padding:8px 12px;border-radius:12px;border:1px solid var(--stroke);background:#ffffff08;box-shadow:0 8px 20px rgba(0,0,0,.4);font-weight:800;font-family:var(--font-en);letter-spacing:.3px}
.fc--primary{background:linear-gradient(135deg,var(--grad-a),transparent)}
.fc--accent{background:linear-gradient(135deg,var(--grad-b),transparent)}
.fc--ghost{background:#ffffff10}

/* Metrics */
.metrics{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.chip-3d{display:grid;place-items:center;gap:2px;border-radius:14px;padding:10px 14px;background:linear-gradient(180deg,#ffffff10,#ffffff03);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 #ffffff22, 0 8px 22px #0006;min-width:110px}
.chip-3d b{font-family:var(--font-en);font-size:18px}
.chip-3d span{color:var(--muted);font-size:12px}

/* Sections */
.section{padding:46px 0}
.section-head{margin-bottom:14px}
h1,h2,h3,h4{margin:0 0 10px}
h2{font-family:var(--font-display);font-weight:900;font-size:clamp(22px,3.5vw,32px)}
h3{font-family:var(--font-display);font-weight:800;font-size:clamp(18px,2.6vw,22px)}
h4{font-family:var(--font-display);font-weight:800;font-size:18px}

/* Lists reset for nicer bullets */
ul.list{margin:0;padding-inline-start:20px}
ul.list li{color:#c6cad5}

/* Cards & Grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1200px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:960px){.grid-3{grid-template-columns:1fr}}

.card{
  background:linear-gradient(180deg,var(--card),var(--elev));
  border:1px solid var(--stroke);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  padding:22px;
  transform:translateZ(0);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.45)}

.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:12px;padding:6px 10px;border-radius:999px;background:#ffffff10;border:1px solid var(--stroke)}

/* Features grid (لماذا VOD TEAM؟) */
.features-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:16px;
  align-items:stretch;
}
@media (max-width:1200px){ .features-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .features-grid{ grid-template-columns:1fr;} }

/* Marquee */
.marquee{overflow:hidden;border-block:1px solid var(--stroke);background:#0c0d12;box-shadow:inset 0 1px 0 #ffffff14, 0 -1px 0 #000}
.marquee__track{display:flex;gap:40px;white-space:nowrap;animation:scroll 28s linear infinite;padding:12px 0;color:#cbd5e1;font-weight:800;font-family:var(--font-en);letter-spacing:.4px}
.marquee__track span{opacity:.85}
@keyframes scroll{to{transform:translateX(50%)}}

/* Showcase */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.showcase{grid-template-columns:1fr}}
.showcase-card{padding:18px;border-radius:16px;border:1px solid var(--stroke);background:linear-gradient(180deg,#ffffff0a,#ffffff05);box-shadow:var(--shadow-md)}

/* Footer */
footer{border-top:1px solid var(--stroke);padding:26px 0 40px;color:var(--muted);text-align:center;font-size:14px}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease), transform .8s var(--ease)}

/* Tilt (JS will update CSS vars) */
.tilt{transform-style:preserve-3d;perspective:1000px}
.tilt:hover{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px)}

/* ===== Accessibility & Motion prefs ===== */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .marquee__track{animation:none}
  .magnet::after{transition:none}
  .card, .btn, .device-card, .tilt{transition:none}
  .tilt:hover{transform:none}
}

/* Hover effects only on devices that support hover */
@media (hover:none){
  nav a:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .magnet:hover::after,
  .card:hover{transform:none;box-shadow:var(--shadow-md)}
}
/* ==== Compact nav for mobile (remove extra spacing) ==== */
@media (max-width: 768px){
  .nav {
    flex-direction: column;
    align-items: center;
    gap: 4px;                /* تقليل الفراغ بين العناصر */
    padding-block: 6px;      /* تقليل ارتفاع الهيدر */
  }

  .brand img {
    width: 46px;
    height: 46px;
  }
  .brand-title {
    font-size: 15px;         /* خط أصغر */
  }
  .brand-sub {
    display: none;           /* نخفي النص الفرعي لتوفير مساحة */
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;                /* تقليل الفراغ بين الروابط */
    justify-content: center;
    width: 100%;
  }

  nav a {
    font-size: 13px;         /* أصغر */
    padding: 5px 8px;        /* مسافات داخلية أقل */
    margin: 0;
  }
}

/* شاشات أضيق جدًا */
@media (max-width: 360px){
  nav a {
    font-size: 12px;
    padding: 4px 6px;
  }
  .brand img {
    width: 40px;
    height: 40px;
  }
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: url("image.png") no-repeat center center fixed;
  background-size: cover;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: url("image.png") no-repeat center center;
  background-size: cover;       /* تغطي الشاشة بنسبة صحيحة */
  background-attachment: scroll; /* تخليها تتحرك مع الصفحة */
}