/* GLOBAL */

* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  padding: 0;

  background: #050910;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  color: #f5f7fb;

}



/* NAVBAR */

.navbar {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 10;

  background: rgba(5, 9, 16, 0.9);

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(12px);

}



.nav-inner {

  max-width: 1100px;

  margin: 0 auto;

  padding: 10px 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.nav-left {

  display: flex;

  align-items: center;

  gap: 8px;

}



.nav-logo {

  width: 30px;

  height: 30px;

  border-radius: 8px; /* زوايا ناعمة للّوغو */

  box-shadow:

    0 0 0 1px rgba(0, 210, 255, 0.4),

    0 10px 26px rgba(0, 0, 0, 0.7);

}



.nav-brand {

  font-weight: 600;

  font-size: 0.98rem;

  letter-spacing: 0.03em;

}



.nav-links {

  display: flex;

  align-items: center;

  gap: 18px;

}



.nav-links a {

  color: #d5deff;

  text-decoration: none;

  font-size: 0.9rem;

  opacity: 0.85;

  transition: opacity 0.2s, color 0.2s;

}



.nav-links a:hover {

  opacity: 1;

  color: #00d0ff;

}



.nav-cta {

  padding: 7px 14px;

  border-radius: 999px;

  border: 1px solid #00c2ff;

}



.gear-btn {

  display: none;

  background: none;

  border: none;

  color: #d5deff;

  font-size: 1.1rem;

  cursor: pointer;

}



/* MOBILE MENU */

.mobile-menu {

  position: absolute;

  top: 52px;

  right: 16px;

  background: rgba(5, 9, 16, 0.98);

  border-radius: 12px;

  padding: 8px 0;

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85);

  border: 1px solid rgba(255, 255, 255, 0.08);

  display: none;

  z-index: 9;

}



.mobile-menu a {

  display: block;

  padding: 9px 18px;

  font-size: 0.9rem;

  color: #d5deff;

  text-decoration: none;

}



.mobile-menu a:hover {

  background: rgba(255, 255, 255, 0.06);

  color: #00d0ff;

}



.mobile-menu.open {

  display: block;

}



/* HERO */

.hero {

  position: relative;

  min-height: 90vh;

  background: url("bg-ai.jpg") center/cover no-repeat;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 120px 16px 80px;

  overflow: hidden;

}



/* التعتيم الرئيسي فوق الخلفية */

.overlay {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(circle at top, rgba(0, 208, 255, 0.22), transparent 55%),

    rgba(2, 8, 18, 0.94);

}



/* نوقف أي طبقة قديمة إن وجدت */

.quantum-layer {

  display: none;

}



/* ✨ Circuit Glow – نقاط ضوء تمشي فوق الخلفية */

.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  mix-blend-mode: screen;

  opacity: 0.28;

  background-image:

    radial-gradient(circle at 15% 20%, rgba(0, 230, 255, 0.9) 0, transparent 55%),

    radial-gradient(circle at 70% 35%, rgba(0, 255, 204, 0.75) 0, transparent 55%),

    radial-gradient(circle at 35% 75%, rgba(0, 180, 255, 0.8) 0, transparent 55%);

  background-size: 260% 260%;

  animation: circuitGlow 14s ease-in-out infinite alternate;

}



/* خطوط كهربائية تمشي وتومض فوق الخلفية */

.hero::after {

  content: "";

  position: absolute;

  inset: -10%;

  pointer-events: none;

  mix-blend-mode: screen;

  opacity: 0.22;

  background-image:

    repeating-linear-gradient(

      135deg,

      rgba(0, 255, 210, 0.35) 0px,

      rgba(0, 255, 210, 0.35) 1px,

      transparent 1px,

      transparent 9px

    ),

    repeating-linear-gradient(

      45deg,

      rgba(0, 170, 255, 0.3) 0px,

      rgba(0, 170, 255, 0.3) 1px,

      transparent 1px,

      transparent 11px

    );

  animation: neuralLines 20s linear infinite;

}



@keyframes circuitGlow {

  0% {

    opacity: 0.12;

    background-position: 0% 20%, 80% 0%, 10% 80%;

  }

  50% {

    opacity: 0.32;

    background-position: 60% 40%, 10% 30%, 90% 70%;

  }

  100% {

    opacity: 0.16;

    background-position: 30% 80%, 100% 40%, 0% 10%;

  }

}



@keyframes neuralLines {

  0% {

    transform: translate3d(0, 0, 0);

    opacity: 0.18;

  }

  50% {

    transform: translate3d(-40px, -12px, 0);

    opacity: 0.32;

  }

  100% {

    transform: translate3d(-80px, 10px, 0);

    opacity: 0.18;

  }

}



/* نخلي المحتوى فوق كل طبقات الإضاءة */

