@layer reset, base, layout, components, motion;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  [hidden] {
    display: none !important;
  }

  html {
    min-width: 320px;
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  p {
    margin: 0;
  }

  button,
  input {
    font: inherit;
  }

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }
}

@layer base {
  :root {
    color-scheme: dark;
    --ink: #f5f2fb;
    --muted: #aaa5b7;
    --subtle: #898495;
    --surface: #100e17;
    --surface-raised: #15121e;
    --line: rgb(255 255 255 / 9%);
    --line-strong: rgb(255 255 255 / 15%);
    --violet: #b6a1ff;
    --violet-bright: #cabbff;
    --mint: #a8ecd5;
    --danger: #ff9caa;
    --page-pad: clamp(1.25rem, 5.2vw, 5.25rem);
    --font-sans:
      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif;
  }

  body {
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    background:
      radial-gradient(
        ellipse at 81% 46%,
        rgb(91 59 160 / 11%),
        transparent 36rem
      ),
      radial-gradient(
        ellipse at 9% 95%,
        rgb(81 54 122 / 10%),
        transparent 31rem
      ),
      #08070d;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    background-image: radial-gradient(
      rgb(218 205 255 / 15%) 0.65px,
      transparent 0.65px
    );
    background-size: 22px 22px;
    content: "";
    mask-image: linear-gradient(
      110deg,
      transparent 5%,
      #000 54%,
      transparent 100%
    );
    opacity: 0.17;
    pointer-events: none;
  }

  ::selection {
    color: #100c1c;
    background: var(--violet);
  }

  a {
    color: inherit;
  }

  :where(a, button, input):focus-visible {
    outline: 2px solid var(--violet-bright);
    outline-offset: 3px;
  }
}

@layer layout {
  .site-header,
  .page-shell,
  .site-footer {
    position: relative;
    z-index: 1;
    width: min(100%, 1600px);
    margin-inline: auto;
    padding-inline: var(--page-pad);
  }

  .site-header {
    display: flex;
    min-height: 104px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgb(255 255 255 / 6%);
  }

  .page-shell {
    display: flex;
    min-height: min(760px, calc(100svh - 184px));
    align-items: center;
    padding-block: clamp(3rem, 6.3vh, 5.4rem);
  }

  .hero {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 7.8rem);
  }

  .hero-copy {
    width: min(100%, 640px);
    padding-block: 1.5rem;
  }

  .site-footer {
    display: flex;
    min-height: 80px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    border-top: 1px solid rgb(255 255 255 / 6%);
  }

  .visual-column {
    position: relative;
    display: flex;
    min-height: 470px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    isolation: isolate;
  }

  .visual-column::before {
    position: absolute;
    z-index: -1;
    width: min(78%, 420px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(115 81 191 / 15%);
    content: "";
    filter: blur(95px);
  }
}

