/* ================================================================
   FC MAROKKO × GLS — Partnership page
   Theme: sporty + editorial, inspired by Morocco red/green + GLS surface
   ================================================================ */

:root {
    --fcm-red:        #c1272d;      /* Morocco red */
    --fcm-red-dark:   #8e1b20;
    --fcm-green:      #006233;      /* Morocco green */
    --fcm-green-dark: #004a26;
    --fcm-gold:       #ffb90e;
    --fcm-ink:        #121212;
    --fcm-surface:    #fffee8;      /* matches GLS brand */
    --fcm-line:       rgba(18,18,18,.08);
    --fcm-muted:      #5a5754;
}

/* ---------- Resets scoped to this page ---------- */
.fcm-btn,
.fcm-pillar,
.fcm-stat,
.fcm-cta {
    box-sizing: border-box;
}

/* ================================================================
   Hard size guards for goal/ball — defensive against cascade failure.
   The SVGs also carry inline width/height + max-width/max-height
   attributes so they can NEVER leak out and cover the whole hero,
   even if these rules don't apply.
   ================================================================ */
.fcm-rolling-ball,
.fcm-goal {
    overflow: hidden;
    contain: strict;
}
.fcm-rolling-ball > svg,
.fcm-goal__back > svg,
.fcm-goal__front > svg {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* ================================================================
   HERO
   ================================================================ */
.fcm-hero {
    position: relative;
    min-height: 640px;
    padding: 140px 0 100px;
    overflow: hidden;
    color: #fff;
    margin-top: -64px;
    /* border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px; */
    isolation: isolate;
}
.fcm-hero__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    filter: saturate(1.1);
    z-index: -2;
}
.fcm-hero__overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(1000px 500px at 80% 20%, rgba(193,39,45,.35), transparent 60%),
        radial-gradient(800px 400px at 10% 90%, rgba(0,98,51,.35), transparent 60%),
        linear-gradient(180deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.88) 100%);
    z-index: -1;
}

/* ================================================================
   ROLLING FOOTBALL — intro animation
   ================================================================ */
.fcm-rolling-ball {
    position: absolute;
    top: 60%;
    left: -200px;
    width: 110px;
    height: 110px;
    max-width: 110px;
    max-height: 110px;
    pointer-events: none;
    z-index: 4; /* above everything while rolling */
    filter:
        drop-shadow(0 18px 12px rgba(0,0,0,.55))
        drop-shadow(0 4px 8px rgba(0,0,0,.35));
    animation:
        fcm-roll 3.6s cubic-bezier(.22,.7,.3,1) .3s 1 both,
        fcm-ball-zorder 0s linear 3s 1 forwards,
        fcm-ball-hide 0s linear 3.91s 1 forwards;
    will-change: transform, opacity;
}
.fcm-rolling-ball svg { max-width: 100%; max-height: 100%; }

/* Drops the ball between back-net (z:1) and front-net (z:3) at moment of impact */
@keyframes fcm-ball-zorder {
    to { z-index: 2; }
}

/* Fully removes the ball from layout after fade (no hover ghosts, no flicker) */
@keyframes fcm-ball-hide {
    to { visibility: hidden; }
}
.fcm-rolling-ball svg {
    width: 100%; height: 100%;
    display: block;
    animation: fcm-spin 3.6s linear .3s 1 both;
    will-change: transform;
    transform-origin: 50% 50%;
}

/* Ball rolls in, enters goal (goes THROUGH the mouth, lands deep inside), then fades */
@keyframes fcm-roll {
    0%   { transform: translate3d(0, 0, 0)        scale(1);   opacity: 0; }
    6%   { transform: translate3d(4vw, -1vh, 0)   scale(1);   opacity: 1; }
    35%  { transform: translate3d(30vw, 3vh, 0)   scale(1);   opacity: 1; }
    60%  { transform: translate3d(52vw, -1vh, 0)  scale(1);   opacity: 1; }
    75%  { /* just about to enter goal mouth (front of goal) */
        transform: translate3d(calc(100vw - 320px), 2vh, 0) scale(1);
        opacity: 1;
    }
    82%  { /* crossing goal mouth */
        transform: translate3d(calc(100vw - 230px), 3vh, 0) scale(.9);
        opacity: 1;
    }
    88%  { /* IMPACT on back net — squash + deep in goal */
        transform: translate3d(calc(100vw - 170px), 5vh, 0) scale(.78, .72);
        opacity: 1;
    }
    93%  { /* bounce back slightly off the net */
        transform: translate3d(calc(100vw - 195px), 4vh, 0) scale(.72);
        opacity: 1;
    }
    96%  { /* settle in the back of the net */
        transform: translate3d(calc(100vw - 185px), 6vh, 0) scale(.68);
        opacity: 1;
    }
    100% { /* FADE OUT — clean up */
        transform: translate3d(calc(100vw - 185px), 6vh, 0) scale(.68);
        opacity: 0;
    }
}

