/* BRAND */

.brand {
    display: flex;
    align-items: center;

    gap: 14px;
}

.brand-mark {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border: 2px solid var(--gold);
    border-radius: 50%;

    color: var(--purple);
    font-family: var(--font-display);
    font-size: 1.45rem;
}

.brand-text {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}

.brand-name {
    font-family: var(--font-display);

    font-size: 1.1rem;
    letter-spacing: 0.2em;
}

.brand-name span {
    color: var(--text-primary);
}

.brand-tagline {
    margin-top: 5px;

    color: var(--gold);
    font-size: 0.58rem;

    letter-spacing: 0.24em;
}


/* NAVIGATION */

.desktop-nav,
.footer-nav {
    display: flex;
    align-items: center;

    gap: 28px;
}

.desktop-nav a,
.footer-nav a {
    color: var(--text-secondary);

    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;

    transition:
    color var(--transition);
}

.desktop-nav a:hover,
.footer-nav a:hover {
    color: var(--gold);
}


/* BUTTONS */

.button {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 22px;

    border: 1px solid transparent;
    border-radius: var(--radius-sm);

    font-size: 0.72rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.14em;

    transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

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

.button-primary {
    color: #08090c;
    background: var(--gold);
}

.button-primary:hover {
    background: #e8bf72;
}

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

    background: rgba(10, 12, 18, 0.7);
}

.button-secondary:hover {
    border-color: var(--purple);
}

.button-outline {
    border-color: var(--gold);

    color: var(--gold);
}

.button-outline:hover {
    color: #08090c;
    background: var(--gold);
}


/* TYPE */

.eyebrow {
    margin-bottom: 14px;

    color: var(--purple);

    font-size: 0.7rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.24em;
}

.hero h1 {
    font-family: var(--font-display);

    font-size: clamp(3rem, 7vw, 6.6rem);
    font-weight: 400;

    line-height: 0.95;
    letter-spacing: 0.1em;
}

.hero h1 span {
    color: var(--text-primary);
}

.hero-tagline {
    margin-top: 12px;

    color: var(--gold);

    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
}

.hero-description {
    max-width: 600px;

    margin-top: 28px;

    color: var(--text-secondary);

    font-size: 1.05rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;
}

.hero-side {
    display: flex;
    flex-direction: column;

    gap: 8px;

    color: var(--purple-soft);

    font-size: 0.68rem;

    text-transform: uppercase;
    letter-spacing: 0.32em;
}

.hero-side-line {
    width: 40px;
    height: 1px;

    margin-block: 16px;

    background: var(--text-secondary);
}


/* CAPABILITY */

.capability-card {
    min-height: 220px;

    padding: 38px 24px;

    text-align: center;

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

    background: var(--bg-primary);

    transition:
    background var(--transition);
}

.capability-card:last-child {
    border-right: none;
}

.capability-card:hover {
    background: var(--surface);
}

.capability-icon {
    margin-bottom: 18px;

    color: var(--purple);

    font-size: 2.25rem;
}

.capability-card h2 {
    color: var(--gold);

    font-size: 0.9rem;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.capability-card p {
    margin-top: 12px;

    color: var(--text-secondary);

    font-size: 0.84rem;
}


/* FEATURES */

.feature-panel h2,
.section-heading h2,
.cta-section h2 {
    font-family: var(--font-display);

    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
}

.feature-panel p:not(.eyebrow) {
    max-width: 430px;

    margin-top: 20px;

    color: var(--text-secondary);
}


/* CONTENT CARDS */

.content-card {
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: var(--surface);

    transition:
    border-color var(--transition),
    transform var(--transition);
}

.content-card:hover {
    transform: translateY(-4px);

    border-color: var(--purple-soft);
}

.card-image {
    aspect-ratio: 16 / 9;

    border-bottom: 1px solid var(--border);
}

.placeholder-image {
    background:
    radial-gradient(
        circle at 60% 40%,
        rgba(167, 69, 217, 0.34),
                    transparent 35%
    ),
    linear-gradient(
        135deg,
        #171321,
        #0a0d13 65%
    );
}

.card-body {
    padding: 24px;
}

.card-category,
.card-meta {
    margin-bottom: 10px;

    color: var(--purple);

    font-size: 0.68rem;

    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.card-body h3 {
    font-family: var(--font-display);

    font-size: 1.45rem;
    font-weight: 400;
}

.card-body p:not(.card-category):not(.card-meta) {
    margin-top: 12px;

    color: var(--text-secondary);

    font-size: 0.9rem;
}

.text-link {
    display: inline-block;

    margin-top: 18px;

    color: var(--gold);

    font-size: 0.75rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* CTA */

.cta-section h2 {
    max-width: 800px;

    margin-inline: auto;
}

.cta-section p:not(.eyebrow) {
    max-width: 630px;

    margin: 18px auto 28px;

    color: var(--text-secondary);
}