/* Neon / cyber / GD-themed stylesheet */
:root{
  --bg-1: #05060a;
  --bg-2: #0b1020;
  --card: rgba(255,255,255,0.03);
  --muted: #9aa3c7;
  --accent: #7c3aed; /* purple */
  --accent-2: #06b6d4; /* cyan */
  --neon-pink: #ff3cac;
  --glass: rgba(255,255,255,0.04);
}

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
}

.bg-canvas{position:fixed; inset:0; z-index:0; pointer-events:none}
.page{position:relative; z-index:5; min-height:100vh; display:flex; flex-direction:column}

/* NAV */
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 28px; gap:12px;}
.neon-card{backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:14px; box-shadow: 0 8px 30px rgba(0,0,0,0.6);}
.brand{display:flex; gap:12px; align-items:center}
.logo{width:56px; height:56px; border-radius:12px; display:grid; place-items:center; font-weight:800; background:linear-gradient(135deg,var(--accent),var(--neon-pink)); color:#fff; box-shadow: 0 6px 20px rgba(124,58,237,0.22), inset 0 -6px 18px rgba(255,255,255,0.04)}
.brand-text .name{font-weight:700; font-size:18px}
.brand-text .sub{font-size:12px; color:var(--muted)}
.nav-right{display:flex; align-items:center; gap:10px}
.search{padding:8px 12px; border-radius:10px; border:none; min-width:200px; outline:none; background:rgba(255,255,255,0.02); color:inherit}
.icon-btn{padding:8px 10px; border-radius:10px; border:none; background:rgba(255,255,255,0.02); cursor:pointer}
.btn{padding:8px 12px; border-radius:10px; text-decoration:none; color:#071029; background:linear-gradient(90deg,var(--accent),var(--neon-pink)); font-weight:700}
.ghost{background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.04); padding:8px 12px; border-radius:8px}

/* HERO */
.hero{padding:56px 24px; text-align:center}
.hero-title{font-size:36px; margin:0; background: linear-gradient(90deg,#fff, #cde8ff); -webkit-background-clip:text; color:transparent}
.hero-desc{color:var(--muted); margin-top:8px}
.hero-actions{margin-top:18px; display:flex; gap:12px; justify-content:center}
.cta{padding:10px 16px; border-radius:12px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); color:#071029; font-weight:700; text-decoration:none}

.container{max-width:1100px; margin:0 auto; padding:28px}
.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:18px}
.feature-card{padding:18px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));}

.preview .card{height:220px}
.card{position:relative; overflow:hidden; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:12px}
.card .thumb{height:120px; border-radius:10px; overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover}
.card h4{margin:10px 0 6px}
.card p{margin:0; color:var(--muted); font-size:13px}
.card .tags{position:absolute; right:12px; top:12px; display:flex; gap:6px}
.tag{font-size:11px; padding:6px 8px; border-radius:999px; background:rgba(255,255,255,0.02)}

.footer{display:flex; justify-content:space-between; gap:12px; padding:16px 28px; margin-top:auto}
.small{font-size:12px; color:var(--muted)}

/* Reveal animation */
.reveal{opacity:0; transform: translateY(18px) scale(0.995); transition: all 600ms cubic-bezier(.2,.9,.2,1)}
.revealed{opacity:1; transform: none}

/* page transition */
.page-transition{position:fixed; inset:0; background:linear-gradient(90deg, rgba(124,58,237,0.9), rgba(6,182,212,0.9)); z-index:9999; pointer-events:none; transition: opacity 420ms ease}
.page-transition.hidden{opacity:0; visibility:hidden}
.page-transition.show{opacity:1; visibility:visible}

/* responsive tweaks */
@media (max-width:720px){ .nav{padding:12px} .brand-text .name{font-size:16px} .search{min-width:120px}}

/* small chromatic accent */
.chromatic{filter: drop-shadow(0 0 12px rgba(124,58,237,0.18)) drop-shadow(0 0 8px rgba(6,182,212,0.08));}