/* FUTURO PRO - ELITE THEME v2 */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Teko:wght@300;400;500;600;700&display=swap');

:root {
    --bg-deep: #050505;
    --bg-surface: #101012;
    --bg-glass: rgba(20, 20, 22, 0.7);

    --brand-primary: #EAB308;
    /* Gold */
    --brand-accent: #E5E7EB;
    /* Platinum Silver */
    --brand-pop: #F97316;
    /* Energy Orange */

    --text-white: #FFFFFF;
    --text-silver: #D4D4D8;
    --text-dim: #71717A;

    --font-heading: 'Teko', sans-serif;
    --font-body: 'Chakra Petch', sans-serif;

    --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
}

body {
    width: 100%;
    background-color: var(--bg-deep);
    color: var(--text-white);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    position: relative;
    /* Silver Top / Gold Bottom Gradient */
    background:
        radial-gradient(circle at 80% 20%, rgba(229, 231, 235, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(250, 204, 21, 0.08) 0%, transparent 50%),
        #050505;
    /* Fallback */
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

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

button {
    cursor: pointer;
    border: none;
    outline: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* --- TYPOGRAPHY --- */
.display-title {
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 700;
    line-height: 0.85;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #fff 0%, #9ca3af 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    position: relative;
    z-index: 10;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 16px;
}

.text-gold {
    color: var(--brand-primary);
}

.text-green {
    color: var(--brand-primary);
}

.text-red {
    color: #EF4444;
}

.text-pop {
    color: var(--brand-pop);
}

/* --- UI COMPONENTS --- */
.btn-primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 18px 40px;
    background: var(--brand-primary);
    color: #000;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: all 0.3s var(--ease-elastic);
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Default to full width in cards */
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 30px rgba(234, 179, 8, 0.4);
}

.btn-secondary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 18px 40px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: all 0.3s ease;
    width: 100%;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #fff;
}

/* --- HERO --- */
.hero-wrapper {
    min-height: 100vh;
    padding-top: 30px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.hero-visual-center {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 20px auto 40px;
    z-index: 5;
    perspective: 1000px;
}

.pillar-img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.main-hero-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: rotateX(5deg);
    transition: transform 0.5s ease;
}

.main-hero-img:hover {
    transform: rotateX(0deg) scale(1.02);
}

/* Floating Badges */
.hero-badge {
    position: absolute;
    background: #000;
    border: 1px solid var(--brand-primary);
    color: #fff;
    padding: 8px 16px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    text-transform: uppercase;
    z-index: 6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.hb-left {
    bottom: 10%;
    left: -20px;
    transform: rotate(-3deg);
}

.hb-right {
    top: 15%;
    right: -20px;
    transform: rotate(3deg);
    background: var(--brand-accent);
    border-color: #fff;
    color: #000;
}

/* --- PRICING GRID (NEW) --- */
.offer-section {
    padding: 80px 0 120px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 900px;
    margin: 60px auto 0;
    align-items: center;
}

.plan-card {
    background: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 40px 30px;
    position: relative;
    transition: transform 0.3s;
}

.plan-card.premium {
    background: linear-gradient(145deg, #1a1a1c 0%, #0d0d0f 100%);
    border: 1px solid var(--brand-primary);
    box-shadow: 0 0 40px rgba(234, 179, 8, 0.15);
    transform: scale(1.05);
    /* Slightly larger */
    z-index: 2;
}

/* Plan Header */
.plan-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #fff;
    margin-bottom: 10px;
}

.plan-price {
    font-size: 3.5rem;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 30px;
    color: #fff;
}

.plan-price small {
    font-size: 1.5rem;
    vertical-align: top;
    color: var(--text-dim);
}

.best-seller-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-primary);
    color: #000;
    font-family: var(--font-heading);
    font-weight: 700;
    padding: 5px 20px;
    border-radius: 100px;
    text-transform: uppercase;
    font-size: 1rem;
    box-shadow: 0 5px 15px rgba(234, 179, 8, 0.4);
}

/* Features List */
.plan-features {
    list-style: none;
    margin-bottom: 40px;
    text-align: left;
}

.plan-features li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-silver);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.plan-features li:last-child {
    border-bottom: none;
}

.check-icon {
    color: var(--brand-accent);
    font-weight: bold;
}

.check-icon.gold {
    color: var(--brand-primary);
}

/* --- OTHER SECTIONS --- */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin: 60px 0;
}

.pillar-card {
    background: var(--bg-surface);
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s, border-color 0.3s, background 0.3s;
    position: relative;
    overflow: hidden;
}

.pillar-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-primary);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(234, 179, 8, 0.05) 100%);
}

.pillar-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: inline-block;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

.pillar-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 10px;
}

.pillar-text {
    color: var(--text-dim);
    font-size: 0.95rem;
}

