/* =============================================
   CARTANTS - mentorship.css
   Mentorship / Coaching page
   ============================================= */

/* ════ HERO ══════════════════════════════════════
   Figma: padding 200px 100px, gap 48px, h 1036px
   bg: gradient pastel overlaid on photo
   ═══════════════════════════════════════════ */
.ms-hero {
    position: relative;
    width: 100%;
    min-height: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 160px 100px;
    gap: 48px;
    box-sizing: border-box;
    overflow: hidden;

    /* Figma: photo + rgba overlay */
    background:
        linear-gradient(135deg,
            rgba(174,215,235,0.55) 0%,
            rgba(197,152,227,0.45) 35%,
            rgba(146,173,230,0.55) 65%,
            rgba(136,141,232,0.50) 100%
        );
}

/* Animated blobs for depth */
.ms-hero::before {
    content: '';
    position: absolute;
    width: 800px; height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(118,97,180,0.20) 0%, transparent 70%);
    top: -200px; left: -200px;
    pointer-events: none;
    animation: msBlob 12s ease-in-out infinite;
}
.ms-hero::after {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,35,172,0.15) 0%, transparent 70%);
    bottom: -100px; right: -100px;
    pointer-events: none;
    animation: msBlob 12s ease-in-out infinite reverse;
}
@keyframes msBlob {
    0%,100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-30px) scale(1.08); }
}

/* Content */
.ms-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    max-width: 1240px;
    animation: msFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}
@keyframes msFadeUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Professionals Pill ── */
/* Figma: 610x48 frosted glass radius 32 */
.ms-hero__pill {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 24px;
    gap: 10px;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 32px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.ms-hero__pill-img {
    height: 32px; width: auto;
    display: block; object-fit: contain;
    flex-shrink: 0;
}
/* Figma: 20px → 14px */
.ms-hero__pill-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #4A559A;
    white-space: nowrap;
}

/* ── H1 — Figma: 61px → 46px ── */
.ms-hero__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 46px;
    line-height: 56px;
    text-align: center;
    color: #3A4278;
    margin: 0;
    max-width: 1240px;
}

/* ── Description — Figma: 25px → 17px ── */
.ms-hero__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 26px;
    text-align: center;
    color: #4A559A;
    margin: 0;
    max-width: 760px;
}

/* ── Search Box ── */
/* Figma: 1026x72 frosted radius 64 */
.ms-hero__search-wrap {
    width: 100%;
    max-width: 900px;
}

.ms-search-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 24px;
    gap: 16px;
    width: 100%;
    height: 64px;
    background: rgba(254,254,254,0.35);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 64px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-sizing: border-box;
}

/* Figma: 20px → 15px */
.ms-search-box__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #3A4278;
    min-width: 0;
}
.ms-search-box__input::placeholder { color: rgba(74,85,154,0.6); }

/* Search button */
.ms-search-box__btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 4px 4px 20px;
    gap: 8px;
    height: 44px;
    min-width: 130px;
    background: linear-gradient(107.49deg, #7661B4 7.25%, #0D23AC 95.34%);
    border-radius: 24px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.ms-search-box__btn:hover { transform: scale(1.02); }

.ms-search-box__btn-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    white-space: nowrap;
}

.ms-search-box__btn-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ms-search-box__btn-icon img {
    width: 18px; height: 18px;
    object-fit: contain; display: block;
}

/* ── Trusted By ── */
/* Figma: gap 16px, text then auto-scroll logos */
.ms-trusted {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    overflow: hidden;
}

/* Figma: 25px → 12px */
.ms-trusted__label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #2D335D;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.8;
}

.ms-trusted__logos-wrap {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.ms-trusted__logos {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 72px;
    padding: 16px;
    width: max-content;
    animation: msLogoScroll 22s linear infinite;
}
.ms-trusted__logos:hover { animation-play-state: paused; }

@keyframes msLogoScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ms-trusted__logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.ms-trusted__logo-item:hover { opacity: 1; }
.ms-trusted__logo-item img {
    height: 32px; width: auto;
    object-fit: contain; display: block;
    filter: grayscale(30%);
}

/* ── Stats Pill ── */
/* Figma: 1042x64, frosted glass radius 24, gap 48px */
.ms-stats-pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 14px 32px;
    gap: 40px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 24px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    max-width: 900px;
    width: 100%;
    box-sizing: border-box;
}

