@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

body {
    margin: 0;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.display {
    font-family: 'Syne', sans-serif;
}

.meta-ads-bg {
    background: #ffffff;
}

.meta-ads-noise {
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ============================================================
   META ADS HERO — white-label-meta-ads-hero.webp has a saturated
   red canvas (not the near-black baked into every other hero image
   in the ppc-services.css family), so the default hero-section-ppc
   background-color (#120404) and hero-overlay-ppc gradient — tuned
   for near-black art — leave a visible seam wherever
   background-size:contain's height-bound scaling doesn't reach the
   full section width. Desktop-only (min-width:1024px): mobile
   already handles this fine via sim-shared.css's own dimmed/centered
   fallback (.hero-bg-image opacity:0.3), so these rules stay out of
   its way entirely.
   ============================================================ */
@media (min-width: 1024px) {
    .hero-bg-image-meta {
        background-size: auto 118%;
        background-position: top right;
    }
    .hero-overlay-meta {
        background: linear-gradient(105deg,
            rgba(20,3,5,0.90) 0%,
            rgba(35,3,6,0.84) 18%,
            rgba(65,3,7,0.60) 34%,
            rgba(85,3,7,0.32) 50%,
            rgba(70,2,6,0.14) 68%,
            rgba(40,2,5,0.04) 85%,
            rgba(25,2,4,0.01) 100%
        );
    }
}

/* ===== PLACEMENT MARQUEE — Meta blue instead of the shared ppc-red
   gradient, so the scrolling strip reads as Meta-branded on this page. ===== */
.ppc-marquee-section-meta {
    background: linear-gradient(135deg, #1877F2, #0a3d91);
}

/* ===== MAGIC CARD EFFECT — shimmer sweep on hover + a few twinkling
   sparkles, echoing the hero's magician theme on the platform card
   images. Scoped to .card-magic-shine / .card-sparkle so it only
   touches the meta-ads-services cards. ===== */
.card-magic-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 25%,
        rgba(255,255,255,0.30) 46%,
        rgba(255,255,255,0.60) 50%,
        rgba(255,255,255,0.30) 54%,
        transparent 75%
    );
    mix-blend-mode: overlay;
    transform: translateX(-130%);
    transition: transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.group:hover .card-magic-shine {
    transform: translateX(130%);
}

.card-sparkle {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    color: #ffffff;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.85));
    opacity: 0;
    animation: card-sparkle-twinkle 2.8s ease-in-out infinite;
}
@keyframes card-sparkle-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(25deg); }
}
@media (prefers-reduced-motion: reduce) {
    .card-magic-shine { display: none; }
    .card-sparkle { animation: none; opacity: 0.55; }
}

/* ===== SUCCESS STORIES — two-column grid of Meta Ads Manager
   case-study screenshots. Each shot is a <button> that hands off to
   sim-shared.js's existing openImageLightbox()/closeImageLightbox()
   popup (already used elsewhere on this page for trust badges), so
   clicking opens the full, unmodified screenshot. ===== */
.success-card {
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.3s, transform 0.3s;
}
.success-card:hover {
    box-shadow: 0 8px 30px rgba(220,38,38,0.08);
    transform: translateY(-2px);
}
.success-card-shot {
    position: relative;
    display: block;
    width: 100%;
    background: #93c5fd;
    padding: 0.75rem;
    border: none;
    cursor: zoom-in;
}
.success-card-shot img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: top;
    border-radius: 0.5rem;
    display: block;
}
@media (min-width: 1024px) {
    .success-card-shot img { height: 300px; }
}
.success-card-zoom {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: rgba(15,23,42,0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.2s, transform 0.2s;
}
.success-card-zoom i { width: 1.1rem; height: 1.1rem; }
.success-card-shot:hover .success-card-zoom { opacity: 1; transform: scale(1); }
.success-card-body { padding: 1.5rem; }