@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

/* 
  Inter
  Plus Jakarta Sans
  Manrope
  Sora
  Nunito Sans
*/

:root {
  --persol-green: #4a7667;
  --persol-green-2: #5f8f7f;
  --persol-green-soft: #e7f1e9;
  --persol-dark: #0f1714;
  --persol-dark-2: #17211d;

  --persol-border: rgba(255, 255, 255, 0.08);
  --persol-border-hover: rgba(231, 241, 233, 0.16);
  --persol-border-active: rgba(74, 118, 103, 0.5);

  --persol-border-eyebrow: var(--persol-border-hover);
  --persol-border-eyebrow-hover: rgba(231, 241, 233, 0.26);

  --persol-text: #f4f7f5;
  --persol-text-soft: rgba(244, 247, 245, 0.75);

  --persol-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);

  --persol-card-bg: rgba(12, 20, 18, 0.6);

  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-xs: 6px;

  --navbar-height: 76px;

  --container: 1280px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  background: #1a2722;
  color: var(--persol-text);
  font-family: "Sora", sans-serif;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(900px circle at 20% -10%, rgba(15, 209, 164, 0.22), transparent 75%),
    radial-gradient(600px circle at 50% 20%, rgba(255, 255, 255, 0.04), transparent 70%);
}

body::after {
  background:
    radial-gradient(1000px circle at 85% 10%, rgba(74, 118, 103, 0.22), transparent 75%),
    radial-gradient(1200px circle at 50% 0%, rgba(255, 255, 255, 0.03), transparent 80%),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>\
<filter id='n'>\
<feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/>\
</filter>\
<rect width='100%' height='100%' filter='url(%23n)' opacity='0.06'/>\
</svg>");
}

body > * {
  position: relative;
  z-index: 1;
}

img {
  max-width: 100%;
  display: block;
}

button,
a {
  font: inherit;
  text-decoration: none;
}