.frame {
  --ink: #0b1020;
  --indigo: #283a8f;
  --aperture-offset: min(6.364vw, 6.808vh);
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  font-family: Geist, Inter, ui-sans-serif, system-ui, sans-serif;
}

.hero { position: relative; z-index: 1; min-height: 100svh; overflow: hidden; padding: 0 clamp(28px, 6vw, 88px); }
.header { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0f5; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 720; letter-spacing: -.025em; }
.headerSymbol { width: 35px; height: 35px; overflow: visible; }
.headerSymbol path { fill: var(--indigo); }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.8vw, 38px); color: #677086; font-size: .75rem; }
.nav strong { min-height: 38px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 7px; color: #fff; background: var(--indigo); }
.heroInner { position: relative; min-height: calc(100svh - 76px); display: grid; align-content: center; max-width: 900px; padding: clamp(52px, 9vh, 112px) 0; }
.eyebrow { margin: 0 0 22px; color: var(--indigo); font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.heroInner h1 { max-width: 13ch; margin: 0; font-size: clamp(3rem, 8vw, 7.5rem); font-weight: 560; letter-spacing: -.055em; line-height: .96; }
.supporting { max-width: 58ch; margin: 28px 0 0; color: #5d667a; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.65; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.primaryAction, .secondaryAction { min-height: 46px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 8px; font-size: .875rem; font-weight: 650; }
.primaryAction { color: #fff; background: var(--indigo); }
.secondaryAction { color: var(--ink); border: 1px solid #d7dceb; background: #fff; }
.proof { margin-top: 34px; color: #7a8397; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.environment { position: absolute; z-index: -1; inset: 17% -14% -14% 58%; border: 1px solid #e7ebf2; border-radius: 28px; background: linear-gradient(#f1f3f7 1px, transparent 1px), linear-gradient(90deg, #f1f3f7 1px, transparent 1px), #f7f8fa; background-size: 40px 40px; }

.overlay { position: fixed; z-index: 20; inset: 0; overflow: hidden; pointer-events: auto; }
.veil {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: #f7f8fb;
  -webkit-mask-image: radial-gradient(circle at calc(50% + var(--aperture-offset)) 50%, transparent 0 var(--aperture-radius), rgba(0,0,0,.08) calc(var(--aperture-radius) + var(--aperture-near)), rgba(0,0,0,.68) calc(var(--aperture-radius) + var(--aperture-mid)), #000 calc(var(--aperture-radius) + var(--aperture-far)));
  mask-image: radial-gradient(circle at calc(50% + var(--aperture-offset)) 50%, transparent 0 var(--aperture-radius), rgba(0,0,0,.08) calc(var(--aperture-radius) + var(--aperture-near)), rgba(0,0,0,.68) calc(var(--aperture-radius) + var(--aperture-mid)), #000 calc(var(--aperture-radius) + var(--aperture-far)));
}
.mark { position: absolute; z-index: 1; top: 50%; left: 50%; width: min(86vw, 92vh); width: min(86vw, 92svh); aspect-ratio: 1; transform: translate(-50%, -50%); }
.mark svg { width: 100%; height: 100%; overflow: visible; }
.maskLeft, .maskRight { transform-box: fill-box; }
.maskLeft { transform-origin: left center; }
.maskRight { transform-origin: right center; }
.light {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle var(--light-radius) at calc(50% + var(--aperture-offset)) 50%, rgba(255,255,255,1) 0, rgba(253,254,255,.92) 28%, rgba(247,250,255,.38) 68%, transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

@media (max-aspect-ratio: 3 / 4) { .frame { --aperture-offset: min(8.88vw, 6.068vh); } .mark { width: min(120vw, 82vh); width: min(120vw, 82svh); } }
@media (max-width: 700px) { .hero { padding-inline: 22px; } .nav span { display: none; } .environment { inset: 48% -48% -26% 34%; opacity: .62; } }
@media (prefers-reduced-motion: reduce) { .overlay { display: none; } }