/* DevelopersUnite */
  /* ROOT */

    :root {
        --navy-950: #06111f;
        --navy-900: #08182b;
        --navy-800: #0b1f3a;
        --navy-700: #10345a;
        --blue-600: #145da0;
        --blue-500: #1e88e5;
        --blue-400: #3ba7ff;
        --blue-300: #70c4ff;
        --white: #ffffff;
        --white-soft: #eaf4fc;
        --text-dark: #172b40;
        --text-medium: #526b82;
        --text-light: #9db4c8;
        --border-light: rgba(255, 255, 255, 0.12);
        --border-blue: rgba(59, 167, 255, 0.25);
        --shadow-dark: rgba(0, 0, 0, 0.35);
        --max-width: 1180px;

        /* member cards */
        --card-accent: #4ba3ff;
        --card-accent-soft: #65b8ff;
        --card-text: #e6f0ff;
        --card-muted: #8ba7c9;
        --card-deep: #0a1221;

        /* member card size (before desktop scaling) */
        --card-w: 330px;
        --card-h: 470px;
        --card-gap: 20px;

        /* desktop scale: 1 = full size. Raise it to make EVERYTHING bigger on desktop. */
        --card-z: 1;

        /* swipe row (phone + tablet) */
        --card-pop: 100px;     /* room above the cards for the portraits that stick out */
        --card-edge: 56px;     /* space at the left/right ends of the swipe row */
    }


    /* RESET */

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        min-height: 100vh;
        background: var(--white);
        color: var(--text-dark);
        font-family: Arial, Helvetica, sans-serif;
        overflow-x: hidden;
    }

    img {
        max-width: 100%;
    }

    a {
        color: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    :focus-visible {
        outline: 2px solid var(--blue-400);
        outline-offset: 3px;
    }
    /* BUTTONS */

    .primary-button,
    .secondary-button {
        min-width: 170px;
        padding: 15px 22px;
        display: inline-block;
        text-align: center;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition:
            transform 0.25s ease,
            background 0.25s ease,
            border-color 0.25s ease,
            color 0.25s ease;
    }

    .primary-button {
        border: 1px solid var(--blue-500);
        background: var(--blue-500);
        color: var(--white);
        box-shadow: 0 10px 25px rgba(30, 136, 229, 0.22);
    }

    .primary-button:hover {
        background: var(--blue-600);
        border-color: var(--blue-600);
        transform: translateY(-3px);
    }

    .secondary-button {
        border: 1px solid #cbdbe8;
        background: var(--white);
        color: var(--navy-800);
    }

    .secondary-button:hover {
        border-color: var(--blue-400);
        color: var(--blue-600);
        transform: translateY(-3px);
    }


    /* SECTIONS */

    .page-section {
        position: relative;
        padding: 120px 5% 130px;
        background: var(--white);
        overflow: hidden;
    }

    .page-section.tint {
        background: #f5f9fd;
    }

    .page-section.tint::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        top: -250px;
        right: -180px;
        border-radius: 50%;
        background: rgba(30, 136, 229, 0.07);
    }

    .section-intro {
        position: relative;
        width: min(720px, 100%);
        margin: 0 auto 70px;
        text-align: center;
    }

    .section-label {
        display: inline-block;
        margin-bottom: 18px;
        color: var(--blue-600);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 3px;
    }

    .section-intro h2 {
        margin-bottom: 25px;
        color: var(--navy-800);
        font-size: clamp(40px, 6vw, 64px);
        line-height: 0.98;
        letter-spacing: -3px;
    }

    .section-intro h2 span {
        display: block;
        color: var(--blue-500);
    }

    .section-intro p {
        max-width: 650px;
        margin: 0 auto;
        color: var(--text-medium);
        font-size: 16px;
        line-height: 1.9;
    }


    /* MEMBERS SECTION (dark)
    The member cards are styled in the MEMBER CARDS block below. */

    .members-section {
        position: relative;
        padding: 130px 5% 140px;
        background: #061526;
        color: var(--white);
        overflow: hidden;
        display: grid;
    }


    /* MEMBER CARDS (design from css1)
    Put all .member-card articles inside one <div class="members">.
    Desktop: centered rows, 5 cards max per row (10 cards = 2 rows).
    Tablet + phone: one row you swipe left and right. */

    .members {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;          /* cards wrap onto new rows */
        justify-content: center;
        align-items: center;
        gap: var(--card-gap);
        overflow: visible;
    }

    .member-card {
        position: relative;
        isolation: isolate;
        flex: 0 0 auto;           /* never let the row squeeze a card */
        width: min(var(--card-w), 100%);
        height: var(--card-h);
        margin: 15px 0;
        border: 1px solid #293c59;
        border-radius: 20px;
        background: linear-gradient(155deg, #192a43 0%, #101c30 55%, var(--card-deep) 100%);
        box-shadow:
            0 25px 60px #0009,
            inset 0 1px 0 #ffffff0a;
        transition:
            transform 0.35s ease,
            border-color 0.35s ease,
            box-shadow 0.35s ease;
    }

    .member-card:hover {
        transform: translateY(-6px);
        border-color: var(--card-accent);
        box-shadow:
            0 35px 75px #000b,
            0 0 25px #4ba3ff12;
    }

    /* background glow */

    .card-glow {
        position: absolute;
        width: 250px;
        height: 250px;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        background: #2787ff;
        filter: blur(100px);
        opacity: 0.13;
        z-index: 0;
        pointer-events: none;
    }

    /* vertical department text */

    .member-info {
        position: absolute;
        top: 42px;
        right: 22px;
        height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        z-index: 1;
    }

    .member-info h2 {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 36px;
        font-weight: 800;
        letter-spacing: 4px;
        white-space: nowrap;
        color: transparent;                 /* hollow letters */
        -webkit-text-stroke: 2px #5f87c2;   /* outline width and color */
        paint-order: stroke fill;
    }

    /* character image */
    .portrait,
    .developer-photo {
        position: absolute;
        top: -100px;
        bottom: 0;                 /* anchored to the card's bottom */
        left: 35%;
        transform: translateX(-50%);
        width: fit-content;
        height: fit-content;
        z-index: 2;
        pointer-events: none;

        /* both image layers share the same spot, centered, resting on the bottom */
        display: grid;
        align-items: end;
        justify-items: center;
    }

    .member-img {
        grid-area: 1 / 1;          /* every layer sits in the same cell */
        display: block;
        height: 560px;             /* same height for every PNG */
        width: auto;               /* width follows each PNG's proportions */
        max-width: none;
        object-fit: contain;
        object-position: 50% 100%;
        will-change: opacity;
    }

    .member-card:hover .member-img {
        animation: gentle-float 1s ease-in-out infinite;
    }

    @keyframes gentle-float {
        0%, 100% { translate: 0 0; }
        50%      { translate: 0 -4px; }
    }

    /* bottom information */

    .member-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 50px 24px 24px;   /* extra top padding = soft fade zone above the text */
        z-index: 3;
        border-radius: 0 0 20px 20px;
        background: linear-gradient(
            to bottom,
            transparent,
            #0a1221e8 38%,
            var(--card-deep) 100%
        );
    }

    .footer-label {
        display: block;
        margin-bottom: 8px;
        color: var(--card-accent-soft);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
    }

    .member-footer p,
    .member-footer h3 {
        color: var(--card-text);
        font-size: 22px;
        font-weight: 800;
        line-height: 1.3;
        letter-spacing: 0.4px;
        overflow-wrap: anywhere;
        text-shadow: 0 2px 8px #0005;
    }

    .role {
        display: block;
        margin-top: 8px;
        max-width: 100%;
        color: var(--card-muted);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.55;
        letter-spacing: 0.4px;
        overflow-wrap: anywhere;
    }

    .member-bio {
        display: block;
        margin-top: 12px;
        max-width: 100%;
        color: #a9bdd6;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.55;
        letter-spacing: 0.2px;
        overflow-wrap: anywhere;
    }

    /* tablet + phone: one row you swipe left and right
    The row runs edge to edge of the screen. The padding at the top and
    sides leaves room for the portraits that stick out of the cards. */

    @media (max-width: 1199px) {
        .members {
            width: 100vw;
            max-width: none;
            margin: -40px 0 0 calc(50% - 50vw);
            padding: var(--card-pop) var(--card-edge) 70px;

            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 24px;

            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: none;
            scroll-behavior: auto;
            scroll-padding-inline: var(--card-edge);
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
            scrollbar-width: thin;
            scrollbar-color: #2a4a72 transparent;
        }

        .members::-webkit-scrollbar {
            height: 6px;
        }

        .members::-webkit-scrollbar-thumb {
            background: #2a4a72;
            border-radius: 6px;
        }

        .members::-webkit-scrollbar-track {
            background: transparent;
        }

        .member-card {
            width: min(var(--card-w), 80vw);   /* the next card peeks in, so people see it scrolls */
            margin: 0;
            scroll-snap-align: center;
        }
    }

    /* phones */

    @media (max-width: 420px) {
        :root {
            --card-w: 320px;
            --card-h: 470px;
            --card-pop: 70px;
            --card-edge: 40px;
        }

        .members {
            gap: 16px;
        }

        .portrait,
        .developer-photo {
            top: -60px;
            left: 38%;
        }

        .member-img {
            height: 500px;
        }

        .member-info {
            right: 16px;
            height: 300px;
        }

        .member-info h2 {
            font-size: 30px;
        }

        .member-footer {
            padding: 48px 20px 22px;
        }

        .footer-label {
            font-size: 14px;
        }

        .member-footer p,
        .member-footer h3 {
            font-size: 21px;
        }

        .role {
            font-size: 14px;
        }

        .member-bio {
            font-size: 15px;
        }
    }

    /* desktop / laptop
    The whole card is scaled with zoom so the design stays identical.
    .members is capped so a row never holds more than 5 cards,
    and rows are centered (10 cards = 2 rows of 5). On smaller laptops
    fewer cards fit per row, which keeps the text a readable size. */

    @media (min-width: 1200px) {
        :root {
            --card-z: 0.58;
            --card-gap: 16px;
        }

        .members {
            max-width: calc(5 * var(--card-w) * var(--card-z) + 4 * var(--card-gap) + 80px);
            padding: 0 40px;      /* room for portraits that stick out of the card's left edge */
        }

        .member-card {
            zoom: var(--card-z);
        }
    }

    @media (min-width: 1600px) {
        :root {
            --card-z: 0.66;
        }
    }


    /* PURPOSE */

    .purpose-section {
        position: relative;
        padding: 130px 5%;
        background: #f5f9fd;
        overflow: hidden;
    }

    .purpose-section::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        top: -250px;
        right: -180px;
        border-radius: 50%;
        background: rgba(30, 136, 229, 0.07);
    }

    .purpose-inner {
        position: relative;
        width: min(var(--max-width), 100%);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 70px;
        align-items: center;
    }

    .purpose-text h2 {
        margin-bottom: 28px;
        color: var(--navy-800);
        font-size: clamp(40px, 5vw, 62px);
        line-height: 0.98;
        letter-spacing: -3px;
    }

    .purpose-text h2 span {
        display: block;
        color: var(--blue-500);
    }

    .purpose-text p {
        max-width: 520px;
        margin-bottom: 18px;
        color: var(--text-medium);
        font-size: 15px;
        line-height: 1.9;
    }

    .purpose-box {
        position: relative;
        padding: 46px 42px;
        color: var(--white);
        background: var(--navy-800);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 30px 70px rgba(11, 31, 58, 0.25);
    }

    .purpose-box::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        top: -120px;
        right: -100px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(59, 167, 255, 0.35), transparent 65%);
    }

    .quote-mark {
        position: relative;
        height: 56px;
        color: var(--blue-400);
        font-size: 90px;
        font-weight: 800;
        line-height: 1;
    }

    .purpose-box blockquote {
        position: relative;
        font-size: 26px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: -1px;
    }

    .quote-line {
        width: 55px;
        height: 3px;
        margin: 35px auto 20px;
        background: var(--blue-400);
        border-radius: 5px;
    }

    .purpose-box .quote-line {
        margin: 28px 0 16px;
    }

    .quote-author {
        color: #88a7c0;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 3px;
    }

    .purpose-box .quote-author {
        position: relative;
        display: block;
    }



    /* RESPONSIVE */

    @media (max-width: 950px) {

        .purpose-inner {
            grid-template-columns: 1fr;
            gap: 50px;
        }

 
    }

    @media (max-width: 650px) {


        .page-section,
        .members-section,
        .purpose-section,
        .contact-section {
            padding: 90px 20px 100px;
        }

        .section-intro {
            margin-bottom: 55px;
        }

        .section-intro h2 {
            font-size: 40px;
            letter-spacing: -2px;
        }

        .section-intro p {
            font-size: 14px;
        }

        .purpose-box {
            padding: 36px 28px;
        }

        .purpose-box blockquote {
            font-size: 22px;
        }

        .contact-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .primary-button,
        .secondary-button {
            width: 100%;
        }



    }

    @media (max-width: 560px) {

        .brand-name {
            display: none;
        }

    }

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

        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation: none !important;
            transition: none !important;
        }

    }