@keyframes fcm-spin {
    0%   { transform: rotate(0deg); }
    82%  { transform: rotate(1440deg); } /* main spin until impact */
    88%  { transform: rotate(1460deg); } /* tiny recoil */
    100% { transform: rotate(1460deg); }
}

/* ================================================================
   GOAL (3D perspective — back net → ball → front net)
   ================================================================ */
.fcm-goal {
    position: absolute;
    right: 2vw;
    bottom: 0;
    width: 300px;
    height: 380px;
    max-width: 300px;
    max-height: 380px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;           /* hidden until intro animation starts */
    transform: perspective(900px) rotateY(-22deg) translateX(60px) scale(.95);
    transform-origin: 100% 100%;
    transform-style: preserve-3d;
    overflow: hidden;             /* defensive: clip any child overflow */
    /* Appear just before ball arrives, fade after the GOAL! burst */
    animation:
        fcm-goal-show 0s linear 2.4s 1 forwards,
        fcm-goal-in   .5s cubic-bezier(.2,.85,.3,1) 2.4s 1 forwards,
        fcm-goal-out  .7s ease-in 4.3s 1 forwards,
        fcm-goal-hide 0s linear 5.05s 1 forwards;
    will-change: transform, opacity;
}

/* make the goal visible exactly when the intro animation starts */
@keyframes fcm-goal-show { to { visibility: visible; } }

@keyframes fcm-goal-out {
    0%   { opacity: 1; transform: perspective(900px) rotateY(-22deg) translateX(0) scale(1); }
    100% { opacity: 0; transform: perspective(900px) rotateY(-22deg) translateX(30px) scale(.96); }
}

@keyframes fcm-goal-hide {
    to { visibility: hidden; }
}

/* BACK layer — lowest z */
.fcm-goal__back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: translateZ(-40px);
}
.fcm-goal__back svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    filter: drop-shadow(0 14px 14px rgba(0,0,0,.35));
}

/* FRONT layer — sits on top of ball */
.fcm-goal__front {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}
.fcm-goal__front svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    filter: drop-shadow(0 22px 18px rgba(0,0,0,.45));
}

@keyframes fcm-goal-in {
    0%   { opacity: 0; transform: perspective(900px) rotateY(-22deg) translateX(60px) scale(.95); }
    60%  { opacity: 1; transform: perspective(900px) rotateY(-20deg) translateX(-4px) scale(1.01); }
    100% { opacity: 1; transform: perspective(900px) rotateY(-22deg) translateX(0)    scale(1); }
}

/* Net ripple on ball impact (impact ≈ 3.17s = .3s delay + 88% of 3.6s) */
.fcm-goal__net {
    transform-origin: 50% 30%;
    animation: fcm-net-ripple 1.2s cubic-bezier(.35,.8,.45,1) 3.17s 1 both;
    will-change: transform;
}
.fcm-goal__net--back {
    animation-duration: 1.4s;
    animation-delay: 3.22s;
}
.fcm-goal__net line {
    animation: fcm-net-wiggle 1.2s ease-out 3.17s 1 both;
}

@keyframes fcm-net-ripple {
    0%   { transform: none; }
    15%  { transform: scaleX(1.05) scaleY(1.03) skewX(-2deg); }
    35%  { transform: scaleX(.97)  scaleY(.98)  skewX(2deg); }
    55%  { transform: scaleX(1.02) scaleY(1.01) skewX(-1deg); }
    80%  { transform: scaleX(.99)  scaleY(1) skewX(.5deg); }
    100% { transform: none; }
}

@keyframes fcm-net-wiggle {
    0%,100% { stroke: rgba(255,255,255,.45); }
    25%     { stroke: rgba(255,255,255,.85); }
}

.fcm-goal__frame--front {
    animation: fcm-frame-shake .35s ease-out 3.17s 1 both;
    transform-origin: 50% 100%;
}
@keyframes fcm-frame-shake {
    0%,100% { transform: none; }
    25%     { transform: translateX(-2px) rotate(-.4deg); }
    55%     { transform: translateX(2px)  rotate(.4deg); }
    80%     { transform: translateX(-1px); }
}

