:root{
  --bg:#0b0f1a;
  --panel:#0f1629;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent1:#24C6DC;
  --accent2:#5433FF;
  --accent3:#ff00cc;
  --accent4:#43e97b;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
  overflow-x:hidden;
}
a{color:#a5b4fc; text-decoration:none}
a:hover{text-decoration:underline}

.header{
  position:sticky; top:0; z-index:20; backdrop-filter:saturate(180%) blur(6px);
  background:rgba(11,15,26,.6); border-bottom:1px solid rgba(255,255,255,.06)
}
.container{max-width:1100px; margin:0 auto; padding:0 16px}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; gap:10px; align-items:center}
.brand img{height:36px}
.brand span{font-weight:800; letter-spacing:.4px}

.menu{display:flex; gap:16px; flex-wrap:wrap}
.menu a{padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06)}
.menu a:hover{background:rgba(84,51,255,.12); border-color:rgba(84,51,255,.3)}

.hero{
  position:relative; padding:80px 0 40px; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:-20%; background:
    radial-gradient(40% 40% at 20% 20%, rgba(36,198,220,.22), transparent 70%),
    radial-gradient(35% 35% at 80% 20%, rgba(84,51,255,.18), transparent 75%),
    radial-gradient(45% 45% at 50% 90%, rgba(255,0,204,.16), transparent 70%);
  animation:floatbg 18s ease-in-out infinite alternate;
  will-change:transform;
  filter:blur(18px);
  z-index:-1;
}
@keyframes floatbg{
  from{transform:translate3d(-2%, -2%, 0) scale(1)}
  to{transform:translate3d(2%, 2%, 0) scale(1.05)}
}
@media (prefers-reduced-motion: reduce){ .hero::before{animation:none}}

h1,h2,h3{line-height:1.2; margin:0 0 12px}
h1{font-size:44px}
h2{font-size:28px; margin-top:20px}
p{margin:0 0 12px}
.lead{font-size:18px; color:#d1d5db}

.grid{display:grid; gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:14px;
  background:linear-gradient(90deg, var(--accent1), var(--accent2));
  color:white; border:none; cursor:pointer; font-weight:700; text-shadow:0 0 10px rgba(0,0,0,.3);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow:0 0 14px rgba(84,51,255,.35), inset 0 0 12px rgba(255,255,255,.15);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(84,51,255,.45)}
.btn.ghost{
  background:transparent; color:var(--text);
  border:1px solid rgba(255,255,255,.16)
}
.tag{display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; color:#c7d2fe; border:1px solid rgba(255,255,255,.14)}

.footer{
  margin-top:40px; padding:24px 0; border-top:1px solid rgba(255,255,255,.08);
  color:var(--muted); font-size:14px
}

.figure{border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#0f1629}
.figure img{display:block; width:100%; height:auto}

/* Cookie banner */
.cookie{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:50; padding:14px 16px; border-radius:16px;
  background:rgba(15,22,41,.95); border:1px solid rgba(255,255,255,.08); color:#e5e7eb; display:none;
}
.cookie.show{display:flex; align-items:center; justify-content:space-between; gap:12px}
.cookie .actions{display:flex; gap:8px}

/* Simple table */
table{width:100%; border-collapse:collapse; border:1px solid rgba(255,255,255,.12)}
th,td{padding:10px; border-bottom:1px solid rgba(255,255,255,.08)}
tbody tr:hover{background:rgba(255,255,255,.03)}

/* Blog */
.post-card{display:flex; flex-direction:column; gap:8px}
.post-card h3{margin:.2rem 0}
.post-meta{font-size:12px; color:#a1a1aa}

/* Forms */
input, textarea, select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:#0f1629; color:#e5e7eb; outline:none;
}
input:focus, textarea:focus{border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15)}
label{font-size:14px; color:#cbd5e1}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:720px){ .form-row{grid-template-columns:1fr} }

/* Stats */
.canvas-wrap{background:#0f1629; border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:10px}