/* =========================================================
   Studio Huevo
   Layout
   ========================================================= */


/* =========================================================
   01. Container
   ========================================================= */

.container {
    width: 100%;
    max-width: var(--container-width);

    margin-inline: auto;
    padding-inline: var(--container-padding);
}


/* =========================================================
   02. Section
   ========================================================= */

.section {
    padding: var(--space-24) 0;
}

.section--subtle {
    background: var(--color-bg-subtle);
}

.section--blue {
    background: var(--color-bg-blue);
}

.section-header {
    max-width: 760px;

    margin-bottom: var(--space-12);
}

.section-title {
    margin: 0;

    font-size: clamp(
        2rem,
        4vw,
        3rem
    );

    line-height: 1.3;

    letter-spacing: -0.02em;
}

.section-lead {
    margin-top: var(--space-5);

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

    font-size: 1.05rem;
}


/* =========================================================
   03. Header
   ========================================================= */

.site-header {
    position: relative;
    z-index: 100;

    background: rgba(255, 255, 255, 0.96);

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

.header-inner {
    min-height: 82px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 32px;
}


/* =========================================================
   04. Logo
   ========================================================= */

.site-logo {
    display: inline-flex;

    flex-direction: column;

    line-height: 1.1;
}

.site-logo__main {
    font-size: 1.35rem;
    font-weight: 900;

    letter-spacing: 0.14em;
}

.site-logo__sub {
    margin-top: 5px;

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

    font-family: var(--font-mono);

    font-size: 0.6rem;

    letter-spacing: 0.08em;
}


/* =========================================================
   05. Navigation
   ========================================================= */

.site-nav {
    display: flex;

    align-items: center;

    gap: 24px;
}

.site-nav > a:not(.button) {
    position: relative;

    color: var(--color-text);

    font-size: 0.9rem;
    font-weight: 500;
}

.site-nav > a:not(.button)::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: var(--color-primary);

    transition:
        width var(--transition-fast);
}

.site-nav > a:not(.button):hover::after {
    width: 100%;
}


/* =========================================================
   06. Hero
   ========================================================= */

.hero {
    position: relative;

    padding:
        var(--space-32)
        0
        var(--space-24);

    overflow: hidden;
}

.hero__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(360px, 0.9fr);

    align-items: center;

    gap: 80px;
}

.hero__content {
    position: relative;
    z-index: 2;
}

.hero__title {
    max-width: 760px;

    margin-bottom: var(--space-6);

    font-size: clamp(
        2.8rem,
        6vw,
        5.2rem
    );

    line-height: 1.18;

    letter-spacing: -0.04em;
}

.hero__lead {
    max-width: 640px;

    margin-bottom: var(--space-8);

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

    font-size: 1.05rem;
}

.hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.hero::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 55%;
    height: 100%;

    background:
        linear-gradient(
            135deg,
            transparent 0%,
            rgba(37, 99, 235, 0.04) 100%
        );

    pointer-events: none;
}

.hero__visual {
    position: relative;
    z-index: 2;
}


/* =========================================================
   07. Footer
   ========================================================= */

.site-footer {
    margin-top: var(--space-24);

    padding:
        var(--space-16)
        0
        var(--space-6);

    background: var(--color-black);

    color: var(--color-white);
}

.site-footer .site-logo__sub {
    color: #94a3b8;
}

.footer-brand {
    margin-bottom: var(--space-12);
}

.footer-brand p {
    margin-top: var(--space-5);

    color: #cbd5e1;
}

.footer-links {
    display: grid;

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

    gap: var(--space-10);

    padding-bottom: var(--space-12);

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-links h2 {
    margin-bottom: var(--space-5);

    color: var(--color-white);

    font-size: 0.85rem;

    letter-spacing: 0.08em;
}

.footer-links a {
    display: block;

    margin-bottom: var(--space-3);

    color: #cbd5e1;

    font-size: 0.9rem;

    transition:
        color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-white);
}

.footer-bottom {
    padding-top: var(--space-6);
}

.footer-bottom p {
    margin: 0;

    color: #94a3b8;

    font-size: 0.75rem;

    font-family: var(--font-mono);
}


/* =========================================================
   08. Mobile Navigation
   ========================================================= */

.menu-toggle {
    display: none;
}