/* =====================================================================
   Base & Reset
   ===================================================================== */
* {
    box-sizing: border-box;
}

html {
    font-family: var(--font-sans);
    font-size: 16px;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.site-main {
    background: var(--color-beige);
    color: var(--color-black);
}

/* =====================================================================
   Header
   ===================================================================== */
.site-header,
header {
    height: var(--header-height-mobile);
    background: var(--color-bg);
    box-shadow: 0px 4px 4px 0px #00000040;
    transition: background-color 200ms ease, box-shadow 200ms ease;
}

.site-header.is-transparent {
    background: transparent;
    box-shadow: none;
}

.site-header.is-transparent.is-scrolled {
    background: var(--color-white);
    box-shadow: 0px 4px 4px 0px #00000040;
}

.site-header.is-sticky {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.site-header.is-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
}

.site-header.is-overlay+.site-main {
    padding-top: var(--header-height-mobile);
}

@media (min-width: 1024px) {
    .site-header.is-overlay+.site-main {
        padding-top: var(--header-height-desktop);
    }
}

.site-header.is-overlay+.site-main.no-offset {
    padding-top: 0;
}

@media (min-width: 1024px) {
    .site-header.is-overlay+.site-main.no-offset {
        padding-top: 0;
    }
}

@media (min-width: 1024px) {

    .site-header,
    header {
        height: var(--header-height-desktop);
    }
}

/* Header layout */
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0;
}

/* Header — brand, nav, actions */
.header-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.header-brand img {
    height: 24px;
}

.header-nav {
    display: none;
    gap: 32px;
}

.header-actions {
    display: none;
    gap: 12px;
}

.header-nav a {
    text-decoration: none;
    color: var(--color-black);
    font-weight: var(--weight-medium);
}

.header-nav a:hover {
    color: var(--color-purple);
}

.mobile-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-menu-toggle {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black);
}

.mobile-menu-toggle .icon-close {
    display: none;
}

.site-header.is-menu-open .mobile-menu-toggle .icon-menu {
    display: none;
}

.site-header.is-menu-open .mobile-menu-toggle .icon-close {
    display: block;
}

.mobile-menu-overlay {
    position: fixed;
    top: var(--header-height-mobile);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-beige);
    z-index: var(--z-modal);
    padding: 24px 16px;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(50% - 40px);
    width: 100vw;
    box-shadow: 0px 4px 4px 0px #00000040;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.site-header.is-menu-open .mobile-menu-overlay {
    display: flex;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-end;
    margin-bottom: auto;
}

.mobile-nav-link {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--color-black);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.mobile-nav-link i {
    color: var(--color-purple);
    width: 20px;
    height: 20px;
}

.mobile-nav-actions {
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
}

.mobile-nav-contact {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.mobile-nav-contact a {
    font-size: 16px;
    color: var(--color-black);
    text-decoration: underline;
    position: relative;
}

.mobile-menu-footer {
    margin-top: 40px;
    text-align: right;
    width: 100%;
}

.mobile-menu-footer .separator-line {
    height: 0.5px;
    background: var(--color-black);
    width: 100%;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    header {
        width: 100vw;
    }

    .site-header .container {
        display: flex;
        align-items: center;
        padding: 10px 16px;
    }
}

@media (min-width: 768px) {
    .header-nav {
        display: inline-flex;
    }

    .header-actions {
        display: inline-flex;
    }

    .mobile-controls {
        display: none;
    }

    .mobile-menu-overlay {
        display: none !important;
        /* Force hide on desktop even if class is active */
    }
}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer,
footer {
    /* mobile: natural height */
    background: var(--color-black);
    color: var(--color-white);
}

@media (min-width: 1024px) {

    .site-footer,
    footer {
        height: var(--footer-height-desktop);
    }
}

/* Footer padding: mobile and desktop */
.site-footer .container {
    padding: 40px 16px;
}

@media (min-width: 1024px) {
    .site-footer .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 40px 0px;
        height: 100%;
    }
}

/* Footer Grid & Links */
.footer-grid {
    display: grid;
    flex-grow: 1;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--grid-gap);
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 20px;
    }
}

.footer-divider {
    grid-column: 4 / span 9;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
}

.footer-logo {
    grid-column: 1 / -1;
}

.footer-links {
    grid-column: 1 / -1;
}

.footer-contact {
    grid-column: 1 / -1;
}

.footer-legal {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .footer-logo {
        grid-column: 1 / span 3;
    }

    .footer-links {
        grid-column: 4 / span 3;
    }

    .footer-contact {
        grid-column: 7 / span 3;
    }

    .footer-legal {
        grid-column: 10 / span 3;
        text-align: right;
    }
}

/* Footer logo sizes */
.footer-logo img {
    height: 55px;
}

@media (min-width: 1024px) {
    .footer-logo img {
        height: 70px;
    }
}

.footer-links,
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.footer-links a,
.footer-contact a,
.footer-legal a {
    color: var(--color-white);
    text-decoration: none;
}