@media (max-width: 800px) {
    .pillars-grid {
        grid-template-columns: 1fr;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .plan-card.premium {
        transform: scale(1);
    }

    .display-title {
        font-size: 3.5rem;
    }
}

/* Video Wrapper */
.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-slideshow {
    position: absolute;
    inset: 0;
    display: none;
}

.video-slideshow.active {
    display: block;
}

.v-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.v-slide.active-slide {
    opacity: 1;
    z-index: 2;
}

.v-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    filter: grayscale(80%) contrast(1.2);
    animation: zoomCinematic 20s infinite alternate;
    z-index: 1;
}

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

    to {
        transform: scale(1.2);
    }
}

.v-content-text {
    position: relative;
    z-index: 5;
}

.v-content-text h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    color: white;
    text-shadow: 0 4px 10px #000;
}

.big-play-btn {
    width: 80px;
    height: 80px;
    background: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(25% 0%, 100% 50%, 25% 100%);
    cursor: pointer;
    transition: transform 0.2s;
}

.big-play-btn:hover {
    transform: scale(1.1);
}

/* Sticky CTA */
.floating-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    width: 90%;
    max-width: 400px;
    background: #000;
    border: 1px solid var(--brand-primary);
    padding: 12px 20px;
    transform: translateX(-50%) translateY(200%);
    transition: transform 0.4s ease;
    z-index: 99;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
}

.floating-bar.active {
    transform: translateX(-50%) translateY(0);
}

/* APP SHOWCASE SECTION (NEW) */
.app-showcase {
    padding: 100px 0;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

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

.app-text-col {
    order: 1;
}

.app-visual-col {
    order: 2;
    position: relative;
}

.app-mockup-img {
    width: 100%;
    max-width: 600px;
    filter: drop-shadow(0 0 40px rgba(34, 197, 94, 0.2));
    animation: float-slow 6s ease-in-out infinite;
    transform: perspective(1000px) rotateY(-5deg);
}

.app-feature-list {
    list-style: none;
    margin-top: 40px;
}

.app-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid transparent;
    transition: all 0.3s;
}

.app-feature-item:hover {
    transform: translateX(10px);
    border-color: var(--brand-primary);
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.1);
}