@layer components {
  .skip-link {
    position: fixed;
    z-index: 5;
    top: 1rem;
    left: 1rem;
    padding: 0.8rem 1rem;
    transform: translateY(-180%);
    border: 1px solid var(--line-strong);
    border-radius: 0.7rem;
    background: #171321;
    color: var(--ink);
    transition: transform 180ms ease;
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.78rem;
    text-decoration: none;
  }

  .brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    color: #eee8ff;
    place-items: center;
  }

  .brand-mark svg {
    width: 100%;
  }

  .brand-copy {
    display: grid;
    gap: 0.12rem;
  }

  .brand-copy strong {
    font-size: 0.89rem;
    font-weight: 620;
    letter-spacing: -0.015em;
  }

  .brand-copy > span {
    color: var(--subtle);
    font-size: 0.69rem;
    letter-spacing: 0.06em;
  }

  .availability {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #c7c2d1;
    font-size: 0.74rem;
    letter-spacing: 0.015em;
    text-decoration: none;
    transition: color 180ms ease;
  }

  .availability:hover {
    color: var(--ink);
  }

  .availability-dot,
  .live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 12px rgb(168 236 213 / 60%);
  }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    color: #bcb6ca;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
  }

  .eyebrow-line {
    width: 28px;
    height: 1px;
    background: var(--violet);
    box-shadow: 0 0 10px rgb(182 161 255 / 70%);
  }

  h1 {
    margin-top: clamp(1.45rem, 3vw, 2rem);
    font-size: clamp(3.4rem, 6.65vw, 6.3rem);
    font-weight: 540;
    letter-spacing: -0.075em;
    line-height: 0.99;
  }

  h1 > span {
    color: #e0d9ee;
  }

  .headline-period {
    color: var(--violet);
  }

  .hero-description {
    max-width: 440px;
    margin-top: 1.55rem;
    color: var(--muted);
    font-size: clamp(0.99rem, 1.2vw, 1.08rem);
    line-height: 1.8;
  }

  .signup {
    width: min(100%, 510px);
    margin-top: clamp(2.5rem, 5vh, 3.9rem);
  }

  .signup-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.92rem;
  }

  .signup-index {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid rgb(182 161 255 / 30%);
    border-radius: 50%;
    color: #d2c5ff;
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    place-items: center;
  }

  .signup-heading h2 {
    padding-top: 0.03rem;
    font-size: 0.96rem;
    font-weight: 590;
    letter-spacing: -0.025em;
  }

  .signup-heading p {
    margin-top: 0.34rem;
    color: var(--subtle);
    font-size: 0.77rem;
    line-height: 1.55;
  }

  .signup-form {
    margin-top: 1.2rem;
  }

  .email-row {
    display: flex;
    min-height: 60px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 0.72rem;
    background: linear-gradient(
      110deg,
      rgb(22 19 31 / 94%),
      rgb(17 15 24 / 94%)
    );
    box-shadow:
      0 12px 42px rgb(0 0 0 / 17%),
      inset 0 1px 0 rgb(255 255 255 / 3%);
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      background 180ms ease;
  }

  .email-row:focus-within {
    border-color: rgb(182 161 255 / 68%);
    background: #14111c;
    box-shadow:
      0 0 0 3px rgb(182 161 255 / 10%),
      0 14px 42px rgb(0 0 0 / 23%);
  }

  .email-row[data-invalid="true"] {
    border-color: rgb(255 156 170 / 72%);
  }

  .email-icon {
    width: 19px;
    height: 19px;
    margin-left: 0.72rem;
    flex: 0 0 auto;
    fill: none;
    stroke: #938ba1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.2;
  }

  .email-row input[type="email"] {
    width: 100%;
    min-width: 0;
    height: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 0.87rem;
  }

  .email-row input::placeholder {
    color: #918a9d;
    opacity: 1;
  }

  .submit-button {
    display: inline-flex;
    min-width: 123px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 1px solid rgb(227 218 255 / 45%);
    border-radius: 0.48rem;
    background: linear-gradient(135deg, #c5b4ff, #a68bff);
    color: #171024;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 670;
    transition:
      transform 180ms ease,
      box-shadow 180ms ease,
      filter 180ms ease;
  }

  .submit-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
    transition: transform 180ms ease;
  }

  .submit-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 19px rgb(182 161 255 / 27%);
    filter: brightness(1.07);
  }

  .submit-button:hover:not(:disabled) svg {
    transform: translateX(2px);
  }

  .submit-button:active:not(:disabled) {
    transform: translateY(0);
  }

  .submit-button:disabled {
    cursor: wait;
    opacity: 0.7;
  }

  .field-hint,
  .form-status {
    min-height: 1.2rem;
    margin: 0.45rem 0 0 0.2rem;
    color: var(--danger);
    font-size: 0.73rem;
    line-height: 1.5;
  }

  .field-hint:empty,
  .form-status:empty {
    min-height: 0;
    margin-top: 0;
  }

  .form-status[data-state="success"] {
    color: var(--mint);
  }

  .form-status[data-state="pending"] {
    color: #e4cc96;
  }

  .form-status[data-state="error"] {
    color: var(--danger);
  }

  .clear-pending {
    margin: 0.15rem 0 0 0.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #c7b6ff;
    cursor: pointer;
    font-size: 0.7rem;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: rgb(199 182 255 / 50%);
    text-underline-offset: 3px;
  }

  .clear-pending:hover {
    color: #e0d6ff;
  }

  .consent-row {
    display: flex;
    align-items: flex-start;
    gap: 0.62rem;
    margin-top: 0.52rem;
    color: #918b9d;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1.55;
  }

  .consent-row input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .custom-check {
    display: grid;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
    border: 1px solid #625b6e;
    border-radius: 4px;
    background: #13111a;
    color: #141020;
    place-items: center;
    transition:
      background 150ms ease,
      border-color 150ms ease,
      box-shadow 150ms ease;
  }

  .custom-check svg {
    width: 13px;
    height: 13px;
    fill: none;
    opacity: 0;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transform: scale(0.72);
    transition:
      opacity 150ms ease,
      transform 150ms ease;
  }

  .consent-row input:checked + .custom-check {
    border-color: var(--violet);
    background: var(--violet);
  }

  .consent-row input:checked + .custom-check svg {
    opacity: 1;
    transform: scale(1);
  }

  .consent-row input:focus-visible + .custom-check {
    outline: 3px solid rgb(182 161 255 / 45%);
    outline-offset: 3px;
  }

  .consent-row input[aria-invalid="true"] + .custom-check {
    border-color: var(--danger);
  }

  .privacy-note {
    display: flex;
    align-items: center;
    gap: 0.46rem;
    margin-top: 1.1rem;
    color: #9992a5;
    font-size: 0.68rem;
  }

  .privacy-note svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: #918a9d;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.1;
  }

  .visually-hidden,
  .honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .orbit-scene {
    position: relative;
    display: grid;
    width: min(100%, 410px);
    aspect-ratio: 1;
    place-items: center;
    filter: drop-shadow(0 30px 55px rgb(31 21 57 / 22%));
  }

  .orbit {
    position: absolute;
    aspect-ratio: 1;
    border: 1px solid rgb(182 161 255 / 10%);
    border-radius: 50%;
  }

  .orbit-outer {
    width: 94%;
    border-color: rgb(182 161 255 / 13%);
    box-shadow: inset 0 0 45px rgb(158 127 255 / 2%);
  }

  .orbit-middle {
    width: 72%;
    border-color: rgb(182 161 255 / 20%);
    transform: rotateX(63deg) rotateZ(-28deg);
    box-shadow: 0 0 25px rgb(174 146 255 / 5%);
  }

  .orbit-inner {
    width: 56%;
    border-color: rgb(203 189 255 / 24%);
    transform: rotateX(67deg) rotateZ(35deg);
  }

  .orbit-core {
    position: relative;
    display: grid;
    width: 29%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgb(217 204 255 / 46%);
    border-radius: 50%;
    background: radial-gradient(
      circle at 36% 26%,
      #35284e,
      #181422 58%,
      #0e0c13 100%
    );
    box-shadow:
      0 0 0 12px rgb(182 161 255 / 3%),
      0 0 50px rgb(155 116 255 / 23%),
      inset 0 1px 15px rgb(207 190 255 / 19%);
    place-items: center;
  }

  .core-symbol {
    z-index: 1;
    color: #e2d9ff;
    font-size: clamp(2.4rem, 6.5vw, 4.6rem);
    font-weight: 390;
    letter-spacing: -0.12em;
    line-height: 1;
    text-shadow: 0 0 28px rgb(193 169 255 / 45%);
    transform: translateX(-0.04em);
  }

  .core-glint {
    position: absolute;
    top: 13%;
    left: 20%;
    width: 39%;
    aspect-ratio: 1.45;
    transform: rotate(-35deg);
    border-radius: 50%;
    background: rgb(228 215 255 / 42%);
    filter: blur(17px);
  }

  .orbit-node {
    position: absolute;
    z-index: 1;
    width: 8px;
    aspect-ratio: 1;
    border: 1px solid #d8caff;
    border-radius: 50%;
    background: #aa91ff;
    box-shadow: 0 0 16px rgb(188 166 255 / 91%);
  }

  .node-one {
    top: 21%;
    left: 23%;
  }

  .node-two {
    right: 14%;
    bottom: 34%;
    width: 6px;
    background: #b4eedb;
    box-shadow: 0 0 15px rgb(168 236 213 / 78%);
  }

  .node-three {
    right: 27%;
    bottom: 16%;
    width: 4px;
    border-color: #f3dca1;
    background: #f3dca1;
    box-shadow: 0 0 13px rgb(243 220 161 / 65%);
  }

  .scene-cross {
    position: absolute;
    color: rgb(218 206 255 / 52%);
    font-size: 1.2rem;
    font-weight: 300;
  }

  .cross-one {
    top: 13%;
    right: 19%;
  }

  .cross-two {
    bottom: 20%;
    left: 16%;
    color: rgb(168 236 213 / 55%);
    font-size: 0.95rem;
  }

  .build-card {
    position: relative;
    width: min(88%, 355px);
    margin-top: -3.05rem;
    padding: 1.15rem 1.25rem 1.05rem;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 0.75rem;
    background: linear-gradient(
      142deg,
      rgb(27 23 36 / 91%),
      rgb(15 13 21 / 96%)
    );
    box-shadow:
      0 25px 70px rgb(0 0 0 / 31%),
      inset 0 1px 0 rgb(255 255 255 / 4%);
    backdrop-filter: blur(14px);
  }

  .card-topline,
  .card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
  }

  .card-topline {
    color: #c3bdce;
    font-size: 0.61rem;
    font-weight: 610;
    letter-spacing: 0.11em;
  }

  .live-dot {
    width: 5px;
    height: 5px;
    margin-right: 0.36rem;
    vertical-align: 1px;
  }

  .card-code {
    color: #9992a5;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
  }

  .card-divider {
    height: 1px;
    margin-block: 0.85rem 0.95rem;
    background: var(--line);
  }

  .card-label {
    color: #9992a5;
    font-size: 0.59rem;
    letter-spacing: 0.15em;
  }

  .card-domain {
    margin-top: 0.32rem;
    color: #f2edf9;
    font-size: clamp(1.45rem, 3vw, 1.85rem);
    font-weight: 480;
    letter-spacing: -0.065em;
  }

  .card-domain span {
    color: #a99ac8;
  }

  .card-bottom {
    margin-top: 0.9rem;
    color: #9993a3;
    font-size: 0.68rem;
  }

  .card-arrow {
    display: grid;
    width: 24px;
    height: 24px;
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: 50%;
    color: #c8b9fa;
    font-size: 0.8rem;
    place-items: center;
  }

  .visual-caption {
    margin-top: 1.25rem;
    color: #918b9d;
    font-size: 0.57rem;
    letter-spacing: 0.19em;
    text-align: center;
  }

  .social-links {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.3vw, 2.15rem);
  }

  .site-footer > p {
    color: #827c8d;
    font-size: 0.69rem;
  }

  .footer-separator {
    padding-inline: 0.3rem;
    color: #5f596b;
  }

  .social-links a {
    color: #a7a1b1;
    font-size: 0.7rem;
    text-decoration: none;
    transition: color 160ms ease;
  }

  .social-links a:hover {
    color: var(--violet-bright);
  }

  .social-links a span {
    margin-left: 0.13rem;
    color: #827a98;
    transition: color 160ms ease;
  }

  .social-links a:hover span {
    color: var(--violet);
  }

  .ambient-glow {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    width: 17rem;
    height: 17rem;
    transform: translate3d(
      calc(var(--pointer-x, 50vw) - 50%),
      calc(var(--pointer-y, 50vh) - 50%),
      0
    );
    border-radius: 50%;
    background: rgb(119 88 200 / 5%);
    filter: blur(85px);
    pointer-events: none;
    transition: transform 400ms ease-out;
  }

  .particle-field {
    position: fixed;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.55;
    pointer-events: none;
  }
}