.footer-links a:hover,
.footer-contact a:hover,
.footer-legal a:hover {
    color: var(--color-purple);
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Social icons */
.social-icons {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.social-icons img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Mobile Footer Updates */
@media (max-width: 1024px) {
    .site-footer .container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .footer-grid,
    .footer-divider,
    .footer-bottom {
        display: contents;
    }

    .footer-logo {
        order: 1;
        width: 100%;
    }

    .footer-links {
        order: 2;
        gap: 24px;
        width: 100%;
    }

    .footer-contact {
        order: 3;
        gap: 24px;
        width: 100%;
    }

    .social-icons {
        order: 4;
        width: 100%;
        gap: 24px;
    }

    .footer-legal {
        order: 5;
        width: 100%;
        text-align: left;
    }

    .footer-bottom>.body-s {
        order: 6;
        width: 100%;
        color: rgba(255, 255, 255, 0.7);
        margin-top: -16px;
        /* Closer to legal */
    }

    .footer-logo img {
        height: 48px;
        /* Slightly smaller for mobile */
    }
}

/* =====================================================================
   Typography — Headings
   ===================================================================== */
h1 {
    font-family: var(--heading-h1-family);
    font-size: var(--heading-h2-size);
    line-height: var(--heading-h2-line);
    font-weight: var(--heading-h1-weight);
    margin: 0;
    animation: h1-enter-left 0.5s ease-in both;
}

@media (min-width: 768px) {
    h1 {
        font-size: var(--heading-h1-size);
        line-height: var(--heading-h1-line);
    }
}

.page-home main>section h1,
.page-home main>.separator-block h1 {
    animation: none;
}

.page-home main>section.is-inview h1,
.page-home main>.separator-block.is-inview h1 {
    animation: h1-enter-left 0.5s ease-in both;
}

@keyframes h1-enter-left {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    h1 {
        animation: none;
    }
}

h2 {
    font-family: var(--heading-h2-family);
    font-size: var(--heading-h4-size);
    line-height: var(--heading-h4-line);
    font-weight: var(--heading-h2-weight);
    margin: 0;
}

@media (min-width: 768px) {
    h2 {
        font-size: var(--heading-h2-size);
        line-height: var(--heading-h2-line);
    }
}

h3 {
    font-family: var(--heading-h3-family);
    font-size: var(--heading-h3-size);
    line-height: var(--heading-h3-line);
    font-weight: var(--heading-h3-weight);
    margin: 0;
}

h4 {
    font-family: var(--heading-h4-family);
    font-size: var(--heading-h4-size);
    line-height: var(--heading-h4-line);
    font-weight: var(--heading-h4-weight);
    margin: 0;
}

/* =====================================================================
   Layout — Container
   ===================================================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    padding-top: 40px;
    padding-bottom: 40px;
    margin: 0 auto;
    height: 100%;
}

@media (min-width: 1024px) {
    .container {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}




/* =====================================================================
   Sections & Titles
   ===================================================================== */
.section {
    margin-bottom: var(--space-10);
}

.title {
    font-size: var(--font-size-6);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-4);
}

.hero {
    background: linear-gradient(180deg, var(--color-purple) 0%, var(--color-beige) 65%);
    padding: 48px 0;
}

@media (min-width: 1024px) {
    .hero {
        padding: 80px 0 0;
    }
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

@media (min-width: 1024px) {
    .hero-inner {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "copy media"
            "features media";
        align-items: center;
    }

    .hero-copy {
        grid-area: copy;
    }

    .hero-media {
        grid-area: media;
        grid-row: 1 / span 2;
    }

    .features {
        grid-area: features;
    }
}

.hero-copy .stack {
    margin-top: var(--space-6);
}

.hero-media .img-placeholder {
    width: 100%;
    height: 240px;
    border-radius: var(--radius-3);
    background: var(--color-surface);
    box-shadow: var(--shadow-3);
}

@media (min-width: 1024px) {
    .hero-media .img-placeholder {
        height: 360px;
    }
}

.features {
    align-self: start;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature {
    height: 51px;
    opacity: 0;
}

.hero.is-inview .feature {
    animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.hero.is-inview .feature:nth-child(1) {
    animation-delay: 0.1s;
}

.hero.is-inview .feature:nth-child(2) {
    animation-delay: 0.2s;
}

.hero.is-inview .feature:nth-child(3) {
    animation-delay: 0.3s;
}

@media (min-width: 768px) {
    .features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.feature {
    border-left: 1px solid var(--color-black);
    padding-left: var(--space-4);
}

.feature:first-child {
    border-left: none;
    padding-left: 0;
}

.logo-section {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-12);
    gap: 16px;
}

.logo-marquee {
    overflow: hidden;
    position: relative;
}

.logo-strip,
.logo-strip-2 {
    display: inline-flex;
    gap: var(--space-6);
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    animation: logoMarquee 25s linear infinite;
    animation-play-state: paused;

    img {
        height: 40px;
        display: block;
        opacity: 0.85;
        transition: opacity var(--dur-fast) var(--ease-standard);
    }

    img:hover {
        opacity: 1;
    }
}

.is-inview .logo-strip,
.is-inview .logo-strip-2 {
    animation-play-state: running;
}

@keyframes logoMarquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .logo-strip,
    .logo-strip-2 {
        animation: none;
        transform: none;
    }
}

.container.bridge {
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--space-12) * 1.6667);
    padding-bottom: calc(var(--space-12) * 1.6667);
    gap: 40px;
}

.bridge-strip {
    position: relative;
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-5);
    align-items: center;
    justify-content: space-between;
}

.bridge-line-0,
.bridge-line-1,
.bridge-line-2,
.bridge-line-3,
.bridge-line-4 {
    display: none;
}

@media (min-width: 640px) {
    .bridge-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .bridge-strip {
        display: flex;
        gap: 20px;
    }

    .bridge-group {
        position: relative;
        padding-top: 72px;
        padding-bottom: 100px;
        display: flex;
        justify-content: space-between;
        flex: 1;
        align-items: center;
    }

    .bridge-strip>.bridge-item:nth-child(1) img {
        width: 135px;
        height: 136px;
    }

    .bridge-strip>.bridge-item:nth-child(2) img {
        width: 29px;
        height: 29px;
    }

    .bridge-group>.bridge-item:nth-child(1) img {
        width: 233px;
        height: 167px;
    }

    .bridge-group>.bridge-item:nth-child(2) img {
        width: 120px;
        height: 120px;
    }

    .bridge-group>.bridge-item:nth-child(3) img {
        width: 233px;
        height: 167px;
    }

    .bridge-group>.bridge-item:nth-child(4) {
        display: none;
    }

    .bridge-line-0,
    .bridge-line-1,
    .bridge-line-2,
    .bridge-line-3,
    .bridge-line-4 {
        display: block;
        opacity: 1;
        pointer-events: auto;
        position: absolute;
    }

    .bridge-line-0 {
        top: 262px;
        left: 83px;
        width: 175px;
    }

    .bridge-line-1 {
        top: 28px;
        left: calc(448px - 203px);
    }

    .bridge-line-2 {
        top: 28px;
        left: calc(724px - 203px);
    }

    .bridge-line-3 {
        top: 262px;
        left: calc(416px - 203px);
        width: 178px;
    }

    .bridge-line-4 {
        top: 262px;
        left: calc(733px - 203px);
        width: 179px;
    }
}

