@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.gnb {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  height: 3.5rem;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  background-color: transparent;
  border-bottom: 0.125rem solid transparent;
  &.gnb-transition {
    transition:
      background-color 0.3s ease,
      border-color 0.3s ease;
  }
  &.scrolled {
    background-color: var(--white);
    border-bottom: 0.125rem solid var(--gray-200);
  }
  & a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  & img {
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
    object-fit: cover;
  }
  & span {
    font-size: var(--text-lg);
  }
  @media (min-width: 768px) {
    :is(.device-tablet, .device-desktop) & {
      height: 4rem;
      padding: 0 4rem;
      & a {
        gap: 1rem;
      }
    }
  }
  @media (min-width: 1280px) {
    .device-desktop & {
      padding: 0 15rem;
      & img {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.5rem;
      }
      & span {
        font-size: var(--text-xl);
      }
    }
  }
}

.hero {
  background-image: url("../assets/images/mobile_hero.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(88 / 844 * 100vh) calc(35 / 390 * 100vw) calc(128 / 844 * 100vh);
  & .hero-inner {
    display: contents;
  }
  & strong {
    order: 1;
    color: var(--primary);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-bottom: calc(16 / 844 * 100vh);
  }
  & h1 {
    order: 2;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    margin-bottom: calc(16 / 844 * 100vh);
  }
  & p {
    order: 3;
    font-size: var(--text-base);
    color: var(--gray-500);
  }
  & .mockup-wrap {
    order: 4;
    position: relative;
    display: flex;
    justify-content: center;
    align-self: center;
    height: calc(320 / 844 * 100vh);
    margin-top: calc(24 / 844 * 100vh);
    margin-bottom: calc(47 / 844 * 100vh);
  }
  & .mockup-hero {
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
  }
  & .deco-leaf-left {
    position: absolute;
    object-fit: contain;
    height: auto;
    width: 42.61%;
    left: -30.9%;
    top: 40%;
    z-index: 0;
  }
  & .deco-leaf-right {
    position: absolute;
    object-fit: contain;
    height: auto;
    width: 30.77%;
    right: -18.7%;
    bottom: 8%;
    z-index: 0;
  }
  & .links {
    order: 5;
    display: flex;
    align-self: center;
    gap: calc(16 / 390 * 100vw);
    & a {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    & img {
      width: auto;
      height: calc(48 / 844 * 100vh);
    }
  }
  .device-mobile.orientation-landscape & {
    background-image: url("../assets/images/mobile_landscape_hero.webp");
    background-position: 80% 60%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: calc(64 / 390 * 100vh) calc(80 / 844 * 100vw)
      calc(62 / 390 * 100vh);
    & .hero-inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }
    & strong,
    & h1,
    & p,
    & .links {
      order: 0;
      align-self: flex-start;
    }
    & strong {
      margin-bottom: calc(12 / 390 * 100vh);
    }
    & h1 {
      margin-bottom: calc(12 / 390 * 100vh);
    }
    & .mockup-wrap {
      order: 0;
      margin: 0;
      height: calc(320 / 390 * 100vh);
    }
    & .deco-leaf-left {
      position: absolute;
      width: 34.715%;
      left: -23.3%;
      top: 45%;
    }
    & .deco-leaf-right {
      position: absolute;
      width: 30.77%;
      right: -18.7%;
      bottom: 8%;
    }
    & .links {
      margin-top: calc(24 / 390 * 100vh);
      gap: calc(16 / 767 * 100vw);
      & img {
        height: calc(48 / 390 * 100vh);
      }
    }
  }
  @media (min-width: 768px) {
    :is(.device-tablet, .device-desktop) & {
      background-image: url("../assets/images/tablet_hero.webp");
      background-position: center;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 calc(80 / 768 * 100vw) 0 calc(64 / 768 * 100vw);
      & .hero-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
      }
      & strong,
      & h1,
      & p,
      & .links {
        order: 0;
        align-self: flex-start;
      }
      & strong {
        font-size: var(--text-4xl);
        margin-bottom: calc(24 / 768 * 100vw);
      }
      & h1 {
        font-size: var(--text-3xl);
        margin-bottom: calc(24 / 768 * 100vw);
      }
      & p {
        font-size: var(--text-lg);
      }
      & .mockup-wrap {
        order: 0;
        margin: 0;
        height: calc(480 / 1024 * 100vh);
      }
      .deco-leaf-left {
        position: absolute;
        width: 34.715%;
        left: -23.3%;
        top: 45%;
      }
      .deco-leaf-right {
        position: absolute;
        width: 30.77%;
        right: -18.7%;
        bottom: 8%;
      }
      & .links {
        margin-top: calc(88 / 1024 * 100vh);
        gap: calc(16 / 768 * 100vw);
        & img {
          height: calc(56 / 1024 * 100vh);
        }
      }
    }
  }
  @media (min-width: 768px) {
    :is(
        .device-tablet.orientation-landscape,
        .device-desktop.orientation-landscape
      )
      & {
      background-image: url("../assets/images/tablet_landscape_hero.webp");
      padding: 0 calc(120 / 1024 * 100vw) 0 calc(64 / 1024 * 100vw);
      & strong {
        margin-bottom: calc(24 / 768 * 100vh);
      }
      & h1 {
        margin-bottom: calc(24 / 768 * 100vh);
      }
      & .mockup-wrap {
        height: calc(480 / 768 * 100vh);
      }
      & .links {
        margin-top: calc(88 / 768 * 100vh);
        & img {
          height: calc(56 / 768 * 100vh);
        }
      }
    }
  }
  @media (min-width: 1280px) {
    .device-desktop.orientation-landscape & {
      background-image: url("../assets/images/desktop_hero.webp");
      padding: 0 calc(160 / 1440 * 100vw) 0 calc(240 / 1440 * 100vw);
      & strong {
        font-size: var(--text-5xl);
        margin-bottom: calc(16 / 900 * 100vh);
      }
      & h1 {
        font-size: var(--text-4xl);
        margin-bottom: calc(16 / 900 * 100vh);
      }
      & p {
        font-size: var(--text-2xl);
      }
      & .mockup-wrap {
        height: calc(560 / 900 * 100vh);
      }
      & .deco-leaf-left {
        width: calc(96 / 1440 * 100vw);
        top: calc(268 / 900 * 100vh);
        left: calc(-62 / 1440 * 100vw);
      }
      & .deco-leaf-right {
        width: calc(88 / 1440 * 100vw);
        bottom: calc(44 / 900 * 100vh);
        right: calc(-54 / 1440 * 100vw);
      }
      & .links {
        margin-top: calc(96 / 900 * 100vh);
        gap: calc(16 / 1440 * 100vw);
        & img {
          height: calc(64 / 900 * 100vh);
        }
      }
    }
  }
  @media (min-width: 900px) {
    .device-desktop.orientation-portrait & {
      background-image: url("../assets/images/desktop_portrait_hero.webp");
      flex-direction: column;
      padding: calc(184 / 1440 * 100vh) calc(230 / 900 * 100vw)
        calc(200 / 1440 * 100vh) calc(80 / 900 * 100vw);
      & .hero-inner {
        display: contents;
      }
      & strong,
      & h1,
      & p,
      & .links {
        align-self: flex-start;
      }
      & strong {
        order: 1;
        font-size: var(--text-5xl);
        margin-bottom: calc(16 / 1440 * 100vh);
      }
      & h1 {
        order: 2;
        font-size: var(--text-4xl);
        margin-bottom: calc(16 / 1440 * 100vh);
      }
      & p {
        order: 3;
        font-size: var(--text-2xl);
      }
      & .mockup-wrap {
        order: 4;
        align-self: flex-end;
        margin-right: calc(72 / 900 * 100vw);
        height: calc(560 / 1440 * 100vh);
        margin-top: calc(56 / 1440 * 100vh);
        margin-bottom: calc(42 / 1440 * 100vh);
      }
      & .deco-leaf-left {
        width: calc(96 / 900 * 100vw);
        top: calc(268 / 1440 * 100vh);
        left: calc(-62 / 900 * 100vw);
      }
      & .deco-leaf-right {
        width: calc(88 / 900 * 100vw);
        bottom: calc(44 / 1440 * 100vh);
        right: calc(-54 / 900 * 100vw);
      }
      & .links {
        order: 5;
        align-self: flex-end;
        margin-top: 0;
        gap: calc(16 / 900 * 100vw);
        & img {
          height: calc(64 / 1440 * 100vh);
        }
      }
    }
  }
}

