/* pagina1.css - ReumaAcademy Complete */
:root {
    --bg-cream: #faf7f5;
    --bg-white: #ffffff;
    --primary-rose: #9c00a7;
    --primary-dark-rose: #a08060;
    --accent-coral: #99569e;
    --text-dark: #1a1a1a;
    --text-light: #555555;
    --font-main: 'Poppins', sans-serif;
    --font-serif: 'Playfair Display', serif;
}

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

body {
    font-family: var(--font-main);
    background: var(--bg-cream);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography - STRONGER FONTS */
h1,
h2,
h3,
h4 {
    font-family: var(--font-serif);
    color: var(--text-dark);
}

h1 {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
}

h3 {
    font-size: 24px;
    font-weight: 700;
}

p {
    font-size: 16px;
    color: var(--text-light);
    font-weight: 400;
}

/* ANIMATED UNDERLINE EFFECT */
.animated-underline {
    position: relative;
    display: inline-block;
    color: var(--primary-rose);
    white-space: nowrap;
}

.animated-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 100%;
    height: 10px;
    background: var(--accent-coral);
    opacity: 0.4;
    transform: scaleX(0);
    transform-origin: left;
    animation: underlineGrow 1s 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: -1;
}

@keyframes underlineGrow {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}

/* Section Backgrounds */
.section-padding {
    padding: 100px 0;
    position: relative;
}

.section-bg-white {
    background: var(--bg-white);
}

.section-bg-cream {
    background: var(--bg-cream);
}

.section-bg-glass {
    background: radial-gradient(circle at top right, rgba(232, 160, 144, 0.05), transparent 40%),
        radial-gradient(circle at bottom left, rgba(196, 164, 132, 0.05), transparent 40%);
}

/* Header */
header {
    background: rgba(250, 247, 245, 0.95);
    backdrop-filter: blur(10px);
    padding: 20px 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(196, 164, 132, 0.15);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-dark);
    font-family: var(--font-serif);
}

.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links a {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-rose);
    transition: 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

/* Custom Property Definitions for smooth gradient animations */
@property --pos-x {
    syntax: '<percentage>';
    initial-value: 11.14%;
    inherits: false;
}

@property --pos-y {
    syntax: '<percentage>';
    initial-value: 140%;
    inherits: false;
}

@property --spread-x {
    syntax: '<percentage>';
    initial-value: 150%;
    inherits: false;
}

@property --spread-y {
    syntax: '<percentage>';
    initial-value: 180.06%;
    inherits: false;
}

@property --gradient-color-1 {
    syntax: '<color>';
    initial-value: #4a0050;
    inherits: false;
}

@property --gradient-color-2 {
    syntax: '<color>';
    initial-value: #7b1fa2;
    inherits: false;
}

@property --gradient-color-3 {
    syntax: '<color>';
    initial-value: #9c00a7;
    inherits: false;
}

@property --gradient-color-4 {
    syntax: '<color>';
    initial-value: #99569e;
    inherits: false;
}

@property --gradient-color-5 {
    syntax: '<color>';
    initial-value: #c4699f;
    inherits: false;
}

@property --border-angle {
    syntax: '<angle>';
    initial-value: 20deg;
    inherits: true;
}

@property --border-color-1 {
    syntax: '<color>';
    initial-value: hsla(300, 75%, 60%, 0.2);
    inherits: true;
}

@property --border-color-2 {
    syntax: '<color>';
    initial-value: hsla(300, 75%, 40%, 0.75);
    inherits: true;
}

@property --stop-1 {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

@property --stop-2 {
    syntax: '<percentage>';
    initial-value: 25%;
    inherits: false;
}

@property --stop-3 {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: false;
}

@property --stop-4 {
    syntax: '<percentage>';
    initial-value: 75%;
    inherits: false;
}

@property --stop-5 {
    syntax: '<percentage>';
    initial-value: 100%;
    inherits: false;
}

/* Gradient Button - Animated with Glow Effect */
.btn-primary,
.gradient-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    cursor: pointer;
    border: none;
    overflow: visible;
    padding: 16px 36px;
    min-width: 132px;
    border-radius: 12px;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: radial-gradient(var(--spread-x) var(--spread-y) at var(--pos-x) var(--pos-y),
            var(--gradient-color-1) var(--stop-1),
            var(--gradient-color-2) var(--stop-2),
            var(--gradient-color-3) var(--stop-3),
            var(--gradient-color-4) var(--stop-4),
            var(--gradient-color-5) var(--stop-5));
    box-shadow: 0 10px 40px rgba(156, 0, 167, 0.4);
    transition:
        --pos-x 0.5s,
        --pos-y 0.5s,
        --spread-x 0.5s,
        --spread-y 0.5s,
        --gradient-color-1 0.5s,
        --gradient-color-2 0.5s,
        --gradient-color-3 0.5s,
        --gradient-color-4 0.5s,
        --gradient-color-5 0.5s,
        --border-angle 0.5s,
        --border-color-1 0.5s,
        --border-color-2 0.5s,
        --stop-1 0.5s,
        --stop-2 0.5s,
        --stop-3 0.5s,
        --stop-4 0.5s,
        --stop-5 0.5s,
        transform 0.3s,
        box-shadow 0.3s;
}

/* Glowing Border Effect using Pseudo-element */
.btn-primary::before,
.gradient-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(var(--border-angle),
            var(--border-color-1),
            var(--border-color-2));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    pointer-events: none;
}

/* Hover Animation */
.btn-primary:hover,
.gradient-button:hover {
    --pos-x: 0%;
    --pos-y: 91.51%;
    --spread-x: 120.24%;
    --spread-y: 103.18%;
    --gradient-color-1: #c4699f;
    --gradient-color-2: #d4749a;
    --gradient-color-3: #e88095;
    --gradient-color-4: #9c00a7;
    --gradient-color-5: #4a0050;
    --border-angle: 190deg;
    --border-color-1: hsla(300, 78%, 90%, 0.1);
    --border-color-2: hsla(300, 75%, 90%, 0.6);
    --stop-1: 0%;
    --stop-2: 15%;
    --stop-3: 35%;
    --stop-4: 70%;
    --stop-5: 100%;
    transform: translateY(-3px);
    box-shadow: 0 15px 50px rgba(156, 0, 167, 0.5);
}

/* White variant for dark backgrounds */
.btn-primary.btn-white,
.gradient-button.btn-white {
    --gradient-color-1: #ffffff;
    --gradient-color-2: #f8f0fc;
    --gradient-color-3: #f0e6f6;
    --gradient-color-4: #e8dcf0;
    --gradient-color-5: #f5f5f5;
    color: var(--primary-rose);
    --border-color-1: hsla(0, 0%, 100%, 0.3);
    --border-color-2: hsla(300, 50%, 80%, 0.5);
}

.btn-primary.btn-white:hover,
.gradient-button.btn-white:hover {
    --gradient-color-1: #f5f5f5;
    --gradient-color-2: #ffffff;
    --gradient-color-3: #f8f0fc;
    --gradient-color-4: #ffffff;
    --gradient-color-5: #f0e6f6;
    box-shadow: 0 15px 50px rgba(255, 255, 255, 0.3);
}

/* Hero */
.hero {
    padding-top: 150px;
    padding-bottom: 100px;
    position: relative;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.hero-image img {
    border-radius: 20px;
    box-shadow: 20px 20px 0px rgba(196, 164, 132, 0.3);
    border: 2px solid white;
}

.deco-circle {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 160, 144, 0.15), transparent 70%);
    filter: blur(50px);
    z-index: 1;
}

/* Badge */
.badge {
    background: white;
    border: 1px solid rgba(196, 164, 132, 0.3);
    padding: 8px 16px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-dark-rose);
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 60px;
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.stat-item {
    text-align: center;
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent);
}

.stat-num {
    font-size: 38px;
    font-weight: 800;
    color: var(--primary-rose);
    display: block;
}

.stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
}

/* SPOTLIGHT CARDS - Tech Interactive */
.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.spotlight-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

.spotlight-card::before {
    content: '';
    position: absolute;
    top: var(--y, -100px);
    left: var(--x, -100px);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(196, 164, 132, 0.4) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 0;
}

.spotlight-card:hover::before {
    opacity: 1;
}

.spotlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border-color: var(--primary-rose);
}

.spotlight-content {
    position: relative;
    z-index: 1;
}

.spotlight-card h3 {
    margin-bottom: 10px;
    font-size: 20px;
}

.icon-box {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: rgba(196, 164, 132, 0.1);
    border-radius: 50%;
    transition: 0.3s;
}

.icon-box svg {
    width: 32px;
    height: 32px;
    stroke: var(--primary-rose);
    stroke-width: 2;
    fill: none;
}

.spotlight-card:hover .icon-box {
    transform: scale(1.1);
    background: var(--primary-rose);
}

.spotlight-card:hover .icon-box svg {
    stroke: white;
}

/* Futuristic Schedule */
.tech-schedule {
    background: #111;
    color: white;
    position: relative;
    overflow: hidden;
}

.tech-bg-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.section-header.light h2 {
    color: white;
}

.section-header.light p {
    color: rgba(255, 255, 255, 0.6);
}

.timeline-row {
    display: flex;
    gap: 30px;
    margin-top: 60px;
    justify-content: center;
    flex-wrap: wrap;
}

.timeline-card {
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    overflow: hidden;
    width: 360px;
    transition: 0.4s;
    position: relative;
}

.timeline-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-rose);
    box-shadow: 0 0 40px rgba(196, 164, 132, 0.15);
}

.timeline-img {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.timeline-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: 0.5s;
}

.timeline-card:hover .timeline-img img {
    transform: scale(1.1);
    opacity: 1;
}

.timeline-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--primary-rose);
    border: 1px solid var(--primary-rose);
    padding: 5px 15px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}