.hero-content {

  position: relative;

  z-index: 1;

  max-width: 760px;

  animation: heroFade 0.9s ease-out forwards;

  opacity: 0;

  transform: translateY(10px);

}



.overlay,

.hero::before,

.hero::after {

  z-index: 0;

}



/* LOGO with float + glow */

.hero-logo-box {

  display: inline-flex;

  flex-direction: column;

  align-items: center;

  margin-bottom: 18px;

}



.hero-logo {

  width: 140px;

  margin-bottom: 6px;

  border-radius: 18px; /* زوايا ناعمة للصورة الكبيرة */

  animation: logoFloatGlow 4.5s ease-in-out infinite;

  filter: drop-shadow(0 0 25px rgba(0, 200, 255, 0.55));

}



.hero-tagline {

  font-size: 0.82rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: #9fdfff;

  opacity: 0.9;

}



.hero h1 {

  font-size: 2.4rem;

  margin: 10px 0 12px;

}



.hero-subtitle {

  font-size: 1.02rem;

  opacity: 0.9;

  max-width: 620px;

  margin: 0 auto 24px;

}



.hero-actions {

  display: flex;

  justify-content: center;

  gap: 14px;

  flex-wrap: wrap;

}



/* BUTTONS */

.main-btn,

.ghost-btn {

  padding: 12px 24px;

  border-radius: 999px;

  font-weight: 600;

  border: none;

  cursor: pointer;

  text-decoration: none;

  display: inline-block;

  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease,

    color 0.15s ease;

}



.main-btn {

  background: linear-gradient(135deg, #00c2ff, #00ffcf);

  color: #021016;

  box-shadow: 0 10px 30px rgba(0, 214, 255, 0.35);

}



.main-btn:hover {

  transform: translateY(-1px);

  box-shadow: 0 14px 40px rgba(0, 214, 255, 0.5);

}



.ghost-btn {

  background: transparent;

  color: #e1ecff;

  border: 1px solid rgba(255, 255, 255, 0.4);

}



.ghost-btn:hover {

  background: rgba(0, 214, 255, 0.08);

}



.main-btn.wide {

  width: 100%;

  text-align: center;

}



/* SECTIONS */

.section {

  max-width: 1100px;

  margin: 0 auto;

  padding: 70px 18px;

  text-align: center;

}



.section.alt {

  background: radial-gradient(circle at top, #0a1424, #050910);

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.section h2 {

  font-size: 2rem;

  margin-bottom: 12px;

}



.section-desc {

  max-width: 640px;

  margin: 0 auto 36px;

  opacity: 0.85;

  font-size: 0.98rem;

}



/* CARDS */

.cards {

  display: flex;

  flex-wrap: wrap;

  gap: 22px;

  justify-content: center;

}



.card {

  background: radial-gradient(circle at top left, #11253b, #0b111b);

  border-radius: 12px;

  padding: 20px 18px;

  width: 260px;

  border: 1px solid rgba(255, 255, 255, 0.06);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

  text-align: left;

  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;

}



.card:hover {

  transform: translateY(-4px);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);

  border-color: rgba(0, 214, 255, 0.4);

}



/* PRICING */

.pricing-card {

  max-width: 420px;

  margin: 0 auto;

  background: radial-gradient(circle at top left, #19263a, #0a111b);

  border-radius: 14px;

  padding: 26px 22px 30px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);

  text-align: left;

}



.price {

  font-weight: 600;

  color: #7ceeff;

  margin-bottom: 16px;

}



/* CONTACT */

.contact-line {

  font-size: 0.98rem;

}



.contact-line a {

  color: #00d0ff;

  text-decoration: none;

}



.contact-line a:hover {

  text-decoration: underline;

}



.footer {

  margin-top: 40px;

  font-size: 0.8rem;

  opacity: 0.6;

}



/* ANIMATIONS */

@keyframes heroFade {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Logo Floating Glow Effect */

@keyframes logoFloatGlow {

  0% {

    transform: translateY(0);

    filter: drop-shadow(0 0 0 rgba(0, 210, 255, 0));

  }

  50% {

    transform: translateY(-6px);

    filter: drop-shadow(0 0 22px rgba(0, 210, 255, 0.55));

  }

  100% {

    transform: translateY(0);

    filter: drop-shadow(0 0 0 rgba(0, 210, 255, 0));

  }

}



/* RESPONSIVE */

@media (max-width: 768px) {

  .nav-links {

    display: none;

  }



  .gear-btn {

    display: block;

  }



  .hero {

    padding-top: 110px;

  }



  .hero h1 {

    font-size: 1.9rem;

  }



  .hero-subtitle {

    font-size: 0.95rem;

  }



  .card,

  .pricing-card {

    width: 100%;

  }

}



/* نخفي قائمة الموبايل في الديسكتوب دائماً */

@media (min-width: 769px) {

  .mobile-menu {

    display: none !important;

  }

}