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

html,
body {
   height: 100%;
}

:root {
   --nav-h: 64px;
   --nav-safe: 160px;
   --primary-font: Syne, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
   --secondary-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
   --primary-color: #ffffffdd;
   --bg-1: #0e0a12;
   --bg-2: #241635;
   --bg-3: #742a5a;
   --text: #fff7fb;
   --muted: #e9d2e2;
   --accent: #ffb4d3;
}

body {
   font-family: var(--secondary-font);
   color: var(--primary-color);
   background: radial-gradient(
         1100px 800px at 18% 18%,
         var(--bg-2),
         transparent 60%
      ),
      radial-gradient(950px 700px at 86% 28%, var(--bg-3), transparent 55%),
      var(--bg-1);
}

h1 {
   font-family: var(--primary-font);
   font-weight: 900;
   line-height: 1.05;
   font-size: clamp(36px, 7.2vw, 78px);
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.274);
}

h2 {
   font-family: var(--secondary-font);
   font-weight: 400;
   line-height: 1.3;
   margin-top: 40px;
   font-size: clamp(16px, 2vw, 23px);
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.274);
}

h1,
h2 {
   color: var(--text);
}
p {
   color: var(--muted);
}
a {
   color: var(--accent);
}
a:hover {
   background: var(--accent);
   color: #2a0f22;
}

.hero {
   display: grid;
   place-items: center;
   padding-inline: 24px;
   min-block-size: calc(100vh - var(--nav-h));
}

.hero-box {
   width: min(92vw, 1100px);
   margin-inline: auto;
   padding: 24px 28px;
}

.site-nav {
   font-size: 0.7rem;
   padding: 0.45rem 0.8rem;
   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 1000;
}

.border-white {
   border: 2px solid var(--primary-color) !important;
}

.socials {
   font-size: 24px;
   position: fixed;
   left: clamp(20px, 3vw, 40px);
   bottom: clamp(20px, 3vw, 40px);
   display: flex;
   flex-direction: column;
   gap: 12px;
   z-index: 1000;
}

.socials a {
   display: grid;
   place-items: center;
   width: 28px;
   height: 28px;
   color: var(--primary-color);
   text-decoration: none;
}

.socials a:hover {
   color: var(--primary-color);
}

.about,
.work,
.contact {
   font-family: var(--secondary-font), sans-serif;
   font-weight: 400;
   line-height: 1.35;
   margin-top: 40px;
   font-size: clamp(12px, 1.4vw, 18px);
   color: var(--primary-color);
}

.carousel-images {
   text-decoration: none;
   margin-top: 40px;
   color: #4f062d;
}

.app-links {
   text-decoration: none;
   margin-top: 40px;
   color: var(--bg-3);
}

.btn-outline-light:hover {
   background: var(--accent);
   color: #2a0f22;
   border-color: var(--accent);
}

.site-nav .btn {
   padding: 0.45rem 0.9rem;
   line-height: 1.1;
   border-radius: 10px;
}

.btn {
   font-size: 0.7rem;
   padding: 0.45rem 0.9rem;
   line-height: 1.1;
   border-radius: 10px;
}

.reach-out {
   display: block;
   gap: 0.75rem;
   align-items: baseline;
   flex-wrap: wrap;
}

@media (min-width: 992px) {
   .hero h1 {
      max-width: calc(100% - var(--nav-safe));
   }
   .hero-box h2 {
      text-align: right;
   }
}

@media (max-width: 991.98px) {
   .hero-box {
      padding: 16px 18px;
      text-align: center;
      margin-top: 0.25rem;
   }
   .carousel-images {
      font-size: 60px;
      color: transparent;
   }
   .list {
      list-style-type: none;
   }
   .reach-out {
      justify-content: center;
      text-align: center;
   }
}

@media (max-width: 575.98px) {
   .hero {
      padding-top: 56px;
   }
   .carousel-images {
      font-size: 40px;
      color: transparent;
   }

   .list {
      list-style-type: none;
   }

   .site-nav {
      left: 50%;
      right: auto;
      top: 20px;
      transform: translateX(-50%);
   }

   .socials {
      left: 50%;
      right: auto;
      bottom: calc(16px + env(safe-area-inset-bottom));
      transform: translateX(-50%);
      flex-direction: row;
      gap: 16px;
   }
}