/* ************************************************************
:: Template Name: Dazz Media Studio Custom Patch
:: Built On Top Of: Digimax HTML Template (Theme-Land)
:: Author: Dazz Media Studio
:: Purpose: Brand-specific overrides only. Vendor files (style.css,
::          responsive.css, active.js, plugins.min.js) are NOT modified.
::
:: SECTIONS
:: 1.0  CSS VARIABLES & GLOBAL TONE
:: 2.0  TYPOGRAPHY & EYEBROW BADGE
:: 3.0  HEADER / NAV ADJUSTMENTS
:: 4.0  HERO (welcome-area)
:: 5.0  TRUST / SERVICE STRIP
:: 6.0  FEATURED PROJECT
:: 7.0  SERVICES — ICON BUBBLES
:: 8.0  PORTFOLIO CARDS
:: 9.0  WHY CHOOSE THUMB
:: 10.0 PROCESS CARDS
:: 11.0 ABOUT THUMB
:: 12.0 CREATIVE EXPERIMENTS CARDS
:: 13.0 CONTACT CARDS
:: 14.0 FOOTER ADJUSTMENTS
:: 15.0 RESPONSIVE PATCHES
************************************************************ */

/* ============================================================
   1.0 CSS VARIABLES & GLOBAL TONE
============================================================ */
:root {
    --dazz-bg: #06052F;
    --dazz-bg-soft: #0b0a3a;
    --dazz-bg-card: #0f0e44;
    --dazz-border: rgba(255, 255, 255, 0.08);
    --dazz-border-strong: rgba(255, 255, 255, 0.15);
    --dazz-primary: #8340ff;
    --dazz-primary-2: #5900ff;
    --dazz-accent: #be63f9;
    --dazz-text-muted: rgba(255, 255, 255, 0.6);
    --dazz-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    --dazz-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.25);
}

body.homepage-5.dark {
    background: var(--dazz-bg);
}

.color-primary {
    color: var(--dazz-primary) !important;
}

/* ============================================================
   2.0 TYPOGRAPHY & EYEBROW BADGE
============================================================ */
.dazz-eyebrow {
    background: rgba(131, 64, 255, 0.12);
    color: #c9b5ff !important;
    border: 1px solid rgba(131, 64, 255, 0.35);
    padding: 6px 14px;
    border-radius: 40px;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
}

.dazz-priority-badge {
    display: inline-block;
    background: linear-gradient(45deg, var(--dazz-primary) 15%, var(--dazz-primary-2) 65%);
    color: #fff !important;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(89, 0, 255, 0.35);
}

.dazz-break {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ============================================================
   3.0 HEADER / NAV ADJUSTMENTS
============================================================ */
.navbar .navbar-nav.action .btn {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* --- Text-only logo (no image dependency) --- */
.navbar-brand.dazz-brand {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 0;
    text-decoration: none;
    line-height: 1;
}

.navbar-brand.dazz-brand:hover,
.navbar-brand.dazz-brand:focus {
    text-decoration: none;
    outline: none;
}

.dazz-logo-text {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    display: inline-block;
    text-transform: none;
}

.dazz-logo-text > span {
    display: inline-block;
}

.dazz-logo-accent {
    margin: 0 4px;
    background: linear-gradient(45deg, #8340ff 15%, #be63f9 85%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
}

.dazz-logo-tail {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

/* Sticky / dark variants — site is fully dark so logo stays white either way */
.navbar.navbar-sticky .dazz-logo-text,
.navbar-sticky-moved-up .dazz-logo-text {
    color: #fff;
}

@media (max-width: 575px) {
    .dazz-logo-text {
        font-size: 18px;
    }
    .dazz-logo-accent {
        margin: 0 3px;
    }
}

/* ============================================================
   4.0 HERO (welcome-area)
============================================================ */
.welcome-area.dazz-hero {
    background:
        linear-gradient(180deg, rgba(6, 5, 47, 0.55) 0%, rgba(6, 5, 47, 0.85) 60%, rgba(6, 5, 47, 0.95) 100%),
        url("../img/dazz-media-studio/backgrounds/hero-editing-studio.png") no-repeat center center / cover;
    position: relative;
}

/* Strong readable overlay so headline/sub never sit on busy footage */
.welcome-area.dazz-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 70% at 30% 50%, rgba(89, 0, 255, 0.35) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.welcome-area.dazz-hero .container {
    position: relative;
    z-index: 2;
}

.welcome-area.dazz-hero .welcome-intro h1 {
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.welcome-area.dazz-hero .welcome-intro h1 .fw-4 {
    display: block;
    font-size: 0.55em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* ============================================================
   5.0 TRUST / SERVICE STRIP
============================================================ */
.dazz-strip {
    background: var(--dazz-bg-soft) !important;
    border-top: 1px solid var(--dazz-border);
    border-bottom: 1px solid var(--dazz-border);
}

.dazz-strip-list li {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ============================================================
   6.0 FEATURED PROJECT
============================================================ */
.dazz-featured-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: var(--dazz-shadow);
    border: 1px solid var(--dazz-border);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.dazz-featured-thumb img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
}

.dazz-featured-thumb:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 80px rgba(89, 0, 255, 0.35);
}

.dazz-featured-thumb:hover img {
    transform: scale(1.04);
}

.dazz-featured-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(6, 5, 47, 0.6) 100%);
    pointer-events: none;
}

.dazz-featured-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--dazz-primary) 15%, var(--dazz-primary-2) 65%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 2;
    box-shadow: 0 0 0 12px rgba(131, 64, 255, 0.18), 0 0 0 24px rgba(131, 64, 255, 0.08);
    transition: transform 0.3s ease;
}

.dazz-featured-thumb:hover .dazz-featured-play {
    transform: translate(-50%, -50%) scale(1.1);
}

.dazz-featured-content h3 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 8px;
}

/* ============================================================
   7.0 SERVICES — ICON BUBBLES
   (Original template uses flaticon spans; we use FA inside same
    sized bubble so we don't need extra font files.)
============================================================ */
.dazz-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    flex-shrink: 0;
}

