/* --------------------------------------------------------------
   Page-specific treatments & decorative effects
-------------------------------------------------------------- */
.bg-gradient-blue,
.services-hero,
.blog-hero,
.case-study-hero,
.product-hero,
.contact-hero {
    position: relative;
    padding: clamp(5rem, 8vw, 6.75rem) 0;
    color: #f8fafc;
    overflow: hidden;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.bg-gradient-blue {
    background:
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.24) 0%, rgba(11, 17, 32, 0) 55%),
        radial-gradient(circle at 80% 70%, rgba(14, 165, 233, 0.22) 0%, rgba(11, 17, 32, 0) 55%),
        linear-gradient(135deg, #0b1120 0%, #10203e 55%, #0b1120 100%);
}

.services-hero {
    background:
        radial-gradient(circle at 40% 40%, rgba(245, 101, 101, 0.22) 0%, rgba(15, 23, 42, 0) 55%),
        radial-gradient(circle at 70% 20%, rgba(251, 191, 36, 0.24) 0%, rgba(15, 23, 42, 0) 60%),
        linear-gradient(135deg, #14192a 0%, #1f2937 100%);
}

.blog-hero {
    background:
        radial-gradient(circle at 30% 20%, rgba(34, 197, 94, 0.22) 0%, rgba(15, 23, 42, 0) 55%),
        radial-gradient(circle at 70% 80%, rgba(168, 85, 247, 0.22) 0%, rgba(15, 23, 42, 0) 55%),
        linear-gradient(135deg, #111827 0%, #1f2937 100%);
}

.case-study-hero {
    background:
        radial-gradient(circle at 25% 75%, rgba(255, 165, 0, 0.22) 0%, rgba(12, 17, 23, 0) 60%),
        radial-gradient(circle at 75% 25%, rgba(139, 69, 19, 0.2) 0%, rgba(12, 17, 23, 0) 60%),
        linear-gradient(135deg, #0c1117 0%, #1a202c 100%);
}

.product-hero {
    background:
        radial-gradient(circle at 60% 20%, rgba(16, 185, 129, 0.25) 0%, rgba(6, 22, 33, 0) 60%),
        radial-gradient(circle at 30% 80%, rgba(99, 102, 241, 0.22) 0%, rgba(6, 22, 33, 0) 55%),
        linear-gradient(135deg, #064e3b 0%, #065f46 100%);
}

.contact-hero {
    background:
        radial-gradient(circle at 35% 65%, rgba(217, 70, 239, 0.26) 0%, rgba(20, 0, 36, 0) 60%),
        radial-gradient(circle at 70% 35%, rgba(56, 189, 248, 0.24) 0%, rgba(20, 0, 36, 0) 60%),
        linear-gradient(135deg, #581c87 0%, #7c3aed 100%);
}

.bg-gradient-blue::before,
.services-hero::before,
.blog-hero::before,
.case-study-hero::before,
.product-hero::before,
.contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.08) 0, rgba(148, 163, 184, 0.08) 2px, transparent 2px, transparent 18px);
    opacity: 0.35;
    mix-blend-mode: screen;
    z-index: 1;
    animation: heroSweep 18s ease-in-out infinite alternate;
}

.bg-gradient-blue::after,
.services-hero::after,
.blog-hero::after,
.case-study-hero::after,
.product-hero::after,
.contact-hero::after {
    content: '';
    position: absolute;
    inset: auto -22% -55% -22%;
    height: clamp(240px, 40vw, 420px);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(96, 165, 250, 0.32) 0%, rgba(4, 9, 21, 0) 70%),
        radial-gradient(ellipse at 15% 35%, rgba(251, 191, 36, 0.22) 0%, rgba(4, 9, 21, 0) 70%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.bg-gradient-blue > .container,
.services-hero > .container,
.blog-hero > .container,
.case-study-hero > .container,
.product-hero > .container,
.contact-hero > .container {
    position: relative;
    z-index: 2;
    padding: clamp(2.6rem, 5vw, 4rem);
    border-radius: var(--mtd-radius-large);
    background: linear-gradient(120deg, rgba(8, 15, 33, 0.8) 0%, rgba(19, 29, 54, 0.68) 100%);
    border: 1px solid rgba(96, 165, 250, 0.22);
    box-shadow: 0 32px 82px rgba(2, 6, 17, 0.6);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

.bg-gradient-blue > .container::before,
.services-hero > .container::before,
.blog-hero > .container::before,
.case-study-hero > .container::before,
.product-hero > .container::before,
.contact-hero > .container::before {
    content: '';
    position: absolute;
    inset: -45% -20% 15% 38%;
    background: radial-gradient(ellipse at 0% 50%, rgba(96, 165, 250, 0.22) 0%, rgba(8, 15, 33, 0) 75%);
    filter: blur(48px);
    opacity: 0.55;
    z-index: 0;
}

.bg-gradient-blue > .container::after,
.services-hero > .container::after,
.blog-hero > .container::after,
.case-study-hero > .container::after,
.product-hero > .container::after,
.contact-hero > .container::after {
    content: '';
    position: absolute;
    top: 12%;
    right: -14%;
    width: clamp(180px, 24vw, 320px);
    height: clamp(220px, 28vw, 360px);
    background:
        linear-gradient(135deg, rgba(96, 165, 250, 0.28) 0%, rgba(14, 116, 233, 0.08) 70%),
        repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.16) 0, rgba(148, 163, 184, 0.16) 2px, transparent 2px, transparent 12px);
    opacity: 0.4;
    transform: rotate(8deg);
    mix-blend-mode: screen;
    z-index: 1;
}

.bg-gradient-blue > .container > *,
.services-hero > .container > *,
.blog-hero > .container > *,
.case-study-hero > .container > *,
.product-hero > .container > *,
.contact-hero > .container > * {
    position: relative;
    z-index: 2;
}

.bg-gradient-blue .lead,
.services-hero .lead,
.blog-hero .lead,
.case-study-hero .lead,
.product-hero .lead,
.contact-hero .lead {
    color: rgba(226, 232, 240, 0.75);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

@keyframes heroSweep {
    0% { transform: translateY(-6%) rotate(6deg); opacity: 0.35; }
    50% { transform: translateY(4%) rotate(8deg); opacity: 0.62; }
    100% { transform: translateY(-6%) rotate(6deg); opacity: 0.35; }
}

.stats .container::after {
    content: '';
    position: absolute;
    inset: auto auto -35% 12%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.24) 0%, rgba(251, 191, 36, 0) 70%);
    filter: blur(55px);
    opacity: 0.35;
    pointer-events: none;
}

@keyframes networkPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.04); }
}

@keyframes dataFlow {
    0% { transform: translateX(0); }
    100% { transform: translateX(40px); }
}

.bg-gradient-blue::before {
    animation: networkPulse 18s ease-in-out infinite;
}

.blog-hero::before {
    animation: dataFlow 14s linear infinite;
}

@media (max-width: 768px) {
    .bg-gradient-blue > .container,
    .services-hero > .container,
    .blog-hero > .container,
    .case-study-hero > .container,
    .product-hero > .container,
    .contact-hero > .container {
        padding: clamp(2rem, 8vw, 2.75rem);
        border-radius: 24px;
    }

    .bg-gradient-blue::after,
    .services-hero::after,
    .blog-hero::after,
    .case-study-hero::after,
    .product-hero::after,
    .contact-hero::after {
        inset: auto -30% -65% -30%;
    }
}