/* =========================================
   MOBILE RESPONSIVENESS — COSMODESIGN.CSS
   (the developer card rules now live in the
   MEMBER CARDS block above)
========================================= */

/* Prevent horizontal scrolling */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

img {
    max-width: 100%;
}

/* Keep sections within the screen */
.members-section,
.purpose-section,
#developers {
    width: 100%;
    max-width: 100%;
}

/* Member images must keep their own size inside the cards
   (the global img rule above would otherwise shrink them) */
.member-card .member-img {
    max-width: none;
}


/* Tablet layout */
@media (max-width: 700px) {


    .page-section,
    .members-section,
    .purpose-section {
        padding: 75px 20px;
    }

    .section-intro {
        margin-bottom: 40px;
    }

    .section-intro h2,
    .purpose-text h2 {
        font-size: clamp(32px, 8vw, 44px);
        line-height: 1.08;
        letter-spacing: -1.5px;
        overflow-wrap: anywhere;
    }

    .section-intro p,
    .purpose-text p {
        font-size: 14px;
        line-height: 1.8;
    }

    .purpose-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .purpose-box {
        min-width: 0;
        padding: 30px 22px;
        border-radius: 18px;
    }

    .purpose-box blockquote {
        font-size: clamp(19px, 5vw, 24px);
        overflow-wrap: anywhere;
    }

    .primary-button,
    .secondary-button {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
    }

}

