.home-page {
   background: var(--bg);

   #main-nav.home-nav {
      background:
         linear-gradient(90deg, rgba(0, 44, 153, 0.98), rgba(0, 71, 255, 0.94)),
         var(--primary-color);
      border-bottom: 4px solid var(--accent-color);

      .logo-area {
         color: var(--text-light);
         text-decoration: none;
      }

      .logo-img {
         height: 62px;
         filter:
            drop-shadow(2px 0 0 #fff)
            drop-shadow(-2px 0 0 #fff)
            drop-shadow(0 2px 0 #fff)
            drop-shadow(0 -2px 0 #fff)
            drop-shadow(0 10px 12px rgba(0, 0, 0, 0.22))
            drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
      }

      .nav-links {
         a,
         button {
            color: var(--text-light);

            &:hover {
               color: var(--accent-color);
            }
         }

      }
   }

   main.home-main {
      display: block;
      background: var(--bg);

      > section {
         position: relative;
         display: block;
         clear: both;
         width: 100%;
         min-height: 0;
         overflow: visible;
      }
   }

   footer {
      background: var(--footer-color);
   }
}

.eyebrow {
   margin: 0 0 12px;
   color: var(--accent-color);
   font-size: 0.82rem;
   font-weight: 800;
   letter-spacing: 0;
   text-transform: uppercase;
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.home-hero {
   position: relative;
   isolation: isolate;
   display: grid;
   align-content: end;
   min-height: min(760px, calc(100svh - 74px));
   padding: clamp(96px, 15vh, 170px) 5% 32px;
   color: var(--text-light);
   background: var(--dark-color);

   .home-hero__media,
   .home-hero__overlay {
      position: absolute;
      inset: 0;
   }

   .home-hero__media {
      z-index: 0;
      overflow: hidden;
      background-image: url('../imgs/logos-bg/portal.webp');
      background-position: center;
      background-size: cover;
      animation: heroPhotoReveal 1.1s ease both;
   }

   .home-hero__video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      pointer-events: none;
      user-select: none;
   }

   .home-hero__overlay {
      z-index: 1;
      background: transparent;
   }

   .home-hero__content {
      position: relative;
      z-index: 2;
      max-width: 1120px;
      padding-bottom: clamp(34px, 7vh, 74px);
   }

   .eyebrow,
   .hero-brand-title,
   .hero-actions {
      opacity: 0;
      transform: translateY(22px);
      animation: heroContentReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
   }

   .eyebrow {
      animation-delay: 0.12s;
   }

   .hero-brand-title {
      animation-delay: 0.24s;
   }

   .hero-actions {
      animation-delay: 0.52s;
   }

   .hero-brand-title {
      display: block;
      max-width: 760px;
      margin: 0;
   }

   .hero-brand-title__logo {
      width: clamp(340px, 46vw, 700px);
      max-height: 320px;
      object-fit: contain;
      display: block;
      filter:
         drop-shadow(2px 0 0 #fff)
         drop-shadow(-2px 0 0 #fff)
         drop-shadow(0 2px 0 #fff)
         drop-shadow(0 -2px 0 #fff);
   }
}

.reveal-on-scroll {
   opacity: 0;
   transform: translateY(34px);
   transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
   transition-delay: var(--reveal-delay, 0ms);
   will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
   opacity: 1;
   transform: translateY(0);
}

.service-card.reveal-on-scroll,
.home-news-card.reveal-on-scroll,
.experience-card.reveal-on-scroll {
   transform: translateY(38px) scale(0.98);
}

.service-card.reveal-on-scroll.is-visible,
.home-news-card.reveal-on-scroll.is-visible,
.experience-card.reveal-on-scroll.is-visible {
   transform: translateY(0) scale(1);
}

.service-card.reveal-on-scroll.is-visible:hover {
   transform: translateY(-3px) scale(1);
}

@keyframes heroPhotoReveal {
   from {
      opacity: 0;
      transform: scale(1.04);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

@keyframes heroContentReveal {
   from {
      opacity: 0;
      transform: translateY(22px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

.hero-actions {
   margin-top: 28px;
}

.btn-primary,
.btn-secondary,
.text-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 46px;
   padding: 12px 20px;
   border-radius: 6px;
   font-weight: 800;
   text-decoration: none;
   transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;

   &:hover {
      transform: translateY(-2px);
   }
}

.btn-primary {
   background: var(--accent-color);
   color: var(--dark-color);
}

.btn-secondary {
   border: 1px solid rgba(255, 255, 255, 0.68);
   color: var(--text-light);
}

.services-section,
.home-news-section,
.intro-section,
.experiences-section,
.feature-section {
   padding: clamp(54px, 7vw, 88px) 5%;
}

.services-section {
   background: var(--bg);
}

.services-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 16px;
   max-width: 1180px;
}

.service-card {
   display: flex;
   align-items: center;
   gap: 14px;
   min-height: 96px;
   padding: 20px;
   border: 1px solid rgba(0, 44, 153, 0.12);
   border-radius: 8px;
   background: var(--secondary-bg);
   color: var(--main-text);
   text-decoration: none;
   box-shadow: 0 16px 38px rgba(0, 44, 153, 0.09);
   transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

   &:hover {
      transform: translateY(-3px);
      border-color: rgba(0, 71, 255, 0.28);
      box-shadow: 0 20px 46px rgba(0, 44, 153, 0.14);
   }

   i {
      display: grid;
      place-items: center;
      flex: 0 0 42px;
      width: 42px;
      height: 42px;
      border-radius: 8px;
      background: var(--accent-color);
      color: var(--dark-color);
      font-size: 1.15rem;
   }

   span {
      font-size: 1.05rem;
      font-weight: 900;
      line-height: 1.2;
   }
}

.home-news-section {
   display: block;
   background: var(--secondary-bg);
}

.home-news-inner {
   display: block;
   width: min(1180px, 100%);
   margin-bottom: 0;
}

.home-news-header,
.section-heading {
   max-width: 920px;
   margin-bottom: 30px;

   h2 {
      margin: 0;
      color: var(--main-text);
      font-size: clamp(2rem, 4.4vw, 4rem);
      line-height: 1.02;
   }
}

.home-news-header {
   margin-bottom: 0;

   p {
      margin: 12px 0 0;
      color: var(--text-color);
      font-size: 1.05rem;
      line-height: 1.75;
   }
}

.home-news-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 24px;
   width: 100%;
   max-width: 1180px;
   align-items: stretch;
}

.home-news-grid--single {
   grid-template-columns: minmax(280px, calc((100% - 24px) / 2));
}

.home-news-card {
   display: flex;
   flex-direction: column;
   min-height: 390px;
   overflow: hidden;
   border: 1px solid rgba(0, 44, 153, 0.12);
   border-radius: 8px;
   background: var(--secondary-bg);
   box-shadow: 0 18px 42px rgba(0, 44, 153, 0.12);

   h3 {
      margin: 0;
      color: var(--main-text);
      font-size: 1.32rem;
      line-height: 1.25;
   }

   p {
      margin: 0;
      color: var(--text-color);
      line-height: 1.65;
   }
}

.home-news-image {
   min-height: 218px;
   background-position: center;
   background-size: cover;
}

.home-news-image-placeholder {
   display: grid;
   place-items: center;
   color: var(--primary-color);
   font-size: 2rem;
   background: rgba(0, 71, 255, 0.08);
}

.home-news-card-content {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: 12px;
   padding: 22px;
}

.home-news-date {
   color: var(--primary-color);
   font-size: 0.78rem;
   font-weight: 800;
   text-transform: uppercase;
}

.home-news-instagram {
   width: fit-content;
   margin-top: auto;
   color: var(--primary-color);
   font-weight: 800;
   text-decoration: none;
}

.home-news-empty {
   grid-column: 1 / -1;
   padding: 32px;
   border-radius: 8px;
   background: rgba(0, 71, 255, 0.08);
   color: var(--dark-color);
   font-weight: 700;
}

.intro-section {
   display: grid;
   grid-template-columns: minmax(260px, 0.95fr) minmax(300px, 1.05fr);
   gap: clamp(24px, 6vw, 70px);
   align-items: center;
   margin-top: 0;
   background: var(--bg);

   > p {
      max-width: 720px;
      margin: 0;
      color: var(--text-color);
      font-size: 1.05rem;
      line-height: 1.75;
   }
}

.experiences-section {
   background:
      linear-gradient(90deg, rgba(0, 44, 153, 0.98), rgba(0, 71, 255, 0.94)),
      var(--primary-color);

   .eyebrow {
      color: var(--accent-color);
   }

   .section-heading h2 {
      color: var(--text-light);
   }
}

.experience-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
}

.experience-card {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: end;
   min-height: 420px;
   overflow: hidden;
   padding: 24px;
   border: 1px solid rgba(0, 71, 255, 0.28);
   border-radius: 8px;
   color: var(--text-light);
   text-decoration: none;
   background: var(--dark-color);
   box-shadow: 0 20px 46px rgba(0, 44, 153, 0.18);

   img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.35s ease;
   }

   &::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
         linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.34) 46%, rgba(0, 0, 0, 0.08) 100%);
   }

   span,
   p {
      position: relative;
      z-index: 1;
   }

   span {
      font-size: 1.55rem;
      font-weight: 900;
   }

   p {
      max-width: 320px;
      margin: 8px 0 0;
      color: rgba(255, 255, 255, 0.92);
   }

   &:hover img {
      transform: scale(1.05);
   }

   &:hover {
      border-color: rgba(0, 71, 255, 0.52);
      box-shadow: 0 24px 58px rgba(0, 44, 153, 0.24);
   }
}

.feature-section {
   display: grid;
   grid-template-columns: minmax(320px, 520px) minmax(320px, 620px);
   justify-content: center;
   gap: clamp(28px, 5vw, 70px);
   align-items: center;
   overflow: hidden;
   background: var(--bg);
}

.home-page main.home-main > .feature-section {
   display: grid;
}

.feature-media {
   position: relative;
   display: grid;
   place-items: center;
   width: 100%;
   min-height: 380px;
   overflow: hidden;
   border-radius: 8px;
   background:
      radial-gradient(circle at 50% 42%, rgba(255, 214, 0, 0.18), transparent 44%),
      linear-gradient(160deg, rgba(0, 71, 255, 0.08), rgba(0, 44, 153, 0.03));
   border: 1px solid rgba(0, 71, 255, 0.12);
   box-shadow: 0 24px 58px rgba(0, 44, 153, 0.12);

   &::before {
      content: "";
      position: absolute;
      inset: 26px;
      border: 1px solid rgba(0, 71, 255, 0.1);
      border-radius: 8px;
   }

   img {
      position: relative;
      z-index: 1;
      width: min(88%, 390px);
      height: auto;
      transform: rotate(-2deg);
      filter: drop-shadow(0 34px 34px rgba(0, 0, 0, 0.28));
   }
}

.feature-content {
   max-width: 620px;

   .eyebrow {
      color: var(--primary-color);
   }

   h2 {
      margin: 0;
      color: var(--main-text);
      font-size: clamp(2rem, 4.4vw, 4rem);
      line-height: 1.02;
   }

   p {
      margin: 12px 0 0;
      color: var(--text-color);
      font-size: 1.05rem;
      line-height: 1.75;
   }
}

.feature-steps {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
   margin-top: 26px;
}

.feature-step {
   min-height: 118px;
   padding: 16px;
   border: 1px solid rgba(0, 71, 255, 0.12);
   border-radius: 8px;
   background: rgba(0, 71, 255, 0.05);

   span {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: var(--accent-color);
      color: var(--dark-color);
      font-weight: 900;
   }

   p {
      margin-top: 14px;
      color: var(--main-text);
      font-size: 0.96rem;
      font-weight: 800;
      line-height: 1.25;
   }
}

.feature-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 28px;
}

.text-link {
   background: var(--primary-color);
   color: var(--text-light);
}

.feature-section .text-link {
   margin-top: 0;
   background: var(--primary-color);
   color: var(--text-light);
}

.feature-section .text-link-secondary {
   border: 1px solid rgba(255, 255, 255, 0.48);
   background: transparent;
   color: var(--text-light);
}

body.dark {
   &.home-page,
   .services-section,
   .intro-section,
   .home-news-section {
      background: var(--bg);
   }

   .experiences-section {
      background:
         linear-gradient(90deg, rgba(0, 44, 153, 0.98), rgba(0, 71, 255, 0.94)),
         var(--primary-color);

      .eyebrow {
         color: var(--accent-color);
      }

      .section-heading h2 {
         color: var(--text-light);
      }
   }

   .home-news-card {
      background: var(--secondary-bg);
      border-color: rgba(255, 255, 255, 0.08);
   }

   .home-news-header,
   .section-heading,
   .feature-content,
   .intro-section {
      h2,
      p {
         color: var(--text-color);
      }
   }

   .feature-section {
      background: var(--bg);
   }

   .feature-media {
      background:
         radial-gradient(circle at 50% 42%, rgba(255, 214, 0, 0.2), transparent 44%),
         linear-gradient(160deg, rgba(0, 86, 255, 0.22), rgba(0, 51, 170, 0.14));
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 24px 58px rgba(0, 0, 0, 0.32);

      &::before {
         border-color: rgba(255, 255, 255, 0.1);
      }
   }

   .feature-step {
      background: var(--secondary-bg);
      border-color: rgba(255, 255, 255, 0.1);
   }
}

@media (max-width: 900px) {
   .services-grid,
   .experience-grid,
   .intro-section,
   .feature-section {
      grid-template-columns: 1fr;
   }

   .feature-media {
      min-height: 340px;
   }

   .home-hero {
      min-height: auto;
      padding-top: 106px;

      .home-hero__content {
         padding-bottom: 32px;
      }
   }

   .experience-card {
      min-height: 330px;
   }

   .home-news-grid--single {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 768px) {
   .home-page {
      #main-nav {
         .logo-img {
            height: 56px;
         }

         .nav-links {
            background: var(--dark-color);
         }
      }
   }

   .service-pill {
      min-height: 62px;
   }
}

@media (max-width: 560px) {
   .home-hero {
      .hero-brand-title {
         max-width: 100%;
      }

      .hero-brand-title__logo {
         width: min(390px, 90vw);
         max-height: 190px;
      }
   }

   .hero-actions {
      a {
         width: 100%;
      }
   }

   .feature-steps {
      grid-template-columns: 1fr;
   }

   .feature-step {
      display: flex;
      align-items: center;
      min-height: 76px;
      gap: 14px;

      p {
         margin-top: 0;
      }
   }

   .feature-actions a {
      width: 100%;
   }
}

@media (prefers-reduced-motion: reduce) {
   .home-hero {
      .home-hero__media,
      .eyebrow,
      .hero-brand-title,
      .hero-actions {
         animation: none;
         opacity: 1;
         transform: none;
      }

      .home-hero__video {
         display: none;
      }
   }

   .reveal-on-scroll,
   .service-card.reveal-on-scroll,
   .home-news-card.reveal-on-scroll,
   .experience-card.reveal-on-scroll {
      opacity: 1;
      transform: none;
      transition: none;
   }
}