/* =====================================================
   ROOT
===================================================== */

:root {

    --navy: #0a1f40;
    --navy-dark: #040f24;

    --gold: #e2b660;
    --gold-light: #f3d58c;
    --gold-dark: #a9853e;

    --gold-gradient:
        linear-gradient(180deg, #fbe6a6 0%, #e7bd68 55%, #c4933f 100%);

    --white: #ffffff;
    --muted: #d6dce6;

    --serif: "Merriweather", Georgia, "Times New Roman", serif;
    --sans: "Open Sans", "Segoe UI", Arial, sans-serif;

    /* colour used to "cut" details out of the solid icons */
    --cut: #0b2146;

}


/* =====================================================
   RESET
===================================================== */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family: var(--sans);

    background: var(--navy-dark);

    color: var(--white);

    -webkit-font-smoothing: antialiased;

}


button {
    font-family: inherit;
}


.svg-sprite {

    position: absolute;

    width: 0;
    height: 0;

    overflow: hidden;

}


/* =====================================================
   MAIN PAGE  (1024 x 1536 poster, like the design)
===================================================== */

.page {

    width: 100%;

    min-height: 1536px;

    position: relative;

    overflow: hidden;

    background-color: #0a1f44;

    background-image: url("../img/banner.jpg");

    /* stretch the banner across the full screen width, keeping the
       1536px height so the gold waves stay behind the same sections */
    background-size: 100% 100%;

    background-position: center top;

    background-repeat: no-repeat;

}


.page-inner {

    width: 100%;

    max-width: 1024px;

    margin: 0 auto;

    position: relative;

}


/* =====================================================
   HEADER
===================================================== */

.header {

    height: 196px;

    padding: 22px 74px 0 84px;

    display: flex;

    align-items: flex-start;

    position: relative;

    z-index: 10;

}


/* =====================================================
   LOGO
===================================================== */

.brand {

    display: flex;

    align-items: center;

    gap: 26px;

    padding-top: 0;

}


.brand-mark {

    width: 146px;

    height: auto;

    display: block;

}


.brand-text {

    display: flex;

    flex-direction: column;

    padding-top: 10px;

}


.brand-wordmark {

    width: 226px;

    height: auto;

    display: block;

}


.brand-tagline {

    margin-top: 10px;

    font-style: italic;

    font-size: 17.5px;

    letter-spacing: .2px;

    color: #f1f3f7;

    white-space: nowrap;

}


/* =====================================================
   HEADER FEATURES
===================================================== */

.header-features {

    margin-left: auto;

    margin-top: 34px;

    display: flex;

    align-items: center;

}


.header-feature {

    width: 138px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}


.header-feature:nth-child(4) {
    width: 165px;
}


.header-feature:last-child {
    width: 122px;
}


.feature-icon {

    width: 34px;

    height: 34px;

    fill: none;

    stroke: var(--gold);

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

    margin-bottom: 8px;

}


.header-feature span {

    display: block;

    color: #f3f5f8;

    font-size: 14.5px;

    line-height: 1.22;

}


.header-divider {

    width: 1px;

    height: 90px;

    background:
        linear-gradient(180deg,
            transparent,
            rgba(226, 182, 96, .75) 20%,
            rgba(226, 182, 96, .75) 80%,
            transparent);

}


/* =====================================================
   HERO
===================================================== */

.hero {

    height: 327px;

    padding: 30px 38px 0 70px;

    position: relative;

    z-index: 5;

}


.hero h1 {

    font-family: var(--serif);

    font-size: 64px;

    line-height: 1.16;

    font-weight: 900;

    letter-spacing: -1.2px;

    color: #fff;

}


.hero h1 span {

    background: var(--gold-gradient);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: var(--gold-light);

}


.hero-subtitle {

    margin-top: 12px;

    font-size: 23px;

    line-height: 1.3;

    color: #f3f5f8;

}


/* =====================================================
   BENEFITS
===================================================== */

.benefits {

    margin-top: 22px;

    display: flex;

    align-items: center;

    gap: 18px;

}


.benefit {

    display: flex;

    align-items: center;

    gap: 13px;

}


.benefit-icon {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    border: 2px solid var(--gold);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 0 10px rgba(226, 182, 96, .25);

}


