:root {
  --hai-white: #f4f7fb;
  --hai-white-soft: #d6e0ec;
  --hai-blue-gray: #8fa4bd;
  --hai-midnight: #050812;
  --hai-navy: #0a1324;
  --hai-edge: clamp(1.25rem, 5vw, 4.75rem);
  --hai-serif-jp: "Shippori Mincho", serif;
  --hai-serif-en: "EB Garamond", serif;
  --hai-sans: "Noto Sans JP", "Hiragino Sans", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
}

body {
  background: var(--hai-midnight);
  color: var(--hai-white);
  font-family: var(--hai-sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.hai-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 38%, rgba(62, 82, 124, 0.28) 0%, transparent 36%),
    radial-gradient(circle at 54% 89%, rgba(28, 64, 88, 0.2) 0%, transparent 42%),
    linear-gradient(145deg, #08101d 0%, #050812 48%, #080b18 100%);
}

.hai-hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 7, 15, 0.78) 0%, rgba(4, 8, 17, 0.56) 28%, rgba(5, 9, 18, 0.12) 54%, transparent 75%),
    linear-gradient(180deg, rgba(4, 7, 14, 0.2), transparent 25%, transparent 72%, rgba(3, 6, 13, 0.38));
}

.hai-hero__canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hai-hero__atmosphere {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 52%, rgba(10, 17, 30, 0.72) 0%, rgba(7, 13, 24, 0.34) 29%, transparent 53%),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5vw - 1px), rgba(166, 193, 220, 0.018) 12.5vw),
    radial-gradient(circle at 73% 39%, transparent 0%, rgba(102, 116, 163, 0.035) 34%, transparent 62%);
}

.hai-hero__grain {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.hai-header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.6rem var(--hai-edge) 0;
}

.hai-logo {
  display: flex;
  align-items: baseline;
  gap: 0.52rem;
  color: var(--hai-white);
}

.hai-logo__name {
  font-family: var(--hai-serif-en);
  font-size: 1.48rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1;
}

.hai-logo__lab {
  color: var(--hai-blue-gray);
  font-size: 0.52rem;
  font-weight: 400;
  letter-spacing: 0.24em;
}

.hai-comparison {
  color: rgba(196, 210, 226, 0.52);
  font-family: var(--hai-serif-en);
  font-size: 0.5rem;
  letter-spacing: 0.23em;
}

.hai-copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 4rem);
  max-width: 55rem;
  padding: 3rem var(--hai-edge) 6rem;
}

.hai-copy__eyebrow {
  margin-bottom: 1.55rem;
  color: rgba(186, 204, 224, 0.72);
  font-family: var(--hai-serif-en);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
}

.hai-copy__title {
  color: var(--hai-white);
  font-family: var(--hai-serif-jp);
  font-size: clamp(2.35rem, 5.25vw, 5rem);
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 1.45;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.45);
}

.hai-copy__title-line {
  display: block;
  font-size: 0.54em;
  white-space: nowrap;
}

.hai-copy__title-secondary {
  display: block;
  margin-top: 0.24em;
  font-size: clamp(2.6rem, 4.25vw, 4.6rem);
  letter-spacing: 0.055em;
  line-height: 1.25;
  white-space: nowrap;
}

.hai-copy__lead {
  max-width: 39rem;
  margin-top: 2rem;
  color: rgba(214, 224, 236, 0.76);
  font-size: clamp(0.82rem, 1.05vw, 1rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 2.05;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}

.hai-observation {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: var(--hai-edge);
  display: grid;
  gap: 0.7rem;
  padding-left: 1.05rem;
  color: rgba(188, 205, 224, 0.42);
  font-family: var(--hai-sans);
  font-size: 0.43rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-align: left;
  transform: translateY(-50%);
}

.hai-observation::before {
  position: absolute;
  top: 0.15rem;
  bottom: 0.15rem;
  left: 0;
  width: 1px;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(184, 211, 234, 0.3), transparent);
}

