/* ============================================
   COMPONENTS - BUTTONS
   ============================================ */

button {
  padding: 8px 24px;
  border-radius: 32px;
  border: 1px solid white;
  background: none;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  white-space: nowrap;
}

button:hover {
  background: white;
  color: black;
}

button.fill {
  background: white;
  color: black;
  font-weight: 500;
}

button.fill:hover {
  color: var(--bg-default);
}

button:hover {
  transform: translateY(-2px);
  /* box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); */
}

button.text {
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

button.text:hover {
  background: none;
  color: white;
}

button.icon-button,
a.icon-button {
  display: flex;
  align-items: center;
  gap: 8px;
}

button.icon-button span.material-symbols-outlined {
  font-size: 110%;
}

/* ============================================
       COMPONENTS - HEADER
       ============================================ */

header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 199;
  background-color: #010a25cd;
  backdrop-filter: blur(10px);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  padding: 0;
  display: flex;
  align-items: center;
  height: 17px;
  overflow: hidden;
}

.logo a,
.logo img {
  display: block;
  overflow: hidden;
  line-height: 17px;
  font-size: 1rem;
}

.logo h2 {
  margin: 0;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.logo p {
  font-size: 13px;
  color: var(--muted);
}

/* Menu Button (Mobile) */
.menu-button {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent !important;
  font-size: 1.44rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  flex: 0;
  color: white !important;
  outline: none;
  user-select: none;
}

.menu-icon {
  font-size: 1.78rem;
}

/* ============================================
       COMPONENTS - FORM INPUTS
       ============================================ */

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper .material-symbols-outlined {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
  transform: scale(0.8);
}

.input-wrapper textarea + .material-symbols-outlined,
.input-wrapper .material-symbols-outlined:has(+ textarea) {
  top: 16px;
}

form button {
  padding: 12px 32px;
  font-size: 18px;
  margin: 18px 0 0 3px;
  outline: none;
  width: 100%;
}

/* ============================================
       COMPONENTS - AUTOCOMPLETE
       ============================================ */

.autocomplete-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  background: rgba(0, 5, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 250px;
  overflow-y: auto;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.autocomplete-items div {
  padding: 12px 16px;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background-color 0.2s;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.autocomplete-items div:last-child {
  border-bottom: none;
}

.autocomplete-items div:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.autocomplete-active {
  background-color: rgba(64, 126, 255, 0.2) !important;
  color: #ffffff !important;
}

.autocomplete-items strong {
  color: white;
  font-weight: 600;
}

/* ============================================
       COMPONENTS - DECORATIVE ELEMENTS
       ============================================ */

.add-highlight {
  white-space: nowrap;
  position: relative;
  display: inline-block;
  font-weight: 400;
  color: white;
}

.add-highlight::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 100%;
  background: url(/assets/highlight.svg) no-repeat center center;
  background-size: contain;
  height: 10px;
  transform: translateX(-50%) scale(1.1);
}

/* ============================================
     HIGHLIGHT ANIMATION (SVG MARKER)
     ============================================ */

/* .add-highlight {
    position: relative;
    display: inline-block;
    z-index: 1;
  } */

/* .add-highlight::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: -6px;
    width: calc(100% + 12px);
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='244' height='11' viewBox='0 0 244 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M231.575 1.54571C231.867 1.54021 232.272 1.64459 232.609 1.66186C234.009 1.7352 234.544 1.81624 235.871 1.89999C237.77 2.01949 243.533 2.13703 243.442 2.70607C243.442 2.70609 243.442 2.7061 243.442 2.70611C243.442 2.71174 243.441 2.7174 243.44 2.72312C243.418 2.83154 242.949 2.93476 242.875 3.05657C242.8 3.17845 242.831 3.98045 242.155 4.00832C241.206 4.04384 238.669 3.76723 238.213 3.76413C237.859 3.76117 237.416 3.82509 236.952 3.82678C235.474 3.83318 234.562 3.75244 233.282 3.93323C232.756 3.80997 232.224 3.68549 231.686 3.55981C230.981 3.59458 229.894 3.41864 229.45 3.41553C229.084 3.41315 228.876 3.49835 228.521 3.49416C228.12 3.48997 227.504 3.37699 226.759 3.37391C225.534 3.36842 225.302 3.60421 224.553 3.6189C223.755 3.63381 222.6 3.47647 221.635 3.54291C221.513 3.5675 221.391 3.59216 221.269 3.61687C221.355 3.67998 221.44 3.743 221.525 3.80592C221.038 3.82536 220.831 3.69541 220.379 3.68433C219.848 3.67125 219.571 3.78651 219.21 3.77943C218.914 3.77354 218.513 3.66904 218.125 3.66788C217.561 3.66586 217.67 3.80889 217.379 3.83037C217.268 3.83835 215.102 3.88155 214.974 3.88106C214.034 3.87211 213.955 3.67371 213.198 3.64375C211.045 3.55997 209.005 3.69156 207.046 3.72838C206.184 3.74484 205.249 3.72086 204.404 3.67702C205.742 3.16488 202.81 2.70524 203.894 3.55677C202.955 3.42532 202.278 3.64344 201.374 3.5946C200.789 3.56259 200.385 3.43975 199.541 3.43258C198.019 3.41896 196.433 3.74698 196.015 3.122C194.287 3.21177 192.768 2.96568 192.124 3.51812C191.668 3.54879 190.509 3.20434 190.021 3.1536C189.559 3.10644 185.915 2.91895 185.304 2.90479C184.706 2.89084 183.627 2.87193 183.141 2.91947C182.515 2.97685 182.072 3.5856 180.96 2.86383C179.654 2.91249 179.187 2.88963 177.962 2.79745C177.74 2.78081 177.716 2.67275 177.586 2.67176C177.319 2.66989 176.862 2.74685 176.382 2.75385C175.594 2.76543 175.169 2.53345 175.249 2.88465C174.74 2.94103 174.23 2.99797 173.718 3.05547C173.54 2.98668 173.361 2.91774 173.182 2.84864C172.908 2.922 172.633 2.99568 172.358 3.06968C172.686 2.55639 170.748 2.85271 171.374 3.15181C170.377 3.04285 169.375 2.93297 168.368 2.82218C168.507 2.22681 166.202 2.74683 166.392 3.07571C166.279 3.07519 166.165 3.07468 166.052 3.07418C165.061 2.91359 164.145 3.04486 162.926 2.9369C161.706 2.82835 161.819 2.76867 161.449 2.48605C161.16 2.50192 160.872 2.51791 160.583 2.534C159.081 3.31466 159.361 1.96001 156.794 2.56347C155.976 2.06734 153.946 2.32746 152.591 2.48549C152.434 2.5037 152.431 2.60188 152.221 2.63289C151.717 2.70759 150.427 2.58569 150.471 2.905C150.024 2.81495 149.577 2.72451 149.128 2.63368C148.762 2.69378 148.395 2.75424 148.028 2.81505C148.03 2.91575 148.032 3.01644 148.034 3.11714C147.295 2.77874 146.13 2.9181 145.554 2.83966C145.439 2.82366 145.414 2.68345 145.058 2.64733C144.641 2.60436 143.861 2.65125 143.374 2.61051C143.184 2.76869 142.994 2.92726 142.803 3.08622C141.926 3.17998 141.614 2.76639 141.097 2.73797C141.005 2.7329 139.303 2.77809 139.211 2.78817C138.458 2.86664 138.676 3.22351 136.494 3.17226C136.106 3.16293 135.787 3.04098 135.44 3.04003C134.826 3.03748 132.974 3.34916 132.83 3.61909C132.081 3.29615 130.077 3.46292 129.484 3.37525C129.305 3.34803 129.263 3.13314 128.713 3.09532C128.269 3.06418 127.116 3.25583 126.56 3.23616C125.964 3.21427 125.749 3.03425 125.482 3.02551C125.23 3.01745 124.999 3.1698 124.655 3.17486C123.581 3.18831 122.604 2.96438 121.752 2.97456C120.521 2.98858 119.436 3.45721 118.408 3.68021C118.153 3.65652 117.902 3.56497 117.635 3.56981C114.337 3.62662 110.574 3.63301 107.264 3.62C105.724 3.61546 101.87 3.07469 102.92 4.12584C102.385 4.3312 98.4837 4.01562 97.7422 4.03245C97.0015 4.04962 96.4198 4.26694 95.8377 4.28987C94.0814 4.35922 92.8374 4.25746 90.7064 4.51216C90.1558 4.57857 89.5719 4.84125 89.245 4.85144C88.8512 4.8631 88.42 4.64695 87.9094 4.65204C86.6921 4.66572 84.4297 4.83561 83.2613 4.84463C83.0479 4.84568 82.9656 4.64068 82.6585 4.58825C81.4622 4.38292 80.1327 4.46085 80.3933 5.12158C78.8587 4.8081 77.4663 5.22007 76.0606 5.30969C73.0811 5.49474 67.6575 5.61176 65.0764 6.05551C63.4486 6.33488 63.5059 6.6507 61.088 6.52014C60.5514 6.49124 60.0163 6.44082 59.3663 6.40701C57.8476 6.32812 56.4111 5.81437 55.2942 6.61098C53.5952 6.53126 52.263 6.75572 50.9778 6.21259C50.8398 6.37251 50.702 6.53266 50.5642 6.69303C50.3585 6.71072 50.1529 6.72847 49.9474 6.74628C49.8744 6.60698 49.8013 6.46759 49.7283 6.32814C48.2468 6.38752 46.3948 7.11558 45.145 7.20412C43.0526 7.34758 37.6229 7.53312 35.6205 7.49613C34.5582 7.47467 34.5271 7.80181 33.8737 7.18974C33.642 7.25511 33.4105 7.32065 33.1792 7.38635C33.0435 7.54381 32.908 7.70147 32.7726 7.85934C31.4189 7.98046 29.7799 7.89447 28.4917 8.01158C26.145 8.22264 22.6606 8.96688 20.27 8.93405C19.6726 8.92464 18.9057 8.6878 18.3297 8.74953C17.4916 8.8393 17.3382 9.37823 16.2809 9.49967C14.4268 9.71095 10.9279 9.47874 9.21254 9.72266C8.70153 9.79481 8.48643 10.0194 8.13422 10.0819C6.63389 10.3488 5.39964 10.48 4.0069 10.9652C2.4142 10.6423 2.46833 9.96036 1.91299 9.34676C1.49278 8.88428 0.24851 7.83947 0.0371583 7.41163C-0.111361 7.1113 0.249128 6.65999 0.0527376 6.33343C1.85573 5.84519 2.67245 6.06253 4.23544 6.37443C7.03854 6.04358 9.79542 5.73726 12.5836 5.44438C12.8565 5.60194 13.1294 5.75927 13.4024 5.91635C13.4024 5.91675 13.4025 5.91715 13.4025 5.91755C14.4975 6.02161 14.9077 5.50974 15.4795 5.34881C20.8601 3.80512 31.8894 3.73099 37.9511 3.43445C39.2779 3.36395 43.517 2.86582 44.4371 3.08521C44.6749 3.14179 44.7568 3.39599 45.0056 3.3918C47.2115 3.10092 49.4317 2.81917 51.6286 2.54832C56.2122 2.69015 60.899 2.13427 65.502 1.8801C77.9291 1.18479 90.2355 0.666926 102.474 0.502999C104.843 0.470176 107.837 0.266055 110.151 0.337686C111.121 0.367335 111.53 0.696 112.796 0.430949C112.811 0.520644 112.826 0.610327 112.841 0.699997C113.948 0.576786 114.652 0.36534 115.892 0.331867C116.934 0.303379 119.699 0.265418 120.628 0.291807C121.109 0.304661 120.932 0.469048 121.38 0.464452C122.146 0.454885 123.777 0.219448 124.83 0.214001C125.785 0.208727 127.389 0.384161 128.132 0.353921C130.794 0.246131 133.657 -0.0243022 136.482 0.0479593C137.266 0.0682686 138.272 0.266794 138.516 0.261226C138.994 0.249879 139.135 0.058606 139.455 0.0346134C141.09 -0.0862686 143.588 0.147178 145.206 0.161435C150.411 0.208933 155.925 0.170952 161.073 0.259023C164.375 0.312085 169.766 0.354583 172.802 0.52538C173.45 0.561901 173.276 0.740405 173.819 0.748052C174.421 0.756463 174.747 0.63972 175.028 0.634241C176.973 0.593281 181.349 0.550953 183.155 0.705562C183.5 0.735002 183.756 0.874773 183.971 0.8781C184.079 0.880026 184.325 0.792509 184.664 0.789542C187.673 0.763753 189.732 0.860806 192.687 0.954271C198.217 1.12853 204.683 1.13335 210.496 1.37977C211.718 1.43222 212.654 1.68797 212.821 1.69004C213.218 1.69618 213.477 1.5492 214.274 1.53447C216.868 1.48655 220.514 1.75763 222.955 1.76163C224.178 1.76412 225.957 1.64047 227.153 1.64297C228.099 1.64428 230.419 1.79578 230.865 1.73453C231.132 1.69742 231.259 1.55247 231.575 1.54571ZM198.641 3.28281C198.814 2.99661 196.987 3.21333 197.665 3.37743C197.808 3.41391 198.595 3.35691 198.641 3.28281ZM113.194 2.94001C113.213 3.05879 113.232 3.17755 113.251 3.29629C113.489 3.24133 113.728 3.18655 113.967 3.13194C113.831 3.06343 113.695 2.99482 113.559 2.92613C113.437 2.93074 113.316 2.93536 113.194 2.94001Z' fill='%23FFE54C' opacity='0.7'/%3E%3C/svg%3E");
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    z-index: -1;
    opacity: 0;
    transition: background-size 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  } */

/* Trigger animation when visible */
/* .add-highlight.visible::before {
    background-size: 100% 100%;
    opacity: 1;
  } */

/* Accent Lines */
.add-accent,
.add-accent-alt,
.add-accent-bottom {
  position: relative;
  display: inline-block;
  margin-top: 1em;
}

.add-accent::before,
.add-accent-alt::before,
.add-accent-bottom::before {
  content: "";
  position: absolute;
  top: -0.5em;
  left: 3px;
  height: 2px;
  border-radius: 8px;
  width: 3%;
  min-width: 40px;
  background: var(--text-secondary);
}

.add-accent-alt::before {
  background: var(--text-accent);
}

/* ============================================
       COMPONENTS - PARALLAX LAYERS
       ============================================ */

.parallax {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layer {
  position: absolute;
  width: 100%;
  height: 130%;
  object-fit: cover;
  top: 0;
  left: 0;
  will-change: transform;
  transition: transform 0.1s linear;
}

.layer.front {
  transform: translateY(0);
  mix-blend-mode: overlay;
}

.layer.back {
  transform: translateY(0);
}

/* ============================================
       SECTIONS - HERO
       ============================================ */

.section-hero {
  position: relative;
  overflow: hidden;

  padding-top: 14vh;
  margin-top: 70px;
  min-height: 88vh;
  background-color: #010512;
  /* background: url("/assets/splash/splash-bg-025.jpeg") no-repeat 50% 100% / cover; */

  background: linear-gradient(
      to right,
      hsl(230, 41%, 12%, 0.8) 0%,
      hsla(235, 57%, 5%, 0.5) 35%,
      hsla(235, 57%, 5%, 0.25) 55%,
      hsla(235, 57%, 5%, 0) 70%
    ),
    url("/assets/splash/splash-bg-025.jpeg") no-repeat 50% 100% / cover;

  /* background-attachment: fixed; */

  /* background: #bdc3c7;  fallback for old browsers */
  /* background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);  Chrome 10-25, Safari 5.1-6 */
  /* background: linear-gradient(to right, #2c3e50, #bdc3c7); W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-size: auto 100%;
  align-items: flex-start;
  gap: 24px;
  /* background-attachment: fixed; */
  /* background-blend-mode: darken; */

  /* url("/static/media/mask.b4f108ee0bfd8de5334ae59e054b1302.svg") 5.5% 2% / 7.44rem, linear-gradient(to left top, rgb(71, 22, 58) 6%, rgb(8, 21, 60) 18%, rgb(0, 8, 31) 48%, rgb(8, 21, 59) 100%) center center / auto */
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Poster & video share geometry */
.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Initial states */
.hero-poster {
  opacity: 1;
  transition: opacity 1.2s ease;
}

.hero-video {
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* Active video state */
.section-hero.video-ready .hero-video {
  opacity: 1;
}

.section-hero.video-ready .hero-poster {
  opacity: 0;
}

/* Content above media */
.section-hero .content {
  position: relative;
  z-index: 2;
}

/* //// END OF HERO VIDEO  ///// */

.hero-title {
  font-size: 48px;
  line-height: 1.2;
  text-shadow: 0 -10px 50px rgba(3, 17, 71, 0.373);
  /* color: black; */
}

.hero-text {
  font-size: 20px;
  line-height: 1.6;
  margin-top: 20px;
}

.hero-buttons {
  margin-top: 40px;
  display: flex;
  gap: 24px;
  font-size: 20px;
}

.hero-buttons button {
  font-size: 17px;
  font-weight: 300;
  padding: 12px 32px;
}

.hero-buttons button.text {
  padding-left: 0;
  padding-right: 0;
}

/* ============================================
       SECTIONS - WHAT IF
       ============================================ */

.section-wif {
  min-height: 75vh;
  padding: 20px 20px 40px;
  /* background: radial-gradient(circle, hsla(223, 66%, 14%, 0.789) 30%, hsl(235, 57%, 5%) 100%); */

  /* /assets/wif-visual-03.png */

  /* background: linear-gradient(to right,
        hsl(235, 57%, 5%) 0%,
        hsla(235, 57%, 5%, 0.95) 35%,
        hsla(235, 57%, 5%, 0.6) 55%,
        hsla(235, 57%, 5%, 0) 70%),
      url("/assets/wif-grid-desktop-03.svg");
      
      */

  background: linear-gradient(
      to right,
      hsl(235deg 57% 5% / 68%) 0%,
      hsl(235deg 57% 5% / 30%) 35%,
      hsl(235deg 57% 5% / 18%) 55%,
      hsla(235, 57%, 5%, 0) 70%
    ),
    url(/assets/wif-grid-desktop-03.svg);

  background-repeat: no-repeat;
  background-position: 25% 50%;
  background-size: auto 200%;
}

.wif-title {
  line-height: 1.3;
  font-size: 2.488rem;
}

.wif-text {
  /* margin-top: 18px; */
  font-size: 1.2rem;
  font-weight: 300;
  color: white;
  margin-top: 1.25em;
}

.wif-visual {
  position: relative;
  width: 100%;
  max-width: 600px;
  min-height: 360px;
}

.wif-cards {
  display: flex;
  gap: 24px;
  margin-top: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.wif-card {
  max-width: 240px;
  flex: 1;
}

.wif-card .icon-wrapper {
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  border-radius: var(--border-radius);
  border: 1px solid var(--text-muted);
  aspect-ratio: 1 / 1;
  max-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1em;
  color: var(--text-secondary);
}

.wif-card h5 {
  font-size: 1.1rem;
  font-weight: 500;
}

.wif-card p {
  font-size: 1rem;
  color: var(--text-muted-alt2);
  line-height: 1.25rem;
}

/* ============================================
       SECTIONS - VIDEO
       ============================================ */

.section-video {
  padding: 12vh 3vw 40px;
  background: url("/assets/splash/splash-bg-004.jpeg") no-repeat 50% bottom / cover;
  background-attachment: fixed;

  /* background: linear-gradient(to top right, hsl(235deg 57% 5% / 68%) 0%, hsla(235, 57%, 5%, 0) 80%),
    url(/assets/splash/splash-bg-004.jpeg) 20% 100% / cover no-repeat fixed !important ; */
}

.video-player {
  position: relative;
  background: rgba(220, 220, 220, 0.1);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin: 0 auto;
  backdrop-filter: blur(10px);
  flex: 1 0 60%;
  cursor: pointer;
}

.video-player::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 12px;
  box-shadow: 0 25px 40px 20px #01030688;
  mix-blend-mode: inherit;
}

.video-container {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 10px 20px 250px 40px hsla(225, 29%, 44%, 0.365);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.video-container video,
.video-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video Toolbar */
.toolbar {
  display: flex;
  align-items: center;
  padding: 0 4px;
  gap: 8px;
}

.toolbar span {
  display: block;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

/* Poster Slideshow */
.poster-slideshow {
  width: 100%;
  height: 100%;
  position: relative;
}

.poster-slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out, transform 5s linear 0.5s;
  transform: scale(1);
}

.poster-slideshow .slide.active {
  opacity: 1;
  transform: scale(1.03);
}

/* Play Button */
.play-button {
  width: 14%;
  min-width: 50px;
  max-width: 100px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  background-color: rgba(138, 206, 255, 0.2);
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
}

.play-button img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 36%;
  margin-left: 4%;
  opacity: 0.66;
}

.play-button:hover,
.play-button:active {
  background: rgba(193, 227, 255, 0.25);
  transform: translate(-50%, -50%) scale(1.05);
}

/* Video Punchline */
.video-punchline {
  /* min-width: 40vw; */
  color: var(--text-default-alt);
  text-align: left;
  margin: 10px 0 20px;
  /* min-height: 200px; */
  font-size: 2.4rem;
  font-weight: 300;
  z-index: 300;
  max-width: 814px;
  padding: 0 20px;

  display: block;
  height: 280px;
  overflow: hidden;
  padding-top: 0;
  /* margin-top: 0; */
}

.video-punchline p {
  font-size: inherit;
  color: inherit;
}

/* ============================================
       SECTIONS - PRODUCT
       ============================================ */

.section-product {
  background: radial-gradient(circle, hsla(223, 66%, 14%, 0.789) 30%, hsl(235, 57%, 5%) 100%);
}

.product-punchline {
  margin: 60px auto 0;
  text-align: center;
  font-size: 1.9rem;
}

/* Features & Metrics Groups */
.features-group,
.metrics-group {
  width: 100%;
  display: flex;
  justify-content: center;
  font-weight: 300;
  margin-top: 60px;
  gap: 18px;
}

/* Shared Box Styles */
.feature-box,
.metric-box {
  background: rgba(255, 255, 255, 0.03);
  padding: 8px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: hand;
  position: relative;
  z-index: 100;
  overflow: visible;
  cursor: pointer;
  transition: all 2.4s cubic-bezier(0.16, 1, 0.3, 1); /* slow restore */
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.feature-box h5 {
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 400;
  padding: 1.25em 0.5em 1em;
  color: white;
  opacity: 0.66;
  transition: opacity 0.6s;
  /* transition: opacity 0.6s; */
  transition-timing-function: ease-in-quart;
}

.feature-box img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  opacity: 0.75;
  filter: saturate(0.9) contrast(1.05) hue-rotate(-7deg);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: block;
  /* aspect-ratio: 367 / 208; */
  aspect-ratio: 427 / 240;
  min-height: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  align-self: center;
}

.feature-box::before {
  content: "";
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 10;
  filter: blur(16px);
  opacity: 0;
  transition: opacity 0.6s;
  /* transition: opacity 0.6s; */
  transition-timing-function: ease-in-quart;
}

/* Metric Box Specific */
.metric-box {
  text-align: start;
  padding: 30px calc(20px + 1vw) 18px;
  min-width: 280px;
  gap: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #3e436e47;
  backdrop-filter: blur(16px);
  flex: 1;
  max-width: 100%;
  padding-bottom: 0.25em;
  transition: all 2.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none;
}

.metric-box h4 {
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: 400;
}

.metric-box h5 {
  font-size: 3.815rem;
  line-height: 1.3;
  font-weight: 300;
}

.metric-box small {
  font-size: 0.83rem;
  display: block;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Desktop hover  */
@media (hover: hover) and (pointer: fine) {
  .feature-box:hover,
  .metric-box:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 20px 50px rgba(18, 24, 72, 0.6);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .feature-box:hover::before {
    opacity: 0.3;
  }

  .feature-box:hover img {
    opacity: 1;
    filter: saturate(1.1) contrast(1) hue-rotate(-7deg);
    transform: scale(1.03);
  }

  .feature-box:hover h5 {
    opacity: 1;
  }

  .metric-box:hover {
    backdrop-filter: blur(8px);
    background-color: #4347763a;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

/* Counter Animation Styles */
.counter-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  /* font-variant-numeric: tabular-nums; */
  /* font-feature-settings: "tnum"; */
}

.digit-wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.3em;
  vertical-align: baseline;
  width: 0.65em;
  text-align: center;
}

.digit-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: opacity 1s linear;
  will-change: transform, opacity;
  opacity: 1;
  margin-left: -0.1em;
}

.digit-column.animating {
  opacity: 0.75;
}

.digit-column span {
  display: block;
  height: 1.3em;
  line-height: 1.3;
  width: 100%;
  text-align: center;
}

.counter-suffix {
  display: inline-block;
  margin-left: 0.1em;
}

.counter-wrapper.has-suffix .digit-wrapper:last-of-type {
  margin-right: 0.05em;
}

/* ============================================
       SECTIONS - CAPABILITIES
       ============================================ */

.section-capabilities {
  padding-top: 8vh;
  min-height: 50vh;
  background: transparent url("/assets/splash/splash-bg-012.png") repeat 50% 50% / cover;
  background-attachment: fixed !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: none;
  border-right: none;
}

/* ============================================
       SECTIONS - CONTACT
       ============================================ */

.section-contact {
  padding-top: 8vh;
  padding-bottom: 140px;
  background: var(--bg-default) url("/assets/splash/splash-bg-006w5.png") no-repeat center bottom / auto 100%;
}

.contact-form {
  padding: 24px 24px 40px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 100px rgba(1, 26, 55, 0.384);
  backdrop-filter: blur(6px);
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  grid-template-areas:
      /* "first-name last-name" */
    "full-name full-name"
    "email email"
    "phone country"
    "company company"
    "message message"
    "form-status form-status"
    "submit terms";
}

/* ============================================
       SECTIONS - FOOTER
       ============================================ */

footer .logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: auto;
}

.sitemap {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  align-items: flex-start;
  color: var(--text-muted-alt2);
}

.sitemap .column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.sitemap a {
  font-weight: 400;
  transition: color 0.3s;
}

.sitemap a:hover,
.sitemap a:active {
  color: var(--text-default);
}

/* ============================================
       COMPONENTS - VIDEO MODAL
       ============================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 1000px;
  aspect-ratio: 16/9;
  background: black;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

.video-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

.close-modal {
  position: absolute;
  top: -50px;
  right: 0;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.close-modal:hover {
  transform: scale(1.1);
}

.close-modal .material-symbols-outlined {
  font-size: 32px;
  opacity: 0.8;
}

.close-modal:hover .material-symbols-outlined {
  opacity: 1;
}

/* Modal 2.0 LOCAL */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.video-modal.active {
  display: block;
}

.video-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0.85);
  backdrop-filter: blur(6px);
}

.video-modal-content {
  position: relative;
  width: min(90vw, 1200px);
  aspect-ratio: 16 / 9;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}

.video-modal video {
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 12px;
}

.video-close {
  position: absolute;
  top: -48px;
  right: 0;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

/* ============================================
       UTILITY - TEXT PRESETS
       ============================================ */

.pre-title {
  color: var(--text-secondary);
  text-align: center;
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 6px;
}

/* ============================================
       UTILITY - SPACING & POSITIONING
       ============================================ */

.gap-30 {
  gap: 30px;
}

.gap-3vw {
  gap: 3vw;
}

.flex-1-45 {
  flex: 1 1 45%;
}

.flex-1-55 {
  flex: 1 1 55%;
}

.align-center {
  align-items: center;
}

.mt-40 {
  margin-top: 40px;
}

.mt-60 {
  margin-top: 60px;
}

.ma-60-auto-0 {
  margin: 60px auto 0;
}

.justify-evenly {
  justify-content: space-evenly;
}

/* ============================================
       UTILITY - GRID AREAS
       ============================================ */

/* .grid-first-name {
    grid-area: first-name;
  }
  
  .grid-last-name {
    grid-area: last-name;
  } */

.grid-full-name {
  grid-area: full-name;
}

.grid-email {
  grid-area: email;
}

.grid-phone {
  grid-area: phone;
}

.grid-country {
  grid-area: country;
}

.grid-company {
  grid-area: company;
}

.grid-message {
  grid-area: message;
}

.grid-form-status {
  grid-area: form-status;
  padding: 1em;
  text-align: center;
  /* background-color: rgba(0, 0, 0, 0.1); */
  font-size: 1.2rem;
}

.grid-terms {
  grid-area: terms;
}

.grid-submit {
  grid-area: submit;
}

/* ============================================
       SPECIFIC COMPONENTS
       ============================================ */

.wif-visual-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  min-height: 360px;
}

.wif-visual-img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-tagline {
  color: var(--muted2);
}

.fw-100 {
  font-weight: 100;
}