* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body {
color: white;

/* 🌄 Background */
background-image: url("./background.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}

/* 🌫 Overlay für Lesbarkeit */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.35);
z-index: -1;
}

/* ===================== NAVBAR ===================== */

.navbar {
position: sticky;
top: 0;
z-index: 100;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(12px);
padding: 18px 0;
}

.container {
max-width: 1400px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}

/* 🌈 LOGO (Jivas-SMP) */
.logo {
font-size: 34px;
font-weight: 900;

background: linear-gradient(90deg, #f97316, #3b82f6, #22c55e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

letter-spacing: 1px;
transition: 0.2s;
cursor: pointer;
}

.logo:hover {
transform: scale(1.05);
}

/* NAV LINKS */
.nav-links a {
color: white;
text-decoration: none;
margin: 0 14px;
font-size: 18px;
opacity: 0.75;
transition: 0.2s;
}

.nav-links a:hover {
opacity: 1;
color: #f97316;
}

/* ===================== HERO ===================== */

.hero {
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.hero-card {
background: rgba(255,255,255,0.10);
padding: 60px;
border-radius: 25px;
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.15);
max-width: 850px;
}

.hero-card h1 {
font-size: 64px;
margin-bottom: 10px;
}

.hero-card p {
font-size: 22px;
opacity: 0.9;
margin-bottom: 20px;
}

/* BUTTONS */
.btn-row {
margin-top: 20px;
}

.btn {
padding: 14px 22px;
border-radius: 12px;
font-size: 18px;
text-decoration: none;
display: inline-block;
margin: 10px;
transition: 0.2s;
}

.primary {
background: #f97316;
color: white;
}

.primary:hover {
background: #ff8a3d;
transform: translateY(-2px);
}

.ghost {
background: rgba(255,255,255,0.15);
color: white;
}

.ghost:hover {
background: rgba(255,255,255,0.25);
transform: translateY(-2px);
}

/* ===================== SECTIONS ===================== */

.section {
padding: 80px 20px;
}

.section-title {
text-align: center;
font-size: 42px;
margin-bottom: 40px;
}

/* GRID */
.grid {
max-width: 1300px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}

/* CARDS */
.card {
background: rgba(255,255,255,0.10);
padding: 30px;
border-radius: 18px;
backdrop-filter: blur(15px);
border: 1px solid rgba(255,255,255,0.1);
transition: 0.25s;
}

.card:hover {
transform: translateY(-6px);
background: rgba(255,255,255,0.14);
}

.card h3 {
margin-bottom: 10px;
font-size: 22px;
}

.card p {
opacity: 0.85;
}

/* ===================== DOWNLOAD BOX ===================== */

.download-card {
max-width: 700px;
margin: auto;
background: rgba(255,255,255,0.12);
padding: 50px;
border-radius: 25px;
text-align: center;
backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.15);
}

.download-card h2 {
font-size: 34px;
margin-bottom: 10px;
}

/* ===================== FOOTER ===================== */

.footer {
text-align: center;
padding: 40px;
opacity: 0.7;
font-size: 14px;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 768px) {

.hero-card {
padding: 30px;
}

.hero-card h1 {
font-size: 40px;
}

.section-title {
font-size: 30px;
}

.nav-links {
display: none;
}
}