*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Noto Kufi Arabic', sans-serif; background: #000; color: #e5e5e5; overflow-x: hidden; }

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

.tech-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to left, rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.015) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, transparent 5%, black 40%, black 70%, transparent 95%);
}

@keyframes animationIn {
  0% { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.anim-in { opacity: 0; }
.anim-in.visible { animation: animationIn 0.8s ease-out both; }
.d1{animation-delay:.1s!important}.d2{animation-delay:.2s!important}.d3{animation-delay:.3s!important}
.d4{animation-delay:.4s!important}.d5{animation-delay:.5s!important}.d6{animation-delay:.6s!important}.d7{animation-delay:.7s!important}

@keyframes float1{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(-3deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes float3{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(-1deg)}}
@keyframes float4{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes float5{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(-2deg)}}
@keyframes float6{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-15px) rotate(1deg)}}
.pf1{animation:float1 5s ease-in-out infinite}
.pf2{animation:float2 5.5s ease-in-out infinite}
.pf3{animation:float3 6s ease-in-out infinite}
.pf4{animation:float4 5.2s ease-in-out infinite}
.pf5{animation:float5 5.8s ease-in-out infinite}
.pf6{animation:float6 6.2s ease-in-out infinite}

@keyframes pulse-glow{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.08)}}
.glow-pulse{animation:pulse-glow 4s ease-in-out infinite}

@keyframes border-spin{to{--gradient-angle:360deg}}
@property --gradient-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.border-glow{background:conic-gradient(from var(--gradient-angle),transparent 0%,#333 10%,#3b82f6 20%,#333 30%,transparent 40%);animation:border-spin 3s linear infinite}

.text-hl{background:linear-gradient(to left,#60a5fa,#93c5fd,#bfdbfe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.glass{background:rgba(23,23,23,.6);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 30px rgba(0,0,0,.3),inset 0 0 20px rgba(255,255,255,.02)}

.phone{background:#111;border-radius:36px;border:2.5px solid rgba(255,255,255,.07);box-shadow:0 0 0 1px rgba(255,255,255,.03),0 25px 80px rgba(0,0,0,.6),0 0 50px rgba(59,130,246,.06);padding:10px;position:relative}
.phone-scr{border-radius:28px;overflow:hidden;background:#0a0a0a}
.phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:80px;height:24px;background:#111;border-radius:0 0 14px 14px;z-index:10}
.phone-notch::after{content:'';position:absolute;top:8px;right:16px;width:7px;height:7px;border-radius:50%;background:#1a1a1a;box-shadow:inset 0 0 2px rgba(59,130,246,.3)}

.app-bar{background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent)}
.app-bot{background:linear-gradient(to top,rgba(0,0,0,.7),transparent)}

.spotlight-container{position:relative}
.spotlight-container .spot{position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;mix-blend-mode:screen}
.spotlight-container:hover .spot{opacity:1}

.fi{transition:all .5s cubic-bezier(.25,1,.5,1)}
.glass:hover .fi{transform:scale(1.1);filter:drop-shadow(0 0 8px rgba(59,130,246,.4))}

::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:99px}

.mob-menu{transform:translateX(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.mob-menu.open{transform:translateX(0)}

.scr-label{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center}

/* Light mode overrides */
body.light { background: #f4f7fb; color: #111827; }
body.light::before { opacity: 0.015; mix-blend-mode: normal; }
body.light .text-white { color: #0f172a !important; }
body.light .text-neutral-300 { color: #334155 !important; }
body.light .text-neutral-400 { color: #475569 !important; }
body.light .text-neutral-500 { color: #64748b !important; }
body.light .text-neutral-600 { color: #64748b !important; }
body.light .text-neutral-700 { color: #475569 !important; }
body.light .bg-black\/95 { background-color: rgba(248, 250, 252, 0.95) !important; }
body.light .bg-black\/40 { background-color: rgba(241, 245, 249, 0.5) !important; }
body.light .bg-black\/25 { background-color: rgba(255, 255, 255, 0.72) !important; }
body.light .bg-black { background-color: #e2e8f0 !important; }
body.light .border-white\/10 { border-color: rgba(15, 23, 42, 0.16) !important; }
body.light .border-white\/\[0\.04\] { border-color: rgba(15, 23, 42, 0.08) !important; }
body.light .bg-white\/\[0\.04\] { background-color: rgba(15, 23, 42, 0.04) !important; }
body.light .bg-white\/\[0\.06\] { background-color: rgba(15, 23, 42, 0.06) !important; }
body.light .glass {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.35);
}
body.light .phone {
  background: #dbe3ee;
  border-color: rgba(15, 23, 42, 0.15);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 25px 70px rgba(15, 23, 42, 0.2), 0 0 40px rgba(59, 130, 246, 0.1);
}
body.light .phone-notch,
body.light .phone-notch::after { background: #dbe3ee; }
body.light .phone-scr { background: #e2e8f0; }
body.light .app-bar { background: linear-gradient(to bottom, rgba(255, 255, 255, .5), transparent); }
body.light .app-bot { background: linear-gradient(to top, rgba(255, 255, 255, .7), transparent); }
body.light .tech-grid {
  background-image:
    linear-gradient(to left, rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.04) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, transparent 5%, black 35%, black 70%, transparent 95%);
}
body.light .border-glow { background: conic-gradient(from var(--gradient-angle), transparent 0%, #d6deea 10%, #3b82f6 20%, #d6deea 30%, transparent 40%); }
body.light .spotlight-container .spot { mix-blend-mode: multiply; }

/* Features section tuning for light mode */
body.light #features {
  background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(241,245,249,0.9) 100%);
}
body.light #features .tech-grid {
  opacity: .7;
}
body.light #features .features-grid {
  background: rgba(148, 163, 184, 0.22);
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
}
body.light #features .feature-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.88) 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
body.light #features .feature-card:hover {
  background: linear-gradient(160deg, rgba(255,255,255,0.98) 0%, rgba(241,245,249,0.94) 100%) !important;
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow: 0 14px 32px rgba(59, 130, 246, 0.14);
  transform: translateY(-3px);
}
body.light #features .feature-card h3 { color: #0f172a !important; }
body.light #features .feature-card p { color: #475569 !important; }
body.light #features .feature-card .spot { opacity: .35; }