:root {
  /* Typography compliance phrases: IBM Plex Mono** for pressure readings; Space Grotesk** for short poetic statements and navigational phrases. */
  --trench: #020817;
  --abyss: #052A4F;
  --teal: #006D77;
  --foam: #D8F6FF;
  --mint: #7CFFCB;
  --violet: #4A2D73;
  --coral: #FF5A5F;
  --mx: 50vw;
  --my: 50vh;
  --scroll: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--trench); }

body {
  margin: 0;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  color: var(--foam);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(124,255,203,.22), transparent 25vw),
    radial-gradient(circle at 16% 12%, rgba(74,45,115,.66), transparent 34vw),
    radial-gradient(circle at 84% 44%, rgba(0,109,119,.45), transparent 31vw),
    linear-gradient(132deg, var(--trench), #03162c 46%, var(--abyss));
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  pointer-events: none;
  background:
    repeating-linear-gradient(102deg, rgba(216,246,255,.04) 0 1px, transparent 1px 58px),
    radial-gradient(circle at 40% 60%, rgba(255,90,95,.12), transparent 18vw);
  mix-blend-mode: screen;
  transform: translateY(calc(var(--scroll) * -80px)) rotate(-4deg);
  z-index: 1;
}

.ocean { position: relative; isolation: isolate; }

.zone {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 5vw, 80px);
}

.hero-zone {
  min-height: 112vh;
  background:
    radial-gradient(ellipse at 18% 72%, rgba(0,109,119,.88), transparent 28vw),
    radial-gradient(ellipse at 76% 18%, rgba(124,255,203,.26), transparent 20vw),
    radial-gradient(ellipse at 60% 62%, rgba(74,45,115,.72), transparent 38vw),
    linear-gradient(155deg, var(--trench) 0%, var(--abyss) 58%, #01040d 100%);
}

.edge-nav {
  position: fixed;
  left: 12px;
  top: 8vh;
  bottom: 8vh;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .18em;
  transform: rotate(-1deg);
}

.edge-nav a {
  color: rgba(216,246,255,.72);
  text-decoration: none;
  writing-mode: vertical-rl;
  padding: 8px 3px;
  border-left: 1px solid rgba(124,255,203,.35);
}

.mono { font-family: "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }

.wordmark {
  position: absolute;
  left: -9vw;
  top: -17vh;
  display: flex;
  gap: clamp(1px, .6vw, 9px);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(20rem, 41vw, 46rem);
  line-height: .76;
  letter-spacing: -.045em;
  color: rgba(216,246,255,.86);
  filter: drop-shadow(0 0 34px rgba(124,255,203,.28));
  transform: translate3d(calc((var(--mx) - 50vw) * -.018), calc((var(--my) - 50vh) * -.02), 0) skew(-8deg) rotate(-7deg);
  z-index: 2;
}

.wordmark span {
  display: block;
  transform: translateY(calc(sin(var(--float)) * 1px));
  animation: buoy 6.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--float) * -1s);
  opacity: .92;
}

@keyframes buoy {
  from { translate: 0 calc(var(--float) * -18px); scale: 1 .96; }
  to { translate: 0 calc(var(--float) * 22px); scale: 1 1.08; }
}

.mesh, .morph, .blade, .sonar, .coral-cut, .signal-ring { position: absolute; pointer-events: none; }

.mesh-a {
  width: 62vw; height: 62vw; left: 38vw; top: 3vh;
  border-radius: 42% 58% 34% 66%;
  background: radial-gradient(circle at 35% 33%, var(--mint), transparent 17%), radial-gradient(circle at 72% 68%, var(--violet), transparent 38%), var(--teal);
  opacity: .42; filter: blur(35px); mix-blend-mode: screen;
  animation: morph 12s ease-in-out infinite alternate;
}

.mesh-b {
  width: 48vw; height: 32vw; left: -8vw; bottom: 4vh;
  clip-path: polygon(0 18%, 77% 0, 100% 64%, 23% 100%);
  background: linear-gradient(126deg, var(--violet), var(--teal), transparent);
  opacity: .58; filter: blur(12px);
}