.ms-stats-pill__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.ms-stats-pill__item img {
    width: 24px; height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

/* Figma: 25px → 16px semibold white */
.ms-stats-pill__num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
    white-space: nowrap;
}

/* Figma: 25px → 14px regular white */
.ms-stats-pill__label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
}

.ms-stats-pill__divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.25);
    flex-shrink: 0;
}

/* ════ RESPONSIVE ═════════════════════════════ */
@media(max-width:1280px) {
    .ms-hero { padding: 140px 60px; }
}
@media(max-width:1024px) {
    .ms-hero       { padding: 120px 40px; min-height: auto; }
    .ms-hero__title { font-size: 36px; line-height: 46px; }
    .ms-hero__desc  { font-size: 15px; }
}
@media(max-width:768px) {
    .ms-hero        { padding: 100px 24px 60px; gap: 28px; }
    .ms-hero__title { font-size: 28px; line-height: 36px; }
    .ms-hero__desc  { font-size: 14px; }
    .ms-hero__desc br { display: none; }
    .ms-hero__pill  { flex-wrap: wrap; justify-content: center; }
    .ms-hero__pill-text { font-size: 12px; white-space: normal; }
    .ms-search-box  { height: 56px; }
    .ms-stats-pill  { flex-wrap: wrap; gap: 16px; padding: 14px 20px; }
    .ms-stats-pill__divider { display: none; }
    .ms-stats-pill__item { justify-content: flex-start; }
}
@media(max-width:480px) {
    .ms-hero__title { font-size: 24px; line-height: 32px; }
    .ms-search-box__btn-text { display: none; }
    .ms-search-box__btn { padding: 4px; min-width: auto; }
}


/* ════ SECTION 2 — FEATURED MENTORS ════════════
   Figma: padding 128px 100px, gap 28px
   ═══════════════════════════════════════════ */
.ms-featured {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 100px 100px;
    gap: 40px;
    width: 100%;
    background: #F3F4FE;
    box-sizing: border-box;
}

/* Header */
.ms-featured__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 1240px;
    text-align: center;
}
/* Figma: 49px → 28px */
.ms-featured__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 28px;
    line-height: 36px; color: #2D335D; margin: 0;
}
/* Figma: 25px → 15px */
.ms-featured__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; font-size: 15px;
    line-height: 22px; color: #3D4470; margin: 0;
    max-width: 760px;
}

/* ── Mentor Grid — 3×2 ── */
.ms-mentor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1240px;
}

/* ── Mentor Card — Figma: 397x588 ── */
.ms-mentor-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 0;
    background: rgba(254,254,254,0.25);
    border: 1px solid #F3F4FE;
    box-shadow: inset 0px 0px 5px rgba(45,51,93,0.15);
    border-radius: 28px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ms-mentor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(13,35,172,0.12), inset 0px 0px 5px rgba(45,51,93,0.15);
}

/* Photo area — dark gradient over image */
/* Figma: gradient(transparent→black) over photo, radius 32 */
.ms-mentor-card__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 381 / 572;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
    /* Fallback gradient bg */
    background: linear-gradient(180deg, rgba(197,197,197,0) 0%, #000000 100%), #555;
    background-blend-mode: multiply, normal;
}

/* Top Rated badge — absolute top right */
.ms-mentor-card__badge {
    position: absolute;
    top: 12px; right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.004);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2;
}
.ms-mentor-card__badge img {
    width: 14px; height: 14px;
    object-fit: contain; display: block;
}
.ms-mentor-card__badge span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; font-size: 12px;
    line-height: 18px; color: #ffffff;
    letter-spacing: -0.01em;
}

/* Info block — overlaid on bottom of photo */
.ms-mentor-card__info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Name + verified */
.ms-mentor-card__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Figma: 31px → 18px */
.ms-mentor-card__name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; font-size: 18px;
    line-height: 24px; color: #EEEFF6;
}
.ms-mentor-card__name-row img {
    width: 20px; height: 20px;
    object-fit: contain; flex-shrink: 0;
}

