/*
Theme Name: Vertex Ascension
Description: Bespoke theme for Vertex Ascension Academy™. It's not a pyramid. It's a triangle of opportunity.
Version: 1.0.0
Author: SELMA SIS
*/

:root {
    --void: #0b0714;
    --royal: #1d1233;
    --royal-light: #2c1d4a;
    --gold: #d4af37;
    --gold-bright: #f0c75e;
    --champagne: #f5e7c6;
    --smoke: #b8aecb;
    --white: #fdfbf6;

    --font-display: "Playfair Display", Georgia, serif;
    --font-caps: "Montserrat", "Arial Black", sans-serif;
    --font-body: "Jost", "Segoe UI", sans-serif;

    --max-width: 1140px;
}

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

body {
    font-family: var(--font-body);
    background: var(--void);
    color: var(--champagne);
    line-height: 1.65;
    font-size: 1.02rem;
}

img,
svg {
    max-width: 100%;
}

a {
    color: var(--gold-bright);
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--gold-bright);
    outline-offset: 2px;
}

.wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.caps {
    font-family: var(--font-caps);
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

/* Urgency bar. */
.urgency-bar {
    background: linear-gradient(90deg, #7a1f1f, #a32b2b 50%, #7a1f1f);
    color: var(--white);
    text-align: center;
    padding: 9px 16px;
    font-family: var(--font-caps);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.urgency-bar strong {
    color: #ffd97a;
}

/* Header. */
.site-header {
    background: rgb(11 7 20 / 92%);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgb(212 175 55 / 25%);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-name {
    color: var(--white);
    font-family: var(--font-caps);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.brand-name .tm {
    font-size: 0.55rem;
    vertical-align: super;
    color: var(--gold);
}

.site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 26px;
}

.site-nav a {
    color: var(--champagne);
    text-decoration: none;
    font-family: var(--font-caps);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.site-nav a:hover {
    color: var(--gold-bright);
}

.btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold) 100%);
    color: var(--void);
    font-family: var(--font-caps);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 30px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 0 24px rgb(212 175 55 / 35%);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 38px rgb(240 199 94 / 55%);
}

.btn-large {
    font-size: 0.9rem;
    padding: 17px 44px;
}

/* Hero. */
.hero {
    position: relative;
    text-align: center;
    padding: 110px 0 90px;
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgb(44 29 74 / 90%), transparent 70%),
        var(--void);
    overflow: hidden;
}

.hero .rays {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 180deg at 50% -10%, transparent 0deg, rgb(212 175 55 / 6%) 12deg, transparent 24deg, rgb(212 175 55 / 6%) 36deg, transparent 48deg, rgb(212 175 55 / 6%) 60deg, transparent 72deg, rgb(212 175 55 / 6%) 84deg, transparent 96deg, rgb(212 175 55 / 6%) 108deg, transparent 120deg, rgb(212 175 55 / 6%) 132deg, transparent 144deg, rgb(212 175 55 / 6%) 156deg, transparent 168deg, rgb(212 175 55 / 6%) 180deg, transparent 192deg);
    pointer-events: none;
}

.hero .wrap {
    position: relative;
}

.hero .eyebrow {
    color: var(--gold);
    font-size: 0.72rem;
    margin-bottom: 28px;
}

.hero h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3.4rem, 11vw, 8rem);
    line-height: 0.95;
    color: var(--white);
    letter-spacing: 0.04em;
}

.hero h1 .gold {
    background: linear-gradient(135deg, var(--gold) 20%, var(--gold-bright) 50%, #9a7b1e 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero .tagline {
    margin: 26px auto 0;
    max-width: 46ch;
    font-size: 1.2rem;
    color: var(--smoke);
}

.hero .tagline em {
    color: var(--champagne);
}

.hero .actions {
    margin-top: 40px;
}

.fine-print {
    display: block;
    margin-top: 18px;
    font-size: 0.68rem;
    color: #6d6383;
}

/* Stats. */
.stats {
    border-top: 1px solid rgb(212 175 55 / 20%);
    border-bottom: 1px solid rgb(212 175 55 / 20%);
    background: var(--royal);
}

.stats .wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 44px 24px;
    text-align: center;
}

.stat .figure {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--gold-bright);
    line-height: 1;
}

.stat .label {
    margin-top: 10px;
    font-family: var(--font-caps);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--smoke);
}

/* Sections. */
.section {
    padding: 90px 0;
}

.section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}

.section-head .eyebrow {
    color: var(--gold);
    font-size: 0.68rem;
    margin-bottom: 16px;
}

.section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
}

.section-head p {
    margin-top: 16px;
    color: var(--smoke);
}

/* Structure diagram. */
.structure {
    background: radial-gradient(ellipse 60% 60% at 50% 100%, rgb(44 29 74 / 70%), transparent 70%), var(--void);
    text-align: center;
}

