@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500;700;900&display=swap');

:root {
  --np-primary: #0EB1E3;       /* matches the mid-sky blue in the hero */
  --np-primary-light: #90E8FD; /* matches the pale horizon tint */
  --np-orange: #FF6A3D;
  --np-dark: #0f172a;
  --np-gray: #475569;
  --np-bg: #f8fafc;
  --np-radius: 2rem;
  --np-shadow: 0 8px 24px rgba(0,0,0,.05);
  --np-space-section: clamp(4rem, 8vh, 6rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Source Serif 4", serif;
  color: var(--np-dark);
  background: var(--np-bg);
  line-height: 1.7;
  max-width: 100%;
  max-height: 100%;
}

/* 2.0 Global Elements ---------------------------------------*/
h1,h2,h3 {
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1.1rem;
}

h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: 1.25rem; color: var(--np-primary); }

p { max-width: 60ch; margin-bottom: 1.25rem; }

ul.clean { list-style: none; margin: 0; padding: 0; }

a { text-decoration: none; }

/* 3.0 Layout -------------------------------------------------*/
section {
  padding: var(--np-space-section) 10rem;
  /* max-width: 1200px; */
  margin-inline: auto;
}