.timeline-content {
    padding: 30px;
}

.timeline-content h3 {
    font-size: 22px;
    color: white;
    margin-bottom: 10px;
    font-weight: 700;
}

.timeline-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.tech-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-rose), transparent);
    animation: scanLine 3s linear infinite;
    z-index: 10;
}

@keyframes scanLine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Mentors */
.mentor-card {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 0;
    background: white;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.mentor-card.reverse {
    direction: rtl;
}

.mentor-card.reverse .mentor-content {
    direction: ltr;
}

.mentor-img {
    position: relative;
    overflow: hidden;
}

.mentor-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.mentor-card:hover .mentor-img img {
    transform: scale(1.05);
}

.mentor-content {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mentor-role {
    color: var(--primary-rose);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.expert-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--text-light);
    font-weight: 500;
}

.expert-list li svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    stroke: var(--accent-coral);
    margin-top: 3px;
}

/* HERO HIGHLIGHT CTA EFFECT */
.hero-highlight {
    position: relative;
    padding: 120px 0;
    text-align: center;
    background: white;
    overflow: hidden;
}

.highlight-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(196, 164, 132, 0.1) 0%, transparent 50%),
        linear-gradient(0deg, transparent 49%, rgba(196, 164, 132, 0.05) 50%, transparent 51%),
        linear-gradient(90deg, transparent 49%, rgba(196, 164, 132, 0.05) 50%, transparent 51%);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    animation: gridFloat 20s linear infinite;
}

.highlight-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.highlight-text {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 30px;
    color: var(--text-dark);
}

.highlight-word {
    position: relative;
    display: inline-block;
    color: white;
    padding: 0 10px;
    z-index: 1;
}

.highlight-word::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-rose), var(--accent-coral));
    border-radius: 8px;
    transform: skew(-5deg);
    z-index: -1;
    box-shadow: 0 10px 30px rgba(196, 164, 132, 0.4);
}

@keyframes gridFloat {
    0% {
        background-position: 50% 50%, 0 0, 0 0;
    }

    100% {
        background-position: 50% 50%, 40px 40px, 40px 40px;
    }
}

/* FAQ */
.faq-accordion .faq-item {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    border-radius: 12px;
    transition: 0.3s;
}

.faq-item.active {
    border-color: var(--primary-rose);
    box-shadow: 0 10px 30px rgba(196, 164, 132, 0.1);
}

.faq-question svg {
    width: 20px;
    transition: 0.3s;
}

.faq-item.active .faq-question svg {
    transform: rotate(180deg);
    stroke: var(--primary-rose);
}

/* Footer */
footer {
    background: white;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 50px 0;
}

/* MOBILE RESPONSIVE */
@keyframes floatY {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@media (max-width: 900px) {
    .container {
        padding: 0 20px;
    }

    header .container {
        flex-direction: column;
        gap: 10px;
    }

    .nav-links {
        display: none;
    }

    .hero {
        padding-top: 140px;
        text-align: center;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    h1 {
        font-size: 36px !important;
    }

    h2 {
        font-size: 30px !important;
    }

    .hero-image {
        /* order: -1; Removed to put text first */
        margin-bottom: 20px;
    }

    .hero-image img {
        max-width: 400px;
        margin: 0 auto;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 20px;
    }

    .stat-item:not(:last-child)::after {
        display: none;
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    .mentor-card {
        grid-template-columns: 1fr;
        margin-bottom: 30px;
    }

    .mentor-img {
        height: 300px;
    }

    .mentor-content {
        padding: 30px 20px;
    }

    .mentor-card.reverse {
        direction: ltr;
    }

    .timeline-row {
        flex-direction: column;
        align-items: center;
    }

    .timeline-card {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .highlight-text {
        font-size: 28px;
    }

    .btn-primary {
        width: 100%;
        padding: 15px 20px;
    }
}

@media (max-width: 480px) {
    .stats-row {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 28px !important;
    }

    .logo {
        font-size: 22px;
    }
}

/* Carousel Timeline Cards - Gallery Hover Style */
.timeline-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    margin-top: 60px !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
}

.timeline-card {
    position: relative !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    height: 450px !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    backdrop-filter: none !important;
}

.carousel-images {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s;
}

.carousel-image.active {
    opacity: 1;
}

.carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.timeline-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    padding: 40px 30px;
    z-index: 2;
}

.timeline-tag {
    display: inline-block !important;
    background: var(--primary-rose) !important;
    color: white !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    border: none !important;
}

.timeline-overlay h3 {
    font-size: 24px !important;
    color: white !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
}

.timeline-overlay p {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: 0.3s;
    cursor: pointer;
}

.carousel-dot.active {
    background: var(--primary-rose);
    width: 24px;
    border-radius: 4px;
}

.timeline-card:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 20px 60px rgba(196, 164, 132, 0.3) !important;
    border-color: transparent !important;
}

/* Professional Profile Cards - Photo + Floating Panel */
.professional-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.professional-card {
    position: relative;
    height: 550px;
    border-radius: 30px;
    overflow: visible;
}

.professional-photo {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.professional-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.professional-card:hover .professional-photo img {
    transform: scale(1.05);
}

.professional-info {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    background: #1a1a1a;
    color: white;
    padding: 40px 35px;
    border-radius: 20px;
    width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transition: 0.4s;
    z-index: 10;
}

.professional-card:hover .professional-info {
    transform: translateY(-50%) translateX(10px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.professional-info h3 {
    font-size: 28px;
    color: white;
    margin-bottom: 8px;
    font-weight: 700;
}

.professional-role {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin-bottom: 20px;
    display: block;
}

.professional-quote {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
    font-style: italic;
}

.professional-socials {
    display: flex;
    gap: 12px;
}

.social-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    cursor: pointer;
}

.social-icon:hover {
    background: var(--primary-rose);
    transform: translateY(-3px);
}

.social-icon svg {
    width: 18px;
    stroke: white;
}

/* Mobile Updates for new components */
@media (max-width: 900px) {
    .timeline-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .timeline-card {
        height: 400px !important;
    }

    .professional-grid {
        grid-template-columns: 1fr !important;
        gap: 60px !important;
    }

    .professional-card {
        height: auto !important;
    }

    .professional-info {
        position: relative !important;
        right: 0 !important;
        top: 0 !important;
        transform: none !important;
        width: 100% !important;
        margin-top: -40px !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .professional-card:hover .professional-info {
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .timeline-card {
        height: 350px !important;
    }
}

/* Timeline Animation for Professionals */
.timeline-container {
    position: relative;
    padding: 60px 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--primary-rose), transparent);
    transform: translateX(-50%);
}

.timeline-progress {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 0%;
    background: var(--accent-coral);
    transform: translateX(-50%);
    transition: height 0.3s ease;
    z-index: 1;
}

.timeline-item {
    position: relative;
    margin-bottom: 100px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.timeline-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.timeline-item:nth-child(odd) .timeline-content {
    padding-right: calc(50% + 60px);
    text-align: right;
}

.timeline-item:nth-child(even) .timeline-content {
    padding-left: calc(50% + 60px);
    text-align: left;
}

.timeline-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: white;
    border: 4px solid var(--primary-rose);
    border-radius: 50%;
    z-index: 2;
    transition: 0.3s;
}

.timeline-item:hover .timeline-dot {
    transform: translate(-50%, -50%) scale(1.3);
    border-color: var(--accent-coral);
    box-shadow: 0 0 20px rgba(196, 164, 132, 0.6);
}

.timeline-content-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: 0.4s;
    position: relative;
}

.timeline-item:nth-child(odd) .timeline-content-card {
    margin-right: calc(50% + 60px);
}

.timeline-item:nth-child(even) .timeline-content-card {
    margin-left: calc(50% + 60px);
}

.timeline-content-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(196, 164, 132, 0.2);
}

.timeline-image-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    border: 4px solid var(--primary-rose);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.timeline-item:nth-child(odd) .timeline-image-wrapper {
    margin: 0 0 20px auto;
}

.timeline-item:nth-child(even) .timeline-image-wrapper {
    margin: 0 auto 20px 0;
}

.timeline-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.timeline-content-card:hover .timeline-image-wrapper img {
    transform: scale(1.1);
}

.timeline-role {
    display: inline-block;
    background: rgba(196, 164, 132, 0.1);
    color: var(--primary-dark-rose);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.timeline-name {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.timeline-bio {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 20px;
}

.timeline-credentials {
    list-style: none;
    padding: 0;
}

.timeline-credentials li {
    padding: 8px 0;
    color: var(--text-light);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.timeline-item:nth-child(odd) .timeline-credentials li {
    justify-content: flex-end;
}

.timeline-credentials li i {
    color: var(--accent-coral);
}

/* Mobile Timeline */
@media (max-width: 900px) {
    .timeline-line {
        left: 20px;
    }

    .timeline-progress {
        left: 20px;
    }

    .timeline-dot {
        left: 20px;
    }

    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    .timeline-item:nth-child(odd) .timeline-content-card,
    .timeline-item:nth-child(even) .timeline-content-card {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .timeline-item:nth-child(odd) .timeline-image-wrapper,
    .timeline-item:nth-child(even) .timeline-image-wrapper {
        margin: 0 auto 20px auto;
    }

    .timeline-item:nth-child(odd) .timeline-credentials li {
        justify-content: flex-start;
    }

    .timeline-item {
        margin-bottom: 60px;
    }
}

/* HERO PARALLAX SECTION */
.hero-parallax {
    padding: 100px 0;
    background: #111;
    color: white;
    overflow: hidden;
    position: relative;
    perspective: 1000px;
    /* Essential for 3D effect */
}

.parallax-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.parallax-header h2 {
    color: white;
    font-size: 48px;
    margin-bottom: 15px;
}

.parallax-header p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
}

.parallax-container {
    height: 600px;
    /* Fixed height window for the effect */
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    overflow: visible;
    /* Let cards flow out */
}

.parallax-grid {
    display: flex;
    gap: 30px;
    transform: rotateX(45deg) rotateZ(-15deg) scale(1.2);
    /* The 3D Skew */
    transform-style: preserve-3d;
    width: 100%;
    justify-content: center;
}

.parallax-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 300px;
    transition: transform 0.1s linear;
    /* Smooth scroll movement via JS */
}

.parallax-card {
    width: 100%;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transition: 0.3s;
    position: relative;
}

.parallax-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    z-index: 1;
}

.parallax-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.parallax-card:hover img {
    transform: scale(1.1);
}

.parallax-card:hover {
    box-shadow: 0 30px 60px rgba(196, 164, 132, 0.3);
    z-index: 10;
}


/* BENEFITS SECTION */
.benefits-section {
    position: relative;
    background: #fff;
    z-index: 5;
    /* Above parallax if needed */
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.benefits-content h2 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 40px;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.benefits-list li svg {
    width: 24px;
    height: 24px;
    color: var(--primary-rose);
    min-width: 24px;
    flex-shrink: 0;
    margin-top: 3px;
}

.benefits-list li p {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.6;
}

.benefits-list li strong {
    color: var(--text-dark);
    font-weight: 700;
}

.benefits-image .image-wrapper {
    position: relative;
    border-radius: 20px;
}

.benefits-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 20px 20px 0 rgba(196, 164, 132, 0.2);
    position: relative;
    z-index: 2;
}

.benefits-image .deco-box {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--primary-rose);
    border-radius: 20px;
    z-index: 1;
}

@media (max-width: 900px) {
    .parallax-grid {
        transform: rotateX(20deg) rotateZ(0deg) scale(1);
        flex-direction: column;
        gap: 20px;
    }

    .parallax-column {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 20px;
    }

    .parallax-card {
        min-width: 280px;
        height: 350px;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .benefits-image {
        order: -1;
        margin-bottom: 40px;
    }
}

/* MENTORS STICKY SCROLL SECTION */
.mentors-sticky-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.mentors-visual-col {
    position: relative;
}

.sticky-image-container {
    position: sticky;
    top: 150px;
    /* Offset from header */
    width: 100%;
    height: 500px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(196, 164, 132, 0.2);
    border: 4px solid white;
}

.mentor-sticky-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease-in-out, transform 0.8s ease;
    transform: scale(1.1);
}

.mentor-sticky-img.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.mentors-content-col {
    padding-bottom: 200px;
    /* Extra space to scroll past */
}

.mentor-scroll-block {
    min-height: 80vh;
    /* Ensure each block takes scroll space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    opacity: 0.3;
    transition: 0.5s;
    filter: blur(2px);
}

.mentor-scroll-block.active {
    opacity: 1;
    filter: blur(0);
}

.mentor-scroll-block h3 {
    font-size: 32px;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.mentor-role {
    color: var(--primary-rose);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-size: 14px;
}

.mentor-bio {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 30px;
}

/* Mobile Responsive For Sticky Section */
@media (max-width: 900px) {
    .mentors-sticky-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sticky-image-container {
        position: relative;
        top: 0;
        height: 400px;
        margin-bottom: 30px;
    }

    .mentor-scroll-block {
        min-height: auto;
        padding: 0;
        opacity: 1;
        filter: none;
        margin-bottom: 60px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding-bottom: 40px;
    }
}

/* STACKING CARDS SECTION */
.mentors-stack-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 50px;
}

.mentor-stack-card {
    position: sticky;
    top: 100px;
    /* Base top position, will be overridden inline for stack effect */
    height: 500px;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 50px;
    /* Space between cards */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
    /* Shadow pointing up to show separation */
    background: white;
}

.mentor-card-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.mentor-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mentor-card-overlay {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    transition: 0.3s;
}

.mentor-stack-card:hover .mentor-card-overlay {
    transform: translateY(-5px);
}

.mentor-card-overlay h3 {
    margin-bottom: 10px;
    color: var(--text-dark);
}

.mentor-card-overlay .mentor-bio {
    color: var(--text-light);
    font-size: 15px;
    margin-bottom: 20px;
}

/* Cleanup old sticky wrapper styles if they conflict, but new class names specific enough */

@media (max-width: 600px) {
    .mentor-stack-card {
        height: 600px;
        /* Taller for mobile to fit text */
    }

    .mentor-card-overlay {
        bottom: 10px;
        left: 10px;
        right: 10px;
        padding: 20px;
    }

    .mentor-card-overlay h3 {
        font-size: 20px;
    }
}

/* STACKING CARDS SECTION - SIDE BY SIDE */
.mentors-stack-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 0px;
}