/* GOAL! flash burst — sits ON TOP of goal + ball */
.fcm-goal__flash {
    position: absolute;
    top: 18%; left: 45%;
    transform: translate(-50%, -50%) scale(.4);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    animation: fcm-goal-flash 1.2s cubic-bezier(.2,.9,.3,1) 3.22s 1 both;
}
.fcm-goal__burst {
    position: absolute;
    top: 50%; left: 50%;
    width: 220px; height: 220px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(255,185,14,.75) 0%,
            rgba(255,185,14,.35) 30%,
            rgba(255,185,14,0)   65%);
    animation: fcm-burst-pulse 1.2s ease-out 3.22s 1 both;
}
.fcm-goal__text {
    position: relative;
    font-family: "Arial Black", "Impact", sans-serif;
    font-weight: 900;
    font-size: 2.4rem;
    color: #fff;
    letter-spacing: .08em;
    text-shadow:
        0 0 2px #000,
        2px 2px 0 var(--fcm-red),
        4px 4px 0 rgba(0,0,0,.35),
        0 8px 24px rgba(0,0,0,.6);
    -webkit-text-stroke: 1.5px #0b0908;
    transform: rotate(-6deg);
    white-space: nowrap;
}

@keyframes fcm-goal-flash {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-12deg); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-3deg); }
    35%  { opacity: 1; transform: translate(-50%, -50%) scale(.95) rotate(-7deg); }
    50%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(-5deg); }
    80%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1) rotate(-6deg); }
}

@keyframes fcm-burst-pulse {
    0%   { transform: translate(-50%, -50%) scale(.2);  opacity: 0; }
    30%  { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
    .fcm-rolling-ball,
    .fcm-goal { display: none; }
}

@media (max-width: 767px){
    /* Mobile: ball + goal share a flat bottom band (no vh jitter, no button overlap) */
    .fcm-rolling-ball {
        width: 48px; height: 48px;
        top: auto;
        bottom: 26px;    /* aligned with goal interior */
        left: -80px;
    }
    .fcm-goal {
        width: 130px; height: 160px;
        right: 6px;
        bottom: 0;
        transform: perspective(700px) rotateY(-22deg) translateX(50px) scale(.95);
    }
    .fcm-goal__text { font-size: 1.2rem; }
    .fcm-goal__burst { width: 100px; height: 100px; }

    /* Flat trajectory: no vertical translate, all horizontal travel.
       Goal right edge = 6px, width = 130px → goal mouth spans ~6px..136px from right.
       Ball width 48px. End position = land the ball center ~60px from right edge
       → translate3d should end at (100vw - 48px - 60px) = 100vw - 108px  */
    @keyframes fcm-roll {
        0%   { transform: translate3d(0, 0, 0)                     scale(1);        opacity: 0; }
        6%   { transform: translate3d(8vw, 0, 0)                   scale(1);        opacity: 1; }
        35%  { transform: translate3d(30vw, 0, 0)                  scale(1);        opacity: 1; }
        60%  { transform: translate3d(55vw, 0, 0)                  scale(1);        opacity: 1; }
        75%  { /* about to enter goal (in front of front post) */
            transform: translate3d(calc(100vw - 170px), 0, 0)      scale(1);        opacity: 1;
        }
        82%  { /* crossing goal mouth */
            transform: translate3d(calc(100vw - 135px), 0, 0)      scale(.88);      opacity: 1;
        }
        88%  { /* impact against back net — squashes */
            transform: translate3d(calc(100vw - 100px), 0, 0)      scale(.75, .68); opacity: 1;
        }
        93%  { /* bounce back */
            transform: translate3d(calc(100vw - 118px), 0, 0)      scale(.7);       opacity: 1;
        }
        96%  { /* settle inside the net */
            transform: translate3d(calc(100vw - 108px), 0, 0)      scale(.66);      opacity: 1;
        }
        100% { /* fade out */
            transform: translate3d(calc(100vw - 108px), 0, 0)      scale(.66);      opacity: 0;
        }
    }
}

/* diagonal sport stripes */
.fcm-hero__stripes {
    position: absolute;
    top: 0; right: -120px;
    width: 420px; height: 100%;
    display: flex; gap: 14px;
    transform: skewX(-18deg);
    opacity: .22;
    pointer-events: none;
}
.fcm-hero__stripes span {
    display: block; flex: 1;
}
.fcm-hero__stripes span:nth-child(1){ background: var(--fcm-red);   }
.fcm-hero__stripes span:nth-child(2){ background: #fff;             }
.fcm-hero__stripes span:nth-child(3){ background: var(--fcm-green); }
.fcm-hero__stripes span:nth-child(4){ background: var(--fcm-gold);  }

.fcm-hero__container {
    position: relative;
    max-width: 1080px;
    text-align: center;
}

.fcm-hero__badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(8px);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: 28px;
}
.fcm-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--fcm-red);
    box-shadow: 0 0 0 4px rgba(193,39,45,.35);
    animation: fcm-pulse 1.8s ease-in-out infinite;
}
@keyframes fcm-pulse {
    0%,100% { transform: scale(1);   opacity: 1;  }
    50%     { transform: scale(1.3); opacity: .7; }
}

