/* Two stacked layers shared by the clipped-path variants. */
.layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.layer.work {
  background: var(--paper);
  color: var(--ink);
  z-index: 1;
}

.layer.work::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events: none;
}

.layer.smarter {
  background:
    radial-gradient(600px circle at var(--mx, 70%) var(--my, 60%), rgba(255, 138, 61, 0.13), transparent 60%),
    var(--ink);
  color: var(--on-ink);
  z-index: 2;
  will-change: clip-path;
}

.layer .hit {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.layer canvas.net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.edge {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  fill: none;
  stroke: var(--orange-glow);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(255, 138, 61, 0.7));
}

/* Wordmark split at the seam: "work" ends where the seam is, "smarter" begins there. */
.mark {
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  height: 0;
  margin: 0;
  font: 800 clamp(1.3rem, 2.1vw, 1.9rem)/1 var(--sans);
  letter-spacing: -0.02em;
  z-index: 4;
  pointer-events: none;
}

.mark span {
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.mark .w { right: calc(100% - var(--seam)); padding-right: 0.04em; }
.mark .s { left: var(--seam); }
.layer.smarter .mark .s { color: var(--orange-glow); }
.layer.work .mark .w { color: var(--ink); }

.portrait .mark { top: 0; }
.portrait .mark .w { right: auto; left: 22px; top: calc(var(--seam) - 2.1em); }
.portrait .mark .s { left: 22px; top: calc(var(--seam) + 0.9em); }

.brand {
  position: absolute;
  top: 28px;
  left: 30px;
  z-index: 4;
  font: 800 1.35rem/1 var(--sans);
  letter-spacing: -0.02em;
  margin: 0;
}

.brand b { font-weight: 800; color: var(--orange); }

.side {
  position: absolute;
  z-index: 2;
  max-width: 30rem;
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}

.side h2 {
  font: 800 clamp(3.6rem, 9vw, 8.5rem)/0.86 var(--sans);
  letter-spacing: -0.045em;
  margin: 0.25em 0 0.22em;
}

.side p {
  font: 400 clamp(1rem, 1.25vw, 1.2rem)/1.5 var(--sans);
  margin: 0 0 1.6em;
  max-width: 26rem;
}

.layer.work .side p { color: var(--muted); }
.layer.smarter .side p { color: var(--on-ink-muted); }
.layer.work .kicker { color: var(--orange); }
.layer.smarter .kicker { color: var(--orange-glow); }


.host {
  display: block;
  margin-top: 1.1em;
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.flooding .side { opacity: 0; }

.topbar {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 10;
  font: 400 0.78rem/1 var(--mono);
  letter-spacing: 0.08em;
  mix-blend-mode: difference;
  color: #fff;
}

.foot {
  position: fixed;
  bottom: 22px;
  left: 30px;
  right: 30px;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  font: 400 0.72rem/1 var(--mono);
  letter-spacing: 0.06em;
  mix-blend-mode: difference;
  color: #b8b8b8;
}

@media (max-width: 700px) {
  .side h2 { font-size: clamp(3rem, 15vw, 4.4rem); }
  .side p { font-size: 0.95rem; margin-bottom: 1.1em; }
  .side .host { display: none; }
  .foot { left: 18px; right: 18px; bottom: 14px; }
  .topbar { top: 18px; right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .side, .cta { transition: none; }
}