/* Hero + Disclaimer: same look as Swastik Investment (Lato, navy gradient hero, dark numbered disclaimer) */
@font-face {
    font-family: Lato;
    src: url(../fonts/Lato-Regular.ttf);
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato-Bold.ttf);
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato-Black.ttf);
    font-weight: 900;
    font-display: swap
}

.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 0;
    font-family: Lato, system-ui, sans-serif;
    background:
        radial-gradient(900px 500px at 85% 10%, rgba(0, 137, 198, .45), transparent 60%),
        radial-gradient(700px 400px at 0% 100%, rgba(198, 45, 54, .40), transparent 60%),
        radial-gradient(600px 350px at 70% 80%, rgba(235, 43, 70, .25), transparent 60%),
        linear-gradient(135deg, #071528, #233D9D)
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask: linear-gradient(180deg, #000, transparent 85%);
    mask: linear-gradient(180deg, #000, transparent 85%)
}

.hero .wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 44px
}

.hero .pill {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #f5b93a;
    border: 1px solid rgba(245, 185, 58, .5);
    background: rgba(245, 185, 58, .08);
    padding: 7px 16px;
    border-radius: 50px
}

.hero h1 {
    font: 900 clamp(22px, 3.9vw, 46px)/1.15 Lato, system-ui, sans-serif;
    margin: 16px 0 12px;
    white-space: nowrap;
    color: #fff
}

.hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #f5b93a, #ff8a5b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.hero p {
    font: 400 clamp(11px, 1.45vw, 16.5px)/1.6 Lato, system-ui, sans-serif;
    color: #c6d5ea;
    max-width: none;
    margin: 0;
    white-space: nowrap
}

.hero .actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px
}

.hero .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 50px;
    font: 700 17px Lato, system-ui, sans-serif;
    border: 0;
    transition: .25s
}

.hero .btn.primary {
    background: linear-gradient(120deg, #f5b93a, #f08a24);
    color: #3a2300;
    box-shadow: 0 8px 22px rgba(245, 185, 58, .4)
}

.hero .btn.ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .4);
    color: #fff
}

.hero .btn:hover {
    transform: translateY(-3px)
}

.hero .btn.ghost:hover {
    background: rgba(255, 255, 255, .1)
}

@media(max-width:900px) {

    .hero h1,
    .hero p {
        white-space: normal
    }

    .hero p {
        font-size: 15px
    }

    .hero h1 {
        font-size: clamp(26px, 7vw, 38px)
    }
}

.disclaimer {
    background: #0B1826;
    color: #fff;
    padding: 44px 0 30px;
    font-family: Lato, system-ui, sans-serif
}

.disclaimer-inner {
    max-width: 1370px;
    margin: auto;
    padding: 0 30px
}

.disclaimer h2 {
    font: 700 20px Lato, system-ui, sans-serif;
    margin: 0 0 18px;
    color: #fff
}

.disclaimer .list {
    counter-reset: d;
    columns: auto;
    font-size: 13px;
    color: #b5bdc2
}

.disclaimer .list p {
    font-size: 13px;
    line-height: 1.7;
    color: #b5bdc2;
    margin: 0 0 12px;
    padding: 0 0 0 34px;
    border: 0;
    position: relative;
    counter-increment: d;
    break-inside: auto
}

.disclaimer .list p::before {
    content: counter(d);
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1b3a57;
    color: #f5c453;
    font-size: 11px;
    font-weight: 900;
    display: grid;
    place-items: center
}

.disclaimer .list strong {
    color: #fff;
    font-weight: 700
}

.disclaimer a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline
}

.disclaimer-bottom {
    text-align: center;
    background: none;
    border: 0;
    border-top: 1px solid #2a3948;
    border-radius: 0;
    margin-top: 22px;
    padding: 18px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: #fff
}

@media(max-width:600px) {
    .disclaimer-inner {
        padding: 0 20px
    }
}

.hero h1>* {
    display: inline;
    animation: none
}

.hero p,
.hero .actions {
    animation: none
}

/* Footer links + modals: same look as Swastik Investment */
.footer,
.modal {
    --navy: #1780C6;
    --red: #E63336;
    --gold: #f5b93a;
    --mute: #5f7186;
    --bg: #f4f7fb;
    --line: #e2e9f2;
    --blue: #1e6fd9;
    font-family: Lato, system-ui, sans-serif
}

/* footer */
.footer {
    background: #071528;
    color: #b5c5dc
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 40px
}