.scroll-down-wrap {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-user-drag: none;
  z-index: 10;
  & .scroll-down {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    cursor: pointer;
    animation: bounce 2s infinite;
  }
  .device-mobile.orientation-landscape & {
    bottom: 1rem;
  }
  @media (min-width: 768px) {
    :is(.device-tablet, .device-desktop) & {
      width: 4rem;
      height: 4rem;
      bottom: 4.5rem;
      & .scroll-down {
        width: 3rem;
        height: 3rem;
      }
    }
  }
  @media (min-width: 1280px) {
    .device-desktop & {
      width: 4.5rem;
      height: 4.5rem;
      & .scroll-down {
        width: 3.5rem;
        height: 3.5rem;
      }
    }
  }
}

.sympathy {
  scroll-margin-top: 3.5rem;
  background-color: var(--bg);
  padding: calc(80 / 844 * 100vh) 0;
  text-align: center;
  & .sympathy-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 / 844 * 100vh);
    & h2,
    & p {
      font-size: var(--text-lg);
      font-weight: var(--weight-semibold);
    }
  }
  .device-mobile.orientation-landscape & {
    padding: calc(120 / 390 * 100vh) 0;
    & .sympathy-inner {
      gap: calc(16 / 390 * 100vh);
    }
  }
  @media (min-width: 768px) {
    :is(.device-tablet, .device-desktop) & {
      scroll-margin-top: 4rem;
      padding: calc(160 / 1024 * 100vh) 0;
      & .sympathy-inner {
        gap: calc(16 / 1024 * 100vh);
        & h2,
        & p {
          font-size: var(--text-2xl);
        }
      }
    }
  }
  @media (min-width: 768px) {
    :is(
        .device-tablet.orientation-landscape,
        .device-desktop.orientation-landscape
      )
      & {
      padding: calc(160 / 768 * 100vh) 0;
      & .sympathy-inner {
        gap: calc(16 / 768 * 100vh);
      }
    }
  }
  @media (min-width: 1280px) {
    .device-desktop.orientation-landscape & {
      padding: calc(160 / 900 * 100vh) 0;
      & .sympathy-inner {
        gap: calc(16 / 900 * 100vh);
        & h2,
        & p {
          font-size: var(--text-3xl);
        }
      }
    }
  }
  @media (min-width: 900px) {
    .device-desktop.orientation-portrait & {
      padding: calc(160 / 1440 * 100vh) 0;
      & .sympathy-inner {
        gap: calc(16 / 1440 * 100vh);
        & h2,
        & p {
          font-size: var(--text-3xl);
        }
      }
    }
  }
}

