:root {
  --mwblue-50: oklch(0.949 0.019 282.82);
  --mwblue-100: oklch(0.898 0.037 282.29);
  --mwblue-200: oklch(0.805 0.074 279.48);
  --mwblue-300: oklch(0.704 0.114 278);
  --mwblue-400: oklch(0.612 0.151 275.04);
  --mwblue-500: oklch(51.401% 0.18637 270.265);
  --mwblue-600: oklch(0.44 0.16 270.23);
  --mwblue-700: oklch(0.362 0.131 270.2);
  --mwblue-800: oklch(0.291 0.105 270.43);
  --mwblue-900: oklch(0.212 0.076 269.93);
  --mwblue-950: oklch(0.168 0.061 270.31);

  --mwpink-50: oklch(0.961 0.022 330.39);
  --mwpink-100: oklch(0.929 0.041 329.65);
  --mwpink-200: oklch(0.855 0.088 328.84);
  --mwpink-300: oklch(0.776 0.144 329.79);
  --mwpink-400: oklch(0.706 0.196 330.06);
  --mwpink-500: oklch(0.628 0.2 330.36);
  --mwpink-600: oklch(0.53 0.169 330.16);
  --mwpink-700: oklch(0.432 0.137 330.35);
  --mwpink-800: oklch(0.342 0.109 330.55);
  --mwpink-900: oklch(0.243 0.077 329.87);
  --mwpink-950: oklch(0.185 0.058 329.21);

  --mwyellow-50: oklch(0.983 0.012 67.7);
  --mwyellow-100: oklch(0.975 0.019 72.57);
  --mwyellow-200: oklch(0.95 0.04 73.44);
  --mwyellow-300: oklch(0.924 0.064 76.08);
  --mwyellow-400: oklch(0.899 0.09 78.14);
  --mwyellow-500: oklch(0.872 0.124 80.69);
  --mwyellow-600: oklch(0.726 0.149 84.24);
  --mwyellow-700: oklch(0.58 0.119 84.24);
  --mwyellow-800: oklch(0.434 0.089 85.03);
  --mwyellow-900: oklch(0.285 0.059 83.41);
  --mwyellow-950: oklch(0.209 0.043 84.6);

  --dark-50: oklch(0.94 0.018 269.12);
  --dark-100: oklch(0.879 0.039 267.95);
  --dark-200: oklch(0.761 0.081 264.92);
  --dark-300: oklch(0.648 0.125 260.39);
  --dark-400: oklch(0.528 0.104 259.67);
  --dark-500: oklch(0.406 0.081 259.74);
  --dark-600: oklch(0.285 0.057 259.93);
  --dark-700: oklch(0.154 0.031 259.65);
  --dark-800: oklch(0.13 0.027 261.69);
  --dark-900: oklch(0.107 0.019 262.03);
  --dark-950: oklch(0.107 0.019 262.03);

  --br: 20px;

  --shadow:
    0 -2px 0px oklch(0.5 var(--chroma-bg) var(--hue-bg)), 0px 1px 0px oklch(0.29 var(--chroma-bg) var(--hue-bg)), 0px 2px 0px oklch(0.22 var(--chroma-bg) var(--hue-bg)), 0px 3px 0px oklch(0.2 var(--chroma-bg) var(--hue-bg)),
    0px 4px 0px oklch(0.18 var(--chroma-bg) var(--hue-bg)), 0px 5px 0px oklch(0.16 var(--chroma-bg) var(--hue-bg)), 0px 6px 0px oklch(0.14 var(--chroma-bg) var(--hue-bg)), 0px 8px 0px oklch(0.12 var(--chroma-bg) var(--hue-bg)),
    0px 9px 0px oklch(0.1 var(--chroma-bg) var(--hue-bg)), 0px 10px 0px oklch(0.08 var(--chroma-bg) var(--hue-bg)), 0px 11px 0px oklch(0.06 var(--chroma-bg) var(--hue-bg)), 0px 12px 0px oklch(0.04 var(--chroma-bg) var(--hue-bg)),
    0px 13px 10px oklch(0.02 var(--chroma-bg) var(--hue-bg)), 0px 14px 10px oklch(0 var(--chroma-bg) var(--hue-bg));
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  border: 0;
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
svg {
  display: block;
  fill: currentColor;
}

.gradient-bg {
  background: var(--gradient);
  background-size: var(--bg-size);
  animation: var(--animation);
}

.gradient-text {
  color: transparent;
  text-shadow: 2px -2px 3px rgb(0 0 0 / 20%);
  background: var(--gradient);
  background-size: var(--bg-size);
  background-clip: text;
  -webkit-background-clip: text;
  animation: var(--animation);
}

.gradient-button {
  position: relative;
  height: 3rem;
  padding: 0.8rem 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border-radius: var(--br);
  transition: 0.2s ease-in-out;
}
.gradient-button::before,
.gradient-button::after {
  --offset: 2px;
  content: "";
  position: absolute;
  pointer-events: none;
  background: var(--gradient);
  background-size: var(--bg-size);
  animation: var(--animation);
  inset: calc(var(--offset) * -1);
  border-radius: var(--br);
  background-clip: padding-box, content-box;
  background-repeat: no-repeat;
  border-radius: calc(var(--br) + var(--offset));
  padding: var(--offset);
  mask: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
}
.gradient-button:hover {
  scale: 1.05;
}
.gradient-button:hover::before {
  --shadow-box: 5em;
  filter: blur(calc(var(--br) * 1.2));
  border: solid var(--shadow-box) #0000;
  inset: calc((var(--offset) + var(--shadow-box)) * -1);
  border-radius: calc(var(--br) + var(--offset) + var(--shadow-box));
}

.gradient-border {
  position: relative;
  backdrop-filter: blur(5px);
  border-radius: var(--br);
  transition: 0.2s ease-in-out;
}
.gradient-border::before,
.gradient-border::after {
  --offset: 2px;
  content: "";
  position: absolute;
  pointer-events: none;
  background: var(--gradient);
  background-size: var(--bg-size);
  animation: var(--animation);
  inset: calc(var(--offset) * -1);
  border-radius: var(--br);
  background-clip: padding-box, content-box;
  background-repeat: no-repeat;
  border-radius: calc(var(--br) + var(--offset));
  padding: var(--offset);
  mask: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
}
.gradient-border:hover {
  scale: 1.05;
}
.gradient-border:hover::before {
  --shadow-box: 5em;
  filter: blur(calc(var(--br) * 1.2));
  border: solid var(--shadow-box) #0000;
  inset: calc((var(--offset) + var(--shadow-box)) * -1);
  border-radius: calc(var(--br) + var(--offset) + var(--shadow-box));
}

.embossed-text {
  position: relative;
  z-index: 1;
  font-weight: 900;
  line-height: 0.95;
  color: oklch(calc(var(--light-bg) * 1.1) var(--chroma-bg) var(--hue-bg));
  text-shadow: var(--shadow);
  background-image: var(--gradient);
  background-size: var(--bg-size);
  background-clip: text;
  -webkit-background-clip: text;
  animation: var(--animation);
  -webkit-text-stroke: 5px transparent;
}
.embossed-text::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  background-image: var(--gradient);
  background-size: var(--bg-size);
  background-clip: text;
  -webkit-background-clip: text;
  animation: var(--animation);
  -webkit-text-stroke: 15px transparent;
  filter: blur(15px);
}

