html,
body {
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--tw-bone);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hero-cacophony {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  --noise-opacity-boost: 1.34;
  background:
    radial-gradient(circle at 48% 44%, rgba(255,255,255,.72), transparent 28rem),
    radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--tw-err-bg) 34%, transparent), transparent 42rem),
    radial-gradient(color-mix(in oklch, var(--fg) 6%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--tw-bone);
}

.hero-cacophony::before,
.hero-cacophony::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.hero-cacophony::before {
  background: radial-gradient(circle at 50% 48%, rgba(245,243,238,.58) 0 18rem, rgba(245,243,238,.28) 34rem, rgba(245,243,238,.76) 70rem);
}

.hero-cacophony::after {
  background: linear-gradient(90deg, rgba(245,243,238,.78), transparent 22%, transparent 78%, rgba(245,243,238,.78));
}

.noise-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 980px;
  transform-style: preserve-3d;
}

.noise-plane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, 1440px);
  height: min(100vh, 900px);
  overflow: visible;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  container-type: size;
}

.noise-item {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: min(.9, calc(var(--o) * var(--noise-opacity-boost)));
  transform:
    translate3d(var(--x), var(--y), var(--z))
    rotate(var(--r))
    scale(var(--s));
  animation: depthDrift var(--d) ease-in-out var(--delay) infinite alternate;
  will-change: transform, opacity;
}

.layer-near { filter: blur(.1px); }
.layer-mid { filter: blur(.35px); }
.layer-far { filter: blur(.8px) saturate(.86); }

.noise-card {
  width: 318px;
  padding: .875rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--tw-paper) 90%, transparent);
  box-shadow: 0 1px 2px rgba(28,25,23,.05), 0 14px 28px -24px rgba(28,25,23,.34);
  backdrop-filter: blur(10px);
}

.noise-card header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .625rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.noise-card header b {
  margin-left: auto;
  font: inherit;
  color: var(--fg-hint);
}

.noise-card h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.18;
  letter-spacing: 0;
  color: var(--fg);
}

.noise-card p {
  margin: .375rem 0 0;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--fg-body);
}

.noise-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--tw-forest);
  color: #fff;
}

.noise-icon::before {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.noise-icon--mail {
  --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 9L12 12.5L17 9' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 17V7C2 5.895 2.895 5 4 5H20C21.105 5 22 5.895 22 7V17C22 18.105 21.105 19 20 19H4C2.895 19 2 18.105 2 17Z' stroke='currentColor'/%3E%3C/svg%3E");
}

.noise-icon--event {
  --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 4V2M15 4V6M15 4H10.5M3 10V19C3 20.105 3.895 21 5 21H19C20.105 21 21 20.105 21 19V10H3Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 10V6C3 4.895 3.895 4 5 4H7' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 2V6' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 10V6C21 4.895 20.105 4 19 4H18.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background: #f05537;
}

.noise-icon--post {
  --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.906 17.505L5.337 3.718C5.529 2.63 6.566 1.904 7.654 2.095L19.472 4.179C20.56 4.371 21.286 5.408 21.094 6.496L18.663 20.283C18.471 21.371 17.434 22.097 16.346 21.906L4.528 19.822C3.441 19.63 2.714 18.593 2.906 17.505Z' stroke='currentColor'/%3E%3Cpath d='M8.929 6.382L16.808 7.771' stroke='currentColor' stroke-linecap='round'/%3E%3Cpath d='M8.234 10.321L16.113 11.711' stroke='currentColor' stroke-linecap='round'/%3E%3Cpath d='M7.54 14.261L12.464 15.129' stroke='currentColor' stroke-linecap='round'/%3E%3C/svg%3E");
  background: var(--tw-err-ink);
}

.noise-card--rejection .noise-icon,
.noise-card--mail .noise-icon { background: var(--tw-forest); }
.noise-card--advice .noise-icon { background: var(--tw-err-ink); }

.chat-bubble {
  max-width: 320px;
  padding: .625rem .875rem .675rem;
  border-radius: 18px;
  font-size: 1rem;
  line-height: 1.25;
  color: #fff;
  box-shadow: 0 1px 2px rgba(28,25,23,.06), 0 12px 24px -22px rgba(28,25,23,.32);
}

.chat-bubble--in {
  background: #26252a;
  border-bottom-left-radius: 6px;
}

.chat-bubble--out {
  background: #278eff;
  border-bottom-right-radius: 6px;
}

.chat-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  background: currentColor;
}

.chat-bubble--in::after {
  left: -4px;
  background: #26252a;
  border-bottom-right-radius: 12px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.chat-bubble--out::after {
  right: -4px;
  background: #278eff;
  border-bottom-left-radius: 12px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.noise-artifact {
  width: 360px;
  pointer-events: none;
  transform-origin: center;
}

.noise-artifact--course {
  width: 300px;
}

.noise-artifact--social {
  width: 360px;
}

.hero-copy {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(680px, calc(100vw - 2rem));
  margin: 0 auto;
  text-align: center;
  pointer-events: none;
}

.hero-copy__eyebrow {
  margin: 0 0 .875rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tw-forest);
}

.hero-copy h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(3rem, 6.6vw, 6.6rem);
  line-height: .98;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg);
  text-wrap: balance;
}

.hero-copy__body {
  width: min(560px, 100%);
  margin: 1.125rem auto 0;
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  line-height: 1.5;
  color: var(--fg-body);
}

.hero-copy__actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  pointer-events: auto;
}

.hero-copy__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 1rem;
  border-radius: var(--radius-md);
  background: var(--tw-forest);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: .9375rem;
}

.hero-copy__actions span {
  font-family: var(--font-mono);
  font-size: .6875rem;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

@keyframes depthDrift {
  0% {
    opacity: min(.82, calc(var(--o) * var(--noise-opacity-boost) * .82));
    transform:
      translate3d(var(--x), var(--y), var(--z))
      rotate(var(--r))
      scale(calc(var(--s) * .96));
  }
  50% {
    opacity: min(.9, calc(var(--o) * var(--noise-opacity-boost)));
  }
  100% {
    opacity: min(.68, calc(var(--o) * var(--noise-opacity-boost) * .62));
    transform:
      translate3d(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)), calc(var(--z) + 120px))
      rotate(calc(var(--r) * -1))
      scale(calc(var(--s) * 1.05));
  }
}

@media (max-width: 760px) {
  .noise-card { width: 270px; }
  .noise-artifact { width: 300px; }
  .noise-artifact--course { width: 260px; }
  .hero-copy { justify-content: flex-end; padding-bottom: 3rem; }
  .hero-copy h1 {
    max-width: 20rem;
    margin-inline: auto;
    font-size: 2.25rem;
    line-height: 1.02;
  }
  .hero-copy__body {
    width: min(18.5rem, 100%);
    max-width: 18.5rem;
    font-size: .98rem;
  }
  .hero-copy__actions { flex-direction: column; gap: .75rem; }
  .hero-copy__actions span {
    display: block;
    width: min(18.5rem, 100%);
    max-width: 18.5rem;
  }
}

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