.feature {
  width: 100%;
  & .feature-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &.feature1 {
    background-color: var(--white);
    & .feature-inner {
      padding: calc(80 / 844 * 100vh) calc(37 / 390 * 100vw)
        calc(80 / 844 * 100vh) calc(41 / 390 * 100vw);
    }
  }
  &.feature2 {
    background-color: var(--feature-bg);
    & .feature-inner {
      padding: calc(80 / 844 * 100vh) calc(35 / 390 * 100vw)
        calc(80 / 844 * 100vh) calc(57 / 390 * 100vw);
    }
  }
  &.feature3 {
    background-color: var(--white);
    & .feature-inner {
      padding: calc(80 / 844 * 100vh) calc(37 / 390 * 100vw);
    }
  }
  &.feature4 {
    background-color: var(--feature-bg);
    & .feature-inner {
      padding: calc(80 / 844 * 100vh) calc(34 / 390 * 100vw)
        calc(80 / 844 * 100vh) calc(57 / 390 * 100vw);
    }
  }
  & .feature-mockup {
    height: calc(240 / 844 * 100vh);
    width: auto;
    object-fit: contain;
  }
  & .feature-text {
    display: flex;
    flex-direction: column;
    gap: calc(16 / 844 * 100vh);
    & h3 {
      font-size: var(--text-lg);
      font-weight: var(--weight-semibold);
    }
    & p {
      font-size: var(--text-base);
      font-weight: var(--weight-medium);
      color: var(--gray-500);
    }
  }
  .device-mobile.orientation-landscape & {
    &.feature1 .feature-inner {
      padding: calc(80 / 390 * 100vh) calc(199 / 844 * 100vw)
        calc(80 / 390 * 100vh) calc(204 / 844 * 100vw);
    }
    &.feature2 .feature-inner {
      padding: calc(80 / 390 * 100vh) calc(197 / 844 * 100vw)
        calc(80 / 390 * 100vh) calc(220 / 844 * 100vw);
    }
    &.feature3 .feature-inner {
      padding: calc(80 / 390 * 100vh) calc(199 / 844 * 100vw)
        calc(80 / 390 * 100vh) calc(200 / 844 * 100vw);
    }
    &.feature4 .feature-inner {
      padding: calc(80 / 390 * 100vh) calc(196 / 844 * 100vw)
        calc(80 / 390 * 100vh) calc(220 / 844 * 100vw);
    }
    & .feature-mockup {
      height: calc(240 / 390 * 100vh);
    }
    & .feature-text {
      gap: calc(16 / 390 * 100vh);
    }
  }
  @media (min-width: 768px) {
    :is(.device-tablet, .device-desktop) & {
      &.feature1 {
        & .feature-inner {
          padding: calc(120 / 1024 * 100vh) calc(98 / 768 * 100vw)
            calc(120 / 1024 * 100vh) calc(103 / 768 * 100vw);
        }
      }
      &.feature2 {
        & .feature-inner {
          padding: calc(120 / 1024 * 100vh) calc(98 / 768 * 100vw)
            calc(120 / 1024 * 100vh) calc(125 / 768 * 100vw);
        }
      }
      &.feature3 {
        & .feature-inner {
          padding: calc(120 / 1024 * 100vh) calc(98 / 768 * 100vw);
        }
      }
      &.feature4 {
        & .feature-inner {
          padding: calc(120 / 1024 * 100vh) calc(94 / 768 * 100vw)
            calc(120 / 1024 * 100vh) calc(125 / 768 * 100vw);
        }
      }
      & .feature-mockup {
        height: calc(320 / 1024 * 100vh);
      }
      & .feature-text {
        gap: calc(16 / 1024 * 100vh);
        & h3 {
          font-size: var(--text-xl);
          font-weight: var(--weight-semibold);
        }
        & p {
          font-size: var(--text-lg);
        }
      }
    }
  }
  @media (min-width: 768px) {
    :is(
        .device-tablet.orientation-landscape,
        .device-desktop.orientation-landscape
      )
      & {
      &.feature1 {
        & .feature-inner {
          padding: calc(120 / 768 * 100vh) calc(226 / 1024 * 100vw)
            calc(120 / 768 * 100vh) calc(231 / 1024 * 100vw);
        }
      }
      &.feature2 {
        & .feature-inner {
          padding: calc(120 / 768 * 100vh) calc(223 / 1024 * 100vw)
            calc(120 / 768 * 100vh) calc(252 / 1024 * 100vw);
        }
      }
      &.feature3 {
        & .feature-inner {
          padding: calc(120 / 768 * 100vh) calc(226 / 1024 * 100vw);
        }
      }
      &.feature4 {
        & .feature-inner {
          padding: calc(120 / 768 * 100vh) calc(222 / 1024 * 100vw)
            calc(120 / 768 * 100vh) calc(252 / 1024 * 100vw);
        }
      }
    }
  }
  @media (min-width: 1280px) {
    .device-desktop.orientation-landscape & {
      &.feature1 {
        & .feature-inner {
          padding: calc(160 / 900 * 100vh) calc(339 / 1440 * 100vw)
            calc(160 / 900 * 100vh) calc(348 / 1440 * 100vw);
        }
      }
      &.feature2 {
        & .feature-inner {
          padding: calc(160 / 900 * 100vh) calc(335 / 1440 * 100vw)
            calc(160 / 900 * 100vh) calc(381 / 1440 * 100vw);
        }
      }
      &.feature3 {
        & .feature-inner {
          padding: calc(160 / 900 * 100vh) calc(340 / 1440 * 100vw)
            calc(160 / 900 * 100vh) calc(341 / 1440 * 100vw);
        }
      }
      &.feature4 {
        & .feature-inner {
          padding: calc(160 / 900 * 100vh) calc(333 / 1440 * 100vw)
            calc(160 / 900 * 100vh) calc(381 / 1440 * 100vw);
        }
      }
      & .feature-mockup {
        height: calc(480 / 900 * 100vh);
      }
      & .feature-text {
        gap: calc(24 / 900 * 100vh);
        & h3 {
          font-size: var(--text-2xl);
          font-weight: var(--weight-semibold);
        }
      }
    }
  }
  @media (min-width: 900px) {
    .device-desktop.orientation-portrait & {
      &.feature1 {
        & .feature-inner {
          padding: calc(160 / 1440 * 100vh) calc(90 / 900 * 100vw)
            calc(160 / 1440 * 100vh) calc(98 / 900 * 100vw);
        }
      }
      &.feature2 {
        & .feature-inner {
          padding: calc(160 / 1440 * 100vh) calc(86 / 900 * 100vw)
            calc(160 / 1440 * 100vh) calc(131 / 900 * 100vw);
        }
      }
      &.feature3 {
        & .feature-inner {
          padding: calc(160 / 1440 * 100vh) calc(90 / 900 * 100vw)
            calc(160 / 1440 * 100vh) calc(91 / 900 * 100vw);
        }
      }
      &.feature4 {
        & .feature-inner {
          padding: calc(160 / 1440 * 100vh) calc(84 / 900 * 100vw)
            calc(160 / 1440 * 100vh) calc(131 / 900 * 100vw);
        }
      }
      & .feature-mockup {
        height: calc(480 / 1440 * 100vh);
      }
      & .feature-text {
        gap: calc(24 / 1440 * 100vh);
        & h3 {
          font-size: var(--text-2xl);
          font-weight: var(--weight-semibold);
        }
      }
    }
  }
}