.link {
  --font-size: 1em;
  cursor: pointer;
  position: relative;
  z-index: 2;
  font-size: var(--font-size);
  color: #fff;
  text-decoration: none;
}
.link::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: calc(var(--font-size) / -6);
  height: calc(var(--font-size) / 10);
  padding: 0;
  transform-origin: 1 0;
  transform: scaleX(1);
  border-radius: calc(var(--font-size) / 6);
  background: var(--gradient);
  background-size: var(--bg-size);
  animation: var(--animation);
  transition: transform 0.2s ease-in-out;
}
.link:hover::after {
  transform: scaleX(0);
}
.link:hover::before {
  content: attr(data-text);
  position: absolute;
  z-index: 1;
  color: transparent;
  background-image: var(--gradient);
  background-size: var(--bg-size);
  background-clip: text;
  -webkit-text-stroke: calc(var(--font-size) / 48) white;
  filter: blur(calc(var(--font-size) / 6));
  animation: var(--animation);
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}

#vantaBg {
  z-index: -10;
}

#mouseTrail {
  z-index: -1;
}
.trail-fill {
  width: 100dvw;
  height: 100dvh;
  mask: url("#trailMask");
  -webkit-mask: url("#trailMask");
}

#scrollProgress {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  & span {
    background: var(--gradient);
    background-size: var(--bg-size);
    animation: var(--animation);
  }
}
#scrollProgress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gradient);
  background-size: var(--bg-size);
  animation: var(--animation);
  transform: scaleX(0);
  transform-origin: left;
}