.bridge-item img {
    opacity: 0;
}

.container.bridge.is-inview .bridge-item img {
    animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@media (max-width: 1024px) {

    .bridge-line-0,
    .bridge-line-2,
    .bridge-line-3,
    .bridge-line-4 {

        display: block;
        opacity: 1;
        pointer-events: auto;
        position: absolute;
    }

    .bridge-line-0 {
        width: 155px;
        top: 192px;
        left: 147px;
    }

    .bridge-line-2 {
        top: 671px;
        left: calc(100% - 110px);
    }

    .bridge-line-3 {
        width: 155px;
        top: 339px;
        left: 0;
    }

    .bridge-line-4 {
        width: 155px;
        top: 505px;
        left: 184px;
    }

    .container.bridge {
        padding-top: 40px;
        padding-bottom: 0px;
    }

    .bridge-strip {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .bridge-group {
        display: contents;
    }

    .bridge-item img {
        max-width: 100%;
        height: auto;
    }

    .bridge-group>.bridge-item:nth-child(2) {
        order: 1;

        img {
            height: 79px;
        }
    }

    .bridge-strip>.bridge-item:nth-child(1) {
        order: 2;
        align-self: start;

        img {
            height: 126px;
        }
    }

    .bridge-group>.bridge-item:nth-child(1) {
        order: 3;
        align-self: end;

        img {
            height: 122px;
        }
    }

    .bridge-group>.bridge-item:nth-child(3) {
        order: 4;
        align-self: start;

        img {
            height: 122px;
        }
    }

    .bridge-group>.bridge-item:nth-child(4) {
        order: 5;
        align-self: center;

        img {
            height: 126px;
        }
    }

    .bridge-strip>.bridge-item:nth-child(2) {
        display: none;
    }
}

/* Demo row grid */
.row {
    display: grid;
    gap: var(--grid-gap);
}

@media (min-width: 640px) {
    .row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =====================================================================
   Card
   ===================================================================== */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
    padding: var(--space-6);
}

/* =====================================================================
   Swatches
   ===================================================================== */
.swatches {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
}

.swatch-group {
    /* display: flex;
  flex-direction: column; */
    align-items: center;
}

.swatch {
    height: var(--size-24);
    border-radius: var(--radius-2);
}

.swatch-outline {
    box-shadow: 0 0 0 1px var(--color-neutral-300);
}

.swatch-label {
    margin-top: var(--space-2);
    font-size: var(--font-size-2);
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    border: 0;
    border-radius: 30px;
    font-weight: var(--weight-medium);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    transition: background-color 0.2s ease-in, color 0.2s ease-in, border-color 0.2s ease-in, box-shadow 0.2s ease-in, transform var(--dur-quick) var(--ease-standard), opacity var(--dur-quick) var(--ease-standard);
}

.btn:active {
    transform: scale(0.98);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-neutral-300);
}

.btn:disabled,
.btn.is-disabled {
    opacity: var(--opacity-50);
    cursor: not-allowed;
    pointer-events: none;
}

@media (min-width: 640px) {
    .btn {
        font-size: var(--body-m-size);
        line-height: var(--body-m-line);
    }
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-secondary-contrast);
}

.btn-success {
    background: var(--color-success);
    color: var(--color-success-contrast);
}

.btn-error {
    background: var(--color-error);
    color: var(--color-error-contrast);
}

.btn-warning {
    background: var(--color-warning);
    color: var(--color-warning-contrast);
}

.btn-primary-default {
    background: var(--color-black);
    color: var(--color-white);
}

.btn-primary-default:hover {
    background: var(--color-purple);
    color: var(--color-white);
}

.btn-primary-default:disabled,
.btn-primary-default.is-disabled {
    background: var(--color-black);
    color: var(--color-white);
}

.btn-primary-dark {
    background: var(--color-purple);
    color: var(--color-white);
    /* box-shadow: 0 0 0 4px var(--color-neutral-300) inset; */
}

.btn-primary-dark:hover {
    background: var(--color-white);
    color: var(--color-purple);
}

.btn-primary-dark:disabled,
.btn-primary-dark.is-disabled {
    background: var(--color-purple);
    color: var(--color-white);
}

.btn-secondary-default {
    background: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-black);
}

.btn-secondary-default:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border: 1px solid transparent;
}


.btn-secondary-dark {
    background: transparent;
    border: 1px solid var(--color-white);
    color: var(--color-white);
}

.btn-secondary-dark:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border: 1px solid transparent;
}

.btn-secondary-dark:disabled,
.btn-secondary-dark.is-disabled {
    /* background: var(--color-neutral-200); */
    background: transparent;
    border: 1px solid var(--color-white);
    color: var(--color-neutral-600);
}

.btn-tertiary {
    background: transparent;
    color: var(--color-black);
    padding: 0;
    box-shadow: none;
}

.btn-tertiary:hover {
    color: var(--color-purple);
    text-decoration: underline;
}

.btn-tertiary:disabled,
.btn-tertiary.is-disabled {
    color: var(--color-neutral-400);
}

.btn-tertiary-white {
    background: transparent;
    color: var(--color-white);
    padding: 0;
    box-shadow: none;
}

.btn-tertiary-white:hover {
    color: var(--color-purple);
    text-decoration: underline;
}

/* =====================================================================
   Stack
   ===================================================================== */
