/* ================================= */
/* Minevera Labs Layout System       */
/* ================================= */


/* ---------- Reset ---------- */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}



/* ---------- Body ---------- */

body {

font-family: system-ui, -apple-system, BlinkMacSystemFont, 
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 
"Helvetica Neue", sans-serif;

line-height: 1.6;

}



/* ---------- Header ---------- */

header {

display: flex;
flex-direction: column;
align-items: center;

padding: 30px 20px;

gap: 10px;

}



/* ---------- Logo ---------- */

.logo {

width: 70px;
height: auto;

}



/* ---------- Navigation ---------- */

nav {

display: flex;
flex-wrap: wrap;
justify-content: center;

gap: 14px;

margin-top: 10px;

}



/* ---------- Main Container ---------- */

main {

max-width: 1200px;

margin: auto;

padding: 40px 20px;

display: flex;
flex-direction: column;

gap: 60px;

}



/* ---------- Sections ---------- */

section {

display: flex;
flex-direction: column;

gap: 16px;

}



/* ---------- Grid Layout ---------- */

.grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 25px;

}



/* ---------- Cards ---------- */

.card {

padding: 25px;

border-radius: 10px;

display: flex;
flex-direction: column;

gap: 10px;

transition: transform 0.25s ease;

}



/* ---------- Card Hover ---------- */

.card:hover {

transform: translateY(-4px);

}



/* ---------- Buttons ---------- */

.download-button,
button {

display: inline-block;

padding: 10px 18px;

border-radius: 6px;

font-size: 14px;

cursor: pointer;

text-decoration: none;

}



/* ---------- Footer ---------- */

footer {

max-width: 1200px;

margin: 60px auto 20px auto;

padding: 20px;

text-align: center;

font-size: 14px;

}



/* ---------- Responsive ---------- */

@media (max-width: 700px) {

nav {

flex-direction: column;
align-items: center;

}

main {

padding: 30px 15px;

}

.logo {

width: 55px;

}

}