:root{
  --black:#0b0b0b;
  --grey:#f5f7fa;           /* pastel grey */
  --grey-600:#6b7280;
  --teal:#9fe3df;           /* pastel teal */
  --orange:#ffc7a1;         /* pastel orange */
  --purple:#cbb8ff;         /* soft accent for gradient depth */
  --radius:18px;
  --max:1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--black); background:#fff; line-height:1.55;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #e5e7eb;background:#fff}
.menu{display:flex;gap:20px}
.menu a{opacity:.82}
.menu a:hover{opacity:1}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;border:1px solid transparent;font-weight:600;transition:transform .06s ease,background .2s ease,border-color .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:var(--black)}
.btn-primary:hover{filter:brightness(.94)}
.btn-secondary{background:var(--orange);color:var(--black)}
.btn-secondary:hover{filter:brightness(.95)}
.btn-outline{background:#fff;border-color:#d1d5db}
.btn-outline:hover{background:#fafafa}

/* Hero + Animated gradient (Slideworks vibe) */
.hero{position:relative;overflow:hidden;padding:120px 24px 96px;text-align:center}
.hero-inner{max-width:820px;margin:0 auto}
.hero h1{font-size:clamp(34px,5vw,60px);line-height:1.05;margin:0 0 12px;font-weight:800}
.hero .sub{font-size:clamp(16px,2.2vw,20px);color:#1f2937;opacity:.9;margin:0 auto 22px;max-width:720px}
.cta-row{display:flex;gap:12px;justify-content:center}

/* Animated gradient background */
.hero-gradient::before{
  content:"";position:absolute;inset:-20%;z-index:-1;filter:blur(40px);
  background: radial-gradient(40% 35% at 20% 30%, var(--teal) 0%, transparent 60%),
              radial-gradient(45% 38% at 80% 25%, var(--orange) 0%, transparent 60%),
              radial-gradient(35% 30% at 50% 80%, var(--purple) 0%, transparent 60%),
              linear-gradient(180deg,#ffffff, #f8fafc);
  animation: floaty 16s ease-in-out infinite alternate;
}
@keyframes floaty{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2%,2%,0) scale(1.02)}
  100%{transform:translate3d(2%,-2%,0) scale(1.01)}
}

/* Sections */
.section{padding:80px 24px;max-width:var(--max);margin:0 auto}
.center{text-align:center}
.lead{font-size:20px}
.dim{color:var(--grey-600)}
.small{font-size:14px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}

/* Grids & cards */
.grid{display:grid;gap:24px}
.grid.two{grid-template-columns:1fr}
.grid.three{grid-template-columns:1fr}
@media(min-width:900px){
  .grid.two{grid-template-columns:1.1fr .9fr}
  .grid.three{grid-template-columns:repeat(3,1fr)}
}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);padding:22px}
.pill{min-width:240px}
.scroll-cards{display:flex;gap:16px;overflow:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.scroll-cards > *{scroll-snap-align:start}
/* Planning visual */
.illo{
  min-height: 260px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background:
    url("/assets/planning-visual.png") center/cover no-repeat;
}


/* Feature cards */
.features .card h3{margin:0 0 6px}

/* Themed sections */
.soft{background:var(--grey);border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.highlight{background:#fff5ed;border-top:1px solid #ffe4cc;border-bottom:1px solid #ffe4cc}
.quote{font-size:22px;font-weight:700;text-align:center;margin:0}

/* Lists */
.big-points{margin:0;padding-left:18px}
.big-points li{margin:0 0 10px}

/* Form */
.form{max-width:640px;margin:0 auto}
.form label{display:block;margin-bottom:14px}
.form label span{display:block;font-weight:600;margin-bottom:6px}
.form input,.form textarea{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:12px 14px;font:inherit}
.form input:focus,.form textarea:focus{outline:2px solid var(--teal);border-color:transparent}

/* Footer */
.footer{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:22px 24px;border-top:1px solid #e5e7eb}
.footer-nav{display:flex;gap:16px}

/* Blog cards */
.blog-cards .card h3 { margin: 0 0 6px; font-weight: 700; }
.blog-cards .card a:hover { text-decoration: underline; }

/* Figure image styling */
.illo-img {
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.illo-img img {
  display: block;
  width: 100%;
  height: auto;
}