@import url("https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
   --color-bg: #0a0f0a;
   --color-bg-card: #131a13;
   --color-main: #26e6cf;
   --color-white: #ffffff;
   --color-text-muted: #888888;
   --color-border: #1e2a1e;
   --color-nav-text: #4a4a4a;
   --color-error: #e74c3c;
   --color-disabled: #9e9d9d;

   --font-main: "Quantico", sans-serif;

   --nav-width: 172px;
   --section-width: calc(100vw - var(--nav-width) - 80px);
   --section-height: 100vh;
}

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

html {
   font-size: 16px;
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-main);
   background-color: var(--color-bg);
   background: linear-gradient(
      45deg,
      rgba(0, 0, 0, 1) 15%,
      rgba(24, 33, 32) 47%,
      rgba(0, 0, 0, 1) 87%
   );
   color: var(--color-white);
   display: flex;
   overflow: hidden;
   height: 100vh;
}

a {
   color: inherit;
   text-decoration: none;
}

ul {
   list-style: none;
}

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

@property --btn-g-start {
   syntax: "<color>";
   inherits: false;
   initial-value: #26e6cf;
}

@property --btn-g-end {
   syntax: "<color>";
   inherits: false;
   initial-value: #26e6cf;
}

.btn-primary {
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(to top, var(--btn-g-start), var(--btn-g-end));
   color: var(--color-bg);
   font-family: var(--font-main);
   font-weight: 400;
   font-size: 16px;
   line-height: 1.2;
   padding: 12px 32px;
   border-radius: 50px;
   border: none;
   cursor: pointer;
   white-space: nowrap;
   transition: --btn-g-start 0.3s, --btn-g-end 0.3s;
}

.btn-primary:hover {
   --btn-g-start: #1ab39e;
   --btn-g-end: #26e6cf;
}

.btn-secondary {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   isolation: isolate;
   background: transparent;
   color: var(--color-main);
   font-family: var(--font-main);
   font-weight: 400;
   font-size: 16px;
   line-height: 1.2;
   padding: 12px 32px;
   border-radius: 50px;
   border: 2px solid var(--color-main);
   cursor: pointer;
   overflow: hidden;
   white-space: nowrap;
}

.btn-secondary::after {
   content: "";
   position: absolute;
   inset: 0;
   background: color-mix(in srgb, var(--color-main) 15%, transparent);
   border-radius: inherit;
   opacity: 0;
   transition: opacity 0.3s;
   z-index: -1;
}

.btn-secondary:hover::after {
   opacity: 1;
}

.section-headline {
   font-size: clamp(32px, 5vw, 64px);
   font-weight: 700;
   color: var(--color-main);
   margin-bottom: 32px;
}