/* logo lockup */
.fcm-hero__lockup {
    display: flex; align-items: center; justify-content: center;
    gap: 24px;
    margin-bottom: 28px;
}
.fcm-lockup__logo {
    width: 84px; height: 84px;
    border-radius: 20px;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: 10px;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.fcm-lockup__logo img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
.fcm-lockup__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--fcm-gold);
    color: var(--fcm-ink);
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    transform: rotate(-6deg);
    box-shadow:
        0 8px 20px rgba(255,185,14,.45),
        0 2px 0 rgba(0,0,0,.15) inset;
    letter-spacing: 0;
    text-transform: lowercase;
}

.fcm-hero__title {
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.02;
    margin: 0 0 18px;
    color: #fff;
    text-shadow:
        0 2px 0  rgba(0,0,0,.35),
        0 8px 24px rgba(0,0,0,.75),
        0 0 40px rgba(0,0,0,.5);
}
.fcm-hero__title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0 .35em;
    width: .9em;
    height: .9em;
    color: var(--fcm-ink);
    background: var(--fcm-gold);
    border-radius: 14px;
    font-family: "Arial", "Helvetica", sans-serif;
    font-weight: 700;
    font-size: .48em;
    line-height: 1;
    transform: translateY(-.08em) rotate(-6deg);
    box-shadow:
        0 6px 18px rgba(255,185,14,.45),
        0 2px 0 rgba(0,0,0,.15) inset;
    text-shadow: none;
    letter-spacing: 0;
}

.fcm-hero__subtitle {
    font-size: 1.15rem;
    line-height: 1.55;
    max-width: 640px;
    margin: 0 auto 14px;
    color: #fff;
    opacity: .98;
    text-shadow: 0 2px 14px rgba(0,0,0,.75);
}

.fcm-hero__meta {
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .78rem;
    color: #fff;
    opacity: .9;
    margin-bottom: 36px;
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

.fcm-hero__actions {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 14px;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.fcm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .98rem;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
    cursor: pointer;
    white-space: nowrap;
}
.fcm-btn i { font-size: 1.1rem; }
.fcm-btn:hover { transform: translateY(-2px); }

.fcm-btn--primary {
    background: var(--fcm-red);
    color: #fff;
    border-color: var(--fcm-red);
    box-shadow: 0 10px 28px rgba(193,39,45,.4);
}
.fcm-btn--primary:hover {
    background: var(--fcm-red-dark);
    border-color: var(--fcm-red-dark);
    color: #fff;
}

.fcm-btn--ghost {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-color: rgba(255,255,255,.35);
    backdrop-filter: blur(6px);
}
.fcm-btn--ghost:hover {
    background: #fff;
    color: var(--fcm-ink);
    border-color: #fff;
}

.fcm-btn--dark {
    background: var(--fcm-ink);
    color: #fff;
    border-color: var(--fcm-ink);
    margin-top: 8px;
}
.fcm-btn--dark:hover {
    background: #000;
    color: var(--fcm-gold);
    border-color: #000;
}

.fcm-btn--lg {
    padding: 18px 34px;
    font-size: 1.05rem;
}

/* ================================================================
   STATS STRIP
   ================================================================ */
.fcm-stats {
    background: var(--fcm-ink);
    color: #fff;
    padding: 56px 0;
    position: relative;
    overflow: hidden;
}
.fcm-stats::before {
    content: "";
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(135deg, transparent 0 38px, rgba(255,255,255,.02) 38px 76px);
    pointer-events: none;
}
.fcm-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}
.fcm-stat {
    text-align: center;
    position: relative;
    padding: 14px 12px;
}
.fcm-stat + .fcm-stat::before {
    content: "";
    position: absolute; left: 0; top: 20%; height: 60%;
    width: 1px; background: rgba(255,255,255,.12);
}
.fcm-stat__value {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    background: linear-gradient(135deg, #fff 0%, var(--fcm-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.fcm-stat__label {
    margin-top: 10px;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .75;
}

@media (max-width: 767px){
    .fcm-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 10px; }
    .fcm-stat + .fcm-stat::before { display: none; }
}

