:root{
  --bg:#0b0b0b;
  --fg:#ffffff;
  --muted:#bcbcbc;
  --accent:#39ff14;
  --card:#121212;
  --border:#1f1f1f;
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --neon1:#39ff14;
  --neon2:#14e3ff;
  --neon3:#ff4df0;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;border-radius:14px}
.container{width:min(1200px, 92%);margin-inline:auto}
.section{padding:64px 0}
.section-title{font-size:clamp(1.6rem,1rem + 2vw,2.2rem);margin:0 0 24px}

.site-header{position:sticky;top:0;z-index:40;background:color-mix(in hsl, var(--bg) 85%, transparent);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.site-title{font-weight:700;letter-spacing:.2px}
.menu{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.menu a{padding:10px 12px;border-radius:10px;transition:transform .25s ease, background .25s ease, color .25s ease}
.menu a:hover{background:#121212;transform:translateY(-1px);color:var(--neon2)}

.hero{display:grid;place-items:center;min-height:62vh;padding:96px 0 64px;background-size:cover;background-position:center;border-bottom:1px solid var(--border)}
.hero-content{max-width:820px;text-align:center}
.hero h1{font-size: clamp(2.2rem, 1.2rem + 4vw, 3.4rem);margin:0 0 12px 0;text-shadow:0 0 14px color-mix(in srgb, var(--neon1) 40%, transparent)}
.tagline{color:var(--muted);margin:0 0 24px 0}

.btn{display:inline-block;padding:12px 18px;border-radius:14px;border:1px solid var(--neon1);background:linear-gradient(135deg, color-mix(in srgb, var(--neon1) 28%, #0b0b0b) , #0b0b0b);color:var(--fg);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.btn.primary{box-shadow:0 0 0 1px color-mix(in srgb, var(--neon1) 50%, transparent)}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 30px color-mix(in srgb, var(--neon1) 25%, transparent), var(--shadow);border-color:var(--neon1)}

.grid{display:grid;gap:20px}
.features-grid{grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}
.posts-grid{grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}

.card{background:var(--card);border:1px solid var(--border);padding:22px;border-radius:18px;box-shadow:0 1px 0 rgba(255,255,255,.02) inset;transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease}
.card .card-body{padding-top:10px}
.card-title{margin:0 0 6px 0;font-size:1.05rem}
.card-excerpt{color:var(--muted);margin:0}
.card-link{display:block}
.card.hover-scale:hover{transform:scale(1.03);box-shadow:0 14px 32px color-mix(in srgb, var(--neon2) 25%, transparent), var(--shadow);border-color:color-mix(in hsl, var(--neon2) 35%, var(--border));}

.arrow-link{display:inline-flex;align-items:center;gap:8px;margin-top:8px}
.arrow-link:after{content:"\2192";transition:transform .25s ease;color:var(--neon1)}
.arrow-link:hover:after{transform:translateX(4px)}

/* Animated blocks */
.animated-block{position:relative;overflow:hidden}
.animated-block .icon{font-size:30px;margin-bottom:8px}
.neon-bg::before{
  content:"";position:absolute;inset:-30%;background:conic-gradient(from 90deg, var(--neon1), var(--neon2), var(--neon3), var(--neon1));filter:blur(28px) saturate(140%);
  z-index:-1;opacity:.25;animation:gradientShift 8s linear infinite;
}
.animated-block:hover{transform:scale(1.04)}
.animated-block:hover::before{opacity:.35;filter:blur(22px) saturate(180%)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* Neon-hero subtle overlay */
.neon-hero{position:relative}
.neon-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(1200px 400px at 50% 0%, color-mix(in srgb, var(--neon2) 10%, transparent), transparent 60%);pointer-events:none}

@keyframes gradientShift{to{transform:rotate(1turn)}}

.site-footer{border-top:1px solid var(--border);padding:32px 0;background:#0f0f0f}
.footer-inner{display:flex;flex-direction:column;gap:12px}

@media (max-width:900px){
  .menu{flex-wrap:wrap}
}