.dazz-service-icon.color-1 { background: linear-gradient(135deg, #8340ff, #5900ff); }
.dazz-service-icon.color-2 { background: linear-gradient(135deg, #ff5e7e, #ff2b69); }
.dazz-service-icon.color-3 { background: linear-gradient(135deg, #f5b400, #ff7a00); }
.dazz-service-icon.color-4 { background: linear-gradient(135deg, #00c2ff, #0072ff); }
.dazz-service-icon.color-5 { background: linear-gradient(135deg, #00d49a, #009e72); }
.dazz-service-icon.color-6 { background: linear-gradient(135deg, #be63f9, #6a3df0); }

.single-service {
    background: var(--dazz-bg-soft);
    border: 1px solid var(--dazz-border);
    border-radius: 8px;
    margin-bottom: 30px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.single-service:hover {
    transform: translateY(-4px);
    border-color: var(--dazz-border-strong);
    box-shadow: var(--dazz-shadow-soft);
}

.single-service h3 {
    font-size: 20px;
    line-height: 1.3;
}

/* ============================================================
   8.0 PORTFOLIO CARDS
   We reuse the .single-case-studies layout from style.css and
   only add a darker, branded overlay color + a priority badge.
============================================================ */
.portfolio-area.dark-bg {
    background: var(--dazz-bg) !important;
}

.single-case-studies.dazz-case {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--dazz-border);
    background: var(--dazz-bg-soft);
    box-shadow: var(--dazz-shadow-soft);
    isolation: isolate;
}

/* Note: thumbnail aspect-ratio is set in section 16.0 below (9:16 for vertical
   reel posters). Featured-project thumb uses .dazz-featured-thumb and is NOT
   affected. */

/* Override default purple→blue overlay with branded dark cinematic gradient */
.single-case-studies.dazz-case .case-studies-overlay {
    background: linear-gradient(135deg, rgba(89, 0, 255, 0.92) 0%, rgba(6, 5, 47, 0.95) 100%);
    border-radius: 10px;
}

.single-case-studies.dazz-case .overlay-text h3 {
    font-size: 22px;
    line-height: 1.2;
}

.single-case-studies.dazz-case .overlay-text .small {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.9;
}

.dazz-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    font-size: 10px;
    padding: 5px 10px;
    pointer-events: none;
}

/* ============================================================
   9.0 WHY CHOOSE THUMB
============================================================ */
.dazz-why-thumb {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--dazz-border);
    box-shadow: var(--dazz-shadow);
}

.dazz-why-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.dazz-why-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(89, 0, 255, 0.18) 0%, transparent 60%);
    pointer-events: none;
}

/* ============================================================
   10.0 PROCESS CARDS
============================================================ */
.dazz-process-card {
    background: var(--dazz-bg-soft);
    border: 1px solid var(--dazz-border);
    border-radius: 8px;
    margin-bottom: 30px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dazz-process-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--dazz-primary), var(--dazz-accent));
    transition: width 0.4s ease;
}

.dazz-process-card:hover {
    transform: translateY(-6px);
    border-color: var(--dazz-border-strong);
    box-shadow: var(--dazz-shadow-soft);
}

.dazz-process-card:hover::before {
    width: 100%;
}

.dazz-process-num {
    display: inline-block;
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(45deg, var(--dazz-primary) 15%, var(--dazz-accent) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    letter-spacing: 1px;
}

.dazz-process-card h3 {
    font-size: 18px;
}

.dazz-process-card p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ============================================================
   11.0 ABOUT THUMB
============================================================ */
.dazz-about-thumb img {
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--dazz-border);
    box-shadow: var(--dazz-shadow);
}

/* ============================================================
   12.0 CREATIVE EXPERIMENTS CARDS
============================================================ */
.dazz-exp-card {
    background: var(--dazz-bg-soft);
    border: 1px solid var(--dazz-border);
    border-radius: 10px;
    margin-bottom: 30px;
    text-decoration: none !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.dazz-exp-card:hover {
    transform: translateY(-6px);
    border-color: var(--dazz-primary);
    box-shadow: 0 20px 50px rgba(131, 64, 255, 0.25);
}

.dazz-exp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dazz-primary), var(--dazz-primary-2));
    color: #fff;
    font-size: 26px;
}

.dazz-exp-link {
    color: var(--dazz-primary);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.dazz-exp-card:hover .dazz-exp-link {
    color: #fff;
}

/* ============================================================
   13.0 CONTACT CARDS
============================================================ */
.dazz-contact-card {
    background: var(--dazz-bg-soft);
    border: 1px solid var(--dazz-border);
    border-radius: 10px;
    text-decoration: none !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.dazz-contact-card:hover {
    transform: translateY(-4px);
    border-color: var(--dazz-primary);
    box-shadow: 0 15px 40px rgba(131, 64, 255, 0.2);
}

.dazz-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dazz-primary), var(--dazz-primary-2));
    color: #fff;
    font-size: 22px;
}

.dazz-contact-card h3 {
    font-size: 18px;
}

.dazz-contact-card p {
    font-size: 14px;
}

/* ============================================================
   14.0 FOOTER ADJUSTMENTS
============================================================ */
.footer-area .footer-title {
    letter-spacing: 1.5px;
    font-size: 16px;
}

.footer-area p {
    line-height: 1.7;
    font-size: 14px;
}

.footer-area .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--dazz-border);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.footer-area .social-icons a:hover {
    background: linear-gradient(135deg, var(--dazz-primary), var(--dazz-primary-2));
    border-color: transparent;
    color: #fff !important;
}

/* ============================================================
   15.0 RESPONSIVE PATCHES
============================================================ */
@media (max-width: 991px) {
    .welcome-area.dazz-hero .welcome-intro h1 {
        font-size: 38px;
    }

    .dazz-featured-content h3 {
        font-size: 26px;
    }

    .dazz-process-card {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .welcome-area.dazz-hero {
        background-attachment: scroll;
        min-height: auto !important;
        padding-top: 120px !important;
        padding-bottom: 60px !important;
    }

    .welcome-area.dazz-hero .welcome-intro h1 {
        font-size: 30px;
    }

    .welcome-area.dazz-hero .welcome-intro h1 .fw-4 {
        font-size: 0.55em;
    }

    .dazz-featured-play {
        width: 60px;
        height: 60px;
        font-size: 18px;
    }

    .dazz-strip-list li {
        flex: 1 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575px) {
    .welcome-area.dazz-hero .welcome-intro h1 {
        font-size: 26px;
    }

    .dazz-strip-list li {
        flex: 1 0 100%;
        max-width: 100%;
    }

    .single-case-studies.dazz-case .overlay-text h3 {
        font-size: 18px;
    }
}

/* Process layout — keep 5 columns on lg up by neutralizing col-lg width */
@media (min-width: 992px) {
    .dazz-process .col-lg {
        flex: 1 0 0%;
        max-width: 20%;
    }
}

/* ============================================================
   16.0 PORTFOLIO THUMBNAIL ASPECT FIX (vertical reel posters)
   Preserve full text-heavy project thumbnails.
============================================================ */
.single-case-studies.dazz-case > a:not(.case-studies-overlay) {
    display: block;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #05041e;
}
.single-case-studies.dazz-case > a:not(.case-studies-overlay) > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* ============================================================
   17.0 PORTFOLIO VIDEO LIGHTBOX (Fancybox iframe player)
   The Digimax template ships Fancybox via plugins.min.js.
   Fancybox 3 auto-binds [data-fancybox] elements at click time,
   so videos load ON DEMAND — no iframe is created until a user
   clicks a thumbnail or button. This keeps the page fast.
============================================================ */

/* Cinematic dark backdrop matches brand palette */
.fancybox-bg {
    background: #06052F;
}

.fancybox-is-open .fancybox-bg {
    opacity: 0.95;
}

/* Iframe container — black canvas behind the video player */
.fancybox-slide--iframe .fancybox-content {
    background: #000;
    max-width: 1100px;
    width: 92%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 80vh;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.fancybox-iframe {
    background: #000;
    border: 0;
}

/* Caption styling — keep it understated below the player */
.fancybox-caption {
    background: linear-gradient(0deg, rgba(6, 5, 47, 0.85) 0%, transparent 100%);
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.3px;
    padding: 30px 44px 20px;
}

.fancybox-caption::before {
    background: none;
}

.fancybox-caption__body {
    color: #fff;
}

/* Toolbar buttons (close, prev, next) get a subtle branded hover */
.fancybox-button:hover {
    color: #be63f9;
}

/* Play-button cursor hint on triggers */
.dazz-featured-thumb,
.single-case-studies.dazz-case > a:not(.case-studies-overlay) {
    cursor: pointer;
}

/* Mobile sizing — give the iframe a comfortable viewport on phones */
@media (max-width: 767px) {
    .fancybox-slide--iframe .fancybox-content {
        width: 95%;
        max-height: 70vh;
    }

    .fancybox-caption {
        padding: 20px 30px 14px;
        font-size: 13px;
    }
}

/* ============================================================
   18.0 SECTION BACKGROUND IMAGE SYSTEM
   Each major section gets its own cinematic background image
   layered with a dark gradient overlay for readability. The
   overlay is rendered via ::before with z-index:-1 so it never
   blocks clicks. Content is lifted via z-index:1 on .container.
   No background-attachment: fixed (mobile-safe, fast).
============================================================ */

/* --- Shared base for every dazz-bg-* section --- */
.dazz-bg-money,
.dazz-bg-services,
.dazz-bg-portfolio,
.dazz-bg-why,
.dazz-bg-process,
.dazz-bg-about,
.dazz-bg-experiments,
.dazz-bg-contact,
.dazz-bg-footer {
    position: relative;
    isolation: isolate;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* Optional dark vignette layer kept beneath content */
.dazz-bg-money::before,
.dazz-bg-services::before,
.dazz-bg-portfolio::before,
.dazz-bg-why::before,
.dazz-bg-process::before,
.dazz-bg-about::before,
.dazz-bg-experiments::before,
.dazz-bg-contact::before,
.dazz-bg-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Lift content above the background overlay so clicks/hover work */
.dazz-bg-money > .container,
.dazz-bg-services > .container,
.dazz-bg-portfolio > .container,
.dazz-bg-why > .container,
.dazz-bg-process > .container,
.dazz-bg-about > .container,
.dazz-bg-experiments > .container,
.dazz-bg-contact > .container {
    position: relative;
    z-index: 1;
}

.dazz-bg-footer > .footer-top,
.dazz-bg-footer > .footer-bottom {
    position: relative;
    z-index: 1;
}

/* --- Per-section image + gradient overlay ---
   Gradient is layered ABOVE the image inside the same
   background-image stack so each section gets a tailored tint
   without needing a second pseudo-element. */

.dazz-bg-money {
    background-image:
        linear-gradient(180deg, rgba(6, 5, 47, 0.82), rgba(6, 5, 47, 0.92)),
        url("../img/dazz-media-studio/backgrounds/money-evolution-bg.png") !important;
}

.dazz-bg-services {
    background-image:
        linear-gradient(180deg, rgba(6, 5, 47, 0.84), rgba(6, 5, 47, 0.94)),
        url("../img/dazz-media-studio/backgrounds/services-creative-production-bg.png") !important;
}

.dazz-bg-portfolio {
    background-image:
        linear-gradient(180deg, rgba(6, 5, 47, 0.86), rgba(6, 5, 47, 0.95)),
        url("../img/dazz-media-studio/backgrounds/portfolio-showcase-bg.png") !important;
}

.dazz-bg-why {
    background-image:
        linear-gradient(90deg, rgba(6, 5, 47, 0.92), rgba(6, 5, 47, 0.78)),
        url("../img/dazz-media-studio/backgrounds/why-choose-editing-studio-bg.png") !important;
}

.dazz-bg-process {
    background-image:
        linear-gradient(180deg, rgba(6, 5, 47, 0.88), rgba(6, 5, 47, 0.95)),
        url("../img/dazz-media-studio/backgrounds/process-workflow-bg.png") !important;
}

.dazz-bg-about {
    background-image:
        linear-gradient(90deg, rgba(6, 5, 47, 0.90), rgba(6, 5, 47, 0.78)),
        url("../img/dazz-media-studio/backgrounds/about-studio-bg.png") !important;
}

/* Anime / movie / TV background — used ONLY for Creative Experiments */
.dazz-bg-experiments {
    background-image:
        linear-gradient(90deg, rgba(6, 5, 47, 0.88), rgba(6, 5, 47, 0.72)),
        url("../img/dazz-media-studio/backgrounds/creative-experiments-anime-movies-tv-bg.png") !important;
    background-position: center right !important;
}

.dazz-bg-contact {
    background-image:
        linear-gradient(180deg, rgba(6, 5, 47, 0.88), rgba(6, 5, 47, 0.96)),
        url("../img/dazz-media-studio/backgrounds/contact-global-studio-bg.png") !important;
}

.dazz-bg-footer {
    background-image:
        linear-gradient(180deg, rgba(6, 5, 47, 0.94), rgba(6, 5, 47, 0.98)),
        url("../img/dazz-media-studio/backgrounds/footer-dark-studio-bg.png") !important;
}

/* ============================================================
   19.0 SERVICE TOPIC BACKGROUNDS (FULL-WIDTH SECTIONS)
   Each topic image fills its own full-width section behind the
   service card — NOT inside the card. Same overlay system as
   Section 18.0: ::before with z-index:-1, container lifted to
   z-index:1 so the card sits cleanly on top.
============================================================ */

/* Shared base for the 6 service spotlight strips */
.dazz-bg-svc-video,
.dazz-bg-svc-motion,
.dazz-bg-svc-social,
.dazz-bg-svc-logo,
.dazz-bg-svc-enhance,
.dazz-bg-svc-web {
    position: relative;
    isolation: isolate;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

.dazz-bg-svc-video::before,
.dazz-bg-svc-motion::before,
.dazz-bg-svc-social::before,
.dazz-bg-svc-logo::before,
.dazz-bg-svc-enhance::before,
.dazz-bg-svc-web::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Lift the inner container so the card and headings stay clickable */
.dazz-bg-svc-video > .container,
.dazz-bg-svc-motion > .container,
.dazz-bg-svc-social > .container,
.dazz-bg-svc-logo > .container,
.dazz-bg-svc-enhance > .container,
.dazz-bg-svc-web > .container {
    position: relative;
    z-index: 2;
}

/* --- Per-topic full-width section backgrounds --- */

/* Video Editing & Motion Graphics — full section background */
.dazz-bg-svc-video {
    background-image:
        linear-gradient(90deg, rgba(6, 5, 47, 0.90), rgba(6, 5, 47, 0.72)),
        url("../img/dazz-media-studio/backgrounds/promo-video-editing-bg.png") !important;
}

/* AI-Assisted Documentary / Motion Graphics — full section background */
.dazz-bg-svc-motion {
    background-image:
        linear-gradient(270deg, rgba(6, 5, 47, 0.90), rgba(6, 5, 47, 0.72)),
        url("../img/dazz-media-studio/backgrounds/motion-graphics-bg.png") !important;
}

/* Promotional Reels & Social Media Ads — full section background */
.dazz-bg-svc-social {
    background-image:
        linear-gradient(90deg, rgba(6, 5, 47, 0.90), rgba(6, 5, 47, 0.72)),
        url("../img/dazz-media-studio/backgrounds/social-media-ads-bg.png") !important;
}

/* Logo Animation & Brand Visuals — full section background */
.dazz-bg-svc-logo {
    background-image:
        linear-gradient(270deg, rgba(6, 5, 47, 0.90), rgba(6, 5, 47, 0.72)),
        url("../img/dazz-media-studio/backgrounds/logo-brand-identity-bg.png") !important;
}

/* Image & Video Enhancement — full section background */
.dazz-bg-svc-enhance {
    background-image:
        linear-gradient(90deg, rgba(6, 5, 47, 0.90), rgba(6, 5, 47, 0.72)),
        url("../img/dazz-media-studio/backgrounds/photo-video-enhancement-bg.png") !important;
}

/* Websites & Landing Pages — full section background */
.dazz-bg-svc-web {
    background-image:
        linear-gradient(270deg, rgba(6, 5, 47, 0.90), rgba(6, 5, 47, 0.72)),
        url("../img/dazz-media-studio/backgrounds/websites-landing-pages-bg.png") !important;
}

/* --- Service card on top of the section background ---
   Cards stay as glass overlays — never take the topic image. */
.service-strip .single-service {
    background: rgba(11, 10, 58, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.service-strip .single-service:hover {
    background: rgba(11, 10, 58, 0.92);
    border-color: rgba(255, 255, 255, 0.20);
    transform: translateY(-4px);
}

/* Section heading text (left side) sits over the image — make it pop */
.service-strip h2 {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   20.0 GLASSY CARD POLISH
   With image-based section backgrounds, inner cards benefit from
   a slightly more glass-like surface for depth and readability.
   Applies to Process, Creative Experiments, and Contact cards.
============================================================ */

.dazz-process-card,
.dazz-exp-card,
.dazz-contact-card {
    background: rgba(11, 10, 58, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.dazz-process-card:hover,
.dazz-exp-card:hover,
.dazz-contact-card:hover {
    background: rgba(11, 10, 58, 0.88);
}

/* ============================================================
   21.0 BACKGROUND-IMAGE MOBILE & FALLBACK BEHAVIOR
   - keep backgrounds centered
   - reduce visual clutter on small screens
   - never use fixed attachment (already enforced above)
============================================================ */

@media (max-width: 767px) {
    .dazz-bg-money,
    .dazz-bg-services,
    .dazz-bg-portfolio,
    .dazz-bg-why,
    .dazz-bg-process,
    .dazz-bg-about,
    .dazz-bg-experiments,
    .dazz-bg-contact,
    .dazz-bg-footer,
    .dazz-bg-svc-video,
    .dazz-bg-svc-motion,
    .dazz-bg-svc-social,
    .dazz-bg-svc-logo,
    .dazz-bg-svc-enhance,
    .dazz-bg-svc-web {
        background-position: center center !important;
        background-attachment: scroll !important;
    }

    /* Slightly stronger overlays on mobile for guaranteed readability */
    .dazz-bg-services {
        background-image:
            linear-gradient(180deg, rgba(6, 5, 47, 0.90), rgba(6, 5, 47, 0.96)),
            url("../img/dazz-media-studio/backgrounds/services-creative-production-bg.png") !important;
    }

    .dazz-bg-portfolio {
        background-image:
            linear-gradient(180deg, rgba(6, 5, 47, 0.92), rgba(6, 5, 47, 0.97)),
            url("../img/dazz-media-studio/backgrounds/portfolio-showcase-bg.png") !important;
    }

    .dazz-bg-experiments {
        background-image:
            linear-gradient(180deg, rgba(6, 5, 47, 0.90), rgba(6, 5, 47, 0.85)),
            url("../img/dazz-media-studio/backgrounds/creative-experiments-anime-movies-tv-bg.png") !important;
        background-position: center center !important;
    }

    /* Service spotlight strips: stronger top-to-bottom overlay on mobile so the
       glass card and headline copy read clearly when stacked vertically. */
    .dazz-bg-svc-video,
    .dazz-bg-svc-motion,
    .dazz-bg-svc-social,
    .dazz-bg-svc-logo,
    .dazz-bg-svc-enhance,
    .dazz-bg-svc-web {
        background-image:
            linear-gradient(180deg, rgba(6, 5, 47, 0.90), rgba(6, 5, 47, 0.95)),
            var(--svc-strip-img, none) !important;
    }

    .dazz-bg-svc-video    { --svc-strip-img: url("../img/dazz-media-studio/backgrounds/promo-video-editing-bg.png"); }
    .dazz-bg-svc-motion   { --svc-strip-img: url("../img/dazz-media-studio/backgrounds/motion-graphics-bg.png"); }
    .dazz-bg-svc-social   { --svc-strip-img: url("../img/dazz-media-studio/backgrounds/social-media-ads-bg.png"); }
    .dazz-bg-svc-logo     { --svc-strip-img: url("../img/dazz-media-studio/backgrounds/logo-brand-identity-bg.png"); }
    .dazz-bg-svc-enhance  { --svc-strip-img: url("../img/dazz-media-studio/backgrounds/photo-video-enhancement-bg.png"); }
    .dazz-bg-svc-web      { --svc-strip-img: url("../img/dazz-media-studio/backgrounds/websites-landing-pages-bg.png"); }

    /* Reduce vertical padding on stacked spotlight strips so the page doesn't
       feel overly long on phones, while keeping breathing room. */
    .service-strip.ptb_150 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* ============================================================
   22.0 BACKGROUND VISIBILITY PATCH
   Make full-section background images visible while preserving
   readable dark cinematic overlays.
============================================================ */

/* Hero background should be more visible */
.welcome-area.dazz-hero {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.78) 0%, rgba(6, 5, 47, 0.52) 45%, rgba(6, 5, 47, 0.82) 100%),
        url("../img/dazz-media-studio/backgrounds/hero-editing-studio.png") no-repeat center center / cover !important;
}

/* Main section backgrounds — lighter overlays */
.dazz-bg-money {
    background-image:
        linear-gradient(180deg, rgba(6, 5, 47, 0.62), rgba(6, 5, 47, 0.80)),
        url("../img/dazz-media-studio/backgrounds/money-evolution-bg.png") !important;
}

.dazz-bg-services {
    background-image:
        linear-gradient(180deg, rgba(6, 5, 47, 0.60), rgba(6, 5, 47, 0.82)),
        url("../img/dazz-media-studio/backgrounds/services-creative-production-bg.png") !important;
}

.dazz-bg-portfolio {
    background-image:
        linear-gradient(180deg, rgba(6, 5, 47, 0.64), rgba(6, 5, 47, 0.84)),
        url("../img/dazz-media-studio/backgrounds/portfolio-showcase-bg.png") !important;
}

.dazz-bg-why {
    background-image:
        linear-gradient(90deg, rgba(6, 5, 47, 0.72), rgba(6, 5, 47, 0.48)),
        url("../img/dazz-media-studio/backgrounds/why-choose-editing-studio-bg.png") !important;
}

.dazz-bg-process {
    background-image:
        linear-gradient(180deg, rgba(6, 5, 47, 0.66), rgba(6, 5, 47, 0.84)),
        url("../img/dazz-media-studio/backgrounds/process-workflow-bg.png") !important;
}

.dazz-bg-about {
    background-image:
        linear-gradient(90deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.50)),
        url("../img/dazz-media-studio/backgrounds/about-studio-bg.png") !important;
}

/* Anime / movie / TV background should be clearly visible */
.dazz-bg-experiments {
    background-image:
        linear-gradient(90deg, rgba(6, 5, 47, 0.70), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/creative-experiments-anime-movies-tv-bg.png") !important;
    background-position: center right !important;
}

.dazz-bg-contact {
    background-image:
        linear-gradient(180deg, rgba(6, 5, 47, 0.66), rgba(6, 5, 47, 0.86)),
        url("../img/dazz-media-studio/backgrounds/contact-global-studio-bg.png") !important;
}

.dazz-bg-footer {
    background-image:
        linear-gradient(180deg, rgba(6, 5, 47, 0.78), rgba(6, 5, 47, 0.90)),
        url("../img/dazz-media-studio/backgrounds/footer-dark-studio-bg.png") !important;
}

/* Service topic full-width backgrounds — make images visible */
.dazz-bg-svc-video {
    background-image:
        linear-gradient(90deg, rgba(6, 5, 47, 0.70), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/promo-video-editing-bg.png") !important;
}

.dazz-bg-svc-motion {
    background-image:
        linear-gradient(270deg, rgba(6, 5, 47, 0.70), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/motion-graphics-bg.png") !important;
}

.dazz-bg-svc-social {
    background-image:
        linear-gradient(90deg, rgba(6, 5, 47, 0.70), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/social-media-ads-bg.png") !important;
}

.dazz-bg-svc-logo {
    background-image:
        linear-gradient(270deg, rgba(6, 5, 47, 0.70), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/logo-brand-identity-bg.png") !important;
}

.dazz-bg-svc-enhance {
    background-image:
        linear-gradient(90deg, rgba(6, 5, 47, 0.70), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/photo-video-enhancement-bg.png") !important;
}

.dazz-bg-svc-web {
    background-image:
        linear-gradient(270deg, rgba(6, 5, 47, 0.70), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/websites-landing-pages-bg.png") !important;
}

/* Add more cinematic depth without hiding images */
.dazz-bg-money,
.dazz-bg-services,
.dazz-bg-portfolio,
.dazz-bg-why,
.dazz-bg-process,
.dazz-bg-about,
.dazz-bg-experiments,
.dazz-bg-contact,
.dazz-bg-footer,
.dazz-bg-svc-video,
.dazz-bg-svc-motion,
.dazz-bg-svc-social,
.dazz-bg-svc-logo,
.dazz-bg-svc-enhance,
.dazz-bg-svc-web {
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Service cards stay readable on top */
.service-strip .single-service {
    background: rgba(11, 10, 58, 0.78) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Mobile: keep images visible but text safe */
@media (max-width: 767px) {
    .dazz-bg-svc-video,
    .dazz-bg-svc-motion,
    .dazz-bg-svc-social,
    .dazz-bg-svc-logo,
    .dazz-bg-svc-enhance,
    .dazz-bg-svc-web,
    .dazz-bg-experiments {
        background-position: center center !important;
    }
}

/* ============================================================
   23.0 VENDOR OVERRIDE FIX — RESTORE BACKGROUND IMAGES
   --------------------------------------------------------------
   ROOT CAUSE
   Digimax style.css (line ~1466) declares:
       .dark-bg,
       body.dark,
       .dark .bg-overlay::after,
       .dark .dark-bg,
       .dark .navbar-sticky-moved-up { background: #06052F !important; }
   The `background` shorthand with !important resets
   `background-image` to none. Selector `.dark .dark-bg` has
   specificity (0,2,0). All earlier `.dazz-bg-*` rules used
   specificity (0,1,0) and lost the cascade — even with
   !important — so the images were never painted.
   For the hero, the same vendor rule paints a solid dark color
   on `.bg-overlay::after`, which sits on top of the image.
   --------------------------------------------------------------
   FIX
   Use `body.dark .CLASS.dark-bg` selectors (specificity 0,3,1)
   for every dazz-bg-* section. Use the `background` shorthand
   so we deterministically replace the vendor's shorthand.
   For the hero, also disable the vendor's solid ::after layer.
============================================================ */

/* --- Hero: kill vendor's solid dark ::after, restore the image --- */
body.dark .welcome-area.dazz-hero.bg-overlay::after {
    background: transparent !important;
    background-color: transparent !important;
}

body.dark .welcome-area.dazz-hero {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.78) 0%, rgba(6, 5, 47, 0.50) 45%, rgba(6, 5, 47, 0.82) 100%),
        url("../img/dazz-media-studio/backgrounds/hero-editing-studio.png") center center / cover no-repeat !important;
}

/* --- Featured Money Evolution --- */
body.dark .dazz-bg-money.dark-bg {
    background:
        linear-gradient(180deg, rgba(6, 5, 47, 0.55), rgba(6, 5, 47, 0.78)),
        url("../img/dazz-media-studio/backgrounds/money-evolution-bg.png") center center / cover no-repeat !important;
}

/* --- Services intro --- */
body.dark .dazz-bg-services.dark-bg {
    background:
        linear-gradient(180deg, rgba(6, 5, 47, 0.55), rgba(6, 5, 47, 0.80)),
        url("../img/dazz-media-studio/backgrounds/services-creative-production-bg.png") center center / cover no-repeat !important;
}

/* --- Service Spotlight 01: Video Editing --- */
body.dark .dazz-bg-svc-video.dark-bg {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.72), rgba(6, 5, 47, 0.40)),
        url("../img/dazz-media-studio/backgrounds/promo-video-editing-bg.png") center center / cover no-repeat !important;
}

/* --- Service Spotlight 02: AI Documentary / Motion Graphics --- */
body.dark .dazz-bg-svc-motion.dark-bg {
    background:
        linear-gradient(270deg, rgba(6, 5, 47, 0.72), rgba(6, 5, 47, 0.40)),
        url("../img/dazz-media-studio/backgrounds/motion-graphics-bg.png") center center / cover no-repeat !important;
}

/* --- Service Spotlight 03: Promo Reels & Social Ads --- */
body.dark .dazz-bg-svc-social.dark-bg {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.72), rgba(6, 5, 47, 0.40)),
        url("../img/dazz-media-studio/backgrounds/social-media-ads-bg.png") center center / cover no-repeat !important;
}

/* --- Service Spotlight 04: Logo Animation & Brand Visuals --- */
body.dark .dazz-bg-svc-logo.dark-bg {
    background:
        linear-gradient(270deg, rgba(6, 5, 47, 0.72), rgba(6, 5, 47, 0.40)),
        url("../img/dazz-media-studio/backgrounds/logo-brand-identity-bg.png") center center / cover no-repeat !important;
}

/* --- Service Spotlight 05: Image & Video Enhancement --- */
body.dark .dazz-bg-svc-enhance.dark-bg {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.72), rgba(6, 5, 47, 0.40)),
        url("../img/dazz-media-studio/backgrounds/photo-video-enhancement-bg.png") center center / cover no-repeat !important;
}

/* --- Service Spotlight 06: Websites & Landing Pages --- */
body.dark .dazz-bg-svc-web.dark-bg {
    background:
        linear-gradient(270deg, rgba(6, 5, 47, 0.72), rgba(6, 5, 47, 0.40)),
        url("../img/dazz-media-studio/backgrounds/websites-landing-pages-bg.png") center center / cover no-repeat !important;
}

/* --- Portfolio --- */
body.dark .dazz-bg-portfolio.dark-bg {
    background:
        linear-gradient(180deg, rgba(6, 5, 47, 0.60), rgba(6, 5, 47, 0.82)),
        url("../img/dazz-media-studio/backgrounds/portfolio-showcase-bg.png") center center / cover no-repeat !important;
}

/* --- Why Choose --- */
body.dark .dazz-bg-why.dark-bg {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.70), rgba(6, 5, 47, 0.45)),
        url("../img/dazz-media-studio/backgrounds/why-choose-editing-studio-bg.png") center center / cover no-repeat !important;
}

/* --- Process --- */
body.dark .dazz-bg-process.dark-bg {
    background:
        linear-gradient(180deg, rgba(6, 5, 47, 0.60), rgba(6, 5, 47, 0.82)),
        url("../img/dazz-media-studio/backgrounds/process-workflow-bg.png") center center / cover no-repeat !important;
}

/* --- About --- */
body.dark .dazz-bg-about.dark-bg {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.72), rgba(6, 5, 47, 0.48)),
        url("../img/dazz-media-studio/backgrounds/about-studio-bg.png") center center / cover no-repeat !important;
}

/* --- Creative Experiments (anime/movie/TV) --- */
body.dark .dazz-bg-experiments.dark-bg {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.68), rgba(6, 5, 47, 0.38)),
        url("../img/dazz-media-studio/backgrounds/creative-experiments-anime-movies-tv-bg.png") center right / cover no-repeat !important;
}

/* --- Contact --- */
body.dark .dazz-bg-contact.dark-bg {
    background:
        linear-gradient(180deg, rgba(6, 5, 47, 0.62), rgba(6, 5, 47, 0.84)),
        url("../img/dazz-media-studio/backgrounds/contact-global-studio-bg.png") center center / cover no-repeat !important;
}

/* --- Footer --- */
body.dark .dazz-bg-footer.dark-bg {
    background:
        linear-gradient(180deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.90)),
        url("../img/dazz-media-studio/backgrounds/footer-dark-studio-bg.png") center center / cover no-repeat !important;
}

/* --- Mobile: keep all images centered, never use fixed attachment --- */
@media (max-width: 767px) {
    body.dark .welcome-area.dazz-hero,
    body.dark .dazz-bg-money.dark-bg,
    body.dark .dazz-bg-services.dark-bg,
    body.dark .dazz-bg-portfolio.dark-bg,
    body.dark .dazz-bg-why.dark-bg,
    body.dark .dazz-bg-process.dark-bg,
    body.dark .dazz-bg-about.dark-bg,
    body.dark .dazz-bg-experiments.dark-bg,
    body.dark .dazz-bg-contact.dark-bg,
    body.dark .dazz-bg-footer.dark-bg,
    body.dark .dazz-bg-svc-video.dark-bg,
    body.dark .dazz-bg-svc-motion.dark-bg,
    body.dark .dazz-bg-svc-social.dark-bg,
    body.dark .dazz-bg-svc-logo.dark-bg,
    body.dark .dazz-bg-svc-enhance.dark-bg,
    body.dark .dazz-bg-svc-web.dark-bg {
        background-position: center center !important;
        background-attachment: scroll !important;
    }
}

/* ============================================================
   24.0 PREMIUM POLISH PASS — SERVICE SPOTLIGHTS
   Restore breathing room, anchor card to headline, stronger
   glass treatment, and a centered max-width container so wide
   screens don't feel sparse.
============================================================ */

/* New padding utility — replaces ptb_150 on service-strip sections.
   Tighter than ptb_150 so heading + card feel anchored together. */
.dazz-strip-pad {
    padding-top: 110px;
    padding-bottom: 110px;
}

@media (max-width: 991px) {
    .dazz-strip-pad {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media (max-width: 575px) {
    .dazz-strip-pad {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* Constrain content width on very wide screens so heading + card
   don't drift to opposite edges of a 1920px display. */
.service-strip > .container {
    max-width: 1240px;
}

/* Vertically anchor the headline + card pair so they read as one unit */
.service-strip .row.align-items-center {
    min-height: 300px;
}

/* Headline column: tighten the lede + give the eyebrow more presence */
.service-strip .res-margin h2 {
    font-size: 38px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

@media (max-width: 991px) {
    .service-strip .res-margin h2 { font-size: 30px; }
}

.service-strip .dazz-eyebrow {
    background: rgba(131, 64, 255, 0.18);
    border-color: rgba(131, 64, 255, 0.5);
    color: #d8c5ff !important;
}

/* Premium glass card — bigger, more prominent, with hover lift + glow */
.service-strip .single-service {
    padding: 28px !important;
    border-radius: 14px;
    background: rgba(11, 10, 58, 0.85) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.40);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Subtle gradient border glow on hover — uses pseudo so it never blocks clicks */
.service-strip .single-service::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(131, 64, 255, 0), rgba(131, 64, 255, 0.45), rgba(190, 99, 249, 0));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.service-strip .single-service:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: 0 35px 70px rgba(89, 0, 255, 0.30);
}

.service-strip .single-service:hover::before {
    opacity: 1;
}

.service-strip .single-service h3 {
    font-size: 22px;
    line-height: 1.3;
}

/* Large icon bubble — slightly bigger inside spotlight cards */
.service-strip .dazz-service-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    font-size: 26px;
}

/* Service CTA: subtle underline-grow effect */
.service-strip .service-btn {
    position: relative;
    color: #c9b5ff;
    font-weight: 600;
    text-decoration: none;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}

.service-strip .service-btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg, var(--dazz-primary), var(--dazz-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.service-strip .service-btn:hover {
    color: #fff;
    text-decoration: none;
}

.service-strip .service-btn:hover::after {
    transform: scaleX(1);
}

/* ============================================================
   25.0 ABOUT — FOUNDER GLASS CARD (replaces broken image)
============================================================ */

.dazz-founder-card {
    background: rgba(11, 10, 58, 0.82);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
    max-width: 460px;
    margin: 0 auto;
}

.dazz-founder-card:hover {
    transform: translateY(-6px);
    border-color: rgba(131, 64, 255, 0.40);
    box-shadow: 0 35px 70px rgba(89, 0, 255, 0.30);
}

.dazz-founder-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8340ff 15%, #5900ff 65%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 8px rgba(131, 64, 255, 0.15),
        0 0 0 16px rgba(131, 64, 255, 0.08),
        0 20px 40px rgba(89, 0, 255, 0.40);
    position: relative;
}

.dazz-founder-initials {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    line-height: 1;
}

.dazz-founder-card h3 {
    font-size: 26px;
    letter-spacing: -0.3px;
}

.dazz-founder-role {
    color: #be63f9 !important;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin: 0;
}

.dazz-founder-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--dazz-primary), transparent);
    margin-left: auto;
    margin-right: auto;
}

.dazz-founder-tags {
    gap: 6px;
}

.dazz-founder-tags li {
    padding: 6px 12px;
    background: rgba(131, 64, 255, 0.12);
    border: 1px solid rgba(131, 64, 255, 0.30);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #c9b5ff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.dazz-founder-location {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55) !important;
    letter-spacing: 0.3px;
}

.dazz-founder-location .fas {
    color: var(--dazz-primary);
}

@media (max-width: 575px) {
    .dazz-founder-avatar { width: 90px; height: 90px; }
    .dazz-founder-initials { font-size: 34px; }
    .dazz-founder-card h3 { font-size: 22px; }
}

/* ============================================================
   26.0 PORTFOLIO POLISH
   - Money Evolution card uses cover (its source is 16:9, not 9:16)
   - Tighter overlay + better hover
   - Section background: stronger overlay so the bg stops looking
     stretched at 12-card heights, and use a focal background-position
============================================================ */

/* Project 1 (Money Evolution) is a wide banner — let it cover the
   9:16 frame instead of letterboxing into a tiny rectangle. */
.single-case-studies.dazz-case.dazz-card-cover > a:not(.case-studies-overlay) > img {
    object-fit: cover !important;
    object-position: center !important;
}

/* Card hover: subtle lift + brighter border */
.single-case-studies.dazz-case {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
}

.single-case-studies.dazz-case:hover {
    transform: translateY(-6px);
    border-color: rgba(131, 64, 255, 0.45);
    box-shadow: 0 30px 60px rgba(89, 0, 255, 0.30);
}

/* Portfolio thumbnail image: very subtle zoom on parent hover */
.single-case-studies.dazz-case > a:not(.case-studies-overlay) > img {
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.single-case-studies.dazz-case:hover > a:not(.case-studies-overlay) > img {
    transform: scale(1.03);
}

/* Stronger gutter between portfolio rows so cards breathe */
.portfolio-area .row > [class*="col-"] {
    margin-bottom: 30px;
}

/* Portfolio section: stronger overlay + top-anchored bg position so
   stretching is hidden behind cards instead of stretching across
   the entire 12-card grid. */
body.dark .dazz-bg-portfolio.dark-bg {
    background:
        linear-gradient(180deg, rgba(6, 5, 47, 0.78) 0%, rgba(6, 5, 47, 0.92) 40%, rgba(6, 5, 47, 0.95) 100%),
        url("../img/dazz-media-studio/backgrounds/portfolio-showcase-bg.png") center top / cover no-repeat !important;
}

/* Process & About sections: focal background-position so the key
   detail of each image isn't cropped weirdly */
body.dark .dazz-bg-process.dark-bg {
    background:
        linear-gradient(180deg, rgba(6, 5, 47, 0.62), rgba(6, 5, 47, 0.85)),
        url("../img/dazz-media-studio/backgrounds/process-workflow-bg.png") center top / cover no-repeat !important;
}

body.dark .dazz-bg-about.dark-bg {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.78), rgba(6, 5, 47, 0.50)),
        url("../img/dazz-media-studio/backgrounds/about-studio-bg.png") right center / cover no-repeat !important;
}

/* Featured Money Evolution: keep banner imagery centered */
body.dark .dazz-bg-money.dark-bg {
    background:
        linear-gradient(180deg, rgba(6, 5, 47, 0.55), rgba(6, 5, 47, 0.80)),
        url("../img/dazz-media-studio/backgrounds/money-evolution-bg.png") center center / cover no-repeat !important;
}

/* Add subtle vertical breathing room between major dark sections so
   the page never feels crowded */
.dazz-bg-money + #services,
#portfolio + .content-area,
#process + #about,
.dazz-experiments + #contact {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ============================================================
   27.0 GLOBAL HOVER & MOTION POLISH
============================================================ */

/* Buttons: subtle premium hover lift */
.btn.btn-bordered-white {
    transition: transform 0.3s ease, box-shadow 0.3s ease,
                background 0.3s ease, border-color 0.3s ease;
}

.btn.btn-bordered-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(131, 64, 255, 0.30);
}

/* Navbar: keep a glassy dark backdrop when sticky so it never goes
   white over our dark sections (the template would otherwise switch
   styles based on scroll) */
.navbar.navbar-sticky {
    background: rgba(6, 5, 47, 0.85) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30);
}

