.page{position:relative;display:flex;min-height:100dvh;overflow:hidden;flex-direction:column;background:var(--color-graphite)}
.page::before{content:"";position:absolute;right:-14rem;top:16%;width:36rem;height:36rem;border:1px solid var(--color-border);border-radius:50%;opacity:.55}
.nav{position:relative;z-index:2;display:flex;width:min(100%,1280px);height:5rem;align-items:center;justify-content:space-between;margin:auto;padding:0 2rem}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-weight:760;letter-spacing:-.02em}
.brand>span{display:grid;width:1.8rem;height:1.8rem;place-items:center;border-radius:var(--radius-brand);background:var(--color-signal);color:var(--color-graphite)}
.navAccess{border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-soft-white);padding:.55rem .9rem;font-size:.8rem;text-decoration:none}
.hero{position:relative;z-index:1;display:grid;width:min(100%,1280px);flex:1;grid-template-columns:1fr .72fr;align-items:center;gap:5rem;margin:auto;padding:5rem 2rem 7rem}
.copy{max-width:42rem}
.status{display:flex;align-items:center;gap:.55rem;width:max-content;margin:0 0 1.5rem;color:var(--color-cool-gray);font-size:.8rem;font-weight:650}
.status svg{color:var(--color-signal)}
.copy h1{max-width:10ch;margin:0;font-size:clamp(4rem,7vw,6rem);font-weight:680;line-height:.93;letter-spacing:-.04em;text-wrap:balance}
.copy>p:not(.status){max-width:31rem;margin:1.8rem 0 2rem;color:var(--color-cool-gray);font-size:1.05rem;line-height:1.65;text-wrap:pretty}
.cta{display:flex;width:max-content;min-height:3.35rem;align-items:center;gap:1rem;border-radius:var(--radius-sm);background:var(--color-signal);color:var(--color-signal-ink);padding:0 1.25rem;font-weight:780;text-decoration:none;transition:transform var(--duration-fast) var(--ease-out),background var(--duration-fast)}
.cta:hover{background:var(--color-signal-strong);transform:translateY(-2px)}
.mark{position:relative;display:grid;justify-self:end;width:min(32vw,23rem);aspect-ratio:1;place-items:center;border:1px solid var(--color-border);border-radius:50%;background:var(--color-carbon)}
.mark::before{content:"";position:absolute;inset:2.2rem;border:1px solid var(--color-border);border-radius:50%}
.mark>div{display:grid;width:8rem;height:8rem;place-items:center;border-radius:50%;background:var(--color-signal);color:var(--color-signal-ink)}
.mark>span{position:absolute;right:9%;bottom:15%;color:var(--color-muted);font-size:.72rem;font-weight:750;letter-spacing:.18em}
.footer{position:relative;z-index:2;display:flex;width:min(100%,1280px);align-items:center;justify-content:space-between;margin:auto;border-top:1px solid var(--color-border);padding:1.5rem 2rem}
.footer p{margin:0;color:var(--color-muted);font-size:.7rem}
@media(max-width:850px){.hero{grid-template-columns:1fr;gap:4rem;padding-top:4rem}.mark{justify-self:start;width:min(70vw,20rem)}.copy h1{font-size:clamp(3.4rem,14vw,5.5rem)}}
@media(max-width:560px){.nav,.hero,.footer{padding-inline:1.25rem}.navAccess{padding:.5rem .7rem}.hero{padding-block:3rem 5rem}.copy h1{font-size:clamp(3rem,15vw,4.4rem)}.mark{width:min(76vw,18rem)}.mark>div{width:6.5rem;height:6.5rem}.mark>div svg{width:3.4rem;height:3.4rem}}