/* ================================================================
   STORY
   ================================================================ */
.fcm-story {
    padding: 110px 0;
    background: var(--fcm-surface);
}

.fcm-story__kicker,
.fcm-section-head__kicker {
    display: inline-flex; align-items: center; gap: 10px;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--fcm-red);
    margin-bottom: 18px;
}
.fcm-bar {
    display: inline-block;
    width: 28px; height: 2px;
    background: var(--fcm-red);
}

.fcm-story__heading {
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--fcm-ink);
    margin: 0 0 24px;
}
.fcm-story__text {
    color: #2b2b2b;
    font-size: 1.02rem;
    line-height: 1.75;
}
.fcm-story__text p { margin-bottom: 1.1rem; }
.fcm-story__text strong { color: var(--fcm-red); }

/* visual composition */
.fcm-story__visual {
    position: relative;
    aspect-ratio: 1/1;
    max-width: 520px;
    margin-inline: auto;
}
.fcm-story__card {
    position: absolute;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,.18);
    background: #fff;
}
.fcm-story__card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.fcm-story__card--main {
    inset: 0 20% 12% 0;
    border: 6px solid #fff;
    transform: rotate(-2deg);
}
.fcm-story__card-tag {
    position: absolute;
    bottom: 16px; left: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--fcm-red);
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    display: inline-flex; align-items: center; gap: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.fcm-story__card--badge {
    width: 42%;
    aspect-ratio: 1/1;
    bottom: 0; right: 0;
    border: 6px solid #fff;
    padding: 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--fcm-ink);
    transform: rotate(4deg);
}
.fcm-story__card--badge img { object-fit: contain; }

.fcm-story__ball {
    position: absolute;
    top: -18px; left: -18px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--fcm-gold);
    color: var(--fcm-ink);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 30px rgba(255,185,14,.45);
    animation: fcm-float 5s ease-in-out infinite;
    padding: 14px;
}
.fcm-story__ball svg {
    width: 100%; height: 100%;
    display: block;
}
@keyframes fcm-float {
    0%,100% { transform: translateY(0) rotate(0);  }
    50%     { transform: translateY(-10px) rotate(8deg); }
}

/* ================================================================
   SECTION HEAD
   ================================================================ */
.fcm-section-head {
    margin-bottom: 48px;
}
.fcm-section-head.text-center .fcm-section-head__kicker {
    justify-content: center;
}
.fcm-section-head__title {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--fcm-ink);
    margin: 0;
}
.fcm-section-head__title--left { text-align: left; }
.fcm-section-head__sub {
    color: var(--fcm-muted);
    margin-top: 10px;
    font-size: 1.02rem;
}

/* ================================================================
   PILLARS
   ================================================================ */
.fcm-pillars {
    padding: 110px 0;
    background: #fff;
    position: relative;
}
.fcm-pillars::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg,
        var(--fcm-red) 0 33.33%,
        #fff 33.33% 66.66%,
        var(--fcm-green) 66.66% 100%);
}

.fcm-pillar {
    position: relative;
    background: var(--fcm-surface);
    border-radius: 22px;
    padding: 34px 28px 32px;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--fcm-line);
    transition: transform .35s ease, box-shadow .35s ease;
}
.fcm-pillar:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0,0,0,.12);
}
.fcm-pillar::before {
    content: "";
    position: absolute; top: 0; left: 0;
    width: 100%; height: 5px;
    background: var(--fcm-red);
}
.fcm-pillar--green::before  { background: var(--fcm-green); }
.fcm-pillar--orange::before { background: var(--fcm-gold);  }
.fcm-pillar--red::before    { background: var(--fcm-red);   }

.fcm-pillar__index {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fcm-muted);
    margin-bottom: 18px;
}
.fcm-pillar__icon {
    width: 58px; height: 58px;
    border-radius: 16px;
    background: var(--fcm-ink);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 20px;
    transition: transform .35s ease, background .35s ease;
}
.fcm-pillar--green  .fcm-pillar__icon { background: var(--fcm-green); }
.fcm-pillar--orange .fcm-pillar__icon { background: var(--fcm-gold); color: var(--fcm-ink); }
.fcm-pillar--red    .fcm-pillar__icon { background: var(--fcm-red);  }

.fcm-pillar:hover .fcm-pillar__icon { transform: rotate(-8deg) scale(1.06); }

.fcm-pillar__title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--fcm-ink);
    margin: 0 0 12px;
}
.fcm-pillar__text {
    color: var(--fcm-muted);
    line-height: 1.65;
    margin: 0;
}