/* Category tags */
.ms-mentor-card__tags {
    display: flex;
    flex-direction: row;
    gap: 6px;
    flex-wrap: wrap;
}
.ms-mentor-card__tag {
    padding: 4px 10px;
    background: rgba(0,0,0,0.004);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 32px;
    backdrop-filter: blur(4px);
    font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 500;
    color: rgba(255,255,255,0.9);
}

/* Description */
/* Figma: 16px → 12px */
.ms-mentor-card__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; font-size: 12px;
    line-height: 16px; color: #EEEFF6;
    margin: 0;
}

/* Footer row: experience + button */
/* Figma: 349x56 frosted glass radius 32 */
.ms-mentor-card__footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 14px;
    gap: 16px;
    width: 100%;
    background: rgba(254,254,254,0.25);
    border-radius: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-sizing: border-box;
}

.ms-mentor-card__exp {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
}
.ms-mentor-card__exp-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 400;
    color: rgba(255,255,255,0.7);
}
.ms-mentor-card__exp-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px; font-weight: 600;
    color: #ffffff;
}

/* View Profile button */
.ms-mentor-card__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    flex: 1;
    height: 36px;
    background: linear-gradient(107.49deg, #7661B4 7.25%, #0D23AC 95.34%);
    border-radius: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; font-size: 12px;
    color: #ffffff !important; text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.ms-mentor-card__btn:hover { opacity: 0.9; color: #fff !important; }

/* See All button */
.ms-see-all-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 14px 36px;
    height: 52px;
    background: transparent;
    border: 1.5px solid #7661B4;
    border-radius: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; font-size: 15px;
    background-image: linear-gradient(107.49deg, #7661B4 7.25%, #0D23AC 95.34%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.ms-see-all-btn:hover {
    border-color: #0D23AC;
    transform: translateY(-1px);
}

/* ── Responsive ── */
@media(max-width:1280px){
    .ms-featured { padding: 80px 60px; }
}
@media(max-width:1024px){
    .ms-featured       { padding: 60px 40px; }
    .ms-mentor-grid    { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:768px){
    .ms-featured       { padding: 48px 24px; }
    .ms-mentor-grid    { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .ms-featured__title{ font-size: 24px; }
}


/* ════ SECTION 3 — CATEGORIES ═══════════════════
   Figma: padding 128px 100px, gap 24px
   bg: conic-gradient purple/white
   ═══════════════════════════════════════════ */
.ms-categories {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 100px;
    gap: 32px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;  /* section gap handled by featured padding-bottom */
    background:
        conic-gradient(from 269.94deg at 72.78% 32%,
            #FFFFFF 0deg,
            #6070D7 122.88deg,
            #C598E3 240.58deg,
            #888DE8 360deg
        ),
        #EEEFF6;
    background-blend-mode: overlay, normal;
}

/* Header */
.ms-categories__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 1240px;
    text-align: center;
}
.ms-categories__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 28px;
    line-height: 36px; color: #2D335D; margin: 0;
}
.ms-categories__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; font-size: 15px;
    line-height: 22px; color: #3D4470; margin: 0;
    max-width: 760px;
}

/* Empty state */
.ms-categories__empty {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px; color: rgba(255,255,255,0.7);
    text-align: center; padding: 40px;
    background: rgba(118,97,180,0.3);
    border-radius: 16px; width: 100%;
    max-width: 600px;
}

/* Grid */
.ms-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1240px;
}

/* Single category card — Figma: 397x208 */
.ms-cat-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 24px;
    gap: 16px;
    height: 180px;
    /* Figma: radial-gradient purple → navy */
    background: radial-gradient(124.41% 513.32% at -20.35% 183.17%,
        rgba(118,97,180,0.75) 0%,
        rgba(23,34,98,0.75) 100%
    );
    border-radius: 20px;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
}
.ms-cat-card:hover {
    transform: translateY(-3px);
    opacity: 0.92;
}

/* Text side */
.ms-cat-card__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
}
.ms-cat-card__name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; font-size: 20px;
    line-height: 26px; color: #ffffff;
    margin: 0;
}
.ms-cat-card__count {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; font-size: 13px;
    line-height: 18px; color: rgba(255,255,255,0.75);
}

