:root {
  --blue: #0077cc;
  --lime: #c4e538;
  --dark-bg: #121212;
  --dark-surface: #1e1e1e;
  --dark-text: #f1f1f1;
  --light-text: #333333;
}
body { margin:0; font-family: Arial, sans-serif; transition: background-color .3s, color .3s; }
header { display:flex; justify-content:space-between; align-items:center; padding:20px 50px; border-bottom:1px solid #ddd; }
nav a { margin:0 12px; text-decoration:none; font-weight:600; }
.hero img { width:100%; height:auto; display:block; }
.hero .cta { margin:20px auto 40px; padding:14px 28px; background:var(--lime); border:none; cursor:pointer; font-weight:700; }
section { padding:40px 20px; max-width:1100px; margin:0 auto; }
section h2 { color: var(--blue); margin-bottom:16px; }
.features { display:flex; gap:24px; flex-wrap:wrap; }
.feature { flex:1 1 280px; background:#f7f9fb; border:1px solid #e5e9ef; padding:18px; border-radius:10px; }
footer { text-align:center; padding:18px; background:#f1f1f1; }
body.light { background:#ffffff; color:var(--light-text); }
body.light nav a { color:var(--light-text); }
body.dark { background:var(--dark-bg); color:var(--dark-text); }
body.dark header { background:var(--dark-surface); border-color:#333; }
body.dark nav a { color:var(--dark-text); }
body.dark section h2 { color:#4db8ff; }
body.dark .feature { background:#161616; border-color:#2a2a2a; }
body.dark footer { background:#1e1e1e; }
.theme-toggle { position:fixed; top:16px; right:16px; padding:10px 16px; background:var(--blue); color:white; border:none; border-radius:6px; cursor:pointer; }
.logo { height:50px; }