:root {
        --ink: #211f20;
        --white: #ffffff;
        --line: rgba(255, 255, 255, .10);
    }
    * {
        box-sizing: border-box;
    }
    html,
    body {
        margin: 0;
        min-height: 100%;
    }
    body {
        min-height: 100vh;
        background:
            radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .045), transparent 30%),
            radial-gradient(circle at 15% 85%, rgba(255, 255, 255, .025), transparent 28%),
            var(--ink);
        color: var(--white);
        font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
            "Segoe UI", Arial, sans-serif;
        overflow-x: hidden;
    }
    .page {
        position: relative;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        isolation: isolate;
    }
    .grid {
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        opacity: .25;
        background-image:
            linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
        background-size: 72px 72px;
        mask-image: linear-gradient(to bottom,
                transparent,
                black 18%,
                black 82%,
                transparent);
    }
    .content {
        width: min(1180px, calc(100% - 48px));
        flex: 1;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 0 44px;
    }
    .brand-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .brand {
        width: min(620px, 82vw);
        height: auto;
        display: block;
        filter: drop-shadow(0 22px 45px rgba(0, 0, 0, .18));
    }
    .foot {
        width: min(1180px, calc(100% - 48px));
        margin: 0 auto;
        padding: 38px 0 30px;
        text-align: center;
    }
    .foot-rule {
        position: relative;
        height: 1px;
        margin: 0 0 32px;
        background: var(--line);
    }
    .foot-rule::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 46px;
        height: 1px;
        background: rgba(255, 255, 255, .32);
        transform: translate(-50%, -50%);
    }
    .foot-logo {
        display: block;
        width: auto;
        height: 22px;
        margin: 0 auto;
        opacity: .92;
    }
    .foot-tag {
        margin: 16px 0 0;
        color: #7f7c7a;
        font-size: 9px;
        font-weight: 500;
        letter-spacing: .24em;
        text-transform: uppercase;
    }
    .legal {
        max-width: 720px;
        margin: 22px auto 0;
        color: #6d6a68;
        font-size: 10.5px;
        line-height: 1.95;
        letter-spacing: .018em;
    }
    .foot-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px 18px;
        max-width: 720px;
        margin: 26px auto 0;
        padding-top: 20px;
        border-top: 1px solid var(--line);
    }
    .copyright {
        margin: 0;
        color: #918e8c;
        font-size: 9.5px;
        font-weight: 500;
        line-height: 1.8;
        letter-spacing: .16em;
        text-transform: uppercase;
    }
    .foot-sep {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #4d4a49;
    }
    .foot-note {
        margin: 0;
        color: #777472;
        font-size: 9.5px;
        font-weight: 500;
        letter-spacing: .16em;
        text-transform: uppercase;
    }
    .reach-note {
        margin: 16px 0 0;
        color: #5e5b5a;
        font-size: 10.5px;
        line-height: 1.7;
        letter-spacing: .01em;
    }
    .launch {
        width: min(940px, calc(100% - 48px));
        margin: 0 auto;
        padding: 0 0 64px;
        text-align: center;
        animation: rise .85s cubic-bezier(.22, .8, .3, 1) .18s both;
    }
    @keyframes rise {
        from {
            opacity: 0;
            transform: translateY(18px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
    .launch-badge {
        display: inline-block;
        margin: 0 0 26px;
        padding: 7px 16px 6px;
        border: 1px solid var(--line);
        color: #9d9a98;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .3em;
        text-transform: uppercase;
    }
    .launch-title {
        margin: 0;
        font-size: clamp(28px, 4.6vw, 44px);
        font-weight: 400;
        line-height: 1.24;
        letter-spacing: -.022em;
    }
    .launch-text {
        max-width: 560px;
        margin: 18px auto 0;
        color: #a8a5a3;
        font-size: 14.5px;
        line-height: 1.85;
    }
    .outlets {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        margin: 40px auto 0;
        padding: 32px 0 0;
        border-top: 1px solid var(--line);
        text-align: center;
    }
    .outlets-col {
        max-width: 480px;
        margin: 0 auto;
    }
    .outlets-label {
        margin: 0 0 20px;
        color: #6b6867;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .28em;
        text-transform: uppercase;
    }
    .socials {
        display: flex;
        justify-content: center;
        gap: 34px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .social {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 11px;
        text-decoration: none;
    }
    .social svg {
        width: 20px;
        height: 20px;
        color: #b4b1af;
        transition: color .3s ease, transform .3s ease;
    }
    .social-name {
        color: #8e8b89;
        font-size: 9px;
        font-weight: 500;
        letter-spacing: .16em;
        text-transform: uppercase;
        transition: color .3s ease;
    }
    .social:hover svg,
    .social:focus-visible svg {
        color: var(--white);
        transform: translateY(-2px);
    }
    .social:hover .social-name,
    .social:focus-visible .social-name {
        color: #b4b1af;
    }
    .social--whatsapp:hover svg,
    .social--whatsapp:focus-visible svg {
        color: #25d366;
    }
    .reach {
        display: grid;
        justify-items: center;
        gap: 13px;
        margin: 24px 0 0;
        padding: 0;
        list-style: none;
    }
    .reach a {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        color: #8e8b89;
        font-size: 13px;
        letter-spacing: .015em;
        text-decoration: none;
        transition: color .3s ease;
    }
    .reach svg {
        width: 15px;
        height: 15px;
        flex: none;
        color: #63605f;
        transition: color .3s ease;
    }
    .reach a:hover,
    .reach a:focus-visible {
        color: var(--white);
    }
    .reach a:hover svg,
    .reach a:focus-visible svg {
        color: #9d9a98;
    }
    .social:focus-visible,
    .reach a:focus-visible {
        outline: 2px solid rgba(255, 255, 255, .60);
        outline-offset: 4px;
    }
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        white-space: nowrap;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }
    @media (max-width: 820px) {
        .content,
        .foot {
            width: min(100% - 32px, 1180px);
        }
        .launch {
            width: min(100% - 32px, 940px);
            padding-bottom: 48px;
        }
        .outlets {
            gap: 44px;
            margin-top: 36px;
            padding-top: 28px;
        }
        .content {
            padding: 32px 0 44px;
        }
        .brand {
            width: min(520px, 88vw);
        }
    }
    @media (max-width: 520px) {
        .copyright {
            font-size: 8.5px;
        }
        .legal {
            font-size: 9.5px;
        }
        .foot {
            padding: 30px 0 24px;
        }
        .foot-rule {
            margin-bottom: 26px;
        }
        .foot-note {
            font-size: 8.5px;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .launch {
            animation: none;
        }
        .social svg,
        .social-name,
        .reach a,
        .reach svg {
            transition: none;
        }
        .social:hover svg,
        .social:focus-visible svg {
            transform: none;
        }
    }