:root {
        color-scheme: light;
        font-family: Inter, "Segoe UI", Arial, sans-serif;
        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      * {
        box-sizing: border-box;
      }

      body {
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-x: hidden;
        margin: 0;
        padding: clamp(24px, 6vw, 72px);
        color: #fff;
        background: linear-gradient(135deg, #062c5b 0%, #074b89 52%, #087cb2 100%);
        isolation: isolate;
      }

      .ambient-glow {
        position: fixed;
        z-index: -1;
        inset: -30%;
        pointer-events: none;
        background:
          radial-gradient(ellipse at 28% 30%, rgb(75 200 240 / 62%), transparent 34%),
          radial-gradient(ellipse at 72% 68%, rgb(13 123 198 / 68%), transparent 38%);
        filter: blur(16px);
        animation: glow-drift 12s ease-in-out infinite alternate;
        will-change: transform;
      }

      @keyframes glow-drift {
        from {
          transform: translate3d(-14vw, -10vh, 0) scale(0.88);
        }

        to {
          transform: translate3d(14vw, 10vh, 0) scale(1.15);
        }
      }

      body::before,
      body::after {
        position: fixed;
        z-index: -1;
        pointer-events: none;
        content: "";
      }

      body::before {
        top: -28vw;
        right: -18vw;
        width: 80vw;
        aspect-ratio: 1;
        border: 1px solid rgb(160 231 255 / 20%);
        border-radius: 50%;
        box-shadow:
          0 0 0 28px rgb(160 231 255 / 4%),
          0 0 0 72px rgb(160 231 255 / 4%),
          0 0 0 128px rgb(160 231 255 / 3%);
      }

      body::after {
        bottom: -40vw;
        left: -24vw;
        width: 90vw;
        aspect-ratio: 1;
        border: 1px solid rgb(160 231 255 / 12%);
        border-radius: 50%;
        box-shadow: 0 0 0 44px rgb(160 231 255 / 3%);
      }

      main {
        width: min(100%, 1100px);
      }

      .hero {
        position: relative;
        display: grid;
        grid-template-columns: 60% 40%;
        align-items: stretch;
        min-height: min(650px, calc(100svh - 64px));
        overflow: hidden;
        border: 1px solid rgb(255 255 255 / 70%);
        border-radius: 32px;
        background: #fff;
        box-shadow:
          0 36px 100px rgb(0 20 55 / 35%),
          inset 0 1px rgb(255 255 255 / 70%);
      }

      .message {
        position: relative;
        z-index: 1;
        padding: clamp(36px, 7vw, 84px);
        color: #21305c;
      }

      .brand {
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(100%, 280px);
        min-height: 92px;
        margin-bottom: clamp(48px, 8vh, 78px);
        margin-inline: auto;
        padding: 14px 20px;
        border-radius: 8px;
      }

      .brand img {
        display: block;
        width: 100%;
        max-height: 100px;
        object-fit: contain;
      }

      .eyebrow {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 18px;
        color: #1c63b7;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }

      .eyebrow img {
        height: 1rem;
        padding-bottom: .195rem;
      }

      h1 {
        max-width: 540px;
        margin: 0;
        font-size: clamp(2.8rem, 5vw, 4rem);
        font-weight: 650;
        letter-spacing: -0.065em;
        line-height: 0.99;
      }

      h1 span {
        display: block;
        color: #1c63b7;
        font-weight: 750;
      }

      .wait {
        margin: 25px 0 0;
        color: #52708b;
        font-size: clamp(1.2rem, 2vw, 1.75rem);
        font-style: italic;
        font-weight: 500;
      }

      .visual {
        --orbit-offset: min(12vw, 126px);
        --orbit-radius: min(17vw, 180px);
        position: relative;
        display: grid;
        min-height: 100%;
        place-items: center;
        overflow: hidden;
        background:
          radial-gradient(ellipse at 50% 45%, #fff 0%, #e8f8ff 28%, transparent 68%),
          linear-gradient(145deg, #edf9ff 0%, #d6effb 52%, #eaf7fd 100%);
      }

      .mobile-visual {
        display: none;
      }

      .visual::before,
      .visual::after {
        position: absolute;
        width: min(34vw, 360px);
        aspect-ratio: 1;
        border: 1px solid rgb(83 173 216 / 20%);
        border-radius: 50%;
        content: "";
      }

      .visual::before {
        box-shadow:
          0 0 0 24px rgb(83 173 216 / 4%),
          0 0 0 58px rgb(83 173 216 / 3%),
          0 0 0 100px rgb(83 173 216 / 2%);
      }

      .visual::after {
        width: min(23vw, 240px);
        border-color: rgb(83 173 216 / 14%);
        box-shadow: 0 0 45px rgb(83 173 216 / 10%);
      }

      .drop-mark {
        position: relative;
        z-index: 2;
        display: block;
        width: min(46%, 160px);
        height: auto;
        overflow: visible;
        filter: drop-shadow(0 12px 18px rgb(30 92 167 / 16%));
        animation: drop-breathe 6s ease-in-out infinite;
      }

      @keyframes drop-breathe {
        0%,
        100% {
          scale: 1;
        }

        50% {
          scale: 1.035;
        }
      }

      @keyframes tool-float {
        0%,
        100% {
          translate: 0 0;
        }

        50% {
          translate: 0 -8px;
        }
      }

      .tool {
        position: absolute;
        z-index: 1;
        display: grid;
        top: 50%;
        left: 50%;
        width: clamp(46px, 5.5vw, 62px);
        aspect-ratio: 1;
        place-items: center;
        border: 1px solid rgb(83 173 216 / 22%);
        border-radius: 18px;
        background: rgb(255 255 255 / 82%);
        box-shadow:
          0 10px 24px rgb(30 92 167 / 9%),
          inset 0 1px rgb(255 255 255 / 90%);
        color: #1e5ca7;
        animation: tool-float 5s ease-in-out infinite;
      }

      .tool--code {
        animation-delay: -1.7s;
      }

      .tool--clock {
        animation-delay: -3.3s;
      }

      .tool--wrench {
        transform: translate(-50%, -50%) translate(calc(var(--orbit-offset) * -1), calc(var(--orbit-offset) * -1));
      }

      .tool--code {
        transform: translate(-50%, -50%) translate(var(--orbit-offset), calc(var(--orbit-offset) * -1));
      }

      .tool--clock {
        transform: translate(-50%, -50%) translate(0, var(--orbit-radius));
      }

      .tool svg {
        display: block;
        width: 58%;
        height: 58%;
        overflow: visible;
      }

      @media (min-width: 821px) {
        .brand {
          display: none;
        }

        .message {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .visual {
          background: #075596 url("../../assets/img/visual.jpg") center / cover no-repeat;
        }

        .visual::before,
        .visual::after,
        .visual > * {
          display: none;
        }
      }

      @media (max-width: 820px) {
        body {
          padding: 40px 20px;
        }

        .hero {
          grid-template-columns: 1fr;
          min-height: auto;
        }

        .message {
          padding: clamp(28px, 8vw, 54px);
        }

        h1 {
          font-size: clamp(1.8rem, 9vw, 3.5rem);
        }

        .brand {
          display: none;
        }

        .visual {
          display: none;
        }

        .mobile-visual {
          display: block;
          width: 100%;
          height: auto;
        }

        .visual::before {
          width: 190px;
        }

        .visual::after {
          width: 130px;
        }

        .tool {
          width: 40px;
        }

        .visual {
          --orbit-offset: 67px;
          --orbit-radius: 95px;
        }
      }

      @media (max-width: 400px) {
        body {
          padding: 12px;
        }

        .message {
          padding: 34px 24px;
        }

        .visual {
          min-height: 240px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .ambient-glow,
        .drop-mark,
        .tool {
          animation: none;
          will-change: auto;
        }
      }