:root{
  --bg: #0f1724;
  --bg-alt: #051025; /* dark gradient end - will be overridden in light theme */
  --panel: rgba(255,255,255,0.03);
  --text: #e6eef8;
  --muted: #9aa9bf;
  --accent-start: #7c3aed; /* purple */
  --accent-mid: #2563eb;   /* blue */
  --accent-end: #00f0a1;   /* neon green-ish */
  --glass: rgba(255,255,255,0.03);
  --radius: 14px;
  --gap: 22px;
  --max-width: 1100px;
  --card-padding: 20px;
  --shadow: 0 6px 24px rgba(2,6,23,0.6);
  --transition: 300ms cubic-bezier(.2,.9,.2,1);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Light theme variables (overrides) */
/* NOTE: we set --bg-alt to a light color so the gradient becomes uniform in light mode */
:root[data-theme="light"]{
  --bg: #ffffff;
  --bg-alt: #f3f4f6;
  --panel: rgba(2,6,23,0.03);
  --text: #071022;
  --muted: #475569;
  --glass: rgba(2,6,23,0.04);
  --shadow: 0 10px 30px rgba(10,14,22,0.06);
}

/* Base reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100%;
  /* use both --bg and --bg-alt so the light theme is uniform (both vars set in light theme) */
  background: linear-gradient(120deg, var(--bg), var(--bg-alt) 60%);
  background-attachment: fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
  transition: background var(--transition), color var(--transition);
}

/* Utility */
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.02);
  transition: background var(--transition), border-color var(--transition);
}
/* header adjustments in light mode so it's not translucent white over white */
:root[data-theme="light"] .site-header{
  background: rgba(255,255,255,0.95);
  border-bottom-color: rgba(10,14,22,0.06);
}

/* Header inner */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:14px 20px;
}

/* Logo */
.logo{
  width:56px;
  height:56px;
  border-radius:12px;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image: url('../assets/logo.png'); /* fixed to your png */
  pointer-events:none;
  flex:0 0 auto;
  box-shadow: var(--shadow);
  transition: transform var(--transition);
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

/* Nav and links */
.nav{display:flex;align-items:center;gap:12px}
.nav-menu{
  display:flex;
  gap:18px;
  list-style:none;
  padding:0;
  margin:0;
  align-items:center;
}
.nav-link{
  color:var(--text);
  text-decoration:none;
  font-weight:500;
  padding:8px 10px;
  border-radius:10px;
  transition: all var(--transition);
  position:relative;
  overflow:visible;
  --underline-height:3px;
}
/* sliding underline effect */
.nav-link::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:6px;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  width:70%;
  height:var(--underline-height);
  border-radius:8px;
  background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
  transition: transform 260ms cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
  opacity:0.98;
}
.nav-link:hover{
  transform:translateY(-3px);
}
.nav-link:hover::after{
  transform:translateX(-50%) scaleX(1);
}

/* CTA button in nav */
.cta{
  background: linear-gradient(90deg,var(--accent-start),var(--accent-mid));
  color:white;
  padding:8px 12px;
  border-radius:10px;
  box-shadow: 0 6px 22px rgba(37,99,235,0.12);
}
.cta:hover{filter:brightness(1.03); transform:translateY(-3px)}

/* small screens nav toggle */
.nav-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:18px}

/* Theme toggle: make icon visible and contained */
.theme-toggle{
  background: rgba(255,255,255,0.03);
  border:0;
  color:var(--text);
  font-size:16px;
  padding:8px;
  border-radius:10px;
  transition: background var(--transition), transform var(--transition), color var(--transition);
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.theme-toggle i{
  font-size:16px;
  color:var(--text);
  line-height:1;
  transition: color var(--transition), transform 220ms ease;
}
:root[data-theme="light"] .theme-toggle{
  background: rgba(2,6,23,0.03);
}
.theme-toggle:hover i{ transform: rotate(-12deg) scale(1.02); }

/* Main / Hero */
.main{padding:28px 0 60px}
.hero{padding:48px 0}
.hero-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:34px;
  align-items:center;
  padding:0 20px;
}
.hero-copy .site-title{
  font-size: clamp(24px,4.4vw,40px);
  margin:0 0 6px 0;
  letter-spacing: -0.8px;
  font-weight:700;
}
.tagline{margin:0 0 14px 0; font-weight:600; color:var(--muted)}
.intro{max-width:60ch;color:var(--text); margin-bottom:18px}
.hero-ctas{display:flex; gap:12px; align-items:center; margin-bottom:12px}

