:root {
  --primary: #003399;
  --secondary: #FFD700;
  --bg-light: #F7F7F7;
  --bg-dark: #1a1a1a;
  --text-light: #fff;
  --text-dark: #333;
}
body { margin:0; font-family:'Open Sans', sans-serif; color:var(--text-dark); scroll-behavior:smooth; transition:background 0.5s, color 0.5s; }
header { background:var(--primary); padding:20px 0; position:sticky; top:0; z-index:999; }
nav ul { list-style:none; display:flex; justify-content:center; margin:0; padding:0; }
nav ul li { margin:0 15px; }
nav ul li a { color:#fff; text-decoration:none; font-weight:600; }
.hero { background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url('../images/hero.jpg') center/cover; color:#fff; padding:100px 20px; text-align:center; }
.hero h1 { font-family:'Poppins', sans-serif; font-size:2.5em; animation:fadeInUp 1s ease-out; }
.hero p { font-size:1.2em; margin:20px 0; animation:fadeIn 1.5s ease-out; }
.btn { background:var(--secondary); color:var(--primary); padding:12px 25px; border:none; border-radius:5px; text-decoration:none; font-weight:bold; display:inline-block; transition:all 0.3s ease; }
.btn:hover { background:#e6c200; transform:translateY(-2px); }
section { padding:60px 20px; max-width:1100px; margin:auto; opacity:0; transform:translateY(20px); transition:all 0.6s ease-out; }
section.visible { opacity:1; transform:translateY(0); }
section h2 { font-family:'Poppins', sans-serif; color:var(--primary); margin-bottom:20px; }
.services, .cases, .blog-posts { display:flex; flex-wrap:wrap; gap:20px; }
.card { background:#fff; padding:20px; border-radius:8px; flex:1 1 calc(33% - 20px); box-shadow:0 2px 8px rgba(0,0,0,0.05); transition:transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.1); }
.alt-bg { background:var(--bg-light); }
footer { background:var(--primary); color:#fff; text-align:center; padding:20px; }
#backToTop { position:fixed; bottom:30px; right:30px; background:var(--secondary); color:var(--primary); padding:10px 15px; border-radius:50%; font-size:18px; cursor:pointer; display:none; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
body.dark { background:var(--bg-dark); color:var(--text-light); }
body.dark .card { background:#2a2a2a; color:#fff; }
body.dark section h2 { color:var(--secondary); }
#darkToggle { position:fixed; top:20px; right:20px; background:#fff; border:none; border-radius:20px; padding:5px 15px; cursor:pointer; font-weight:bold; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
@keyframes fadeInUp { 0% {opacity:0; transform:translateY(20px);} 100% {opacity:1; transform:translateY(0);} }
@keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} }
@media (max-width: 768px) { .services, .cases, .blog-posts { flex-direction:column; } }