:root {
  --bg: #0d0f13; --fg: #f0f0f0; --accent: #39ff14; --card: #1e1e1e;
}
[data-theme="light"] {
  --bg: #ffffff; --fg: #111111; --accent: #0055ff; --card: #f5f5f5;
}
*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:'Segoe UI',sans-serif; min-height:100vh; display:flex; flex-direction:column; }
.navbar { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background:var(--card); position:sticky; top:0; z-index:100; }
.nav-links { list-style:none; display:flex; gap:1.5rem; margin:0; padding:0; }
.nav-links a { color:var(--fg); text-decoration:none; font-weight:500; transition:color .3s; }
.nav-links a.active:hover, .nav-links a.active { color:var(--accent); }
.theme-toggle { background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--fg); }
.hero { text-align:center; padding:5rem 1rem; background:linear-gradient(145deg,#141e30,#243b55); }
.hero h1 { font-size:3rem; color:var(--accent); margin:0; animation:slideDown 1s ease-out; }
.hero p { margin:1rem 0; animation:fadeIn .8s ease-out .5s both; }
.btn { padding:.75rem 1.5rem; background:var(--accent); color:#000; border-radius:5px; text-decoration:none; font-weight:bold; display:inline-block; transition:transform .2s; }
.btn:hover { transform:scale(1.05); }
.features { padding:3rem 2rem; flex:1; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; }
.card { background:var(--card); border-radius:8px; padding:1.5rem; box-shadow:0 4px 8px rgba(0,0,0,0.3); opacity:0; transform:translateY(20px); animation:fadeInUp .6s ease-out forwards; animation-delay:var(--delay); }
.content { padding:2rem 1rem; flex:1; max-width:800px; margin:auto; }
.footer { background:var(--card); padding:1rem; text-align:center; }
.gallery-slider { display:flex; align-items:center; gap:1rem; justify-content:center; }
.gallery-slider img { max-width:80%; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,0.3); }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes slideDown { from{opacity:0;transform:translateY(-20px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeInUp { to{opacity:1;transform:translateY(0);} }