/* Icon */
.ms-cat-card__icon {
    width: 100px; height: 100px;
    object-fit: contain; display: block;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.2));
}

/* ── Responsive ── */
@media(max-width:1280px){ .ms-categories { padding: 80px 60px; } }
@media(max-width:1024px){
    .ms-categories { padding: 64px 40px; }
    .ms-cat-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:768px){
    .ms-categories { padding: 48px 24px; }
    .ms-cat-grid   { grid-template-columns: 1fr; max-width: 400px; }
    .ms-cat-card   { height: 140px; }
    .ms-cat-card__icon { width: 80px; height: 80px; }
}

/* Empty state */
.ms-mentors-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column;
    align-items: center; gap: 12px;
    padding: 60px 40px;
    background: rgba(255,255,255,0.5);
    border: 1px solid #EEEFF6;
    border-radius: 24px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px; color: #3A4278;
}


/* ════ SECTION 4 — FEATURES / HOW IT WORKS ══════
   Figma: padding 120px 112px, gap 24px, bg white
   Alternating text-left / text-right rows
   ═══════════════════════════════════════════ */
.ms-features {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 112px;
    gap: 0;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
}

/* Header */
.ms-features__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 1217px;
    text-align: center;
    margin-bottom: 60px;
}
/* Figma: 49px → 28px */
.ms-features__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 28px;
    line-height: 36px; color: #2D335D; margin: 0;
}
/* Figma: 25px → 15px */
.ms-features__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; font-size: 15px;
    line-height: 22px; color: #2D335D; margin: 0;
    max-width: 760px;
}

/* ── Feature Row — Figma: 1217x448 ── */
.ms-feature-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 40px 0;
    gap: 64px;
    width: 100%;
    max-width: 1217px;
    border-bottom: 1px solid rgba(201,205,228,0.3);
    animation: msFadeUp 0.6s ease both;
}
.ms-feature-row:last-child { border-bottom: none; }

/* Illustration side */
.ms-feature-row__img {
    flex: 0 0 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ms-feature-row__img img {
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 8px 24px rgba(13,35,172,0.08));
}

/* Text side */
.ms-feature-row__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Icon + title row */
.ms-feature-row__icon-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ms-feature-row__icon {
    width: 28px; height: 28px;
    object-fit: contain; flex-shrink: 0;
    opacity: 0.85;
}
/* Figma: 31px → 20px */
.ms-feature-row__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 20px;
    line-height: 28px; color: #2D335D; margin: 0;
}

/* Description — Figma: 16px → 13px */
.ms-feature-row__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; font-size: 13px;
    line-height: 20px; color: #3D4470; margin: 0;
    max-width: 480px;
}

/* Payment image extra */
.ms-feature-row__extra {
    width: 100%;
    max-width: 360px;
    height: auto;
    object-fit: contain;
    display: block;
    margin-top: 4px;
}

/* ── Responsive ── */
@media(max-width:1280px){
    .ms-features { padding: 80px 60px; }
    .ms-feature-row__img { flex: 0 0 340px; }
}
@media(max-width:1024px){
    .ms-features { padding: 60px 40px; }
    .ms-feature-row { gap: 40px; }
    .ms-feature-row__img { flex: 0 0 280px; }
}
@media(max-width:768px){
    .ms-features { padding: 48px 24px; }
    .ms-feature-row,
    .ms-feature-row--left,
    .ms-feature-row--right {
        flex-direction: column !important;
        gap: 24px;
        padding: 32px 0;
    }
    .ms-feature-row__img {
        flex: none; width: 100%;
        order: -1 !important;  /* image always on top mobile */
    }
    .ms-feature-row__img img { max-height: 240px; }
    .ms-feature-row__desc { max-width: 100%; }
    .ms-features__title { font-size: 22px; }
}


/* ════ SECTION 5 — 3 STEPS ══════════════════════
   Figma: padding 128px 100px, gap 24px, h 635px
   bg: pastel gradient 50% opacity
   ═══════════════════════════════════════════ */