.hai-observation span {
  display: inline-block;
  min-width: 3.7rem;
  color: rgba(218, 230, 241, 0.66);
}

.hai-footerline {
  position: absolute;
  z-index: 4;
  left: var(--hai-edge);
  bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(179, 197, 218, 0.62);
  font-family: var(--hai-serif-en);
  font-size: 0.55rem;
  letter-spacing: 0.23em;
}

.hai-footerline__pulse {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: rgba(220, 234, 248, 0.95);
  box-shadow: 0 0 16px rgba(143, 190, 225, 0.72);
  animation: hai-status 5s ease-in-out infinite;
}

.hai-signal-label {
  position: absolute;
  z-index: 4;
  right: var(--hai-edge);
  bottom: 1.75rem;
  color: rgba(178, 197, 218, 0.42);
  font-family: var(--hai-serif-en);
  font-size: 0.48rem;
  letter-spacing: 0.22em;
}

@keyframes hai-status {
  0%, 100% { opacity: 0.35; transform: scale(0.78); }
  48% { opacity: 1; transform: scale(1.18); }
  58% { opacity: 0.62; transform: scale(0.92); }
}

@media (max-width: 699px) {
  .hai-header {
    padding-top: max(1.6rem, env(safe-area-inset-top));
    padding-right: max(var(--hai-edge), env(safe-area-inset-right));
    padding-left: max(var(--hai-edge), env(safe-area-inset-left));
  }

  .hai-hero::before {
    background:
      linear-gradient(180deg, rgba(3, 7, 15, 0.24) 0%, rgba(4, 8, 17, 0.25) 29%, rgba(3, 7, 15, 0.72) 52%, rgba(3, 7, 15, 0.84) 100%),
      linear-gradient(90deg, rgba(3, 7, 15, 0.62), transparent 88%);
  }

  .hai-hero__atmosphere {
    background:
      radial-gradient(ellipse at 26% 63%, rgba(8, 15, 27, 0.74) 0%, rgba(7, 13, 24, 0.36) 35%, transparent 65%),
      repeating-linear-gradient(90deg, transparent 0, transparent calc(25vw - 1px), rgba(166, 193, 220, 0.016) 25vw);
  }

  .hai-copy {
    justify-content: center;
    min-height: calc(100svh - 3.75rem);
    padding-top: 7.5rem;
    padding-right: max(var(--hai-edge), env(safe-area-inset-right));
    padding-bottom: 6.5rem;
    padding-left: max(var(--hai-edge), env(safe-area-inset-left));
    transform: translateY(2.5svh);
  }

  .hai-copy__eyebrow {
    margin-bottom: 1.2rem;
    font-size: 0.55rem;
    letter-spacing: 0.2em;
  }

  .hai-copy__title {
    font-size: clamp(1.7rem, 7.5vw, 2.1rem);
    line-height: 1.52;
  }

  .hai-copy__title-line {
    font-size: 0.62em;
  }

  .hai-copy__title-secondary {
    margin-top: 0.4em;
    font-size: clamp(1.7rem, 7.8vw, 2.25rem);
    line-height: 1.35;
  }

  .hai-copy__lead {
    max-width: 21rem;
    margin-top: 1.55rem;
    font-size: 0.79rem;
    line-height: 1.95;
  }

  .hai-copy__break {
    display: none;
  }

  .hai-footerline {
    bottom: 1.35rem;
    max-width: calc(100% - 2.5rem);
    font-size: 0.46rem;
    letter-spacing: 0.15em;
  }

  .hai-signal-label {
    display: none;
  }

  .hai-observation {
    display: none;
  }
}

@media (min-width: 960px) {
  .hai-header {
    padding-top: 2.15rem;
  }

  .hai-logo__name {
    font-size: 1.7rem;
  }

  .hai-copy {
    padding-bottom: 7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hai-footerline__pulse {
    animation: none;
  }
}