#hero {
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 2rem;
  text-align: center;
}
.hero-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.hero-copy {
  width: 100%;
  max-width: 46rem;
}
#logo {
  width: 30vh;
  height: 30vh;
  margin-bottom: -4rem;
  mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYwIiBoZWlnaHQ9IjU2MCIgdmlld0JveD0iMCAwIDU2MCA1NjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RfMjE1MF8zNTcpIj4KPHBhdGggZD0iTTQyMCA1MDMuMUM0MjAgNTA5LjMzNiA0MTIuNDYgNTEyLjQ2IDQwOC4wNSA1MDguMDVMMTUxLjk0OSAyNTEuOTQ5QzE0Ny41NCAyNDcuNTQgMTUwLjY2MyAyNDAgMTU2Ljg5OSAyNDBINDEzQzQxNi44NjYgMjQwIDQyMCAyNDMuMTM0IDQyMCAyNDdWNTAzLjFaTTI4MCA0NTNDMjgwIDQ1Ni44NjYgMjc2Ljg2NiA0NjAgMjczIDQ2MEgyMTYuODk5QzIxMC42NjMgNDYwIDIwNy41NCA0NTIuNDYgMjExLjk0OSA0NDguMDVMMjY4LjA1IDM5MS45NDlDMjcyLjQ2IDM4Ny41MzkgMjgwIDM5MC42NjMgMjgwIDM5Ni44OTlWNDUzWk00MDAgOTcuMUM0MDAgOTguOTU2NSAzOTkuMjYyIDEwMC43MzcgMzk3Ljk0OSAxMDIuMDVMMjg0Ljk0OSAyMTUuMDVDMjgyLjIxNiAyMTcuNzgzIDI3Ny43ODMgMjE3Ljc4MyAyNzUuMDUgMjE1LjA1TDE2Mi4wNSAxMDIuMDVDMTYwLjczNyAxMDAuNzM3IDE2MCA5OC45NTY1IDE2MCA5Ny4xVjU2Ljg5OUMxNjAgNTAuNjYyNyAxNjcuNTQgNDcuNTM5NSAxNzEuOTQ5IDUxLjk0OTNMMjE3Ljk0OSA5Ny45NDkzQzIxOS4yNjIgOTkuMjYyIDIyMS4wNDIgOTkuOTk5NSAyMjIuODk5IDk5Ljk5OTVIMzM3LjFDMzM4Ljk1NyA5OS45OTk1IDM0MC43MzcgOTkuMjYyIDM0Mi4wNSA5Ny45NDkzTDM4OC4wNSA1MS45NDkzQzM5Mi40NiA0Ny41Mzk1IDQwMCA1MC42NjI3IDQwMCA1Ni44OTlWOTcuMVpNMjI4LjA1IDE4OC4wNUMyMzIuNDYgMTkyLjQ2IDIyOS4zMzYgMjAwIDIyMy4xIDIwMEgxODdDMTgzLjEzNCAyMDAgMTgwIDE5Ni44NjYgMTgwIDE5M1YxNTYuODk5QzE4MCAxNTAuNjYzIDE4Ny41NCAxNDcuNTQgMTkxLjk0OSAxNTEuOTQ5TDIyOC4wNSAxODguMDVaTTM4MCAxOTNDMzgwIDE5Ni44NjYgMzc2Ljg2NiAyMDAgMzczIDIwMEgzMzYuODk5QzMzMC42NjMgMjAwIDMyNy41NCAxOTIuNDYgMzMxLjk0OSAxODguMDVMMzY4LjA1IDE1MS45NDlDMzcyLjQ2IDE0Ny41NCAzODAgMTUwLjY2MyAzODAgMTU2Ljg5OVYxOTNaIiBmaWxsPSIjMjMyMzIzIi8+CjwvZz4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjFfaV8yMTUwXzM1NykiPgo8cGF0aCBkPSJNNDIwIDUwMy4xQzQyMCA1MDkuMzM2IDQxMi40NiA1MTIuNDYgNDA4LjA1IDUwOC4wNUwxNTEuOTQ5IDI1MS45NDlDMTQ3LjU0IDI0Ny41NCAxNTAuNjYzIDI0MCAxNTYuODk5IDI0MEg0MTNDNDE2Ljg2NiAyNDAgNDIwIDI0My4xMzQgNDIwIDI0N1Y1MDMuMVpNMjgwIDQ1M0MyODAgNDU2Ljg2NiAyNzYuODY2IDQ2MCAyNzMgNDYwSDIxNi44OTlDMjEwLjY2MyA0NjAgMjA3LjU0IDQ1Mi40NiAyMTEuOTQ5IDQ0OC4wNUwyNjguMDUgMzkxLjk0OUMyNzIuNDYgMzg3LjUzOSAyODAgMzkwLjY2MyAyODAgMzk2Ljg5OVY0NTNaTTQwMCA5Ny4xQzQwMCA5OC45NTY1IDM5OS4yNjIgMTAwLjczNyAzOTcuOTQ5IDEwMi4wNUwyODQuOTQ5IDIxNS4wNUMyODIuMjE2IDIxNy43ODMgMjc3Ljc4MyAyMTcuNzgzIDI3NS4wNSAyMTUuMDVMMTYyLjA1IDEwMi4wNUMxNjAuNzM3IDEwMC43MzcgMTYwIDk4Ljk1NjUgMTYwIDk3LjFWNTYuODk5QzE2MCA1MC42NjI3IDE2Ny41NCA0Ny41Mzk1IDE3MS45NDkgNTEuOTQ5M0wyMTcuOTQ5IDk3Ljk0OTNDMjE5LjI2MiA5OS4yNjIgMjIxLjA0MiA5OS45OTk1IDIyMi44OTkgOTkuOTk5NUgzMzcuMUMzMzguOTU3IDk5Ljk5OTUgMzQwLjczNyA5OS4yNjIgMzQyLjA1IDk3Ljk0OTNMMzg4LjA1IDUxLjk0OTNDMzkyLjQ2IDQ3LjUzOTUgNDAwIDUwLjY2MjcgNDAwIDU2Ljg5OVY5Ny4xWk0yMjguMDUgMTg4LjA1QzIzMi40NiAxOTIuNDYgMjI5LjMzNiAyMDAgMjIzLjEgMjAwSDE4N0MxODMuMTM0IDIwMCAxODAgMTk2Ljg2NiAxODAgMTkzVjE1Ni44OTlDMTgwIDE1MC42NjMgMTg3LjU0IDE0Ny41NCAxOTEuOTQ5IDE1MS45NDlMMjI4LjA1IDE4OC4wNVpNMzgwIDE5M0MzODAgMTk2Ljg2NiAzNzYuODY2IDIwMCAzNzMgMjAwSDMzNi44OTlDMzMwLjY2MyAyMDAgMzI3LjU0IDE5Mi40NiAzMzEuOTQ5IDE4OC4wNUwzNjguMDUgMTUxLjk0OUMzNzIuNDYgMTQ3LjU0IDM4MCAxNTAuNjYzIDM4MCAxNTYuODk5VjE5M1oiIGZpbGw9InVybCgjcGFpbnQwX3JhZGlhbF8yMTUwXzM1NykiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kXzIxNTBfMzU3IiB4PSIxMzkuODg1IiB5PSI0OS44ODUiIHdpZHRoPSIyODAuMTE1IiBoZWlnaHQ9IjQ3MC4yMjkiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldCBkeD0iLTUiIGR5PSI1Ii8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNSIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJvdXQiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzIxNTBfMzU3Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzIxNTBfMzU3IiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8ZmlsdGVyIGlkPSJmaWx0ZXIxX2lfMjE1MF8zNTciIHg9IjE0OS44ODUiIHk9IjQ0Ljg4NSIgd2lkdGg9IjI3NS4xMTUiIGhlaWdodD0iNDY1LjIyOSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR4PSI1IiBkeT0iLTUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMi41Ii8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsyPSItMSIgazM9IjEiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjUgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0ic2hhcGUiIHJlc3VsdD0iZWZmZWN0MV9pbm5lclNoYWRvd18yMTUwXzM1NyIvPgo8L2ZpbHRlcj4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDBfcmFkaWFsXzIxNTBfMzU3IiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTEzNi40NyA1MTQuNDM5IC0zODIuNTM4IC0zNzEuNDAzIDQyMCAtMS40OTk5OSkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGQ0M3MCIvPgo8c3RvcCBvZmZzZXQ9IjAuNSIgc3RvcC1jb2xvcj0iI0M4NTBDMCIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0MTU4RDAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K)
    no-repeat center / 100%;
}
.hero h1 {
  margin: 0;
  font-size: clamp(5rem, 14vw, 8rem);
  line-height: 0.95;
  font-weight: 900;
}
.hero p {
  width: 100%;
  max-width: min(42rem, calc(100vw - 2rem));
  margin: 0.5rem auto 0;
  color: rgb(255 255 255 / 80%);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.4;
  overflow-wrap: break-word;
}