.closing {
  background-color: var(--bg);
  padding: calc(80 / 844 * 100vh) calc(21 / 390 * 100vw) calc(80 / 844 * 100vh)
    calc(22 / 390 * 100vw);
  text-align: center;
  & .closing-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 / 844 * 100vh);
    & h2,
    & p {
      font-size: var(--text-lg);
      font-weight: var(--weight-semibold);
    }
  }
  & .links {
    display: flex;
    justify-content: center;
    margin-top: calc(44 / 844 * 100vh);
    gap: calc(16 / 390 * 100vw);
    & a {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    & img {
      width: auto;
      height: calc(48 / 844 * 100vh);
    }
  }
  .device-mobile.orientation-landscape & {
    padding: calc(80 / 390 * 100vh) calc(248 / 844 * 100vw)
      calc(80 / 390 * 100vh) calc(249 / 844 * 100vw);
    & .closing-inner {
      gap: calc(20 / 390 * 100vh);
    }
    & .links {
      margin-top: calc(44 / 390 * 100vh);
      gap: calc(16 / 844 * 100vw);
      & img {
        height: calc(48 / 390 * 100vh);
      }
    }
  }
  @media (min-width: 768px) {
    :is(.device-tablet, .device-desktop) & {
      padding: calc(88 / 1024 * 100vh) calc(104 / 768 * 100vw);
      & .closing-inner {
        gap: calc(32 / 1024 * 100vh);
        & h2,
        & p {
          font-size: var(--text-2xl);
        }
      }
      & .links {
        margin-top: calc(32 / 1024 * 100vh);
        gap: calc(16 / 768 * 100vw);
        & img {
          height: calc(56 / 1024 * 100vh);
        }
      }
    }
  }
  @media (min-width: 768px) {
    :is(
        .device-tablet.orientation-landscape,
        .device-desktop.orientation-landscape
      )
      & {
      padding: calc(88 / 768 * 100vh) calc(232 / 1024 * 100vw);
      & .closing-inner {
        gap: calc(32 / 768 * 100vh);
        & h2,
        & p {
          font-size: var(--text-2xl);
        }
      }
      & .links {
        margin-top: calc(32 / 768 * 100vh);
        gap: calc(16 / 1024 * 100vw);
        & img {
          height: calc(56 / 768 * 100vh);
        }
      }
    }
  }
  @media (min-width: 1280px) {
    .device-desktop.orientation-landscape & {
      padding: calc(96 / 900 * 100vh) calc(370 / 1440 * 100vw);
      & .closing-inner {
        gap: calc(40 / 900 * 100vh);
        & h2,
        & p {
          font-size: var(--text-3xl);
        }
      }
      & .links {
        margin-top: calc(24 / 900 * 100vh);
        gap: calc(16 / 1440 * 100vw);
        & img {
          height: calc(64 / 900 * 100vh);
        }
      }
    }
  }
  @media (min-width: 900px) {
    .device-desktop.orientation-portrait & {
      padding: calc(96 / 1440 * 100vh) calc(100 / 900 * 100vw);
      & .closing-inner {
        gap: calc(40 / 1440 * 100vh);
        & h2,
        & p {
          font-size: var(--text-3xl);
        }
      }
      & .links {
        margin-top: calc(24 / 1440 * 100vh);
        gap: calc(16 / 900 * 100vw);
        & img {
          height: calc(64 / 1440 * 100vh);
        }
      }
    }
  }
}