.navbar.navbar-sticky .nav-link {
    color: #fff !important;
}

.navbar.navbar-sticky .nav-link:hover {
    color: #be63f9 !important;
}

/* AOS init defaults: smoother, slightly slower curve for premium feel */
[data-aos] {
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* ============================================================
   28.0 REDUCED-MOTION SUPPORT
   Respect users who prefer reduced motion — disable all
   transitions, transforms, and AOS animations.
============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Force AOS elements to their final state immediately */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Disable all hover transforms */
    .single-case-studies.dazz-case:hover,
    .service-strip .single-service:hover,
    .dazz-founder-card:hover,
    .dazz-process-card:hover,
    .dazz-exp-card:hover,
    .dazz-contact-card:hover,
    .btn.btn-bordered-white:hover,
    .single-case-studies.dazz-case:hover > a:not(.case-studies-overlay) > img {
        transform: none !important;
    }
}

/* ============================================================
   29.0 SERVICE SPOTLIGHT — DECLUTTER & VISUAL HIERARCHY
   Pure-CSS upgrade: bigger glass cards, decorative giant numerals,
   anchored heading+card pair, and a hairline divider between
   consecutive spotlight strips so the eye gets visual rest.
============================================================ */

/* Constrain the inner row so heading + card stay anchored together */
.service-strip > .container > .row.align-items-center {
    min-height: 420px;
}