.gradient-button svg,
.gradient-border svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.icon-mask {
  height: 36px;
  width: 36px;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.code-mask {
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNvZGUteG1sLWljb24gbHVjaWRlLWNvZGUteG1sIj48cGF0aCBkPSJtMTggMTYgNC00LTQtNCIvPjxwYXRoIGQ9Im02IDgtNCA0IDQgNCIvPjxwYXRoIGQ9Im0xNC41IDQtNSAxNiIvPjwvc3ZnPg==);
}
.palette-mask {
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBhbGV0dGUtaWNvbiBsdWNpZGUtcGFsZXR0ZSI+PHBhdGggZD0iTTEyIDIyYTEgMSAwIDAgMSAwLTIwIDEwIDkgMCAwIDEgMTAgOSA1IDUgMCAwIDEtNSA1aC0yLjI1YTEuNzUgMS43NSAwIDAgMC0xLjQgMi44bC4zLjRhMS43NSAxLjc1IDAgMCAxLTEuNCAyLjh6Ii8+PGNpcmNsZSBjeD0iMTMuNSIgY3k9IjYuNSIgcj0iLjUiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxjaXJjbGUgY3g9IjE3LjUiIGN5PSIxMC41IiByPSIuNSIgZmlsbD0iY3VycmVudENvbG9yIi8+PGNpcmNsZSBjeD0iNi41IiBjeT0iMTIuNSIgcj0iLjUiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxjaXJjbGUgY3g9IjguNSIgY3k9IjcuNSIgcj0iLjUiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvc3ZnPg==);
}
.zap-mask {
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXphcC1pY29uIGx1Y2lkZS16YXAiPjxwYXRoIGQ9Ik00IDE0YTEgMSAwIDAgMS0uNzgtMS42M2w5LjktMTAuMmEuNS41IDAgMCAxIC44Ni40NmwtMS45MiA2LjAyQTEgMSAwIDAgMCAxMyAxMGg3YTEgMSAwIDAgMSAuNzggMS42M2wtOS45IDEwLjJhLjUuNSAwIDAgMS0uODYtLjQ2bDEuOTItNi4wMkExIDEgMCAwIDAgMTEgMTR6Ii8+PC9zdmc+);
}
.globe-mask {
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdsb2JlLWljb24gbHVjaWRlLWdsb2JlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik0xMiAyYTE0LjUgMTQuNSAwIDAgMCAwIDIwIDE0LjUgMTQuNSAwIDAgMCAwLTIwIi8+PHBhdGggZD0iTTIgMTJoMjAiLz48L3N2Zz4=);
}
.smartphone-mask {
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNtYXJ0cGhvbmUtaWNvbiBsdWNpZGUtc21hcnRwaG9uZSI+PHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjIwIiB4PSI1IiB5PSIyIiByeD0iMiIgcnk9IjIiLz48cGF0aCBkPSJNMTIgMThoLjAxIi8+PC9zdmc+);
}
.laptop-mask {
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxhcHRvcC1pY29uIGx1Y2lkZS1sYXB0b3AiPjxwYXRoIGQ9Ik0xOCA1YTIgMiAwIDAgMSAyIDJ2OC41MjZhMiAyIDAgMCAwIC4yMTIuODk3bDEuMDY4IDIuMTI3YTEgMSAwIDAgMS0uOSAxLjQ1SDMuNjJhMSAxIDAgMCAxLS45LTEuNDVsMS4wNjgtMi4xMjdBMiAyIDAgMCAwIDQgMTUuNTI2VjdhMiAyIDAgMCAxIDItMnoiLz48cGF0aCBkPSJNMjAuMDU0IDE1Ljk4N0gzLjk0NiIvPjwvc3ZnPg==);
}
.database-mask {
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWRhdGFiYXNlLWljb24gbHVjaWRlLWRhdGFiYXNlIj48ZWxsaXBzZSBjeD0iMTIiIGN5PSI1IiByeD0iOSIgcnk9IjMiLz48cGF0aCBkPSJNMyA1VjE5QTkgMyAwIDAgMCAyMSAxOVY1Ii8+PHBhdGggZD0iTTMgMTJBOSAzIDAgMCAwIDIxIDEyIi8+PC9zdmc+);
}
.mail-mask {
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1haWwtaWNvbiBsdWNpZGUtbWFpbCI+PHBhdGggZD0ibTIyIDctOC45OTEgNS43MjdhMiAyIDAgMCAxLTIuMDA5IDBMMiA3Ii8+PHJlY3QgeD0iMiIgeT0iNCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjE2IiByeD0iMiIvPjwvc3ZnPg==);
}

