/* Simple responsive CSS for Full Stack Cloud static site */

:root{
  --bg:#0f1724;
  --accent1:#0369a1;
  --accent2:#7c3aed;
  --muted:#6b7280;
  --card:#ffffff;
  --max-width:1100px;
}

*{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:#f8fafc;color:#0f1724;line-height:1.5}
.container{width:90%;max-width:var(--max-width);margin:0 auto}
main {
  display: flex;
  flex-direction: column;
}

/* Header */
.site-header{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.logo{font-weight:700;font-size:1.25rem;color:white;text-decoration:none}
.nav{display:flex;gap:18px}
.nav a{color:rgba(255,255,255,0.9);text-decoration:none;padding:6px 8px;border-radius:6px;cursor: pointer;}
.nav a:hover,.nav a.active{background:rgba(255,255,255,0.08)}
.cta-small{background:white;color:var(--accent1);padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:600}

/* Hamburger styles */
.menu-toggle{display:none;flex-direction:column;justify-content:space-between;width:26px;height:18px;background:transparent;border:none;cursor:pointer}
.menu-toggle span{display:block;height:3px;background:white;border-radius:2px;transition:all 0.3s ease}

/* Menu open */
.nav.open{display:flex !important;flex-direction:column;position:absolute;top:64px;right:0;background:var(--accent1);width:100%;text-align:center;padding:20px 0;animation:slideDown 0.3s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.menu-toggle.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Hero */
.hero{background:linear-gradient(180deg,var(--accent1),var(--accent2));color:white;padding:64px 0 20px;}
.hero-inner{text-align:center;padding:24px 0}
.hero h1{font-size:2rem;margin:0 0 12px}
.lead{max-width:760px;margin:0 auto 18px;color:rgba(255,255,255,0.92)}
.cta{background:white;color:var(--accent1);padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:700;display:inline-block}
.hero-divider{width:100%;height:60px;display:block;fill:rgba(255,255,255,0.08);margin-top:28px}

/* Highlights */
.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:-30px}
.card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 6px 20px rgba(16,24,40,0.06)}
.card h3{color:var(--accent1);margin-top:0}

/* Content */
.intro{padding:40px 0}
.two-col{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.box{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
.checklist{list-style:none;padding:0;margin:12px 0}
.checklist li{padding:6px 0;border-bottom:1px solid #eef2f7}

/* Services / grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
.more{margin-top:28px}

/* Benefits */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.benefit{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}

/* Compliance */
.grid-3 .comp-card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}

/* Footer */
.site-footer{background:#0b1220;color:#cbd5e1;padding:28px 0;margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.site-footer h3{margin:0}

/* Responsive */
@media (max-width:900px){
  .highlights{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .nav{display:none}
  .header-inner{gap:12px}
  .menu-toggle{display:flex}
}