.mentor-stack-card {
    position: sticky;
    top: 100px;
    /* Base top position, will be overridden inline for stack effect */
    height: auto;
    min-height: 450px;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 400px;
    /* Space between cards */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    background: white;
    display: grid;
    grid-template-columns: 40% 60%;
    /* Image | Content */
}

.mentor-stack-card:last-child {
    margin-bottom: 0;
}

.mentor-card-image {
    width: 100%;
    height: 100%;
    position: relative;
}

.mentor-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mentor-card-content {
    background: white;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mentor-card-content h3 {
    margin-bottom: 15px;
    color: var(--text-dark);
    font-size: 28px;
}

.mentor-card-content .mentor-bio {
    color: var(--text-light);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.mentor-card-content .mentor-role {
    margin-bottom: 10px;
}

/* Mobile Responsive For Stacking Cards */
@media (max-width: 800px) {
    .mentor-stack-card {
        grid-template-columns: 1fr;
        /* Stack vertically */
        height: auto;
        min-height: 500px;
    }

    .mentor-card-image {
        height: 250px;
    }

    .mentor-card-image img {
        object-position: top;
    }

    .mentor-card-content {
        padding: 30px;
    }
}

/* TARGET AUDIENCE SECTION */
.audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.audience-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: 0.3s;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.audience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(196, 164, 132, 0.15);
    border-color: rgba(196, 164, 132, 0.3);
}

.audience-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: rgba(196, 164, 132, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-rose);
}

.audience-icon svg {
    width: 28px;
    height: 28px;
}

.audience-card p {
    font-size: 18px;
    color: var(--text-light);
    line-height: 1.6;
}

.audience-card strong {
    color: var(--text-dark);
    font-weight: 700;
}

@media (max-width: 768px) {
    .audience-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .audience-card {
        padding: 30px;
    }
}