/* Headline column: don't let the lede stretch awkwardly on wide displays */
@media (min-width: 992px) {
    .service-strip .col-lg-6.res-margin {
        max-width: 520px;
    }
}

/* Bigger, more prominent glass card on lg+ */
@media (min-width: 992px) {
    .service-strip .single-service {
        min-width: 360px;
        padding: 36px !important;
        border-radius: 16px;
        box-shadow:
            0 30px 70px rgba(0, 0, 0, 0.45),
            0 10px 25px rgba(89, 0, 255, 0.15);
    }

    /* Subtle inner glow on hover so card feels lit from within */
    .service-strip .single-service:hover {
        box-shadow:
            0 40px 80px rgba(89, 0, 255, 0.32),
            0 10px 25px rgba(89, 0, 255, 0.18),
            inset 0 0 60px rgba(131, 64, 255, 0.06);
    }
}

/* Decorative giant numeral behind each spotlight section.
   Uses CSS variables — only 6 single-line declarations needed
   instead of 6 separate ::before rule blocks. */
.service-strip { position: relative; }

.service-strip::before {
    content: var(--dazz-svc-num, "");
    position: absolute;
    top: 50%;
    right: 6%;
    transform: translateY(-50%);
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    font-size: 340px;
    font-weight: 900;
    line-height: 0.85;
    color: #fff;
    opacity: 0.04;
    letter-spacing: -0.05em;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    white-space: nowrap;
}

/* Per-section numerals (one-liners) */
.dazz-bg-svc-video    { --dazz-svc-num: "01"; }
.dazz-bg-svc-motion   { --dazz-svc-num: "02"; }
.dazz-bg-svc-social   { --dazz-svc-num: "03"; }
.dazz-bg-svc-logo     { --dazz-svc-num: "04"; }
.dazz-bg-svc-enhance  { --dazz-svc-num: "05"; }
.dazz-bg-svc-web      { --dazz-svc-num: "06"; }

/* For sections with `flex-lg-row-reverse` (cards on left), put the
   numeral on the LEFT so it sits behind the empty visual side. */
.service-strip:has(.flex-lg-row-reverse)::before {
    left: 6%;
    right: auto;
}

/* Lift content above the decorative numeral */
.service-strip > .container {
    position: relative;
    z-index: 2;
}

/* Hairline gradient divider between consecutive spotlight strips —
   never blocks clicks, sits above the bg overlay but below content. */
.service-strip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(70%, 720px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(131, 64, 255, 0.35) 50%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Skip the divider on the LAST spotlight (Service 06) so the
   transition into Portfolio feels intentional, not abrupt. */
.dazz-bg-svc-web::after {
    display: none;
}

/* Mobile: hide decorative numeral, stack with comfortable gap */
@media (max-width: 767px) {
    .service-strip::before { display: none; }

    .service-strip > .container > .row.align-items-center {
        min-height: 0;
    }

    .service-strip .col-lg-6.res-margin {
        margin-bottom: 32px;
    }
}

/* ============================================================
   30.0 BACKGROUND IMAGE COMPOSITION AUDIT
   Per-section background-position + overlay tuning so key
   visual details stay in frame and very tall sections don't
   reveal stretching.
============================================================ */

/* Portfolio (very tall — 12 cards) — 3-stop overlay so the bg
   only peeks at top/bottom edges; the middle (where stretch
   would show) is masked behind a solid dark band. */
body.dark .dazz-bg-portfolio.dark-bg {
    background:
        linear-gradient(
            180deg,
            rgba(6, 5, 47, 0.78) 0%,
            rgba(6, 5, 47, 0.96) 35%,
            rgba(6, 5, 47, 0.96) 65%,
            rgba(6, 5, 47, 0.85) 100%
        ),
        url("../img/dazz-media-studio/backgrounds/portfolio-showcase-bg.png")
        center top / cover no-repeat !important;
}

/* Contact (also tall once cards stack on mobile) — same 3-stop trick */
body.dark .dazz-bg-contact.dark-bg {
    background:
        linear-gradient(
            180deg,
            rgba(6, 5, 47, 0.70) 0%,
            rgba(6, 5, 47, 0.92) 50%,
            rgba(6, 5, 47, 0.88) 100%
        ),
        url("../img/dazz-media-studio/backgrounds/contact-global-studio-bg.png")
        center top / cover no-repeat !important;
}

/* Creative Experiments — anime/movie/TV image has SUBJECTS on
   the right half, so right-anchor the position. */
body.dark .dazz-bg-experiments.dark-bg {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/creative-experiments-anime-movies-tv-bg.png")
        center right / cover no-repeat !important;
}

/* About — editing-suite image; top-anchor so monitors stay visible */
body.dark .dazz-bg-about.dark-bg {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.78), rgba(6, 5, 47, 0.50)),
        url("../img/dazz-media-studio/backgrounds/about-studio-bg.png")
        right top / cover no-repeat !important;
}

