/* ===============================
   RESET + BASE
   =============================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Segoe UI',system-ui,Arial,sans-serif;
}

body{
  background:#f1f5f9;
  color:#0f172a;
  line-height:1.7;
}

/* ===============================
   CONTAINER
   =============================== */
.container{
  max-width:1150px;
  margin:auto;
  padding:0 20px;
}

/* ===============================
   HEADER – 2026 3D ANIMATED
   =============================== */
.header{
  position:relative;
  padding:110px 20px;
  text-align:center;
  overflow:hidden;
  background:linear-gradient(270deg,#00c853,#00b0ff,#22d3ee,#00c853);
  background-size:500% 500%;
  animation:gradientMove 10s ease infinite;
}

.header::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(14px);
}

.header .container{
  position:relative;
  z-index:2;
}

.header h1{
  font-size:50px;
  font-weight:900;
  letter-spacing:3px;
  color:#fff;
  text-transform:uppercase;
  text-shadow:
    0 2px 0 #0284c7,
    0 6px 0 #0369a1,
    0 12px 0 #075985,
    0 22px 45px rgba(0,0,0,.7);
  animation:float3d 3.5s ease-in-out infinite;
}

.tagline{
  margin-top:14px;
  font-size:18px;
  color:#e0f2fe;
  max-width:750px;
  margin-left:auto;
  margin-right:auto;
}

/* NAV */
.nav{
  margin-top:40px;
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

.nav a{
  text-decoration:none;
  color:#fff;
  padding:13px 28px;
  border-radius:40px;
  background:rgba(255,255,255,.22);
  font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:.3s;
}

.nav a:hover{
  background:#fff;
  color:#020617;
  transform:translateY(-4px) scale(1.05);
}

/* ===============================
   HERO
   =============================== */
.hero{
  background:#020617;
  color:#e5e7eb;
  padding:90px 20px;
  text-align:center;
}

.hero h2{
  font-size:34px;
  color:#22d3ee;
  margin-bottom:20px;
}

.hero p{
  max-width:800px;
  margin:auto;
  font-size:18px;
}

/* ===============================
   POSTS GRID
   =============================== */
.posts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
  padding:80px 0;
}

.post-card{
  background:#fff;
  padding:28px;
  border-radius:22px;
  box-shadow:0 20px 45px rgba(0,0,0,.12);
  transition:.35s;
}

.post-card:hover{
  transform:translateY(-10px);
}

.post-card h2 a{
  color:#00c853;
  text-decoration:none;
}

.read-more{
  display:inline-block;
  margin-top:12px;
  color:#0284c7;
  font-weight:600;
}

/* ===============================
   CONTENT PAGES
   =============================== */
.page{
  padding:80px 0;
}

.page h2{
  font-size:34px;
  margin-bottom:15px;
  color:#00b0ff;
}

.page p{
  margin-bottom:18px;
}

/* ===============================
   FOOTER
   =============================== */
.site-footer{
  background:#020617;
  color:#9ca3af;
  padding:70px 20px 20px;
}

.footer-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
  max-width:1150px;
  margin:auto;
}

.footer-box h3{
  color:#22d3ee;
  margin-bottom:10px;
}

.footer-box a{
  display:block;
  color:#cbd5f5;
  text-decoration:none;
  margin:6px 0;
}

.footer-bottom{
  text-align:center;
  margin-top:30px;
  font-size:14px;
}

/* ===============================
   ANIMATIONS
   =============================== */
@keyframes gradientMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@keyframes float3d{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}

/* ===============================
   MOBILE
   =============================== */
@media(max-width:600px){
  .header h1{font-size:32px;}
  .tagline{font-size:15px;}
  .hero h2{font-size:26px;}
}