.stack {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* =====================================================================
   Typographic Scale
   ===================================================================== */
.typo-scale {
    display: grid;
    gap: var(--space-2);
}

.typo-1 {
    font-size: var(--font-size-1);
    line-height: var(--line-4);
}

.typo-2 {
    font-size: var(--font-size-2);
    line-height: var(--line-4);
}

.typo-3 {
    font-size: var(--font-size-3);
    line-height: var(--line-4);
}

.typo-4 {
    font-size: var(--font-size-4);
    line-height: var(--line-4);
}

.typo-5 {
    font-size: var(--font-size-5);
    line-height: var(--line-3);
    font-weight: var(--weight-semibold);
}

.typo-6 {
    font-size: var(--font-size-6);
    line-height: var(--line-3);
    font-weight: var(--weight-semibold);
}

.typo-7 {
    font-size: var(--font-size-7);
    line-height: var(--line-2);
    font-weight: var(--weight-bold);
}

/* Body text classes */
.body-xl {
    font-family: var(--body-xl-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    font-weight: var(--body-xl-weight);
}

@media (min-width: 768px) {
    .body-xl {
        font-size: var(--body-xl-size);
        line-height: var(--body-xl-line);
    }
}

.body-l {
    font-family: var(--body-l-family);
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
    font-weight: var(--body-l-weight);
}

@media (min-width: 768px) {
    .body-l {
        font-size: var(--body-l-size);
        line-height: var(--body-l-line);
    }
}

.body-m {
    font-family: var(--body-m-family);
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
    font-weight: var(--body-m-weight);
}

.body-s {
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    font-weight: var(--body-s-weight);
}

/* =====================================================================
   Elevation
   ===================================================================== */
.elevation-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
}

/* =====================================================================
   Page Grid
   - 6 columns mobile, 12 columns desktop
   ===================================================================== */
.page-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--grid-gap);
}

@media (min-width: 1024px) {
    .page-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 20px;
    }
}

.elev-1 {
    box-shadow: var(--shadow-1);
}

.elev-2 {
    box-shadow: var(--shadow-2);
}

.elev-3 {
    box-shadow: var(--shadow-3);
}

.elev-4 {
    box-shadow: var(--shadow-4);
}

.elev-5 {
    box-shadow: var(--shadow-5);
}

/* =====================================================================
   Radius
   ===================================================================== */
.radius-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
}



.rad-0 {
    border-radius: var(--radius-0);
}

.rad-1 {
    border-radius: var(--radius-1);
}

.rad-2 {
    border-radius: var(--radius-2);
}

.rad-3 {
    border-radius: var(--radius-3);
}

.rad-4 {
    border-radius: var(--radius-4);
}

/* =====================================================================
   Opacity
   ===================================================================== */
.opacity-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
}

.op-10 {
    opacity: var(--opacity-10);
}

.op-30 {
    opacity: var(--opacity-30);
}

.op-50 {
    opacity: var(--opacity-50);
}

.op-70 {
    opacity: var(--opacity-70);
}

.op-90 {
    opacity: var(--opacity-90);
}

/* Z-index demo */
.z-demo {
    position: relative;
    height: var(--size-32);
}

.z-box {
    position: absolute;
    width: var(--size-24);
    height: var(--size-24);
    border-radius: var(--radius-2);
}

.z-a {
    background: var(--color-secondary);
    left: var(--space-2);
    top: var(--space-2);
    z-index: var(--z-10);
}

.z-b {
    background: var(--color-primary);
    left: var(--space-6);
    top: var(--space-6);
    z-index: var(--z-20);
}

.z-c {
    background: var(--color-success);
    left: var(--space-10);
    top: var(--space-10);
    z-index: var(--z-30);
}

/* Animations */
.anim-box {
    width: var(--size-24);
    height: var(--size-24);
    border-radius: var(--radius-2);
    background: var(--color-primary);
    animation: pulse var(--dur-normal) var(--ease-standard) infinite alternate;
}

@keyframes pulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

/* Grid demo */
.grid-demo {
    display: grid;
    gap: var(--grid-gap);
}

@media (min-width: 640px) {
    .grid-demo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid-demo {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Grid item */
.grid-item {
    background: var(--color-surface);
    border-radius: var(--radius-2);
    padding: var(--space-6);
    box-shadow: var(--shadow-1);
}

/* Toolbar & Badge */
.toolbar {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-6);
}

.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-1);
    background: var(--color-surface);
}

/* =====================================================================
   Backgrounds — Degrade
   - Soft aurora-like purple fades on beige
   ===================================================================== */
.bg-degrade {
    background:
        radial-gradient(1200px circle at 85% 30%, rgba(164, 118, 255, 0.45) 0%, rgba(164, 118, 255, 0.0) 60%),
        radial-gradient(900px circle at 20% 85%, rgba(164, 118, 255, 0.30) 0%, rgba(164, 118, 255, 0.0) 60%),
        radial-gradient(800px circle at 15% 15%, rgba(164, 118, 255, 0.35) 0%, rgba(164, 118, 255, 0.0) 55%),
        var(--color-beige);
    /* background-repeat: no-repeat;
    background-size: cover; */
}

.bg-degrade-ecosystem {
    background:
        linear-gradient(to bottom, transparent 80%, var(--color-black) 100%),
        radial-gradient(circle at top left, rgba(164, 118, 255, 0.4) 0%, transparent 50%),
        radial-gradient(circle at right, rgba(164, 118, 255, 0.4) 0%, transparent 50%),
        var(--color-black);
}

.bg-degrade-future {
    background:
        radial-gradient(900px circle at 92% 14%, rgba(164, 118, 255, 0.35) 0%, rgba(164, 118, 255, 0.0) 55%),
        radial-gradient(820px circle at 86% 55%, rgba(14, 202, 221, 0.26) 0%, rgba(14, 202, 221, 0.0) 60%),
        var(--color-beige);
}

