@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi/Satoshi-Variable.woff2') format('woff2'),
  url('/fonts/Satoshi/Satoshi-Variable.woff') format('woff'),
  url('/fonts/Satoshi/Satoshi-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi/Satoshi-VariableItalic.woff2') format('woff2'),
  url('/fonts/Satoshi/Satoshi-VariableItalic.woff') format('woff'),
  url('/fonts/Satoshi/Satoshi-VariableItalic.ttf') format('truetype');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/Outfit/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Basis kleuren */
  --light: hsl(0 0% 100%);
  --dark: hsl(0 0% 0%);
  --primary: hsl(48 100% 50%);

  /* Light theme fallback */
  --light-dark: hsl(0 0% 95%);
  --light-darker: hsl(0 0% 90%);
  --light-muted: hsl(0 0% 70%);
  
  /* Dark theme fallback */
  --dark-light: hsl(0 0% 5%);
  --dark-lighter: hsl(0 0% 10%);
  --dark-muted: hsl(0 0% 30%);
  
  /* Primary fallback */
  --primary-dark: hsl(48 100% 55%);
  --primary-darker: hsl(48 100% 60%);
  --primary-muted: hsl(48 100% 80%);
  --primary-transparent: hsla(48, 100%, 50%, 0.8);
  
  /* Gradients fallback */
  --gradient-light: linear-gradient(135deg, var(--light) 20%, var(--light-dark) 100%);
  --gradient-dark: linear-gradient(135deg, var(--dark-light) 20%, var(--dark-lighter) 100%);
  
  /* Shadows fallback */
  --shadow-default: -10px 0px 75px rgba(0, 0, 0, 0.3);
  --shadow-neumorphic: 
  -1px -1px 5px hsla(0, 0%, 100%, 0.75),
  1px  1px 5px hsla(0, 0%, 0%, 0.1),
  inset 1px 1px 5px hsla(0, 0%, 100%, 0.65),
  inset -1px  -1px 5px hsla(0, 0%, 0%, 0.05);
  
  /* Font-weight */
  --fw-thin: 100;
  --fw-extra-light: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;
  --fw-black: 900;
}

@supports (not (color: hsl(from white h s l))) {
  :root {
    /* Light theme fallback */
    --light-dark: hsl(0 0% 95%);
    --light-darker: hsl(0 0% 90%);
    --light-muted: hsl(0 0% 70%);
    
    /* Dark theme fallback */
    --dark-light: hsl(0 0% 5%);
    --dark-lighter: hsl(0 0% 10%);
    --dark-muted: hsl(0 0% 30%);
    
    /* Primary fallback */
    --primary-dark: hsl(48 100% 55%);
    --primary-darker: hsl(48 100% 60%);
    --primary-muted: hsl(48 100% 80%);
    --primary-transparent: hsla(48, 100%, 50%, 0.8);
    
    /* Gradients fallback */
    --gradient-light: linear-gradient(135deg, var(--light) 20%, var(--light-dark) 100%);
    --gradient-dark: linear-gradient(135deg, var(--dark-light) 20%, var(--dark-lighter) 100%);
    
    /* Shadows fallback */
    --shadow-default: -10px 0px 75px rgba(0, 0, 0, 0.3);
    --shadow-neumorphic: 
    -1px -1px 5px hsla(0, 0%, 100%, 0.75),
    1px  1px 5px hsla(0, 0%, 0%, 0.1),
    inset 1px 1px 5px hsla(0, 0%, 100%, 0.65),
    inset -1px  -1px 5px hsla(0, 0%, 0%, 0.05);
  }
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

html {
  display: contents;
}

html, body {
  height: 100%;
  max-width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background: var(--light-darker);
}

h1 {
  cursor: default;
  color: var(--dark-light);
  font-family: "Satoshi", sans-serif;
  font-size: 2rem;
  font-weight: var(--fw-medium);
  line-height: 125%;
  letter-spacing: -0.02em;
  color: var(--dark-light);
  
  @media (min-width: 1024px) {
    font-size: 2.25rem;
  }
}

h2 {
  cursor: default;
  font-family: "Satoshi", sans-serif;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 140%;
  letter-spacing: -0.05em;
  color: var(--dark-muted);
  
  @media (min-width: 1024px) {
    font-size: 1.5rem;
  }
}

h3 {
  cursor: default;
  font-family: "Satoshi", sans-serif;
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  line-height: 130%;
  letter-spacing: -0.015em;
  color: var(--dark-light);
  
  @media (min-width: 1024px) {
    font-size: 2.5rem;
  }
  
  @media (min-width: 1700px) {
    font-size: 3rem;
  }
}

h4 {
  cursor: default;
  font-family: "Satoshi", sans-serif;
  font-size: 2.5rem;
  font-weight: var(--fw-medium);
  line-height: 100%;
  letter-spacing: -0.02em;
  color: var(--dark-light);
  
  @media (min-width: 1024px) {
    font-size: 2rem;
  }
}

h5 {
  cursor: default;
  font-family: "Satoshi", sans-serif;
  font-size: 1.25rem;
  font-weight: var(--fw-semi-bold);
  line-height: 125%;
  letter-spacing: auto;
  color: var(--dark-light);
}

p, li {
  cursor: default;
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: 150%;
  letter-spacing: auto;
  color: var(--dark-light);
}

small {
  cursor: default;
  font-family: "Outfit", sans-serif;
  font-size: 0.75rem;
  font-weight: var(--fw-semi-bold);
  line-height: auto;
  letter-spacing: auto;
  color: var(--dark-light);
}

label {
  cursor: default;
  font-family: "Satoshi", sans-serif;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 150%;
  letter-spacing: 0;
  color: var(--dark-light);
}

a, button {
  cursor: pointer;
  font-family: "Satoshi", "sans-serif";
  font-size: 1rem;
  font-weight: var(--fw-semi-bold);
  line-height: auto;
  letter-spacing: auto;
  color: var(--dark-light);
}

.load {
    opacity: 0;
    transform: translateY(15%);
    transition: all 0.6s ease;
  }

  .load.show {
    opacity: 1;
    transform: translateY(0);
  }