:root {
  color-scheme: light;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --ink:
    #172033;

  --muted:
    #667085;

  --line:
    #d0d5dd;

  --web-blue:
    #4594cc;

  --web-teal:
    #41bfb3;
}

* {
  box-sizing: border-box;
}

html,
body {
  position:
    relative;

  min-height:
    100vh;

  min-height:
    100dvh;

  overflow-x:
    hidden;

  background:
    #ffffff;

  color:
    var(--ink);
}

.page-background {
  position:
    fixed;

  z-index:
    0;

  inset:
    0;

  overflow:
    hidden;

  pointer-events:
    none;

  background:
    radial-gradient(
      ellipse 72% 58%
      at 102% 26%,
      rgba(112, 199, 235, .18) 0%,
      rgba(112, 199, 235, .085) 38%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 70% 60%
      at -5% 70%,
      rgba(83, 171, 224, .17) 0%,
      rgba(83, 171, 224, .075) 40%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 55% 42%
      at 77% 102%,
      rgba(65, 191, 179, .075) 0%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fefefe 38%,
      #fbfdfe 68%,
      #f7fbfd 100%
    );

  opacity:
    1;

  transition:
    opacity .5s ease;
}

.page-background::before {
  position:
    absolute;

  top:
    28%;

  left:
    -19%;

  width:
    138%;

  height:
    66%;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      .72
    );

  border-radius:
    50%;

  content:
    "";

  transform:
    rotate(-12deg);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .01),
      rgba(255, 255, 255, .18) 47%,
      rgba(98, 185, 226, .035) 53%,
      rgba(255, 255, 255, .02)
    );

  box-shadow:
    0 -26px 75px
    rgba(
      97,
      184,
      225,
      .08
    ),
    0 30px 90px
    rgba(
      71,
      180,
      204,
      .055
    );
}

.page-background::after {
  position:
    absolute;

  top:
    52%;

  left:
    -12%;

  width:
    125%;

  height:
    2px;

  content:
    "";

  transform:
    rotate(-13deg);

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(98, 187, 225, .05) 18%,
      rgba(255, 255, 255, .93) 50%,
      rgba(65, 191, 179, .07) 77%,
      transparent 100%
    );

  box-shadow:
    0 0 18px
    rgba(
      87,
      182,
      221,
      .16
    );
}

button,
a {
  font: inherit;
}

.page-shell {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      100%,
      1180px
    );

  min-height:
    100vh;

  min-height:
    100dvh;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0 auto;

  padding:
    clamp(
      42px,
      5vh,
      68px
    )
    40px;

  text-align:
    center;

  transition:
    color .65s ease;
}

.logo {
  position:
    relative;

  z-index:
    2;

  display:
    block;

  width:
    min(
      260px,
      62vw
    );

  height:
    auto;

  margin:
    0 auto 54px;

  transition:
    filter .65s ease,
    transform .65s ease;
}

.content-stack {
  position: relative;

  width:
    100%;

  display:
    grid;

  place-items:
    center;
}

.hero-section {
  position:
    relative;

  z-index:
    2;

  width:
    100%;

  opacity:
    1;

  transform:
    translateY(0);

  filter:
    blur(0);
}

.hero-section h1 {
  width:
    fit-content;

  max-width:
    810px;

  margin:
    0 auto;

  color:
    #253247;

  font-size:
    clamp(
      27px,
      2.3vw,
      33px
    );

  font-weight:
    400;

  line-height:
    1.28;

  letter-spacing:
    -.018em;
}

.quote-start,
.quote-end {
  white-space:
    nowrap;
}

.quote {
  display:
    inline-block;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.34em;

  font-weight:
    400;

  line-height:
    0;

  vertical-align:
    -.07em;
}

.quote-open {
  margin-right:
    .08em;

  color:
    #4594cc;
}

.quote-close {
  margin-left:
    .08em;

  color:
    #41bfb3;
}

