:root{
  --bg:#0b0d10;
  --bg-soft:#0f1318;
  --panel:#121821;
  --panel-2:#161d27;
  --text:#ecf1f7;
  --muted:#a9b1ba;
  --brand:#5aa8ff;
  --brand-2:#7bd3ff;
  --ring: 0 0 0 3px rgba(90,168,255,.25);
  --radius:16px;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg) 0%, #0c1116 100%);
  line-height:1.6;
}

img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:"Playfair Display",serif;line-height:1.2;margin:0 0 .5rem}
h1{font-size:2.2rem}
h2{font-size:1.6rem}
h3{font-size:1.25rem}
p{margin:.5rem 0 1rem}
.muted{color:var(--muted)}
.center{text-align:center}

.container{width:min(1100px,92%);margin:0 auto}
.section{padding:3rem 0}
.section-head{
  display:flex;justify-content:space-between;align-items:end;margin-bottom:1.25rem
}
.display{font-size:2.8rem}
.lead{color:var(--muted);font-size:1.125rem;max-width:55ch}

.btn{
  border:1px solid var(--brand);
  background:transparent;color:var(--text);
  padding:.7rem 1rem;border-radius:999px;
  display:inline-flex;gap:.5rem;align-items:center;
  cursor:pointer;box-shadow:var(--shadow);transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#081018}
.btn.ghost{border-color:#2a3950}
.btn.full{width:100%}
.link{color:var(--muted)}
.link:hover{color:var(--text)}

.site-header{
  position:sticky;top:0;backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(8,12,18,.6);border-bottom:1px solid #121a25;z-index:50
}
.header-inner{
  display:flex;align-items:center;gap:1rem;padding:.9rem 0
}
.logo{
  font-weight:800;letter-spacing:.5px;background:linear-gradient(135deg,#fff 0%,#aee1ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.3rem
}
.main-nav{margin-left:auto;margin-right:1rem;display:flex;gap:1rem;flex-wrap:wrap}
.main-nav a{padding:.4rem .6rem;border-radius:10px;color:#d9e3ee}
.main-nav a.active,.main-nav a:hover{background:#111824}
.auth-cta{display:flex;gap:.6rem}
.nav-toggle{display:none}

.hero{padding:2.5rem 0 1rem;border-bottom:1px solid #121a25;background:radial-gradient(1000px 400px at 80% -5%,rgba(90,168,255,.18),transparent)}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero-media img{border-radius:var(--radius);box-shadow:var(--shadow)}

.grid{display:grid;gap:1.2rem}
.cards-3{grid-template-columns:repeat(3,1fr)}
.dashboard{grid-template-columns:2fr 2fr 1.2fr}
.about-grid{grid-template-columns:1.6fr .9fr;gap:1.5rem}
.contact-grid{grid-template-columns:1.2fr .8fr}
.categories-grid{grid-template-columns:repeat(3,1fr)}

.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #182232;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow)
}
.card-media img{aspect-ratio:16/9;object-fit:cover}
.card-content{padding:1rem}
.card h3{margin:.4rem 0 .4rem}
.chip{
  display:inline-block;font-size:.75rem;padding:.2rem .55rem;border-radius:999px;background:#112033;color:#9fc9ff;border:1px solid #20354d
}

.meta{display:flex;align-items:center;gap:.6rem;color:#9bb1c9;font-size:.9rem}
.avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}

.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #182232;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)
}
.list{list-style:none;margin:0;padding:0}
.list li{padding:.4rem 0;border-bottom:1px dashed #1e2a3a}
.list li:last-child{border-bottom:0}
.stack{display:grid;gap:.6rem}

.aside{margin-top:2rem}
.article{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.2rem}
.article-head{margin-bottom:1rem}
.article-cover{margin:1rem 0;border-radius:var(--radius);box-shadow:var(--shadow)}
blockquote{
  margin:1rem 0;padding:1rem;border-left:4px solid var(--brand);background:#0d141c;border-radius:8px;color:#d7e6fb
}

.cta-band{background:linear-gradient(135deg,#0d1520,#0b1118);border-top:1px solid #121a25;border-bottom:1px solid #121a25}
.cta-inner{padding:2.2rem 0;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.inline-form{display:flex;gap:.6rem}
.inline-form input{
  background:#0c141d;border:1px solid #1a2737;color:var(--text);
  border-radius:999px;padding:.7rem 1rem;min-width:260px;outline:none
}
.inline-form input:focus{box-shadow:var(--ring)}

.auth-wrapper{min-height:60vh;display:grid;place-items:center}
.auth-panel{max-width:420px;width:100%}
label{display:block;margin:.4rem 0 .2rem}
input,textarea{
  width:100%;padding:.7rem .9rem;border-radius:12px;background:#0c141d;color:var(--text);
  border:1px solid #1a2737;outline:none;resize:vertical
}
input:focus,textarea:focus{box-shadow:var(--ring)}
textarea{min-height:140px}

.cat-card{
  padding:1rem;border:1px dashed #1e2a3a;border-radius:14px;background:#0d141c;color:#d7e6fb;box-shadow:var(--shadow)
}
.cat-card:hover{background:#0f1721}

.comments{margin-top:1rem;display:grid;gap:1rem}
.comment{display:flex;gap:.7rem;background:#0d141c;border:1px solid #1a2737;border-radius:12px;padding:.7rem}

.site-footer{border-top:1px solid #121a25;margin-top:2rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 0}
.footer-nav{display:flex;gap:1rem}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr 1fr}
  .article{grid-template-columns:1fr}
  .dashboard{grid-template-columns:1fr}
  .about-grid,.contact-grid,.categories-grid{grid-template-columns:1fr}
  .main-nav{display:none}
  .nav-toggle{display:inline-flex;margin-left:auto;width:40px;height:40px;border-radius:10px;border:1px solid #1c2a3d;background:#0f1620}
  .auth-cta{display:none}
  .site-header.open .main-nav{display:flex;flex-direction:column;gap:.4rem;position:absolute;top:60px;left:0;right:0;padding:.6rem;background:#0c1219;border-bottom:1px solid #121a25}
}