@layer motion {
  @media (min-width: 901px) {
    .hero-copy > * {
      animation: rise-in 740ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
    }

    .hero-copy > :nth-child(2) {
      animation-delay: 70ms;
    }

    .hero-copy > :nth-child(3) {
      animation-delay: 140ms;
    }

    .hero-copy > :nth-child(4) {
      animation-delay: 210ms;
    }

    .visual-column {
      animation: appear 1000ms ease 150ms both;
    }

    .orbit-outer {
      animation: orbit-sway 20s linear infinite;
    }

    .orbit-middle {
      animation: orbit-sway 28s linear infinite reverse;
    }

    .orbit-inner {
      animation: orbit-sway 35s linear infinite;
    }

    .orbit-node {
      animation: node-pulse 3.8s ease-in-out infinite;
    }

    .node-two {
      animation-delay: -1.2s;
    }

    .node-three {
      animation-delay: -2.4s;
    }
  }

  @keyframes rise-in {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes appear {
    from {
      opacity: 0;
      transform: translateY(9px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes orbit-sway {
    from {
      rotate: 0deg;
    }
    to {
      rotate: 360deg;
    }
  }

  @keyframes node-pulse {
    0%,
    100% {
      opacity: 0.82;
      scale: 0.85;
    }
    50% {
      opacity: 1;
      scale: 1.18;
    }
  }

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

    .ambient-glow {
      display: none;
    }
  }
}

@media (max-width: 1000px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(290px, 0.8fr);
    gap: clamp(1.5rem, 4vw, 3rem);
  }

  h1 {
    font-size: clamp(3.25rem, 7.3vw, 5.1rem);
  }

  .visual-column {
    min-height: 410px;
  }
}

@media (max-width: 820px) {
  .site-header {
    min-height: 86px;
  }

  .page-shell {
    min-height: auto;
    padding-block: 4.5rem 3.5rem;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  .hero-copy {
    width: min(100%, 640px);
    margin-inline: auto;
  }

  .visual-column {
    width: min(100%, 560px);
    min-height: 410px;
    margin-inline: auto;
  }

  .orbit-scene {
    width: min(85vw, 375px);
  }

  .build-card {
    width: min(80%, 355px);
    margin-top: -2.55rem;
  }

  .visual-caption {
    margin-bottom: 0.5rem;
  }

  .site-footer {
    min-height: 74px;
  }
}

@media (max-width: 560px) {
  :root {
    --page-pad: 1.2rem;
  }

  .site-header {
    min-height: 78px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .brand-copy strong {
    font-size: 0.82rem;
  }

  .brand-copy > span {
    font-size: 0.63rem;
  }

  .availability {
    gap: 0.42rem;
    font-size: 0.65rem;
  }

  .availability-dot {
    width: 5px;
    height: 5px;
  }

  .page-shell {
    padding-block: 3.6rem 2.4rem;
  }

  .hero {
    gap: 1.1rem;
  }

  .eyebrow {
    gap: 0.56rem;
    font-size: 0.59rem;
    letter-spacing: 0.15em;
  }

  .eyebrow-line {
    width: 22px;
  }

  h1 {
    margin-top: 1.35rem;
    font-size: clamp(3.15rem, 12.2vw, 4.2rem);
  }

  .hero-description {
    max-width: 390px;
    margin-top: 1.25rem;
    font-size: 0.96rem;
    line-height: 1.74;
  }

  .signup {
    margin-top: 2.45rem;
  }

  .email-row {
    min-height: 56px;
    gap: 0.45rem;
  }

  .email-icon {
    margin-left: 0.48rem;
  }

  .email-row input[type="email"] {
    font-size: 0.82rem;
  }

  .submit-button {
    min-width: 104px;
    min-height: 44px;
    gap: 0.35rem;
    font-size: 0.76rem;
  }

  .consent-row {
    font-size: 0.67rem;
  }

  .visual-column {
    min-height: 340px;
  }

  .orbit-scene {
    width: min(86vw, 330px);
  }

  .build-card {
    width: min(88%, 340px);
    margin-top: -2.2rem;
    padding: 1rem 1.05rem 0.92rem;
  }

  .card-domain {
    font-size: 1.62rem;
  }

  .visual-caption {
    margin-top: 1.05rem;
    font-size: 0.51rem;
    letter-spacing: 0.15em;
  }

  .site-footer {
    min-height: 92px;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    row-gap: 0.78rem;
  }

  .site-footer > p,
  .social-links a {
    font-size: 0.66rem;
  }

  .social-links {
    gap: 1.05rem;
  }
}

@media (max-width: 370px) {
  .availability {
    max-width: 126px;
    text-align: right;
  }

  .email-row {
    gap: 0.3rem;
  }

  .email-icon {
    width: 16px;
    margin-left: 0.35rem;
  }

  .submit-button {
    min-width: 93px;
  }
}

@media (pointer: coarse) {
  .ambient-glow {
    display: none;
  }
}