html

{scroll-behavior:smooth}
body{margin:0;
background:#111;
color:#fff;font-family:Inter,sans-serif}

nav

{position:fixed;
top:0;
width:100%;
display:flex;
justify-content:center;
gap:40px;
padding:18px;
background:rgba(0,0,0,.45);
backdrop-filter:blur(10px)}

nav a

{color:#fff;
text-decoration:none;
text-transform:uppercase;font-size:.85rem}

.hero

{min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
position:relative;
background:url(images/hero.jpg) center/cover}

.overlay

{position:absolute;
inset:0;
background:rgba(0,0,0,.7)}

.content

{position:relative;
text-align:center;
max-width:850px;
padding:40px}

.logo

{width:240px}h1,h2,h3{font-family:"Space Grotesk",sans-serif}

.button

{display:inline-block;
margin-top:30px;
padding:14px 32px;
border:2px solid #fff;
border-radius:40px;
color:#fff;text-decoration:none}

section

{padding:90px 20px}.container{max-width:1100px;margin:auto}

.grid

{display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:24px}

.card

{background:#1a1a1a;
padding:24px;
border-radius:14px}

.ph

{height:180px;background:#2a2a2a;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
color:#999;margin-bottom:18px}

footer

{text-align:center;
padding:30px;
background:#0a0a0a}