.ms-steps {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 100px;
    gap: 48px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;

    /* Space above — separate visually from features section */
    border-top: 1px solid rgba(201,205,228,0.2);

    background: linear-gradient(107.49deg,
        rgba(174,215,235,0.5)  7.25%,
        rgba(197,152,227,0.5) 51.3%,
        rgba(146,173,230,0.5) 73.32%,
        rgba(136,141,232,0.5) 95.34%
    );
}

/* Header */
.ms-steps__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 1240px;
    text-align: center;
}
/* Figma: 49px → 28px */
.ms-steps__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    color: #2D335D;
    margin: 0;
}
/* Figma: 25px → 15px */
.ms-steps__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    color: #3A4278;
    margin: 0;
}

/* Cards + arrows row */
.ms-steps__row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 1240px;
}

/* Arrow */
.ms-steps__arrow {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.6;
    filter: hue-rotate(200deg) saturate(1.5);
}

/* Single step card — Figma: 360x241 bg rgba(45,51,93,0.4) radius 16 */
.ms-steps__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 22px;
    gap: 14px;
    flex: 1;
    min-height: 200px;
    background: rgba(45,51,93,0.4);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s ease, background 0.2s ease;
}
.ms-steps__card:hover {
    transform: translateY(-3px);
    background: rgba(45,51,93,0.55);
}

/* Number badge — Figma: 56x56 gradient radius 32 */
.ms-steps__num-wrap {
    width: 44px;
    height: 44px;
    border-radius: 24px;
    background: linear-gradient(107.49deg, #7661B4 7.25%, #0D23AC 95.34%);
    box-shadow:
        0px 4px 4px rgba(0,0,0,0.19),
        inset 0px 4px 10px rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Figma: 31px → 16px */
.ms-steps__num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
    text-align: center;
}

/* Card title — Figma: 25px → 15px */
.ms-steps__card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 22px;
    color: #ffffff;
    margin: 0;
    width: 100%;
}

/* Card desc — Figma: 20px → 12px */
.ms-steps__card-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: rgba(255,255,255,0.85);
    margin: 0;
}

/* ── Responsive ── */
@media(max-width:1280px){ .ms-steps { padding: 72px 60px; } }
@media(max-width:1024px){ .ms-steps { padding: 60px 40px; } }
@media(max-width:768px){
    .ms-steps { padding: 48px 24px; gap: 32px; }
    .ms-steps__row {
        flex-direction: column;
        gap: 16px;
    }
    .ms-steps__arrow {
        transform: rotate(90deg);
        width: 22px; height: 22px;
    }
    .ms-steps__card { width: 100%; min-height: auto; }
    .ms-steps__title { font-size: 22px; }
}


/* ════ SECTION 6 — TESTIMONIALS ════════════════
   Figma: padding 128px 100px, gap 32px, bg white
   Professional scroller with arrows + dots
   ═══════════════════════════════════════════ */
.ms-testi {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 100px;
    gap: 40px;
    width: 100%;
    background: #F3F4FE;
    box-sizing: border-box;
}

/* Header */
.ms-testi__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 1241px;
    text-align: center;
}
/* Figma: 49px → 28px */
.ms-testi__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 28px;
    line-height: 36px; color: #2D335D; margin: 0;
}
/* Figma: 25px → 15px */
.ms-testi__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; font-size: 15px;
    line-height: 22px; color: #3D4470; margin: 0;
    max-width: 860px;
}

/* ── Scroller wrapper ── */
.ms-testi__scroller-wrap {
    position: relative;
    width: 100%;
    max-width: 1241px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Overflow container */
.ms-testi__track-outer {
    flex: 1;
    overflow: hidden;
    /* Fade edges */
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

/* Sliding track */
.ms-testi__track {
    display: flex;
    flex-direction: row;
    gap: 24px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    padding: 8px 2px;
}

/* ── Single card — Figma: 378x290 ── */
.ms-tcard {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    min-width: calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
    background: rgba(0,0,0,0.004);
    border: 1px solid #EEEFF6;
    border-radius: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: #ffffff;
    box-shadow: 0 2px 16px rgba(13,35,172,0.05);
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ms-tcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(13,35,172,0.10);
}

/* Top row: avatar + body */
.ms-tcard__top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

/* Avatar — Figma: 48x48 radius 100 */
.ms-tcard__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #B2ADD2;
}
.ms-tcard__avatar img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
/* Placeholder with initial */
.ms-tcard__avatar-ph {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7661B4, #0D23AC);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 18px;
    color: #ffffff;
}

/* Body */
.ms-tcard__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* Figma: 20px → 13px */
.ms-tcard__feedback {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; font-size: 13px;
    line-height: 20px; color: #141414;
    margin: 0;
}

/* Meta: name + role + stars */
.ms-tcard__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ms-tcard__name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; font-size: 12px;
    line-height: 16px; color: #7661B4; display: block;
}
.ms-tcard__role {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; font-size: 11px;
    line-height: 14px; color: #8A92C5; display: block;
}
.ms-tcard__stars {
    display: flex; gap: 3px; margin-top: 4px;
}