/* Narrow phones */
@media (max-width: 420px) {
 


    .page-section,
    .members-section,
    .purpose-section {
        padding: 60px 16px;
    }

    .section-intro h2,
    .purpose-text h2 {
        font-size: 34px;
    }

    .purpose-box {
        padding: 26px 18px;
    }


}

/* Improve touch interaction without changing the design */
@media (hover: none) {
    .member-card:hover {
        transform: none;
    }

    .member-card:hover .member-img {
        animation: none;
    }   
}
/* =========================================
   VOICES — one simple quote (no images)
   Add this to the END of CosmoDesign.css
   Uses the variables already in your :root.
========================================= */

.voices-section {
    position: relative;
    padding: 120px 5% 130px;
    background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 100%);
    color: var(--white);
    overflow: hidden;
}

/* soft glow in the corner, same idea as your other sections */
.voices-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -260px;
    right: -180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 167, 255, 0.28), transparent 65%);
    pointer-events: none;
}

.voices-intro {
    position: relative;
    width: min(720px, 100%);
    margin: 0 auto 80px;
    text-align: center;
}

.voices-intro .section-label {
    color: var(--blue-300);
    margin-bottom: 0;
}

/* ---------- the quote ---------- */

.voices-list {
    position: relative;
    width: min(900px, 100%);
    margin: 0 auto;
}

.voice {
    min-width: 0;
    text-align: center;
}

.voice-mark {
    display: block;
    width: 56px;
    height: auto;
    margin: 0 auto 28px;
    color: var(--blue-400);
}

.voice blockquote {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -1px;
    overflow-wrap: anywhere;
}

/* highlighted word */
.voice blockquote em {
    font-style: normal;
    color: var(--blue-300);
}

.voice-line {
    width: 55px;
    height: 3px;
    margin: 30px auto 18px;
    background: var(--blue-400);
    border-radius: 5px;
}

.voice-name {
    display: block;
    color: var(--white);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.voice-role {
    display: block;
    margin-top: 6px;
    color: #88a7c0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* ---------- tablet ---------- */

@media (max-width: 900px) {
    .voice blockquote {
        font-size: clamp(26px, 4.4vw, 38px);
    }
}

/* ---------- phone: one quote per row ---------- */

@media (max-width: 700px) {
    .voices-section {
        padding: 90px 20px 100px;
    }

    .voices-intro {
        margin-bottom: 60px;
    }

    .voice blockquote {
        font-size: clamp(24px, 7vw, 32px);
        letter-spacing: -0.5px;
    }

    .voice-name {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .voices-section {
        padding: 70px 16px 80px;
    }
}