/* Why Choose — keep horizontal gradient, focal stays centered */
body.dark .dazz-bg-why.dark-bg {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.70), rgba(6, 5, 47, 0.45)),
        url("../img/dazz-media-studio/backgrounds/why-choose-editing-studio-bg.png")
        center center / cover no-repeat !important;
}

/* Process — top-anchor; the workflow visualization details cluster up top */
body.dark .dazz-bg-process.dark-bg {
    background:
        linear-gradient(180deg, rgba(6, 5, 47, 0.62), rgba(6, 5, 47, 0.85)),
        url("../img/dazz-media-studio/backgrounds/process-workflow-bg.png")
        center top / cover no-repeat !important;
}

/* Footer — short section, lighter overlay so the footer image breathes */
body.dark .dazz-bg-footer.dark-bg {
    background:
        linear-gradient(180deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.92)),
        url("../img/dazz-media-studio/backgrounds/footer-dark-studio-bg.png")
        center bottom / cover no-repeat !important;
}

/* ============================================================
   31.0 PREMIUM ANIMATION POLISH (CSS-only, restrained)
   Shimmer on priority badges, hover gradient ring on portfolio
   cards, smooth scrolling, one-shot button pulse on hover,
   and a comprehensive prefers-reduced-motion block.
============================================================ */

/* Smooth scroll for in-page anchor jumps (only if vendor doesn't override) */
html {
    scroll-behavior: smooth;
}

/* --- Shimmer sweep on priority badges --- */
@keyframes dazz-badge-shimmer {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(220%); }
}

.dazz-priority-badge {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.dazz-priority-badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 100%
    );
    animation: dazz-badge-shimmer 6s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* --- Animated gradient ring on portfolio cards (mask-composite) ---
   Override outer overflow so the ring is visible; restore overflow
   on inner children so the image still gets clipped at corners. */
.single-case-studies.dazz-case {
    position: relative;
    overflow: visible;
}

.single-case-studies.dazz-case > a:not(.case-studies-overlay) {
    overflow: hidden;
    border-radius: 10px;
    display: block;
}

.single-case-studies.dazz-case .case-studies-overlay {
    border-radius: 10px;
    overflow: hidden;
}

.single-case-studies.dazz-case::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(
        135deg,
        rgba(131, 64, 255, 0) 0%,
        rgba(131, 64, 255, 0.6) 50%,
        rgba(190, 99, 249, 0) 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 5;
}

.single-case-studies.dazz-case:hover::before {
    opacity: 1;
}

/* --- One-shot pulse-glow on button hover (NOT infinite) --- */
@keyframes dazz-btn-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(131, 64, 255, 0.45); }
    60%  { box-shadow: 0 0 0 14px rgba(131, 64, 255, 0); }
    100% { box-shadow: 0 0 0 0   rgba(131, 64, 255, 0); }
}

.btn.btn-bordered-white:hover {
    animation: dazz-btn-pulse 0.9s ease-out 1;
}

/* ============================================================
   32.0 SR-ONLY UTILITY (visually-hidden for accessibility)
============================================================ */

.dazz-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================
   33.0 REDUCED-MOTION SUPPORT (overrides Sections 29-31)
   Respect users who prefer reduced motion — disable all
   keyframe animations, transitions, AOS reveals, and hover
   transforms added by this stylesheet.
============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Force AOS-controlled elements to their final visible state */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Kill the badge shimmer + button pulse + portfolio ring */
    .dazz-priority-badge::after,
    .single-case-studies.dazz-case::before {
        animation: none !important;
        transition: none !important;
        opacity: 0 !important;
    }

    .btn.btn-bordered-white:hover {
        animation: none !important;
    }

    /* Disable all hover lifts/transforms */
    .single-case-studies.dazz-case:hover,
    .service-strip .single-service:hover,
    .dazz-founder-card:hover,
    .dazz-process-card:hover,
    .dazz-exp-card:hover,
    .dazz-contact-card:hover,
    .btn.btn-bordered-white:hover,
    .single-case-studies.dazz-case:hover > a:not(.case-studies-overlay) > img {
        transform: none !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   34.0 GLASSMORPHISM ICON SYSTEM (.dazz-glass-icon)
   Reusable glass+neon shell. Used by:
     - Trust strip icons (.dazz-strip-icon)
     - Service-card icons (added alongside .color-N)
     - Footer/header social anchors (via data-social attr)
   The existing .color-1 … .color-6 from style.css set the
   background gradient. This rule overrides it to a faint
   inner highlight (opacity ~0.25) and uses the gradient color
   only for the surrounding neon glow.
============================================================ */

.dazz-glass-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    /* Glass surface */
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.04) 100%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%);
            backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    /* Inner highlight + outer purple neon halo */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20),
        0 8px 30px rgba(131, 64, 255, 0.25),
        0 0 40px rgba(131, 64, 255, 0.18) !important;
    /* FA icon styling */
    color: #fff !important;
    font-size: 22px;
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.55),
        0 0 16px rgba(190, 99, 249, 0.55);
    transition:
        box-shadow 0.4s ease,
        transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.3s ease;
    overflow: hidden;
    isolation: isolate;
}

/* Subtle inner gradient using the card's color-N as a faint tint */
.dazz-glass-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    /* For service cards: pick up the color-N gradient as a tinted veil */
    opacity: 0.25;
    pointer-events: none;
    z-index: -1;
}

/* When .dazz-glass-icon is combined with .color-N, the parent .single-service
   layout already lays out the icon. We just need to make sure the FA glyph
   actually renders white over the glass. */
.dazz-glass-icon i,
.dazz-glass-icon svg {
    position: relative;
    z-index: 1;
    color: #fff;
}

/* Hover: amplify glow + slight scale */
.dazz-glass-icon:hover,
.single-service:hover .dazz-glass-icon,
.dazz-strip-list li:hover .dazz-glass-icon,
a:hover > .dazz-glass-icon {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20),
        0 14px 50px rgba(131, 64, 255, 0.45),
        0 0 70px rgba(131, 64, 255, 0.32) !important;
    transform: translateY(-2px);
}

/* Per-color neon glow accents for service cards (override the heavy gradient
   set in earlier sections — keep only the glow). The gradient is preserved
   inside ::before at low opacity. */
.dazz-glass-icon.color-1 { /* video editing — purple */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 30px rgba(131, 64, 255, 0.30),
        0 0 40px rgba(131, 64, 255, 0.22) !important;
}
.dazz-glass-icon.color-2 { /* documentary — pink */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 30px rgba(255, 94, 126, 0.30),
        0 0 40px rgba(255, 94, 126, 0.22) !important;
}
.dazz-glass-icon.color-2 i { text-shadow: 0 0 8px #fff, 0 0 18px rgba(255, 94, 126, 0.7); }

.dazz-glass-icon.color-3 { /* social ads — orange */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 30px rgba(245, 180, 0, 0.30),
        0 0 40px rgba(255, 122, 0, 0.22) !important;
}
.dazz-glass-icon.color-3 i { text-shadow: 0 0 8px #fff, 0 0 18px rgba(245, 180, 0, 0.7); }

.dazz-glass-icon.color-4 { /* logo — cyan */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 30px rgba(0, 194, 255, 0.30),
        0 0 40px rgba(0, 114, 255, 0.22) !important;
}
.dazz-glass-icon.color-4 i { text-shadow: 0 0 8px #fff, 0 0 18px rgba(0, 194, 255, 0.7); }

.dazz-glass-icon.color-5 { /* enhancement — green */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 30px rgba(0, 212, 154, 0.30),
        0 0 40px rgba(0, 158, 114, 0.22) !important;
}
.dazz-glass-icon.color-5 i { text-shadow: 0 0 8px #fff, 0 0 18px rgba(0, 212, 154, 0.7); }

.dazz-glass-icon.color-6 { /* websites — magenta */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 30px rgba(190, 99, 249, 0.30),
        0 0 40px rgba(106, 61, 240, 0.22) !important;
}
.dazz-glass-icon.color-6 i { text-shadow: 0 0 8px #fff, 0 0 18px rgba(190, 99, 249, 0.7); }

/* ============================================================
   35.0 HERO TRUST STRIP — GLASS CAPSULE
   Convert the existing <ul.dazz-strip-list> into a single
   capsule-shaped glass container with hairline dividers
   between items.
============================================================ */

.dazz-strip {
    /* Replace any hard top/bottom borders with centered gradient hairlines */
    border-top: none !important;
    border-bottom: none !important;
    position: relative;
}

.dazz-strip::before,
.dazz-strip::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(60%, 880px);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(131, 64, 255, 0.42) 50%,
        transparent 100%
    );
    pointer-events: none;
}
.dazz-strip::before { top: 0; }
.dazz-strip::after  { bottom: 0; }

.dazz-strip .container {
    position: relative;
    z-index: 1;
}

/* Capsule wrapper — apply the glass treatment to the <ul> */
.dazz-strip-list {
    background: rgba(11, 10, 58, 0.55);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    padding: 14px 24px !important;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    gap: 4px;
}

/* Each strip item */
.dazz-strip-list li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.4px;
    white-space: nowrap;
    position: relative;
    transition: color 0.3s ease;
}

.dazz-strip-list li:hover {
    color: #fff;
}

/* Smaller glass icon for the strip (override the default 56x56) */
.dazz-strip-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

/* Vertical hairline divider between items (skip the last) */
.dazz-strip-list li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    );
}

/* Mobile: drop capsule, allow wrap */
@media (max-width: 991px) {
    .dazz-strip-list {
        border-radius: 16px;
        padding: 16px 12px !important;
        gap: 6px;
    }
    .dazz-strip-list li {
        padding: 10px 14px;
        font-size: 12px;
    }
    /* Drop dividers when wrapped */
    .dazz-strip-list li::after { display: none; }
}

/* ============================================================
   36.0 SOCIAL ICONS — GLASS + NEON (header + footer)
   Selectors target every <a data-social="..."> regardless of
   where it sits. Per-platform neon glow on hover.
============================================================ */

a[data-social] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
            backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff !important;
    font-size: 18px;
    text-decoration: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 4px 16px rgba(0, 0, 0, 0.25);
    transition:
        transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.4s ease,
        border-color 0.3s ease,
        color 0.3s ease;
    isolation: isolate;
}

a[data-social] i,
a[data-social] svg {
    color: #fff;
    transition: filter 0.3s ease;
}

a[data-social]:hover {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.28);
}

/* --- Per-platform neon hover glows --- */
a[data-social="instagram"]:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(225, 93, 255, 0.45),
        0 8px 30px rgba(225, 93, 255, 0.45),
        0 0 40px rgba(225, 93, 255, 0.30);
}
a[data-social="instagram"]:hover i { filter: drop-shadow(0 0 6px rgba(225, 93, 255, 0.85)); }

a[data-social="facebook"]:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(64, 130, 255, 0.45),
        0 8px 30px rgba(64, 130, 255, 0.45),
        0 0 40px rgba(64, 130, 255, 0.30);
}
a[data-social="facebook"]:hover i { filter: drop-shadow(0 0 6px rgba(64, 130, 255, 0.85)); }

a[data-social="linkedin"]:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(120, 200, 255, 0.50),
        0 8px 30px rgba(120, 200, 255, 0.45),
        0 0 40px rgba(120, 200, 255, 0.28);
}
a[data-social="linkedin"]:hover i { filter: drop-shadow(0 0 6px rgba(120, 200, 255, 0.85)); }

a[data-social="tiktok"]:hover {
    /* TikTok uses dual cyan + pink glow */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.30),
        -4px 0 20px rgba(0, 240, 255, 0.50),
        4px 0 20px rgba(255, 60, 130, 0.50),
        0 0 40px rgba(255, 60, 130, 0.30);
}
a[data-social="tiktok"]:hover i,
a[data-social="tiktok"]:hover svg {
    filter: drop-shadow(-1px 0 4px rgba(0, 240, 255, 0.85))
            drop-shadow(1px 0 4px rgba(255, 60, 130, 0.85));
}

a[data-social="youtube"]:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(255, 80, 80, 0.45),
        0 8px 30px rgba(255, 80, 80, 0.45),
        0 0 40px rgba(255, 80, 80, 0.30);
}
a[data-social="youtube"]:hover i { filter: drop-shadow(0 0 6px rgba(255, 80, 80, 0.85)); }

/* Footer .social-icons container: kill the inherited 36x36 that section 14.0
   set, since we're now using 44x44 on every [data-social] uniformly. Also
   make footer socials wrap on mobile instead of overflowing viewport. */
.footer-area .social-icons {
    flex-wrap: wrap;
    gap: 6px;
}

.footer-area .social-icons .list-inline-item {
    margin: 0 !important;
    padding: 0 !important;
}

.footer-area .social-icons a[data-social] {
    width: 44px;
    height: 44px;
}

/* Header (.navbar .icons .nav-link) sits inline with nav — keep them slim */
.navbar .navbar-nav.icons a[data-social] {
    width: 40px;
    height: 40px;
    margin: 0 4px;
    font-size: 16px;
}

/* ============================================================
   37.0 BALANCED-WRAP TITLE UTILITY
============================================================ */

