:root{
  --bg:#081a3d; --bg-2:#0b2456; --ink:#e8f0ff; --muted:#a2b3d9;
  --brand:#1ee3ff; --accent:#ffb300; --card:#0d2766;
  --shadow:0 10px 30px rgba(0,0,0,.35); --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 75% -10%, #10306e00 40%, #0a1f4a44 41%, #081a3d 70%),
    linear-gradient(180deg, #081a3deb, #081a3dd5 60%, #081a3dc0),
    url("images/background.png");
  background-size:1200px 700px, cover, cover;
  background-position:75% -10%, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-attachment:scroll, scroll, fixed;
  color:var(--ink); font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

header{position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.2) blur(10px);
  background:linear-gradient(180deg, #081a3df2, #081a3dd0 60%, transparent);
  border-bottom:1px solid #0f2d72;}
.nav{max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:24px; padding:14px 18px}
.logo{display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:.5px}
.logo-banner{display:block; height:48px; width:auto; max-width:240px; object-fit:contain; filter:drop-shadow(0 12px 28px rgba(0,0,0,.45))}
.spacer{flex:1}

.hero{max-width:1100px; margin:28px auto 0; padding:38px 18px 24px; display:grid; gap:18px; text-align:center}
.title{font-size:clamp(28px, 3.4vw + 14px, 52px); line-height:1.15; font-weight:800; letter-spacing:.2px}
.subtitle{color:var(--muted)}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; justify-content:center}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; font-weight:700; border:1px solid #18408e; background:#0b2552}
.btn.primary{background:linear-gradient(180deg, #0bbce2, #1695d6 60%, #0f6fb8); color:#01233b; border:none}
.btn:hover{filter:brightness(1.05)}

.section{max-width:1100px; margin:8px auto; padding:24px 18px; text-align:center}
.section h2{font-size:22px; margin:0 0 14px}
.subhead{display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 12px; color:var(--muted)}

.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 320px)); justify-content:center; align-items:stretch; gap:16px}
.card{background:linear-gradient(180deg, #0c2a68, #082152); border:1px solid #10306e; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; width:100%; max-width:320px; text-align:center; display:flex; flex-direction:column; height:100%}
.card .thumb{aspect-ratio:16/9; background:#06173a; position:relative; display:flex; align-items:flex-end; padding:12px; text-decoration:none; background-size:cover; background-position:center; background-repeat:no-repeat; color:var(--ink); font-weight:700; letter-spacing:.3px; text-shadow:0 6px 14px rgba(0,0,0,.6); line-height:1.2}
.card .thumb::after{content:attr(data-title); display:block; background:rgba(8,26,61,.78); padding:8px 12px; border-radius:12px; font-weight:700; letter-spacing:.3px; color:var(--ink); box-shadow:0 8px 18px rgba(0,0,0,.35); max-width:100%; z-index:1;}
.card .thumb:hover::after{background:rgba(17,92,150,.85);}
.card .thumb::before{content:""; position:absolute; inset:auto 0 0 0; height:3px; background:linear-gradient(90deg, transparent, var(--brand), transparent); pointer-events:none; z-index:0;}
.card .body{padding:14px; display:flex; flex-direction:column; gap:10px; flex:1}
.tag{display:inline-block; font-size:12px; color:#001b2a; background:var(--brand); border-radius:999px; padding:2px 8px; font-weight:800}
.muted{color:var(--muted)}

.post-list{display:grid; gap:12px; justify-items:center}
.post{background:linear-gradient(180deg, #0b2552, #081f47); border:1px solid #0f2d72; padding:14px; border-radius:16px; text-align:center; max-width:740px; width:100%}
.post h3{margin:0 0 6px}
.post .meta{font:12px/1.4 "JetBrains Mono", monospace; color:var(--muted)}
.post .tags{display:flex; gap:8px; margin-top:6px; justify-content:center}

footer{border-top:1px solid #0f2d72; color:var(--muted); padding:28px 18px; margin-top:32px; text-align:center}
.grid-2{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:840px){ .grid-2{grid-template-columns:1fr} }

.toast{position:fixed; right:16px; bottom:16px; background:#0b2552; border:1px solid #14418f; padding:10px 12px; border-radius:12px; box-shadow:var(--shadow); display:none}

@media(max-width:520px){
  .logo-banner{height:42px; max-width:70vw}
}