.voice {
  background-color: var(--white);
  padding: calc(38 / 844 * 100vh) calc(44.5 / 390 * 100vw)
    calc(40 / 844 * 100vh);
  text-align: center;
  & .voice-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    & .voice-icon {
      width: calc(56 / 390 * 100vw);
      height: auto;
    }
    & h2 {
      font-size: var(--text-lg);
      font-weight: var(--weight-semibold);
    }
    & .voice-text {
      display: flex;
      flex-direction: column;
      color: var(--gray-500);
      margin-top: calc(40 / 844 * 100vh);
      gap: calc(16 / 844 * 100vh);
      & p {
        font-size: var(--text-base);
        font-weight: var(--weight-medium);
      }
    }
    & .btn-primary {
      margin-top: calc(40 / 844 * 100vh);
      display: inline-flex;
      justify-content: center;
      align-items: center;
      background-color: var(--primary);
      color: var(--white);
      font-size: var(--text-base);
      padding: calc(15 / 844 * 100vh) calc(16 / 390 * 100vw);
      border-radius: 1rem;
      text-decoration: none;
      transition: all 0.2s ease;
      &:active {
        background-image: var(--active-overlay);
      }
      @media (hover: hover) {
        &:hover {
          background-image: var(--active-overlay);
        }
      }
    }
  }
  .device-mobile.orientation-landscape & {
    padding: calc(38 / 390 * 100vh) calc(271.5 / 844 * 100vw)
      calc(40 / 390 * 100vh);
    & .voice-inner {
      & .voice-icon {
        width: calc(56 / 844 * 100vw);
      }
      & .voice-text {
        margin-top: calc(40 / 390 * 100vh);
        gap: calc(16 / 390 * 100vh);
      }
      & .btn-primary {
        margin-top: calc(40 / 390 * 100vh);
        padding: calc(15 / 390 * 100vh) calc(16 / 844 * 100vw);
      }
    }
  }
  @media (min-width: 768px) {
    :is(.device-tablet, .device-desktop) & {
      padding: calc(48 / 1024 * 100vh) calc(143 / 768 * 100vw)
        calc(64 / 1024 * 100vh);
      & .voice-inner {
        & .voice-icon {
          width: calc(64 / 768 * 100vw);
        }
        & h2 {
          font-size: var(--text-2xl);
        }
        & .voice-text {
          margin-top: calc(56 / 1024 * 100vh);
          gap: calc(24 / 1024 * 100vh);
          & p {
            font-size: var(--text-xl);
          }
        }
        & .btn-primary {
          margin-top: calc(64 / 1024 * 100vh);
          padding: calc(12 / 1024 * 100vh) calc(24 / 768 * 100vw);
          font-size: var(--text-lg);
        }
      }
    }
  }
  @media (min-width: 768px) {
    :is(
        .device-tablet.orientation-landscape,
        .device-desktop.orientation-landscape
      )
      & {
      padding: calc(48 / 768 * 100vh) calc(271 / 1024 * 100vw)
        calc(64 / 768 * 100vh);
      & .voice-inner {
        & .voice-icon {
          width: calc(64 / 1024 * 100vw);
        }
        & .voice-text {
          margin-top: calc(56 / 768 * 100vh);
          gap: calc(24 / 768 * 100vh);
        }
        & .btn-primary {
          margin-top: calc(64 / 768 * 100vh);
          padding: calc(12 / 768 * 100vh) calc(24 / 1024 * 100vw);
        }
      }
    }
  }
  @media (min-width: 1280px) {
    .device-desktop.orientation-landscape & {
      padding: calc(66 / 900 * 100vh) calc(419 / 1440 * 100vw)
        calc(72 / 900 * 100vh);
      & .voice-inner {
        & .voice-icon {
          width: calc(72 / 1440 * 100vw);
        }
        & h2 {
          font-size: var(--text-3xl);
        }
        & .voice-text {
          margin-top: calc(64 / 900 * 100vh);
          gap: calc(24 / 900 * 100vh);
        }
        & .btn-primary {
          margin-top: calc(72 / 900 * 100vh);
          padding: calc(16 / 900 * 100vh) calc(28 / 1440 * 100vw);
        }
      }
    }
  }
  @media (min-width: 900px) {
    .device-desktop.orientation-portrait & {
      padding: calc(66 / 1440 * 100vh) calc(149 / 900 * 100vw)
        calc(72 / 1440 * 100vh);
      & .voice-inner {
        & .voice-icon {
          width: calc(72 / 900 * 100vw);
        }
        & h2 {
          font-size: var(--text-3xl);
        }
        & .voice-text {
          margin-top: calc(64 / 1440 * 100vh);
          gap: calc(24 / 1440 * 100vh);
        }
        & .btn-primary {
          margin-top: calc(72 / 1440 * 100vh);
          padding: calc(16 / 1440 * 100vh) calc(28 / 900 * 100vw);
        }
      }
    }
  }
}