.dazz-balance-title {
    text-wrap: balance;
}

/* ============================================================
   38.0 SCENE TRANSITIONS BETWEEN SERVICE SPOTLIGHTS
   Override the simple ::after hairline from Section 29.0 with
   a 120px-tall transition zone + animated purple accent line.
============================================================ */

/* Override Section 29.0 hairline — make ::after the transition zone */
.service-strip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 120px;
    /* Soft fade from current section's tint into the next section's dark */
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(6, 5, 47, 0.40) 60%,
        rgba(6, 5, 47, 0.95) 100%
    );
    transform: none;       /* override Section 29 translateX */
    pointer-events: none;
    z-index: 3;
}

/* Animated accent line at the boundary */
@keyframes dazz-strip-accent-pulse {
    0%, 100% { opacity: 0.20; transform: translateX(-50%) scaleX(0.85); }
    50%      { opacity: 0.60; transform: translateX(-50%) scaleX(1.05); }
}

.service-strip {
    position: relative;
}

.service-strip > .dazz-strip-accent,
.service-strip::before {
    /* fall through — we use a dedicated ::after on a separate stacking context */
}

/* The accent line is a NEW pseudo on the spotlight via a data-attribute trick:
   we add it inside the existing .service-strip { position:relative } context
   without conflicting with the giant numeral ::before from Section 29.0.
   Use a specific child selector targeting the row's parent container. */
.service-strip > .container::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -60px;
    width: 200px;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(131, 64, 255, 0.85) 50%,
        transparent 100%
    );
    border-radius: 2px;
    animation: dazz-strip-accent-pulse 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
    filter: drop-shadow(0 0 8px rgba(131, 64, 255, 0.5));
}

/* Hide the transition on the LAST spotlight (Service 06 — Websites) so the
   handoff into Portfolio uses the dedicated chip below instead. */
.dazz-bg-svc-web::after,
.dazz-bg-svc-web > .container::after {
    display: none;
}

/* "Selected work below ↓" floating chip after Service 06 */
.dazz-bg-svc-web > .container .dazz-handoff-chip,
.dazz-bg-svc-web::before {
    /* deliberately not used here — see HTML-free approach below */
}

/* HTML-free chip via ::after on the section itself */
.dazz-bg-svc-web {
    position: relative;
}
.dazz-bg-svc-web > .container {
    position: relative;
}
.dazz-bg-svc-web > .container > .row::after {
    content: "Selected work below ↓";
    position: absolute;
    left: 50%;
    bottom: -56px;
    transform: translateX(-50%);
    padding: 8px 18px;
    background: rgba(11, 10, 58, 0.72);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1px solid rgba(131, 64, 255, 0.40);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 8px 25px rgba(89, 0, 255, 0.30);
    z-index: 5;
    white-space: nowrap;
}

/* Mobile: shrink transition zone */
@media (max-width: 767px) {
    .service-strip::after {
        height: 60px;
    }

    .service-strip > .container::after {
        bottom: -30px;
        width: 140px;
    }

    .dazz-bg-svc-web > .container > .row::after {
        bottom: -38px;
        font-size: 10px;
        padding: 7px 14px;
    }
}

/* ============================================================
   39.0 SPOTLIGHT MIN-HEIGHT + PER-IMAGE FOCAL POINTS
   On lg+, give each spotlight section enough vertical room
   (600px min) for the bg image to display generously without
   over-zoom. Per-section background-position selects the
   focal point of each image (annotated below).
============================================================ */

@media (min-width: 992px) {
    .service-strip {
        min-height: 600px;
        display: flex;
        align-items: center;
    }
}

/* Per-image focal points — overrides Section 30.0 with
   carefully chosen positions and same gradient overlays.
   We append these LAST so they win the cascade. */

/* 01 Video Editing — motion blur is symmetric, center works */
body.dark .dazz-bg-svc-video.dark-bg {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/promo-video-editing-bg.png")
        center center / cover no-repeat !important;
}

/* 02 Motion Graphics — light streaks flow rightward */
body.dark .dazz-bg-svc-motion.dark-bg {
    background:
        linear-gradient(270deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/motion-graphics-bg.png")
        center right / cover no-repeat !important;
}

/* 03 Social Media Ads — phone subjects sit center-right */
body.dark .dazz-bg-svc-social.dark-bg {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/social-media-ads-bg.png")
        right center / cover no-repeat !important;
}

/* 04 Logo / Brand Identity — geometric grid, center is balanced */
body.dark .dazz-bg-svc-logo.dark-bg {
    background:
        linear-gradient(270deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/logo-brand-identity-bg.png")
        center center / cover no-repeat !important;
}

/* 05 Image & Video Enhancement — mountain peak focal upper-center */
body.dark .dazz-bg-svc-enhance.dark-bg {
    background:
        linear-gradient(90deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/photo-video-enhancement-bg.png")
        center 30% / cover no-repeat !important;
}

/* 06 Websites & Landing Pages — editing rig sits in the upper portion */
body.dark .dazz-bg-svc-web.dark-bg {
    background:
        linear-gradient(270deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/websites-landing-pages-bg.png")
        center top / cover no-repeat !important;
}

/* ============================================================
   40.0 ACCESSIBILITY — SKIP LINK, FOCUS-VISIBLE, SCROLL PADDING
============================================================ */

/* Skip-to-content link: hidden until focused */
.dazz-skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 10000;
    padding: 12px 20px;
    background: linear-gradient(135deg, #8340ff, #5900ff);
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(89, 0, 255, 0.40);
    transition: top 0.25s ease;
}

.dazz-skip-link:focus,
.dazz-skip-link:focus-visible {
    top: 16px;
    outline: 2px solid #be63f9;
    outline-offset: 2px;
}

/* Anchor jumps account for sticky header height */
html {
    scroll-padding-top: 90px;
}

/* Universal :focus-visible ring (only shows for keyboard users, not mouse) */
*:focus {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #be63f9 !important;
    outline-offset: 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 4px rgba(190, 99, 249, 0.18);
}

/* ============================================================
   41.0 CONTRAST & TOUCH-TARGET FIXES
============================================================ */

/* Improve body-text contrast over image-heavy sections.
   .text-white-50 (template default) is rgba(255,255,255,0.5)
   which can fail WCAG AA over some bg images. Bump to 0.72. */
body.dark .text-white-50 {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Ensure all CTA buttons & social anchors meet 44x44 touch target */
.btn,
.btn-bordered-white,
a[data-social] {
    min-height: 44px;
    min-width: 44px;
}

/* Disable long-press image-save dialog on mobile for portfolio thumbs */
.single-case-studies.dazz-case > a img,
.dazz-featured-thumb img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ============================================================
   42.0 PRINT STYLESHEET
============================================================ */

@media print {
    /* Hide chrome the user can't interact with on paper */
    nav,
    header,
    .navbar,
    #scrollUp,
    .modal,
    #search,
    #menu,
    .dazz-skip-link,
    [data-aos],
    .service-strip::before,
    .service-strip::after,
    .service-strip > .container::after {
        display: none !important;
    }

    /* Force readable, ink-friendly contrast */
    body,
    body.dark,
    .dark-bg,
    [class*="dazz-bg-"] {
        background: #fff !important;
        color: #000 !important;
    }

    .text-white,
    .text-white-50,
    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
        text-shadow: none !important;
    }

    /* Append URLs after links so the printed page is useful */
    a[href^="http"]:after,
    a[href^="https"]:after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }

    /* Don't print background images (saves ink + privacy) */
    [class*="dazz-bg-"] {
        background-image: none !important;
    }

    /* Page break hints */
    section {
        page-break-inside: avoid;
    }
}

/* ============================================================
   43.0 MOBILE PARITY POLISH
   Tightens specific mobile layouts after all section additions.
============================================================ */

@media (max-width: 767px) {
    /* Hero trust strip — wraps to 2 rows naturally with capsule pill */
    .dazz-strip-list {
        max-width: 100%;
    }

    /* Service spotlight stacking gap (Section 29.0 already sets margin-bottom
       on res-margin column — reinforce the gap with min-height reset) */
    .service-strip > .container > .row.align-items-center {
        min-height: 0;
    }

    /* Reduce the giant decorative numeral height impact on layout */
    .service-strip { min-height: 0 !important; }

    /* Footer social rows wrap cleanly */
    .footer-area .social-icons {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* Lightbox: ensure close button is reachable on mobile.
       Override Fancybox 3 default if needed. */
    .fancybox-button.fancybox-button--close {
        top: 8px !important;
        right: 8px !important;
        width: 48px;
        height: 48px;
    }

    .fancybox-slide--iframe .fancybox-content {
        width: 96% !important;
        max-height: 75vh !important;
    }
}

/* ============================================================
   44.0 INLINE SVG TIKTOK FALLBACK
   In case Font Awesome 5 (vendor) wins over Font Awesome 6 (CDN)
   for any reason, this provides a styled marker for fab fa-tiktok
   that doesn't render. We can't easily inject an SVG via CSS
   alone — so we use a Unicode glyph as a final safety net.
   FA6 should render correctly in 99% of cases.
============================================================ */

/* If the FA glyph fails (font swap returned 0-width), the surrounding
   icon container won't be empty — the link still has aria-label. */


/* ============================================================
   45.0 UNIFIED PURPLE NEON SYSTEM
   Forces every icon (service, strip, exp, contact, footer, social)
   to a single brand-purple glow palette. No pink/orange/blue/green
   per-color tints — the brand voice is purple.
   This OVERRIDES the per-color shadows from Section 34.0.
============================================================ */

/* All glass icons get the same purple halo */
.dazz-glass-icon,
.dazz-glass-icon.color-1,
.dazz-glass-icon.color-2,
.dazz-glass-icon.color-3,
.dazz-glass-icon.color-4,
.dazz-glass-icon.color-5,
.dazz-glass-icon.color-6,
.dazz-exp-icon,
.dazz-contact-icon,
.dazz-featured-play {
    background: linear-gradient(135deg,
        rgba(131, 64, 255, 0.18) 0%,
        rgba(89, 0, 255, 0.10) 100%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%);
            backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(131, 64, 255, 0.32) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20),
        0 8px 30px rgba(131, 64, 255, 0.30),
        0 0 40px rgba(131, 64, 255, 0.22) !important;
    color: #fff !important;
    transition: box-shadow 0.4s ease, transform 0.3s ease;
}

/* All FA icons inside glass get a neon white-purple text-shadow */
.dazz-glass-icon i,
.dazz-glass-icon svg,
.dazz-exp-icon i,
.dazz-exp-icon svg,
.dazz-contact-icon i,
.dazz-contact-icon svg,
.dazz-featured-play i {
    color: #fff !important;
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.65),
        0 0 16px rgba(190, 99, 249, 0.65),
        0 0 24px rgba(131, 64, 255, 0.40) !important;
    filter: none !important;
}

/* Hover: amplify */
.dazz-glass-icon:hover,
.dazz-exp-card:hover .dazz-exp-icon,
.dazz-contact-card:hover .dazz-contact-icon,
.single-service:hover .dazz-glass-icon,
.dazz-strip-list li:hover .dazz-glass-icon {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 14px 50px rgba(131, 64, 255, 0.55),
        0 0 70px rgba(131, 64, 255, 0.40) !important;
    transform: translateY(-2px);
}

/* ============================================================
   46.0 CREATIVE EXPERIMENTS — REDESIGNED CARDS
   Fixes the thin-pillar look. Wider cards, better typography
   hierarchy, glass treatment that matches the rest of the site.
============================================================ */

/* Override default Bootstrap col-lg-4 narrowness on lg only */
@media (min-width: 992px) {
    .dazz-experiments .row.justify-content-center > [class*="col-lg-4"] {
        flex: 0 0 31%;
        max-width: 380px;
    }
}

/* The card itself — fix padding, alignment, hierarchy */
.dazz-exp-card {
    padding: 40px 32px !important;
    border-radius: 18px !important;
    background: rgba(11, 10, 58, 0.62) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%);
            backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(131, 64, 255, 0.20) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-decoration: none !important;
    transition:
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.dazz-exp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(131, 64, 255, 0.10) 0%,
        transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

.dazz-exp-card:hover {
    transform: translateY(-6px);
    border-color: rgba(131, 64, 255, 0.55) !important;
    box-shadow:
        0 30px 70px rgba(89, 0, 255, 0.35),
        0 0 0 1px rgba(190, 99, 249, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.dazz-exp-card:hover::before {
    opacity: 1;
}

/* The icon inside an exp-card */
.dazz-exp-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 16px !important;
    font-size: 26px !important;
    margin-bottom: 8px;
}

/* Typography hierarchy */
.dazz-exp-card h3 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2px;
    margin-top: 18px !important;
    white-space: nowrap;       /* keep "Creative TikTok 01" on one line */
}

.dazz-exp-card p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 600;
}

.dazz-exp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(131, 64, 255, 0.12);
    border: 1px solid rgba(131, 64, 255, 0.40);
    border-radius: 999px;
    color: #c9b5ff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.dazz-exp-card:hover .dazz-exp-link {
    background: rgba(131, 64, 255, 0.30);
    border-color: rgba(190, 99, 249, 0.65);
    color: #fff !important;
    transform: translateX(4px);
}

