/* Global variables */
:root{
  --navy: #0C1C4D;
  --red: #E22727;
  --black: #000000;
  --white: #ffffff;
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --radius: 10px;
  --container: 1100px;
}

/* Dark theme variables (applied when body.dark) */
body.dark{
  --bg: var(--navy);
  --text: #f3f4f6;
  --muted: #cbd5e1;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.container{max-width:var(--container); margin:0 auto; padding:0 20px;}
a{color:inherit;text-decoration:none}

/* Header */
.site-header{position:sticky;top:0;backdrop-filter: blur(6px);background:linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.6));border-bottom:1px solid rgba(15,23,42,0.04);z-index:50;}
body.dark .site-header{background:linear-gradient(to bottom, rgba(12,28,77,0.9), rgba(12,28,77,0.85));border-bottom:1px solid rgba(255,255,255,0.06);}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:48px;width:auto;border-radius:6px}
.brand-name{font-weight:600;color:var(--navy)}
body.dark .brand-name{color:var(--white)}

/* Nav */
.nav{display:flex;gap:12px;align-items:center}
.nav-link{padding:8px 12px;border-radius:8px;color:var(--muted);font-weight:600}
.nav-link:hover{background:rgba(0,0,0,0.04);color:var(--text)}
body.dark .nav-link:hover{background:rgba(255,255,255,0.04)}

/* Theme toggle */
#theme-toggle{border:0;padding:8px 10px;border-radius:8px;cursor:pointer;background:transparent;font-weight:700}
#theme-toggle:hover{transform:translateY(-1px)}

/* Mobile menu */
.mobile-menu{display:none;background:transparent;border:0;font-size:22px;cursor:pointer}

/* Hero */
.hero{padding:72px 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 12px;color:var(--navy)}
body.dark .hero h1{color:var(--white)}
.hero p{color:var(--muted);margin:0 0 20px;max-width:54ch}
.hero-image img{max-width:360px;width:100%}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;border:2px solid transparent;cursor:pointer}
.btn.primary{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(12,28,77,0.12)}
body.dark .btn.primary{background:var(--red);border-color:var(--red)}
.btn.ghost{background:transparent;border:2px solid rgba(12,28,77,0.08);color:var(--navy)}

/* Sections */
.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg, rgba(246,247,250,0.6), rgba(246,247,250,0.6));}
body.dark .section.alt{background:transparent}

/* Services grid */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:20px}
.service-card{background:var(--white);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(15,23,42,0.04);border:1px solid rgba(15,23,42,0.03)}
body.dark .service-card{background:rgba(255,255,255,0.03);box-shadow:none;border:1px solid rgba(255,255,255,0.04)}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px}
.testimonial{background:transparent;padding:18px;border-left:4px solid var(--navy);font-style:italic;color:var(--muted);border-radius:6px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:12px;background:var(--white);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(15,23,42,0.04)}
body.dark .contact-form{background:rgba(255,255,255,0.03);box-shadow:none;border:1px solid rgba(255,255,255,0.04)}
.contact-form input,.contact-form textarea{padding:12px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);font-size:15px}
body.dark .contact-form input, body.dark .contact-form textarea{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}

/* Footer */
.site-footer{padding:18px 0;border-top:1px solid rgba(15,23,42,0.04);text-align:center;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero-image{display:none}
  .services-grid{grid-template-columns:1fr}
  .testimonials-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .nav{display:none}
  .mobile-menu{display:block}
}