.lead,
.copy {
  width:
    min(
      100%,
      860px
    );

  max-width:
    860px;

  display:
    grid;

  grid-template-columns:
    118px
    minmax(
      0,
      1fr
    );

  align-items:
    center;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(
      214,
      223,
      232,
      .78
    );

  border-radius:
    14px;

  padding:
    30px 38px 30px 31px;

  background:
    rgba(
      255,
      255,
      255,
      .88
    );

  box-shadow:
    0 15px 38px
    rgba(
      33,
      52,
      73,
      .075
    );

  backdrop-filter:
    blur(9px);

  -webkit-backdrop-filter:
    blur(9px);

  text-align:
    left;
}

.lead {
  min-height:
    170px;

  margin:
    48px auto 0;

  color:
    #344054;

  font-size:
    17px;

  line-height:
    1.72;
}

.copy {
  min-height:
    160px;

  margin:
    24px auto 0;

  color:
    #536178;

  font-size:
    16px;

  line-height:
    1.72;
}

.info-card-icon {
  width:
    80px;

  height:
    80px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle at 38% 30%,
      rgba(255, 255, 255, .98),
      rgba(69, 148, 204, .09)
    );
}

.info-card-icon-focus {
  background:
    radial-gradient(
      circle at 38% 30%,
      rgba(255, 255, 255, .99),
      rgba(69, 148, 204, .075)
    );
}

.info-card-icon svg {
  width:
    46px;

  height:
    46px;

  fill:
    none;

  stroke-width:
    1.65;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

.info-card-icon .icon-blue {
  fill:
    none;

  stroke:
    #428fcb;
}

.info-card-icon .icon-teal {
  fill:
    none;

  stroke:
    #41bfb3;
}

.info-card-icon .icon-blue-fill {
  fill:
    #428fcb;

  stroke:
    none;
}

.info-card-text {
  min-width:
    0;

  display:
    flex;

  min-height:
    96px;

  align-items:
    center;

  border-left:
    2px solid
    rgba(
      69,
      148,
      204,
      .46
    );

  padding-left:
    38px;
}

.copy
.info-card-text {
  border-left-color:
    rgba(
      65,
      191,
      179,
      .58
    );
}

.contact-actions {
  width:
    min(
      100%,
      478px
    );

  display:
    grid;

  grid-template-columns:
    94px
    minmax(
      0,
      1fr
    );

  align-items:
    center;

  gap:
    20px;

  margin:
    44px auto 0;
}

.button {
  width:
    100%;

  min-width:
    0;

  min-height:
    66px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  padding:
    0 24px;

  cursor:
    pointer;

  font-size:
    15px;

  font-weight:
    650;

  text-decoration:
    none;

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.button:hover {
  transform:
    translateY(-1px);
}

.button.secondary {
  border-color:
    var(--line);

  background:
    #ffffff;

  color:
    #172033;
}

.button.secondary:hover {
  border-color:
    #98a2b3;

  background:
    #f9fafb;

  box-shadow:
    0 7px 20px
    rgba(23, 32, 51, .07);
}

#contact-link {
  border-color:
    #132138;

  background:
    linear-gradient(
      180deg,
      #17253e 0%,
      #101a2d 100%
    );

  color:
    #ffffff;

  font-weight:
    750;

  letter-spacing:
    .02em;

  text-transform:
    uppercase;

  box-shadow:
    0 10px 23px
    rgba(
      15,
      23,
      42,
      .18
    ),
    0 13px 18px
    rgba(
      65,
      191,
      179,
      .23
    );
}

#contact-link:hover {
  border-color:
    #172940;

  background:
    linear-gradient(
      180deg,
      #1b2b47 0%,
      #132039 100%
    );

  color:
    #ffffff;

  box-shadow:
    0 12px 28px
    rgba(
      15,
      23,
      42,
      .20
    ),
    0 14px 22px
    rgba(
      65,
      191,
      179,
      .27
    );
}

.button-qr-icon {
  display:
    block;

  width:
    20px;

  height:
    20px;

  color:
    #172033;
}

.button-qr-icon rect {
  fill:
    #ffffff;

  stroke:
    currentColor;

  stroke-width:
    1.5;
}