.footer-name {
    font-size: 30px;
    font-weight: 900;
    color: #fff
}

.footer-name span {
    color: var(--red)
}

.footer h3 {
    color: #fff;
    margin-bottom: 12px
}

.footer p {
    margin: 6px 0
}

.footer a:hover {
    color: var(--gold)
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 16px;
    margin-top: 27px
}

@media (min-width: 981px) {
    .footer-links {
        flex-wrap: nowrap
    }
}

.footer-links button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    color: #12df2d;
    padding: 0;
    margin: 0;
    font: 700 13px Lato, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: .2s
}

.footer-links button:hover {
    background: none;
    color: #fff
}

.copyright {
    border-top: 1px solid rgba(255, 255, 255, .1);
    text-align: center;
    padding: 18px 22px;
    font-size: 13px
}

/* modals */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(7, 21, 40, .7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100
}

.modal.open {
    display: flex
}

.modal-box {
    position: relative;
    background: #fff;
    border-radius: 22px;
    max-width: 820px;
    width: 100%;
    max-height: 88vh;
    overflow: auto;
    padding: 38px 40px
}

.close {
    position: sticky;
    float: right;
    top: 0;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 24px;
    cursor: pointer
}

.modal-box h2 {
    color: var(--navy);
    font-size: 28px
}

.modal-box h3 {
    color: var(--navy);
    margin: 22px 0 6px;
    font-size: 17px
}

.modal-box h3.sub {
    color: var(--red);
    margin: 4px 0 12px
}

.modal-box h3.caps {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px
}

.modal-box p,
.modal-box li {
    color: #3d4e63;
    margin: 6px 0
}

.modal-box ul {
    padding-left: 22px
}

.modal-box a {
    color: var(--blue);
    font-weight: 700
}

.red-label {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--red)
}

.form-btn {
    display: inline-block;
    background: var(--red);
    color: #fff !important;
    padding: 11px 22px;
    border-radius: 50px
}

.step,
.rung {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--bg);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 10px 0
}

.step .num,
.rung .num {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 14px
}

.step h4 {
    font-size: 13px;
    color: var(--navy)
}

.rung small {
    color: var(--red);
    font-weight: 900;
    letter-spacing: 1px
}

.rung b,
.rung span {
    display: block
}

.il-list {
    display: grid;
    gap: 8px
}

.il {
    display: block;
    background: var(--bg);
    border-radius: 12px;
    padding: 12px 16px
}

.il b {
    display: block;
    color: var(--navy)
}

.il span {
    font-size: 13px;
    color: var(--mute)
}

/* reveal */
/* overrides for The Wealth's older rules */
.footer {
    margin-top: 0
}

.footer-name {
    background: none;
    -webkit-text-fill-color: initial
}

.footer-name span {
    color: var(--red)
}

.footer h3 {
    font-size: inherit
}

.footer-links {
    flex-wrap: wrap
}

.footer-links button {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
    color: #12df2d
}

.footer-links button:hover {
    background: none;
    color: #fff
}

.footer-links button i {
    color: rgb(255, 212, 59)
}

.copyright {
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, .1)
}

.modal {
    z-index: 100
}

.modal-box {
    max-width: 820px;
    padding: 38px 40px;
    font-size: 16px
}

.close {
    background: var(--red)
}

.modal-box h2 {
    font-size: 28px;
    color: var(--navy);
    margin: 0
}

.modal-box h3 {
    font-size: 17px;
    margin: 22px 0 6px
}

.modal-box h3.sub {
    margin: 4px 0 12px;
    color: var(--red)
}

.modal-box h3.caps {
    font-size: 13px;
    color: var(--navy)
}

.modal-box p,
.modal-box li {
    font-size: 16px;
    color: #3d4e63;
    margin: 6px 0
}

.modal-box a {
    color: var(--blue);
    font-weight: 700
}

.red-label {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 900;
    margin: 0
}

.form-btn {
    background: var(--red);
    padding: 11px 22px;
    border-radius: 50px;
    font-weight: 400;
    text-decoration: none
}

.step,
.rung {
    border-bottom: 0
}

.step .num,
.rung .num {
    background: var(--navy);
    color: #fff;
    font: 900 14px Lato, sans-serif
}

@media(max-width:960px) {
    .footer-main {
        grid-template-columns: 1fr
    }

    .modal-box {
        padding: 26px 22px
    }
}

.footer h3,
.footer-name,
.modal h2,
.modal h3,
.modal-box h2,
.modal-box h3 {
    font-family: Lato, system-ui, sans-serif
}