.footer {
  background-color: var(--feature-bg);
  padding: calc(32 / 844 * 100vh) calc(83 / 390 * 100vw) calc(32 / 844 * 100vh)
    calc(32 / 390 * 100vw);
  & .footer-inner {
    display: flex;
    flex-direction: column;
    & h2 {
      font-size: var(--text-lg);
      font-weight: var(--weight-semibold);
    }
    & .company-info {
      margin-top: calc(24 / 844 * 100vh);
      display: flex;
      flex-direction: column;
      gap: calc(8 / 844 * 100vh);
      font-size: var(--text-sm);
      color: var(--gray-500);
    }
    & .footer-links {
      display: flex;
      flex-direction: column;
      margin-top: calc(24 / 844 * 100vh);
      gap: calc(8 / 844 * 100vh);
      & a {
        align-self: flex-start;
        font-size: var(--text-base);
        transition: color 0.2s ease;
        &:active {
          color: var(--primary);
          text-decoration: underline;
          text-decoration-thickness: 2px;
          text-underline-offset: 4px;
          text-decoration-skip-ink: auto;
        }
        @media (hover: hover) {
          &:hover {
            color: var(--primary);
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;
            text-decoration-skip-ink: auto;
          }
        }
      }
    }
    & .footer-bottom {
      margin-top: calc(16 / 844 * 100vh);
      & .copyright {
        font-size: var(--text-sm);
        color: var(--gray-500);
      }
    }
  }
  .device-mobile.orientation-landscape & {
    padding: calc(32 / 390 * 100vh) calc(210 / 844 * 100vw)
      calc(32 / 390 * 100vh) calc(32 / 844 * 100vw);
    & .footer-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "title   ."
        "info    links"
        "bottom  links";
      & h2 {
        grid-area: title;
      }
      & .company-info {
        grid-area: info;
        margin-top: calc(24 / 390 * 100vh);
        gap: calc(8 / 390 * 100vh);
        font-size: var(--text-base);
      }
      & .footer-bottom {
        grid-area: bottom;
        margin-top: calc(42 / 390 * 100vh);
      }
      & .footer-links {
        grid-area: links;
        margin-top: calc(22 / 390 * 100vh);
        gap: calc(16 / 390 * 100vh);
      }
    }
  }
  @media (min-width: 768px) {
    :is(.device-tablet, .device-desktop) & {
      padding: calc(32 / 1024 * 100vh) calc(174 / 768 * 100vw)
        calc(32 / 1024 * 100vh) calc(32 / 768 * 100vw);
      & .footer-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "title   ."
          "info    links"
          "bottom  links";
        & h2 {
          grid-area: title;
          font-size: var(--text-xl);
        }
        & .company-info {
          grid-area: info;
          margin-top: calc(24 / 1024 * 100vh);
          gap: calc(8 / 1024 * 100vh);
          font-size: var(--text-base);
        }
        & .footer-bottom {
          grid-area: bottom;
          margin-top: calc(42 / 1024 * 100vh);
        }
        & .footer-links {
          grid-area: links;
          margin-top: calc(22 / 1024 * 100vh);
          display: flex;
          flex-direction: column;
          gap: calc(16 / 1024 * 100vh);
        }
      }
    }
  }
  @media (min-width: 768px) {
    :is(
        .device-tablet.orientation-landscape,
        .device-desktop.orientation-landscape
      )
      & {
      padding: calc(32 / 768 * 100vh) calc(350 / 1024 * 100vw)
        calc(32 / 768 * 100vh) calc(32 / 1024 * 100vw);
      & .footer-inner {
        & .company-info {
          margin-top: calc(24 / 768 * 100vh);
          gap: calc(8 / 768 * 100vh);
        }
        & .footer-bottom {
          margin-top: calc(42 / 768 * 100vh);
        }
        & .footer-links {
          margin-top: calc(22 / 768 * 100vh);
          gap: calc(16 / 768 * 100vh);
        }
      }
    }
  }
  @media (min-width: 1280px) {
    .device-desktop.orientation-landscape & {
      padding: calc(48 / 900 * 100vh) calc(317 / 1440 * 100vw)
        calc(32 / 900 * 100vh) calc(318 / 1440 * 100vw);
      & .footer-inner {
        & h2 {
          font-size: var(--text-2xl);
        }
        & .company-info {
          margin-top: calc(16 / 900 * 100vh);
          gap: calc(12 / 900 * 100vh);
        }
        & .footer-bottom {
          margin-top: calc(56 / 900 * 100vh);
        }
        & .footer-links {
          margin-top: calc(17 / 900 * 100vh);
          gap: calc(16 / 900 * 100vh);
          & a {
            font-size: var(--text-lg);
          }
        }
      }
    }
  }
  @media (min-width: 900px) {
    .device-desktop.orientation-portrait & {
      padding: calc(40 / 1440 * 100vh) calc(119 / 900 * 100vw)
        calc(32 / 1440 * 100vh) calc(96 / 900 * 100vw);
      & .footer-inner {
        & h2 {
          font-size: var(--text-2xl);
        }
        & .company-info {
          margin-top: calc(16 / 1440 * 100vh);
          gap: calc(12 / 1440 * 100vh);
        }
        & .footer-bottom {
          margin-top: calc(56 / 1440 * 100vh);
        }
        & .footer-links {
          margin-top: calc(11 / 1440 * 100vh);
          gap: calc(16 / 1440 * 100vh);
          & a {
            font-size: var(--text-lg);
          }
        }
      }
    }
  }
}

.btn-top {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1.25rem);
  &.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  & img {
    width: 1.375rem;
    height: 1.375rem;
    object-fit: contain;
  }
  &:active {
    background: var(--btn-top-overlay);
  }
  @media (hover: hover) {
    &:hover {
      background: var(--btn-top-overlay);
    }
  }
  @media (min-width: 768px) {
    :is(.device-tablet, .device-desktop) & {
      bottom: 2.5rem;
      right: 2.5rem;
      width: 3rem;
      height: 3rem;
      & img {
        width: 1.75rem;
        height: 1.75rem;
      }
    }
  }
  @media (min-width: 1280px) {
    .device-desktop & {
      width: 3.5rem;
      height: 3.5rem;
      & img {
        width: 2rem;
        height: 2rem;
      }
    }
  }
}