/*
  Sbatek Vitesse — Hyper-futuristic single-page landing
  Colorway: Jet Black base with Blood Red + Neon Green accents
  Typeface: Tajawal (Arabic)
*/
:root{
  --bg:#070a0d;
  --bg-elev:#0b0f14;
  --text:#e6f1ff;
  --mute:#94a3b8;
  --accent: #39ff14; /* electric green */
  --accent-2:#ff1744; /* blood red */
  --neon: #b7ff00;
  --border: rgba(255,255,255,0.08);
  --glass: rgba(255,255,255,0.06);
  --shadow: 0 10px 40px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; 
  background: radial-gradient(1200px 800px at 70% -10%, rgba(57,255,20,.08), transparent 40%),
              radial-gradient(800px 600px at 20% -20%, rgba(255,23,68,.08), transparent 40%),
              var(--bg);
  color:var(--text);
}
img,video{max-width:100%; display:block}
.container{width:min(1160px, 92%); margin-inline:auto}

/* Progress bar */
#progress{position:fixed; inset:0 auto auto 0; height:3px; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); z-index:9999; box-shadow:0 0 10px var(--accent)}

/* Header */
.site-header{position:sticky; top:0; z-index:100; backdrop-filter:saturate(1.4) blur(10px); background:linear-gradient(to bottom, rgba(11,15,20,.9), rgba(11,15,20,.6)); border-bottom:1px solid var(--border)}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{font-weight:800; letter-spacing:.6px; color:#fff; text-decoration:none; font-size:1.1rem}
.brand span{color:var(--accent-2)}
.main-nav{display:flex; gap:18px}
.main-nav a{color:var(--mute); text-decoration:none; padding:8px 14px; border-radius:999px; transition:.2s ease; border:1px solid transparent}
.main-nav a:hover{color:#fff; border-color:var(--border); background:rgba(255,255,255,.03)}
.main-nav .pill{border-color:rgba(255,23,68,.25); color:#fff; background:linear-gradient(180deg, rgba(255,23,68,.18), rgba(255,23,68,.06)); box-shadow:0 0 12px rgba(255,23,68,.25)}

/* Hero */
.hero{position:relative; min-height:92vh; display:grid; align-items:center; isolation:isolate}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.1) brightness(.65) saturate(1.2)}
.speed-canvas{position:absolute; inset:0; width:100%; height:100%; opacity:.55; mix-blend-mode:screen}
.hero-overlay{position:absolute; inset:0; background:radial-gradient(1000px 500px at 60% -10%, rgba(57,255,20,.15), transparent 50%),
                           radial-gradient(800px 400px at 10% -20%, rgba(255,23,68,.12), transparent 55%),
                           linear-gradient(0deg, rgba(7,10,13,.0) 0%, rgba(7,10,13,.4) 100%)}
.hero-content{position:relative; padding:8rem 0 5rem; text-align:center}
.hero h1, .hero .hero-title{font-size:clamp(2.2rem, 4vw + 1rem, 4rem); line-height:1.1; margin:0; text-shadow:0 0 18px rgba(57,255,20,.3)}
.hero h1 .accent{color:var(--accent-2)}
.hero h1 .line{display:block}
.hero h1 .line + .line{margin-top:6px}
.lead{color:#cbd5e1; font-size:clamp(1rem, .8vw + .7rem, 1.25rem); margin:14px auto 24px; max-width:56ch}
.cta-group{display:flex; justify-content:center; gap:14px; flex-wrap:wrap}
.btn{--glow: var(--accent); display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border-radius:12px; text-decoration:none; color:#081017; font-weight:700; letter-spacing:.4px; position:relative; overflow:hidden; transition:transform .12s ease}
.btn:active{transform:translateY(1px)}
.btn::before{content:""; position:absolute; inset:-2px; border-radius:14px; padding:2px; background:linear-gradient(90deg, var(--glow), var(--accent-2)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.btn-primary{background:linear-gradient(180deg, rgba(57,255,20,.9), rgba(57,255,20,.75)); box-shadow:0 0 30px rgba(57,255,20,.35)}
.btn-ghost{background:rgba(255,255,255,.03); color:#e5e7eb}
.btn-wide{min-width:220px}
.btn .btn-loader{width:0; height:0; border:3px solid transparent; border-top-color:#081017; border-right-color:#081017; border-radius:50%; margin-inline-start:10px; opacity:0; transition:opacity .2s ease, width .2s ease, height .2s ease}
.btn.loading .btn-loader{width:16px; height:16px; opacity:1}

.hero-frame{margin-top:3rem; display:flex; justify-content:center}
.frame-core{position:relative; width:min(720px, 92vw); aspect-ratio:16/9; border:1px solid var(--border); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow:var(--shadow); overflow:hidden}
.halo{position:absolute; inset:auto -30% -30% -30%; height:60%; background:radial-gradient(closest-side, rgba(57,255,20,.25), transparent 70%); filter:blur(40px)}
.badge{position:absolute; top:14px; left:14px; background:rgba(255,23,68,.15); color:#fff; padding:6px 10px; border:1px solid rgba(255,23,68,.4); border-radius:999px; font-weight:700; letter-spacing:.5px}
.frame-note{position:absolute; bottom:14px; left:14px; color:#a3a3a3; font-size:.95rem}

/* Glitch title effect */
.glitch{position:relative; display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text); position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen}
.glitch::before{transform:translate(2px,-2px); color:rgba(57,255,20,.7); filter:blur(.6px)}
.glitch::after{transform:translate(-2px,2px); color:rgba(255,23,68,.7); filter:blur(.6px)}

/* Sections */
.section{padding:80px 0}
.section-head{margin-bottom:32px; text-align:center}
.section h2{font-size:clamp(1.8rem, 2.2vw + 1rem, 2.8rem); margin:0 0 8px}
.section p{color:var(--mute); margin:0}

/* Features */
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.feature-card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:16px; padding:22px; box-shadow:var(--shadow); position:relative; overflow:hidden; transform:translateY(10px); opacity:0; transition:.5s ease}
.feature-card.revealed{transform:none; opacity:1}
.feature-card .icon{font-size:1.6rem; margin-bottom:8px}
.feature-card h3{margin:0 0 6px}
.feature-card p{margin:0; color:#cbd5e1}
.feature-card::after{content:""; position:absolute; inset:auto -10% -20% -10%; height:40%; background:radial-gradient(closest-side, rgba(183,255,0,.2), transparent 70%); filter:blur(40px)}

/* Showcase */
.media-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.media-frame{border:1px solid var(--border); border-radius:14px; background:var(--bg-elev); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; cursor:zoom-in; outline:none}
.media-frame:focus{box-shadow:0 0 0 3px rgba(57,255,20,.35)}
.media-ph{width:100%; height:100%; display:grid; place-items:center; color:#0b0f14; font-weight:800; letter-spacing:1px; font-size:1.1rem}
.neon-a{background:conic-gradient(from 0deg, #39ff14, #1dff00, #39ff14)}
.neon-b{background:conic-gradient(from 90deg, #ff1744, #ff0037, #ff1744)}
.neon-c{background:conic-gradient(from 180deg, #00ffd5, #07f, #00ffd5)}
.neon-d{background:conic-gradient(from 270deg, #ffe600, #b7ff00, #ffe600)}
.neon-e{background:conic-gradient(from 45deg, #a700ff, #39ff14, #a700ff)}
.media-frame figcaption{position:absolute; bottom:8px; inset-inline:8px; color:#e5e7eb; font-size:.95rem; background:rgba(0,0,0,.25); padding:4px 8px; border-radius:8px; border:1px solid var(--border)}

.lightbox{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.75); z-index:1000}
.lightbox.open{display:grid}
.lightbox img{max-width:min(92vw,1100px); max-height:80vh; border-radius:14px; border:1px solid var(--border); background:#000}
.lightbox-close{position:absolute; top:18px; inset-inline-end:18px; background:rgba(255,255,255,.1); color:#fff; border:1px solid var(--border); border-radius:999px; width:40px; height:40px; display:grid; place-items:center; cursor:pointer}
.lightbox-note{margin-top:12px; color:#cbd5e1}

/* Order form */
.order-form{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:16px; padding:22px; box-shadow:var(--shadow)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-field{display:flex; flex-direction:column; gap:8px}
label{color:#eaeef7; font-weight:600}
input, select{background:#06090c; color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 14px; outline:none; transition:border .2s ease, box-shadow .2s ease}
input::placeholder{color:#64748b}
input:focus, select:focus{border-color:rgba(57,255,20,.45); box-shadow:0 0 0 3px rgba(57,255,20,.2)}
.form-actions{display:flex; align-items:center; gap:16px; margin-top:16px}
.privacy{color:#9aa7b4}

/* Toast */
.toast{position:fixed; bottom:18px; inset-inline:0; margin-inline:auto; left:0; right:0; width:min(480px, 92%); padding:12px 16px; background:rgba(7,10,13,.9); border:1px solid var(--border); border-radius:12px; color:#e5e7eb; box-shadow:var(--shadow); display:none}
.toast.show{display:block}

/* Footer */
.site-footer{border-top:1px solid var(--border); background:#070a0d; padding:24px 0}
.foot-grid{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.footer-nav a{color:#9aa7b4; margin-inline-start:12px; text-decoration:none}
.footer-nav a:hover{color:#fff}

/* Reveal on scroll */
.reveal{transform:translateY(20px); opacity:0; transition:all .6s ease}
.revealed{transform:none !important; opacity:1 !important}

/* Responsive */
@media (max-width: 1024px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .media-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 640px){
  .form-row{grid-template-columns:1fr}
  .media-grid{grid-template-columns:repeat(2,1fr)}
}