.button-qr-icon .qr-icon-filled {
  fill:
    currentColor;
}

.signature {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      100%,
      760px
    );

  margin:
    44px 0 0;

  padding-top:
    38px;

  color:
    #8798ad;

  font-size:
    13px;

  transition:
    color .65s ease;
}

.signature::before {
  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    1px;

  content:
    "";

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(148, 163, 184, .22) 18%,
      rgba(148, 163, 184, .22) 82%,
      transparent 100%
    );
}

.signature::after {
  position:
    absolute;

  top:
    -4px;

  left:
    50%;

  width:
    8px;

  height:
    8px;

  content:
    "";

  background:
    #43b8c6;

  transform:
    translateX(-50%)
    rotate(45deg);

  box-shadow:
    0 0 0 5px
    rgba(255, 255, 255, .94);
}

.modal {
  position:
    fixed;

  z-index:
    100;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  padding:
    24px;

  visibility:
    hidden;

  opacity:
    0;

  transition:
    opacity .2s ease,
    visibility .2s ease;
}

.modal.open {
  visibility:
    visible;

  opacity:
    1;
}

.modal-backdrop {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  border:
    0;

  background:
    rgba(
      15,
      23,
      42,
      .35
    );

  backdrop-filter:
    blur(5px);

  cursor:
    default;
}

.modal-card {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      100%,
      390px
    );

  border:
    1px solid
    #e2e8f0;

  border-radius:
    20px;

  background:
    #ffffff;

  padding:
    30px;

  box-shadow:
    0 30px 90px
    rgba(
      15,
      23,
      42,
      .18
    );

  text-align:
    center;

  transform:
    translateY(12px)
    scale(.985);

  transition:
    transform .22s ease;
}

.modal.open
.modal-card {
  transform:
    translateY(0)
    scale(1);
}

.modal-close {
  position:
    absolute;

  top:
    12px;

  right:
    14px;

  width:
    34px;

  height:
    34px;

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  color:
    #667085;

  cursor:
    pointer;

  font-size:
    25px;

  line-height:
    1;
}

.modal-card h2 {
  margin:
    10px 0 0;

  color:
    #172033;

  font-size:
    28px;

  letter-spacing:
    -.025em;
}

.modal-copy {
  margin:
    9px 0 0;

  color:
    #667085;

  font-size:
    14px;

  line-height:
    1.55;
}

.qr-code {
  min-height:
    280px;

  display:
    grid;

  place-items:
    center;

  margin-top:
    21px;

  overflow:
    hidden;

  border-radius:
    12px;

  background:
    #ffffff;
}

.qr-code svg {
  display:
    block;

  width:
    270px;

  height:
    270px;

  max-width:
    100%;
}

.modal-note {
  margin:
    14px 0 0;

  color:
    #98a2b3;

  font-size:
    12px;
}

@media (
  max-width: 640px
) {
.page-shell {
    justify-content:
      center;

    padding:
      28px 50px;
  }

.logo {
    width:
      min(
        188px,
        54vw
      );

    margin-bottom:
      34px;
  }

.hero-section h1 {
    max-width:
      430px;

    font-size:
      clamp(
        22px,
        5.7vw,
        27px
      );

    font-weight:
      400;

    line-height:
      1.26;
  }

.quote {
    font-size:
      1.28em;
  }

.lead {
    margin-top:
      26px;

    padding:
      14px 16px;

    border-radius:
      12px;

    font-size:
      15.5px;

    line-height:
      1.68;
  }

.copy {
    margin-top:
      10px;

    padding:
      13px 16px;

    border-radius:
      12px;

    font-size:
      14px;

    line-height:
      1.68;
  }

.contact-actions {
    width:
      min(
        100%,
        330px
      );

    grid-template-columns:
      1fr
      4fr;

    gap:
      10px;

    margin-top:
      30px;
  }

.button {
    min-height:
      48px;

    padding:
      0 14px;
  }

.signature {
    margin-top:
      28px;
  }

.modal {
    padding:
      18px;
  }

.modal-card {
    width:
      min(
        100%,
        400px
      );

    padding:
      34px 24px 28px;
  }
}

