:root{
  --blue:#1E88E5;
  --green:#43A047;
  --light-bg:#F9FAFB;
  --dark:#121212;
  --light:#ffffff;
}

/* Base */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:var(--light-bg);
  color:#1A1A1A;
}

/* Header */
header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.5rem;
  background:linear-gradient(90deg, var(--blue), var(--green));
  color:#fff;
}
header nav a{ color:#fff; text-decoration:none; margin-left:18px; font-weight:600; }
header nav a:hover{ text-decoration:underline; }
.site-logo{ height:52px; width:auto; }
#dark-mode-toggle{
  border:none; border-radius:50%; width:36px; height:36px; font-size:18px;
  cursor:pointer; background:#00aa77; color:#fff; display:flex; align-items:center; justify-content:center;
  margin-left:15px; transition:background .3s ease;
}
#dark-mode-toggle:hover{ background:#00885f; }

/* Hero */
.hero{ text-align:center; padding:5rem 2rem; background:#E3F2FD; }
.hero h2{ font-size:2.6rem; color:var(--blue); margin:0 0 .75rem; }
.hero p{ max-width:640px; margin:0 auto 1.5rem; }
.button.btn{
  display:inline-block; padding:12px 22px; background:var(--green); color:#fff; text-decoration:none; border-radius:8px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.button.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.12); }

/* Services */
.services{ padding:4rem 2rem; max-width:1200px; margin:0 auto; text-align:center; }
.services h3{ color:var(--blue); font-size:2rem; margin-bottom:1.5rem; }
.cards{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); }
.card{ background:#fff; padding:1.5rem; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08); transition:transform .25s ease; }
.card:hover{ transform:translateY(-6px); }
.card h4{ margin:.5rem 0 0; color:var(--green); }

/* About / Contact */
.about, .contact{ padding:4rem 2rem; text-align:center; }
.contact-form{ display:flex; flex-direction:column; gap:.6rem; max-width:520px; margin:0 auto; }
.contact-form input, .contact-form textarea{
  padding:10px; border:1px solid #ccc; border-radius:8px; font-size:1rem; background:#fff;
}
.contact-form button{
  margin-top:.5rem; padding:10px 16px; border:none; border-radius:8px; background:#00cc88; color:#fff; font-weight:600; cursor:pointer;
}

/* Spinner inside button */
.spinner{ display:none; border:3px solid #fff; border-top:3px solid transparent; border-radius:50%; width:18px; height:18px; margin-left:10px; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
button.loading .btn-text{ display:none; }
button.loading .spinner{ display:inline-block; }
button.success{ background:#28a745 !important; }
button.error{ background:#dc3545 !important; }

/* Footer */
footer{ text-align:center; padding:1.5rem; background:var(--blue); color:#fff; }

/* Dark mode */
body, header, section, footer, .btn{ transition:background .3s ease, color .3s ease; }
body.dark-mode{ background:var(--dark); color:#f1f1f1; }
body.dark-mode header, body.dark-mode section, body.dark-mode footer{ background:#1e1e1e; color:#f1f1f1; }
body.dark-mode .card{ background:#1e1e1e; color:#f1f1f1; border:1px solid #333; }
body.dark-mode img{ filter:brightness(.85); }

/* Smooth scroll & offset */
html{ scroll-behavior:smooth; scroll-padding-top:80px; }

/* Back-to-top */
#back-to-top{
  position:fixed; bottom:30px; right:30px; width:40px; height:40px; border:none; border-radius:50%;
  background:#00aa77; color:#fff; font-size:20px; cursor:pointer; display:none; align-items:center; justify-content:center; z-index:999;
  transition:background .3s ease;
}
#back-to-top:hover{ background:#00885f; }

/* Fade-in animation */
.fade-in{ opacity:0; transform:translateY(20px); transition:opacity .6s ease-out, transform .6s ease-out; }
.fade-in.visible{ opacity:1; transform:translateY(0); }

/* Minimal preloader */
#preloader{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:#e8f9f3; z-index:10000; transition:opacity .5s ease, visibility .5s ease;
}
#preloader.hide{ opacity:0; visibility:hidden; }
.preloader-logo{ width:160px; max-width:40vw; opacity:0; transform:scale(.96); animation:preloaderFadeIn .6s ease forwards; }
@keyframes preloaderFadeIn{ from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);} }

@media (max-width:480px){ .site-logo{height:44px;} }