body{margin:0;font-family:'Segoe UI',Arial,sans-serif;background:#0d1b2a;color:#e0e1dd;line-height:1.6;scroll-behavior:smooth}
header{background:#1b263b;padding:18px 36px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px}
.logo img{width:36px;height:36px}
.logo h1{font-size:1.2rem;margin:0}
nav a{color:#e0e1dd;margin:0 12px;text-decoration:none;font-weight:500;transition:color .3s}
nav a:hover{color:#2d5df7}
.hero{padding:96px 20px;text-align:center;background:linear-gradient(180deg,#1b263b,#0d1b2a)}
.hero h2{margin:0;font-size:2rem;color:#fff;opacity:0;transform:translateY(12px)}
.hero p{max-width:680px;margin:16px auto 24px;color:#cdd6f4;opacity:0;transform:translateY(12px)}
.btn{display:inline-block;background:#2d5df7;color:#0d1b2a;padding:12px 22px;border-radius:6px;text-decoration:none;font-weight:700;transition:filter .3s,transform .3s}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.accent-line{width:240px;height:6px;background:#2d5df7;margin:12px auto 0;border-radius:3px;opacity:0;transform:scaleX(.6)}
section{padding:56px 20px;max-width:1040px;margin:0 auto}
section h2{text-align:center;color:#2d5df7;margin:0 0 24px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:#1b263b;border-radius:10px;padding:18px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.card img{width:100%;max-width:520px;border-radius:8px;display:block;margin:0 auto 10px;transition:transform .9s ease,filter .9s ease;filter:brightness(.85)}
.card img:hover{transform:scale(1.02);filter:brightness(1)}
footer{background:#1b263b;color:#cdd6f4;text-align:center;padding:18px;font-size:.9rem;margin-top:32px}
.reveal{opacity:0;transform:translateY(14px);transition:opacity 900ms ease,transform 900ms ease}
.reveal.show{opacity:1;transform:none}
.banner img{width:100%;height:auto;border-radius:8px;display:block;margin:0 auto 16px}
@media(max-width:820px){.grid{grid-template-columns:1fr}header{justify-content:center;gap:10px}}