:root{
  --bg:#050512;
  --bg2:#070A1F;
  --ink:#EAF2FF;
  --muted:#A9B7E6;

  --n1:#3CF4FF;   /* neon cyan */
  --n2:#8A2BFF;   /* neon purple */
  --n3:#00FF9A;   /* neon green */
  --line: rgba(60,244,255,.28);
  --glass: rgba(10,14,40,.52);
  --glass2: rgba(10,14,40,.32);

  --r1:22px;
  --r2:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(900px 600px at 18% 22%, rgba(138,43,255,.24), transparent 60%),
    radial-gradient(900px 600px at 82% 18%, rgba(60,244,255,.18), transparent 60%),
    radial-gradient(900px 600px at 65% 88%, rgba(0,255,154,.14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
.container{width:min(1120px,92vw);margin:0 auto;padding:26px 0 70px}

/* --- neon grid overlay --- */
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, rgba(60,244,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(60,244,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:.35;
  mask-image: radial-gradient(600px 400px at 50% 20%, #000 20%, transparent 70%);
}

.glass{
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border:1px solid var(--line);
  border-radius: var(--r1);
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(138,43,255,.12) inset;
}

/* --- topbar --- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 16px;
}

.brand{
  display:flex; align-items:center; gap:12px;
}
.badge{
  width:46px; height:46px; border-radius:16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(60,244,255,.9), rgba(138,43,255,.35) 55%, transparent 70%);
  border:1px solid rgba(60,244,255,.55);
  box-shadow: 0 0 30px rgba(60,244,255,.18);
  position:relative;
}
.badge:after{
  content:"✦";
  position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; text-shadow: 0 0 22px rgba(60,244,255,.7);
}

.brand h1{
  margin:0;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size:22px;
  letter-spacing:.4px;
}
.brand small{display:block;color:var(--muted);margin-top:2px}

.nav{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end}
.nav a{
  padding:10px 12px;
  border-radius:16px;
  font-weight:800;
  color:rgba(234,242,255,.95);
  border:1px solid transparent;
  transition:.18s ease;
}
.nav a:hover{
  border-color: rgba(60,244,255,.55);
  box-shadow: 0 0 18px rgba(60,244,255,.16);
  transform: translateY(-1px);
}
.nav a.active{
  border-color: rgba(138,43,255,.55);
  box-shadow: 0 0 18px rgba(138,43,255,.18);
}

/* --- hero --- */
.hero{
  margin-top:16px;
  padding:26px 22px;
  position:relative;
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute; inset:-120px -120px auto auto;
  width:360px; height:360px;
  background: radial-gradient(circle, rgba(60,244,255,.26), transparent 65%);
  filter: blur(8px);
}
.hero:after{
  content:"";
  position:absolute; left:-120px; bottom:-140px;
  width:440px; height:440px;
  background: radial-gradient(circle, rgba(138,43,255,.18), transparent 70%);
  filter: blur(10px);
}

.hero h2{
  margin:0;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size:48px;
  line-height:1.05;
  text-shadow: 0 0 26px rgba(60,244,255,.14);
}
.hero p{
  margin:12px 0 18px;
  color:var(--muted);
  max-width: 66ch;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius: 18px;
  border:1px solid rgba(60,244,255,.55);
  background: rgba(8,10,28,.38);
  color:#fff;
  font-weight:900;
  letter-spacing:.2px;
  transition:.18s ease;
  box-shadow: 0 0 0 1px rgba(60,244,255,.12) inset;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(60,244,255,.22) inset,
    0 0 26px rgba(60,244,255,.18);
}
.btn.primary{
  border:0;
  background: linear-gradient(90deg, rgba(60,244,255,.95), rgba(138,43,255,.85));
  box-shadow: 0 0 28px rgba(138,43,255,.18);
}
.btn.primary:hover{
  box-shadow: 0 0 40px rgba(60,244,255,.18);
}

/* --- layout grid like your screenshot --- */
.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
}

.card{
  padding:18px;
  position:relative;
}
.card h3{
  margin:0 0 12px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size:26px;
}
.line{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(60,244,255,.6), transparent);
  opacity:.85;
  margin:0 0 14px;
}

.col-7{grid-column: span 7}
.col-5{grid-column: span 5}
.col-6{grid-column: span 6}
.col-12{grid-column: span 12}

.paper{
  border-radius: var(--r2);
  padding:16px;
  background:
    radial-gradient(240px 140px at 25% 25%, rgba(60,244,255,.12), transparent 60%),
    radial-gradient(240px 140px at 75% 40%, rgba(138,43,255,.10), transparent 60%),
    rgba(8,10,28,.35);
  border:1px solid rgba(60,244,255,.22);
}

.meta{color:var(--muted); font-size:13px; margin-top:10px}

.poet{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.avatar{
  width:92px; height:92px; border-radius:18px;
  border:1px solid rgba(60,244,255,.35);
  background:
    radial-gradient(circle at 30% 30%, rgba(60,244,255,.45), rgba(138,43,255,.18) 60%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.2));
  box-shadow: 0 0 22px rgba(60,244,255,.12);
}
.poet b{font-size:20px}
.poet small{display:block;color:var(--muted)}

.list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.list li{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(60,244,255,.18);
  background: rgba(8,10,28,.28);
  transition:.18s ease;
}
.list li:hover{
  border-color: rgba(0,255,154,.45);
  box-shadow: 0 0 22px rgba(0,255,154,.12);
  transform: translateY(-1px);
}
.badge-mini{
  padding:6px 10px;
  border-radius: 999px;
  font-size:12px;
  color:#061023;
  background: linear-gradient(90deg, rgba(0,255,154,.95), rgba(60,244,255,.85));
  font-weight:900;
}

/* newsletter */
.news{
  display:flex; gap:10px; flex-wrap:wrap;
}
.input{
  flex:1; min-width:240px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(60,244,255,.22);
  background: rgba(8,10,28,.30);
  color:#fff;
  outline:none;
}
.input:focus{
  border-color: rgba(60,244,255,.60);
  box-shadow: 0 0 0 4px rgba(60,244,255,.12);
}

/* ===== NEON FOOTER ===== */

.footer-wrap{
  position:relative;
  margin-top:70px;
}

.footer-glow{
  position:absolute;
  top:-60px;
  left:50%;
  transform:translateX(-50%);
  width:80%;
  height:120px;
  background:
    radial-gradient(circle,
      rgba(138,43,255,.35),
      rgba(60,244,255,.18),
      transparent 70%);
  filter: blur(45px);
  pointer-events:none;
}

.footer{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:24px;
  padding:26px 28px;
  border-radius:26px;
}

.footer-left h3{
  margin:0;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size:22px;
  letter-spacing:.5px;
}

.footer-left p{
  margin-top:10px;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}

.footer-mid{
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:center;
}

.footer-mid a{
  font-weight:700;
  color:rgba(234,242,255,.95);
  transition:.2s ease;
}

.footer-mid a:hover{
  color:var(--n3);
  text-shadow:0 0 10px rgba(0,255,154,.6);
}

.footer-right{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  justify-content:center;
}

.footer-right span{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.3px;
}

.footer-copy{
  margin-top:18px;
  text-align:center;
  font-size:12px;
  color:rgba(169,183,230,.8);
}

/* responsive footer */
/* ===== HEADER SEARCH ===== */

.nav-wrap{
  align-items:center;
  gap:14px;
}

.search-box{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:16px;
  background: rgba(8,10,28,.35);
  border:1px solid rgba(60,244,255,.25);
  box-shadow: 0 0 0 1px rgba(60,244,255,.08) inset;
  transition:.2s ease;
}

.search-box:hover,
.search-box:focus-within{
  border-color: rgba(60,244,255,.65);
  box-shadow: 
    0 0 0 1px rgba(60,244,255,.18) inset,
    0 0 18px rgba(60,244,255,.25);
}

.search-box input{
  width:180px;
  background:transparent;
  border:0;
  outline:none;
  color:#fff;
  font-size:13px;
}

.search-box input::placeholder{
  color:rgba(169,183,230,.7);
}

.search-box button{
  background:none;
  border:0;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  padding:0 4px;
  opacity:.85;
}

.search-box button:hover{
  color:var(--n3);
  text-shadow:0 0 10px rgba(0,255,154,.6);
}

/* mobilde alta insin */
@media (max-width: 900px){
  .search-box{
    width:100%;
    margin-top:10px;
  }

  .search-box input{
    width:100%;
  }
}

@media (max-width: 900px){
  .footer{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-right{
    align-items:center;
  }
}

.social{display:flex; gap:10px}
.ico{
  width:42px; height:42px; border-radius:18px;
  display:grid; place-items:center;
  border:1px solid rgba(60,244,255,.22);
  background: rgba(8,10,28,.30);
  transition:.18s ease;
}
.ico:hover{
  border-color: rgba(138,43,255,.55);
  box-shadow: 0 0 22px rgba(138,43,255,.14);
  transform: translateY(-1px);
}

/* responsive */
@media (max-width: 980px){
  .col-7,.col-6,.col-5{grid-column: span 12}
  .hero h2{font-size:38px}
  .nav{justify-content:flex-start}
}