.benefit-icon svg {

    width: 28px;

    height: 28px;

    fill: none;

    stroke: var(--gold);

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.benefit-icon.solid svg {

    width: 30px;

    height: 30px;

    fill: var(--gold);

    stroke: none;

}


.benefit span {

    color: #f1f3f7;

    font-size: 13.5px;

    line-height: 1.3;

}


.benefit-line {

    width: 1px;

    height: 42px;

    background: rgba(226, 182, 96, .55);

}


/* =====================================================
   ROLE CARDS
===================================================== */

.roles {

    padding: 0 35px 0 38px;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 14px;

    row-gap: 14px;

    position: relative;

    z-index: 10;

}


.role-card {

    height: 187px;

    padding: 0 20px 0 20px;

    display: flex;

    align-items: center;

    position: relative;

    border: 1.5px solid rgba(226, 182, 96, .85);

    border-radius: 14px;

    background:
        linear-gradient(160deg,
            rgba(17, 44, 84, .92) 0%,
            rgba(8, 26, 55, .94) 55%,
            rgba(6, 20, 44, .96) 100%);

    box-shadow:
        inset 0 1px 0 rgba(255, 230, 170, .12),
        0 0 16px rgba(226, 182, 96, .12);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.role-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .35),
        0 0 22px rgba(226, 182, 96, .25);

}


/* =====================================================
   ROLE ICON
===================================================== */

.role-icon {

    width: 128px;

    height: 128px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(circle at 40% 30%,
            rgba(60, 86, 130, .55),
            rgba(12, 32, 64, .9) 70%);

    box-shadow:
        inset 0 2px 6px rgba(255, 255, 255, .06),
        0 6px 18px rgba(0, 0, 0, .45);

    --cut: #10284f;

}


.role-icon svg {

    width: 84px;

    height: 84px;

    fill: url(#goldGrad);

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45));

}


/* =====================================================
   ROLE CONTENT
===================================================== */

.role-content {

    flex: 1;

    padding-left: 24px;

    padding-top: 6px;

}


.role-content h3 {

    margin: 0 0 8px;

    font-family: var(--serif);

    font-weight: 700;

    font-size: 24px;

    line-height: 1.1;

    letter-spacing: .2px;

    background: var(--gold-gradient);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: var(--gold-light);

}


.role-content p {

    margin: 0 0 14px;

    font-size: 17px;

    line-height: 1.45;

    color: #f3f5f8;

}


.role-content button {

    height: 40px;

    padding: 0 22px 0 38px;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    border: 1.5px solid var(--gold);

    border-radius: 30px;

    background: transparent;

    color: var(--gold-light);

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: .25s ease;

}