/* ================================================================
   VIDEO SECTION
   ================================================================ */
.fcm-video {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(900px 500px at 15% 0%, rgba(193,39,45,.12), transparent 60%),
        radial-gradient(900px 500px at 85% 100%, rgba(0,98,51,.12), transparent 60%),
        #0d0d0d;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.fcm-video__stripes {
    position: absolute;
    top: 0; right: -140px;
    width: 360px; height: 100%;
    display: flex; gap: 14px;
    transform: skewX(-18deg);
    opacity: .15;
    pointer-events: none;
    z-index: 0;
}
.fcm-video__stripes span { display: block; flex: 1; }
.fcm-video__stripes span:nth-child(1){ background: var(--fcm-red);   }
.fcm-video__stripes span:nth-child(2){ background: var(--fcm-gold);  }
.fcm-video__stripes span:nth-child(3){ background: var(--fcm-green); }

.fcm-video .container { position: relative; z-index: 1; }

.fcm-video .fcm-section-head__kicker {
    color: var(--fcm-gold);
}
.fcm-video .fcm-bar { background: var(--fcm-gold); }

.fcm-video__title {
    color: #fff !important;
    margin-bottom: 14px;
}
.fcm-video__subtitle {
    color: rgba(255,255,255,.75);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto 56px;
    text-align: center;
}

.fcm-video__wrap {
    max-width: 1040px;
    margin: 0 auto;
    position: relative;
}
.fcm-video__frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 40px 80px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.05);
    transform: translateZ(0);
}
.fcm-video__ratio {
    position: relative;
    padding-top: 56.25%; /* 16:9 on desktop */
}
/* Source is vertical (Reels-style) — use 9:16 on mobile, and narrow width */
@media (max-width: 767px){
    .fcm-video__wrap {
        max-width: 340px;
        margin: 0 auto;
    }
    .fcm-video__ratio {
        padding-top: 177.77%; /* 9:16 */
    }
}
.fcm-video__ratio iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Live badge top-left */
.fcm-video__badge {
    position: absolute;
    top: 18px; left: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,.6);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    pointer-events: none;
}
.fcm-video__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fcm-red);
    box-shadow: 0 0 0 4px rgba(193,39,45,.35);
    animation: fcm-pulse 1.8s ease-in-out infinite;
}

/* Decorative corners (sporty bracket look) */
.fcm-video__corner {
    position: absolute;
    width: 36px; height: 36px;
    border: 3px solid var(--fcm-gold);
    z-index: 3;
    pointer-events: none;
}
.fcm-video__corner--tl { top: -10px; left: -10px;   border-right: 0;  border-bottom: 0; border-top-left-radius: 10px; }
.fcm-video__corner--tr { top: -10px; right: -10px;  border-left: 0;   border-bottom: 0; border-top-right-radius: 10px; }
.fcm-video__corner--bl { bottom: -10px; left: -10px;  border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.fcm-video__corner--br { bottom: -10px; right: -10px; border-left: 0;  border-top: 0; border-bottom-right-radius: 10px; }

@media (max-width: 767px){
    .fcm-video { padding: 80px 0; }
    .fcm-video__subtitle { margin-bottom: 36px; font-size: .95rem; }
    .fcm-video__badge { top: 12px; left: 12px; font-size: .72rem; padding: 6px 11px; }
    .fcm-video__corner { width: 24px; height: 24px; border-width: 2px; }
}

/* ================================================================
   GALLERY
   ================================================================ */
.fcm-gallery {
    padding: 110px 0;
    background: var(--fcm-surface);
}
.fcm-gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    gap: 16px;
}
.fcm-gallery__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background: #000;
    box-shadow: 0 14px 30px rgba(0,0,0,.12);
    /* button reset */
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}
.fcm-gallery__item:focus-visible {
    outline: 3px solid var(--fcm-red);
    outline-offset: 2px;
}
.fcm-gallery__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease, opacity .4s ease;
}
.fcm-gallery__item:hover img {
    transform: scale(1.08);
    opacity: .9;
}
.fcm-gallery__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55) 100%);
    color: #fff;
    display: flex; align-items: flex-end; justify-content: flex-end;
    padding: 14px;
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity .35s ease;
}
.fcm-gallery__item:hover .fcm-gallery__overlay { opacity: 1; }

.fcm-gallery__item--big {
    grid-column: span 2;
    grid-row: span 2;
}

