*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;scroll-padding-top:var(--nav-offset)}

body{
  font-family:var(--sans);
  background:#ffffff;
  background-attachment:fixed;
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

@keyframes pearlOrbit1{
  0%  {transform:rotate(0deg)   translate(32%,16%) scale(1.00)}
  20% {transform:rotate(72deg)  translate(18%,9%)  scale(1.05)}
  40% {transform:rotate(144deg) translate(30%,15%) scale(0.96)}
  60% {transform:rotate(216deg) translate(14%,7%)  scale(1.04)}
  80% {transform:rotate(288deg) translate(28%,14%) scale(0.97)}
  100%{transform:rotate(360deg) translate(32%,16%) scale(1.00)}
}
@keyframes pearlOrbit2{
  0%  {transform:rotate(180deg) translate(32%,16%) scale(1.00)}
  20% {transform:rotate(252deg) translate(16%,8%)  scale(0.97)}
  40% {transform:rotate(324deg) translate(30%,15%) scale(1.06)}
  60% {transform:rotate(396deg) translate(12%,6%)  scale(0.98)}
  80% {transform:rotate(468deg) translate(28%,14%) scale(1.04)}
  100%{transform:rotate(540deg) translate(32%,16%) scale(1.00)}
}
@keyframes pearlDrift{
  0%  {transform:translate(-25%,-30%) scale(1.00)}
  15% {transform:translate(10%, -40%) scale(1.08)}
  30% {transform:translate(35%, -10%) scale(0.94)}
  45% {transform:translate(20%,  25%) scale(1.05)}
  60% {transform:translate(-10%, 35%) scale(0.97)}
  75% {transform:translate(-35%, 10%) scale(1.06)}
  90% {transform:translate(-30%,-20%) scale(0.96)}
  100%{transform:translate(-25%,-30%) scale(1.00)}
}
@keyframes pearlPulse{
  0%,100%{opacity:1;    transform:scale(1)}
  50%    {opacity:0.78; transform:scale(1.12)}
}

.pearl-blob{
  position:absolute;
  top:33%;right:30%;bottom:33%;left:30%;
  border-radius:50%;
  background:radial-gradient(ellipse 100% 100%,
    rgba(100,190,255,0.18) 0%,
    rgba(130,210,255,0.07) 44%,
    transparent 65%);
  filter:blur(70px);
  transform-origin:center center;
  animation:pearlDrift 28s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}

body.nav-menu-open{overflow:hidden}

a{color:inherit;text-decoration:none}

img{max-width:100%;display:block}

main,
main [id]{scroll-margin-top:var(--nav-offset)}

.skip-link{
  position:absolute;
  left:16px;
  top:-48px;
  z-index:1000;
  background:#fff;
  color:#0d1117;
  padding:10px 14px;
  border-radius:8px;
  font-size:0.85rem;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.skip-link:focus{top:16px}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

:focus-visible{
  outline:2px solid rgba(45,58,107,0.7);
  outline-offset:3px;
}

[data-scroll]{cursor:pointer}

[data-scroll][tabindex="0"]:focus-visible{
  outline:2px solid rgba(45,58,107,0.7);
  outline-offset:3px;
}

h1,h2,h3{text-wrap:balance}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html{scroll-behavior:auto}
  .pearl-blob,
  .hero::before,
  .hero::after{
    animation:none!important;
    opacity:0.3;
  }
}