@keyframes morph {
  0% { border-radius: 58% 42% 70% 30%; transform: rotate(0deg) skew(-5deg); }
  100% { border-radius: 28% 72% 37% 63%; transform: rotate(13deg) skew(9deg); }
}

.blade-one {
  inset: 14vh -8vw auto auto; width: 46vw; height: 16vh;
  background: var(--coral); opacity: .86;
  clip-path: polygon(3% 24%, 100% 0, 92% 38%, 0 100%);
  transform: rotate(-12deg);
  z-index: 4; mix-blend-mode: screen;
}

.blade-two {
  left: 8vw; bottom: 13vh; width: 54vw; height: 11vh;
  background: rgba(216,246,255,.68);
  clip-path: polygon(0 40%, 83% 0, 100% 16%, 12% 100%);
  transform: rotate(-27deg); z-index: 3; opacity: .42;
}

.sonar-one { right: 10vw; bottom: 9vh; width: 25vw; height: 25vw; border: 1px solid rgba(124,255,203,.3); border-radius: 50%; box-shadow: inset 0 0 0 4vw rgba(124,255,203,.02), 0 0 0 5vw rgba(216,246,255,.025); clip-path: polygon(0 0, 100% 0, 74% 42%, 100% 100%, 0 100%); }

.tag { position: absolute; z-index: 5; font-size: 11px; color: var(--foam); background: rgba(2,8,23,.58); padding: 8px 10px; border: 1px solid rgba(124,255,203,.35); }
.tag-north { left: 25vw; top: 8vh; transform: rotate(-12deg); }
.tag-east { right: 4vw; top: 45vh; transform: rotate(41deg); color: var(--mint); }

.slab { position: relative; z-index: 8; background: rgba(5,42,79,.52); border: 1px solid rgba(216,246,255,.2); backdrop-filter: blur(6px); }
.slab-12 { transform: skew(-12deg) rotate(-3deg); }
.slab-27 { transform: skew(-8deg) rotate(5deg); }
.hero-copy { width: min(560px, 76vw); padding: 28px; top: 58vh; left: 10vw; }
.hero-copy > * { transform: skew(12deg); }
h1, h2 { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; text-transform: uppercase; margin: 0; letter-spacing: -.02em; }
h1 { font-size: clamp(4rem, 10vw, 10rem); line-height: .78; color: var(--mint); }
h2 { font-size: clamp(4rem, 13vw, 14rem); line-height: .78; }
p { font-size: clamp(1rem, 1.8vw, 1.35rem); line-height: 1.35; }
.hero-copy .mono, .signal-card .mono, .pressure-text .mono { font-size: 11px; color: var(--coral); }
.tiny-cta { position: absolute; right: 13vw; bottom: 7vh; z-index: 9; font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--mint); border-top: 1px solid var(--mint); padding-top: 7px; transform: rotate(-9deg); }

.descent { background: linear-gradient(180deg, rgba(5,42,79,.36), var(--trench)); }
.depth-label { position: absolute; left: -3vw; top: 0; font-family: "Bebas Neue", Impact, sans-serif; font-size: 42vw; color: rgba(216,246,255,.06); line-height: .8; transform: skew(-10deg); }
.panel { position: absolute; z-index: 4; padding: 26px; width: min(640px, 72vw); background: rgba(0,109,119,.36); clip-path: polygon(0 9%, 100% 0, 92% 100%, 7% 82%); }
.shard-left { left: 12vw; top: 19vh; transform: rotate(-12deg); }
.panel .mono { color: var(--mint); font-size: 11px; }
.drift-poem { position: absolute; right: 10vw; bottom: 18vh; width: 34vw; min-width: 280px; color: rgba(216,246,255,.78); transform: rotate(7deg); }
.tick-ruler { position: absolute; right: 16vw; top: 16vh; height: 62vh; width: 32px; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(12deg); }
.tick-ruler span { height: 1px; background: var(--foam); box-shadow: -36px 0 0 var(--mint), 18px 0 0 var(--coral); }
.morph-one { left: 48vw; top: 35vh; width: 30vw; height: 25vw; background: radial-gradient(circle at 35% 30%, var(--mint), var(--teal) 38%, var(--violet)); clip-path: polygon(14% 0, 91% 21%, 66% 100%, 0 74%); opacity: .52; filter: blur(10px); animation: polygonShift 7s ease-in-out infinite alternate; }
@keyframes polygonShift { to { clip-path: polygon(30% 8%, 100% 42%, 47% 91%, 0 44%); transform: rotate(20deg) scale(1.12); } }