.ecosystem {
    padding-top: 40px;
    padding-bottom: 40px;

    @media (min-width: 1024px) {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .title {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .ecosys-grid {
        display: grid;
        gap: var(--space-8);
        align-items: start;
        margin-top: 40px;
    }

    @media (min-width: 1024px) {
        .ecosys-grid {
            grid-template-columns: 1.2fr 1fr;
        }
    }

    .ecosys-media {
        position: relative;
    }

    .ecosys-img {
        width: 100%;
        height: auto;
        display: block;
        opacity: 0;
    }

    .ecosys-copy {
        display: flex;
        flex-direction: column;
        gap: 32px;
        margin: auto;
        order: -1;
        opacity: 0;

        .body-l {
            font-family: var(--body-s-family);
            font-size: var(--body-s-size);
            line-height: var(--body-s-line);
            font-weight: var(--body-s-weight);
        }
    }

    @media (min-width: 1024px) {
        .ecosys-copy {
            order: initial;

            .body-l {
                font-family: var(--body-l-family);
                font-size: var(--body-l-size);
                line-height: var(--body-l-line);
                font-weight: var(--body-l-weight);
            }
        }
    }
}

.bg-degrade-ecosystem.is-inview .ecosys-copy {
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.bg-degrade-ecosystem.is-inview .ecosys-img {
    animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/*
  Home Hero Banner
*/
.hero-media {
    position: relative;
    height: 433px;
}

.hero-media img {
    opacity: 0;
    transform: translateY(12px) scale(0.975);
    filter: blur(8px) saturate(0.9);
    transition: opacity var(--dur-slow) var(--ease-emphasized), transform var(--dur-slow) var(--ease-emphasized), filter 700ms var(--ease-decelerate);
    will-change: opacity, transform, filter;
}

.hero-media img.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) saturate(1);
    /* animation: heroFloat 6s var(--ease-decelerate) 0.8s infinite; */
}

@keyframes heroFloat {
    0% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-3px) scale(1.003);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

.i1 {
    position: absolute;
    width: 264px;
    height: 190px;
    left: 100px;
}

.i2 {
    position: absolute;
    width: 264px;
    height: 176px;
    bottom: 0;
    right: 0;
}

.i3 {
    position: absolute;
    width: 132px;
    height: 80px;
    top: 70px;
}

.i4 {
    position: absolute;
    width: 220px;
    height: 32px;
    top: 80px;
    right: 0px;
}

.i5 {
    position: absolute;
    width: 212px;
    height: 105.5px;
    top: 180px;
    left: 120px;
}

.i6 {
    position: absolute;
    width: 149px;
    height: 68px;
    top: 170px;
    right: 50px;
}

.i7 {
    position: absolute;
    width: 134.64px;
    height: 63px;
    top: 300px;
    right: 230px;
}

.i8 {
    position: absolute;
    width: 244px;
    height: 35px;
    bottom: 15px;
    left: 60px;
}

/* =====================================================================
   Utilities
   ===================================================================== */
.text-white {
    color: var(--color-white);
}

.text-dark {
    color: var(--color-black);
}

/* =====================================================================
   Block Separators
   ===================================================================== */
.separator-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8) var(--space-4);
    gap: var(--space-4);
}

.separator-block.is-purple {
    background-color: var(--color-purple);
    color: var(--color-white);
}

.separator-block.is-dark {
    background-color: var(--color-black);
    color: var(--color-white);
}

.text-purple {
    color: var(--color-purple);
}

.no-margin {
    margin: 0
}

#second-separator h1 {
    font-family: var(--heading-h3-family);
    font-size: var(--heading-h3-size);
    line-height: var(--heading-h3-line);
    font-weight: var(--heading-h3-weight);
}

/* =====================================================================
   Tabs Section
   ===================================================================== */
.tabs-section {
    padding: 40px 0 0;
    background-color: var(--color-bg);

    @media (min-width: 1024px) {
        padding: 80px 0;
    }
}

.tabs-nav {
    display: flex;
    align-items: flex-end;
}

.tab-btn {
    height: 36px;
    max-height: 36px;
    padding: 0 24px;
    border: none;
    font-family: var(--font-sans);
    font-size: var(--body-l-size);
    font-weight: var(--weight-medium);
    cursor: pointer;
    border-radius: 12px 12px 0 0;
    transition: all 0.3s ease;
    margin-right: -10px;
    /* Slight overlap or tight spacing */
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.tab-btn:hover {
    z-index: 2;
    filter: brightness(1.1);
}

.tab-btn.is-active {
    z-index: 10;
    /* margin-bottom: -4px; */
}

/* Tab Colors */
.tab-btn[data-theme="dark"] {
    background-color: var(--color-black);
    color: var(--color-white);
}

.tab-btn[data-theme="purple"] {
    background-color: rgba(164, 118, 255, 0.3);
    /* Lighter purple for inactive */
    color: var(--color-black);
    /* Or purple text? */
}

.tab-btn.is-active[data-theme="purple"] {
    background-color: var(--color-purple);
    color: var(--color-white);
}

.tab-btn[data-theme="beige"] {
    background-color: var(--color-beige);
    color: var(--color-black);
}

.tab-btn.is-active[data-theme="beige"] {
    background-color: var(--color-beige);
    color: var(--color-black);
}

/* Adjust beige active state to match content background */
/* If content is beige, tab is beige. */

/* Explicit overrides based on screenshot colors */
.tab-btn[data-theme="purple"] {
    background-color: #E6DDFE;
    /* Light purple */
    color: var(--color-purple);
}

.tab-btn.is-active[data-theme="purple"] {
    background-color: var(--color-purple);
    color: var(--color-white);
}

.tab-btn[data-theme="beige"] {
    background-color: #F0F2E4;
    /* Light beige/greenish from screenshot? looks standard beige */
    color: var(--color-neutral-800);
}

/* If active, it matches the beige content */


.tabs-content-wrapper {
    padding: 40px 32px;
    border-radius: 0 16px 16px 16px;
    position: relative;
    z-index: 5;
    transition: background-color 0.3s ease;
    min-height: 269px;
    overflow: hidden;
}

.tabs-content-wrapper.is-dark {
    background-color: var(--color-black);
    background-image:
        radial-gradient(circle at bottom left, var(--color-purple), transparent 60%),
        radial-gradient(circle at top right, var(--color-purple), transparent 60%);
}

.tabs-content-wrapper.is-purple {
    background-color: var(--color-beige);
    background-image:
        radial-gradient(circle at left, var(--color-purple) 0%, transparent 25%),
        radial-gradient(circle at top right, var(--color-purple), transparent);
}

.tabs-content-wrapper.is-beige {
    background-color: var(--color-red);
    background-image:
        radial-gradient(circle at left, var(--color-beige), var(--color-blue));
}

.tab-pane {
    display: none;
    animation: fadeIn 0.5s ease;
    /* height: 269px; */
}

.tab-pane.is-active {
    display: block;
}

.tab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;

    button {
        align-self: start;
    }
}