.dazz-exp-link i {
    transition: transform 0.3s ease;
}

.dazz-exp-card:hover .dazz-exp-link i {
    transform: translateX(4px);
}

/* On mobile, allow wider cards stacking */
@media (max-width: 991px) {
    .dazz-exp-card h3 {
        white-space: normal;
    }
}

/* ============================================================
   47.0 SECTION-BOUNDARY FLOW UNIFIER
   Removes the visible color mismatch line between the bottom of
   one section and the top of the next. Adds a soft 60px fade-in
   shadow at the top of every backgrounded section so abutting
   sections blend instead of butting heads.
============================================================ */

/* Soften the existing service-strip transition (Section 38.0).
   The dark fade was too dark, creating a visible band. */
.service-strip::after {
    height: 80px !important;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(6, 5, 47, 0.20) 70%,
        rgba(6, 5, 47, 0.40) 100%
    ) !important;
}

/* Add a top-fade pseudo to every backgrounded section so the
   transition feels intentional from BOTH sides. */
[class*="dazz-bg-"]:not(.dazz-bg-footer)::before {
    content: none;  /* don't conflict with Section 29.0's giant numerals */
}

/* Use a real injected element on the section's first child for
   the top-fade. Since we can't add HTML, use the section itself
   with a box-shadow trick to softly fade in from above. */
.dazz-bg-money,
.dazz-bg-services,
.dazz-bg-portfolio,
.dazz-bg-why,
.dazz-bg-process,
.dazz-bg-about,
.dazz-bg-experiments,
.dazz-bg-contact,
.dazz-bg-svc-video,
.dazz-bg-svc-motion,
.dazz-bg-svc-social,
.dazz-bg-svc-logo,
.dazz-bg-svc-enhance,
.dazz-bg-svc-web {
    box-shadow: inset 0 60px 80px -40px rgba(6, 5, 47, 0.55);
}

/* Reduce on mobile (less screen space) */
@media (max-width: 767px) {
    .dazz-bg-money,
    .dazz-bg-services,
    .dazz-bg-portfolio,
    .dazz-bg-why,
    .dazz-bg-process,
    .dazz-bg-about,
    .dazz-bg-experiments,
    .dazz-bg-contact,
    .dazz-bg-svc-video,
    .dazz-bg-svc-motion,
    .dazz-bg-svc-social,
    .dazz-bg-svc-logo,
    .dazz-bg-svc-enhance,
    .dazz-bg-svc-web {
        box-shadow: inset 0 30px 50px -25px rgba(6, 5, 47, 0.55);
    }
}

/* ============================================================
   48.0 FEATURED PROJECT — IMAGE/TEXT BALANCE
   Image was in col-lg-7 dominating the layout. Constrain it.
============================================================ */

.dazz-featured-thumb {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    /* Center the image vertically with the text */
    .dazz-featured .row {
        align-items: center;
    }
    .dazz-featured-content {
        padding-left: 20px;
    }
}

/* Constrain the image's intrinsic display so it doesn't dominate */
.dazz-featured-thumb img {
    max-height: 460px;
    object-fit: cover;
    object-position: center;
}

/* ============================================================
   49.0 FOUNDER MONOGRAM — STYLIZED SVG (replaces "DD")
============================================================ */

.dazz-founder-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(190, 99, 249, 0.45) 0%,
            rgba(89, 0, 255, 0.15) 60%,
            rgba(11, 10, 58, 0.85) 100%);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1.5px solid rgba(131, 64, 255, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 12px rgba(89, 0, 255, 0.30),
        0 0 0 6px rgba(131, 64, 255, 0.12),
        0 0 0 12px rgba(131, 64, 255, 0.06),
        0 12px 40px rgba(89, 0, 255, 0.35),
        0 0 60px rgba(190, 99, 249, 0.30);
    position: relative;
    animation: dazz-monogram-pulse 4s ease-in-out infinite;
}

@keyframes dazz-monogram-pulse {
    0%, 100% {
        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 0.18),
            inset 0 -2px 12px rgba(89, 0, 255, 0.30),
            0 0 0 6px rgba(131, 64, 255, 0.12),
            0 0 0 12px rgba(131, 64, 255, 0.06),
            0 12px 40px rgba(89, 0, 255, 0.35),
            0 0 60px rgba(190, 99, 249, 0.30);
    }
    50% {
        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 0.22),
            inset 0 -2px 12px rgba(89, 0, 255, 0.40),
            0 0 0 8px rgba(131, 64, 255, 0.18),
            0 0 0 16px rgba(131, 64, 255, 0.09),
            0 16px 50px rgba(89, 0, 255, 0.45),
            0 0 80px rgba(190, 99, 249, 0.45);
    }
}

.dazz-founder-monogram {
    width: 80%;
    height: 80%;
    display: block;
}

@media (max-width: 575px) {
    .dazz-founder-avatar {
        width: 110px;
        height: 110px;
    }
}

/* ============================================================
   50.0 LIGHTBOX VIDEO ORIENTATION FIX
   Fancybox iframe forces 16:9 aspect-ratio. Drive /preview
   doesn't auto-detect orientation. We can't change the iframe
   embed itself, but we can:
   - Default to 9:16 portrait sizing for known portrait projects
   - Use object-fit on the iframe via wrapping the container
   - Provide a max-height that respects viewport on either
     orientation so videos never crop awkwardly.
   The 12 portfolio projects are mostly portrait (vertical reels)
   and 3 are landscape (Money Evolution, brand promo, Anastasia).
============================================================ */

/* Default Fancybox content: respect aspect-ratio of source.
   We use container-query-like behavior: pick the smaller of
   {16/9, 9/16} based on viewport orientation. */
.fancybox-slide--iframe .fancybox-content {
    max-width: 95vw !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    background: #000 !important;
    border-radius: 8px;
    overflow: hidden;
    /* For portrait-dominant grid: prefer 9:16 unless content is wider */
}

/* On wide screens (desktop landscape): use 9:16 portrait default
   since 9 of 12 projects are vertical reels — but constrain by viewport
   height so it always fits. */
@media (min-width: 992px) {
    .fancybox-slide--iframe .fancybox-content {
        width: min(56vh, 90vw) !important;
        height: min(96vh, 162vw) !important;  /* 16/9 of width */
        aspect-ratio: 9 / 16 !important;
    }
}

/* On portrait/mobile: full width, 9:16 */
@media (max-width: 991px) {
    .fancybox-slide--iframe .fancybox-content {
        width: 96vw !important;
        max-height: 88vh !important;
        aspect-ratio: 9 / 16 !important;
    }
}

/* Iframe inside fills its container correctly */
.fancybox-iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: #000;
}

/* For known LANDSCAPE projects, override on the per-trigger level
   using data-orientation. We've added it to the 3 known landscape
   projects: Money Evolution (index 0), Brand Promo (index 1),
   Anastasia (index 11). Apply via :has() on parent if supported. */
@media (min-width: 992px) {
    /* When the active slide is a 16:9 project, switch the modal
       to landscape sizing. We use a class hook .fancybox-landscape
       that we'll toggle via CSS attribute selector. */
    .fancybox-slide--iframe.fancybox-landscape .fancybox-content,
    body.dazz-fb-landscape .fancybox-slide--iframe .fancybox-content {
        width: min(85vw, 1280px) !important;
        height: min(85vh, 720px) !important;
        aspect-ratio: 16 / 9 !important;
    }
}

/* ============================================================
   51.0 FOOTER POLISH — TIGHTER SPACING + ICON CONSISTENCY
============================================================ */

/* Footer social rows: ensure 4-6 icons fit on one row at desktop */
.footer-area .social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

