:root{
  color-scheme:dark;
  --bg:#000;
  --ink:#eef3ff;
  --muted:#a9b6cf;
  --dim:#9fb0cd;
  --accent:#6a9be0;
  --gut:clamp(20px,4.2vw,72px);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg)}
body{
  color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------- background layers ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.6s ease}
.gl #gl{opacity:1}

/* CSS-only fallback: soft mound plus a receding lattice (also the first paint before WebGL is up) */
.fb{position:absolute;inset:0;transition:opacity 1.2s ease}
.gl .fb{opacity:0;transition-delay:1.7s}
.fb::before{content:"";position:absolute;left:-30%;right:-30%;bottom:22%;height:90%;
  background:
    repeating-linear-gradient(90deg,rgba(140,168,215,.4) 0 1px,rgba(0,0,0,0) 1px 34px),
    repeating-linear-gradient(0deg,rgba(140,168,215,.4) 0 1px,rgba(0,0,0,0) 1px 34px);
  transform:perspective(900px) rotateX(46deg);transform-origin:50% 100%;
  -webkit-mask-image:radial-gradient(60% 70% at 62% 40%,#000 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(60% 70% at 62% 40%,#000 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,0) 100%)}
.fb i{position:absolute;border-radius:50%;filter:blur(60px)}
.fb .a{width:70vmax;height:46vmax;left:34%;top:14%;
  background:radial-gradient(closest-side,rgba(80,120,200,.3),rgba(30,55,130,.16) 55%,rgba(0,0,0,0) 100%);
  animation:drift1 34s ease-in-out infinite alternate}
.fb .b{width:40vmax;height:30vmax;left:56%;top:22%;
  background:radial-gradient(closest-side,rgba(190,212,255,.16),rgba(0,0,0,0) 100%);
  animation:drift2 42s ease-in-out infinite alternate}
.fb .c{display:none}
@keyframes drift1{to{transform:translate3d(-5vmax,3vmax,0) scale(1.08)}}
@keyframes drift2{to{transform:translate3d(4vmax,-3vmax,0) scale(.92)}}
@media (max-aspect-ratio:1/1){
  .fb .a{left:-30%;top:8%;width:130vmax;height:70vmax}
  .fb .b{left:20%;top:16%;width:70vmax;height:44vmax}
  .fb::before{height:62%;bottom:20%}
}
@media (prefers-reduced-motion:reduce){.fb i{animation:none}}

/* legibility scrim: keeps the surface quiet behind the type */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.4) 36%,rgba(0,0,0,0) 66%),
    linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.4) 24%,rgba(0,0,0,0) 50%),
    linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 14%)}
@media (max-aspect-ratio:1/1){
  .scrim{background:
    linear-gradient(0deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.72) 40%,rgba(0,0,0,.3) 58%,rgba(0,0,0,0) 72%),
    linear-gradient(180deg,rgba(0,0,0,.7) 0,rgba(0,0,0,.4) 9%,rgba(0,0,0,0) 22%)}
}
@media (max-aspect-ratio:1/1) and (max-height:640px){
  .scrim{background:
    linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.8) 72%,rgba(0,0,0,.4) 86%,rgba(0,0,0,0) 100%),
    linear-gradient(180deg,rgba(0,0,0,.7) 0,rgba(0,0,0,.4) 9%,rgba(0,0,0,0) 22%)}
}
.gl .fb i{animation-play-state:paused}

/* ---------- content ---------- */
.page{
  position:relative;z-index:1;
  min-height:100vh;min-height:100svh;
  display:grid;grid-template-rows:1fr auto auto;
  padding:clamp(22px,3.6vw,48px) var(--gut) clamp(18px,2.4vw,32px);
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right));
}
.hero{align-self:end;padding:clamp(40px,8vh,120px) 0 clamp(28px,5vh,64px)}
h1{
  font-weight:400;
  font-size:clamp(3rem,8.4vw,8.8rem);
  line-height:.94;letter-spacing:-.05em;
  margin-left:-.04em;
  color:var(--ink);
}
.tagline{
  margin-top:clamp(16px,2.4vh,28px);
  font-weight:300;
  font-size:clamp(1.3rem,2.5vw,2.6rem);
  line-height:1.14;letter-spacing:-.02em;
  max-width:19em;
  text-wrap:balance;
  color:var(--ink);
}
.tagline .dim{display:block;color:var(--dim)}
.rule{width:clamp(48px,6vw,96px);height:1px;background:linear-gradient(90deg,var(--accent),rgba(77,139,255,0));margin:clamp(24px,4vh,44px) 0 0}
.meta{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,96px);align-items:end;
  padding-bottom:clamp(36px,6vh,72px);
}
.desc{max-width:31em;font-size:clamp(.95rem,1.12vw,1.08rem);line-height:1.6;color:var(--muted);font-weight:400;letter-spacing:.005em}
.contact{text-align:right}
.label{display:block;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:.9em}
.contact a{
  display:inline-block;color:var(--ink);text-decoration:none;font-size:clamp(1.05rem,1.7vw,1.6rem);font-weight:300;letter-spacing:-.01em;
  padding-bottom:.35em;background:linear-gradient(var(--accent),var(--accent)) left bottom/100% 1px no-repeat;
  transition:background-size .5s ease,color .3s ease;
}
.contact a:hover{color:#fff;background-size:100% 2px}
.contact a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
footer{
  border-top:1px solid rgba(170,190,230,.18);padding-top:clamp(14px,1.6vw,20px);
  font-size:.75rem;letter-spacing:.14em;color:var(--muted);
}

@media (max-width:760px){
  .meta{grid-template-columns:1fr;gap:34px}
  .contact{text-align:left}
  h1{font-size:clamp(2.9rem,15vw,4.6rem);letter-spacing:-.045em}
  .tagline{font-size:clamp(1.2rem,5.6vw,1.6rem)}
}
@media (min-width:1900px){
  :root{--gut:96px}
  h1{font-size:clamp(9rem,7.6vw,12rem)}
  .tagline{font-size:clamp(2.6rem,2.2vw,3.2rem)}
  .desc{font-size:1.2rem}
  .contact a{font-size:2rem}
  .label,footer{font-size:.84rem}
}
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:24px}
  h1{font-size:clamp(2.2rem,7vw,3.6rem)}
  .tagline{font-size:clamp(1rem,2.6vw,1.4rem)}
}
@media (forced-colors:active){.contact a{text-decoration:underline;text-underline-offset:.3em}}

/* the surface answers the pointer wherever there is no text: drag to orbit, click or tap to ripple */
.page{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
h1,.tagline,.desc,.label{width:fit-content}
.label{margin-left:auto}
@media (max-width:760px){.label{margin-left:0}}
.gl .page{cursor:grab}
.gl .page a{cursor:pointer}
.gl .page h1,.gl .page p,.gl .page .label,.gl footer span{cursor:auto}
.gl.orbiting .page,.gl.orbiting .page *{cursor:grabbing;-webkit-user-select:none;user-select:none}
@media (hover:none),(prefers-reduced-motion:reduce){.gl .page{cursor:auto}}