.tab-info {
    display: flex;
    flex-direction: column;
    gap: 24px;

    h2 {
        width: 485px;
    }
}

.tab-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tab-info li {
    position: relative;
    padding-left: 24px;
    font-size: var(--body-m-size);
    line-height: 20px;
}

.tab-info li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: currentColor;
}

.tab-media img {
    width: 444px;
    opacity: 0;
}

.tabs-section.is-inview .tab-pane.is-active .tab-media img {
    animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scale-in-center {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 1024px) {
    .tab-grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .tab-info {
        display: contents;
    }

    .tab-info h2 {
        order: 1;
        width: 100%;
    }

    .tab-media {
        order: 2;
        width: 100%;
    }

    .tab-media img {
        width: 100%;
        height: auto;
    }

    .tab-info ul {
        order: 3;
    }

    .tab-info button {
        order: 4;
        width: auto;
    }

    .tabs-content-wrapper {
        padding: 32px;
        border-radius: 24px;
        border-top-left-radius: 0;
    }

    /* Mobile Stacked Tabs */
    .tabs-nav {
        display: none !important;
    }

    .tabs-content-wrapper {
        background: transparent !important;
        background-image: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    .tab-pane {
        display: block !important;
        border-radius: 24px;
        border-top-left-radius: 0;
        padding: 24px;
        margin-bottom: 32px;
        position: relative;
        margin-top: 48px;
        overflow: visible;
    }

    .tab-pane::before {
        content: "";
        position: absolute;
        top: -36px;
        left: 0;
        height: 36px;
        padding: 0 24px;
        border-radius: 12px 12px 0 0;
        font-family: var(--font-sans);
        font-size: 16px;
        font-weight: 500;
        display: flex;
        align-items: center;
        width: fit-content;
    }

    /* Empresas Card */
    #empresas {
        background-color: var(--color-black);
        background-image:
            radial-gradient(circle at bottom left, var(--color-purple), transparent 60%),
            radial-gradient(circle at top right, var(--color-purple), transparent 60%);
        color: var(--color-white);
    }

    #empresas::before {
        content: "Para empresas";
        background-color: var(--color-black);
        color: var(--color-white);
    }

    #empresas h2,
    #empresas .tab-list {
        color: var(--color-white);
    }

    #empresas .tab-list li::before {
        color: var(--color-white);
    }

    /* Instituciones Card */
    #instituciones {
        background-color: var(--color-beige);
        background-image:
            radial-gradient(circle at left, var(--color-purple) 0%, transparent 25%),
            radial-gradient(circle at top right, var(--color-purple), transparent);
        color: var(--color-black);
    }

    #instituciones::before {
        content: "Para Instituciones educativas";
        background-color: #E6DEFF;
        color: var(--color-black);
    }

    /* Estudiantes Card */
    #estudiantes {
        background-color: #F0F4F8;
        background-image:
            radial-gradient(circle at left, var(--color-beige), var(--color-blue));
        color: var(--color-black);
    }

    #estudiantes::before {
        content: "Para estudiantes";
        background-color: var(--color-yellow);
        color: var(--color-black);
    }

    .tab-media img {
        opacity: 1;
        animation: none;
    }
}


.hiw-section {
    background:
        radial-gradient(760px circle at 85% 55%, rgba(164, 118, 255, 0.28) 0%, transparent 60%),
        var(--color-beige);
    padding: 80px 0;
}

.hiw-flow {
    display: grid;
    grid-template-columns: 1fr 265px;
    gap: var(--space-10);
    margin-top: var(--space-10);
    align-items: start;
}

.hiw-flow .body-m {
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    font-weight: var(--body-s-weight);
}

.hiw-rail {
    position: relative;
    padding: 0;
}


.hiw-label {
    font-family: var(--heading-h4-family);
    font-size: var(--heading-h4-size);
    line-height: var(--heading-h4-line);
    font-weight: var(--heading-h4-weight);
    margin: 0 0 var(--space-6);
}

.hiw-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.hiw-row+.hiw-row {
    margin-top: var(--space-10);
}

.hiw-item {
    width: 265px;

    p {
        line-height: var(--line-5);
    }
}

.hiw-match-copy {
    p {
        line-height: var(--line-5);
    }
}

.hiw-item h3,
.hiw-item h4 {
    margin-top: var(--space-4);
}

.hiw-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-round);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-2);
    transition: opacity var(--dur-normal) var(--ease-standard);
}

.hiw-icon[data-hiw-stage]:not([data-hiw-stage="1"]) {
    opacity: 0.6;
}

.hiw-match {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    /* margin-top: 96px; */
    transform: translateY(100%);
    width: 265px;
}

.hiw-cta {
    display: flex;
    justify-content: center;
    /* margin-top: var(--space-10); */
}

