@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html{
  min-height:100%;
  scroll-padding-top:calc(var(--header-h) + 1rem);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-banner-bg) 90%, var(--c-banner-bg-strong) 10%),
      var(--c-banner-bg-strong)
    );
}
body,
button,
input,
textarea,
select,
option{
  font-family:var(--ff-body);
}
body{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-banner-bg) 90%, var(--c-banner-bg-strong) 10%),
      var(--c-banner-bg-strong)
    );
  background-color:var(--c-banner-bg-strong);
  color:var(--c-text);
  font-size:1.0625rem;
  min-height:100vh;
  overflow-x:hidden;
}

main{
  background:
    radial-gradient(circle at 88% 6%, rgba(190,255,199,.08), transparent 20%),
    radial-gradient(circle at 14% 18%, rgba(167,182,201,.11), transparent 24%),
    radial-gradient(circle at 72% 84%, rgba(108,132,188,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 18%),
    linear-gradient(135deg, rgba(243,246,250,.92), rgba(236,241,247,.94) 42%, rgba(241,244,248,.98) 100%),
    var(--c-bg);
  background-color:var(--c-bg);
  position:relative;
  z-index:0;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:auto;
  pointer-events:none;
  z-index:-1;
  filter:blur(18px);
}

body::before{
  top:7rem;
  right:min(7vw, 5rem);
  width:min(30rem, 38vw);
  height:min(24rem, 30vw);
  border-radius:50%;
  background:radial-gradient(circle, rgba(190,255,199,.1) 0%, rgba(190,255,199,0) 74%);
}

body::after{
  left:min(3vw, 1.75rem);
  bottom:7rem;
  width:min(32rem, 40vw);
  height:min(22rem, 28vw);
  border-radius:50%;
  background:radial-gradient(circle, rgba(154,190,255,.09) 0%, rgba(154,190,255,0) 76%);
}

h1,h2,h3{font-family:var(--ff-heading);line-height:1.08;letter-spacing:-.026em;color:var(--c-text)}
h1{font-size:clamp(2.7rem,5vw,5rem);max-width:11ch}
h2{font-size:clamp(1.85rem,2.8vw,2.95rem)}
h3{font-size:clamp(1.15rem,2vw,1.56rem);letter-spacing:-.018em}
p{color:var(--c-text-soft);max-width:68ch;font-size:1.05rem;line-height:1.68}
a{color:inherit}

.section{position:relative;padding:clamp(4.1rem,6.6vw,6rem) 0;border-top:none}
.section::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(72rem, calc(100% - 3rem));
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(36,51,107,0), rgba(36,51,107,.14) 18%, rgba(36,51,107,.05) 50%, rgba(36,51,107,0) 82%);
}
.section-title{margin-bottom:clamp(1rem, 1.9vw, 1.45rem)}
.section-kicker{font-size:.76rem;text-transform:uppercase;letter-spacing:.2em;color:var(--c-accent-cta);margin:0;font-weight:700}
.section-kicker + h1,
.section-kicker + h2,
.section-kicker + h3,
.section-kicker + .section-title{
  margin-top:clamp(.45rem, .85vw, .72rem);
}
.section-kicker + p{
  margin-top:clamp(.58rem, .95vw, .82rem);
}
.section-intro{max-width:60ch}

:focus-visible{outline:3px solid color-mix(in srgb, var(--c-accent-cta) 78%, white 22%);outline-offset:3px;border-radius:6px}

.skip-link{position:absolute;left:-999px;top:0;background:var(--c-accent-cta);color:#fff;padding:.5rem .75rem;font-weight:700;z-index:999}
.skip-link:focus{left:.5rem;top:.5rem}

.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;
}

[data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:
    opacity .82s cubic-bezier(.16,1,.3,1),
    transform .82s cubic-bezier(.16,1,.3,1);
}

[data-reveal].is-visible{
  opacity:1;
  transform:none;
}