/* ── Arrow buttons ── */
.ms-testi__arrow {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #EEEFF6;
    box-shadow: 0 4px 12px rgba(13,35,172,0.09);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: background 0.15s, box-shadow 0.15s, opacity 0.2s;
    z-index: 2;
}
.ms-testi__arrow:hover {
    background: #F8F9FF;
    box-shadow: 0 6px 18px rgba(13,35,172,0.14);
}

/* ── Dot indicators ── */
.ms-testi__dots {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}
.ms-testi-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #C9CDE4;
    border: none; cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}
.ms-testi-dot.is-active {
    background: linear-gradient(107.49deg, #7661B4 7.25%, #0D23AC 95.34%);
    width: 22px; border-radius: 4px;
}

/* ── Responsive ── */
@media(max-width:1280px){ .ms-testi { padding: 72px 60px; } }
@media(max-width:1024px){
    .ms-testi { padding: 60px 40px; }
    .ms-tcard { min-width: calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media(max-width:768px){
    .ms-testi { padding: 48px 24px; }
    .ms-tcard { min-width: calc(100% - 4px); max-width: calc(100% - 4px); }
    .ms-testi__arrow { width: 36px; height: 36px; }
}


/* ════ SECTION 7 — FAQ ══════════════════════════
   Figma: padding 128px 100px, gap 32px
   bg: white, 2-column grid
   ═══════════════════════════════════════════ */
.ms-faq {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 100px;
    gap: 40px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
}

/* Header */
.ms-faq__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 1241px;
    text-align: center;
}
.ms-faq__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 28px;
    line-height: 36px; color: #2D335D; margin: 0;
}
.ms-faq__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; font-size: 15px;
    line-height: 22px; color: #3D4470; margin: 0;
}

/* 2-column grid */
.ms-faq__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    max-width: 1241px;
    align-items: start;  /* each card only as tall as its own content */
}

/* Single FAQ item */
.ms-faq__item {
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.06));
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #EEEFF6;
    align-self: start;   /* never stretch to match sibling height */
}

/* Question row */
.ms-faq__question {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.ms-faq__question:hover { background: rgba(118,97,180,0.03); }

/* Figma: 20px Poppins → 13px Montserrat */
.ms-faq__q-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #2D335D;
    flex: 1;
}

/* Plus icon */
.ms-faq__icon {
    width: 20px; height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    opacity: 0.7;
}

/* Answer — collapsed by default */
.ms-faq__answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease;
}
.ms-faq__item.is-open .ms-faq__answer {
    max-height: 600px;
    opacity: 1;
}
.ms-faq__answer p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #6B7280;
    margin: 0;
    padding: 12px 20px 16px;
}

