:root {
  --brand-blue: #0057b7;
  --dark-gray: #333;
  --light-gray: #f5f5f5;
  --max-width: 1200px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Roboto, sans-serif; color: var(--dark-gray); line-height: 1.6; }
a { color: var(--brand-blue); text-decoration: none; }
header { background: white; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
nav a { margin-left: 1.5rem; font-weight: 500; }
.hero { display: flex; flex-wrap: wrap; align-items: center; padding: 4rem 2rem; max-width: var(--max-width); margin: auto; }
.hero-text { flex: 1 1 400px; }
.hero-text h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.hero-text p { margin-bottom: 2rem; color: var(--dark-gray); }
.btn-primary { background: var(--brand-blue); color: white; padding: 0.75rem 1.5rem; border-radius: 4px; font-weight: 500; }
.features { background: var(--light-gray); padding: 4rem 2rem; }
.features .grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 2rem; max-width: var(--max-width); margin: auto; }
.feature { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.feature h3 { margin-bottom: 0.5rem; }
footer { background: var(--dark-gray); color: white; padding: 2rem; text-align: center; }
footer a { color: #bbb; margin: 0 0.5rem; }
@media(max-width:768px){
  .hero { flex-direction: column; text-align: center; }
  nav { margin-top: 1rem; }
}

/* Pastel palette (lightest→darkest) */
:root {
  --p1:  #F6F7F0;
  --p2:  #E7EBEC;
  --p3:  #E0F4FB;
  --p4:  #BFF4FF;
  --p5:  #B3EBEE;
  --p6:  #57DEE1;
  --p7:  #8AE1EA;
  --p8:  #77C1E8;
  --p9:  #B1E5FF;
  --p10: #A3D5FF;
  --p11: #ACD3F6;
  --p12: #A0D7F7;
  --p13: #9ECBEF;
  --p14: #7DB3E2;
  --p15: #7FAED3;
  --p16: #88BBE7;
  --p17: #75A3D4;
  --p18: #6CA3DC;
  --p19: #6CB2E4;
  --p20: #5D9BD3;
  --p21: #4793D3;
  --p22: #60A308;  /* accent green */
  --p23: #FA6BB3;  /* accent pink */
}