:root {
 --primary:#0f172a;
 --accent:#2563eb;
 --bg:#ffffff;
 --muted:#f1f5f9;
 --text:#1e293b;
}

* {box-sizing:border-box;}

body {margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);}

.sticky {position:sticky;top:0;z-index:1000;background:rgba(15,23,42,.95);}

nav {display:flex;justify-content:center;gap:30px;padding:14px 0;}
nav a {color:#fff;text-decoration:none;font-weight:500;}
nav a:hover {color:var(--accent);}

header {
background:
linear-gradient(rgba(15,23,42,.6),rgba(15,23,42,.6)),
url('../images/sq.jpg') center/cover no-repeat;
padding:64px 20px 72px;
text-align:center;
color:#fff;
}

.hero-title {font-size:42px;opacity:0;animation:heroIn 1s ease forwards;}
.hero-tagline {font-size:18px;opacity:0;animation:heroIn 1.2s ease forwards;animation-delay:.25s;}

@keyframes heroIn {
from {opacity:0;transform:translateY(28px);}
to {opacity:1;transform:none;}
}

.container {max-width:1120px;margin:auto;padding:56px 20px;}
.grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:34px;align-items:center;}

.fade {opacity:0;transform:translateY(28px);transition:all .8s ease;}
.fade.show {opacity:1;transform:none;}

.scale {opacity:0;transform:scale(.95);transition:all .9s ease;}
.scale.show {opacity:1;transform:scale(1);}

.card {background:var(--muted);padding:26px;border-radius:16px;transition:transform .3s ease, box-shadow .3s ease;}
.card:hover {transform:translateY(-6px);box-shadow:0 14px 32px rgba(0,0,0,.12);}

img {width:100%;border-radius:14px;display:block;}

footer {background:var(--primary);color:#cbd5f5;text-align:center;padding:28px 20px;}