:root{
  --bg:#0a0f1f;
  --fg:#fff;
  --muted: rgba(255,255,255,.65);
  --glass: rgba(255,255,255,.05);
  --ring: rgba(255,255,255,.12);
  --cyan:#22d3ee;
  --indigo:#6366f1;
  --shadow: 0 10px 40px -12px rgba(34,211,238,.35);
  --radius: 18px;
  --container: 1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Naskh Arabic UI', 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  overflow-x:hidden;
}
.container{max-width:var(--container); margin:0 auto; padding: 0 24px}
.header{display:flex; align-items:center; justify-content:space-between; padding:22px 0}
.brand{display:flex; align-items:center; gap:12px}
.logo{height:48px; width:48px}
.brand-text h1{margin:0; font-weight:900; letter-spacing:.2px}
.brand-text p{margin:2px 0 0; color:var(--muted); font-size:.9rem}
.secure{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem}
.i{height:20px;width:20px;display:inline-block}
.main{display:grid; grid-template-columns:1fr; gap:28px; padding:10px 0 60px}
@media (min-width: 980px){ .main{grid-template-columns:1fr 1fr} }

.card{background:var(--glass); border:1px solid var(--ring); border-radius:24px; padding:28px; box-shadow: var(--shadow); backdrop-filter: blur(10px)}
.badge{display:inline-flex; align-items:center; gap:8px; background: rgba(34,211,238,.12); color:#a5f3fc; border:1px solid rgba(34,211,238,.35); padding:8px 12px; border-radius:999px; font-size:.8rem}
.hero h2{font-size: clamp(28px, 4vw, 46px); margin:10px 0 8px; line-height:1.15; font-weight:900}
.grad-text{background: linear-gradient(90deg, var(--cyan), var(--indigo)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{color:var(--muted); line-height:1.8; margin:8px 0 14px; max-width: 48ch}

.features{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0}
.pill{display:flex; align-items:center; gap:8px; border:1px solid var(--ring); background:rgba(255,255,255,.04); padding:10px 12px; border-radius:14px}
.pill .i{color:#99f6e4}

.subscribe{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.input-wrap{position:relative; flex:1 1 260px}
.input-wrap input{width:100%; padding:14px 44px 14px 14px; border-radius:14px; border:1px solid var(--ring); background: rgba(255,255,255,.06); color:var(--fg); outline:none}
.input-wrap input:focus{border-color: rgba(34,211,238,.5); box-shadow: 0 0 0 3px rgba(34,211,238,.15)}
.mail{position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted)}
.subscribe button{padding:14px 16px; border-radius:14px; border:0; cursor:pointer; font-weight:800; color:#000; background: linear-gradient(90deg, var(--cyan), var(--indigo)); box-shadow: var(--shadow)}

.countdown{display:flex; gap:10px; margin:16px 0 6px}
.time{display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(255,255,255,.04); border:1px solid var(--ring); border-radius:16px; width:78px; padding:10px 8px}
.time span{font-size:26px; font-weight:900}
.time small{opacity:.75}

.muted{color:var(--muted); margin-top:6px}
.dots b{animation: blink 1.2s steps(1) infinite}
.dots b:nth-child(2){animation-delay:.2s}
.dots b:nth-child(3){animation-delay:.4s}

.device{display:grid; place-items:center; position:relative}
.phone{position:relative; height:520px; width:270px; border-radius:36px; padding:16px; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); border:1px solid var(--ring); box-shadow: 0 30px 80px -20px rgba(99,102,241,.35)}
.notch{height:6px; width:100px; margin:0 auto 10px; border-radius:999px; background: rgba(255,255,255,.15)}
.screen{position:relative; height:100%; border-radius:28px; overflow:hidden; border:1px solid var(--ring); background: rgba(0,0,0,.15)}
.stripes{position:absolute; inset:0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 22px, transparent 22px 44px); animation: slide 12s linear infinite}
.card{position:absolute; inset: 32% 20%; display:grid; place-items:center; gap:6px; border-radius:16px; background: rgba(255,255,255,.06); border:1px solid var(--ring)}
.badge-icon{display:grid; place-items:center; height:44px; width:44px; border-radius:12px; background: linear-gradient(135deg, var(--cyan), var(--indigo)); box-shadow: 0 6px 24px -8px rgba(99,102,241,.45); color:#fff}
.title{margin:0; font-weight:800}
.sub{margin:0; color:var(--muted); font-size:.85rem}
.floating{position:absolute; padding:8px 12px; border-radius:12px; border:1px solid var(--ring); background: rgba(255,255,255,.08); backdrop-filter: blur(6px); font-size:.85rem}
.floating.left{left:-22px; top:18px; display:none}
.floating.right{right:-22px; bottom:24px; display:flex; align-items:center; gap:6px}
@media (min-width: 980px){ .floating.left{display:block} }

.marquee{position:relative; width:100%; overflow:hidden; border-top:1px solid var(--ring); background: rgba(255,255,255,.05); margin-top:10px}
.track{white-space:nowrap; padding:12px 0; animation: marquee 26s linear infinite}
.fade{position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, var(--bg), transparent 20%, transparent 80%, var(--bg))}

.footer{display:flex; justify-content:space-between; color:var(--muted); font-size:.95rem; padding:20px 0 40px}

.bg-orb{position:fixed; filter: blur(60px); opacity:.5; pointer-events:none; z-index:-1}
.orb-1{top:-120px; right:-120px; width:420px; height:420px; background: radial-gradient(circle at 40% 40%, rgba(99,102,241,.7), transparent 60%), radial-gradient(circle at 70% 60%, rgba(34,211,238,.5), transparent 60%)}
.orb-2{bottom:-160px; left:-140px; width:520px; height:520px; background: radial-gradient(circle at 60% 40%, rgba(168,85,247,.6), transparent 60%), radial-gradient(circle at 30% 60%, rgba(56,189,248,.4), transparent 60%)}
.grid-overlay{position:fixed; inset:0; pointer-events:none; opacity:.08; background-image: linear-gradient(to right, #fff 1px, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px); background-size:40px 40px; z-index:-1}

.neon-ring{position:fixed; inset:0; display:grid; place-items:center; z-index:-1; opacity:.65}
.neon-ring .ring{border-radius:999px; border:1px solid rgba(255,255,255,.04)}
.neon-ring .ring-1{height:44rem; width:44rem}
.neon-ring .ring-2{position:absolute; height:44rem; width:44rem; border:2px solid transparent; border-image: conic-gradient(from 90deg, transparent, rgba(56,189,248,.6), transparent, rgba(168,85,247,.55), transparent) 1; animation: spin 18s linear infinite}

@keyframes spin{to{transform: rotate(360deg)}}
@keyframes slide{from{background-position:0 0} to{background-position:600px 0}}
@keyframes marquee{from{transform:translateX(0)} to{transform: translateX(-50%)}}
@keyframes blink{0%,100%{opacity:0} 50%{opacity:1}}