.section {
  width: 100%;
  padding: 5rem 1rem;
}
.container {
  width: min(72rem, 100%);
  margin: 0 auto;
}
.section-title {
  margin: 0 0 4rem;
  text-align: center;
  font-size: clamp(2.5rem, 7vw, 4rem);
  line-height: 1;
  font-weight: 800;
}
.about-grid,
.services-grid {
  display: grid;
  gap: 2rem;
}
.about-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
}
.services-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.panel {
  z-index: 1;
  position: relative;

  min-height: 100%;
  /* padding: 2rem; */
  background: rgb(255 255 255 / 4%);
  backdrop-filter: blur(16px);
  transition:
    transform 0.3s ease-in-out,
    background 0.3s ease-in-out,
    opacity 0.5s ease-in-out;
}
.panel:hover {
  transform: scale(1.03);
  background: rgb(255 255 255 / 10%);
}
.panel h3 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
}
.panel p {
  margin: 0;
  color: rgb(255 255 255 / 70%);
  line-height: 1.6;
}

.card-container {
  padding: 0;
  overflow: hidden;
  border-radius: var(--br);
}
.card-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 2rem;
}

.service-card ul {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
  color: rgb(255 255 255 / 80%);
}
.service-card li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.service-card li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--gradient);
  background-size: var(--bg-size);
  animation: var(--animation);
}