.app-icon-box {
    width: 50px;
    height: 50px;
    background: var(--brand-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    color: #000;
}

.app-feature-content h4 {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.app-feature-content p {
    color: var(--text-silver);
    font-size: 0.95rem;
    line-height: 1.4;
}

@keyframes float-slow {
    0% {
        transform: perspective(1000px) rotateY(-5deg) translateY(0px);
    }

    50% {
        transform: perspective(1000px) rotateY(-5deg) translateY(-20px);
    }

    100% {
        transform: perspective(1000px) rotateY(-5deg) translateY(0px);
    }
}

@media (max-width: 900px) {
    .app-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .app-visual-col {
        order: 1;
        text-align: center;
    }

    .app-text-col {
        order: 2;
    }

    .app-mockup-img {
        transform: none;
        animation: none;
    }
}

/* SOCIAL PROOF SECTION */
.social-proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 40px;
    align-items: start;
}

.proof-item {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s;
}

.proof-item:hover {
    transform: translateY(-5px);
    border-color: var(--brand-primary);
}

.proof-placeholder {
    width: 100%;
    aspect-ratio: 9/16;
    background: #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 0.9rem;
    padding: 20px;
    text-align: center;
}


/* MODAL UPSELL */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    padding: 20px;
    backdrop-filter: blur(5px);
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    max-width: 500px;
    width: 100%;
    text-align: center;
    border: 1px solid var(--brand-pop);
    box-shadow: 0 0 100px rgba(249, 115, 22, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #101012;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

/* SALES NOTIFICATION TOAST */
.sale-notification {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #101012;
    border: 1px solid #333;
    border-left: 4px solid var(--brand-primary);
    border-radius: 8px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transform: translateX(-150%);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-width: 300px;
}

.sale-notification.active {
    transform: translateX(0);
}

.sale-icon {
    width: 40px;
    height: 40px;
    background: var(--brand-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.sale-info h4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 2px;
}

.sale-info p {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.sale-info span {
    border-left: 3px solid transparent;
    transition: all 0.3s;
}

.app-feature-item:hover {
    transform: translateX(10px);
    border-color: var(--brand-primary);
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.1);
}

.app-icon-box {
    width: 50px;
    height: 50px;
    background: var(--brand-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    color: #000;
}

.app-feature-content h4 {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.app-feature-content p {
    color: var(--text-silver);
    font-size: 0.95rem;
    line-height: 1.4;
}

@keyframes float-slow {
    0% {
        transform: perspective(1000px) rotateY(-5deg) translateY(0px);
    }

    50% {
        transform: perspective(1000px) rotateY(-5deg) translateY(-20px);
    }

    100% {
        transform: perspective(1000px) rotateY(-5deg) translateY(0px);
    }
}

@media (max-width: 900px) {
    .app-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .app-visual-col {
        order: 1;
        text-align: center;
    }

    .app-text-col {
        order: 2;
    }

    .app-mockup-img {
        transform: none;
        animation: none;
    }
}

/* SOCIAL PROOF SECTION */
.social-proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 40px;
    align-items: stretch;
}

.proof-item {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.proof-item img {
    width: 100%;
    /* Keep aspect ratio natural, let white bg fill rest */
    height: auto;
    object-fit: cover;
    flex-grow: 0;
}

.proof-item:hover {
    transform: translateY(-5px);
    border-color: var(--brand-primary);
}

.proof-placeholder {
    width: 100%;
    aspect-ratio: 9/16;
    background: #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 0.9rem;
    padding: 20px;
    text-align: center;
}


/* MODAL UPSELL */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    padding: 20px;
    backdrop-filter: blur(5px);
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    max-width: 500px;
    width: 100%;
    text-align: center;
    border: 1px solid var(--brand-pop);
    box-shadow: 0 0 100px rgba(249, 115, 22, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #101012;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

/* SALES NOTIFICATION TOAST */
.sale-notification {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #101012;
    border: 1px solid #333;
    border-left: 4px solid var(--brand-primary);
    border-radius: 8px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transform: translateX(-150%);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-width: 300px;
}

.sale-notification.active {
    transform: translateX(0);
}

.sale-icon {
    width: 40px;
    height: 40px;
    background: var(--brand-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.sale-info h4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 2px;
}

.sale-info p {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.sale-info span {
    color: var(--brand-primary);
    font-weight: 600;
}

@media (max-width: 768px) {
    .sale-notification {
        left: 50%;
        transform: translateX(-50%) translateY(150%);
        bottom: 110px;
        /* Lifted up to clear the sticky cart */
        width: 90%;
        min-width: auto;
    }

    .sale-notification.active {
        transform: translateX(-50%) translateY(0);
    }

    /* Mobile Sticky Cart Always Visible via CSS Override */
    #sticky-cta.floating-bar {
        width: 100%;
        max-width: none;
        bottom: 0;
        left: 0;
        transform: none !important;
        /* Force visible */
        border-radius: 15px 15px 0 0;
        border: none;
        border-top: 2px solid var(--brand-primary);
        padding: 15px 20px;
        justify-content: space-between;
        background: #000;
        z-index: 1001;
        /* Higher than toast */
    }

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

    /* Mobile Carousel for Social Proof */
    .social-proof-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding-bottom: 20px;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        /* Ensure items start from left */
        align-items: stretch;
        /* Make all cards same height */
    }

    .proof-item {
        min-width: 85%;
        flex: 0 0 85%;
        /* Don't grow, don't shrink, fixed 85% basis */
        scroll-snap-align: center;
        margin-right: 0;
        background: #fff;
        /* Fill empty space with white to match screenshots */
        display: flex;
        flex-direction: column;
    }

    .proof-item img {
        flex-grow: 1;
        object-fit: cover;
        /* Ensure it covers the area if slightly off, but mainly relies on white bg */
        object-position: top;
        /* Anchor to top */
        width: 100%;
        height: 100%;
    }


}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(234, 179, 8, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(234, 179, 8, 0);
    }
}

/* --- WHAT YOU GET SECTION --- */
.what-you-get-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.wyg-card {
    background: #151517;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 30px;
    text-align: left;
    transition: transform 0.3s ease, border-color 0.3s;
}

.wyg-card:hover {
    border-color: var(--brand-primary);
    transform: translateY(-5px);
}

.wyg-icon {
    font-size: 2.5rem;
    color: var(--brand-primary);
    /* Gold/Yellow */
    margin-bottom: 20px;
    display: inline-block;
}

.wyg-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 600;
}

.wyg-desc {
    font-size: 1rem;
    color: var(--text-silver);
    line-height: 1.5;
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {

    /* App Showcase Stack */
    .app-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
        /* Center text on mobile for better flow */
    }

    .app-text-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .app-feature-item {
        text-align: left;
        /* Keep feature text left-aligned for readability */
    }

    /* Adjust Visual Order if needed, or keep text first. 
       Usually text first is better for context, but visual first is more engaging.
       Let's keep text first based on current flow, but ensure images fit. */

    .display-title {
        font-size: 2.2rem !important;
        /* Prevent huge titles breaking layout */
        line-height: 1.2;
    }

    .section-title {
        font-size: 2rem;
    }

    /* Pillars Optimization */
    .pillar-img {
        height: 160px;
        /* Smaller height on mobile to save vertical space */
        margin-top: 10px;
    }

    .pillar-card {
        padding: 20px;
        /* Reduce padding */
    }

    /* Hero Tweaks */
    .hero-wrapper {
        padding-top: 20px;
    }

    .vsl-container {
        max-width: 100%;
        /* Allow full width on very small screens if needed, but keeping 350px max is safe */
    }

    /* General Padding */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}