@media (
  prefers-reduced-motion:
  reduce
) {
*,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }
}

@media (max-width: 640px) {
.page-background {
    background:
      radial-gradient(
        ellipse 96% 50%
        at 112% 25%,
        rgba(112, 199, 235, .17) 0%,
        rgba(112, 199, 235, .07) 42%,
        transparent 75%
      ),
      radial-gradient(
        ellipse 100% 52%
        at -25% 67%,
        rgba(83, 171, 224, .15) 0%,
        rgba(83, 171, 224, .06) 43%,
        transparent 76%
      ),
      radial-gradient(
        ellipse 80% 35%
        at 80% 102%,
        rgba(65, 191, 179, .065) 0%,
        transparent 74%
      ),
      linear-gradient(
        180deg,
        #ffffff 0%,
        #fefefe 42%,
        #fafcfd 72%,
        #f7fbfd 100%
      );
  }

.page-background::before {
    top:
      37%;

    left:
      -91%;

    width:
      275%;

    height:
      47%;

    transform:
      rotate(-13deg);
  }

.page-background::after {
    top:
      55%;

    left:
      -70%;

    width:
      230%;

    transform:
      rotate(-14deg);
  }

.page-shell {
    width:
      100%;

    justify-content:
      center;

    padding:
      28px 50px;
  }

.logo {
    width:
      min(
        190px,
        58vw
      );

    margin-bottom:
      38px;
  }

.hero-section h1 {
    max-width:
      100%;

    font-size:
      clamp(
        21px,
        5.6vw,
        26px
      );

    line-height:
      1.28;
  }

.lead,
  .copy {
    width:
      100%;

    max-width:
      none;

    min-height:
      0;

    grid-template-columns:
      54px
      minmax(
        0,
        1fr
      );

    padding:
      18px 14px 18px 12px;

    border-radius:
      12px;

    box-shadow:
      0 10px 26px
      rgba(
        31,
        50,
        72,
        .07
      );
  }

.lead {
    margin-top:
      27px;

    font-size:
      13px;

    line-height:
      1.55;
  }

.copy {
    margin-top:
      11px;

    font-size:
      12.5px;

    line-height:
      1.55;
  }

.info-card-icon {
    width:
      42px;

    height:
      42px;
  }

.info-card-icon svg {
    width:
      26px;

    height:
      26px;

    stroke-width:
      1.6;
  }

.info-card-text {
    min-height:
      64px;

    padding-left:
      14px;

    border-left-width:
      1px;
  }

.contact-actions {
    width:
      100%;

    grid-template-columns:
      52px
      minmax(
        0,
        1fr
      );

    gap:
      10px;

    margin-top:
      25px;
  }

.button {
    min-height:
      44px;

    border-radius:
      9px;

    padding:
      0 13px;

    font-size:
      13px;
  }

.button-qr-icon {
    width:
      17px;

    height:
      17px;
  }

.signature {
    width:
      100%;

    margin-top:
      27px;

    padding-top:
      26px;

    font-size:
      11px;
  }
}

.signature {
  transition:
    opacity .5s ease,
    transform .7s ease,
    color .5s ease;
}

.logo,
.signature {
  opacity:
    1;

  transform:
    translateY(0)
    scale(1);

  filter:
    blur(0);

  transition:
    opacity .5s ease,
    transform .7s ease,
    filter .7s ease !important;
}

@media (
  prefers-reduced-motion:
  reduce
) {
html .hero-section
  > .logo {
    transition:
      none !important;
  }
}

.content-stack {
  width: 100%;
}

.hero-section {
  position: relative;
  z-index: 2;
  width: 100%;
  opacity: 1;
  transform: none;
  filter: none;
}

.hero-section > .logo {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.page-background {
  pointer-events: none;
}

@media (max-width: 400px) {
  .page-shell {
    padding:
      24px 14px;
  }
}