.structure figure {
    max-width: 560px;
    margin: 0 auto;
}

.structure figcaption {
    margin-top: 22px;
    font-family: var(--font-caps);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

.structure .disclaimer-small {
    margin-top: 10px;
    font-size: 0.68rem;
    color: #6d6383;
}

/* Tier cards. */
.tiers .wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.tier {
    background: var(--royal);
    border: 1px solid rgb(212 175 55 / 22%);
    border-radius: 4px;
    padding: 26px 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tier.featured {
    background: linear-gradient(180deg, var(--royal-light), var(--royal));
    border-color: var(--gold);
    box-shadow: 0 0 34px rgb(212 175 55 / 25%);
    position: relative;
}

.tier.featured::before {
    content: "Invitation only";
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--void);
    font-family: var(--font-caps);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 2px;
    white-space: nowrap;
}

.tier h3 {
    font-family: var(--font-caps);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.tier .price {
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: var(--white);
}

.tier .price small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.62rem;
    color: var(--smoke);
}

.tier p {
    font-size: 0.8rem;
    color: var(--smoke);
    flex: 1;
}

/* Curriculum. */
.curriculum ol {
    max-width: 680px;
    margin: 0 auto;
    list-style: none;
    counter-reset: module;
}

.curriculum li {
    counter-increment: module;
    display: flex;
    gap: 20px;
    align-items: baseline;
    padding: 20px 8px;
    border-bottom: 1px solid rgb(212 175 55 / 15%);
}

.curriculum li::before {
    content: "Module " counter(module, decimal-leading-zero);
    font-family: var(--font-caps);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    flex: 0 0 92px;
}

.curriculum li strong {
    color: var(--white);
    font-weight: 500;
    font-size: 1.05rem;
    font-family: var(--font-display);
}

.curriculum li span {
    color: var(--smoke);
    font-size: 0.85rem;
}

.curriculum .more {
    text-align: center;
    margin-top: 26px;
    font-size: 0.8rem;
    color: #6d6383;
}

/* Testimonials. */
.testimonials .wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.testimonial {
    background: var(--royal);
    border: 1px solid rgb(212 175 55 / 22%);
    border-radius: 4px;
    padding: 30px;
}

.testimonial blockquote {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--white);
}

.testimonial cite {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    font-style: normal;
}

.testimonial .avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), #9a7b1e);
    color: var(--void);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-caps);
    font-weight: 800;
    font-size: 0.78rem;
    flex: 0 0 auto;
}

.testimonial .who {
    font-family: var(--font-caps);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--smoke);
    line-height: 1.7;
}

.testimonial .who b {
    display: block;
    color: var(--gold-bright);
}

/* CTA band. */
.cta-band {
    text-align: center;
    background:
        radial-gradient(ellipse 55% 80% at 50% 100%, rgb(212 175 55 / 14%), transparent 70%),
        var(--royal);
    border-top: 1px solid rgb(212 175 55 / 25%);
}

.cta-band h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    color: var(--white);
}

.cta-band p {
    margin: 18px auto 34px;
    max-width: 52ch;
    color: var(--smoke);
}

/* Inner pages (Programs). */
.page-inner {
    padding: 70px 0 100px;
}

.page-inner .page-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    color: var(--white);
    text-align: center;
}

.page-inner .page-lede {
    text-align: center;
    max-width: 56ch;
    margin: 18px auto 56px;
    color: var(--smoke);
}

/* Storefront plugin restyling to match the brand. */
.page-inner .selmasis-wrapper {
    color: var(--champagne);
}

.page-inner .selmasis-heading {
    font-family: var(--font-display);
    color: var(--gold-bright);
}

.page-inner .selmasis-search-input {
    background: var(--royal);
    border: 1px solid rgb(212 175 55 / 35%);
    color: var(--white);
    padding: 12px 16px;
    width: 100%;
    border-radius: 2px;
    font-family: var(--font-body);
}

/* Footer. */
.site-footer {
    border-top: 1px solid rgb(212 175 55 / 20%);
    padding: 54px 0 44px;
    text-align: center;
}

.site-footer .brand-name {
    font-size: 0.8rem;
}

.site-footer .links {
    margin: 20px 0;
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.site-footer .links a {
    color: var(--smoke);
    text-decoration: none;
    font-family: var(--font-caps);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.site-footer .disclaimer {
    max-width: 72ch;
    margin: 18px auto 0;
    font-size: 0.68rem;
    color: #6d6383;
    line-height: 1.8;
}

/* Responsive. */
@media (max-width: 960px) {
    .tiers .wrap {
        grid-template-columns: 1fr 1fr;
    }

    .tier.featured {
        grid-column: 1 / -1;
    }

    .testimonials .wrap {
        grid-template-columns: 1fr;
    }

    .stats .wrap {
        grid-template-columns: 1fr 1fr;
    }

    .site-nav a:not(.btn) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}