/* omof.family
   palette sampled directly from the profile banner:
   void #060513, glow band #151338, lavender #a09aec, wordmark white #f2f2fc */

@font-face{font-family:Poppins;src:url(/fonts/poppins-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --void:#060513;
  --void2:#090717;
  --glow:#151338;
  --lav:#a09aec;
  --lav-hi:#cbc6ff;
  --white:#f2f2fc;
  --muted:#8d88b8;
  --line:rgba(160,154,236,.15);
  --line-hi:rgba(160,154,236,.38);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --pad:clamp(1.15rem,5vw,4rem);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--white);
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* the violet haze the mascot stands in */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(60% 45% at 28% 30%,rgba(74,58,168,.30),transparent 68%),
    radial-gradient(50% 40% at 82% 8%,rgba(45,36,110,.24),transparent 70%);
}
img{max-width:100%;display:block}
picture{display:block;flex:none}
a{color:inherit}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--lav);color:#0a0820;padding:.7rem 1.1rem;border-radius:0 0 10px 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--lav-hi);
  outline-offset:3px;
  border-radius:6px;
}

/* ── nav ───────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--pad);
  background:rgba(6,5,19,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand__mark{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-hi)}
.brand__word{font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.nav__links{display:flex;align-items:center;gap:clamp(.7rem,2.2vw,1.6rem)}
.nav__links>a{
  text-decoration:none;color:var(--muted);font-size:.94rem;font-weight:500;
  transition:color .18s ease;
}
.nav__links>a:hover{color:var(--white)}
.nav__links>.btn:hover{color:var(--white)}
@media (max-width:560px){
  .nav__links>a:not(.btn){display:none}
}

/* ── hero ──────────────────────────────────────────── */
.hero{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(1.5rem,4vw,3rem) var(--pad) clamp(3.5rem,7vw,6rem);
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;
  gap:clamp(1.5rem,5vw,4.5rem);
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:2rem;padding-top:.5rem}
}

/* stage: he stands still, everything else moves */
.hero__stage{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:clamp(300px,46vw,470px);
}
.rings{
  position:absolute;left:50%;top:48%;
  width:min(560px,104%);aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.ring{
  position:absolute;inset:0;
  border:1px solid var(--lav);
  border-radius:50%;
  opacity:0;
  animation:pulse 6s cubic-bezier(.18,.62,.3,1) infinite;
}
.ring:nth-child(2){animation-delay:1.5s}
.ring:nth-child(3){animation-delay:3s}
.ring:nth-child(4){animation-delay:4.5s}
@keyframes pulse{
  0%{transform:scale(.26);opacity:0}
  12%{opacity:.5}
  100%{transform:scale(1);opacity:0}
}
/* the one he throws when you poke him */
.ring--burst{
  position:absolute;inset:0;
  border:1px solid var(--lav-hi);
  border-radius:50%;
  animation:burst 1.15s cubic-bezier(.16,.7,.3,1) forwards;
}
@keyframes burst{
  0%{transform:scale(.22);opacity:.85}
  100%{transform:scale(1.35);opacity:0}
}

.figure{
  position:relative;z-index:2;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.figure__img{
  width:auto;
  height:clamp(210px,34vw,430px);
  filter:drop-shadow(0 0 46px rgba(140,124,255,.42)) drop-shadow(0 14px 30px rgba(0,0,0,.55));
}
.figure__glow{
  position:absolute;left:50%;bottom:-6px;
  width:74%;height:26px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(160,154,236,.55),transparent 70%);
  filter:blur(7px);
  pointer-events:none;
}
/* mirror floor, same as the banner art. echo.webp is already flipped, so no
   transform is involved and the fade is a plain top to bottom mask. doing the
   flip in CSS instead puts the mask in transformed space, where the gradient
   ends up running the wrong way and the reflection cuts off mid leg. */
.figure__echo{
  position:absolute;left:0;top:100%;
  width:100%;height:30%;
  background-image:url(/img/echo.png);
  background-image:image-set(url(/img/echo.webp) type("image/webp"),url(/img/echo.png) type("image/png"));
  background-size:100% auto;
  background-position:center top;
  background-repeat:no-repeat;
  opacity:.24;
  filter:blur(1.6px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.35) 45%,transparent 82%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.35) 45%,transparent 82%);
  pointer-events:none;
}
/* the percentage is relative to the figure, which is narrow, so it needs the
   viewport cap too or the line runs off screen on small phones and at 1024 */
.floor{
  position:absolute;left:50%;bottom:0;
  width:min(520px,132%,84vw);height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--line-hi) 28%,var(--lav) 50%,var(--line-hi) 72%,transparent);
  opacity:.55;
}
.flinches{
  position:relative;z-index:3;
  margin:7.2rem 0 0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  color:var(--muted);white-space:nowrap;
}
.flinches b{color:var(--lav);font-weight:600}

/* ── hero copy ─────────────────────────────────────── */
.eyebrow{
  margin:0 0 1.1rem;
  font-size:.76rem;font-weight:600;
  letter-spacing:.62em;text-indent:.62em;
  color:var(--lav);
}
/* the acronym reads out of the sentence */
.wordmark{
  margin:0;
  font-size:clamp(2.55rem,7.4vw,4.9rem);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.035em;
  color:#6d68a4;
}
.wordmark__line{display:block}
.wordmark i{
  font-style:normal;
  color:var(--white);
  text-shadow:0 0 30px rgba(160,154,236,.75),0 0 64px rgba(120,104,240,.4);
}
.wordmark__dot{color:var(--lav);font-weight:700}