.role-content button svg {

    width: 17px;

    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.role-content button:hover {

    background: var(--gold);

    color: #071a35;

}


/* =====================================================
   ROUND ARROW
===================================================== */

.round-arrow {

    position: absolute;

    right: 24px;

    top: calc(50% + 18px);

    width: 32px;

    height: 32px;

    margin-top: -16px;

    border: 1.3px solid var(--gold-light);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

}


.round-arrow svg {

    width: 18px;

    height: 18px;

    fill: none;

    stroke: var(--gold-light);

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =====================================================
   ROLE SELECTOR
===================================================== */

.role-selector {

    margin: 22px 32px 0 33px;

    height: 202px;

    padding: 22px 30px 0;

    border: 1.5px solid rgba(226, 182, 96, .6);

    border-radius: 14px;

    background:
        linear-gradient(160deg,
            rgba(18, 42, 80, .85),
            rgba(8, 24, 52, .9));

    text-align: center;

    position: relative;

    z-index: 10;

}


.role-selector h2 {

    font-family: var(--serif);

    font-weight: 700;

    font-size: 35px;

    line-height: 1.25;

    color: #fff;

}


.role-selector > p {

    margin-top: 4px;

    color: #eef1f5;

    font-size: 17px;

}


.role-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 13px;

    margin-top: 16px;

}


.role-select {

    height: 64px;

    padding: 0 22px;

    white-space: nowrap;

    border-radius: 40px;

    border: 1.5px solid var(--gold);

    background: rgba(6, 20, 44, .55);

    color: #fff;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .2px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    transition: .25s ease;

    --cut: #0a1f40;
    --wheel: var(--gold);

}


.role-select:nth-child(1) { width: 211px; }
.role-select:nth-child(2) { width: 184px; }
.role-select:nth-child(3) { width: 203px; }
.role-select:nth-child(4) { width: 263px; }


.role-select svg {

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    fill: var(--gold);

}


.role-select:hover {

    background: rgba(226, 182, 96, .12);

}


.role-select.active {

    color: #16110a;

    border-color: transparent;

    background:
        linear-gradient(180deg, #f7dd98 0%, #e6bb66 60%, #c89642 100%);

    box-shadow:
        0 0 22px rgba(226, 182, 96, .45),
        inset 0 1px 0 rgba(255, 255, 255, .5);

    --cut: #e8c06c;
    --wheel: #16110a;

}


.role-select.active svg {

    fill: #16110a;

}


/* =====================================================
   CTA
===================================================== */

.registration-cta {

    margin: 20px 33px 0 35px;

    height: 119px;

    padding: 0 22px 0 26px;

    border: 1.5px solid rgba(226, 182, 96, .8);

    border-radius: 14px;

    display: flex;

    align-items: center;

    gap: 26px;

    background:
        linear-gradient(160deg,
            rgba(18, 42, 80, .85),
            rgba(8, 24, 52, .9));

    box-shadow: 0 0 16px rgba(226, 182, 96, .1);

    position: relative;

    z-index: 10;

}


.rocket {

    width: 76px;

    height: 76px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(circle at 40% 30%,
            rgba(60, 86, 130, .5),
            rgba(12, 32, 64, .9) 70%);

    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);

}


.rocket svg {

    width: 42px;

    height: 42px;

    fill: none;

    stroke: var(--gold);

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.cta-content {

    flex: 1;

}


.cta-content h2 {

    font-family: var(--serif);

    font-weight: 700;

    font-size: 27px;

    line-height: 1.2;

    color: #fff;

}


.cta-content p {

    margin-top: 10px;

    max-width: 510px;

    color: #e3e8ef;

    font-size: 15.5px;

    line-height: 1.35;

}


.start-button {

    width: 265px;

    height: 63px;

    flex-shrink: 0;

    border: none;

    border-radius: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    background:
        linear-gradient(180deg, #f7dd98 0%, #e6bb66 60%, #c89642 100%);

    box-shadow:
        0 0 22px rgba(226, 182, 96, .4),
        inset 0 1px 0 rgba(255, 255, 255, .5);

    color: #16110a;

    font-size: 19px;

    font-weight: 700;

    cursor: pointer;

    transition: transform .2s ease;

}


.start-button:hover {

    transform: translateY(-2px);

}


.start-button svg {

    width: 20px;

    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.4;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =====================================================
   QR
===================================================== */

.qr-section {

    height: 146px;

    margin-top: 18px;

    padding: 0 0 0 52px;

    display: flex;

    align-items: center;

    position: relative;

    z-index: 10;

}


.qr-box {

    width: 119px;

    height: 119px;

    padding: 10px;

    background: #fff;

    border-radius: 9px;

    flex-shrink: 0;

    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);

}


.qr-box img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

}


.qr-content {

    margin-left: 30px;

    padding: 8px 0 8px 30px;

    border-left: 1px solid rgba(226, 182, 96, .5);

}


.qr-content p {

    font-size: 17px;

    color: #f3f5f8;

}


.qr-content h3 {

    margin: 4px 0 6px;

    font-family: var(--serif);

    font-weight: 700;

    font-size: 20px;

    letter-spacing: -.1px;

    color: var(--gold-light);

}


.qr-content span {

    color: #f3f5f8;

    font-size: 17px;

}


/* =====================================================
   FOOTER
===================================================== */

footer {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    border-top: 1px solid rgba(226, 182, 96, .4);

    background:
        linear-gradient(180deg,
            rgba(4, 15, 36, .55),
            rgba(4, 15, 36, .85));

    z-index: 10;

}


.footer-contact {

    max-width: 1024px;

    margin: 0 auto;

    height: 64px;

    padding: 0 36px 0 50px;

    display: flex;

    align-items: center;

    gap: 26px;

}


.contact-item {

    display: flex;

    align-items: center;

    gap: 14px;

    color: #f3f5f8;

    font-size: 14px;

}


.contact-item svg {

    width: 20px;

    height: 20px;

    flex-shrink: 0;

    fill: var(--gold);

}


.contact-item p {

    line-height: 1.3;

}


.footer-divider {

    width: 1px;

    height: 34px;

    background: rgba(226, 182, 96, .4);

}


.social-icons {

    margin-left: auto;

    display: flex;

    gap: 12px;

}


.social-icons a {

    width: 27px;

    height: 27px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--gold-gradient);

    transition: transform .2s ease;

}


.social-icons a:hover {

    transform: translateY(-2px);

}


.social-icons svg {

    width: 16px;

    height: 16px;

    fill: #0a1f40;

}


.copyright {

    height: 48px;

    padding: 0 36px;

    border-top: 1px solid rgba(226, 182, 96, .3);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    text-align: center;

    color: #c7cfdb;

    font-size: 12.5px;

}


.copyright-divider {

    width: 1px;

    height: 18px;

    background: rgba(226, 182, 96, .4);

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .page {
        min-height: 0;
        background-size: cover;
    }

    .header {
        height: auto;
        padding: 22px 24px 30px;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .header-features {
        margin: 0;
    }

    .header-features > .header-divider:first-child {
        display: none;
    }

    .hero {
        height: auto;
        padding: 20px 24px 36px;
    }

    .hero h1 {
        font-size: 52px;
    }

    .benefits {
        flex-wrap: wrap;
    }

    .roles {
        padding: 0 24px;
    }

    .role-selector,
    .registration-cta {
        height: auto;
        margin-left: 24px;
        margin-right: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .role-buttons {
        flex-wrap: wrap;
    }

    .qr-section {
        height: auto;
        padding: 24px;
    }

    footer {
        position: static;
    }

    .footer-contact {
        height: auto;
        padding: 20px 24px;
        flex-wrap: wrap;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .brand {
        gap: 14px;
    }

    .brand-mark {
        width: 96px;
    }

    .brand-wordmark {
        width: 170px;
    }

    .brand-tagline {
        font-size: 14px;
    }

    .header-feature {
        width: 100px;
    }

    .header-feature span {
        font-size: 12.5px;
    }

    .hero {
        padding: 10px 16px 30px;
    }

    .hero h1 {
        font-size: 38px;
        line-height: 1.15;
    }

    .hero-subtitle {
        font-size: 17px;
    }

    .benefit {
        width: calc(50% - 10px);
    }

    .benefit-line {
        display: none;
    }

    .roles {
        padding: 0 16px;
        grid-template-columns: 1fr;
    }

    .role-card {
        height: auto;
        padding: 18px 16px;
    }

    .role-icon {
        width: 84px;
        height: 84px;
    }

    .role-icon svg {
        width: 54px;
        height: 54px;
    }

    .role-content {
        padding-left: 16px;
    }

    .role-content h3 {
        font-size: 20px;
    }

    .role-content p {
        font-size: 14px;
    }

    .round-arrow {
        display: none;
    }

    .role-selector,
    .registration-cta {
        margin-left: 16px;
        margin-right: 16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .role-selector h2 {
        font-size: 26px;
    }

    .role-buttons {
        flex-direction: column;
    }

    .role-select:nth-child(n) {
        width: 100%;
        max-width: 320px;
    }

    .registration-cta {
        flex-direction: column;
        text-align: center;
    }

    .cta-content h2 {
        font-size: 23px;
    }

    .start-button {
        width: 100%;
    }

    .qr-section {
        flex-direction: column;
        text-align: center;
        padding: 24px 16px;
    }

    .qr-content {
        margin: 20px 0 0;
        padding: 20px 0 0;
        border-left: none;
        border-top: 1px solid rgba(226, 182, 96, .4);
    }

    .qr-content h3 {
        font-size: 17px;
        word-break: break-word;
    }

    .footer-contact {
        padding: 22px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .footer-divider {
        display: none;
    }

    .social-icons {
        margin-left: 0;
    }

    .copyright {
        height: auto;
        padding: 14px 16px;
        flex-direction: column;
        gap: 6px;
    }

    .copyright-divider {
        display: none;
    }

}