/* Buttons: hover sliding/shine */
.btn{
  display:inline-block;
  text-decoration:none;
  border:0;
  padding:10px 14px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:'';
  position:absolute;
  left:-60%;
  top:0;
  width:60%;
  height:100%;
  transform: skewX(-15deg);
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  transition: left 420ms cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
  opacity:0;
}
.btn:hover::after{ left:120%; opacity:1; }
.btn.primary{
  background: linear-gradient(90deg,var(--accent-start),var(--accent-end));
  color:white;
  box-shadow: 0 8px 30px rgba(124,58,237,0.14);
}
.btn.primary:hover{ transform: translateY(-4px) scale(1.02); box-shadow: 0 14px 40px rgba(8,12,28,0.28); }
.btn.ghost{
  background:transparent;
  color:var(--text);
  border:1px solid rgba(255,255,255,0.06);
}
.btn.ghost:hover{
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  transform: translateY(-3px);
}

/* Hero visual */
.hero-visual{
  min-height:260px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(37,99,235,0.06));
  box-shadow: var(--shadow);
  padding:18px;
}
.visual-placeholder{
  font-weight:700;
  color:var(--muted);
  font-size:20px;
  letter-spacing:0.6px;
}

/* Sections */
.section{padding:40px 0}
.section-inner{max-width:var(--max-width);margin:0 auto;padding:0 20px}
.section-title{font-size:20px;margin:0 0 14px 0}
.lead{color:var(--muted); margin-bottom:18px}

/* Cards and grids */
.card{
  background: linear-gradient(180deg, var(--panel), transparent);
  border-radius: var(--radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.02);
}
.mission-vision{display:flex; gap:20px; margin-top:18px; flex-wrap:wrap}
.mission-vision .card{flex:1 1 320px}

/* Services grid */
.services-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:18px}
.service-card{display:flex; flex-direction:column; gap:12px; align-items:flex-start; min-height:160px}
.service-icon{font-size:28px; color:var(--accent-mid)}

/* Contact layout */
.contact-grid{display:grid; grid-template-columns: 1fr 340px; gap:20px; align-items:start}
.contact-form label{display:block;margin-top:12px;font-weight:600;color:var(--muted)}
.contact-form input, .contact-form textarea{
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background:transparent;
  color:var(--text);
  resize:vertical;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none;
  border-color:rgba(124,58,237,0.9);
  box-shadow:0 6px 18px rgba(124,58,237,0.06);
}

/* small text */
.small{font-size:13px;color:var(--muted)}
.muted{color:var(--muted)}

.form-actions{display:flex; gap:10px; margin-top:14px; align-items:center}
.form-note{margin-top:12px;color:var(--muted); font-size:13px}

/* Footer */
.site-footer{margin-top:40px;padding:22px 0;border-top:1px solid rgba(255,255,255,0.02); background:linear-gradient(180deg, transparent, rgba(0,0,0,0.04))}
.footer-inner{max-width:var(--max-width); margin:0 auto;padding:0 20px; display:flex; justify-content:space-between; align-items:center; gap:20px}
.footer-links a{color:var(--muted); text-decoration:none}

/* Toast */
.toast{
  position:fixed;
  right:20px;
  bottom:20px;
  background:linear-gradient(90deg,var(--accent-mid),var(--accent-end));
  color:white;
  padding:12px 16px;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(4,8,20,0.6);
  transform: translateY(8px);
  transition: transform 280ms ease, opacity 240ms ease;
}

/* Accessibility helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Responsive */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr; gap:18px}
  .services-grid{grid-template-columns:1fr; margin-top:12px}
  .contact-grid{grid-template-columns:1fr; gap:14px}
  .mission-vision{flex-direction:column}
  .nav-menu{display:none; position:absolute; right:18px; top:64px; background:var(--panel); padding:12px; border-radius:10px; flex-direction:column; min-width:180px; box-shadow: var(--shadow)}
  .nav-toggle{display:inline-flex}
}

/* Spacing helpers */
.card, .service-card, .contact-card, .contact-info{margin:12px 0}

/* Gradient accent */
.accent{
  background: linear-gradient(90deg,var(--accent-start),var(--accent-mid),var(--accent-end));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  font-weight:700;
  letter-spacing:0.4px;
}

/* Transitions */
a, .btn, .nav-link{transition: transform var(--transition), filter var(--transition), box-shadow var(--transition)}

/* Small screens */
@media (max-width:520px){
  :root{--gap:16px; --card-padding:16px}
  .logo{width:48px;height:48px}
  .header-inner{padding:10px 12px}
  .hero{padding:28px 0}
}
/* --- Smooth Scroll Animations --- */
.scroll-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s ease;
}
.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Gradient Hover Effects --- */
.nav-link,
.btn {
  position: relative;
  transition: all 0.4s ease;
}

/* Shiny gradient on hover */
.nav-link:hover,
.btn:hover {
  background: linear-gradient(90deg, var(--accent-start), var(--accent-mid), var(--accent-end));
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
  transform: translateY(-3px);
}
/* Ensure footer always shows and isn't hidden by animations */
.site-footer {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  visibility: visible !important;
}