:root{
  --bg1:#e8f7ff;
  --accent:#6CCAF0;
  --accent-2:#FF6BAD;
  --muted:#4b5563;
  --dark:#072033;
  --card:#ffffff;
  --maxw:1100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter,system-ui,Arial;background:linear-gradient(180deg,var(--bg1),#f0fbff);color:var(--dark);-webkit-font-smoothing:antialiased}
.container{max-width:var(--maxw);margin:28px auto;padding:20px}
.header{display:flex;align-items:center;gap:16px}
.logo{width:72px;height:72px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;color:white;font-weight:700}
nav{margin-left:auto;display:flex;gap:12px}
nav a{color:var(--dark);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px}
.hero{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:center;margin-top:18px}
h1{font-size:32px;color:var(--dark)}
.lead{color:var(--muted);margin-top:8px}
.card{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 6px 30px rgba(10,40,60,0.06);border:1px solid rgba(7,32,51,0.04)}
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.svc{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:10px;background:linear-gradient(180deg,#fff,#f7feff);border:1px solid rgba(7,32,51,0.03)}
.svc .ico{width:64px;height:64px;border-radius:10px;background:linear-gradient(135deg,var(--accent-2),var(--accent));display:grid;place-items:center;color:#033048;font-weight:700}
.footer{margin-top:28px;text-align:center;color:var(--muted);font-size:14px;padding:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.small{font-size:14px;color:var(--muted)}
a.cta{display:inline-block;padding:10px 16px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#072033;border-radius:10px;font-weight:700;text-decoration:none}
a.ghost{background:transparent;border:1px solid rgba(7,32,51,0.06);padding:10px 14px;border-radius:10px;color:var(--dark)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  nav{display:none}
}
/* tiny utility */
.card img{max-width:100%;height:auto;border-radius:8px}
#bgcanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
/*  z-index: -1;       PUSHES animation BEHIND content */
  pointer-events: none;
}

body, html {
  background: linear-gradient(180deg, var(--bg1), #f0fbff);
}

.container, .header, .hero, main, footer {
  position: relative;
  z-index: 5;       /* ENSURES content always stays ABOVE */
}
#content-wrapper {
  position: relative;
  z-index: 10;
}