@media (max-width: 1024px) {
    .hiw-row+.hiw-row {
        margin-top: 0;
    }

    .hiw-section {
        padding: 40px 0;
    }

    .hiw-flow {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hiw-rail {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-5);
    }

    .hiw-rail>.hiw-label:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .hiw-rail>.hiw-label:last-child {
        grid-column: 2;
        grid-row: 1;
    }

    .hiw-row--inst {
        grid-column: 1;
        grid-row: 2;
    }

    .hiw-row--emp {
        grid-column: 2;
        grid-row: 2;
    }

    .hiw-match {
        margin-top: var(--space-10);
        width: 100%;
        flex-direction: column;
        text-align: center;
        transform: none;
    }

    .hiw-match-copy h3 {
        justify-content: center;
    }

    .hiw-rail::before {
        left: 50%;
        right: auto;
        border-left: 2px dashed rgba(17, 14, 61, 0.35);
        transform: translateX(-1px);
        width: 0;
        height: 100%;
    }

    .hiw-row {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .hiw-item {
        width: 100%;
        height: 192px;
    }
}

.trust-section {
    padding: 80px 0;
}

.trust {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.trust-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
}

.trust-logos img {
    height: 26px;
    width: auto;
    display: block;
    opacity: 0.92;
}

.trust-cards {
    display: grid;
    gap: 16px;
}

@media (min-width: 1024px) {
    .trust-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        align-items: stretch;
    }
}

.trust-card {
    background: rgba(243, 243, 232, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
    padding: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 26px;
    backdrop-filter: blur(8px);
    transition: transform var(--dur-normal) var(--ease-standard);

    >img {
        width: 32px;
    }
}

.trust-quote {
    margin: 0;
    color: rgba(17, 14, 61, 0.86);
    line-height: 1.55;
}

.trust-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.trust-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: var(--weight-semibold);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--color-white);
    background: rgba(164, 118, 255, 0.9);
    box-shadow: 0 10px 20px rgba(17, 14, 61, 0.18);
}

.trust-avatar--alt {
    background: rgba(17, 14, 61, 0.88);
}

.trust-avatar--warm {
    background: rgba(255, 174, 0, 0.92);
    color: rgba(17, 14, 61, 0.95);
}

.trust-author-name {
    font-size: var(--body-s-size);
    line-height: 1.2;
    font-weight: var(--weight-semibold);
    color: rgba(17, 14, 61, 0.92);
}

.trust-author-role {
    color: rgba(17, 14, 61, 0.62);
}

.trust-cta {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

@media (min-width: 1024px) {
    .trust-card:hover {
        transform: translateY(-14px);
    }
}

@media (max-width: 1024px) {
    .trust-section {
        padding: 72px 0;
    }
}

.press {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.press-carousel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.press-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

.press-viewport::-webkit-scrollbar {
    display: none;
}

.press-track {
    display: flex;
    gap: 24px;
    align-items: stretch;
    padding-right: 12px;
}

.press-card {
    flex: 0 0 auto;
    /* width: clamp(240px, 30vw, 340px); */
    width: 265px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
    transform: translateZ(0);
}

.press-card img {
    width: 100%;
    height: auto;
    display: block;
}

.press-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 14px 12px;
    background: linear-gradient(to top, rgba(17, 14, 61, 0.85) 0%, rgba(17, 14, 61, 0.0) 85%);

    h4 {
        margin-bottom: 16px;
    }
}

.press-card-arrow {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(17, 14, 61, 0.65);
    color: var(--color-white);
    font-size: 14px;
}

.press-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.press-pagination {
    min-width: 44px;
    text-align: center;
    opacity: 0.9;
}

.press-nav {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    color: rgba(17, 14, 61, 0.95);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.press-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.future-section {
    padding: 80px 0;
}

.future-grid {
    display: grid;
    gap: 44px;
    align-items: center;
    margin-top: 40px;
}

@media (min-width: 1024px) {
    .future-grid {
        grid-template-columns: 1.1fr 1fr;
    }
}

.future-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 560px;
    align-self: start;
}

.future-points {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.future-point {
    opacity: 0;
}

.future-section.is-inview .future-point {
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.future-section.is-inview .future-point:nth-child(1) {
    animation-delay: 0.1s;
}

.future-section.is-inview .future-point:nth-child(2) {
    animation-delay: 0.2s;
}

.future-section.is-inview .future-point:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


.future-point-title {
    color: var(--color-purple);
    margin: 0 0 4px;
}

.future-cta {
    margin-top: 10px;
}

.future-media {
    position: relative;
    display: flex;
    justify-content: center;
}

.future-media img {
    opacity: 0;
    transform: translateY(12px) scale(0.975);
    filter: blur(8px) saturate(0.9);
    transition: opacity var(--dur-slow) var(--ease-emphasized), transform var(--dur-slow) var(--ease-emphasized), filter 700ms var(--ease-decelerate);
    will-change: opacity, transform, filter;
}

.future-media img.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) saturate(1);
}

.future-image {
    width: 421px;
    height: auto;
    display: block;
    border-radius: 18px;
}

.future-image-1 {
    position: absolute;
    height: 27.43px;
    top: 166px;
    left: 0;
}

.future-image-2 {
    position: absolute;
    height: 114px;
    top: 224px;
    left: 358px;
}

.future-image-3 {
    position: absolute;
    height: 81px;
    top: 258px;
    left: 108px;
}

.future-image-4 {
    position: absolute;
    height: 38.93px;
    top: 17px;
    left: 405px;
}

.future-badges {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .future-section {
        padding: 40px 0;
    }

    .future-copy {
        max-width: 100%;
    }

    .future-media {
        max-width: 100%;
        height: 194px;
    }

    .future-image {
        border-bottom-right-radius: 0;
        position: absolute;
        bottom: 0;
        right: 0;
        width: auto;
        height: 186px;
    }

    .future-image-1 {
        top: 0;
        left: 86px;
        height: 18px;
    }

    .future-image-2 {
        top: 32px;
        left: 20px;
        height: 88px;
    }

    .future-image-3 {
        top: 132px;
        left: 73px;
        height: 54px;
    }

    .future-image-4 {
        height: 21px;
        top: 150px;
        /* left: 112px; */
        left: calc(100% - 112px);
        right: 112px;
        /* left: 150px; */
    }
}

.form {
    display: grid;
    gap: 16px;
}

.form-row {
    display: grid;
    gap: 16px;
}

@media (min-width: 768px) {
    .form-row.is-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    font-weight: var(--weight-medium);
    color: var(--color-black);
}

.form-control {
    width: 100%;
    appearance: none;
    border-radius: 12px;
    border: 1px solid rgba(136, 136, 136, 0.7);
    background: rgba(255, 255, 255, 0.98);
    /* padding: 12px 14px; */
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    font-weight: var(--body-s-weight);
    color: var(--color-black);
    transition: border-color var(--dur-normal) var(--ease-standard),
        box-shadow var(--dur-normal) var(--ease-standard),
        background-color var(--dur-normal) var(--ease-standard);
}

.form-control::placeholder {
    color: rgba(136, 136, 136, 0.92);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-purple);
    box-shadow: 0 0 0 3px rgba(164, 118, 255, 0.28);
}

