/* Home page hero. Written by XWorld; the sections below it carry their own scoped styles.
   Sizes follow three tiers like the old live page: up to 480 px, 481 to 768 px, 769 px and wider. */
.xw-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 120px 0 80px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background: #000;
}
.xw-banner__bg { position: absolute; inset: 0; }
.xw-banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.xw-banner__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.xw-banner .container { position: relative; }

.xw-banner__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}
@media (min-width: 768px) { .xw-banner__content { width: 66.6667%; } }
@media (min-width: 992px) { .xw-banner__content { width: 50%; } }

.xw-banner__pill {
    display: inline-flex;
    align-items: center;
    gap: 7.5px;
    margin: 0 0 32px;
    padding: 4px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.15);
    font-family: 'Golos Text', 'Outfit', system-ui, sans-serif;
    font-size: 15px;
    line-height: 15px;
    font-weight: 500;
}
.xw-banner__pill i { width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: 0.4; }
.xw-banner__pill span:last-child { opacity: 0.6; }

.xw-banner h1 {
    margin: 0 0 28px;
    font-size: 84px;
    font-weight: 700;
    line-height: 77px;
    letter-spacing: -0.025em;
    color: #fff;
}
.xw-banner__lead {
    width: 75%;
    margin: 0 0 28px;
    font-size: 20px;
    line-height: 25px;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.75;
}
.xw-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 8.5px;
    padding: 16px 28px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}
.xw-banner__cta:hover { transform: scale(1.05); border-color: #fff; background: #fff; color: #000; }
.xw-banner__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 24px 0 16px;
    font-size: 15px;
    line-height: 1.4375;
}
.xw-banner__chips a {
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease;
}
.xw-banner__chips a:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.xw-banner__scroll {
    display: block;
    font-size: 16px;
    line-height: 24px;
    opacity: 0.5;
    text-decoration: none;
    transition: opacity .2s ease;
}
.xw-banner__scroll:hover { opacity: 1; }
.xw-banner__curve {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    width: 100%;
    height: auto;
    fill: #f7f7fa;
}

/* 481 to 768 px */
@media (max-width: 768px) {
    .xw-banner { padding: 60px 0 30px; }
    .xw-banner__pill { gap: 7px; margin-bottom: 20px; padding: 6px 12px; font-size: 14px; line-height: 14px; }
    .xw-banner h1 { margin-bottom: 20px; font-size: 32px; line-height: 38.4px; }
    .xw-banner__lead { margin-bottom: 24px; font-size: 14px; line-height: 19.6px; }
    .xw-banner__cta { padding: 12px 20px; font-size: 14px; line-height: 21px; }
    .xw-banner__scroll { margin-top: 16px; font-size: 12px; line-height: 18px; }
}

/* up to 480 px */
@media (max-width: 480px) {
    .xw-banner { padding: 50px 0 20px; }
    .xw-banner__pill { gap: 7.5px; margin-bottom: 30px; padding: 5px 10px; font-size: 15px; line-height: 15px; }
    .xw-banner h1 { margin-bottom: 30px; font-size: 31px; line-height: 35.65px; }
    .xw-banner__lead { width: 100%; margin-bottom: 30px; font-size: 19px; line-height: 25.65px; }
    .xw-banner__cta { padding: 10px 18px; font-size: 19px; line-height: 28.5px; }
    .xw-banner__scroll { margin-top: 12px; font-size: 16px; line-height: 24px; }
}

/* Phones: the picture of the person above the Earth sits at the bottom of the banner (the sky above it is black like the
   banner), so the text stays over the dark sky and the person stays in view under it. */
@media (max-width: 767px) {
    .xw-banner__bg img { position: absolute; left: 0; bottom: 0; height: 78%; object-position: 47% 50%; }
    .xw-banner__shade { background: rgba(0, 0, 0, 0.22); }
}