/* Open state */
.ms-faq__item.is-open {
    border-color: rgba(118,97,180,0.3);
}
.ms-faq__item.is-open .ms-faq__question {
    background: rgba(118,97,180,0.03);
}
.ms-faq__item.is-open .ms-faq__q-text {
    background: linear-gradient(107.49deg, #7661B4 7.25%, #0D23AC 95.34%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Responsive ── */
@media(max-width:1280px){ .ms-faq { padding: 72px 60px; } }
@media(max-width:1024px){ .ms-faq { padding: 60px 40px; } }
@media(max-width:768px){
    .ms-faq        { padding: 48px 24px; }
    .ms-faq__grid  { grid-template-columns: 1fr; }
    .ms-faq__title { font-size: 22px; }
}


/* ════ SECTION 8 — OPEN TO TEACH CTA ═══════════
   Figma: padding 128px 100px, gap 24px
   bg: radial-gradient #7661B4 → #172262
   ═══════════════════════════════════════════ */
.ms-cta-teach {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 100px;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
    background: radial-gradient(124.41% 513.32% at -20.35% 183.17%,
        #7661B4 0%, #172262 100%
    );
    text-align: center;
}

/* Figma: 49px → 28px */
.ms-cta-teach__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    color: #EEEFF6;
    margin: 0;
}

/* "Teach?" accent — pink/lavender from Gradd2 */
.ms-cta-teach__accent {
    background: linear-gradient(107.49deg, #C598E3 7.25%, #AED7EB 95.34%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Description — Figma: 25px → 15px */
.ms-cta-teach__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: rgba(238,239,246,0.85);
    margin: 0;
    max-width: 760px;
}

/* Buttons row */
.ms-cta-teach__btns {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 1240px;
    justify-content: center;
}

/* Base button */
.ms-cta-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 24px;
    height: 52px;
    flex: 1;
    max-width: 560px;
    border-radius: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s;
    box-sizing: border-box;
}
.ms-cta-btn:hover { transform: translateY(-1px); opacity: 0.92; }

/* Primary — Figma: Gradd2 pastel gradient */
.ms-cta-btn--primary {
    background: linear-gradient(107.49deg,
        #AED7EB 7.25%,
        #C598E3 51.3%,
        #92ADE6 73.32%,
        #888DE8 95.34%
    );
    color: #2D335D !important;
    font-weight: 700;
}

/* Outline — Figma: border #C9CDE4 */
.ms-cta-btn--outline {
    background: transparent;
    border: 1px solid #C9CDE4;
    color: #EEEFF6 !important;
}
.ms-cta-btn--outline:hover {
    background: rgba(255,255,255,0.08);
}

/* ── Responsive ── */
@media(max-width:1280px){ .ms-cta-teach { padding: 72px 60px; } }
@media(max-width:1024px){ .ms-cta-teach { padding: 60px 40px; } }
@media(max-width:768px){
    .ms-cta-teach { padding: 56px 24px; gap: 20px; }
    .ms-cta-teach__btns { flex-direction: column; gap: 12px; }
    .ms-cta-btn { max-width: 100%; width: 100%; }
    .ms-cta-teach__title { font-size: 24px; }
}


/* ════ SECTION 9 — PLATFORM STATS ══════════════
   Figma: padding 128px 100px, gap 32px
   bg: linear-gradient #B986FB → #9AA8FD → #E7D5FF
   ═══════════════════════════════════════════ */
.ms-platform-stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 100px;
    gap: 40px;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(258.86deg, #B986FB 0%, #9AA8FD 44.08%, #E7D5FF 100%);
}

/* Figma: 49px → 26px, white, weight 400 */
.ms-platform-stats__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 34px;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
    width: 100%;
    max-width: 1240px;
}

/* 4-column grid */
.ms-platform-stats__grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 1240px;
}

/* Single stat card — Figma: 373x208 rgba(255,255,255,0.35) radius 24 */
.ms-stat-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 28px 24px;
    gap: 8px;
    flex: 1;
    min-height: 180px;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: center;
    transition: transform 0.2s ease, background 0.2s ease;
}
.ms-stat-card:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.45);
}

/* Label — Figma: 16px → 12px, #515DA9 */
.ms-stat-card__label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #515DA9;
    display: block;
}

/* Number — Figma: 61px → 40px, #371279 bold */
.ms-stat-card__number {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    text-align: center;
    color: #371279;
    display: block;
}

/* Description — Figma: 25px → 14px, #50535D */
.ms-stat-card__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #50535D;
    display: block;
}

/* Contact override for mentorship page background */
.ms-contact {
    background: radial-gradient(168.45% 168.45% at 51.89% 3.51%,
        rgba(254,254,254,0.59) 12.98%,
        rgba(81,89,173,0.59) 100%
    ) !important;
}

