/* Futuristic neon + glassmorphism (tiny stylesheet) */
:root{
  --bg:#050612;
  --text:#eaf0ff;
  --muted:#aab3d1;
  --card:#0c0e24cc; /* translucent */
  --line:rgba(255,255,255,0.12);
  --brand:#7b7cf6;
  --brand2:#00e5ff;
  --pink:#ff4fd8;
  --cyan:#00f6d2;
  --violet:#8a63ff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:#a7b5ff;text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{font-weight:800;margin:0 0 10px}
.section-title{font-family:Orbitron,Inter,sans-serif;letter-spacing:.5px;text-transform:uppercase}

.container{max-width:1080px;margin:0 auto;padding:20px}

/* Background layers */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg__gradient{
  position:absolute;inset:-20%;
  background:conic-gradient(from 180deg at 50% 50%, #0000, #182063, #0000, #2b0c3f, #0000, #042b2f, #0000);
  filter:blur(80px) saturate(120%); animation:spin 28s linear infinite;
}
.bg__noise{
  position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="0.07"><filter id="n"><feTurbulence baseFrequency="0.9" numOctaves="2" seed="2"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  mix-blend-mode:overlay;
}
.bg__grid{
  position:absolute;inset:0;
  background:
    linear-gradient(transparent 95%, rgba(168,180,255,0.08) 95%) 0 0/100% 24px,
    linear-gradient(90deg, transparent 95%, rgba(168,180,255,0.08) 95%) 0 0/24px 100%;
  mask-image: radial-gradient(circle at 50% 20%, #000 40%, transparent 80%);
}
.bg__orbs::before,
.bg__orbs::after{
  content:""; position:absolute; width:60vmin; height:60vmin; border-radius:50%;
  filter: blur(40px);
}
.bg__orbs::before{ top:10%; left:-10%; background:radial-gradient(circle,#7b7cf6 0%, #0000 60%); opacity:.25; }
.bg__orbs::after{ bottom:-10%; right:-10%; background:radial-gradient(circle,#00e5ff 0%, #0000 60%); opacity:.22; }
@keyframes spin{to{transform:rotate(360deg)}}

/* Glass effect containers */
.glass{
  background:var(--card);
  border:1px solid var(--line);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius:16px;
}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.brand{display:flex;gap:10px;align-items:center;font-family:Orbitron,Inter,sans-serif;font-weight:800}
.brand-text{letter-spacing:.6px}
.nav-links a{margin-left:16px;color:var(--muted)}
.nav-links a:hover{color:#e6e9ff}

/* Hero */
.hero{padding:80px 20px 30px;text-align:left}
.glow-text{
  font-size: clamp(36px, 6vw, 60px);
  line-height:1.05;
  background:linear-gradient(90deg, var(--brand), var(--brand2) 60%, #fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 18px rgba(123,124,246,.18);
}
.glow-text em{font-style:normal;text-shadow:0 0 22px rgba(0,229,255,.22)}
.subtitle{color:var(--muted);max-width:720px;margin-top:8px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 6px}
.chip{
  padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.06);
  border:1px solid var(--line); color:#cfd6ff; font-weight:600; font-size:14px;
}

/* Buttons */
.btn{position:relative;display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid var(--line);color:var(--text);background:rgba(255,255,255,0.06)}
.btn.small{padding:8px 12px;font-size:14px}
.btn-ghost:hover{background:rgba(255,255,255,0.1)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));border:0;box-shadow:0 6px 28px rgba(0,229,255,.15)}
.btn-primary .btn-glow{position:absolute;inset:-2px;border-radius:14px; background:radial-gradient(60% 80% at 30% 20%, rgba(0,229,255,.45), transparent 60%), radial-gradient(50% 60% at 80% 80%, rgba(123,124,246,.4), transparent 60%); filter:blur(14px); opacity:.6; pointer-events:none}
.cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}

/* Apps/Card */
.apps{padding:26px 20px}
.card{padding:18px;border-radius:16px;border:1px solid var(--line);transform-style:preserve-3d;transition:transform .2s ease}
.card-header{display:flex;gap:8px;margin-bottom:6px;opacity:.8}
.dot{width:10px;height:10px;border-radius:50%}
.dot--cyan{background:var(--cyan)}
.dot--pink{background:var(--pink)}
.dot--violet{background:var(--violet)}
.card-cta{margin-top:12px;display:flex;gap:10px}

/* Page blocks */
.page{padding:22px;margin-top:16px}
.footer{margin:30px 0 40px;padding:14px 18px;text-align:center;color:#c9cff7}

/* Small */
@media (max-width:640px){
  .nav{padding:10px 12px}
  .nav-links a{margin-left:12px}
  .hero{padding-top:60px}
}
.muted{color:var(--muted)}