/**
 * Stylesheet for: freelance-smo-social-media-optimization.php
 * Extracted from internal style tags
 */

/* ========================================================
               FREELANCE SMO & SOCIAL MEDIA OPTIMIZATION (FSMO)
               Prestigious Forest Green, Emerald & Gold Luxury Aesthetic
               ======================================================== */
            :root {
                --fsaas-green: #082c23;
                --fsaas-dark: #051f18;
                --fsaas-gold: #c69c6d;
                --fsaas-gold-hover: #b58957;
                --fsaas-cream: #fbf9f5;
                --fsaas-light: #f5eee3;
                --fsaas-border: #e6ddce;
                --fsaas-text: #1b2622;
                --fsaas-muted: #53645f;

                /* Scoped variables for FSMO */
                --fsmo-green: var(--fsaas-green);
                --fsmo-dark: var(--fsaas-dark);
                --fsmo-gold: var(--fsaas-gold);
                --fsmo-gold-hover: var(--fsaas-gold-hover);
                --fsmo-cream: var(--fsaas-cream);
                --fsmo-light: var(--fsaas-light);
                --fsmo-border: var(--fsaas-border);
                --fsmo-text: var(--fsaas-text);
                --fsmo-muted: var(--fsaas-muted);
                --fsmo-font-heading: 'Marcellus', serif;
                --fsmo-font-body: 'Inter', sans-serif;
            }

            html {
                scroll-behavior: smooth;
            }

            .fsmo-section,
            #about,
            #services,
            #profile-opt,
            #content-strategy,
            #platforms,
            #why-hire,
            #process,
            #portfolio,
            #pricing,
            #faq,
            #contact {
                scroll-margin-top: 105px;
            }

            /* Breadcrumb override */
            ul.breadcrumb {
                column-gap: 10px;
                padding: 25px 0 10px 0;
                font-size: 13.5px !important;
                margin-bottom: 0;
            }

            ul.breadcrumb li a {
                color: rgba(255, 255, 255, 0.75);
                text-decoration: none;
                transition: color 0.25s ease;
            }

            ul.breadcrumb li a:hover {
                color: var(--fsmo-gold);
            }

            ul.breadcrumb li i {
                color: rgba(255, 255, 255, 0.4);
                font-size: 11px;
            }

            ul.breadcrumb li span {
                color: var(--fsmo-gold);
                font-weight: 600;
            }

            /* Section Base Styles */
            .fsmo-section {
                padding: 95px 0;
                position: relative;
            }

            .fsmo-section-alt {
                background-color: var(--fsmo-cream);
            }

            .fsmo-section-white {
                background-color: #ffffff;
            }

            .fsmo-section-dark {
                background: linear-gradient(135deg, var(--fsmo-dark) 0%, var(--fsmo-green) 100%);
                color: #ffffff;
            }

            .fsmo-section-green {
                background-color: var(--fsmo-green);
                color: #ffffff;
            }

            /* Typography */
            .fsmo-heading {
                font-family: var(--fsmo-font-heading);
                font-weight: 600;
                line-height: 1.25;
                color: var(--fsmo-dark);
            }

            .fsmo-heading-light {
                color: #ffffff !important;
            }

            .fsmo-lead {
                font-family: var(--fsmo-font-body);
                color: var(--fsmo-muted);
                font-size: 16.5px;
                line-height: 1.7;
            }

            .fsmo-lead-light {
                color: rgba(255, 255, 255, 0.85) !important;
            }

            /* Badges */
            .fsmo-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(198, 156, 109, 0.14);
                color: var(--fsmo-gold);
                border: 1px solid rgba(198, 156, 109, 0.35);
                border-radius: 50px;
                padding: 7px 18px;
                font-size: 12.5px;
                font-weight: 700;
                letter-spacing: 1.2px;
                text-transform: uppercase;
                margin-bottom: 16px;
            }

            .fsmo-badge-dark {
                background: rgba(8, 44, 35, 0.08);
                color: var(--fsmo-green);
                border: 1px solid rgba(8, 44, 35, 0.18);
            }

            .fsmo-badge-white {
                background: rgba(255, 255, 255, 0.1);
                color: #ffffff;
                border: 1px solid rgba(255, 255, 255, 0.22);
            }

            /* Buttons - 50px Pill Style */
            .btn-fsmo-gold {
                background: linear-gradient(135deg, var(--fsmo-gold) 0%, var(--fsmo-gold-hover) 100%);
                color: #ffffff !important;
                border: none;
                padding: 14px 32px;
                border-radius: 50px !important;
                font-weight: 600;
                font-size: 15px;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                transition: all 0.3s ease;
                box-shadow: 0 4px 18px rgba(198, 156, 109, 0.35);
                text-decoration: none;
            }

            .btn-fsmo-gold:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(198, 156, 109, 0.5);
                color: #ffffff !important;
            }

            .btn-fsmo-outline {
                background: transparent;
                color: #ffffff !important;
                border: 1.5px solid rgba(255, 255, 255, 0.35);
                padding: 13px 30px;
                border-radius: 50px !important;
                font-weight: 600;
                font-size: 15px;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                transition: all 0.3s ease;
                text-decoration: none;
            }

            .btn-fsmo-outline:hover {
                border-color: var(--fsmo-gold);
                color: var(--fsmo-gold) !important;
                background: rgba(198, 156, 109, 0.08);
                transform: translateY(-2px);
            }

            .btn-fsmo-outline-dark {
                background: transparent;
                color: var(--fsmo-green) !important;
                border: 1.5px solid var(--fsmo-green);
                padding: 13px 30px;
                border-radius: 50px !important;
                font-weight: 600;
                font-size: 15px;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                transition: all 0.3s ease;
                text-decoration: none;
            }

            .btn-fsmo-outline-dark:hover {
                background: var(--fsmo-green);
                color: #ffffff !important;
                transform: translateY(-2px);
            }

            /* Universal Pill Button Radius */
            .fsmo-section .btn,
            .fsmo-hero .btn,
            .fsmo-final-cta-section .btn,
            .fsmo-filter-btn,
            .fsmo-pricing-card .btn,
            .fsmo-port-card .btn {
                border-radius: 50px !important;
            }

            /* Cards General */
            .fsmo-card {
                background: #ffffff;
                border: 1px solid var(--fsmo-border);
                border-radius: 14px;
                padding: 32px 28px;
                height: 100%;
                transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
                position: relative;
                overflow: hidden;
            }

            .fsmo-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 16px 36px rgba(8, 44, 35, 0.08);
                border-color: rgba(198, 156, 109, 0.5);
            }

            .fsmo-card-dark {
                background: rgba(255, 255, 255, 0.04);
                border: 1px solid rgba(255, 255, 255, 0.1);
                color: #ffffff;
            }

            .fsmo-card-dark:hover {
                background: rgba(255, 255, 255, 0.07);
                border-color: var(--fsmo-gold);
                box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
            }

            .fsmo-card-icon {
                width: 58px;
                height: 58px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                margin-bottom: 22px;
                transition: transform 0.3s ease;
            }

            .fsmo-card:hover .fsmo-card-icon {
                transform: scale(1.1);
            }

            .fsmo-icon-gold {
                background: rgba(198, 156, 109, 0.15);
                color: var(--fsmo-gold);
                border: 1px solid rgba(198, 156, 109, 0.3);
            }

            .fsmo-icon-green {
                background: rgba(8, 44, 35, 0.08);
                color: var(--fsmo-green);
                border: 1px solid rgba(8, 44, 35, 0.15);
            }

            .fsmo-icon-white {
                background: rgba(255, 255, 255, 0.12);
                color: var(--fsmo-gold);
                border: 1px solid rgba(255, 255, 255, 0.2);
            }

            /* HERO SECTION (01) */
            .fsmo-hero {
                background: linear-gradient(135deg, var(--fsmo-dark) 0%, #062820 60%, var(--fsmo-green) 100%);
                color: #ffffff;
                padding: 100px 0 85px 0;
                position: relative;
                overflow: hidden;
            }

            .fsmo-hero::before {
                content: '';
                position: absolute;
                top: -120px;
                right: -100px;
                width: 480px;
                height: 480px;
                background: radial-gradient(circle, rgba(198, 156, 109, 0.15) 0%, transparent 70%);
                pointer-events: none;
            }

            .fsmo-hero-title {
                font-size: 50px;
                line-height: 1.18;
                font-weight: 700;
                margin-bottom: 20px;
                color: white;
                font-family: var(--fsmo-font-heading);
            }

            .fsmo-hero-title span {
                color: var(--fsmo-gold);
            }

            .fsmo-hero-sub {
                font-size: 19.5px;
                line-height: 1.55;
                color: rgba(255, 255, 255, 0.9);
                margin-bottom: 30px;
                max-width: 620px;
                font-weight: 300;
            }

            /* Hero Live Social Dashboard Mockup */
            .fsmo-hero-board {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.14);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border-radius: 18px;
                padding: 28px;
                box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
            }

            .fsmo-hero-board-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                padding-bottom: 16px;
                margin-bottom: 20px;
            }

            .fsmo-hero-stat-box {
                background: rgba(255, 255, 255, 0.04);
                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 12px;
                padding: 16px;
                margin-bottom: 14px;
                transition: transform 0.25s ease;
            }

            .fsmo-hero-stat-box:hover {
                transform: translateX(4px);
                border-color: rgba(198, 156, 109, 0.4);
            }

            /* Stats Counter Strip */
            .fsmo-stats-strip {
                background: #ffffff;
                border-top: 1px solid var(--fsmo-border);
                border-bottom: 1px solid var(--fsmo-border);
                padding: 38px 0;
            }

            .fsmo-stat-item {
                text-align: center;
                padding: 12px 20px;
            }

            .fsmo-stat-number {
                font-family: var(--fsmo-font-heading);
                font-size: 44px;
                font-weight: 700;
                color: var(--fsmo-green);
                line-height: 1;
                margin-bottom: 8px;
            }

            .fsmo-stat-label {
                font-size: 14px;
                color: var(--fsmo-muted);
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.8px;
            }

            /* Process Step Roadmap */
            .fsmo-process-step {
                position: relative;
                padding-left: 70px;
                margin-bottom: 35px;
            }

            .fsmo-process-num {
                position: absolute;
                left: 0;
                top: 0;
                width: 48px;
                height: 48px;
                border-radius: 50%;
                background: var(--fsmo-green);
                color: var(--fsmo-gold);
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: var(--fsmo-font-heading);
                font-size: 18px;
                font-weight: 700;
                border: 2px solid var(--fsmo-gold);
                box-shadow: 0 4px 12px rgba(8, 44, 35, 0.2);
            }

            .fsmo-process-step::after {
                content: '';
                position: absolute;
                left: 23px;
                top: 50px;
                bottom: -25px;
                width: 2px;
                background: repeating-linear-gradient(to bottom, var(--fsmo-gold), var(--fsmo-gold) 6px, transparent 6px, transparent 12px);
            }

            .fsmo-process-step:last-child::after {
                display: none;
            }

            /* Platform Cards */
            .fsmo-platform-card {
                background: #ffffff;
                border: 1px solid var(--fsmo-border);
                border-radius: 14px;
                padding: 28px 24px;
                text-align: center;
                transition: all 0.3s ease;
                height: 100%;
            }

            .fsmo-platform-card:hover {
                transform: translateY(-6px);
                border-color: var(--fsmo-gold);
                box-shadow: 0 16px 36px rgba(8, 44, 35, 0.08);
            }

            .fsmo-platform-icon {
                font-size: 40px;
                margin-bottom: 16px;
                display: inline-block;
                transition: transform 0.3s ease;
            }

            .fsmo-platform-card:hover .fsmo-platform-icon {
                transform: scale(1.15);
            }

            /* Portfolio Filter & Cards */
            .fsmo-filter-btn {
                background: transparent;
                border: 1px solid var(--fsmo-border);
                color: var(--fsmo-muted);
                padding: 8px 22px;
                border-radius: 50px !important;
                font-size: 14px;
                font-weight: 600;
                margin: 4px;
                transition: all 0.25s ease;
                cursor: pointer;
            }

            .fsmo-filter-btn:hover,
            .fsmo-filter-btn.active {
                background: var(--fsmo-green);
                color: #ffffff;
                border-color: var(--fsmo-green);
            }

            .fsmo-port-card {
                border-radius: 14px;
                overflow: hidden;
                border: 1px solid var(--fsmo-border);
                background: #ffffff;
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
                transition: all 0.35s ease;
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .fsmo-port-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 16px 36px rgba(8, 44, 35, 0.12);
                border-color: var(--fsmo-gold);
            }

            .fsmo-port-img-wrap {
                position: relative;
                overflow: hidden;
                background: #eee;
                height: 220px;
            }

            .fsmo-port-img-wrap img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.4s ease;
            }

            .fsmo-port-card:hover .fsmo-port-img-wrap img {
                transform: scale(1.05);
            }

            .fsmo-port-body {
                padding: 24px;
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            /* Pricing Cards */
            .fsmo-pricing-card {
                background: #ffffff;
                border: 1.5px solid var(--fsmo-border);
                border-radius: 16px;
                padding: 38px 30px;
                transition: all 0.3s ease;
                position: relative;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            .fsmo-pricing-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 40px rgba(8, 44, 35, 0.1);
                border-color: var(--fsmo-gold);
            }

            .fsmo-pricing-featured {
                background: linear-gradient(180deg, #ffffff 0%, var(--fsmo-cream) 100%);
                border: 2px solid var(--fsmo-gold);
                box-shadow: 0 15px 35px rgba(198, 156, 109, 0.2);
            }

            .fsmo-pricing-badge {
                position: absolute;
                top: -14px;
                right: 25px;
                background: linear-gradient(135deg, var(--fsmo-gold) 0%, var(--fsmo-gold-hover) 100%);
                color: #ffffff;
                font-size: 12px;
                font-weight: 700;
                padding: 4px 16px;
                border-radius: 20px;
                letter-spacing: 0.8px;
                text-transform: uppercase;
            }

            .fsmo-price {
                font-family: var(--fsmo-font-heading);
                font-size: 38px;
                font-weight: 700;
                color: var(--fsmo-green);
                line-height: 1;
                margin: 15px 0 8px 0;
            }

            /* FAQ Accordion */
            .fsmo-faq-item {
                background: #ffffff;
                border: 1px solid var(--fsmo-border);
                border-radius: 12px;
                margin-bottom: 14px;
                overflow: hidden;
                transition: all 0.25s ease;
            }

            .fsmo-faq-item.active {
                border-color: var(--fsmo-gold);
                box-shadow: 0 6px 18px rgba(8, 44, 35, 0.06);
            }

            .fsmo-faq-question {
                padding: 22px 26px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                font-weight: 600;
                font-size: 17px;
                color: var(--fsmo-dark);
                user-select: none;
            }

            .fsmo-faq-question i {
                color: var(--fsmo-gold);
                transition: transform 0.3s ease;
            }

            .fsmo-faq-item.active .fsmo-faq-question i {
                transform: rotate(180deg);
            }

            .fsmo-faq-answer {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.35s ease, padding 0.35s ease;
                background-color: var(--fsmo-cream);
                color: var(--fsmo-muted);
                line-height: 1.7;
                font-size: 15.5px;
            }

            .fsmo-faq-item.active .fsmo-faq-answer {
                max-height: 400px;
                padding: 18px 26px 24px 26px;
                border-top: 1px solid var(--fsmo-border);
            }

            /* Final CTA Section */
            .fsmo-final-cta-section {
                background: linear-gradient(135deg, var(--fsmo-dark) 0%, var(--fsmo-green) 100%);
                padding: 100px 0;
                color: #ffffff;
                position: relative;
            }

            @media (max-width: 991px) {
                .fsmo-hero-title {
                    font-size: 38px;
                }

                .fsmo-section {
                    padding: 70px 0;
                }
            }