:root {
  color-scheme: light;
  --ink: #202229;
  --silver: #7c7f87;
  --green: #00d64b;
  --green-glow: rgba(0, 224, 91, 0.24);
  --blue: #087cf2;
  --blue-glow: rgba(8, 124, 242, 0.23);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: var(--ink);
  background: #f7f9fc;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.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;
}

.portal,
.desktop-composition {
  width: 100vw;
  height: 100vh;
}

.desktop-composition {
  position: relative;
  overflow: hidden;
  animation: composition-enter 1.25s var(--ease-out) both;
}

.reference-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.683vh);
  height: max(100vh, 56.280vw);
  transform: translate(-50%, -50%);
}

.reference-stage__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.desktop-navigation {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  z-index: 3;
  display: block;
  border-radius: 50%;
  outline: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.hotspot::after {
  position: absolute;
  inset: -2%;
  content: "";
  border: 1px solid transparent;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 240ms ease, transform 420ms var(--ease-out), box-shadow 420ms ease;
  transform: scale(0.985);
}

.hotspot--technology {
  top: 32.15%;
  left: 20.87%;
  width: 15.31%;
  aspect-ratio: 1;
}

.hotspot--technology::after {
  border-color: rgba(0, 214, 75, 0.72);
  box-shadow: 0 0 42px 10px var(--green-glow);
}

.hotspot--education {
  top: 32.15%;
  left: 63.88%;
  width: 15.31%;
  aspect-ratio: 1;
}

.hotspot--education::after {
  border-color: rgba(8, 124, 242, 0.72);
  box-shadow: 0 0 42px 10px var(--blue-glow);
}

.hotspot--technology:hover::after,
.hotspot--technology:focus-visible::after,
.hotspot--education:hover::after,
.hotspot--education:focus-visible::after {
  opacity: 0.58;
  transform: scale(1.035);
}

.hotspot--about,
.hotspot--links {
  top: 3.55%;
  height: 4.5%;
  border-radius: 2px;
}

.hotspot--about {
  left: 85.35%;
  width: 5.1%;
}

.hotspot--links {
  left: 93.05%;
  width: 4.2%;
}

.hotspot--about::after,
.hotspot--links::after {
  inset: 18% 5% 0;
  border-width: 0 0 1px;
  border-color: rgba(32, 34, 41, 0.55);
  border-radius: 0;
  transform: scaleX(0);
}

.hotspot--about:hover::after,
.hotspot--about:focus-visible::after,
.hotspot--links:hover::after,
.hotspot--links:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.hotspot[aria-disabled="true"] {
  cursor: default;
}

.mobile-composition {
  display: none;
}

.anchor-target {
  position: absolute;
  top: 0;
}

@keyframes composition-enter {
  from {
    opacity: 0;
    transform: scale(1.008);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@media (max-width: 720px), (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {
  html,
  body,
  .portal {
    width: 100%;
    height: 100%;
  }

  body {
    min-height: 100svh;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.98) 0 20%, transparent 58%),
      radial-gradient(circle at 0 54%, rgba(218, 233, 250, 0.7), transparent 42%),
      radial-gradient(circle at 100% 54%, rgba(218, 233, 250, 0.68), transparent 42%),
      linear-gradient(180deg, #fbfcfd 0%, #f9fbfd 66%, #e8f0fa 100%);
  }

  body::before {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    height: 23svh;
    content: "";
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(232, 240, 250, 0.12)),
      url("../assets/everland-approved-home.png") center bottom / auto 520% no-repeat;
    pointer-events: none;
  }

  .desktop-composition {
    display: none;
  }

  .mobile-composition {
    --orbit-size: min(82vw, 54svh, 23rem);
    --orbit-top: clamp(2.9rem, 8.6svh, 5rem);
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100svh;
    min-height: 568px;
    overflow: hidden;
    padding: 0;
  }

  .mobile-topbar {
    position: absolute;
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    z-index: 8;
    padding: 0;
  }

  .mobile-topbar__nav {
    display: flex;
    gap: clamp(0.6rem, 2.8vw, 0.85rem);
    align-items: center;
    font-size: clamp(0.78rem, 3.6vw, 0.94rem);
  }

  .mobile-topbar__nav a {
    color: rgba(32, 34, 41, 0.82);
    text-decoration: none;
  }

  .mobile-topbar__nav span {
    color: rgba(32, 34, 41, 0.25);
  }

  .mobile-orbit {
    position: absolute;
    top: var(--orbit-top);
    left: 50%;
    width: var(--orbit-size);
    aspect-ratio: 1;
    pointer-events: none;
    transform: translateX(-50%);
    animation: mobile-orbit-enter 1.1s var(--ease-out) both;
  }

  .mobile-orbit__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .mobile-orbit__ring--outer {
    width: 100%;
    height: 100%;
    border: 1px dotted rgba(139, 151, 168, 0.38);
  }

  .mobile-orbit__ring--middle {
    width: 86%;
    height: 86%;
    border: 1px solid rgba(132, 142, 157, 0.36);
  }

  .mobile-orbit__ring--inner {
    width: 63%;
    height: 63%;
    border: 1px solid rgba(166, 172, 182, 0.17);
  }

  .mobile-orbit__axis {
    position: absolute;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, rgba(126, 137, 152, 0.36), rgba(126, 137, 152, 0.07));
    transform: translateX(-50%);
  }

  .mobile-orbit__axis--top {
    top: -4%;
    height: 31%;
  }

  .mobile-orbit__axis--bottom {
    bottom: -4%;
    height: 18%;
    transform: translateX(-50%) rotate(180deg);
  }

  .mobile-orbit__node {
    position: absolute;
    width: clamp(8px, 2.7vw, 13px);
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: linear-gradient(145deg, #dce0e5, #a7adb7);
    box-shadow: 0 0 13px 4px rgba(255, 255, 255, 0.88);
  }

  .mobile-orbit__node--top {
    top: 6.5%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .mobile-orbit__node--upper-left {
    top: 17.5%;
    left: 17.5%;
    transform: translate(-50%, -50%);
  }

  .mobile-orbit__node--upper-right {
    top: 17.5%;
    right: 17.5%;
    transform: translate(50%, -50%);
  }

  .mobile-orbit__node--lower-left {
    bottom: 17.5%;
    left: 17.5%;
    transform: translate(-50%, 50%);
  }

  .mobile-orbit__node--lower-right {
    right: 17.5%;
    bottom: 17.5%;
    transform: translate(50%, 50%);
  }

  .mobile-orbit__node--bottom {
    bottom: 6.5%;
    left: 50%;
    transform: translate(-50%, 50%);
  }

  .mobile-brand {
    position: absolute;
    top: calc(var(--orbit-top) + min(41vw, 27svh, 11.5rem));
    left: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(76vw, 20rem);
    transform: translate(-50%, -50%);
    animation: mobile-enter 900ms 80ms var(--ease-out) both;
  }

  .mobile-brand__logo {
    display: block;
    width: clamp(160px, 50vw, 215px);
    height: auto;
    object-fit: contain;
  }

  .mobile-brand__line {
    width: clamp(48px, 15vw, 68px);
    height: 1px;
    margin-top: clamp(0.15rem, 0.7svh, 0.4rem);
    background: rgba(86, 89, 96, 0.72);
  }

  .mobile-brand__tagline {
    margin: clamp(0.65rem, 1.8svh, 0.95rem) 0 0;
    color: #7b7e87;
    font-size: clamp(0.84rem, 3.8vw, 1.06rem);
    line-height: 1.22;
    text-align: center;
  }

  .mobile-paths {
    position: absolute;
    top: clamp(20.1rem, 56.8svh, 33rem);
    left: 50%;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 2.4vw, 0.9rem);
    width: min(calc(100% - 1.5rem), 410px);
    margin: 0;
    transform: translateX(-50%);
  }

  .mobile-paths::before {
    content: none;
  }

  .mobile-path {
    --accent: var(--green);
    --glow: var(--green-glow);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: clamp(0.55rem, 2.4vw, 0.9rem);
    border: 1.4px solid var(--accent);
    border-radius: 50%;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.48);
    box-shadow: 0 0 25px 7px var(--glow), inset 0 0 24px rgba(255, 255, 255, 0.84);
    text-align: center;
    text-decoration: none;
    backdrop-filter: blur(6px);
    animation: mobile-path-enter 900ms 280ms var(--ease-out) both;
    transition: transform 300ms var(--ease-out), box-shadow 300ms ease;
  }

  .mobile-path--education {
    --accent: var(--blue);
    --glow: var(--blue-glow);
    animation-delay: 380ms;
  }

  .mobile-path:hover,
  .mobile-path:focus-visible {
    outline: none;
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 0 36px 11px var(--glow), inset 0 0 28px rgba(255, 255, 255, 0.9);
  }

  .mobile-path__icon {
    width: clamp(24px, 7.2vw, 34px);
    color: var(--accent);
  }

  .mobile-path h2 {
    margin: clamp(0.2rem, 0.8svh, 0.4rem) 0 0;
    font-size: clamp(0.92rem, 4.2vw, 1.18rem);
    font-weight: 400;
  }

  .mobile-path p {
    margin: clamp(0.35rem, 1.2svh, 0.62rem) 0 0;
    color: #5f626b;
    font-size: clamp(0.54rem, 2.05vw, 0.66rem);
    line-height: 1.38;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .mobile-path__arrow {
    margin-top: clamp(0.3rem, 1.2svh, 0.6rem);
    font-size: clamp(1.1rem, 5vw, 1.45rem);
    font-weight: 300;
  }

  .mobile-path__dot {
    position: absolute;
    width: clamp(7px, 2.2vw, 10px);
    height: clamp(7px, 2.2vw, 10px);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--glow);
  }

  .mobile-path__dot--top {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
  }

  .mobile-path__dot--left {
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
  }

  .mobile-path__dot--right {
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
  }

  @keyframes mobile-enter {
    from {
      opacity: 0;
      transform: translate(-50%, calc(-50% + 12px));
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }

  @keyframes mobile-orbit-enter {
    from {
      opacity: 0;
      transform: translateX(-50%) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }
  }

  @keyframes mobile-path-enter {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

@media (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {
  .mobile-composition {
    --orbit-size: min(72vw, 54svh, 38rem);
    --orbit-top: clamp(4rem, 7svh, 6rem);
  }

  .mobile-topbar {
    top: max(1.75rem, env(safe-area-inset-top));
    right: max(2rem, env(safe-area-inset-right));
  }

  .mobile-topbar__nav {
    gap: 1rem;
    font-size: 1rem;
  }

  .mobile-brand {
    top: calc(var(--orbit-top) + min(36vw, 27svh, 19rem));
    width: min(60vw, 34rem);
  }

  .mobile-brand__logo {
    width: clamp(260px, 42vw, 340px);
  }

  .mobile-brand__line {
    width: 76px;
    margin-top: clamp(0.35rem, 0.8svh, 0.65rem);
  }

  .mobile-brand__tagline {
    margin-top: clamp(0.75rem, 1.2svh, 1rem);
    font-size: clamp(1.05rem, 2.3vw, 1.35rem);
  }

  .mobile-paths {
    top: clamp(37rem, 60svh, 51rem);
    gap: clamp(1rem, 2.4vw, 1.5rem);
    width: min(calc(100% - 4rem), 820px);
  }

  .mobile-path {
    padding: clamp(1.2rem, 3vw, 2rem);
    border-width: 2px;
  }

  .mobile-path__icon {
    width: clamp(44px, 6vw, 58px);
  }

  .mobile-path h2 {
    margin-top: 0.7rem;
    font-size: clamp(1.45rem, 3.3vw, 2rem);
  }

  .mobile-path p {
    margin-top: 1rem;
    font-size: clamp(0.75rem, 1.65vw, 1rem);
    line-height: 1.45;
    letter-spacing: 0.18em;
  }

  .mobile-path__arrow {
    margin-top: 1rem;
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  }

  .mobile-path__dot {
    width: clamp(11px, 1.8vw, 15px);
    height: clamp(11px, 1.8vw, 15px);
  }
}

@media (max-width: 390px) {
  .mobile-path {
    padding: 0.55rem;
  }

  .mobile-path__icon {
    width: clamp(23px, 7vw, 28px);
  }

  .mobile-path p {
    margin-top: 0.35rem;
  }

  .mobile-path__arrow {
    margin-top: 0.3rem;
  }
}

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