/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    body {
        background: var(--desktop-bg);
    }

    .bottom-nav {
        display: none !important;
    }

    .desktop-header {
        display: flex !important;
    }

    .desktop-footer {
        display: block !important;
    }

    .about-page {
        width: calc(100% - 80px);
        max-width: 1180px;
        margin: 0 auto;
        padding: 42px 0 80px;
    }

    /* =========================================================
       HERO
    ========================================================= */

    .about-hero-card {
        display: grid;
        min-height: 480px;
        padding: 48px;
        grid-template-columns: 1.05fr 0.95fr;
        align-items: center;
        gap: 70px;
    }

    .about-hero-content h2 {
        max-width: 640px;
        font-size: 2.65rem;
        line-height: 1.12;
    }

    .about-hero-content > p {
        max-width: 650px;
        font-size: 1.08rem;
    }

    .about-actions {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .about-button {
        width: auto;
        min-width: 205px;
        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            background 0.2s ease;
    }

    .about-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(14, 62, 97, 0.17);
    }

    .about-button-secondary:hover {
        background: #0e3e61;
        color: #ffffff;
    }

    .about-hero-visual {
        min-height: 380px;
        margin-top: 0;
    }

    .bluupi-avatar {
        width: 145px;
        height: 145px;
        border-radius: 46px;
    }

    .bluupi-avatar svg {
        width: 60px;
        height: 60px;
    }

    .bluupi-orbit-one {
        width: 275px;
        height: 275px;
    }

    .bluupi-orbit-two {
        width: 345px;
        height: 345px;
    }

    .about-floating-card {
        padding: 12px 15px;
        font-size: 0.8rem;
    }

    .floating-card-one {
        top: 25px;
        left: 25px;
    }

    .floating-card-two {
        top: 75px;
        right: 15px;
    }

    .floating-card-three {
        right: 45px;
        bottom: 30px;
    }


    /* =========================================================
       CONTENT
    ========================================================= */

    .about-introduction {
        max-width: 900px;
        gap: 20px;
    }

    .about-section-icon {
        width: 56px;
        min-width: 56px;
        height: 56px;
        border-radius: 18px;
    }

    .activity-types-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .activity-type {
        padding: 20px;
        align-items: flex-start;
        flex-direction: column;
        transition:
            transform 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease;
    }

    .activity-type:hover {
        border-color: #a9d5e5;
        box-shadow: 0 12px 25px rgba(14, 62, 97, 0.08);
        transform: translateY(-4px);
    }

    .activity-type-icon {
        width: 50px;
        height: 50px;
    }


    /* =========================================================
       ASSISTANT
    ========================================================= */

    .about-assistant-card {
        display: grid;
        padding: 42px;
        grid-template-columns: 0.95fr 1.05fr;
        gap: 50px;
    }

    .assistant-presentation {
        grid-column: 1;
        align-self: start;
    }

    .assistant-conversation {
        margin: 0;
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .assistant-criteria {
        grid-column: 1;
        grid-template-columns: 1fr 1fr;
    }

    .assistant-link {
        grid-column: 1;
    }

    .conversation-bubble {
        font-size: 0.94rem;
    }


    /* =========================================================
       STEPS AND FEATURES
    ========================================================= */

    .about-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    .about-step {
        min-height: 130px;
        padding: 20px;
        align-items: flex-start;
        flex-direction: column;
    }

    .family-features {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    .family-feature {
        min-height: 125px;
        padding: 20px;
        align-items: flex-start;
        flex-direction: column;
    }

    .family-feature > svg {
        width: 26px;
        height: 26px;
    }


    /* =========================================================
       MEMBERSHIP
    ========================================================= */

    .membership-card {
        display: grid;
        padding: 48px;
        grid-template-columns: 1fr 420px;
        align-items: center;
        gap: 90px;
    }

    .membership-content {
        max-width: 620px;
    }

    .membership-visual {
        min-height: 250px;
        margin-top: 0;
        padding: 34px;
        transform: rotate(2deg);
        transition: transform 0.3s ease;
    }

    .membership-visual:hover {
        transform: rotate(0deg) translateY(-4px);
    }

    .membership-visual strong {
        font-size: 3rem;
    }


    /* =========================================================
       TRUST AND MISSION
    ========================================================= */

    .trust-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 13px;
    }

    .trust-item {
        min-height: 65px;
        padding: 16px;
    }

    .mission-card {
        max-width: 100%;
        padding: 42px;
        gap: 24px;
    }

    .mission-icon {
        width: 62px;
        min-width: 62px;
        height: 62px;
        border-radius: 20px;
    }

    .mission-icon svg {
        width: 30px;
        height: 30px;
    }

    .mission-card > div:last-child {
        max-width: 850px;
    }


    /* =========================================================
       FINAL CTA
    ========================================================= */

    .about-final-card {
        padding: 62px 45px;
    }

    .about-final-card h2 {
        max-width: 700px;
        margin-right: auto;
        margin-left: auto;
        font-size: 2.35rem;
    }

    .about-final-card p {
        max-width: 620px;
        margin-right: auto;
        margin-left: auto;
    }

    .about-final-card .about-actions {
        justify-content: center;
    }

    .about-button-outline:hover {
        background: #ffffff;
        color: #0e3e61;
    }

}