/* NosXLAB Motion v1 */
:root{
  --bg:#0b0f17; --panel:#0f1624; --panel-2:#0c1422; --fg:#e5e7eb; --muted:#a3b0c7; --line:#1f2937;
  --primary:#7c3aed; --accent:#60a5fa; --hot:#f472b6; --success:#22c55e; --warning:#f59e0b;
  --radius:20px; --shadow:0 10px 30px rgba(0,0,0,.35); --blur:14px;
  --dur:300ms; --ease:cubic-bezier(.22,.61,.36,1); --lift:translateY(-6px);
}
:root.light{
  --bg:#f7f8ff; --panel:#ffffff; --panel-2:#f3f6ff; --fg:#0b1220; --muted:#5b6473; --line:#e5e7eb;
  --shadow:0 10px 30px rgba(16,24,40,.10);
}
:root.low{ --shadow:none; --blur:0; --dur:0ms; --lift:none }

*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--fg); line-height:1.65}
img,video{max-width:100%; display:block}
.container{width:min(1200px,92%); margin:0 auto}

/* Top bar */
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.3px; text-decoration:none; color:var(--fg)}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:linear-gradient(135deg,#1f2937,#334155); color:#e2e8f0; border:1px solid #2b364d; box-shadow:var(--shadow)}
:root.light .badge{background:linear-gradient(135deg,#eef2ff,#e0e7ff); color:#334155; border-color:#dfe6ff}
.menu{display:flex; gap:16px; list-style:none; padding:0; margin:0}
.menu a{text-decoration:none; color:var(--muted); font-weight:700}
.menu a:hover{color:var(--fg)}
.actions{display:flex; gap:8px; align-items:center}
.btn{border:1px solid var(--line); background:var(--panel); padding:10px 14px; border-radius:999px; text-decoration:none; color:var(--fg); font-weight:800; box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--primary)); color:#fff; border-color:transparent}
.btn:hover{transform:var(--lift)}
.chip{border:1px solid var(--line); background:var(--panel-2); color:var(--fg); padding:8px 12px; border-radius:999px; cursor:pointer; box-shadow:var(--shadow)}
/* Switch */
.switch{position:relative; display:inline-block; width:56px; height:30px}
.switch input{display:none}
.switch-body{position:relative; width:100%; height:100%; border-radius:999px; padding:4px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; box-shadow:var(--shadow); background:linear-gradient(135deg,#1f2937,#334155)}
.switch-body::after{content:""; position:absolute; top:4px; left:4px; width:22px; height:22px; background:#fff; border-radius:50%; box-shadow:0 2px 5px rgba(0,0,0,.25); transition:transform .35s var(--ease)}
.switch .icon{font-size:13px; opacity:.9}
.switch input:checked + .switch-body{background:linear-gradient(135deg,#fde68a,#f59e0b)}
.switch input:checked + .switch-body::after{transform:translateX(26px)}

/* HERO with video */
.hero{position:relative; border-radius:28px; overflow:hidden; border:1px solid #1b2942; box-shadow:var(--shadow)}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.2) contrast(1.05) brightness(.95)}
.hero .overlay{position:absolute; inset:0; background:
  radial-gradient(900px 400px at -10% -10%, #7c3aed44, transparent 60%),
  radial-gradient(900px 400px at 110% -10%, #06b6d444, transparent 60%),
  linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
:root.light .hero .overlay{background:
  radial-gradient(900px 400px at -10% -10%, #7c3aed33, transparent 60%),
  radial-gradient(900px 400px at 110% -10%, #06b6d433, transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.55));
}
.hero .content{position:relative; z-index:2; padding:72px 24px; display:grid; place-items:center; text-align:center}
.hero h1{font-size:clamp(32px,4vw,64px); margin:0 0 10px; text-shadow:0 6px 24px rgba(0,0,0,.35)}
.hero p{color:#cbd5e1; margin:0 0 18px; max-width:780px}
.glass{display:inline-flex; gap:12px; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.18);
  padding:10px 14px; border-radius:999px; backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); box-shadow:var(--shadow)}

/* Sections */
.section{padding:40px 0}
.grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); border-radius:18px; box-shadow:var(--shadow); padding:16px; backdrop-filter:blur(var(--blur))}
:root.light .card{background:var(--panel); border-color:var(--line)}
.card:hover{transform:var(--lift); transition:transform var(--dur) var(--ease)}
.meta{color:var(--muted); font-weight:700}
/* Tilt */
.tilt{transform-style:preserve-3d; perspective:800px}
.tilt .inner{transform:translateZ(20px)}
/* Marquee */
.marquee{display:flex; gap:24px; overflow:hidden; border:1px solid #1b2942; border-radius:18px; background:var(--panel-2)}
.marquee .track{display:flex; gap:24px; padding:12px 16px; animation:scroll 28s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.tag{padding:8px 12px; border-radius:999px; background:linear-gradient(135deg,#3b82f6,#8b5cf6); color:#fff; box-shadow:var(--shadow); font-weight:800}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(16px); filter:blur(2px)}
.reveal.in{opacity:1; transform:none; filter:none; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease)}

/* Footer */
.footer{padding:28px 0 40px; color:#93a4c3; border-top:1px solid #1b2942; margin-top:28px; text-align:center}

/* Responsive */
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .menu{display:none}
}