@media (max-width: 991px){
    .fcm-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
    .fcm-gallery__item--big { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 575px){
    .fcm-gallery__grid { grid-auto-rows: 130px; }
}

/* ================================================================
   CTA
   ================================================================ */
.fcm-cta-wrap {
    padding: 80px 0 120px;
    background: #fff;
}
.fcm-cta {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 80px 40px;
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(193,39,45,.4), transparent 60%),
        radial-gradient(500px 300px at 0% 100%, rgba(0,98,51,.4), transparent 60%),
        linear-gradient(135deg, #111 0%, #1d1d1d 100%);
    color: #fff;
    text-align: center;
    isolation: isolate;
}
.fcm-cta__stripes {
    position: absolute;
    top: 0; left: -80px;
    width: 240px; height: 100%;
    display: flex; gap: 12px;
    transform: skewX(-18deg);
    opacity: .35;
    pointer-events: none;
}
.fcm-cta__stripes span {
    display: block; flex: 1;
}
.fcm-cta__stripes span:nth-child(1){ background: var(--fcm-red);   }
.fcm-cta__stripes span:nth-child(2){ background: var(--fcm-gold);  }
.fcm-cta__stripes span:nth-child(3){ background: var(--fcm-green); }

.fcm-cta__content {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}
.fcm-cta__kicker {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .75rem;
    font-weight: 700;
    color: var(--fcm-gold);
    margin-bottom: 22px;
}
.fcm-cta__title {
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 18px;
}
.fcm-cta__text {
    color: rgba(255,255,255,.82);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 auto 32px;
    max-width: 560px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 991px){
    /* .fcm-hero { padding: 120px 0 80px; min-height: auto; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; } */
    .fcm-story { padding: 80px 0; }
    .fcm-pillars { padding: 80px 0; }
    .fcm-gallery { padding: 80px 0; }
    .fcm-cta { padding: 60px 24px; }
    .fcm-story__visual { margin-top: 30px; }
}

@media (max-width: 575px){
    .fcm-hero {
        padding: 110px 0 200px;  /* extra bottom space for ball+goal band */
    }
    .fcm-hero__lockup { gap: 14px; }
    .fcm-lockup__logo { width: 66px; height: 66px; }
    .fcm-lockup__x { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
    .fcm-hero__stripes { display: none; }
    .fcm-btn { width: 100%; }
    .fcm-hero__actions { flex-direction: column; }
    .fcm-hero__title { font-size: clamp(2rem, 8vw, 2.8rem); }
    .fcm-hero__subtitle { font-size: 1rem; }
    .fcm-hero__meta { font-size: .7rem; letter-spacing: .18em; }
}

/* ================================================================
   GALLERY MODAL (CAROUSEL LIGHTBOX)
   ================================================================ */
.fcm-modal .modal-dialog {
    max-width: 1100px;
}
.fcm-modal__content {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative;
}
.fcm-modal .carousel-inner {
    border-radius: 18px;
    overflow: hidden;
    background: #0a0a0a;
    box-shadow: 0 40px 80px rgba(0,0,0,.6);
}
.fcm-modal__img {
    width: 100%;
    max-height: 82vh;
    object-fit: contain;
    background: #0a0a0a;
}

.fcm-modal__close {
    position: absolute;
    top: -48px; right: 0;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    z-index: 10;
    transition: background .25s ease, transform .25s ease;
    backdrop-filter: blur(8px);
}
.fcm-modal__close:hover {
    background: var(--fcm-red);
    border-color: var(--fcm-red);
    transform: scale(1.06);
}

.fcm-modal__nav {
    width: 72px;
    opacity: 1;
}
.fcm-modal__nav:hover .fcm-modal__nav-icon {
    background: var(--fcm-red);
    color: #fff;
    transform: scale(1.08);
}
.fcm-modal__nav-icon {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--fcm-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.fcm-modal .carousel-control-prev-icon,
.fcm-modal .carousel-control-next-icon { display: none; }

.fcm-modal__counter {
    position: absolute;
    bottom: -42px; left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 700;
    letter-spacing: .1em;
    font-size: .9rem;
    background: rgba(0,0,0,.55);
    padding: 8px 18px;
    border-radius: 999px;
    backdrop-filter: blur(10px);
}

.fcm-modal .modal-backdrop.show { opacity: .92; }

@media (max-width: 767px){
    .fcm-modal .modal-dialog { margin: 3rem auto; }
    .fcm-modal__close { top: -44px; }
    .fcm-modal__nav { width: 50px; }
    .fcm-modal__nav-icon { width: 42px; height: 42px; font-size: 1.1rem; }
    .fcm-modal__img { max-height: 70vh; }
}

/* ================================================================
   SCROLL ANIMATIONS — page-specific variants
   Overrides the global .reveal transition for richer motion.
   ================================================================ */

/* Base: when combined with .reveal, use our own richer timing */
.fcm-anim {
    transition:
        opacity .7s cubic-bezier(.2,.8,.3,1),
        transform .9s cubic-bezier(.2,.8,.3,1),
        filter .6s ease-out;
}

/* -------- Stats: rise + scale in, pop the number --------- */
.fcm-anim--stat {
    opacity: 0;
    transform: translateY(40px) scale(.85);
    filter: blur(4px);
}
.fcm-anim--stat.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}
.fcm-anim--stat.visible .fcm-stat__value {
    animation: fcm-stat-pop 1s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes fcm-stat-pop {
    0%   { transform: scale(.6) translateY(10px); opacity: 0; }
    60%  { transform: scale(1.12) translateY(-4px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* -------- Sweep-in titles (clip-path reveal from left) --------- */
.fcm-anim--sweep {
    opacity: 0;
    transform: translateY(20px);
    clip-path: inset(0 100% 0 0);
    filter: blur(4px);
    transition:
        opacity .6s ease-out,
        transform .8s cubic-bezier(.2,.8,.3,1),
        clip-path 1.1s cubic-bezier(.2,.8,.3,1),
        filter .5s ease-out;
}
.fcm-anim--sweep.visible {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    filter: blur(0);
}
/* RTL support — sweep from the right */
[dir="rtl"] .fcm-anim--sweep {
    clip-path: inset(0 0 0 100%);
}
[dir="rtl"] .fcm-anim--sweep.visible {
    clip-path: inset(0 0 0 0);
}

/* -------- Pillars: rise + tilt, scale icon on land --------- */
.fcm-anim--pillar {
    opacity: 0;
    transform: translateY(60px) rotateX(12deg) scale(.95);
    transform-origin: 50% 100%;
    transform-style: preserve-3d;
    perspective: 900px;
    filter: blur(4px);
}
.fcm-anim--pillar.visible {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
    filter: blur(0);
}
.fcm-anim--pillar.visible .fcm-pillar__icon {
    animation: fcm-icon-kick .8s cubic-bezier(.3,1.4,.6,1) .2s both;
}
@keyframes fcm-icon-kick {
    0%   { transform: rotate(-20deg) scale(.6); opacity: 0; }
    60%  { transform: rotate(8deg) scale(1.15); opacity: 1; }
    100% { transform: rotate(0) scale(1); opacity: 1; }
}

/* -------- Story visual: 3D tilt-in --------- */
.fcm-anim--tilt {
    opacity: 0;
    transform: rotateY(-14deg) translateX(40px) scale(.92);
    transform-style: preserve-3d;
    perspective: 1100px;
    filter: blur(4px);
    transition:
        opacity .7s ease-out,
        transform 1.1s cubic-bezier(.2,.8,.3,1),
        filter .6s ease-out;
}
.fcm-anim--tilt.visible {
    opacity: 1;
    transform: rotateY(0) translateX(0) scale(1);
    filter: blur(0);
}
[dir="rtl"] .fcm-anim--tilt {
    transform: rotateY(14deg) translateX(-40px) scale(.92);
}

/* -------- Gallery tiles: scale from center with depth --------- */
.fcm-anim--tile {
    opacity: 0;
    transform: scale(.8) translateY(30px);
    filter: blur(6px);
    transition:
        opacity .6s ease-out,
        transform .9s cubic-bezier(.2,.9,.25,1),
        filter .5s ease-out;
}
.fcm-anim--tile.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
}
/* Slight wobble for the big tile so it feels like the anchor */
.fcm-anim--tile.fcm-gallery__item--big.visible {
    animation: fcm-tile-settle 1.2s cubic-bezier(.3,1.3,.6,1) both;
}
@keyframes fcm-tile-settle {
    0%   { transform: scale(.8) rotate(-2deg); }
    60%  { transform: scale(1.02) rotate(.6deg); }
    100% { transform: scale(1) rotate(0); }
}

/* -------- Pop-in (video frame, CTA card) --------- */
.fcm-anim--pop {
    opacity: 0;
    transform: translateY(50px) scale(.94);
    filter: blur(6px);
}
.fcm-anim--pop.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fcm-anim,
    .fcm-anim--stat,
    .fcm-anim--sweep,
    .fcm-anim--pillar,
    .fcm-anim--tilt,
    .fcm-anim--tile,
    .fcm-anim--pop {
        transition: opacity .3s ease-out !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        animation: none !important;
    }
    .fcm-anim.visible { opacity: 1; }
}