:root{--bg:#0b0d12;--fg:#eef2f7;--mut:#9aa4b2;--acc:#47a4c5;--card:#111620;--border:#1e2633;--grad1:#47A4C5;--grad2:#7BC7E0}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto}
.container{max-width:1200px;margin:0 auto;padding:24px}
header{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px}
.brand img{height:32px; display:block}
.brand span{color:var(--acc)}
nav a{color:var(--fg);text-decoration:none;margin-left:18px;opacity:.85}
nav a:hover{opacity:1}
/* Hero with animated gradient */
.hero{position:relative;overflow:hidden;margin-top:16px;padding:64px 24px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(120deg, rgba(71,164,197,.10), rgba(23,27,38,.10));background-size:200% 200%;animation:gradientShift 12s ease-in-out infinite}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side, rgba(71,164,197,.25), rgba(71,164,197,0));filter:blur(10px);transform:translate3d(0,0,0)}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* Gradient text for headings */
.gradient-text{background:linear-gradient(90deg,var(--grad1),var(--grad2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1{margin:0 0 8px;font-size:40px}
.section h2{font-size:24px;margin:0 0 12px}
/* Apply gradient to main headings */
.hero h1,.section h2{background:linear-gradient(90deg,var(--grad1),var(--grad2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mut);max-width:800px}
.button{display:inline-block;margin-top:16px;background:var(--acc);color:#001725;padding:10px 16px;border-radius:8px;text-decoration:none}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(3,1fr);margin-top:28px}
/* Subtle card animation */
.card{background:var(--card);border:1px solid var(--border);padding:16px;border-radius:10px;animation:fadeUp .7s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card h3{margin:0 0 8px}
.card img{width:100%;display:block;transition:transform .35s ease, filter .35s ease}
.card:hover img{transform:translateY(-2px) scale(1.02);filter:brightness(1.05)}
.section{margin-top:44px}
.footer{margin:56px 0 8px;color:var(--mut)}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards{grid-template-columns:1fr} .hero h1{font-size:30px}}