.skills {
  text-align: center;
  overflow: hidden;
}
.marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 4rem;
  animation: marquee 28s linear infinite;
}
.marquee span {
  display: grid;
  place-items: center;
  min-width: 8rem;
  min-height: 6.5rem;
  color: white;
  font-weight: 800;
  letter-spacing: 0;
}

footer {
  width: 100%;
  padding: 2rem 1rem;
  border-top: 1px solid rgb(255 255 255 / 10%);
  border-radius: calc(var(--br) * 2) calc(var(--br) * 2) 0 0;
  background: var(--bg-color);
  text-align: center;
  backdrop-filter: blur(12px);
}
.footer-brand {
  width: 100%;
  margin-bottom: 2rem;
}
footer p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  color: rgb(255 255 255 / 70%);
  font-size: 0.9rem;
}
.socials {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
}
.socials a {
  color: rgb(255 255 255 / 70%);
  font-weight: 700;
  transition: color 0.2s ease;
}
.socials a:hover {
  color: white;
}

#scrollTop {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 50;
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transform: translateY(5rem);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
#scrollTop.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top-group {
  position: relative;
  width: 100%;
  height: 100%;
}
.scroll-top-border {
  position: absolute;
  inset: 0;
  border: 2px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  backdrop-filter: blur(5px);
}
.scroll-top-defs {
  position: absolute;
}
.scroll-top-progress {
  position: absolute;
  inset: 0;
  top: -51px;
  left: -51px;
  padding: 96px;
  scale: 0.45;
  mask: url("#progress-circle-mask") 0 0 / 48px 48px no-repeat;
  -webkit-mask: url("#progress-circle-mask");
}
.scroll-top-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background 0.3s ease;
}
.scroll-top-arrow {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.3s ease;
  mask: url("#arrow-up-mask");
  -webkit-mask: url("#arrow-up-mask");
}
#scrollTop:hover .scroll-top-arrow {
  transform: scale(1.1);
}
#scrollTop:hover .scroll-top-center {
  background: rgb(96 165 250 / 10%);
}