/* ── Responsive ── */
@media(max-width:1280px){ .ms-platform-stats { padding: 72px 60px; } }
@media(max-width:1024px){
    .ms-platform-stats { padding: 60px 40px; }
    .ms-platform-stats__grid { flex-wrap: wrap; gap: 16px; }
    .ms-stat-card { min-width: calc(50% - 8px); flex: none; }
}
@media(max-width:768px){
    .ms-platform-stats { padding: 48px 24px; }
    .ms-stat-card { min-width: calc(50% - 8px); min-height: 140px; }
    .ms-stat-card__number { font-size: 32px; }
    .ms-platform-stats__title { font-size: 22px; }
}
@media(max-width:480px){
    .ms-stat-card { min-width: 100%; }
}


/* ── Contact override — match screenshot style ── */
.ms-contact {
    background: linear-gradient(135deg,
        rgba(174,215,235,0.25) 0%,
        rgba(197,152,227,0.20) 40%,
        rgba(136,141,232,0.25) 100%
    ) !important;
    padding: 56px 100px !important;
    min-height: auto !important;
}
.ms-contact .cp-contact__title {
    color: #3A4278 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 600 !important;
}
.ms-contact .cp-contact__input {
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(220,220,226,0.4) !important;
}
.ms-contact .cp-contact__btn {
    background: linear-gradient(107.49deg, #7661B4 7.25%, #0D23AC 95.34%) !important;
}
.ms-contact .cp-contact__logged-in {
    background: rgba(255,255,255,0.6) !important;
    color: #3A4278 !important;
}


/* ════ FAQ — answer states ═══════════════════════ */



/* ════ SECTION 10 — CONTACT ═════════════════════
   Figma: padding 128px 100px, gap 573px
   bg: radial-gradient frosted glass
   ═══════════════════════════════════════════ */
.ms-contact-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 64px 100px;
    gap: 60px;
    width: 100%;
    min-height: 280px;
    box-sizing: border-box;
    background: radial-gradient(168.45% 168.45% at 51.89% 3.51%,
        rgba(254,254,254,0.59) 12.98%,
        rgba(81,89,173,0.59) 100%
    );
}

/* Left text */
.ms-contact-section__text { flex: 1; }

/* Figma: 31px → professional 20px */
.ms-contact-section__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #3A4278;
    margin: 0;
}

/* Right form wrap — Figma: 577px */
.ms-contact-section__form-wrap {
    width: 100%;
    max-width: 540px;
    flex-shrink: 0;
}
.ms-contact-section__form-wrap form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Success */
.ms-contact-section__success {
    padding: 10px 14px;
    background: rgba(22,163,74,0.08);
    border: 1px solid rgba(22,163,74,0.2);
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px; color: #15803D;
    margin-bottom: 8px;
}

/* Logged in notice */
.ms-contact-loggedin {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px; color: #3A4278;
    padding: 8px 12px;
    background: rgba(249,249,252,0.6);
    border: 1px solid #DCDCE2;
    border-radius: 12px;
}

/* Input — Figma: bg rgba(249,249,252,0.4) border #DCDCE2 radius 16 */
.ms-contact-input {
    width: 100%;
    height: 42px;
    padding: 10px 12px;
    background: rgba(249,249,252,0.5);
    border: 1px solid #DCDCE2;
    border-radius: 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px; color: #222747;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
    backdrop-filter: blur(8px);
}
.ms-contact-input:focus {
    border-color: #7661B4;
    background: rgba(255,255,255,0.85);
}
.ms-contact-input::placeholder { color: #AFB4D7; }

.ms-contact-textarea {
    height: 90px;
    resize: none;
}

/* Button — Figma: bg #4A559A radius 24 */
.ms-contact-btn {
    width: 100%; height: 48px;
    background: #4A559A;
    border: none; border-radius: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; font-size: 14px;
    color: #ffffff; cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.ms-contact-btn:hover {
    background: #3A4278;
    transform: translateY(-1px);
}

/* ── Responsive ── */
@media(max-width:1280px){ .ms-contact-section { padding: 56px 60px; } }
@media(max-width:1024px){ .ms-contact-section { padding: 48px 40px; gap: 40px; } }
@media(max-width:768px){
    .ms-contact-section { flex-direction: column; padding: 40px 24px; gap: 28px; align-items: flex-start; }
    .ms-contact-section__form-wrap { max-width: 100%; width: 100%; }
}