.pressure-zone { background: radial-gradient(circle at 72% 52%, rgba(74,45,115,.68), transparent 28vw), linear-gradient(163deg, var(--abyss), var(--trench) 68%); }
.pressure-text { position: absolute; left: 7vw; top: 18vh; width: 72vw; z-index: 4; transform: rotate(-5deg); }
.pressure-text h2 { color: var(--foam); text-shadow: 18px 11px 0 rgba(255,90,95,.42); }
.fragment-word { position: absolute; right: -7vw; bottom: -8vh; font-family: "Bebas Neue", Impact, sans-serif; font-size: 39vw; line-height: .7; color: rgba(124,255,203,.18); transform: skew(9deg) rotate(3deg); }
.coral-cut { left: -4vw; bottom: 23vh; width: 118vw; height: 9vh; background: var(--coral); clip-path: polygon(0 86%, 100% 0, 97% 26%, 0 100%); mix-blend-mode: screen; opacity: .82; }
.side-note { position: absolute; right: 8vw; top: 12vh; font-size: 10px; color: var(--mint); transform: rotate(27deg); }

.signal-zone { background: radial-gradient(circle at 50% 50%, rgba(124,255,203,.13), transparent 20vw), var(--trench); }
.signal-ring { width: 72vw; height: 72vw; left: 14vw; top: 8vh; border-radius: 50%; border: 1px solid rgba(216,246,255,.2); box-shadow: 0 0 0 7vw rgba(0,109,119,.08), 0 0 0 14vw rgba(74,45,115,.08); clip-path: polygon(0 0, 100% 12%, 76% 48%, 100% 100%, 0 88%, 22% 48%); animation: ringPulse 8s ease-in-out infinite alternate; }
@keyframes ringPulse { to { transform: scale(1.12) rotate(11deg); border-color: rgba(124,255,203,.42); } }
.signal-card { width: min(720px, 78vw); padding: 34px; position: absolute; left: 18vw; top: 24vh; }
.signal-card > * { transform: skew(8deg); }
.signal-card h2 { color: var(--mint); }
.glyphs { position: absolute; left: 4vw; bottom: 14vh; color: var(--coral); transform: rotate(-12deg); font-size: 12px; }

.undertow-zone { min-height: 105vh; background: radial-gradient(ellipse at 50% 80%, rgba(124,255,203,.22), transparent 32vw), linear-gradient(180deg, var(--trench), #000 78%); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.final-mark { font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(9rem, 28vw, 30rem); line-height: .72; letter-spacing: -.04em; color: rgba(216,246,255,.16); margin-left: -5vw; transform: rotate(-4deg) skew(-6deg); }
.final-code { color: var(--mint); font-size: 11px; margin-left: 13vw; transform: rotate(5deg); }
.undertow-zone h2 { color: var(--foam); max-width: 900px; margin-left: 8vw; }
.final-copy { max-width: 680px; margin-left: 38vw; color: rgba(216,246,255,.72); transform: rotate(-3deg); }

@media (max-width: 760px) {
  .edge-nav { display: none; }
  .wordmark { font-size: 44vw; top: 4vh; left: -6vw; }
  .hero-copy { top: 48vh; left: 5vw; }
  .drift-poem, .final-copy { width: auto; left: 8vw; right: 8vw; margin-left: 0; }
  .signal-card, .pressure-text { left: 7vw; width: 86vw; }
}