/* TYPEWRITER ANIMATION */
.typewriter-cursor {
    display: inline-block;
    color: var(--primary-rose);
    margin-left: 5px;
    animation: blink 1s infinite;
    font-weight: 300;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Ensure H1 has enough height to prevent layout jumps during typing if using multiple lines 
   But since we are typing inline, dynamic height is usually okay. */
.hero-content h1 {
    min-height: 1.2em;
    /* Adjust based on content */
}

/* HERO SCROLL MARQUEE */
.hero-marquee-wrapper {
    position: absolute;
    bottom: -30px;
    /* Overlap nicely */
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, var(--primary-rose), var(--accent-coral));
    padding: 15px 0;
    transform: skewY(-3deg);
    z-index: 10;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hero-marquee-content {
    display: flex;
    white-space: nowrap;
    gap: 0;
    /* We will use JS to transform translateX, but default animation can be helpful too 
       Actually, user asked for "movimentando de acordo com o scroll", so JS priority. 
       We set initial state here. */
    width: 200%;
    /* Ensure coverage */
}

.hero-marquee-content span {
    color: white;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-marquee-content span svg {
    width: 16px;
    height: 16px;
    fill: white;
    stroke: none;
}

/* COMMUNITY CTA SECTION */
.section-bg-gradient-orange {
    background: linear-gradient(135deg, #9c00a7, #c4699f);
    color: white;
    overflow: hidden;
}

.community-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.community-content h2 {
    color: white;
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.text-white-dim {
    color: rgba(255, 255, 255, 0.9);
}

.community-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    margin-bottom: 30px;
    max-width: 500px;
}

.community-badges {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.com-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(5px);
}

.com-badge svg {
    width: 16px;
    height: 16px;
}

.btn-white {
    background: white;
    color: var(--primary-rose);
    border: none;
}

.btn-white:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

/* PHONE MOCKUP - WhatsApp Style */
.phone-mockup {
    width: 320px;
    height: 650px;
    background: #000;
    border-radius: 40px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), inset 0 0 0 4px #444;
    position: relative;
    border: 8px solid #111;
    margin: 0 auto;
    overflow: hidden;
    transform: rotate(-5deg);
}

.phone-screen {
    background: #e5ddd5 url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
    background-size: 400px;
    height: 100%;
    padding: 0;
    /* Reset padding for header/footer */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* CHAT HEADER */
.chat-header {
    background: #075E54;
    color: white;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 20;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.back-icon {
    width: 20px;
    height: 20px;
}

.header-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

.header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header-title {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-subtitle {
    font-size: 11px;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-right {
    display: flex;
    gap: 15px;
}

.header-right svg {
    width: 20px;
    height: 20px;
}

/* CHAT CONTENT Area */
.chat-content {
    flex: 1;
    padding: 20px 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-message {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 14px;
    max-width: 80%;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    line-height: 1.3;
    font-family: Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    color: black !important;
}

.message-sender {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 2px;
}

/* Timestamp simulation */
.chat-message::after {
    content: '14:20';
    font-size: 10px;
    color: rgba(0, 0, 0, 0.45);
    align-self: flex-end;
    margin-top: 2px;
    margin-left: 10px;
}

.chat-message.left {
    background: white;
    align-self: flex-start;
    border-top-left-radius: 0;
    margin-left: 10px;
}

.chat-message.left::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: white;
    border-right: 0;
    margin-top: 0;
    margin-right: -10px;
    transform: skewY(0deg);
}

.chat-message.right {
    background: #dcf8c6;
    align-self: flex-end;
    border-top-right-radius: 0;
    margin-right: 10px;
}

.chat-message.right::before {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #dcf8c6;
    border-left: 0;
    margin-top: 0;
    margin-left: -10px;
}

/* CHAT FOOTER */
.chat-footer {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    /* Transparent over bg but usually has simple bg */
    margin-bottom: 5px;
}

.chat-footer svg {
    width: 24px;
    height: 24px;
    stroke: #666;
    stroke-width: 2;
}

.input-box {
    flex: 1;
    background: white;
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: #999;
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mic-btn {
    width: 45px;
    height: 45px;
    background: #00897b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.mic-btn svg {
    stroke: white;
    width: 20px;
    height: 20px;
}

/* Floating Icons - Adjusted */
.floating-app-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    /* Standard icon shape */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: float 4s ease-in-out infinite;
    z-index: 20;
}

.icon-whatsapp {
    top: 60px;
    right: -15px;
    color: #25D366;
}

.icon-discord {
    bottom: 90px;
    left: -15px;
    color: #5865F2;
    animation-delay: 2s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* MENTORSHIP DETAILS GRID (NEW SECTION) */
.mentorship-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.detail-card {
    background: white;
    padding: 35px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 0.3s ease;
}

.detail-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
}

.detail-card h3 {
    font-size: 20px;
    color: var(--primary-rose);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-card h3 svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.detail-card p {
    font-size: 15px;
    color: var(--text-light);
    margin-bottom: 15px;
    line-height: 1.7;
}

.bonus-box {
    background: rgba(156, 0, 167, 0.05);
    padding: 20px;
    border-radius: 12px;
    margin-top: 25px;
    border: 1px dashed var(--primary-rose);
}

.bonus-box h4 {
    font-size: 16px;
    color: var(--primary-rose);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

@media (max-width: 992px) {
    .mentorship-details-grid {
        grid-template-columns: 1fr;
    }
}

/* SUPPORT CTA SECTION */
.section-bg-dark {
    background: linear-gradient(135deg, #2a1a2d, #1a1a2e);
    /* Dark purple background */
    color: white;
}

.support-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.support-content {
    flex: 1;
}

.support-content h2 {
    font-size: 42px;
    color: white;
    margin-bottom: 15px;
}

.support-content p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
}

.btn-whatsapp {
    position: relative;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(37, 211, 102, 0.4);
}

.btn-whatsapp::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(20deg, hsla(145, 75%, 60%, 0.2), hsla(145, 75%, 40%, 0.75));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    pointer-events: none;
}

.btn-whatsapp:hover {
    background: linear-gradient(135deg, #128C7E, #25D366);
    transform: translateY(-3px);
    box-shadow: 0 15px 50px rgba(37, 211, 102, 0.5);
}

.support-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

.phone-mini-mockup {
    width: 250px;
    padding: 20px;
    background: #202c33;
    /* WhatsApp dark theme bg color sort of */
    border-radius: 30px;
    border: 4px solid #444;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

.chat-header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Responsive */
@media (max-width: 900px) {

    .community-grid,
    .support-flex {
        grid-template-columns: 1fr;
        flex-direction: column;
        text-align: center;
    }

    .community-badges {
        justify-content: center;
    }

    .phone-mockup {
        transform: rotate(0);
        margin-top: 40px;
    }

    .support-content {
        align-items: center;
        display: flex;
        flex-direction: column;
    }
}

/* CRONOGRAMA - ALTERNATING CARDS */
.schedule-column {
    display: flex;
    flex-direction: column;
    gap: 100px;
    max-width: 1000px;
    margin: 0 auto;
}

.schedule-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: white;
    padding: 20px;
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
}

.schedule-card.reverse {
    direction: rtl;
    /* Trick to swap columns visually */
}

.schedule-card.reverse .schedule-content {
    direction: ltr;
    /* Reset text direction */
}

.schedule-image {
    height: 400px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.schedule-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.schedule-card:hover .schedule-image img {
    transform: scale(1.05);
}

.schedule-content {
    padding: 20px;
}

.module-pill {
    background: #e6dac8;
    /* Soft beige */
    color: var(--text-dark);
    font-weight: 700;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.schedule-content h3 {
    font-size: 36px;
    margin-bottom: 30px;
    line-height: 1.2;
    color: var(--text-dark);
}

.check-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.check-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.check-item i {
    color: white;
    background: var(--primary-rose);
    border-radius: 50%;
    padding: 4px;
    /* Icon size adjustment */
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.check-item p {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 900px) {

    .schedule-card,
    .schedule-card.reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        /* Reset for mobile stack */
        gap: 30px;
    }

    .schedule-image {
        height: 250px;
    }

    .schedule-content h3 {
        font-size: 28px;
    }
}

/* HERO POLISH - NEW FONT & ANIMATIONS */
body {
    font-family: 'Poppins', sans-serif;
    /* Keep base font */
}

h1,
h2,
h3,
.logo {
    font-family: 'Outfit', sans-serif;
    /* New Display Font */
}

/* GRADUAL SPACING ANIMATION */
.gradual-spacing span {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateX(-20px);
    transition: all 0.5s cubic-bezier(0.12, 0, 0.39, 0);
}

.gradual-spacing span.visible {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

.text-highlight {
    background: linear-gradient(120deg, var(--primary-rose) 0%, var(--accent-coral) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* FLOATING ELEMENTS */
.float-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    z-index: 5;
    animation: float-y 4s ease-in-out infinite;
}

.float-icon svg {
    width: 28px;
    height: 28px;
    color: var(--primary-rose);
    fill: rgba(196, 164, 132, 0.1);
}

.icon-1 {
    top: 10%;
    left: -20px;
    animation-delay: 0s;
}

.icon-2 {
    bottom: 20%;
    right: -20px;
    animation-delay: 1.5s;
    width: 50px;
    height: 50px;
}

.icon-3 {
    top: 50%;
    right: 90%;
    animation-delay: 2.5s;
    width: 40px;
    height: 40px;
}

@keyframes float-y {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* DOUBLE X MARQUEE */
.hero-marquee-x-container {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    /* Adjust height to contain skewed elements */
    overflow: visible;
    z-index: 10;
}

.hero-marquee-wrapper {
    position: absolute;
    width: 100%;
    padding: 12px 0;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    left: 0;
}

.wrapper-1 {
    background: var(--primary-rose);
    transform: skewY(-3deg) translateY(0);
    z-index: 2;
    bottom: 0;
}

.wrapper-2 {
    background: var(--accent-coral);
    transform: skewY(3deg) translateY(-10px);
    /* Visual cross effect */
    z-index: 1;
    bottom: 0;
}

.hero-marquee-content {
    display: flex;
    white-space: nowrap;
    width: 200%;
}

.hero-marquee-content span {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* FLOATING TEXT BUBBLES */
.float-text {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    color: var(--primary-rose);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    z-index: 5;
    animation: float-y 4s ease-in-out infinite;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.text-1 {
    top: 15%;
    left: -10px;
    animation-delay: 0s;
}

.text-2 {
    bottom: 25%;
    right: -10px;
    animation-delay: 1.5s;
    background: white;
    color: var(--accent-coral);
}

.text-3 {
    top: 45%;
    right: 85%;
    animation-delay: 2.5s;
    font-size: 12px;
    padding: 8px 16px;
}

/* Lint fix: background-clip compatibility */
.text-highlight {
    background-clip: text;
    /* standard property */
    -webkit-background-clip: text;
}

/* HOW IT WORKS - STICKY SCROLL SECTION */
.works-scroll-container {
    height: 400vh;
    /* Needs height to scroll through */
    position: relative;
    background: #f0f2f5;
}

.works-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.works-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff8c42, #ff5e62);
    transition: background 1s ease;
    z-index: 1;
}

.works-content-container {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 800px;
}

.works-header {
    margin-bottom: 60px;
}

.works-header h2 {
    font-size: 56px;
    margin-bottom: 20px;
    color: white;
}

.works-header p {
    font-size: 24px;
    opacity: 0.9;
}

.works-cards-stack {
    position: relative;
    height: 300px;
}

.works-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%) scale(0.8);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    padding: 40px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.works-card.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    z-index: 5;
}

.works-card h3 {
    font-size: 32px;
    margin-bottom: 20px;
    color: white;
}

.works-card p {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
}

/* CRONOGRAMA STACKING CARDS */
.cronograma-stack-container {
    padding-bottom: 20vh;
}

.cronograma-card {
    position: sticky;
    top: 150px;
    margin-bottom: 50px;
    background: white;
    border-radius: 40px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
    /* Shadow on top to distinguish from card below */
    z-index: 1;
    /* Calc offset based on index if we can, or just use sticky behavior which naturally stacks if margin is right.
       Actually, sticky elements stack on top of each other at the same 'top' if they reach it.
       To replicate the "stacking card" effect where they pile up with a slight offset, we need correct top values.
       But simple sticky works well too. Let's add a slight top offset variance if possible, or just standard sticky.
    */
    transform-origin: center top;
    transition: transform 0.5s;
}

.cronograma-card:nth-child(1) {
    top: 150px;
}

.cronograma-card:nth-child(2) {
    top: 170px;
}

.cronograma-card:nth-child(3) {
    top: 190px;
}

/* HOW IT WORKS - IMAGE BACKGROUND UPDATE */
.works-bg-layer {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Add a dark overlay so text pops */
}

.works-bg-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    /* Dark overlay */
    z-index: 1;
}

.works-card {
    background: transparent;
    /* Transparent for image bg visibility */
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Align text to bottom/center if desired, or keep centered */
    height: 100%;
    /* Full height to allow placement */
}

.works-card.active {
    opacity: 1;
    transform: scale(1);
}

.works-card h3 {
    font-size: 48px;
    margin-bottom: 20px;
}

.works-card p {
    font-size: 24px;
    max-width: 700px;
    margin: 0 auto;
}

/* HERO FINAL POLISH */
.hero {
    background-image: linear-gradient(rgba(255, 245, 243, 0.9), rgba(255, 245, 243, 0.95)), url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1600');
    /* Office/Abstract BG */
    background-size: cover;
    background-position: center;
}

.hero-image img {
    box-shadow: none !important;
    filter: drop-shadow(0 0 0 transparent);
    /* Ensure no drop-shadow either */
}

/* Glass Card Overlay */
.hero-glass-card {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: linear-gradient(135deg, rgba(30, 30, 40, 0.85), rgba(40, 40, 50, 0.7));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    z-index: 10;
    text-align: left;
    color: white;
}

.hero-glass-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: white;
    font-family: 'Playfair Display', serif;
}

.hero-glass-card p {
    font-size: 12px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.hero-glass-stars {
    display: flex;
    gap: 4px;
    color: #ffd700;
    margin-top: 5px;
}

.hero-glass-stars i {
    width: 14px;
    height: 14px;
    fill: #ffd700;
}

.hero-glass-stat {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 10px;
    font-weight: 400;
    font-family: 'Outfit', sans-serif;
}

/* HOW IT WORKS - HORIZONTAL SCROLL */
.works-horizontal-section {
    height: 350vh;
    /* Scrolldown distance */
    position: relative;
    background: #f8f9fa;
}

.works-sticky-frame {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;
}

.works-header-absolute {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    z-index: 10;
    text-align: center;
}

.works-header-absolute h2 {
    font-size: 42px;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.works-header-absolute p {
    font-size: 18px;
    color: var(--text-light);
}

.works-track {
    display: flex;
    gap: 40px;
    padding-left: 10vw;
    /* Start with some offset */
    will-change: transform;
}

.works-item {
    min-width: 400px;
    height: 550px;
    background: white;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.works-item:hover {
    transform: translateY(-10px);
}

.works-item-image {
    height: 60%;
    overflow: hidden;
}

.works-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.works-item:hover .works-item-image img {
    transform: scale(1.05);
}

.works-item-content {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.works-item-content h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--primary-rose);
    font-family: 'Playfair Display', serif;
}

.works-item-content p {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .works-header-absolute h2 {
        font-size: 32px;
    }

    .works-item {
        min-width: 85vw;
        height: 50vh;
    }

    .works-track {
        padding-left: 5vw;
        gap: 20px;
    }
}

/* RESPONSIVE & LAYOUT POLISH */

/* 1. Hero Mobile Adjustments */
@media (max-width: 768px) {
    .hero-glass-card {
        width: 95%;
        bottom: 20px;
        padding: 15px;
    }

    .hero-glass-card h3 {
        font-size: 18px;
    }

    .hero-glass-card p {
        font-size: 11px;
    }
}

/* 2. Cronograma Stacking Cards Mobile Fallback 
   On mobile, sticky stacking can take up too much vertical space or break.
   We'll reduce the spacer margin.
*/
@media (max-width: 768px) {
    .cronograma-card {
        top: 100px;
        /* Lower sticky offset */
        margin-bottom: 30px;
    }

    .cronograma-card:nth-child(1) {
        top: 100px;
    }

    .cronograma-card:nth-child(2) {
        top: 115px;
    }

    .cronograma-card:nth-child(3) {
        top: 130px;
    }

    .schedule-card {
        flex-direction: column;
    }

    .schedule-image {
        height: 200px;
    }

    .schedule-content {
        padding: 30px 20px;
    }
}

/* 3. How it Works Horizontal Scroll - Mobile Fallback to Vertical 
   Horizontal scroll on sticky container is hard to control on touch.
   Switching to standard vertical list for better UX.
*/
@media (max-width: 900px) {
    .works-horizontal-section {
        height: auto;
        /* Remove the massive height */
        padding: 60px 0;
    }

    .works-sticky-frame {
        position: relative;
        height: auto;
        display: block;
        top: 0;
    }

    .works-header-absolute {
        position: relative;
        top: 0;
        margin-bottom: 40px;
        text-align: center;
    }

    .works-track {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding-left: 0;
        transform: none !important;
        /* Disable JS transform */
    }

    .works-item {
        min-width: 100%;
        height: auto;
        margin: 0 auto;
        width: 100%;
        max-width: 500px;
    }

    .works-item-image {
        height: 250px;
    }
}

/* 4. Global Typography & Spacing Polish */
@media (max-width: 480px) {
    .section-padding {
        padding: 60px 0;
    }

    h1 {
        font-size: 32px !important;
    }

    h2 {
        font-size: 28px !important;
    }

    h3 {
        font-size: 22px !important;
    }

    .hero-marquee-content span {
        font-size: 12px;
        margin: 0 20px;
    }
}

/* 5. Highlight Word Polish */
.highlight-word {
    z-index: 0;
    /* Fix stacking context */
}

/* 6. Remove double shadow on hero image on mobile if present */
@media (max-width: 768px) {
    .hero-image img {
        box-shadow: none !important;
    }
}

/* HERO CLEANUP & FIXES */

/* 1. Ensure Hero Container is stable */
.hero {
    position: relative;
    overflow: hidden;
    /* Contain marquee and absolute elements */
    padding-top: 140px;
    padding-bottom: 120px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(rgba(255, 245, 243, 0.9), rgba(255, 245, 243, 0.95)), url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1600');
    background-size: cover;
    background-position: center bottom;
}

/* 2. Robust Grid Layout */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Balanced split */
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 5;
    /* Above marquee */
    width: 100%;
}

.hero-content {
    padding-right: 20px;
}

/* 3. Image Container & Glass Card */
.hero-image {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: none !important;
    /* Explicit removal */
    filter: none;
    display: block;
}

/* Glass Card Positioning - Strict inside image container */
.hero-glass-card {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: rgba(20, 20, 30, 0.85);
    /* Dark Glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10;
    pointer-events: none;
    /* Let clicks pass through if needed */
}

/* 4. Marquee - Push to very bottom */
.hero-marquee-x-container {
    position: absolute;
    bottom: -20px;
    /* Slight overlap with next section or just at bottom */
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 2;
    /* Below hero content stats */
    pointer-events: none;
}

/* 5. Mobile Responsiveness Fixes */
@media (max-width: 900px) {
    .hero {
        padding-top: 120px;
        padding-bottom: 100px;
        text-align: center;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-content {
        padding-right: 0;
        order: 1;
        /* Content first */
    }

    .hero-image {
        order: 2;
        /* Image second */
        max-width: 90%;
    }

    /* Center align buttons and stats on mobile */
    .hero-content>div {
        justify-content: center;
    }
}

/* FIX HOW IT WORKS SCROLL & ALIGNMENT */

.works-horizontal-section {
    /* Ensure sufficient height for the scroll effect */
    height: 400vh;
    position: relative;
    background: #f8f9fa;
    z-index: 10;
    /* Ensure it sits above/below correctly */
}

.works-sticky-frame {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /* Hide the scrollbar, we animate translateX */
    display: flex;
    align-items: center;
    /* Center Vertically */
    justify-content: flex-start;
}

.works-header-absolute {
    position: absolute;
    top: 10vh;
    /* Consistent top spacing */
    left: 0;
    width: 100%;
    z-index: 20;
    text-align: center;
    pointer-events: none;
    /* Let clicks pass through to cards if transparent */
}

/* Ensure container centers text */
.works-header-absolute .container {
    max-width: 800px;
    margin: 0 auto;
}

.works-track {
    display: flex;
    gap: 60px;
    /* Better spacing between cards */
    padding-left: 5vw;
    /* Starting offset */
    align-items: center;
    /* Vertical align items in track */
    height: 100%;
    /* Full height to allow vertical centering */
    will-change: transform;
}

.works-item {
    /* Fixed dimensions for consistent cards */
    width: 400px;
    flex-shrink: 0;
    /* Prevent shrinking */
    height: 60vh;
    max-height: 550px;
    background: white;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

/* Mobile Fallback Overrides - Reinforce Vertical Layout */
@media (max-width: 900px) {
    .works-horizontal-section {
        height: auto;
        padding: 80px 0;
    }

    .works-sticky-frame {
        position: relative;
        height: auto;
        display: block;
        overflow: visible;
    }

    .works-header-absolute {
        position: relative;
        top: 0;
        margin-bottom: 50px;
        height: auto;
    }

    .works-track {
        flex-direction: column;
        gap: 40px;
        padding-left: 0;
        transform: none !important;
        height: auto;
        width: 100%;
    }

    .works-item {
        width: 90%;
        max-width: 450px;
        margin: 0 auto;
        height: auto;
        min-height: 400px;
    }
}

/* FIX HERO MARQUEE OVERLAP */
.hero {
    margin-bottom: 120px;
    /* Push next section down to reveal marquee */
    padding-bottom: 120px;
    /* More internal breathing room */
}

/* Ensure Marquee is on top of next section if it touches */
.hero-marquee-x-container {
    z-index: 100;
    pointer-events: none;
    /* Let scroll pass through */
}

/* Bring Stats Closer to Content if felt disorganized */
.stats-row {
    margin-top: 40px;
    /* Reduced from 60px */
    position: relative;
    z-index: 5;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* HERO LAYOUT REORGANIZATION - FIXES */

/* Reset and reorganize Hero Grid */
.hero-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 50px !important;
    align-items: center !important;
}

/* Ensure Hero Image container is positioned for glass card */
.hero-image {
    position: relative !important;
    display: block;
}

/* Reorganize Hero Content */
.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-content h1 {
    font-size: 48px;
    line-height: 1.15;
    margin-bottom: 20px;
}

/* Text Highlight - Gradient */
.text-highlight {
    background: linear-gradient(135deg, var(--primary-rose), var(--accent-coral));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Stats row - Put it inside the grid, below both columns */
.stats-row {
    grid-column: 1 / -1;
    /* Span full width */
    margin-top: 50px !important;
}

/* Glass Card - Correct positioning */
.hero-glass-card {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    z-index: 10;
}

/* Remove box shadow from hero image */
.hero-image img {
    box-shadow: none !important;
    border-radius: 20px;
    width: 100%;
    height: auto;
}

/* Mobile Hero Adjustments */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .hero-content {
        align-items: center;
    }

    .hero-image {
        max-width: 500px;
        margin: 0 auto;
    }

    .hero-content h1 {
        font-size: 36px;
    }

    .stats-row {
        grid-column: 1;
    }
}

/* FIX MARQUEE VISIBILITY */

/* Increase Hero bottom padding to make room for 2 marquee bands */
.hero.section-bg-cream {
    padding-bottom: 150px !important;
    margin-bottom: 80px !important;
}

/* Make sure marquee container is visible and on top */
.hero-marquee-x-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 100;
    overflow: visible;
}

/* Adjust wrapper positions so both bands are visible */
.hero-marquee-wrapper.wrapper-1 {
    bottom: 40px;
}

.hero-marquee-wrapper.wrapper-2 {
    bottom: 0px;
}

/* Ensure next section doesn't cover marquee */
.works-horizontal-section,
.benefits-section {
    position: relative;
    z-index: 1;
}

/* REMOVE HERO BACKGROUND IMAGE */
.hero {
    background-image: none !important;
    background: var(--bg-cream) !important;
}

/* MARQUEE - CONVERT TO FLOW LAYOUT (NOT ABSOLUTE) */
.hero-marquee-x-container {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin-top: 60px !important;
    height: auto !important;
    overflow: visible !important;
    z-index: 50 !important;
}

.hero-marquee-wrapper {
    position: relative !important;
    bottom: auto !important;
    margin-bottom: 10px;
}

/* Add padding to hero to accommodate */
.hero.section-bg-cream {
    padding-bottom: 40px !important;
    margin-bottom: 0 !important;
}

/* ===========================================
   HERO SECTION - COMPLETE REBUILD
   =========================================== */

/* Hero Container */
.hero {
    position: relative;
    padding-top: 120px;
    padding-bottom: 100px;
    overflow: hidden;
    min-height: 100vh;
}

/* Hero Grid - Two Column Layout */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Hero Content (Left Side) */
.hero-content {
    max-width: 600px;
}

.hero-content .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(196, 164, 132, 0.15);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-rose);
    border: 1px solid rgba(196, 164, 132, 0.3);
    margin-bottom: 20px;
    animation: fadeInUp 0.6s ease-out;
}

.hero-content h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--text-dark);
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.hero-content h1 .text-highlight {
    background: linear-gradient(120deg, var(--primary-rose) 0%, var(--accent-coral) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content>p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 30px;
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

/* Hero Image Container */
.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeInRight 1s ease-out 0.3s backwards;
}

.hero-image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 30px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
}

/* Decorative Circle */
.hero-image .deco-circle {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(196, 164, 132, 0.2), rgba(232, 160, 144, 0.15));
    z-index: 0;
    animation: pulse 4s ease-in-out infinite;
}

/* FLOATING TEXT BADGES */
.float-text {
    position: absolute;
    background: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--primary-rose);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 5;
    white-space: nowrap;
    animation: float-y 3s ease-in-out infinite;
}

.float-text.text-1 {
    top: 10%;
    left: -10%;
    animation-delay: 0s;
}

.float-text.text-2 {
    bottom: 20%;
    right: -5%;
    animation-delay: 1s;
    background: var(--primary-rose);
    color: white;
}

.float-text.text-3 {
    top: 50%;
    left: -15%;
    animation-delay: 2s;
    font-size: 12px;
    padding: 8px 16px;
    background: var(--accent-coral);
    color: white;
}

@keyframes float-y {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes pulse {

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

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

/* Stats Row */
.stats-row {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.stat-item {
    text-align: center;
}

.stat-num {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-rose);
    display: block;
}

.stat-label {
    font-size: 14px;
    color: var(--text-light);
}

/* ===========================================
   DOUBLE X MARQUEE
   =========================================== */
.hero-marquee-x-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    overflow: hidden;
    z-index: 10;
}

.hero-marquee-wrapper {
    position: absolute;
    width: 100%;
    padding: 14px 0;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    left: 0;
}

.wrapper-1 {
    background: var(--primary-rose);
    transform: skewY(-3deg);
    bottom: 10px;
    z-index: 2;
}

.wrapper-2 {
    background: var(--accent-coral);
    transform: skewY(3deg);
    bottom: 0;
    z-index: 1;
}

.hero-marquee-content {
    display: flex;
    white-space: nowrap;
    gap: 0;
    animation: marquee-flow 20s linear infinite;
}

.hero-marquee-content span {
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-marquee-content span svg {
    width: 14px;
    height: 14px;
}

/* Continuous Marquee Animation */
@keyframes marquee-flow {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Reverse for second wrapper */
.wrapper-2 .hero-marquee-content {
    animation: marquee-flow-reverse 25s linear infinite;
}

@keyframes marquee-flow-reverse {
    0% {
        transform: translateX(-50%);
    }

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

/* ===========================================
   RESPONSIVE - TABLET
   =========================================== */
@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .hero-content {
        max-width: 100%;
        order: 2;
    }

    .hero-image {
        order: 1;
        max-width: 400px;
        margin: 0 auto;
    }

    .hero-image img {
        max-width: 100%;
    }

    .float-text.text-1 {
        left: 5%;
        top: 5%;
    }

    .float-text.text-2 {
        right: 5%;
    }

    .float-text.text-3 {
        left: 0;
        top: 40%;
    }

    .stats-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .stat-item {
        flex: 1 1 45%;
        min-width: 120px;
    }
}

/* ===========================================
   RESPONSIVE - MOBILE
   =========================================== */
@media (max-width: 576px) {
    .hero {
        padding-top: 100px;
        padding-bottom: 80px;
        min-height: auto;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .hero-content>p {
        font-size: 16px;
    }

    .hero-image {
        max-width: 300px;
    }

    .float-text {
        font-size: 11px;
        padding: 6px 12px;
    }

    .float-text.text-3 {
        display: none;
    }

    .stats-row {
        gap: 20px;
    }

    .stat-num {
        font-size: 24px;
    }

    .stat-label {
        font-size: 12px;
    }

    .hero-marquee-x-container {
        height: 60px;
    }

    .hero-marquee-content span {
        font-size: 12px;
        padding: 0 20px;
    }
}

/* ===========================================
   HERO REDESIGN - MATCHING REFERENCE IMAGE
   =========================================== */

.hero-new {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, #fdf8f5 0%, #f9f3ef 50%, #fef9f6 100%);
    overflow-x: clip;
    overflow-y: visible;
    padding-top: 100px;
}

/* Background Decorations - Rings */
.hero-bg-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.deco-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(196, 164, 132, 0.15);
}

.ring-1 {
    width: 500px;
    height: 500px;
    top: -100px;
    right: 10%;
    animation: ring-pulse 8s ease-in-out infinite;
}

.ring-2 {
    width: 350px;
    height: 350px;
    top: 30%;
    right: 25%;
    animation: ring-pulse 8s ease-in-out infinite 2s;
}

.ring-3 {
    width: 200px;
    height: 200px;
    bottom: 20%;
    right: 35%;
    animation: ring-pulse 8s ease-in-out infinite 4s;
}

@keyframes ring-pulse {

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

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

/* Hero Layout - Asymmetric Grid */
.hero-layout {
    display: grid;
    grid-template-columns: 45% 55%;
    min-height: calc(100vh - 100px);
    position: relative;
    z-index: 2;
}

/* Left Content */
.hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    padding-left: 8%;
    position: relative;
}

/* Hero Logo */
.hero-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}

.logo-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-rose), var(--accent-coral));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 18px;
}

.logo-text strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    color: var(--text-dark);
}

.logo-text small {
    font-size: 12px;
    color: var(--text-light);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Hero Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(196, 164, 132, 0.2);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-rose);
    border: 1px solid rgba(196, 164, 132, 0.3);
    margin-bottom: 30px;
    width: fit-content;
    animation: fadeInUp 0.6s ease-out;
}

.hero-badge svg {
    width: 14px;
    height: 14px;
}

/* Hero Title */
.hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-dark);
    margin-bottom: 24px;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.hero-title .highlight {
    color: var(--accent-coral);
}

/* Hero Subtitle */
.hero-subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 40px;
    max-width: 400px;
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

/* Hero CTA Button - inherits gradient from .btn-primary */
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 36px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.hero-cta:hover {
    transform: translateY(-3px);
}

.hero-cta svg {
    width: 18px;
    height: 18px;
}

/* Floating Decorative Elements */
.float-deco {
    position: absolute;
    animation: float-gentle 4s ease-in-out infinite;
}

.deco-key {
    bottom: 30%;
    left: 5%;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #d4af37, #f0c850);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
    animation-delay: 0s;
}

.deco-key svg {
    width: 24px;
    height: 24px;
    color: white;
}

.deco-star-1,
.deco-star-2 {
    color: var(--accent-coral);
    font-size: 20px;
    opacity: 0.6;
}

.deco-star-1 {
    top: 20%;
    left: 50%;
    animation-delay: 1s;
}

.deco-star-2 {
    top: 60%;
    left: 60%;
    animation-delay: 2s;
}

@keyframes float-gentle {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(3deg);
    }
}

/* Right Image Section */
.hero-right {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.hero-image-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.hero-image-wrapper img {
    height: 90%;
    max-height: 1000px;
    width: auto;
    object-fit: cover;
    object-position: top center;
    animation: fadeInRight 1s ease-out 0.3s backwards;
}

.image-badge {
    position: absolute;
    bottom: 20%;
    right: 10%;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    animation: float-gentle 5s ease-in-out infinite;
}

.badge-icon {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--primary-rose);
}

/* Marquee X Banners */
.hero-marquee-x {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    overflow: hidden;
    z-index: 10;
}

.marquee-band {
    position: absolute;
    width: 120%;
    left: -10%;
    padding: 14px 0;
    overflow: hidden;
}

.band-top {
    background: var(--accent-coral);
    transform: rotate(-3deg);
    bottom: 30px;
    z-index: 2;
}

.band-bottom {
    background: var(--primary-rose);
    transform: rotate(3deg);
    bottom: 10px;
    z-index: 1;
}

.marquee-track {
    display: flex;
    white-space: nowrap;
    animation: marquee-scroll 25s linear infinite;
}

.marquee-track.reverse {
    animation: marquee-scroll-reverse 30s linear infinite;
}

.marquee-track span {
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 40px;
    flex-shrink: 0;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes marquee-scroll-reverse {
    0% {
        transform: translateX(-50%);
    }

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

/* ===========================================
   RESPONSIVE - TABLET
   =========================================== */
@media (max-width: 992px) {
    .hero-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-left {
        order: 2;
        padding: 40px 5%;
        text-align: center;
        align-items: center;
    }

    .hero-logo {
        justify-content: center;
    }

    .hero-subtitle {
        max-width: 100%;
    }

    .float-deco {
        display: none;
    }

    .hero-right {
        order: 1;
        justify-content: center;
        padding-top: 80px;
    }

    .hero-image-wrapper img {
        max-height: 400px;
    }
}

/* ===========================================
   RESPONSIVE - MOBILE
   =========================================== */
@media (max-width: 576px) {
    .hero-new {
        padding-top: 80px;
    }

    .hero-left {
        padding: 30px 5%;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-cta {
        padding: 16px 28px;
        font-size: 13px;
    }

    .hero-image-wrapper img {
        max-height: 300px;
    }

    .image-badge {
        width: 60px;
        height: 60px;
    }

    .badge-icon {
        font-size: 18px;
    }

    .marquee-track span {
        font-size: 12px;
        padding: 0 25px;
    }
}

/* ===========================================
   HERO FIX - COMPLETE OVERHAUL
   =========================================== */

/* Reset conflicting styles */
.hero-new {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, #fdf8f5 0%, #f9f3ef 50%, #fef9f6 100%);
    overflow: visible !important;
    /* Don't cut off marquee */
    padding-top: 100px;
    padding-bottom: 120px;
    /* Space for marquee */
}

/* Hero Layout Fix */
.hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    min-height: calc(100vh - 220px);
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    align-items: center;
}

/* Left Content Fix */
.hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 40px 0;
}

/* Hero Title Fix - Make sure it's visible */
.hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-dark);
    margin-bottom: 24px;
    position: relative !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Right Image Fix */
.hero-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image-wrapper {
    position: relative;
}

.hero-image-wrapper img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 20px;
}

/* ===========================================
   MARQUEE BANDS - SCROLL-LINKED, NOT CUT
   =========================================== */
.hero-marquee-x {
    position: absolute;
    bottom: 0;
    left: -5%;
    width: 110%;
    height: 100px;
    z-index: 100;
    pointer-events: none;
    overflow: visible !important;
}

.marquee-band {
    position: absolute;
    width: 110%;
    padding: 16px 0;
    overflow: visible !important;
}

.band-top {
    background: var(--accent-coral);
    transform: rotate(-3deg);
    bottom: 40px;
    z-index: 3;
    box-shadow: 0 5px 20px rgba(232, 160, 144, 0.3);
}

.band-bottom {
    background: var(--primary-rose);
    transform: rotate(3deg);
    bottom: 10px;
    z-index: 2;
    box-shadow: 0 5px 20px rgba(196, 164, 132, 0.3);
}

/* Marquee Track - Will be moved by JS on scroll */
.marquee-track {
    display: flex;
    white-space: nowrap;
    will-change: transform;
}

.marquee-track span {
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 0 50px;
    flex-shrink: 0;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 992px) {
    .hero-layout {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .hero-left {
        order: 2;
        align-items: center;
    }

    .hero-right {
        order: 1;
    }

    .hero-image-wrapper img {
        max-width: 350px;
    }

    .float-deco {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-new {
        padding-top: 80px;
        padding-bottom: 100px;
    }

    .hero-title {
        font-size: 28px;
    }

    .marquee-track span {
        font-size: 12px;
        padding: 0 30px;
    }
}

/* ===========================================
   HERO MARQUEE X BANDS - UPDATED STYLING
   =========================================== */

/* Container for both bands */
.hero-marquee-x {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 100;
    pointer-events: none;
    overflow: visible !important;
}

/* Each band uses hero-marquee-wrapper styling */
.marquee-band {
    position: relative;
    width: 100%;
    background: linear-gradient(90deg, var(--primary-rose), var(--accent-coral));
    padding: 15px 0;
    z-index: 10;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 5px;
}

.band-top {
    transform: skewY(-3deg);
}

.band-bottom {
    transform: skewY(3deg);
}

/* Marquee content - scroll-linked */
.marquee-track {
    display: flex;
    white-space: nowrap;
    gap: 0;
    width: 200%;
    will-change: transform;
}

.marquee-track span {
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ===========================================
   GALLERY HOVER CAROUSEL
   =========================================== */
.gallery-carousel-window {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.gallery-carousel {
    display: flex;
    gap: 15px;
    width: max-content;
    animation: gallery-scroll 30s linear infinite;
}

.gallery-carousel:hover {
    animation-play-state: paused;
}

@keyframes gallery-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.gallery-carousel::-webkit-scrollbar {
    display: none;
}

.gallery-card {
    flex: 0 0 280px;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    scroll-snap-align: start;
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-card:hover {
    flex: 0 0 320px;
}

.gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-card:hover .gallery-image {
    height: 50%;
}

.gallery-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: white;
    padding: 25px;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.gallery-card:hover .gallery-content {
    transform: translateY(0);
}

.gallery-tag {
    background: var(--primary-rose);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    width: fit-content;
}

.gallery-content h3 {
    font-size: 20px;
    color: var(--text-dark);
    margin: 10px 0;
}

.gallery-content p {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.5;
    flex-grow: 1;
}

.gallery-arrow {
    width: 40px;
    height: 40px;
    background: var(--primary-rose);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    align-self: flex-end;
    transition: 0.3s;
}

.gallery-arrow:hover {
    background: var(--accent-coral);
    transform: scale(1.1);
}

.gallery-arrow svg {
    width: 18px;
    height: 18px;
}

/* ===========================================
   MARQUEE CONTINUOUS ANIMATION (Bundui Style)
   =========================================== */
.hero-marquee-x {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 100;
    pointer-events: none;
    overflow: visible !important;
}

.marquee-band {
    position: relative;
    width: 100%;
    background: linear-gradient(90deg, var(--primary-rose), var(--accent-coral));
    padding: 15px 0;
    z-index: 10;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 5px;
}

.band-top {
    transform: skewY(-3deg);
}

.band-bottom {
    transform: skewY(3deg);
}

.marquee-track {
    display: flex;
    white-space: nowrap;
    gap: 0;
    animation: marquee-infinite 20s linear infinite;
}

.band-bottom .marquee-track {
    animation: marquee-infinite-reverse 25s linear infinite;
}

.marquee-track span {
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

@keyframes marquee-infinite {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes marquee-infinite-reverse {
    0% {
        transform: translateX(-50%);
    }

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

/* Responsive */
@media (max-width: 768px) {
    .gallery-card {
        flex: 0 0 250px;
        height: 350px;
    }

    .gallery-card:hover {
        flex: 0 0 280px;
    }
}

/* ===========================================
   BUNDUI-STYLE MARQUEE EFFECT
   =========================================== */
.bundui-marquee-container {
    position: absolute;
    bottom: -100px;
    left: 0;
    width: 100vw;
    z-index: 100;
    pointer-events: none;
    overflow: hidden;
    padding: 0;
    display: grid;
    place-items: center;
    height: 350px;
    /* Generous height to avoid clipping */
}

.bundui-band {
    grid-area: 1 / 1;
    width: 200%;
    margin-left: 0;
    padding: 16px 0;
    overflow: hidden;
    background: linear-gradient(90deg, var(--primary-rose), var(--accent-coral));
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.bundui-band.band-1 {
    transform: rotate(-3deg);
    z-index: 2;
}

.bundui-band.band-2 {
    transform: rotate(3deg);
    z-index: 1;
}

.bundui-track {
    display: flex;
    width: max-content;
    animation: bundui-scroll 25s linear infinite;
}

.bundui-track.reverse {
    animation: bundui-scroll-reverse 30s linear infinite;
}

.bundui-content {
    display: flex;
    flex-shrink: 0;
}

.bundui-content span {
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 0 40px;
    white-space: nowrap;
}

@keyframes bundui-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes bundui-scroll-reverse {
    0% {
        transform: translateX(-50%);
    }

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

/* Hover pause effect */
.bundui-band:hover .bundui-track {
    animation-play-state: paused;
}

/* Responsive */
@media (max-width: 768px) {
    .bundui-content span {
        font-size: 12px;
        padding: 0 25px;
    }

    .bundui-band {
        padding: 12px 0;
    }
}

/* ===========================================
   HERO MOBILE - TEXT FIRST, DIFFERENT IMAGE
   =========================================== */

/* Mobile layout - Invert order */
@media (max-width: 768px) {
    .hero-layout {
        display: flex;
        flex-direction: column;
    }

    /* Text comes first on mobile */
    .hero-left {
        order: 1;
        text-align: center;
        padding: 30px 5%;
        align-items: center;
    }

    /* Image comes second on mobile */
    .hero-right {
        order: 2;
        display: flex;
        justify-content: center;
        padding: 20px;
    }

    .hero-image-wrapper {
        max-width: 350px;
    }

    .hero-image-wrapper img {
        max-height: 400px;
        width: 100%;
        object-fit: contain;
    }

    /* Hide floating decorations on mobile */
    .float-deco {
        display: none;
    }

    /* Adjust hero title for mobile */
    .hero-title {
        font-size: 48px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    /* Logo centered */
    .hero-logo {
        justify-content: center;
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    .hero-title {
        font-size: 24px;
    }

    .hero-cta {
        padding: 14px 24px;
        font-size: 12px;
    }

    .hero-image-wrapper img {
        max-height: 300px;
    }
}

/* Logo Size Adjustment */
.hero-logo img {
    max-width: 150px;
    height: auto;
}

@media (max-width: 768px) {
    .hero-logo img {
        max-width: 120px;
    }
}

/* Fix Gallery Carousel - Last Card Cutting Off */
.gallery-carousel {
    padding-right: 50px;
    /* Extra space for last card */
    margin-right: -20px;
    /* Compensate for container padding */
}

/* Alternative: Add spacing after last card */
.gallery-card:last-child {
    margin-right: 50px;
}

/* Ensure container doesn't clip */
#como-funciona .container {
    overflow: visible;
}

#como-funciona {
    padding-top: 50px;
    overflow-x: clip;
    overflow-y: visible;
}

/* Fix Hero Over-scroll White Space */
html,
body {
    background-color: #fdf8f5;
    /* Match hero background */
    overscroll-behavior: none;
    /* Prevent rubber-band effect on iOS/macOS */
}

.hero-new {
    margin-top: 0;
    position: relative;
}

/* Ensure header doesn't create gap */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* ===========================================
   GALLERY CARDS - FIXED LAYOUT (NO HOVER ANIMATION)
   =========================================== */

/* Override hover animations - show content always */
.gallery-card {
    flex: 0 0 280px;
    height: auto !important;
    min-height: 450px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.gallery-image {
    position: relative !important;
    height: 200px !important;
    flex-shrink: 0;
}

.gallery-content {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: white;
}

/* Remove hover effects */
.gallery-card:hover .gallery-image {
    height: 200px !important;
}

.gallery-card:hover .gallery-content {
    transform: none !important;
}

.gallery-card:hover {
    flex: 0 0 280px;
}

/* ===========================================
   MOBILE - STACK VERTICALLY
   =========================================== */
@media (max-width: 768px) {
    .gallery-carousel {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        overflow-x: visible;
        padding: 0;
        width: 100%;
        animation: none;
    }

    .gallery-carousel-window {
        mask-image: none;
        -webkit-mask-image: none;
        overflow: visible;
    }

    /* Hide duplicated cards on mobile */
    .gallery-card:nth-child(n+6) {
        display: none;
    }

    .gallery-card {
        flex: none;
        width: 100%;
        max-width: 400px;
        min-height: auto;
    }

    .gallery-image {
        height: 180px !important;
    }

    .gallery-content {
        padding: 20px;
    }

    .gallery-card:last-child {
        margin-right: 0;
    }
}

/* Mobile Fixed Elements (Hidden by default on desktop) */
.mobile-bottom-bar,
.mobile-floating-whatsapp,
.mobile-marquee {
    display: none !important;
}

/* Mobile Marquee Styling */
.mobile-marquee .bundui-band {
    width: 120%;
    margin-left: -10%;
    background: var(--primary-rose);
    padding: 8px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.mobile-marquee .mobile-band-1 {
    transform: rotate(-3deg) translateY(5px);
    z-index: 1;
}

.mobile-marquee .mobile-band-2 {
    transform: rotate(2deg) translateY(-5px);
    background: var(--accent-coral) !important;
    z-index: 2;
}

@media (max-width: 900px) {

    /* Hide Standard Header & Desktop Marquee */
    header,
    .desktop-marquee {
        display: none !important;
    }

    .hero-new {
        padding-top: 30px !important;
    }

    /* Show Mobile Elements */
    .mobile-marquee {
        display: block !important;
        margin-top: 30px;
        margin-bottom: 10px;
        overflow: hidden;
        position: relative;
        height: 100px;
        /* Force height for crossing bands */
        display: flex !important;
        flex-direction: column;
        justify-content: center;
    }

    .mobile-bottom-bar {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        padding: 15px 20px;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        padding-bottom: max(15px, env(safe-area-inset-bottom));
    }

    .mobile-bar-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .mobile-bar-text {
        font-weight: 600;
        color: var(--text-dark);
        font-size: 14px;
        line-height: 1.2;
    }

    .mobile-btn {
        padding: 12px 20px !important;
        font-size: 13px !important;
        min-width: auto !important;
        white-space: nowrap;
    }

    .mobile-floating-whatsapp {
        display: flex !important;
        position: fixed;
        bottom: 100px;
        /* Above the bottom bar */
        right: 20px;
        width: 60px;
        height: 60px;
        background: #25D366;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        color: white;
        box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
        z-index: 1000;
        transition: transform 0.3s;
        animation: float-gentle 3s ease-in-out infinite;
    }

    .mobile-floating-whatsapp svg {
        width: 30px;
        height: 30px;
        fill: white;
        stroke: none;
    }

    /* Add padding to body to prevent content being hidden behind bottom bar */
    body {
        padding-bottom: 80px;
    }

    /* Fix Mentor Card Mobile Alignment */
    .mentor-stack-card {
        align-items: start !important;
        /* Align content to top */
    }

    .mentor-card-image {
        /* Ensure image doesn't stretch or auto-center weirdly */
        align-self: start;
    }
}

@keyframes float-gentle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

}

/* MOBILE OVERRIDE FOR MENTORS SECTION - STATIC CARDS */
/* MOBILE OVERRIDE FOR MENTORS SECTION - STATIC STACK */
@media (max-width: 768px) {
    .mentors-stack-container {
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding-bottom: 0;
        height: auto !important;
        overflow-x: visible;
        /* Disable carousel */
    }

    /* Remove scrollbar styling from carousel version */
    .mentors-stack-container::-webkit-scrollbar {
        display: none;
    }

    .mentor-stack-card {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-width: auto;
        /* Reset width */
        margin: 0 !important;
        transform: none !important;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        scroll-snap-align: none;
        /* Disable snap */
        border-radius: 20px;
    }

    .mentor-card-image {
        position: relative;
        height: 250px;
        width: 100%;
        border-radius: 20px 20px 0 0;
    }

    .mentor-card-content {
        position: relative;
        padding: 30px;
        background: white;
        border-radius: 0 0 20px 20px;
    }

    /* Hide any overlay stuff if it was being used */
    .mentor-card-overlay {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        background: none;
        backdrop-filter: none;
        padding: 0;
        box-shadow: none;
        transform: none;
        margin-top: 15px;
    }


    .mentor-card-overlay h3 {
        font-size: 24px;
        color: var(--text-dark);
    }
}

/* MOBILE OVERRIDE - REMOVE ALL STACKING ANIMATIONS (CRONOGRAMA & HOW IT WORKS) */
@media (max-width: 768px) {

    /* 1. Cronograma */
    .cronograma-stack-container {
        padding-bottom: 0;
    }

    .cronograma-card {
        position: relative !important;
        top: auto !important;
        margin-bottom: 30px !important;
        transform: none !important;
        z-index: 1 !important;
    }

    .cronograma-card:nth-child(n) {
        top: auto !important;
    }

    /* 2. How it Works (Sticky Scroll) */
    .works-scroll-container {
        height: auto !important;
    }

    .works-sticky-wrapper {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        display: block !important;
        overflow: visible !important;
    }

    .works-cards-stack {
        height: auto !important;
        display: flex;
        flex-direction: column;
        gap: 30px;
        position: relative !important;
    }

    .works-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        opacity: 1 !important;
        width: 100% !important;
        margin-bottom: 20px;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
}

/* Pricing Section */
.section-bg-dark-gradient {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d1b2d 100%);
    color: white;
}

.pricing-container {
    max-width: 900px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 2px solid var(--primary-rose);
    max-width: 600px;
    margin: 0 auto;
}

.pricing-badge {
    position: absolute;
    top: 30px;
    right: -35px;
    background: var(--accent-coral);
    color: white;
    padding: 8px 40px;
    transform: rotate(45deg);
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.pricing-header h3 {
    color: var(--primary-rose);
    font-size: 28px;
    margin-bottom: 10px;
    font-family: var(--font-serif);
}

.pricing-description {
    color: var(--text-light);
    margin-bottom: 30px;
    font-size: 16px;
}

.price-display {
    margin: 30px 0;
    padding: 25px;
    background: var(--bg-cream);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.price-anchor {
    text-decoration: line-through;
    color: #999;
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.price-value {
    display: block;
    font-size: 42px;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.1;
    letter-spacing: -1px;
}

.price-value span {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    vertical-align: middle;
}

.price-value small {
    font-size: 24px;
}

.price-condition {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: var(--primary-rose);
    font-weight: 600;
}

.pricing-features {
    margin: 30px 0;
    text-align: left;
    display: inline-block;
}

.pricing-features li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 15px;
}

.pricing-features li svg {
    color: #27ae60;
    width: 20px;
    height: 20px;
    stroke-width: 3;
}

/* Mobile Pricing */
@media (max-width: 768px) {
    .pricing-card {
        padding: 30px 20px;
    }

    .price-value {
        font-size: 32px;
    }

    .pricing-header h3 {
        font-size: 24px;
    }
}