.tagline{
  margin:1.2rem 0 0;
  font-size:clamp(1.05rem,2.2vw,1.32rem);
  font-weight:500;
  color:var(--lav);
}

.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.5rem;
  border-radius:11px;
  font-size:.95rem;font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn--solid{
  background:linear-gradient(180deg,var(--lav-hi),var(--lav));
  color:#0a0820;
  box-shadow:0 8px 26px rgba(126,110,235,.32);
}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(126,110,235,.5)}
.btn--ghost{
  background:rgba(160,154,236,.06);
  border-color:var(--line);
  color:var(--white);
}
.btn--ghost:hover{border-color:var(--line-hi);background:rgba(160,154,236,.13);transform:translateY(-2px)}
.btn--sm{padding:.52rem 1.05rem;font-size:.88rem;border-radius:9px}
.btn__icon{width:15px;height:15px;flex:none}

/* contract */
.ca{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  margin-top:1.6rem;padding:.85rem 1rem;
  background:rgba(160,154,236,.05);
  border:1px solid var(--line);
  border-radius:13px;
}
.ca__label{
  font-size:.68rem;font-weight:600;letter-spacing:.2em;
  color:var(--muted);text-transform:uppercase;flex:none;
}
.ca__value{
  flex:1 1 12rem;min-width:0;
  font-family:var(--mono);font-size:.83rem;line-height:1.45;
  color:var(--white);
  word-break:break-all;
}
.ca__copy{
  flex:none;
  padding:.48rem .95rem;
  font:inherit;font-size:.84rem;font-weight:600;
  color:var(--lav);
  background:rgba(160,154,236,.1);
  border:1px solid var(--line);
  border-radius:9px;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.ca__copy:hover{background:rgba(160,154,236,.2);color:var(--white);border-color:var(--line-hi)}
.ca__copy[data-state=done]{color:#0a0820;background:var(--lav);border-color:var(--lav)}
.ca__note{margin:.6rem 0 0;font-size:.8rem;color:var(--muted)}

/* ── bands ─────────────────────────────────────────── */
.band{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(3rem,7vw,5.5rem) var(--pad);
  border-top:1px solid var(--line);
}
.band__title{
  margin:0 0 2.2rem;
  font-size:clamp(1.85rem,4.6vw,2.9rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.05;
}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:820px){.cards{grid-template-columns:1fr}}
.card{
  padding:1.75rem 1.6rem;
  border:1px solid var(--line);
  border-radius:17px;
  background:linear-gradient(165deg,rgba(160,154,236,.07),rgba(160,154,236,.015));
  transition:transform .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-hi)}
.card__tag{
  display:block;margin-bottom:1.1rem;
  font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lav);
}
.card__head{margin:0 0 .4rem;font-size:1.28rem;font-weight:600;letter-spacing:-.02em}
.card__body{margin:0;color:var(--muted);font-size:.97rem}

/* steps are a real sequence, so they are numbered */
.steps{
  list-style:none;counter-reset:s;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  margin:0;padding:0;
}
@media (max-width:880px){.steps{grid-template-columns:repeat(2,1fr);gap:1.75rem}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{counter-increment:s;position:relative;padding-top:3.2rem}
.step::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;top:0;left:0;
  display:grid;place-items:center;
  width:2.3rem;height:2.3rem;
  font-family:var(--mono);font-size:.78rem;font-weight:600;
  color:var(--lav);
  background:var(--void);
  border:1px solid var(--line-hi);
  border-radius:50%;
}
/* the thread that shows the order */
.step::after{
  content:"";
  position:absolute;top:1.15rem;left:2.3rem;right:-1.5rem;
  height:1px;
  background:linear-gradient(90deg,var(--line-hi),transparent);
}
.step:last-child::after{display:none}
@media (max-width:880px){
  .step:nth-child(2)::after{display:none}
}
@media (max-width:520px){
  .step::after{display:none}
}
.step__head{margin:0 0 .35rem;font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
.step__body{margin:0;color:var(--muted);font-size:.95rem}
.steps__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.8rem}

/* ── footer ────────────────────────────────────────── */
.foot{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(2.5rem,5vw,3.5rem) var(--pad) 3rem;
  border-top:1px solid var(--line);
  display:grid;gap:1.6rem;
}
.foot__brand{display:flex;align-items:center;gap:.9rem}
.foot__mark{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-hi)}
.foot__word{margin:0;font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.foot__motto{margin:0;color:var(--lav);font-size:.92rem}
.foot__links{display:flex;flex-wrap:wrap;gap:1.4rem}
.foot__links a{
  color:var(--muted);text-decoration:none;font-size:.94rem;font-weight:500;
  transition:color .18s ease;
}
.foot__links a:hover{color:var(--white)}
.foot__fine{
  margin:0;max-width:56ch;
  font-size:.79rem;line-height:1.65;color:var(--muted);
}

@media (prefers-reduced-motion:reduce){
  .ring,.ring--burst{animation:none;opacity:0}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}