* {
box-sizing:border-box;
}

body {
margin:0;
background:#f5f5ff;
font-family:Arial,Helvetica,sans-serif;
color:#111;
}

header {
display:flex;
justify-content:space-between;
padding:20px;
border-bottom:4px solid #111;
background:white;
}

.brand {
font-size:30px;
font-weight:1000;
}

nav {
display:flex;
gap:10px;
}

nav a {
background:#111;
color:white;
padding:10px;
font-weight:900;
text-decoration:none;
}

main {
text-align:center;
padding:40px 20px;
}

.badge {
display:inline-block;
background:#7d4cff;
color:white;
padding:12px;
font-weight:900;
transform:rotate(-4deg);
}

.hero {
width:min(700px,95vw);
margin:30px auto;
display:block;
border:8px solid #111;
}

h1 {
font-size:clamp(60px,12vw,130px);
margin:10px;
letter-spacing:-5px;
}

p {
font-size:22px;
font-weight:700;
max-width:700px;
margin:20px auto;
}

.ca-box {
display:inline-flex;
padding:12px;
background:white;
border:4px solid #111;
gap:10px;
}

button {
background:#111;
color:white;
padding:10px;
border:0;
font-weight:900;
}

.gallery {
margin-top:70px;
border-top:5px dashed #111;
padding-top:40px;
}

.gallery-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
max-width:1000px;
margin:30px auto;
}

.gallery-grid img {
width:100%;
aspect-ratio:1;
object-fit:cover;
border:5px solid #111;
animation:float 3s ease-in-out infinite;
transition:.3s;
}

.gallery-grid img:hover {
transform:rotate(5deg) scale(1.05);
}

@keyframes float {
50% {
transform:translateY(-10px);
}
}

@media(max-width:700px){
header {
flex-direction:column;
gap:15px;
}
.gallery-grid {
grid-template-columns:repeat(2,1fr);
}
}