@media (min-width: 701px) {
  .hero {
    position: relative !important;
    overflow: hidden !important;
    background:
      radial-gradient(760px 520px at 78% 26%, rgba(55, 224, 255, .18), transparent 62%),
      radial-gradient(720px 520px at 50% 90%, rgba(138, 91, 255, .2), transparent 68%),
      #03060d !important;
  }

  .hero::before {
    display: none !important;
  }

  .hero::after { display: none !important; }

  .scene-mount {
    opacity: .5 !important;
    filter: saturate(.85) contrast(.95) brightness(.92) !important;
  }

  .hero-top {
    position: relative !important;
    z-index: 4 !important;
    width: min(620px, 42vw) !important;
    margin-left: clamp(42px, 7vw, 122px) !important;
    padding: 126px 0 92px !important;
  }

  .hero-name {
    max-width: 8ch;
    margin: 0 0 18px;
    color: #f6fbff;
    font-family: var(--font-display);
    font-size: clamp(3.7rem, 5.2vw, 4.9rem);
    font-weight: 800;
    line-height: .86;
    letter-spacing: -.055em;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 0 22px 64px rgba(55, 224, 255, .2);
  }

  .hero-top::before {
    content: "LIVE AI OPERATING BRIEF\a \a Eval matrix\a Signal | Fit | Action\a Support intent | 91% | triage\a Plan upgrade | 87% | pricing test\a Cost guardrail | pass | ship v1\a \a Client work packet\a Decision memo ready\a Eval suite: 312 traces";
    position: absolute;
    left: calc(100% + clamp(30px, 5vw, 74px));
    top: -12px;
    width: min(560px, 40vw);
    min-height: 292px;
    padding: 28px 30px;
    white-space: pre-line;
    color: #17231f;
    font: 750 12px/1.54 var(--font-mono);
    letter-spacing: .02em;
    border: 1px solid rgba(14, 38, 31, .16);
    border-radius: 28px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(245, 250, 246, .84)),
      repeating-linear-gradient(90deg, rgba(29, 120, 89, .08) 0 1px, transparent 1px 68px);
    box-shadow: 0 30px 90px rgba(11, 36, 28, .16);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .hero-top::after {
    content: "Trace audit\a Retrieval quality 92\a Latency budget 1.4s\a Human fallback ready";
    position: absolute;
    left: calc(100% + clamp(60px, 8vw, 122px));
    top: 294px;
    width: min(350px, 28vw);
    min-height: 106px;
    padding: 16px 20px;
    white-space: pre-line;
    color: #0a241f;
    font: 800 12px/1.55 var(--font-mono);
    letter-spacing: .04em;
    border-radius: 22px;
    background:
      linear-gradient(90deg, rgba(15, 107, 79, .84) 0 22%, transparent 22% 27%, rgba(114, 200, 161, .72) 27% 62%, transparent 62% 67%, rgba(217, 236, 228, .82) 67% 100%) left bottom / calc(100% - 44px) 10px no-repeat,
      linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(238, 248, 244, .88));
    box-shadow: 0 24px 60px rgba(11, 36, 28, .15);
  }

  .wordmark {
    opacity: .2 !important;
    transform: none !important;
  }
}

@media (min-width: 701px) and (max-height: 850px) {
  .hero-top {
    padding-top: 104px !important;
    padding-bottom: 62px !important;
  }

  .hero-name {
    font-size: clamp(3.35rem, 5vw, 4.75rem);
  }

  .hero-top::before {
    top: -6px;
    min-height: 270px;
    padding: 22px 24px;
  }

  .hero-top::after {
    top: 274px;
  }
}

@media (max-width: 700px) {
  body {
    background:
      radial-gradient(520px 420px at 74% 14%, rgba(55, 224, 255, .18), transparent 62%),
      radial-gradient(460px 420px at 8% 72%, rgba(138, 91, 255, .16), transparent 68%),
      #03060d !important;
  }

  .nav {
    background: rgba(3, 6, 13, .82) !important;
    border-bottom-color: rgba(55, 224, 255, .16) !important;
  }

  .nav-inner {
    padding: 18px 28px !important;
    gap: 14px !important;
  }

  .logo {
    font-size: .78rem !important;
  }

  .nav-links .btn {
    padding: 10px 14px !important;
    font-size: .58rem !important;
  }

  .hero {
    justify-content: flex-start !important;
    min-height: 100svh !important;
    padding: 92px 16px 24px !important;
    background:
      linear-gradient(180deg, rgba(3, 6, 13, .22), rgba(3, 6, 13, .94)),
      repeating-linear-gradient(90deg, rgba(55, 224, 255, .045) 0 1px, transparent 1px 74px) !important;
  }

  .hero::before,
  .hero::after {
    display: none !important;
  }

  .scene-mount {
    opacity: .34 !important;
    filter: saturate(.8) contrast(1.08) brightness(.72) !important;
    transform: translate3d(0, -10svh, 0) scale(.94) !important;
    transform-origin: center top !important;
  }

  .hero-top {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .hero-tagline {
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(55, 224, 255, .28) !important;
    border-radius: 999px !important;
    background: rgba(55, 224, 255, .08) !important;
    color: #75edff !important;
    font-size: .56rem !important;
    line-height: 1 !important;
    letter-spacing: .28em !important;
    white-space: nowrap !important;
  }

  .hero-sub {
    max-width: 30ch !important;
    margin: 0 !important;
    color: rgba(233, 238, 251, .7) !important;
    font-size: .98rem !important;
    line-height: 1.48 !important;
  }

  .hero-top .btn {
    width: 100% !important;
    margin-top: 2px !important;
    padding: 14px 18px !important;
    background: #7cf4ff !important;
    border-color: #7cf4ff !important;
    color: #02131a !important;
    text-align: center !important;
    box-shadow: 0 18px 42px rgba(55, 224, 255, .22) !important;
  }

  .hero-top::before {
    content: none;
  }

  .hero-name {
    max-width: 100%;
    margin: 0;
    color: #f6fbff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.35rem, 10.6vw, 2.6rem);
    line-height: .86;
    letter-spacing: -.065em;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 0 18px 56px rgba(55, 224, 255, .22);
  }

  .hero-top::after {
    content: "Live AI operating brief\A \A Eval matrix\A Support intent 91% -> automate triage\A Plan upgrade 87% -> run pricing test\A Cost guardrail pass -> ship v1\A \A Trace audit: 312 production traces";
    display: block;
    box-sizing: border-box;
    white-space: pre-line;
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
    padding: 16px 16px 18px;
    color: #ecf8ff;
    font: 750 11.5px/1.42 var(--font-mono);
    border: 1px solid rgba(117, 237, 255, .22);
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(11, 20, 37, .9), rgba(5, 11, 22, .82)),
      repeating-linear-gradient(90deg, rgba(117, 237, 255, .08) 0 1px, transparent 1px 52px);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .wordmark {
    display: none !important;
  }

  .hero-top {
    position: relative !important;
    z-index: 4 !important;
  }
}