:root{--fg:#0f172a;--muted:#475569;--bg:#f8fafc;--accent:#0ea5e9}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
*,*::before,*::after{box-sizing:border-box}
.nojs{padding:.75rem 1rem;background:#fffbe6;border:1px solid #f59e0b;color:#7c2d12;text-align:center}

header, section, footer{position:relative; padding:8rem 1.25rem}
.container{max-width:1100px;margin:0 auto}
h1,h2{margin:0 0 .75rem}
p{max-width:65ch;margin:.5rem 0;color:var(--muted)}
a{color:var(--accent)}

/* HERO with layers */
.hero{
  height:100svh; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(180deg,#e0f2fe 0%, #f8fafc 60%);
  isolation:isolate;
}
.layer{
  position:absolute; inset:-10% -10% auto -10%;
  height:130%; background-repeat:no-repeat; background-size:cover; opacity:.5;
}
.layer.clouds{
  background-image:
    radial-gradient(closest-side at 20% 30%, #fff, transparent 55%),
    radial-gradient(closest-side at 70% 20%, #fff, transparent 60%),
    radial-gradient(closest-side at 50% 60%, #fff, transparent 65%);
}
.layer.mountains{
  inset:auto -10% 0 -10%; height:70%;
  background-image:linear-gradient(180deg,#94a3b8 0%, #64748b 60%, #475569 100%);
  border-top-left-radius:40% 20%; border-top-right-radius:40% 20%;
  opacity:.9;
}

.hero .title{
  z-index:1; text-align:center;
  backdrop-filter:saturate(140%) blur(4px);
  background:rgba(255,255,255,.5); padding:1.25rem 1.5rem; border-radius:16px;
  box-shadow:0 10px 30px rgba(2,8,23,.1);
}
.cta{display:inline-block;margin-top:.75rem;padding:.65rem 1rem;border-radius:999px;
  background:var(--accent);color:white;text-decoration:none;font-weight:600}

/* Sticky/pinned section */
.sticky-wrap{height:200svh;background:#fff}
.sticky{
  position:sticky; top:0; height:100svh; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(180deg,#fff 0%, #eef2ff 100%);
}
.cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));padding:1.25rem}
.card{
  background:white;border-radius:18px;padding:1rem 1.1rem;box-shadow:0 8px 24px rgba(2,8,23,.08);
  transform:translateY(40px);opacity:0;
}

/* About + Banner */
.about{background:#f8fafc}
.banner{
  background:linear-gradient(180deg,#cffafe 0%, #22d3ee 100%);
  color:#0b1220;
}

/* Footer */
footer{background:#0b1220;color:#e2e8f0}

@media (prefers-reduced-motion: reduce){
  .card, .layer {transition:none !important; animation:none !important}
}