.form-control:not(:placeholder-shown) {
    border-color: var(--color-purple);
}

.form-field.is-active .form-control,
.form-field.is-typing .form-control {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 3px rgba(164, 118, 255, 0.28);
}

.form-field.is-error .form-control,
.form-control[aria-invalid="true"] {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(226, 0, 56, 0.22);
}

.form-control:disabled {
    background: rgba(243, 243, 232, 0.65);
    border-color: rgba(136, 136, 136, 0.45);
    color: rgba(17, 14, 61, 0.55);
    cursor: not-allowed;
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.form-error {
    display: none;
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    font-weight: var(--body-s-weight);
    color: var(--color-error);
}

.form-field.is-error .form-error {
    display: block;
}

/* =====================================================================
   Contact Section
   ===================================================================== */

.bg-degrade-contact {
    background:
        radial-gradient(900px circle at 18% 12%, rgba(164, 118, 255, 0.32) 0%, rgba(164, 118, 255, 0.0) 60%),
        radial-gradient(900px circle at 92% 14%, rgba(164, 118, 255, 0.22) 0%, rgba(164, 118, 255, 0.0) 62%),
        radial-gradient(1000px circle at 88% 86%, rgba(164, 118, 255, 0.26) 0%, rgba(164, 118, 255, 0.0) 60%),
        var(--color-beige);
}

.contact-section {
    padding: 80px 0;
}

.contact-grid {
    display: grid;
    gap: 44px;
    align-items: start;
}

@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr 1.1fr;
        gap: 72px;
    }
}

.contact-left {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 460px;
}

.contact-left h1 {
    width: 452px;
}

.contact-visual {
    width: 455px;
    height: auto;
    display: block;
    opacity: 0;
}

.contact-section.is-inview .contact-visual {
    animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.contact-right {
    width: 100%;
    max-width: 620px;
}

@media (min-width: 1024px) {
    .contact-right {
        justify-self: end;
    }
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-profile-fields {
    display: grid;
    gap: 16px;
}

.contact-form .form-label {
    color: var(--color-dark);
    font-weight: var(--weight-semibold);
    margin-bottom: 8px;
    display: block;
}

.contact-form .form-control {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(17, 14, 61, 0.28);
    background: transparent;
    padding: 6px 0 10px;
    box-shadow: none;
    width: 100%;
    transition: all 0.2s ease;
}

.contact-form select.form-control {
    color: var(--color-gray);
    cursor: pointer;
    appearance: none;
}

.contact-form .form-control:focus {
    border-color: var(--color-purple);
    outline: none;
}

.contact-form .form-control:not(:placeholder-shown) {
    border-color: var(--color-dark);
}

.contact-form .form-field.is-active .form-control,
.contact-form .form-field.is-typing .form-control {
    border-color: var(--color-purple);
}

.contact-form .form-field.is-error .form-control,
.contact-form .form-control[aria-invalid="true"] {
    border-color: var(--color-error);
    color: var(--color-error);
}

.contact-form textarea.form-control {
    resize: none;
    min-height: 40px;
}

.contact-form select.form-control.form-control--select {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
}

.typeahead-wrapper {
    position: relative;
}

.typeahead-input {
    width: 100%;
}

.typeahead-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--color-white);
    border-radius: var(--radius-3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
}

.typeahead-option {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.typeahead-option:hover,
.typeahead-option:focus-visible {
    background: var(--color-purple);
    color: var(--color-white);
    outline: none;
}

.form-radio-group {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 4px;
}

.form-radio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    font-weight: var(--body-s-weight);
    color: rgba(17, 14, 61, 0.86);
    cursor: pointer;
    user-select: none;
}

.form-radio input[type="radio"] {
    width: 14px;
    height: 14px;
    accent-color: var(--color-purple);
}

.form-submit {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 10px 26px;
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    font-weight: var(--weight-medium);
    background: rgba(136, 136, 136, 0.9);
    color: var(--color-white);
    cursor: pointer;
    transition: transform var(--dur-normal) var(--ease-standard),
        background-color var(--dur-normal) var(--ease-standard);
}

.form-submit:hover {
    background: rgba(17, 14, 61, 0.72);
}

.form-submit:active {
    transform: translateY(1px);
}

@media (max-width: 1024px) {
    .contact-section {
        padding: 60px 0;
    }

    .contact-left,
    .contact-right {
        max-width: 100%;
    }

    .contact-left h1 {
        width: 100%;
        font-size: var(--heading-h3-size);
    }

    .contact-visual {
        width: 100%;
        display: none;
    }

    .form-radio-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}