.modal {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.modal[hidden] {
  display: none;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(5 12 25 / 40%);
}
.modal-panel {
  z-index: 1;
  width: min(800px, 100%);
  min-height: 648px;
  padding: 1rem;
  background: rgb(255 255 255 / 5%);
  backdrop-filter: blur(8px);
  animation: modal-in 0.3s ease-out;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.modal h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 2rem;
}
.modal h2 svg {
  width: 2rem;
  height: 2rem;
}
.modal-close {
  color: rgb(255 255 255 / 70%);
  background: transparent;
  font-size: 2rem;
  line-height: 1;
}
.modal-close:hover {
  color: white;
}
#contactForm {
  display: grid;
  gap: 1.5rem;
}
#contactForm label {
  display: grid;
  gap: 0.5rem;
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
}
#contactForm input,
#contactForm textarea {
  width: 100%;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 10%);
  color: white;
  padding: 0.7rem 1rem;
  outline: none;
}
#contactForm textarea {
  min-height: 8rem;
  resize: none;
}
#contactForm input::placeholder,
#contactForm textarea::placeholder {
  color: rgb(255 255 255 / 50%);
}
#contactForm input:focus,
#contactForm textarea:focus {
  border-color: rgb(255 255 255 / 50%);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 20%);
}
.submit-button {
  margin: 0 auto;
}
.submit-button[disabled] {
  opacity: 0.5;
  pointer-events: none;
}
.form-message {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  color: white;
  font-size: 0.9rem;
}
.form-message.error {
  border: 1px solid rgb(239 68 68 / 50%);
  background: rgb(239 68 68 / 20%);
}
.form-message.success {
  border: 1px solid rgb(34 197 94 / 50%);
  background: rgb(34 197 94 / 20%);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  60% {
    transform: rotate(-25deg);
  }
  40%,
  80% {
    transform: rotate(10deg);
  }
}

@media (max-width: 800px) {
  .about-grid,
  .services-grid {
    grid-template-columns: 1fr;
  }
  .section {
    padding: 4rem 1rem;
  }
  .panel {
    padding: 1.5rem;
  }
}
@media (max-width: 500px) {
  .intro-stroke {
    -webkit-text-stroke: 1px transparent;
  }
  .hero {
    gap: 2rem;
    padding: 1rem;
  }
  .hero p {
    max-width: 20rem;
  }
  #logo {
    width: 28vh;
    height: 28vh;
  }
  #scrollTop {
    right: 1rem;
    bottom: 1rem;
  }
  .modal-panel {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}