.footer-area .footer-items > h3.footer-title {
    margin-bottom: 18px !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.footer-area .footer-items p,
.footer-area .footer-items ul li a {
    font-size: 13.5px;
    line-height: 1.7;
}

.footer-area h4 {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    margin-top: 24px !important;
    margin-bottom: 10px !important;
}

/* Footer copyright row: tighter, calmer */
.footer-area .copyright-area {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ============================================================
   52.0 HERO TRUST STRIP — REPAIR THE BAND
   The hero ends, then there's a visible mismatch where the strip
   begins. Smooth this by making the strip's top blend into the
   hero gradient. Also tighten the capsule on lg+.
============================================================ */

.dazz-strip {
    /* Match the hero's bottom tint at the strip's top */
    background:
        linear-gradient(180deg,
            rgba(6, 5, 47, 0.92) 0%,
            rgba(6, 5, 47, 0.96) 40%,
            rgba(6, 5, 47, 0.96) 100%) !important;
}

/* Featured Money Evolution section: match the strip's bottom tint
   at its top edge */
.dazz-featured {
    background-blend-mode: normal;
}

body.dark .dazz-featured.dazz-bg-money.dark-bg {
    /* Layer a top fade that matches the strip's tint */
    background:
        linear-gradient(180deg,
            rgba(6, 5, 47, 0.96) 0%,
            rgba(6, 5, 47, 0.62) 18%,
            rgba(6, 5, 47, 0.78) 100%),
        url("../img/dazz-media-studio/backgrounds/money-evolution-bg.png")
        center center / cover no-repeat !important;
}


/* ============================================================
   53.0 SECTION-BOUNDARY HARD-LINE FIX (overrides Section 47.0)
   Section 47.0's `inset box-shadow: 0 60px 80px -40px` rendered
   as a visible dark band INSIDE each section's top edge — when
   two sections meet, that band collides with the bottom of the
   previous section, producing the red horizontal line the user
   keeps marking on screenshot after screenshot.
   The real fix: kill the inset entirely, and use radial-gradient
   pseudo-elements that bleed ACROSS the section boundary in
   both directions, so the eye never lands on a discrete edge.
============================================================ */

/* 1. Wipe the inset shadow from every section (overrides 47.0) */
.dazz-bg-money,
.dazz-bg-services,
.dazz-bg-portfolio,
.dazz-bg-why,
.dazz-bg-process,
.dazz-bg-about,
.dazz-bg-experiments,
.dazz-bg-contact,
.dazz-bg-svc-video,
.dazz-bg-svc-motion,
.dazz-bg-svc-social,
.dazz-bg-svc-logo,
.dazz-bg-svc-enhance,
.dazz-bg-svc-web {
    box-shadow: none !important;
}

/* 2. Wipe the service-strip ::after dark band that was creating
   the visible band between Process / About and About / Experiments. */
.service-strip::after,
.service-strip > .container::after {
    /* keep these for service-strip-to-service-strip boundaries only */
}

/* 3. Tame the gradient overlays at section TOP edges so they
   start transparent and fade into their section color further
   down. This is the actual structural fix. The previous gradients
   started at 0.74 opacity right at the top edge → visible cliff. */

body.dark .dazz-bg-portfolio.dark-bg {
    background:
        linear-gradient(
            180deg,
            rgba(6, 5, 47, 0.55) 0%,
            rgba(6, 5, 47, 0.92) 12%,
            rgba(6, 5, 47, 0.96) 50%,
            rgba(6, 5, 47, 0.92) 88%,
            rgba(6, 5, 47, 0.55) 100%
        ),
        url("../img/dazz-media-studio/backgrounds/portfolio-showcase-bg.png")
        center top / cover no-repeat !important;
}

body.dark .dazz-bg-process.dark-bg {
    background:
        linear-gradient(180deg,
            rgba(6, 5, 47, 0.45) 0%,
            rgba(6, 5, 47, 0.72) 15%,
            rgba(6, 5, 47, 0.88) 100%),
        url("../img/dazz-media-studio/backgrounds/process-workflow-bg.png")
        center top / cover no-repeat !important;
}

body.dark .dazz-bg-about.dark-bg {
    background:
        linear-gradient(180deg,
            rgba(6, 5, 47, 0.45) 0%,
            rgba(6, 5, 47, 0.78) 12%,
            rgba(6, 5, 47, 0.78) 88%,
            rgba(6, 5, 47, 0.55) 100%),
        linear-gradient(90deg, rgba(6, 5, 47, 0.50), rgba(6, 5, 47, 0.30)),
        url("../img/dazz-media-studio/backgrounds/about-studio-bg.png")
        right top / cover no-repeat !important;
}

body.dark .dazz-bg-experiments.dark-bg {
    background:
        linear-gradient(180deg,
            rgba(6, 5, 47, 0.55) 0%,
            rgba(6, 5, 47, 0.74) 14%,
            rgba(6, 5, 47, 0.74) 86%,
            rgba(6, 5, 47, 0.55) 100%),
        linear-gradient(90deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/creative-experiments-anime-movies-tv-bg.png")
        center right / cover no-repeat !important;
}

body.dark .dazz-bg-contact.dark-bg {
    background:
        linear-gradient(180deg,
            rgba(6, 5, 47, 0.45) 0%,
            rgba(6, 5, 47, 0.86) 12%,
            rgba(6, 5, 47, 0.92) 50%,
            rgba(6, 5, 47, 0.86) 88%,
            rgba(6, 5, 47, 0.50) 100%),
        url("../img/dazz-media-studio/backgrounds/contact-global-studio-bg.png")
        center top / cover no-repeat !important;
}

body.dark .dazz-bg-why.dark-bg {
    background:
        linear-gradient(180deg,
            rgba(6, 5, 47, 0.45) 0%,
            rgba(6, 5, 47, 0.70) 12%,
            rgba(6, 5, 47, 0.70) 88%,
            rgba(6, 5, 47, 0.45) 100%),
        linear-gradient(90deg, rgba(6, 5, 47, 0.55), rgba(6, 5, 47, 0.30)),
        url("../img/dazz-media-studio/backgrounds/why-choose-editing-studio-bg.png")
        center center / cover no-repeat !important;
}

body.dark .dazz-bg-services.dark-bg {
    background:
        linear-gradient(180deg,
            rgba(6, 5, 47, 0.45) 0%,
            rgba(6, 5, 47, 0.78) 14%,
            rgba(6, 5, 47, 0.78) 86%,
            rgba(6, 5, 47, 0.50) 100%),
        url("../img/dazz-media-studio/backgrounds/services-creative-production-bg.png")
        center center / cover no-repeat !important;
}

body.dark .dazz-bg-money.dark-bg {
    background:
        linear-gradient(180deg,
            rgba(6, 5, 47, 0.96) 0%,
            rgba(6, 5, 47, 0.62) 18%,
            rgba(6, 5, 47, 0.78) 82%,
            rgba(6, 5, 47, 0.55) 100%),
        url("../img/dazz-media-studio/backgrounds/money-evolution-bg.png")
        center center / cover no-repeat !important;
}

/* 4. Service spotlight strips: same edge-fade treatment so the
   transition from Service 06 → Portfolio doesn't show a band. */
body.dark .dazz-bg-svc-video.dark-bg {
    background:
        linear-gradient(180deg, rgba(6,5,47,0.45) 0%, rgba(6,5,47,0.74) 12%, rgba(6,5,47,0.74) 88%, rgba(6,5,47,0.45) 100%),
        linear-gradient(90deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/promo-video-editing-bg.png")
        center center / cover no-repeat !important;
}
body.dark .dazz-bg-svc-motion.dark-bg {
    background:
        linear-gradient(180deg, rgba(6,5,47,0.45) 0%, rgba(6,5,47,0.74) 12%, rgba(6,5,47,0.74) 88%, rgba(6,5,47,0.45) 100%),
        linear-gradient(270deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/motion-graphics-bg.png")
        center right / cover no-repeat !important;
}
body.dark .dazz-bg-svc-social.dark-bg {
    background:
        linear-gradient(180deg, rgba(6,5,47,0.45) 0%, rgba(6,5,47,0.74) 12%, rgba(6,5,47,0.74) 88%, rgba(6,5,47,0.45) 100%),
        linear-gradient(90deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/social-media-ads-bg.png")
        right center / cover no-repeat !important;
}
body.dark .dazz-bg-svc-logo.dark-bg {
    background:
        linear-gradient(180deg, rgba(6,5,47,0.45) 0%, rgba(6,5,47,0.74) 12%, rgba(6,5,47,0.74) 88%, rgba(6,5,47,0.45) 100%),
        linear-gradient(270deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/logo-brand-identity-bg.png")
        center center / cover no-repeat !important;
}
body.dark .dazz-bg-svc-enhance.dark-bg {
    background:
        linear-gradient(180deg, rgba(6,5,47,0.45) 0%, rgba(6,5,47,0.74) 12%, rgba(6,5,47,0.74) 88%, rgba(6,5,47,0.45) 100%),
        linear-gradient(90deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/photo-video-enhancement-bg.png")
        center 30% / cover no-repeat !important;
}
body.dark .dazz-bg-svc-web.dark-bg {
    background:
        linear-gradient(180deg, rgba(6,5,47,0.45) 0%, rgba(6,5,47,0.74) 12%, rgba(6,5,47,0.74) 88%, rgba(6,5,47,0.45) 100%),
        linear-gradient(270deg, rgba(6, 5, 47, 0.74), rgba(6, 5, 47, 0.42)),
        url("../img/dazz-media-studio/backgrounds/websites-landing-pages-bg.png")
        center top / cover no-repeat !important;
}

/* 5. Soften the service-strip transition pseudo from 38.0/47.0
   so it blends smoothly into the next section. */
.service-strip::after {
    height: 60px !important;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(6, 5, 47, 0.10) 50%,
        rgba(6, 5, 47, 0.25) 100%
    ) !important;
    bottom: -1px !important;
}

/* ============================================================
   54.0 CREATIVE EXPERIMENTS — REAL CARD WIDTH FIX
   Bootstrap's `.col-lg-4` declares `flex: 0 0 33.333333%` with
   high specificity. Section 46.0's max-width:380px constrained
   width but the column shell still occupied 33% of the row, so
   the card sat narrowly inside it = pillar effect.
   Real fix: override the column flex AND the row's centering so
   cards sit as proper centered cards with breathing room.
============================================================ */

@media (min-width: 992px) {
    /* The row containing the 3 exp cards */
    .dazz-experiments .row.justify-content-center {
        gap: 28px;
        flex-wrap: wrap;
        justify-content: center !important;
    }

    /* Override Bootstrap col-lg-4 sizing for this section ONLY */
    .dazz-experiments .row.justify-content-center > [class*="col-lg-4"] {
        flex: 0 1 320px !important;
        max-width: 360px !important;
        min-width: 280px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .dazz-experiments .row.justify-content-center {
        gap: 24px;
    }
    .dazz-experiments .row.justify-content-center > [class*="col-md-6"] {
        flex: 0 1 320px !important;
        max-width: 360px !important;
    }
}

/* The card itself: ensure it actually renders as a card, not a strip */
.dazz-exp-card {
    width: 100% !important;
    max-width: 360px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box;
}

/* Allow exp card title to wrap if "Creative TikTok 01" is too long
   on very narrow viewports (override Section 46.0's nowrap) */
@media (max-width: 360px) {
    .dazz-exp-card h3 {
        white-space: normal !important;
        font-size: 18px !important;
    }
}

/* ============================================================
   55.0 INLINE SVG SOCIAL ICONS — STYLING
   The 18 inline SVG icons we just replaced FA glyphs with need
   the same glass shell + purple neon hover treatment as before.
   Section 36.0 styled `a[data-social]` containers — but the SVG
   children need their own size + color rules.
============================================================ */

/* Make sure SVGs inherit the white color from the parent <a> */
a[data-social] svg {
    color: #fff;
    width: 22px;
    height: 22px;
    display: block;
    transition: filter 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Force SVG centering inside the 44x44 glass capsule */
a[data-social] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Header social: smaller SVG to match smaller anchor */
.navbar .navbar-nav.icons a[data-social] svg {
    width: 18px;
    height: 18px;
}

/* Hover: SVG inherits the per-platform glow filter from Section 36.0,
   but we re-declare here to ensure it survives the cascade */
a[data-social="instagram"]:hover svg { filter: drop-shadow(0 0 6px rgba(225, 93, 255, 0.85)); }
a[data-social="facebook"]:hover svg  { filter: drop-shadow(0 0 6px rgba(64, 130, 255, 0.85)); }
a[data-social="linkedin"]:hover svg  { filter: drop-shadow(0 0 6px rgba(120, 200, 255, 0.85)); }
a[data-social="youtube"]:hover svg   { filter: drop-shadow(0 0 6px rgba(255, 80, 80, 0.85)); }
a[data-social="tiktok"]:hover svg    {
    filter: drop-shadow(-1px 0 4px rgba(0, 240, 255, 0.85))
            drop-shadow(1px 0 4px rgba(255, 60, 130, 0.85));
}

/* Inline SVG used inside .dazz-glass-icon containers (e.g. WhatsApp/Email
   contact-card icons) — sized + glowed like FA icons used to be */
.dazz-glass-icon svg,
.dazz-contact-icon svg,
.dazz-exp-icon svg {
    width: 28px;
    height: 28px;
    color: #fff;
    filter: drop-shadow(0 0 8px rgba(190, 99, 249, 0.55));
}

/* Exp-card icons inside the new exp-icon shell are bigger */
.dazz-exp-icon svg {
    width: 32px;
    height: 32px;
}

/* Inline SVG in buttons (paper-plane "Start a Project") */
.btn svg.contact-icon {
    color: currentColor;
    vertical-align: middle;
}

/* ============================================================
   56.0 EXP-CARD ICON FIX — keep .dazz-exp-icon visible
   The icon container needs explicit dimensions since the SVG
   replaced the FA <i> that had implicit font-size sizing.
============================================================ */

.dazz-exp-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 16px;
}


/* ============================================================
   57.0 CREATIVE CHANNELS — UNCOLLAPSE THE CARDS (root-cause fix)
   ROOT CAUSE: Section 36.0 styled every <a data-social="..."> as a
   44×44 inline-flex glass capsule. The Creative Channels anchors
   ALSO carry data-social="youtube|tiktok" (added for per-platform
   icon glow on hover). Result: each entire card was being forced
   down to 44×44 — the visible "thin bars" were the collapsed card
   shells; the content (icon, title, handle, button) was overflowing
   invisibly outside.
   FIX: Scope all 36.0/55.0 social-icon-shell rules to EXCLUDE
   .dazz-exp-card, and explicitly re-state the card's correct
   layout properties so they win the cascade.
============================================================ */

/* 1. Undo every Section 36.0 + 55.0 social-shell rule on the card itself */
a.dazz-exp-card[data-social],
a.dazz-exp-card {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 40px 32px !important;
    border-radius: 18px !important;
    background: rgba(11, 10, 58, 0.62) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%);
            backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(131, 64, 255, 0.20) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    text-align: center !important;
    font-size: inherit !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transition:
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease !important;
    position: relative !important;
}

/* 2. Hover: amplify glow + lift, override Section 36.0's hover */
a.dazz-exp-card[data-social]:hover,
a.dazz-exp-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(131, 64, 255, 0.55) !important;
    box-shadow:
        0 30px 70px rgba(89, 0, 255, 0.40),
        0 0 0 1px rgba(190, 99, 249, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
}

/* 3. Per-platform hover glow filter on the ICON inside the card,
   not on the entire card. Section 55.0 was applying the SVG
   drop-shadow on direct child SVGs of the data-social anchor —
   we keep that, but only on the inner SVG inside .dazz-exp-icon */
a.dazz-exp-card[data-social="youtube"]:hover .dazz-exp-icon svg {
    filter: drop-shadow(0 0 8px rgba(255, 80, 80, 0.85)) !important;
}
a.dazz-exp-card[data-social="tiktok"]:hover .dazz-exp-icon svg {
    filter:
        drop-shadow(-1px 0 4px rgba(0, 240, 255, 0.85))
        drop-shadow(1px 0 4px rgba(255, 60, 130, 0.85)) !important;
}

/* 4. The OUTER card itself never gets the per-platform hover ring
   — only its inner SVG does (rule 3 above). This kills the box-shadow
   pile-up that was happening when Section 36.0's per-platform
   hover added a tinted ring on top of the card ring. */
a.dazz-exp-card[data-social="youtube"]:hover,
a.dazz-exp-card[data-social="tiktok"]:hover {
    box-shadow:
        0 30px 70px rgba(89, 0, 255, 0.40),
        0 0 0 1px rgba(190, 99, 249, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* 5. Inner icon container — keep the 64×64 glass shell */
.dazz-exp-card .dazz-exp-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg,
        rgba(131, 64, 255, 0.20) 0%,
        rgba(89, 0, 255, 0.10) 100%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%);
            backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(131, 64, 255, 0.40) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 8px 30px rgba(131, 64, 255, 0.30),
        0 0 40px rgba(131, 64, 255, 0.22) !important;
    color: #fff !important;
}

.dazz-exp-card .dazz-exp-icon svg {
    width: 32px !important;
    height: 32px !important;
    color: #fff !important;
    filter: drop-shadow(0 0 8px rgba(190, 99, 249, 0.55));
    transition: filter 0.3s ease;
}

/* 6. Card text hierarchy — make sure h3 + p + link are visible */
.dazz-exp-card h3 {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2px !important;
    margin-top: 18px !important;
    margin-bottom: 8px !important;
    white-space: nowrap !important;
    display: block !important;
}

.dazz-exp-card p {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 13px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    margin-bottom: 18px !important;
    display: block !important;
}

.dazz-exp-card .dazz-exp-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    background: rgba(131, 64, 255, 0.12) !important;
    border: 1px solid rgba(131, 64, 255, 0.40) !important;
    border-radius: 999px !important;
    color: #c9b5ff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    width: auto !important;
    height: auto !important;
    transition: all 0.3s ease !important;
}

.dazz-exp-card:hover .dazz-exp-link {
    background: rgba(131, 64, 255, 0.30) !important;
    border-color: rgba(190, 99, 249, 0.65) !important;
    color: #fff !important;
}

/* 7. Column container — make sure it gives the card real estate */
.dazz-experiments .row.justify-content-center > [class*="col-"] {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 28px !important;
}

@media (min-width: 992px) {
    .dazz-experiments .row.justify-content-center > [class*="col-lg-4"] {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-bottom: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .dazz-experiments .row.justify-content-center > [class*="col-md-6"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* 8. Allow exp card title wrap on narrow phones (override nowrap above) */
@media (max-width: 360px) {
    .dazz-exp-card h3 {
        white-space: normal !important;
        font-size: 18px !important;
    }
}