* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; line-height:1.6; color:#333; background:#f8f9fa; transition:background 0.3s, color 0.3s; }
.dark-mode { background:#0f172a; color:#e2e8f0; }
.dark-mode .header, .dark-mode .footer { background:#1e293b; }
.dark-mode .card { background:#1e293b; border-color:#334155; }

.container { max-width:1280px; margin:auto; padding:0 20px; }
.grid { display:grid; gap:30px; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.grid-2 { grid-template-columns:1fr 1fr; align-items:center; }

.header { background:#0f172a; color:white; padding:20px 0; position:sticky; top:0; z-index:100; }
.header .container { display:flex; justify-content:space-between; align-items:center; }
.logo { font-size:28px; font-weight:700; }
.logo span { color:#f97316; }
.nav ul { display:flex; gap:40px; list-style:none; }
.nav a { color:white; text-decoration:none; font-weight:600; }
.nav a:hover, .nav a.active { color:#f97316; }
#theme-toggle { background:none; border:none; font-size:24px; cursor:pointer; color:white; }
.mobile-menu-toggle { display:none; font-size:30px; cursor:pointer; color:white; }

.hero { height:90vh; min-height:600px; background:url('../images/hero.jpg') center/cover no-repeat; position:relative; display:flex; align-items:center; }
.hero-overlay { position:absolute; inset:0; background:rgba(15,23,42,0.6); }
.hero-content { position:relative; color:white; text-align:center; max-width:800px; }
.hero-content h1 { font-size:56px; margin-bottom:20px; }
.hero-content h1 span { color:#f97316; }
.hero-content p { font-size:20px; margin-bottom:40px; }
.cta-button { background:#f97316; color:white; padding:16px 32px; text-decoration:none; border-radius:8px; font-weight:600; font-size:18px; }
.cta-button:hover { background:#ea580c; }

.section { padding:100px 0; }
.features .card { background:white; padding:40px; text-align:center; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.05); border:1px solid #e2e8f0; }
.features h3 { margin-bottom:15px; color:#f97316; }

.about-preview { background:#0f172a; color:white; }
.about-preview .link { color:#f97316; text-decoration:none; font-weight:600; }

.image-placeholder img { width:100%; border-radius:12px; }

.footer { background:#0f172a; color:#94a3b8; text-align:center; padding:40px 0; }

@media (max-width:968px) {
    .grid-2 { grid-template-columns:1fr; }
    .hero-content h1 { font-size:42px; }
}
@media (max-width:768px) {
    .nav ul { position:fixed; top:0; right:-100%; bottom:0; width:300px; background:#1e293b; flex-direction:column; padding:100px 40px; transition:0.3s; }
    .nav ul.active { right:0; }
    .mobile-menu-toggle { display:block; }
}