:root{
    --mp-bg:#080808;
    --mp-panel:#111;
    --mp-line:rgba(255,255,255,.11);
    --mp-text:#f5f5f2;
    --mp-muted:#9c9c98;
}
.single-page-hero-area{
    min-height:78vh;
    display:flex;
    align-items:center;
    padding:180px 0 100px;
    background:
      radial-gradient(circle at 76% 16%,rgba(255,255,255,.08),transparent 31%),
      linear-gradient(180deg,#0e0e0e 0%,#080808 100%);
}
.single-page-hero-area .container{max-width:1320px}
.hero-kicker,.eyebrow{
    display:block;
    margin-bottom:24px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.22em;
    color:#a7a7a2;
}
.single-page-hero-area h1{
    max-width:1050px;
    margin:0;
    font-size:clamp(52px,8vw,120px);
    line-height:.88;
    letter-spacing:-.065em;
    color:#fff;
}
.single-page-hero-area h1 em{
    font-style:normal;
    color:#777;
}
.single-page-hero-area p{
    max-width:680px;
    margin:38px 0 0;
    font-size:clamp(18px,2vw,25px);
    line-height:1.5;
    color:#a8a8a4;
}
.hero-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:950px;
    margin-top:70px;
    border-top:1px solid var(--mp-line);
}
.hero-stats>div{padding:26px 28px 0 0}
.hero-stats strong{
    display:block;
    font-size:27px;
    color:#fff;
}
.hero-stats span{
    display:block;
    margin-top:6px;
    font-size:13px;
    color:#858581;
}
.showcase-section{
    padding:120px 0 150px;
    background:var(--mp-bg);
}
.showcase-shell{
    max-width:1600px;
    padding-left:clamp(20px,4vw,68px);
    padding-right:clamp(20px,4vw,68px);
}
.showcase-heading{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);
    gap:60px;
    align-items:end;
    margin-bottom:48px;
}
.showcase-heading h2{
    margin:0;
    font-size:clamp(40px,5.3vw,84px);
    line-height:.98;
    letter-spacing:-.055em;
    color:var(--mp-text);
}
.showcase-heading p{
    margin:0 0 8px;
    max-width:480px;
    font-size:17px;
    line-height:1.7;
    color:var(--mp-muted);
}
.showcase-filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:36px;
}
.filter-btn{
    border:1px solid var(--mp-line);
    border-radius:999px;
    padding:11px 18px;
    background:transparent;
    color:#a7a7a3;
    font:600 13px/1 "DM Sans",sans-serif;
    transition:.25s ease;
}
.filter-btn:hover,.filter-btn.active{
    border-color:#fff;
    background:#fff;
    color:#000;
}
.showcase-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:46px 24px;
}
.showcase-card{
    min-width:0;
    transition:opacity .25s ease,transform .25s ease;
}
.showcase-card.is-hidden{display:none}
.showcase-card a{display:block;color:inherit;text-decoration:none}
.showcase-media{
    position:relative;
    overflow:hidden;
    aspect-ratio:16/10;
    border-radius:14px;
    background:#151515;
}
.showcase-media>img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s cubic-bezier(.2,.75,.2,1),filter .5s ease;
}
.showcase-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.62));
    opacity:.62;
    transition:.35s ease;
}
.portfolio-fallback{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:
      radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 28%),
      linear-gradient(135deg,#252525,#080808 72%);
}
.portfolio-fallback span{
    font-size:clamp(62px,8vw,118px);
    font-weight:900;
    letter-spacing:-.08em;
    color:#fff;
}
.portfolio-fallback small{
    margin-top:-8px;
    letter-spacing:.3em;
    color:#8d8d89;
}
.facebook-cover{
    background:linear-gradient(135deg,#1d4f91,#081322 75%);
}
.showcase-play{
    position:absolute;
    top:50%;
    left:50%;
    display:grid;
    width:72px;
    height:72px;
    place-items:center;
    border:1px solid rgba(255,255,255,.55);
    border-radius:50%;
    background:rgba(0,0,0,.32);
    color:#fff;
    font-size:30px;
    transform:translate(-50%,-50%);
    backdrop-filter:blur(12px);
    transition:.35s ease;
}
.showcase-index{
    position:absolute;
    top:17px;
    right:18px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    color:rgba(255,255,255,.74);
}
.showcase-copy{padding:18px 2px 0}
.showcase-copy span{
    display:block;
    margin-bottom:7px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#777773;
}
.showcase-copy h3{
    margin:0;
    font-size:clamp(20px,1.8vw,28px);
    line-height:1.16;
    letter-spacing:-.035em;
    color:#f3f3f0;
}
.showcase-copy p{
    margin:7px 0 0;
    font-size:13px;
    color:#6f6f6b;
}
.showcase-card:hover .showcase-media>img{transform:scale(1.045);filter:brightness(.78)}
.showcase-card:hover .showcase-overlay{opacity:.95}
.showcase-card:hover .showcase-play{
    width:82px;
    height:82px;
    background:#fff;
    color:#000;
    transform:translate(-50%,-50%) scale(1.03);
}
.premium-video-popup{
    position:relative;
    width:min(1280px,94vw);
    margin:30px auto;
    overflow:hidden;
    border-radius:14px;
    background:#000;
    box-shadow:0 32px 100px rgba(0,0,0,.78);
}
.premium-video-popup .plyr,
.premium-video-popup video,
.premium-video-popup iframe{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    border:0;
    background:#000;
}
.premium-video-popup .mfp-close{
    top:-44px;
    right:0;
    color:#fff;
    font-size:36px;
}
.plyr{
    --plyr-color-main:#fff;
    --plyr-video-control-background-hover:rgba(255,255,255,.14);
    --plyr-range-fill-background:#fff;
    --plyr-control-radius:999px;
}
.plyr__controls{
    padding:48px 22px 18px!important;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.9))!important;
}
.plyr__control--overlaid{
    width:78px!important;
    height:78px!important;
    padding:23px!important;
    border:1px solid rgba(255,255,255,.72);
    background:rgba(0,0,0,.5)!important;
    backdrop-filter:blur(12px);
}
.mfp-bg{background:#000;opacity:.94}
.mfp-container{padding:24px}
.call-to-action-part{
    border:1px solid var(--mp-line);
    border-radius:22px;
    background:linear-gradient(135deg,#171717,#0b0b0b);
}
@media (max-width:991px){
    .single-page-hero-area{min-height:auto;padding:150px 0 90px}
    .showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .showcase-heading{grid-template-columns:1fr;gap:24px}
}
@media (max-width:767px){
    .single-page-hero-area{padding:130px 0 72px}
    .single-page-hero-area h1{font-size:clamp(46px,16vw,74px)}
    .hero-stats{grid-template-columns:1fr;gap:0;margin-top:48px}
    .hero-stats>div{padding:18px 0;border-bottom:1px solid var(--mp-line)}
    .showcase-section{padding:84px 0 100px}
    .showcase-grid{grid-template-columns:1fr;gap:34px}
    .showcase-media{border-radius:10px}
    .showcase-play{width:62px;height:62px}
    .showcase-heading h2{font-size:44px}
}

.video-thumbnail{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#111;
    pointer-events:none;
    transform:scale(1.002);
    transition:transform .8s cubic-bezier(.2,.75,.2,1),filter .5s ease;
}
.showcase-card:hover .video-thumbnail{
    transform:scale(1.045);
    filter:brightness(.78);
}

.facebook-video-thumbnail{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:#101010;
    pointer-events:none;
}
.facebook-video-thumbnail iframe{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    border:0;
    transform:translate(-50%,-50%) scale(1.02);
    pointer-events:none;
    transition:transform .8s cubic-bezier(.2,.75,.2,1),filter .5s ease;
}
.showcase-card:hover .facebook-video-thumbnail iframe{
    transform:translate(-50%,-50%) scale(1.07);
    filter:brightness(.72);
}

/* Green CTA (Home style) */
.call-to-action-area{
    background:#080808!important;
    padding:120px 0!important;
}
.call-to-action-part{
    background:#C8FF00!important;
    border:none!important;
    border-radius:28px!important;
    padding:80px 60px!important;
    box-shadow:none!important;
}
.call-to-action-part .eyebrow,
.call-to-action-part h2,
.call-to-action-part p{
    color:#111!important;
}
.call-to-action-part .theme-btn{
    background:#111!important;
    color:#fff!important;
    border:1px solid #111!important;
}
.call-to-action-part .theme-btn:hover{
    background:#222!important;
    border-color:#222!important;
}