/* ============================================
   ApexGenLabs Premium Custom Styles
   Bootstrap 5.3.8 - Agency-Grade Design System
   ============================================ */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
    /* Brand Colors - Refined Palette */
    --color-primary: #FF6B35;
    --color-primary-rgb: 255, 107, 53;
    --color-primary-light: #FF8F66;
    --color-primary-dark: #E55A2B;
    --color-secondary: #6366F1;
    --color-secondary-rgb: 99, 102, 241;
    --color-secondary-light: #818CF8;
    --color-accent: #10B981;
    --color-accent-rgb: 16, 185, 129;
    --color-accent-light: #34D399;

    /* Neutral Colors - Modern Slate */
    --color-dark: #0f172a;
    --color-dark-lighter: #1e293b;
    --color-dark-lightest: #334155;
    --color-light: #f8fafc;
    --color-light-darker: #f1f5f9;
    --color-muted: #94a3b8;
    --color-hero-text: #e2e8f0;
    --color-hero-muted: rgba(226, 232, 240, 0.78);

    /* Special Colors */
    --color-glass: rgba(255, 255, 255, 0.08);
    --color-glass-border: rgba(255, 255, 255, 0.12);

    /* Subtle SVG Background Patterns */
    --pattern-tech-opacity: 0.045;
    --pattern-trust-opacity: 0.038;
    --pattern-tech-size: 640px 420px;
    --pattern-trust-size: 700px 420px;
    --pattern-tech-position: 0 0;
    --pattern-trust-position: 0 0;

    /* Premium Typography - Satoshi + General Sans */
    --font-display: 'Satoshi', system-ui, sans-serif;
    --font-heading: 'Satoshi', system-ui, sans-serif;
    --font-body: 'General Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Spacing */
    --navbar-height: 80px;
    --navbar-height-shrink: 64px;

    /* Premium Easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Premium Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
    --shadow-glow-primary: 0 0 40px rgba(255, 107, 53, 0.35);
    --shadow-glow-secondary: 0 0 40px rgba(99, 102, 241, 0.35);

    /* Button Radius */
    --radius-pill: 100px;
    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-sm: 8px;
}

/* ============================================
   9) TYPOGRAPHY - Premium Font System
   ============================================ */

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-dark);
    padding-top: var(--navbar-height);
    overflow-x: hidden;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Extended Spacing Utilities (Bootstrap only provides up to py-5) */
.py-6 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.py-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.pt-6 {
    padding-top: 5rem !important;
}

.pb-6 {
    padding-bottom: 5rem !important;
}

.mt-6 {
    margin-top: 5rem !important;
}

.mb-6 {
    margin-bottom: 5rem !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--color-dark);
}

/* Premium Display Headings - Enhanced Typography */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.1;
    text-wrap: balance;
}

.display-1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
}

.display-2 {
    font-size: clamp(2.25rem, 5vw, 4rem);
}

.display-3 {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
}

.display-4 {
    font-size: clamp(1.75rem, 4vw, 3rem);
}

.display-5 {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}

.display-6 {
    font-size: clamp(1.25rem, 3vw, 2rem);
}

/* White headings on dark backgrounds */
.text-white.display-1,
.text-white.display-2,
.text-white.display-3,
.text-white.display-4,
.text-white.display-5,
.text-white.display-6,
.display-1.text-white,
.display-2.text-white,
.display-3.text-white,
.display-4.text-white,
.display-5.text-white,
.display-6.text-white {
    color: #ffffff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

.lead {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-muted);
}

/* Premium Text Gradient - Enhanced */
.text-gradient {
    background: linear-gradient(135deg, #FF6B35 0%, #FF8F66 40%, #6366F1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline;
}

/* Text gradient with subtle animation */
.text-gradient-animated {
    background: linear-gradient(135deg, #FF6B35 0%, #FF8F66 25%, #6366F1 50%, #818CF8 75%, #FF6B35 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }

    100% {
        background-position: 0% center;
    }
}

/* Premium gradient variations */
.text-gradient-warm {
    background: linear-gradient(135deg, #FF6B35 0%, #F59E0B 50%, #EF4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-cool {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-sunrise {
    background: linear-gradient(135deg, #FF6B35 0%, #F97316 30%, #FB923C 60%, #FBBF24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Heading with glow effect on dark backgrounds */
.heading-glow {
    text-shadow:
        0 0 20px rgba(255, 107, 53, 0.4),
        0 0 40px rgba(255, 107, 53, 0.2),
        0 0 60px rgba(255, 107, 53, 0.1);
}

.heading-glow-blue {
    text-shadow:
        0 0 20px rgba(99, 102, 241, 0.4),
        0 0 40px rgba(99, 102, 241, 0.2),
        0 0 60px rgba(99, 102, 241, 0.1);
}

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

/* ============================================
   1) BUTTONS - Premium Pill-Style Design
   ============================================ */

/* Base button reset and premium styling */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--radius-pill);
    padding: 0.875rem 2rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: all 0.4s var(--ease-out-expo);
    border: none;
}

/* Primary Button - Gradient with Glow */
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: #fff;
    box-shadow:
        0 4px 15px rgba(255, 107, 53, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
    z-index: -1;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s var(--ease-out-expo), height 0.6s var(--ease-out-expo);
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        var(--shadow-glow-primary),
        0 8px 25px rgba(255, 107, 53, 0.4);
}

.btn-primary:hover::before {
    opacity: 1;
}

/* Ripple effect on click */
.btn-primary:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: width 0.3s, height 0.3s, opacity 0.3s;
}

.btn-primary:active {
    transform: translateY(-1px) scale(0.98);
}

/* Outline Light Button */
.btn-outline-light {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn-outline-light::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
    border-radius: inherit;
}

.btn-outline-light:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.15);
}

.btn-outline-light:hover::before {
    opacity: 1;
}

/* Secondary Button (Purple - matches "Most Popular" badge) */
.btn-secondary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-secondary) 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
    z-index: -1;
    border-radius: inherit;
}

.btn-secondary:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 0 40px rgba(99, 102, 241, 0.35),
        0 8px 25px rgba(99, 102, 241, 0.4);
}

.btn-secondary:hover::before {
    opacity: 1;
}

.btn-secondary:active {
    transform: translateY(-1px) scale(0.98);
}

.btn-secondary svg {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.btn-secondary:hover svg {
    transform: translateX(3px);
}

/* Outline Primary Button - Premium Style */
.btn-outline-primary {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-outline-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
    z-index: -1;
}

.btn-outline-primary:hover {
    color: #fff;
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

.btn-outline-primary:hover::before {
    opacity: 1;
}

/* Danger Button (GEO CTA) */
.btn-danger {
    background: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.4);
}

/* Large Button Enhancement */
.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1rem;
}

/* Small Button */
.btn-sm {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
}

/* ============================================
   8) HEADER & NAVIGATION - Premium Glass
   ============================================ */

.navbar {
    min-height: var(--navbar-height);
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.98) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.5s var(--ease-out-expo);
    z-index: 1050;
}

.navbar.scrolled {
    min-height: var(--navbar-height-shrink);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.navbar.scrolled .navbar-brand .logo-svg {
    width: 34px;
    height: 34px;
}

.navbar.scrolled .logo-name {
    font-size: 1.1rem !important;
}

.navbar-brand {
    font-family: var(--font-display);
    transition: all 0.4s var(--ease-out-expo);
}

.navbar-brand .logo-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    letter-spacing: -0.02em;
    transition: font-size 0.4s var(--ease-out-expo);
}

.navbar-brand .logo-tagline {
    font-size: 0.65rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-top: -2px;
}

.navbar-brand .logo-svg {
    width: 40px;
    height: 40px;
    transition: all 0.4s var(--ease-out-expo);
}

/* Nav Links with Animated Underline */
.nav-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    color: #475569 !important;
    transition: all 0.3s var(--ease-out-expo);
    position: relative;
    padding: 0.5rem 1rem !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 2px;
    transition: all 0.4s var(--ease-out-expo);
    transform: translateX(-50%);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--color-dark) !important;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 70%;
}

/* Dropdown Menu - Light Theme */
.dropdown-menu {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.dropdown-menu-dark {
    background: rgba(255, 255, 255, 0.98) !important;
}

.dropdown-item {
    font-size: 0.9rem;
    color: #475569;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-sm);
    transition: all 0.25s var(--ease-out-expo);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(255, 107, 53, 0.08);
    color: var(--color-primary);
    transform: translateX(4px);
}

.dropdown-header {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #94a3b8;
    padding: 0.5rem 1rem;
}

.dropdown-divider {
    border-color: rgba(0, 0, 0, 0.08);
    margin: 0.5rem 0;
}

/* ============================================
   MEGA MENU - Premium Glass Design
   ============================================ */

/* Container */
.mega-menu-container {
    position: static;
}

.mega-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.mega-menu-trigger .nav-chevron {
    transition: transform 0.3s var(--ease-out-expo);
    margin-left: 0.25rem;
}

.mega-menu-trigger[aria-expanded="true"] .nav-chevron {
    transform: rotate(180deg);
}

/* Mega Menu Panel */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.04);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.4s var(--ease-out-expo);
    z-index: 1040;
    pointer-events: none;
}

.mega-menu.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-menu-inner {
    padding: 2rem 0 0;
}

/* Column Structure */
.mega-menu-column {
    padding: 0 0.5rem;
}

/* Category Headers */
.mega-menu-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mega-menu-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.375rem 0.75rem;
    border-radius: 100px;
}

.mega-menu-badge-plan {
    background: rgba(99, 102, 241, 0.1);
    color: var(--color-secondary);
}

.mega-menu-badge-build {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-accent);
}

.mega-menu-badge-visible {
    background: rgba(255, 107, 53, 0.1);
    color: var(--color-primary);
}

/* Menu Items */
.mega-menu-items {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mega-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.3s var(--ease-out-expo);
    position: relative;
}

.mega-menu-item:hover {
    background: rgba(0, 0, 0, 0.03);
    transform: translateX(4px);
}

.mega-menu-item:hover .mega-menu-icon {
    transform: scale(1.08);
}

/* Icons */
.mega-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: all 0.3s var(--ease-out-expo);
}

.mega-menu-icon svg {
    width: 22px;
    height: 22px;
}

.mega-menu-icon-plan {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.15));
    color: var(--color-secondary);
}

.mega-menu-icon-build {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.15));
    color: var(--color-accent);
}

.mega-menu-icon-visible {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.08), rgba(255, 107, 53, 0.15));
    color: var(--color-primary);
}

/* Content */
.mega-menu-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.mega-menu-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mega-menu-desc {
    font-size: 0.825rem;
    color: #64748b;
    line-height: 1.4;
}

/* NEW Badge */
.mega-menu-badge-new {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.05);
    }
}

/* Featured Item (AI Visibility) */
.mega-menu-item-featured {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.04), rgba(99, 102, 241, 0.04));
    border: 1px solid rgba(255, 107, 53, 0.15);
    position: relative;
    overflow: hidden;
}

.mega-menu-item-featured:hover {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.08), rgba(99, 102, 241, 0.08));
    border-color: rgba(255, 107, 53, 0.25);
}

.mega-menu-featured-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.mega-menu-icon-featured {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.mega-menu-featured-stat {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(255, 107, 53, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 100px;
    white-space: nowrap;
}

/* Footer CTA Section */
.mega-menu-footer {
    margin-top: 1.5rem;
    padding: 1.25rem 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.02), rgba(99, 102, 241, 0.03));
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.mega-menu-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mega-menu-footer-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.mega-menu-footer-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-dark);
}

.mega-menu-footer-desc {
    font-size: 0.825rem;
    color: #64748b;
}

.mega-menu-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mega-menu-cta svg {
    transition: transform 0.3s var(--ease-out-expo);
}

.mega-menu-cta:hover svg {
    transform: translateX(4px);
}

/* ============================================
   MEGA MENU - Mobile Responsive
   ============================================ */

@media (max-width: 991.98px) {
    .mega-menu-container {
        position: relative;
    }

    .mega-menu {
        position: static;
        width: 100%;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height 0.4s var(--ease-out-expo);
        pointer-events: auto;
    }

    .mega-menu.is-active {
        max-height: 2000px;
    }

    .mega-menu-inner {
        padding: 0.5rem 0;
        background: rgba(0, 0, 0, 0.02);
        border-radius: var(--radius-md);
        margin: 0.5rem 0;
    }

    .mega-menu .row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .mega-menu .col-lg-4 {
        width: 100%;
        padding: 0;
    }

    .mega-menu-column {
        padding: 0;
    }

    .mega-menu-header {
        padding: 0.5rem 1rem;
        margin-bottom: 0;
        border-bottom: none;
    }

    .mega-menu-items {
        gap: 0;
    }

    .mega-menu-item {
        padding: 0.75rem 1rem 0.75rem 1.5rem;
        border-radius: 0;
    }

    .mega-menu-item:hover {
        transform: none;
        background: rgba(255, 107, 53, 0.05);
    }

    .mega-menu-icon {
        width: 36px;
        height: 36px;
    }

    .mega-menu-icon svg {
        width: 18px;
        height: 18px;
    }

    .mega-menu-item-featured {
        margin: 0.25rem 0.5rem;
        border-radius: var(--radius-sm);
    }

    .mega-menu-featured-stat {
        display: none;
    }

    .mega-menu-footer {
        margin: 0.5rem;
        padding: 1rem;
        border-radius: var(--radius-md);
        background: linear-gradient(135deg, rgba(255, 107, 53, 0.05), rgba(99, 102, 241, 0.05));
        border-top: none;
    }

    .mega-menu-footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .mega-menu-cta {
        width: 100%;
        justify-content: center;
    }
}

/* Navbar CTA Button */
.navbar .btn-primary {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
}

/* ============================================
   HERO SECTION - Bootstrap Carousel
   ============================================ */

.hero-slider-section {
    position: relative;
    margin-top: calc(-1 * var(--navbar-height));
    overflow: hidden;
    /* Contain parallax effects */
}

.hero-slide {
    height: 100vh;
    min-height: 700px;
    position: relative;
    display: flex;
    align-items: center;
    will-change: transform;
    /* Optimize for animations */
}

.carousel-item.hero-slide {
    transition: opacity 1s ease-in-out;
}

/* Enhanced background image handling for parallax */
.hero-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 110%;
    /* Extra height for parallax scroll */
    object-fit: cover;
    object-position: center;
    will-change: transform;
    /* Hardware acceleration */
    transition: transform 0.1s ease-out;
}

.hero-bg-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Parallax-ready slide backgrounds */
.hero-slide-1 {
    background:
        radial-gradient(ellipse 80% 50% at 20% 80%, rgba(99, 102, 241, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #0f0a1e 0%, #1a1033 50%, #0d1025 100%);
    background-color: #0f0a1e;
}

.hero-slide-2 {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.82) 50%, rgba(15, 23, 42, 0.88) 100%),
        url('../../assets/images/hero/generative-engine-optimization-ai-1536.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0f172a;
}

.hero-slide-3 {
    background:
        radial-gradient(ellipse 60% 50% at 70% 30%, rgba(16, 185, 129, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 30% 70%, rgba(6, 182, 212, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #0a1a18 0%, #0f2620 50%, #0d1a1a 100%);
    background-color: #0a1a18;
}

/* Enhanced overlay for better parallax depth */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    will-change: transform, opacity;
    transition: opacity 0.3s ease;
}

/* Hero Backgrounds - Each slide has distinct color palette */

/* Slide 1: Deep Indigo/Purple - Main value proposition */
.hero-slide-1 {
    background:
        radial-gradient(ellipse 80% 50% at 20% 80%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, #0f0a1e 0%, #1a1033 50%, #0d1025 100%);
    background-color: #0f0a1e;
}

/* Slide 2: AI Visibility focus - with background image */
.hero-slide-2 {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.82) 0%, rgba(30, 41, 59, 0.78) 50%, rgba(15, 23, 42, 0.86) 100%),
        url('../../assets/images/hero/generative-engine-optimization-ai-1536.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0f172a;
}

/* Slide 3: Teal/Emerald - Development excellence */
.hero-slide-3 {
    background:
        radial-gradient(ellipse 60% 50% at 70% 30%, rgba(16, 185, 129, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 30% 70%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, #0a1a18 0%, #0f2620 50%, #0d1a1a 100%);
    background-color: #0a1a18;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Hero Background Image */
.hero-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.hero-bg-picture {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    animation: heroParallax 18s ease-in-out infinite alternate;
}

.hero-bg-picture img {
    width: 100%;
    height: 100%;
}

@keyframes heroParallax {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(0, -10px, 0) scale(1.02);
    }
}

/* ============================================
   SLIDE 1: Orange/Warm Gradient Overlay
   Left-aligned hero with stats panel
   ============================================ */
.hero-overlay-gradient-1 {
    background:
        radial-gradient(circle at 15% 20%, rgba(var(--color-primary-rgb), 0.2) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(var(--color-secondary-rgb), 0.16) 0%, transparent 45%),
        linear-gradient(110deg, rgba(8, 9, 20, 0.82) 0%, rgba(11, 12, 24, 0.72) 55%, rgba(10, 12, 22, 0.68) 100%);
    z-index: 1;
}

/* ============================================
   SLIDE 2: Neutral Dark Gradient Overlay
   Centered with AI platform showcase
   ============================================ */
.hero-overlay-gradient-2 {
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 45% 30%, rgba(239, 68, 68, 0.28) 0%, transparent 45%),
        linear-gradient(200deg, rgba(239, 68, 68, 0.32) 0%, rgba(127, 29, 29, 0.35) 35%, rgba(17, 7, 10, 0.82) 100%);
    z-index: 1;
}

/* ============================================
   SLIDE 3: Cyan/Teal Gradient Overlay
   Right-aligned with tech stack grid
   ============================================ */
.hero-overlay-gradient-3 {
    background:
        radial-gradient(circle at 85% 25%, rgba(6, 182, 212, 0.2) 0%, transparent 45%),
        radial-gradient(circle at 25% 75%, rgba(99, 102, 241, 0.16) 0%, transparent 45%),
        linear-gradient(270deg, rgba(4, 12, 12, 0.82) 0%, rgba(5, 16, 18, 0.68) 50%, rgba(4, 9, 14, 0.62) 100%),
        linear-gradient(180deg, rgba(20, 10, 40, 0.22) 0%, rgba(0, 0, 0, 0.46) 100%);
    z-index: 1;
}

/* Ensure content sits above overlay */
.hero-slide-1 .container,
.hero-slide-2 .container,
.hero-slide-3 .container {
    position: relative;
    z-index: 2;
}

/* Enhanced text visibility */
.hero-slide .hero-content h1,
.hero-slide .hero-content .lead {
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55), 0 6px 26px rgba(0, 0, 0, 0.35);
}

.hero-slide .hero-content h1 {
    max-width: 18ch;
    color: #ffffff;
}

.hero-slide .hero-content .lead {
    max-width: 48ch;
    color: var(--color-hero-muted);
}

.hero-slide-2 .hero-content h1,
.hero-slide-2 .hero-content .lead {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   TEXT GRADIENTS - Unique per slide
   ============================================ */
.text-gradient-orange {
    background: linear-gradient(135deg, #FFEBDD 0%, #FFCFA6 32%, #FF9A6A 62%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline;
    text-shadow: 0 6px 16px rgba(255, 140, 102, 0.28);
    filter: drop-shadow(0 4px 10px rgba(255, 107, 53, 0.3));
}

.text-gradient-purple {
    background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 40%, #C084FC 70%, #DDD6FE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline;
    filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.3));
}

.glow-text-purple {
    filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.5));
}

.glow-text-orange {
    filter: drop-shadow(0 0 30px rgba(255, 107, 53, 0.5));
}

.text-gradient-cyan {
    background: linear-gradient(135deg, #DFF5FF 0%, #A5F3FC 32%, #9FB5FF 65%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline;
    text-shadow: 0 6px 18px rgba(129, 140, 248, 0.32);
    filter: drop-shadow(0 4px 10px rgba(79, 70, 229, 0.26));
}

.glow-text-cyan {
    filter: drop-shadow(0 0 30px rgba(6, 182, 212, 0.5));
}

/* ============================================
   GLASS BADGES - Premium badges for each slide
   ============================================ */
.badge-glass {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.26);
    color: #ffffff;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f97316;
    animation: badgePulse 2s ease-in-out infinite;
}

.badge-glass-cyan {
    background: rgba(99, 102, 241, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(99, 102, 241, 0.36);
    color: #f8fafc;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.badge-dot-cyan {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-secondary);
    animation: badgePulse 2s ease-in-out infinite;
}

.badge-glow-purple {
    background: rgba(139, 92, 246, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}

.badge-icon {
    font-size: 1.1rem;
}

.pulse-ring {
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #a855f7;
    animation: pulseRing 2s ease-out infinite;
}

.pulse-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(168, 85, 247, 0.5);
    animation: pulseRingOuter 2s ease-out infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.9);
    }
}

@keyframes pulseRing {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes pulseRingOuter {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ============================================
   GLASS BUTTONS
   ============================================ */
.btn-glass {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    transition: all 0.3s ease;
}

.btn-glass:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
    transform: translateY(-2px);
}

.btn-glow {
    box-shadow: 0 0 32px rgba(var(--color-primary-rgb), 0.32), 0 12px 30px rgba(0, 0, 0, 0.35);
}

.btn-glow:hover {
    box-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.44), 0 14px 32px rgba(0, 0, 0, 0.38);
}

/* Purple Button for Slide 2 */
.btn-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    border: none;
    color: #fff;
}

.btn-purple:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
    color: #fff;
    transform: translateY(-2px);
}

.btn-glow-purple {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
}

.btn-glow-purple:hover {
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.6);
}

/* Cyan Button for Slide 3 */
.btn-cyan {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 70%, #8ef0ff 100%);
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: #fff;
}

.btn-cyan:hover {
    background: linear-gradient(135deg, #4f46e5 0%, var(--color-secondary) 60%, #7bdcf5 100%);
    color: #fff;
    transform: translateY(-2px);
}

.btn-glow-cyan {
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.34), 0 10px 26px rgba(0, 0, 0, 0.32);
}

.btn-glow-cyan:hover {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.46), 0 12px 28px rgba(0, 0, 0, 0.35);
}

/* ============================================
   HERO TAGS - Improved chips
   ============================================ */
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--color-hero-text);
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.hero-tag:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.hero-tag-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

.hero-tag svg.hero-tag-icon {
    stroke: currentColor;
}

/* Font Awesome hero tag icons */
.hero-tag i.hero-tag-icon,
.hero-tag .fas.hero-tag-icon {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.92);
    transition: all 0.3s ease;
}

.hero-tag:hover i.hero-tag-icon {
    transform: scale(1.15);
}

/* GEO slide hero tag icons - gradient effect */
.hero-tag-geo i.hero-tag-icon {
    background: linear-gradient(135deg, #fecdd3 0%, #fca5a5 35%, #ef4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Cyan variant hero tag icons */
.hero-tag-cyan i.hero-tag-icon {
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-tag-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(99, 102, 241, 0.14));
    border-color: rgba(139, 92, 246, 0.32);
}

.hero-tag-purple:hover {
    background: rgba(139, 92, 246, 0.24);
}

.hero-tag-cyan {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(6, 182, 212, 0.12));
    border-color: rgba(99, 102, 241, 0.28);
}

.hero-tag-cyan:hover {
    background: rgba(99, 102, 241, 0.2);
}

/* ============================================
   SLIDE 1: STATS PANEL V2 - Professional Redesign
   ============================================ */
.stats-panel-v2 {
    background: linear-gradient(165deg, rgba(15, 15, 30, 0.85) 0%, rgba(10, 10, 20, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 32px 64px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    position: relative;
}

.stats-panel-v2::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(var(--color-primary-rgb), 0.12), transparent 35%);
    opacity: 0.9;
    pointer-events: none;
}

.stats-panel-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.stats-panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
}

.stats-panel-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

.stats-panel-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Individual Stat Cards */
.stat-card-v2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.stat-card-v2:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.04));
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateX(4px);
}

/* Stat Card Icons */
.stat-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.stat-card-icon-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.1) 100%);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.stat-card-icon-blue i {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card-icon-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(124, 58, 237, 0.1) 100%);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.stat-card-icon-purple i {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card-icon-orange {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(234, 88, 12, 0.15) 100%);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.stat-card-icon-orange i {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card-v2:hover .stat-card-icon {
    transform: scale(1.05);
}

.stat-card-v2:hover .stat-card-icon i {
    filter: drop-shadow(0 2px 8px currentColor);
}

/* Stat Card Content */
.stat-card-content {
    flex: 1;
    min-width: 0;
}

.stat-card-number {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-family: 'Satoshi', sans-serif;
    letter-spacing: -0.02em;
}

.stat-suffix {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 2px;
}

.stat-number-orange {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    margin-top: 0.25rem;
    letter-spacing: 0.01em;
}

/* Featured Stat Card */
.stat-card-featured {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(234, 88, 12, 0.06) 100%);
    border: 1px solid rgba(249, 115, 22, 0.25);
    position: relative;
    overflow: hidden;
}

.stat-card-featured::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #f97316, #fb923c);
}

.stat-card-featured:hover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.18) 0%, rgba(234, 88, 12, 0.1) 100%);
    border-color: rgba(249, 115, 22, 0.4);
}

.stat-card-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.stat-card-tag {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    border-radius: 4px;
}


/* Text Utilities for Hero */
.text-white-80 {
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   SLIDE 2 V2: PROFESSIONAL GEO REDESIGN
   Neutral backgrounds with red text accents
   ============================================ */

/* Text Utilities */
.text-white-70 {
    color: rgba(255, 255, 255, 0.7);
}

/* GEO Badge - Clean aligned design */
.badge-geo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.25rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    margin-bottom: 1.5rem;
}

.badge-geo-dot {
    width: 8px;
    height: 8px;
    background: #EF4444;
    border-radius: 50%;
    animation: geo-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes geo-pulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
}

.badge-geo-text {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.8);
}

/* GEO Text Gradient - Red */
.text-gradient-geo {
    background: linear-gradient(135deg, #FFE2D6 0%, #FFB4A2 35%, #F87171 65%, #EF4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 6px 18px rgba(239, 68, 68, 0.28);
}

/* AI Showcase V2 - Horizontal Pill */
.ai-showcase-v2 {
    display: flex;
    justify-content: center;
}

.ai-showcase-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 60px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ai-icon-item {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.ai-icon-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.ai-icon-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px) scale(1.08);
}

.ai-icon-item:hover img {
    transform: scale(1.1);
}

/* Staggered icon animations */
.ai-icon-item[data-ai="chatgpt"] {
    animation: ai-float 3s ease-in-out infinite;
    animation-delay: 0s;
}

.ai-icon-item[data-ai="claude"] {
    animation: ai-float 3s ease-in-out infinite;
    animation-delay: 0.3s;
}

.ai-icon-item[data-ai="gemini"] {
    animation: ai-float 3s ease-in-out infinite;
    animation-delay: 0.6s;
}

.ai-icon-item[data-ai="perplexity"] {
    animation: ai-float 3s ease-in-out infinite;
    animation-delay: 0.9s;
}

.ai-icon-item[data-ai="copilot"] {
    animation: ai-float 3s ease-in-out infinite;
    animation-delay: 1.2s;
}

.ai-icon-item[data-ai="grok"] {
    animation: ai-float 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

@keyframes ai-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* GEO Button - Red gradient matching site style */
.btn-geo {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ef4444 0%, #f87171 60%, #dc2626 100%);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fff;
    font-weight: 600;
    box-shadow:
        0 4px 16px rgba(239, 68, 68, 0.32),
        0 0 26px rgba(239, 68, 68, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: all 0.4s var(--ease-out-expo);
}

.btn-geo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #fca5a5 0%, #ef4444 60%, #dc2626 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
    z-index: -1;
}

.btn-geo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s var(--ease-out-expo), height 0.6s var(--ease-out-expo);
}

.btn-geo:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 0 28px rgba(239, 68, 68, 0.5),
        0 10px 28px rgba(239, 68, 68, 0.4);
}

.btn-geo:hover::before {
    opacity: 1;
}

.btn-geo:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: width 0.3s, height 0.3s, opacity 0.3s;
}

.btn-geo:active {
    transform: translateY(-1px) scale(0.98);
}

/* GEO Hero Tags */
.hero-tag-geo {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.16));
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 100px;
    color: var(--color-hero-text);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.hero-tag-geo:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.26), rgba(220, 38, 38, 0.22));
    border-color: rgba(239, 68, 68, 0.36);
    transform: translateY(-2px);
}

/* ============================================
   SLIDE 3: TECH STACK GRID V2
   3x3 Floating Layout (No Container)
   ============================================ */
.tech-stack-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.875rem;
    max-width: 320px;
}

.tech-card-v2 {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Subtle glow effect on cards */
.tech-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.tech-card-v2 img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tech-card-v2 span {
    font-size: 0.7rem;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    transition: color 0.3s ease;
}

.tech-card-v2:hover {
    background: #fff;
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2),
        0 0 24px rgba(99, 102, 241, 0.25);
}

.tech-card-v2:hover::before {
    opacity: 1;
}

.tech-card-v2:hover img {
    transform: scale(1.15);
}

.tech-card-v2:hover span {
    color: var(--color-secondary);
}

/* Staggered wave animation */
.tech-card-v2:nth-child(1) {
    animation: techWave 5s ease-in-out infinite 0s;
}

.tech-card-v2:nth-child(2) {
    animation: techWave 5s ease-in-out infinite 0.3s;
}

.tech-card-v2:nth-child(3) {
    animation: techWave 5s ease-in-out infinite 0.6s;
}

.tech-card-v2:nth-child(4) {
    animation: techWave 5s ease-in-out infinite 0.15s;
}

.tech-card-v2:nth-child(5) {
    animation: techWave 5s ease-in-out infinite 0.45s;
}

.tech-card-v2:nth-child(6) {
    animation: techWave 5s ease-in-out infinite 0.75s;
}

.tech-card-v2:nth-child(7) {
    animation: techWave 5s ease-in-out infinite 0.3s;
}

.tech-card-v2:nth-child(8) {
    animation: techWave 5s ease-in-out infinite 0.6s;
}

.tech-card-v2:nth-child(9) {
    animation: techWave 5s ease-in-out infinite 0.9s;
}

@keyframes techWave {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Service Pills for Slide 3 */
.service-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.service-pill {
    padding: 0.4rem 1rem;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 100px;
    color: #a5b4fc;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.service-pill:hover {
    background: rgba(99, 102, 241, 0.2);
    transform: translateY(-2px);
}

@media (max-width: 991.98px) {
    .service-pills {
        justify-content: center;
    }
}

/* Animated Background Grid */
.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridFloat 30s linear infinite;
    opacity: 0.35;
}

@keyframes gridFloat {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(60px, 60px);
    }
}

/* Hero Content Animations */
.hero-anim {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    transition:
        opacity 0.75s var(--ease-out-expo),
        transform 0.75s var(--ease-out-expo),
        filter 0.75s var(--ease-out-expo);
}

.hero-anim-1 {
    transition-delay: 0.08s;
}

.hero-anim-2 {
    transition-delay: 0.16s;
}

.hero-anim-3 {
    transition-delay: 0.26s;
}

.hero-anim-4 {
    transition-delay: 0.38s;
}

.hero-anim-5 {
    transition-delay: 0.5s;
}

.hero-anim-6 {
    transition-delay: 0.64s;
}

.carousel-item.active .hero-anim.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.24));
}


/* ============================================
   2) ICON ANIMATIONS - Motion Design
   Keyframes used by tech slider and other components
   ============================================ */
@keyframes iconPulse {

    0%,
    100% {
        opacity: 0.85;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-6px) rotate(2deg);
    }

    75% {
        transform: translateY(3px) rotate(-2deg);
    }
}

@keyframes iconTilt {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(5deg) scale(1.02);
    }

    75% {
        transform: rotate(-5deg) scale(1.02);
    }
}

@keyframes iconBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes iconScalePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.85;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes iconRotateSlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ============================================
   BOOTSTRAP CAROUSEL CONTROLS
   ============================================ */

/* Carousel Indicators - Minimal Lines */
.carousel-indicators {
    bottom: 40px;
    gap: 10px;
    margin: 0;
}

.carousel-indicators button {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 0;
    margin: 0;
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.35s var(--ease-out-expo);
}

.carousel-indicators button:hover {
    background-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-1px) scale(1.08);
}

.carousel-indicators button.active {
    width: 30px;
    background: linear-gradient(120deg, rgba(var(--color-primary-rgb), 0.95), rgba(var(--color-secondary-rgb), 0.95));
    border-color: rgba(255, 255, 255, 0.58);
    box-shadow:
        0 8px 20px rgba(255, 107, 53, 0.32),
        0 10px 26px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px) scale(1.05);
}

.carousel-indicators button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.35);
}

.carousel-indicators button::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s var(--ease-out-expo);
}

.carousel-indicators button.active::after,
.carousel-indicators button:hover::after {
    opacity: 1;
}

/* Hero slider specific indicators */
.hero-slider-section .hero-indicators {
    left: auto;
    right: 40px;
    bottom: 40px;
    gap: 12px;
    justify-content: flex-end;
}

.hero-slider-section .hero-indicators button {
    width: 68px;
    height: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    transform: translateY(0);
}

.hero-slider-section .hero-indicators button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--ease-out-expo), opacity 0.5s var(--ease-out-expo);
    opacity: 0.9;
}

.hero-slider-section .hero-indicators button.active::before {
    transform: scaleX(1);
}

.hero-slider-section .hero-indicators button::after {
    content: '01';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.9);
    mix-blend-mode: screen;
}

.hero-slider-section .hero-indicators button:nth-child(2)::after {
    content: '02';
}

.hero-slider-section .hero-indicators button:nth-child(3)::after {
    content: '03';
}

.hero-slider-section .hero-indicators button:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.hero-slider-section .hero-indicators button.active {
    width: 72px;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.32),
        0 0 22px rgba(var(--color-primary-rgb), 0.3);
}

@media (max-width: 991px) {
    .hero-slider-section .hero-indicators {
        right: 24px;
        bottom: 28px;
    }
}

@media (max-width: 767px) {
    .hero-slider-section .hero-indicators {
        left: 50%;
        right: auto;
        bottom: 24px;
        transform: translateX(-50%);
        gap: 10px;
    }

    .hero-slider-section .hero-indicators button {
        width: 56px;
        height: 12px;
    }

    .hero-slider-section .hero-indicators button.active {
        width: 64px;
    }
}

/* ============================================
   3) TECHNOLOGY SLIDER - Fixed & Enhanced
   ============================================ */

.tech-stack-section {
    overflow: hidden;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 3rem 0;
}

.tech-slider-wrapper {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 0;
    /* Fade edges for seamless infinite scroll */
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.tech-slider-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: techSlide 45s linear infinite;
}

.tech-slider-wrapper:hover .tech-slider-track {
    animation-play-state: paused;
}

@keyframes techSlide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Tech Item - FIXED: Removed grey background issue */
.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1.25rem;
    min-width: 110px;
    border-radius: var(--radius-md);
    /* Clean white background - no grey */
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--shadow-sm);
    transition: all 0.4s var(--ease-out-expo);
    cursor: pointer;
    position: relative;
}

/* Hover state with glow */
.tech-item:hover {
    transform: scale(1.1) translateY(-8px);
    background: #fff;
    border-color: rgba(255, 107, 53, 0.2);
    box-shadow:
        var(--shadow-lg),
        0 0 30px rgba(255, 107, 53, 0.1);
}

/* Tech item icon - Different animations per item */
.tech-item img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    transition: all 0.4s var(--ease-out-expo);
    /* Subtle desaturation by default */
    filter: grayscale(20%) brightness(0.95);
}

/* Animated icons in slider - staggered */
.tech-item:nth-child(odd) img {
    animation: iconFloat 4s ease-in-out infinite;
}

.tech-item:nth-child(even) img {
    animation: iconPulse 3.5s ease-in-out infinite;
}

.tech-item:nth-child(3n) img {
    animation: iconTilt 5s ease-in-out infinite;
}

.tech-item:hover img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.15);
    animation-play-state: paused;
}

.tech-item span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-dark-lightest);
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
}

.tech-item:hover span {
    color: var(--color-primary);
}

/* ============================================
   4) SERVICE CARDS - Premium Agency Design
   ============================================ */

.services-section {
    position: relative;
    background: linear-gradient(180deg, #fff 0%, var(--color-light) 100%);
    padding: 6rem 0;
    overflow: hidden;
    z-index: 0;
}

/* OUR EXPERTISE background pattern - tech stack glyph grid (SVG) */
.services-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/patterns/expertise-tech-grid.svg");
    background-size: var(--pattern-tech-size);
    background-position: var(--pattern-tech-position);
    background-repeat: repeat;
    opacity: 1.0;
    pointer-events: none;
    z-index: 0;
}

.services-section>.container {
    position: relative;
    z-index: 1;
}

/* ----------------------------------------
   4.1) Card Balance & Consistent Spacing
   Normalized padding with visual rhythm:
   number → icon → title → body → CTA
   ---------------------------------------- */

.service-card {
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity 0.7s var(--ease-out-expo),
        transform 0.7s var(--ease-out-expo),
        box-shadow 0.5s var(--ease-out-expo),
        border-color 0.4s ease;
    border-radius: var(--radius-lg);
    overflow: visible;
    background: #fff;
    transform-style: preserve-3d;
    perspective: 1000px;
    /* Consistent border for all cards */
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

/* Consistent card body padding */
.service-card .card-body {
    padding: 2rem !important;
    display: flex;
    flex-direction: column;
}

/* Larger cards get more breathing room */
.service-card-featured .card-body,
.service-card-highlight .card-body {
    padding: 2.25rem !important;
}

/* Consistent spacing rhythm */
.service-card .service-number {
    margin-bottom: 1.25rem;
}

.service-card .service-icon {
    margin-bottom: 1.5rem;
}

.service-card h3,
.service-card .h4 {
    margin-bottom: 0.875rem;
}

.service-card>.card-body>p.text-muted:first-of-type {
    margin-bottom: 1.25rem;
}

.service-card ul.list-unstyled {
    margin-bottom: 1.5rem !important;
}

/* CTA button alignment - push to bottom */
.service-card .card-body>.btn:last-child {
    margin-top: auto;
    align-self: flex-start;
}

.service-card.revealed {
    opacity: 1;
    transform: translateY(0) rotateX(0) rotateY(0);
}

/* Staggered reveal - using row children */
.services-section .row>div:nth-child(1) .service-card {
    transition-delay: 0.1s;
}

.services-section .row>div:nth-child(2) .service-card {
    transition-delay: 0.15s;
}

.services-section .row>div:nth-child(3) .service-card {
    transition-delay: 0.2s;
}

.services-section .row>div:nth-child(4) .service-card {
    transition-delay: 0.25s;
}

.services-section .row>div:nth-child(5) .service-card {
    transition-delay: 0.3s;
}

/* ----------------------------------------
   4.2) Premium Hover Interactions
   Cursor-based tilt with edge detection
   ---------------------------------------- */

.service-card.tilting {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Dynamic shine overlay - follows cursor */
.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255, 255, 255, 0.06),
            transparent 40%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 10;
}

.service-card:hover::before {
    opacity: 1;
}

/* Subtle border glow on hover */
.service-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg,
            rgba(255, 107, 53, 0.2),
            rgba(99, 102, 241, 0.2));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.service-card:hover::after {
    opacity: 0.12;
}

/* Hover elevation and shadow */
.service-card:hover {
    border-color: rgba(255, 107, 53, 0.1);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(255, 107, 53, 0.04);
}

/* Featured Card - Full-Stack Development (Purple Tint) */
.service-card-featured {
    background: linear-gradient(180deg, #f5f3ff 0%, #faf5ff 50%, #fff 100%);
    border-color: rgba(99, 102, 241, 0.12) !important;
}

.service-card-featured:hover {
    border-color: rgba(99, 102, 241, 0.22) !important;
    box-shadow:
        0 20px 40px rgba(99, 102, 241, 0.12),
        0 8px 16px rgba(0, 0, 0, 0.04);
}

/* Highlight Card - GEO */
.service-card-highlight {
    background: linear-gradient(180deg, #fff8f5 0%, #fff 100%);
    border-color: rgba(255, 107, 53, 0.08) !important;
}

.service-card-highlight:hover {
    border-color: rgba(255, 107, 53, 0.18) !important;
    box-shadow:
        0 20px 40px rgba(255, 107, 53, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.04);
}

/* ----------------------------------------
   4.3) Full-Stack Sub-Services Box
   Matches reference design exactly
   ---------------------------------------- */

/*
 * Sub-Services Container
 * Rounded box with subtle purple border
 */
.sub-services-box {
    background: #fff;
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

/*
 * Individual Service Row
 * Icon + Title/Description layout
 */
.sub-service-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.sub-service-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sub-service-item:first-child {
    padding-top: 0;
}

/*
 * Service Icon
 * Muted gray color, aligned top
 */
.sub-service-icon {
    flex-shrink: 0;
    color: #94a3b8;
    margin-top: 2px;
}

.sub-service-icon svg {
    display: block;
}

/*
 * Service Content
 * Title + Description stacked
 */
.sub-service-content {
    flex: 1;
}

.sub-service-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-dark);
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

.sub-service-desc {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
}

/*
 * Meta Chips Container
 * Horizontal flex with wrapping
 */
.meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

/*
 * Meta Chip Base Styles
 * Pill-shaped tags with small font
 */
.meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 100px;
    border: 1px solid transparent;
    transition: all 0.25s ease;
}

/* Pink variant - "Design systems shipped" */
.meta-chip-pink {
    background: rgba(251, 207, 232, 0.4);
    border-color: rgba(236, 72, 153, 0.15);
    color: #be185d;
}

/* Purple variant - "Design systems shipped" */
.meta-chip-purple {
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.16);
    color: #1f2937;
}

/* Gray variant - "CI/CD ready" */
.meta-chip-gray {
    background: rgba(226, 232, 240, 0.5);
    border-color: rgba(148, 163, 184, 0.2);
    color: #475569;
}

/* Peach variant - "QA included" */
.meta-chip-peach {
    background: rgba(254, 215, 170, 0.4);
    border-color: rgba(251, 146, 60, 0.15);
    color: #c2410c;
}

/* Dark variant - neutral gray chips */
.meta-chip-dark {
    background: rgba(241, 245, 249, 0.8);
    border-color: rgba(203, 213, 225, 0.4);
    color: #475569;
}

/* Chip hover effect */
.meta-chip:hover {
    transform: translateY(-1px);
}

/*
 * Check List Styling
 * Proper checkmark icons for service lists
 */
.check-list {
    padding-left: 0;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.375rem 0;
    font-size: 0.9rem;
    color: var(--color-dark-lightest);
    line-height: 1.5;
}

.check-list li::before {
    content: '';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    /* Checkmark SVG icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}

/* ----------------------------------------
   4.4) Typography Hierarchy
   Clear visual weight distribution
   ---------------------------------------- */

/* Service card titles - stronger presence */
.service-card h3,
.service-card .h4 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-dark);
    letter-spacing: -0.02em;
    line-height: 1.35;
}

/* Body text - slightly muted, better line-height */
.service-card p.text-muted {
    color: #64748b !important;
    font-size: 0.9rem;
    line-height: 1.7;
    font-weight: 400;
}

/* List items in cards */
.service-card ul.list-unstyled li {
    font-size: 0.875rem;
    color: var(--color-dark-lightest);
    padding: 0.35rem 0;
    line-height: 1.55;
}

/* ----------------------------------------
   4.5) Badge Alignment & Positioning
   Consistent placement across all cards
   ---------------------------------------- */

/* Container for badge row alignment */
.service-card .d-flex.justify-content-between.align-items-start {
    margin-bottom: 0rem !important;
}

/* Badge base styling - services section specific */
.service-card .badge {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-pill);
    transition: all 0.3s var(--ease-out-expo);
}

/* Glowing badges with pulse dot */
.service-card .badge.bg-primary,
.service-card .badge.bg-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.service-card .badge .pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.9),
        0 0 14px rgba(255, 255, 255, 0.6);
    animation: pulseDot 2.4s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pulseDot {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.85;
        box-shadow:
            0 0 6px rgba(255, 255, 255, 0.8),
            0 0 14px rgba(255, 255, 255, 0.5);
    }

    50% {
        transform: scale(1.35);
        opacity: 1;
        box-shadow:
            0 0 8px rgba(255, 255, 255, 1),
            0 0 18px rgba(255, 255, 255, 0.7);
    }
}

/* Primary badge - "Most Popular" */
.service-card .badge.bg-primary {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-light)) !important;
    box-shadow:
        0 2px 8px rgba(99, 102, 241, 0.25),
        0 0 14px rgba(99, 102, 241, 0.35),
        0 0 26px rgba(99, 102, 241, 0.2);
}

/* Danger badge - "Our Differentiator" */
.service-card .badge.bg-danger {
    background: linear-gradient(135deg, #EF4444, #F87171) !important;
    box-shadow:
        0 2px 8px rgba(239, 68, 68, 0.25),
        0 0 14px rgba(239, 68, 68, 0.35),
        0 0 26px rgba(239, 68, 68, 0.2);
}

/* Badge hover animation */
.service-card:hover .badge.bg-primary,
.service-card:hover .badge.bg-danger {
    transform: translateY(-2px);
}

.service-card:hover .badge.bg-primary {
    box-shadow:
        0 4px 12px rgba(99, 102, 241, 0.35),
        0 0 18px rgba(99, 102, 241, 0.45),
        0 0 32px rgba(99, 102, 241, 0.3);
}

.service-card:hover .badge.bg-danger {
    box-shadow:
        0 4px 12px rgba(239, 68, 68, 0.35),
        0 0 18px rgba(239, 68, 68, 0.45),
        0 0 32px rgba(239, 68, 68, 0.3);
}

.service-card-featured .service-number {
    margin-bottom: 0.8rem !important;
}

/* Service Number Badge */
.service-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25);
    transition: all 0.4s var(--ease-spring);
    flex-shrink: 0;
}

.service-card:hover .service-number {
    transform: scale(1.08) rotate(8deg);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.35);
}

/* Service Icon */
.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.06), rgba(99, 102, 241, 0.06));
    transition: all 0.5s var(--ease-out-expo);
}

.service-icon svg {
    color: var(--color-primary);
    transition: all 0.5s var(--ease-out-expo);
    width: 36px;
    height: 36px;
}

/* Service icon animations per card */
.services-section .row>div:nth-child(odd) .service-icon svg {
    animation: iconFloat 4s ease-in-out infinite;
}

.services-section .row>div:nth-child(even) .service-icon svg {
    animation: iconPulse 3s ease-in-out infinite;
}

.service-card:hover .service-icon {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(99, 102, 241, 0.1));
    transform: translateY(-4px) scale(1.04);
}

.service-card:hover .service-icon svg {
    transform: scale(1.08);
    animation-play-state: paused;
}

/* ----------------------------------------
   4.5.1) Font Awesome Icon Styling
   Premium gradient styling for FA icons
   ---------------------------------------- */

/* Base FA icon styling in service cards */
.service-icon i,
.service-icon .fas,
.service-icon .far,
.service-icon .fab {
    font-size: 36px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.5s var(--ease-out-expo);
    display: inline-block;
}

/* Animations for FA icons */
.services-section .row>div:nth-child(odd) .service-icon i {
    animation: iconFloat 4s ease-in-out infinite;
}

.services-section .row>div:nth-child(even) .service-icon i {
    animation: iconPulse 3s ease-in-out infinite;
}

/* Hover states */
.service-card:hover .service-icon i {
    transform: scale(1.08);
    animation-play-state: paused;
    filter: drop-shadow(0 4px 12px rgba(255, 107, 53, 0.3));
}

/* Featured card (Full-Stack) - Purple gradient */
.service-card-featured .service-icon i {
    background: linear-gradient(135deg, var(--color-secondary) 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-card-featured:hover .service-icon i {
    filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.3));
}

/* Highlight card (GEO) - Orange gradient */
.service-card-highlight .service-icon i {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #ff6b35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-card-highlight:hover .service-icon i {
    filter: drop-shadow(0 4px 16px rgba(249, 115, 22, 0.4));
}

/* Sub-service icons - subtle but visible */
.sub-service-icon i,
.sub-service-icon .fas {
    font-size: 22px;
    background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.sub-service-item:hover .sub-service-icon i {
    background: linear-gradient(135deg, var(--color-secondary) 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ----------------------------------------
   4.6) GEO Card Stats Enhancement
   ---------------------------------------- */

.service-card-highlight .bg-light.rounded {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.04) 0%, rgba(255, 107, 53, 0.01) 100%) !important;
    border: 1px solid rgba(255, 107, 53, 0.06);
    border-radius: var(--radius-md) !important;
}

.service-card-highlight .display-4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: -0.03em;
}

/* ----------------------------------------
   4.7) Service Card CTA Buttons
   ---------------------------------------- */

.service-card .btn {
    font-size: 0.85rem;
    padding: 0.7rem 1.4rem;
    font-weight: 600;
}

/* Small icon in badges */
.icon-sm {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* ============================================
   5) WHY SECTION - Cards Layout
   ============================================ */

.why-section {
    background: linear-gradient(180deg, var(--color-light) 0%, var(--color-light-darker) 100%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

/* COMPETITIVE ADVANTAGES background pattern - abstract trust flow (SVG) */
.why-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/patterns/competitive-advantages-trust-flow.svg");
    background-size: var(--pattern-trust-size);
    background-position: var(--pattern-trust-position);
    background-repeat: repeat;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.why-section>.container {
    position: relative;
    z-index: 1;
}

.why-section .card {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s var(--ease-out-expo);
    border-radius: var(--radius-lg);
    background: #fff;
    transform-style: preserve-3d;
}

.why-section .card.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.why-section .col-lg-3:nth-child(1) .card {
    transition-delay: 0.1s;
}

.why-section .col-lg-3:nth-child(2) .card {
    transition-delay: 0.2s;
}

.why-section .col-lg-3:nth-child(3) .card {
    transition-delay: 0.3s;
}

.why-section .col-lg-3:nth-child(4) .card {
    transition-delay: 0.4s;
}

.why-section .card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl) !important;
}

/* ============================================
   WHY CHOOSE US - Premium Card Design
   ============================================ */

/* Base Card Styling */
.why-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.03);
}

.why-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.06);
}

.why-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center;
}

/* Top Accent Line */
.why-card-accent {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    transition: all 0.4s ease;
}

.why-card:hover .why-card-accent {
    width: 100px;
}

/* Icon Wrapper */
.why-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 16px;
    transition: all 0.4s ease;
}

.why-icon-wrapper svg {
    transition: all 0.4s ease;
}

/* Font Awesome icons in Why cards */
.why-icon-wrapper i,
.why-icon-wrapper .fas,
.why-icon-wrapper .far,
.why-icon-wrapper .fab {
    font-size: 28px;
    transition: all 0.4s ease;
    display: inline-block;
}

.why-card:hover .why-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

/* Card Title */
.why-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.875rem;
    letter-spacing: -0.01em;
}

/* Card Text */
.why-card-text {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #64748b;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

/* Card Stat */
.why-card-stat {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.why-stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.why-stat-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   COLOR VARIANTS
   ============================================ */

/* Orange Variant */
.why-card-orange .why-card-accent {
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.why-icon-orange {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(251, 146, 60, 0.08) 100%);
    border: 1px solid rgba(249, 115, 22, 0.15);
}

.why-icon-orange svg,
.why-icon-orange i {
    color: #f97316;
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-card-orange:hover .why-icon-orange {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(251, 146, 60, 0.15) 100%);
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.2);
}

.why-stat-orange {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-card-orange:hover {
    border-color: rgba(249, 115, 22, 0.2);
    box-shadow:
        0 12px 40px rgba(249, 115, 22, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Blue Variant */
.why-card-blue .why-card-accent {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.why-icon-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(96, 165, 250, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.why-icon-blue svg,
.why-icon-blue i {
    color: #3b82f6;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-card-blue:hover .why-icon-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(96, 165, 250, 0.15) 100%);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2);
}

.why-stat-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-card-blue:hover {
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow:
        0 12px 40px rgba(59, 130, 246, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Purple Variant */
.why-card-purple .why-card-accent {
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.why-icon-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(167, 139, 250, 0.08) 100%);
    border: 1px solid rgba(139, 92, 246, 0.15);
}

.why-icon-purple svg,
.why-icon-purple i {
    color: #8b5cf6;
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-card-purple:hover .why-icon-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.15) 100%);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
}

.why-stat-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-card-purple:hover {
    border-color: rgba(139, 92, 246, 0.2);
    box-shadow:
        0 12px 40px rgba(139, 92, 246, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Dark Premium Variant */
.why-card-dark {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.why-card-dark .why-card-text {
    color: rgba(255, 255, 255, 0.7);
}

.why-card-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 60%);
    pointer-events: none;
    transition: all 0.5s ease;
}

.why-card-dark:hover .why-card-glow {
    opacity: 1.5;
}

.why-card-dark:hover {
    border-color: rgba(251, 191, 36, 0.2);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(251, 191, 36, 0.1);
}

.why-icon-gold {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.why-icon-gold svg,
.why-icon-gold i {
    color: #fbbf24;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-card-dark:hover .why-icon-gold {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25) 0%, rgba(245, 158, 11, 0.2) 100%);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.2);
}

.text-white-70 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Card Badges */
.why-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: auto;
    padding-top: 1rem;
}

.why-badge {
    padding: 0.4rem 0.875rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.why-badge:hover {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
}

/* Icon Animations - SVG and Font Awesome */
.why-card:nth-child(1) .why-icon-wrapper svg,
.why-card:nth-child(1) .why-icon-wrapper i {
    animation: iconPulse 3s ease-in-out infinite;
}

.why-card:nth-child(2) .why-icon-wrapper svg,
.why-card:nth-child(2) .why-icon-wrapper i {
    animation: iconFloat 4s ease-in-out infinite;
}

.why-card:nth-child(3) .why-icon-wrapper svg,
.why-card:nth-child(3) .why-icon-wrapper i {
    animation: iconTilt 5s ease-in-out infinite;
}

.why-card:nth-child(4) .why-icon-wrapper svg,
.why-card:nth-child(4) .why-icon-wrapper i {
    animation: iconBounce 2.5s ease-in-out infinite;
}

.why-card:hover .why-icon-wrapper svg,
.why-card:hover .why-icon-wrapper i {
    animation-play-state: paused;
}

/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-lighter) 100%);
    position: relative;
    overflow: hidden;
    padding: 5rem 0;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -15%;
    width: 50%;
    height: 180%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 60%);
    animation: ctaOrb 20s ease-in-out infinite;
}

.cta-section::after {
    content: '';
    position: absolute;
    bottom: -40%;
    right: -15%;
    width: 50%;
    height: 180%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 60%);
    animation: ctaOrb 25s ease-in-out infinite reverse;
}

@keyframes ctaOrb {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(50px, 30px) scale(1.1);
    }
}

.cta-section .container {
    position: relative;
    z-index: 1;
}

/* CTA Section Headings - Premium Gradient on dark background */
.cta-section h1,
.cta-section h2,
.cta-section h3,
.cta-section .display-1,
.cta-section .display-2,
.cta-section .display-3,
.cta-section .display-4,
.cta-section .display-5,
.cta-section .display-6,
.cta-section-premium h1,
.cta-section-premium h2,
.cta-section-premium h3,
.cta-section-premium .display-5,
.contact-cta-premium h1,
.contact-cta-premium h2,
.contact-cta-premium h3,
.contact-cta-premium .display-5 {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 40%, rgba(255, 167, 128, 0.9) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Dark section premium title styling */
.premium-title-dark {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 167, 128, 0.85) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Back to top styles moved to end of file */

/* ============================================
   8) FOOTER - Premium Dark Design
   ============================================ */

.footer {
    background: linear-gradient(180deg,
            var(--color-dark) 0%,
            #050810 100%);
    position: relative;
    padding-top: 5rem;
    overflow: hidden;
    isolation: isolate;
}

/* Top accent line */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            var(--color-primary) 30%,
            var(--color-secondary) 70%,
            transparent);
    z-index: 2;
}

.footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 320px at 8% -5%, rgba(255, 107, 53, 0.18), transparent 60%),
        radial-gradient(600px 280px at 92% 8%, rgba(99, 102, 241, 0.16), transparent 62%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.15), rgba(5, 8, 16, 0.7));
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}

.footer .container {
    position: relative;
    z-index: 2;
}

/* Footer CTA */
.footer-cta {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    padding: 1.5rem 2rem;
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.footer-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: rgba(148, 163, 184, 0.8);
    margin-bottom: 0.5rem;
}

.footer-cta-text h4 {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.footer-cta .btn {
    border-radius: var(--radius-pill);
    padding: 0.7rem 1.6rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transform: none;
}

.footer-cta .btn:hover {
    transform: translateY(-1px);
    color: #fff !important;
}

.footer-cta .footer-cta-secondary {
    border-color: rgba(255, 255, 255, 0.35);
    color: #e2e8f0 !important;
    background: transparent;
}

.footer-cta .footer-cta-secondary:hover {
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff !important;
}

/* Footer cards */
.footer-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    height: 100%;
    box-shadow: 0 12px 32px rgba(2, 6, 23, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo);
}

@media (hover: hover) {
    .footer-card:hover {
        transform: translateY(-6px);
        border-color: rgba(255, 107, 53, 0.4);
        box-shadow: 0 18px 50px rgba(2, 8, 23, 0.5);
    }
}

/* Footer headings */
.footer h5 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff !important;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

.footer h5::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 32px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 2px;
}

/* Footer links */
.footer .footer-links li {
    margin-bottom: 0.65rem;
}

.footer .footer-links a {
    padding-left: 16px;
}

.footer .footer-links a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 107, 53, 0.35);
    transition: transform 0.3s var(--ease-spring);
}

.footer .footer-links a::after {
    content: '';
    position: absolute;
    left: 16px;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transition: width 0.35s var(--ease-out-expo);
}

.footer .footer-links a:hover::before {
    transform: translateY(-50%) scale(1);
}

.footer .footer-links a:hover::after {
    width: calc(100% - 16px);
}

/* Footer trust strip */
.footer-trust {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    padding-top: 1.5rem;
}

.footer-badges {
    row-gap: 0.5rem;
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(226, 232, 240, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.footer-trust-note {
    font-size: 0.85rem;
    color: #e2e8f0 !important;
}

/* Footer brand text */
.footer .fw-bold {
    color: #fff !important;
}

.footer small.text-muted,
.footer .text-muted {
    color: #cbd5e1 !important;
}

/* Footer links */
.footer ul {
    padding-left: 0;
    list-style: none;
}

.footer ul li {
    margin-bottom: 0.75rem;
}

.footer a,
.footer ul li a {
    color: #cbd5e1 !important;
    font-size: 0.9rem;
    font-weight: 400;
    transition: all 0.3s var(--ease-out-expo);
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.footer a:hover:not(.btn) {
    color: var(--color-primary) !important;
    transform: translateX(2px);
}

/* Footer bottom policy links hover - color only */
.footer .text-md-end a:hover {
    color: var(--color-primary) !important;
    transform: none;
}

.footer .footer-links a.active,
.footer .text-md-end a.active {
    color: #fff !important;
    font-weight: 600;
}

/* Footer description text */
.footer p,
.footer p.text-muted {
    color: #94a3b8 !important;
    font-size: 0.9rem;
    line-height: 1.7;
}

/* Footer copyright area */
.footer .text-center p,
.footer .text-md-start p,
.footer .text-md-end a {
    color: #fff !important;
}

/* Social icons */
.footer .footer-social {
    margin-top: 0.75rem;
}

.footer .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s var(--ease-spring);
}

.footer .footer-social a:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-color: transparent;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.35);
    color: #fff !important;
}

.footer .footer-social a svg {
    transition: transform 0.3s var(--ease-out-expo);
}

.footer .footer-social a:hover svg {
    transform: scale(1.1);
}

/* Newsletter form */
.footer-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-form-inner {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-pill);
    padding: 0.35rem;
    gap: 0.5rem;
    align-items: center;
}

.footer-form-inner:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.16);
}

.footer-form .form-control {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    box-shadow: none;
    flex: 1;
    min-width: 0;
}

.footer-form .form-control:focus {
    outline: none;
    box-shadow: none;
}

.footer-form .form-control::placeholder {
    color: var(--color-muted);
}

.footer-form .form-control.is-invalid {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35);
    border-radius: var(--radius-pill);
}

.footer-form .btn-primary {
    padding: 0.65rem 1.1rem;
    border-radius: var(--radius-pill);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.footer-form .btn-primary::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 60%;
    height: 220%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    opacity: 0;
    transform: translateX(0);
}

.footer-form .btn-primary.footer-shimmer::after {
    animation: footerShimmer 1.4s var(--ease-out-expo);
}

.footer-form-note {
    font-size: 0.78rem;
}

@keyframes footerShimmer {
    0% {
        opacity: 0;
        transform: translateX(-20%);
    }

    25% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        transform: translateX(220%);
    }
}

/* Footer reveal */
.footer-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
    transition-delay: var(--footer-delay, 0ms);
}

.footer-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .footer-reveal {
        transition: none;
    }
}

/* Footer bottom */
.footer hr {
    border-color: rgba(255, 255, 255, 0.08);
    margin: 3rem 0 1.5rem;
}

.footer .text-muted {
    font-size: 0.85rem;
}

/* ============================================
   DIGITAL STRATEGY PAGE
   ============================================ */

.digital-strategy-page .strategy-hero {
    position: relative;
    padding: 4rem 0 3.5rem;
    background: radial-gradient(600px 320px at 10% 10%, rgba(var(--color-primary-rgb), 0.16), transparent 60%),
        radial-gradient(500px 260px at 80% 0%, rgba(var(--color-secondary-rgb), 0.16), transparent 60%),
        linear-gradient(135deg, #0a0c16 0%, #0e0f24 40%, #0a0c16 100%);
    overflow: hidden;
    isolation: isolate;
}

.digital-strategy-page .strategy-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 400px at 50% 40%, rgba(var(--color-primary-rgb), 0.08), transparent 70%);
    z-index: 0;
}

.digital-strategy-page .strategy-hero .container {
    position: relative;
    z-index: 1;
}

.digital-strategy-page .strategy-badge {
    color: #fff;
}

.digital-strategy-page .strategy-hero h1 {
    color: #fff;
}

.digital-strategy-page .strategy-hero p {
    color: rgba(226, 232, 240, 0.9);
}

.strategy-hero-tags .hero-tag {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.strategy-hero-lead {
    max-width: 600px;
}

.strategy-outcomes {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.strategy-outcome-card {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
    transition: transform 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.strategy-outcome-card::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.1), transparent 70%);
    top: -50px;
    right: -50px;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.strategy-outcome-card:hover {
    transform: translateY(-8px);
}

.strategy-outcomes .row > div:nth-child(1) .strategy-outcome-card:hover {
    border-color: rgba(var(--color-secondary-rgb), 0.3);
    box-shadow: 0 20px 50px rgba(var(--color-secondary-rgb), 0.15);
}

.strategy-outcomes .row > div:nth-child(2) .strategy-outcome-card:hover {
    border-color: rgba(var(--color-primary-rgb), 0.3);
    box-shadow: 0 20px 50px rgba(var(--color-primary-rgb), 0.15);
}

.strategy-outcomes .row > div:nth-child(3) .strategy-outcome-card:hover {
    border-color: rgba(var(--color-secondary-rgb), 0.25);
    box-shadow: 0 20px 50px rgba(var(--color-secondary-rgb), 0.12);
}

.strategy-outcome-card:hover::before {
    opacity: 1;
    transform: scale(1.3);
}

.strategy-outcome-card:hover .outcome-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.22), rgba(var(--color-secondary-rgb), 0.22));
}

.strategy-outcome-card:hover .chip {
    transform: translateY(-2px);
}

.outcome-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.16), rgba(var(--color-secondary-rgb), 0.16));
    display: grid;
    place-items: center;
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chip-soft {
    background: rgba(var(--color-secondary-rgb), 0.1);
    color: var(--color-secondary);
}

.chip-warm {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

.chip-cool {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08), rgba(var(--color-secondary-rgb), 0.08));
    color: var(--color-secondary);
}

.strategy-split .strategy-card {
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.75));
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
}

.strategy-card-danger {
    border-color: rgba(239, 68, 68, 0.25);
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.1);
}

.strategy-card-success {
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.1);
}

.strategy-list {
    display: grid;
    gap: 0.75rem;
    color: #e2e8f0;
}

.strategy-list i {
    color: rgba(255, 255, 255, 0.85);
    margin-right: 0.75rem;
}

.strategy-list.success i {
    color: #22c55e;
}

.pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #fff;
}

.pill-icon-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(248, 113, 113, 0.7));
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}

.pill-icon-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(52, 211, 153, 0.7));
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.strategy-deliverables {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.deliverable-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.14), rgba(var(--color-secondary-rgb), 0.14));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.strategy-process {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.strategy-step {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem;
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    transition: transform 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
}

.strategy-step:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--color-secondary-rgb), 0.45);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

.strategy-step .step-number {
    min-width: 72px;
    height: 52px;
    margin: 0 auto 0.75rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.15);
}

.strategy-playbook {
    background: radial-gradient(900px 520px at 10% 20%, rgba(var(--color-primary-rgb), 0.24), transparent 60%),
        radial-gradient(800px 480px at 90% 0%, rgba(var(--color-secondary-rgb), 0.22), transparent 60%),
        linear-gradient(135deg, #0a0c16 0%, #0f172a 45%, #0b0f1d 100%);
}

.playbook-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 992px) {
    .playbook-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.playbook-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
    height: 100%;
}

.playbook-label {
    display: inline-flex;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.playbook-card p {
    color: rgba(255, 255, 255, 0.75);
}

.strategy-audience .audience-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.strategy-audience .audience-item:last-child {
    border-bottom: 0;
}

.audience-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--color-secondary-rgb), 0.16), rgba(var(--color-primary-rgb), 0.16));
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
}

.strategy-cta-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(6, 182, 212, 0.12));
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.strategy-cta-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(400px 220px at 20% 20%, rgba(var(--color-primary-rgb), 0.2), transparent 60%),
        radial-gradient(320px 200px at 80% 80%, rgba(var(--color-secondary-rgb), 0.18), transparent 60%);
    opacity: 0.9;
    pointer-events: none;
}

.strategy-cta-card>* {
    position: relative;
    z-index: 1;
}

.strategy-cta-card .btn {
    box-shadow: 0 10px 30px rgba(var(--color-primary-rgb), 0.35);
}

.strategy-engagements {
    background: radial-gradient(1200px 600px at 10% 20%, rgba(var(--color-primary-rgb), 0.18), transparent 55%),
        radial-gradient(1000px 520px at 90% 10%, rgba(var(--color-secondary-rgb), 0.16), transparent 60%),
        linear-gradient(135deg, #0a0c16 0%, #0e0f24 45%, #0a0c16 100%);
}

.engagement-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
    color: #fff;
}

.engagement-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.engagement-badge {
    display: inline-flex;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
}

.strategy-related {
    background: radial-gradient(1200px 600px at 10% 20%, rgba(var(--color-primary-rgb), 0.18), transparent 55%),
        radial-gradient(1000px 520px at 90% 10%, rgba(var(--color-secondary-rgb), 0.16), transparent 60%),
        linear-gradient(135deg, #0a0c16 0%, #0e0f24 45%, #0a0c16 100%);
}

.strategy-related-card {
    display: block;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
}

.strategy-related-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
}

/* Deliverable horizontal rows */
.deliverable-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.deliverable-row:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

/* Process — horizontal timeline */
.strategy-process-dark {
    background: radial-gradient(900px 520px at 10% 20%, rgba(var(--color-primary-rgb), 0.18), transparent 60%),
        radial-gradient(800px 480px at 90% 0%, rgba(var(--color-secondary-rgb), 0.16), transparent 60%),
        linear-gradient(135deg, #0a0c16 0%, #0f172a 45%, #0b0f1d 100%);
}

.process-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}

.process-track::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 32px;
    right: 32px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    opacity: 0.4;
    z-index: 0;
}

.process-node {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 0.75rem;
}

.process-marker {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3), 0 0 0 6px rgba(255, 255, 255, 0.06);
}

.process-node h3 {
    color: #fff;
}

.process-node p {
    color: rgba(226, 232, 240, 0.7);
}

/* Audience — 4-card grid */
.strategy-audience-grid {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.audience-card {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
    transition: transform 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
}

.audience-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.audience-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--color-primary-rgb), 0.3);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

.audience-card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.12), rgba(var(--color-secondary-rgb), 0.12));
    color: var(--color-primary);
    font-size: 1.25rem;
    display: grid;
    place-items: center;
}

/* CTA Banner */
.strategy-cta-banner {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.strategy-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 80% 20%, rgba(255, 255, 255, 0.12), transparent 60%);
    pointer-events: none;
}

.strategy-cta-banner .container {
    position: relative;
    z-index: 1;
}

.strategy-cta-banner p {
    color: rgba(255, 255, 255, 0.85);
}

.cta-trust-item {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 500;
}

.cta-trust-item .fa-circle-check {
    color: #bbf7d0;
}

.strategy-cta-banner .btn-light {
    background: #fff;
    color: var(--color-primary);
    font-weight: 600;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.strategy-cta-banner .btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    background: #fff;
}

/* Bottom CTA */
.strategy-bottom-cta {
    background: linear-gradient(135deg, #0a0c16 0%, #0e0f24 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.strategy-bottom-cta p.lead {
    color: rgba(226, 232, 240, 0.7);
}

@media (max-width: 991px) {
    .process-track {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .process-track::before {
        display: none;
    }
}

@media (max-width: 767px) {
    .digital-strategy-page .strategy-hero {
        padding: 4rem 0 3rem;
    }

    .strategy-hero-tags .hero-tag {
        width: 100%;
    }

    .process-track {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ============================================
   SERVICE PAGES — SHARED PREMIUM STYLES
   ============================================ */

/* --- Hero — Dark centered layout with radial glows --- */
.svc-hero {
    position: relative;
    padding: 4rem 0 3.5rem;
    background: radial-gradient(600px 320px at 10% 10%, rgba(var(--color-primary-rgb), 0.16), transparent 60%),
        radial-gradient(500px 260px at 80% 0%, rgba(var(--color-secondary-rgb), 0.16), transparent 60%),
        linear-gradient(135deg, #0a0c16 0%, #0e0f24 40%, #0a0c16 100%);
    overflow: hidden;
    isolation: isolate;
}

.svc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 400px at 50% 40%, rgba(var(--color-primary-rgb), 0.08), transparent 70%);
    z-index: 0;
}

.svc-hero .container {
    position: relative;
    z-index: 1;
}

.svc-hero h1 {
    color: #fff;
}

.svc-hero p,
.svc-hero .lead {
    color: rgba(226, 232, 240, 0.9);
}

.svc-hero-lead {
    max-width: 600px;
}

/* Hero with background image overlay */
.svc-hero-img {
    padding: 5rem 0 4rem;
}

.svc-hero-img .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
    z-index: 0;
}

/* Hero stat counters */
.svc-hero-stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 2rem;
}

.svc-hero-stat {
    text-align: center;
}

.svc-hero-stat .stat-value {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.svc-hero-stat .stat-label {
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.6);
    margin-top: 0.15rem;
}

/* --- Premium feature cards with hover spotlight --- */
.svc-card {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
    transition: transform 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.svc-card::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.1), transparent 70%);
    top: -50px;
    right: -50px;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.svc-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--color-primary-rgb), 0.3);
    box-shadow: 0 20px 50px rgba(var(--color-primary-rgb), 0.12);
}

.svc-card:hover::before {
    opacity: 1;
    transform: scale(1.3);
}

/* Alternate card hover colors per column */
.row > div:nth-child(even) > .svc-card:hover {
    border-color: rgba(var(--color-secondary-rgb), 0.3);
    box-shadow: 0 20px 50px rgba(var(--color-secondary-rgb), 0.12);
}

/* --- Card icon --- */
.svc-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.16), rgba(var(--color-secondary-rgb), 0.16));
    display: grid;
    place-items: center;
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.35s var(--ease-out-expo), background 0.35s ease;
}

.svc-card:hover .svc-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.22), rgba(var(--color-secondary-rgb), 0.22));
}

/* Large circular icon variant */
.svc-icon-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 1.25rem;
}

/* --- Dark glass cards (for dark sections) --- */
.svc-glass-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
    color: #fff;
    height: 100%;
}

.svc-glass-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.svc-glass-card .svc-icon {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.3), rgba(var(--color-secondary-rgb), 0.3));
    color: #fff;
}

/* --- Dark section backgrounds --- */
.svc-dark {
    background: radial-gradient(900px 520px at 10% 20%, rgba(var(--color-primary-rgb), 0.18), transparent 60%),
        radial-gradient(800px 480px at 90% 0%, rgba(var(--color-secondary-rgb), 0.16), transparent 60%),
        linear-gradient(135deg, #0a0c16 0%, #0f172a 45%, #0b0f1d 100%);
}

.svc-dark h2,
.svc-dark h3 {
    color: #fff;
}

.svc-dark p {
    color: rgba(226, 232, 240, 0.7);
}

/* --- Light section backgrounds --- */
.svc-light {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

/* --- Section header pattern --- */
.svc-section-label {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* --- Bottom CTA section --- */
.svc-bottom-cta {
    background: linear-gradient(135deg, #0a0c16 0%, #0e0f24 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-bottom-cta p.lead {
    color: rgba(226, 232, 240, 0.7);
}

/* --- Related services cards --- */
.svc-related-card {
    display: block;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
    text-decoration: none;
    height: 100%;
}

.svc-related-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
}

.svc-related-card .badge-label {
    display: inline-flex;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.7rem;
    margin-bottom: 0.75rem;
}

.svc-related-card h3 {
    color: #fff;
    font-size: 1.1rem;
}

.svc-related-card p {
    color: rgba(226, 232, 240, 0.65);
    font-size: 0.85rem;
}

/* --- Pricing cards --- */
.svc-pricing-card {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
    height: 100%;
}

.svc-pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

.svc-pricing-card.featured {
    background: linear-gradient(135deg, var(--color-primary), #e0521e);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 20px 50px rgba(var(--color-primary-rgb), 0.3);
}

.svc-pricing-card.featured:hover {
    box-shadow: 0 28px 70px rgba(var(--color-primary-rgb), 0.35);
}

.svc-pricing-card .price {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.svc-pricing-card .price small {
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.7;
}

/* --- FAQ accordion premium --- */
.svc-faq .accordion-item {
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius-md) !important;
    margin-bottom: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.svc-faq .accordion-button {
    background: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 1rem 1.25rem;
    box-shadow: none;
}

.svc-faq .accordion-button:not(.collapsed) {
    background: rgba(var(--color-primary-rgb), 0.04);
    color: var(--color-primary);
}

.svc-faq .accordion-button::after {
    background-size: 1rem;
}

.svc-faq .accordion-body {
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* --- Case study cards --- */
.svc-case-card {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
    height: 100%;
}

.svc-case-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

.svc-case-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out-expo);
}

.svc-case-card:hover img {
    transform: scale(1.05);
}

.svc-case-card .card-body {
    padding: 1.5rem;
}

.svc-case-metric {
    text-align: center;
}

.svc-case-metric .metric-value {
    font-weight: 800;
    color: var(--color-primary);
    font-size: 1.1rem;
}

.svc-case-metric .metric-label {
    font-size: 0.7rem;
    color: var(--color-muted);
}

.svc-case-highlight {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.06), rgba(var(--color-secondary-rgb), 0.04));
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #334155;
}

/* --- Integration / tech tags --- */
.svc-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(226, 232, 240, 0.9);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.svc-tag:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Light variant */
.svc-tag-light {
    background: rgba(var(--color-primary-rgb), 0.06);
    border-color: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
}

/* --- Progress bars premium --- */
.svc-progress {
    height: 8px;
    border-radius: 999px;
    background: rgba(var(--color-primary-rgb), 0.08);
    overflow: hidden;
}

.svc-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transition: width 1s var(--ease-out-expo);
}

/* --- Responsive adjustments --- */
@media (max-width: 991px) {
    .svc-hero {
        padding: 3.5rem 0 3rem;
    }

    .svc-hero-stats {
        gap: 1.5rem;
    }
}

@media (max-width: 767px) {
    .svc-hero {
        padding: 3rem 0 2.5rem;
    }

    .svc-hero-stats {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }

    .svc-hero-stat .stat-value {
        font-size: 1.5rem;
    }
}

/* ============================================
   GLOBAL ANIMATIONS & UTILITIES
   ============================================ */

/* Glow text effect */
.glow-text {
    text-shadow:
        0 0 30px rgba(255, 107, 53, 0.5),
        0 0 60px rgba(99, 102, 241, 0.3);
    animation: textGlow 3s ease-in-out infinite alternate;
}

@keyframes textGlow {
    0% {
        text-shadow:
            0 0 30px rgba(255, 107, 53, 0.5),
            0 0 60px rgba(99, 102, 241, 0.3);
    }

    100% {
        text-shadow:
            0 0 40px rgba(255, 107, 53, 0.7),
            0 0 80px rgba(99, 102, 241, 0.5);
    }
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Selection */
::selection {
    background: var(--color-primary);
    color: #fff;
}

/* Loading placeholder */
img[loading="lazy"] {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01));
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1199px) {
    .hero-slide {
        min-height: 600px;
    }

    .hero-slide .hero-content h1 {
        max-width: 20ch;
    }

    .hero-slide .hero-content .lead {
        max-width: 44ch;
    }
}

@media (max-width: 991px) {
    :root {
        --navbar-height: 70px;
        --navbar-height-shrink: 60px;
    }

    .hero-slide {
        min-height: 550px;
    }

    .hero-slide .hero-content h1 {
        max-width: 20ch;
    }

    .hero-slide .hero-content .lead {
        max-width: 42ch;
    }

    .carousel-control-prev,
    .carousel-control-next {
        display: none !important;
    }

    .tech-slider-track {
        gap: 1.5rem;
    }

    .tech-item {
        min-width: 90px;
        padding: 1.25rem 1rem;
    }

    .service-icon,
    .why-icon {
        width: 64px;
        height: 64px;
    }
}

@media (max-width: 767px) {
    .display-3 {
        font-size: 2rem;
    }

    .display-5 {
        font-size: 1.5rem;
    }

    .hero-chip {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }

    .ai-logo,
    .tech-icon {
        width: 42px;
        height: 42px;
    }

    .btn {
        padding: 0.75rem 1.5rem;
    }

    .btn-lg {
        padding: 0.875rem 2rem;
    }

    .carousel-indicators {
        bottom: 30px;
    }

    .hero-slide .hero-content h1 {
        max-width: 22ch;
    }

    .hero-slide .hero-content .lead {
        max-width: 40ch;
    }

    .hero-tag {
        padding: 0.45rem 0.9rem;
        gap: 0.4rem;
        font-size: 0.78rem;
    }

    #backToTop {
        width: 46px;
        height: 46px;
        bottom: 20px;
        right: 20px;
    }
}

/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.2s !important;
    }

    /* Tech slider: gentler marquee instead of killing it */
    .tech-slider-track {
        animation-name: techSlide !important;
        animation-duration: 60s !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
    }

    /* Hero carousel: allow slide transitions to work */
    .carousel-fade .carousel-item {
        transition-property: opacity !important;
        transition-duration: 0.6s !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.animate-float {
    animation: iconFloat 4s ease-in-out infinite;
}

.animate-pulse {
    animation: iconPulse 3s ease-in-out infinite;
}

.animate-tilt {
    animation: iconTilt 5s ease-in-out infinite;
}

/* Perspective container for 3D effects */
.perspective-container {
    perspective: 1000px;
}

/* ============================================
   PAGE PROGRESS BAR - Top of Page
   ============================================ */

#pageProgress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
}

#pageProgressBar {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.1s ease-out;
    box-shadow:
        0 0 10px rgba(255, 107, 53, 0.5),
        0 0 20px rgba(99, 102, 241, 0.3);
}


/* ============================================
   SCROLL TO TOP - Rounded with Gradient
   ============================================ */

#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.4s var(--ease-spring);
    box-shadow:
        0 4px 20px rgba(255, 107, 53, 0.4),
        0 4px 15px rgba(99, 102, 241, 0.3);
    z-index: 1000;
}

#backToTop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

#backToTop:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow:
        0 8px 30px rgba(255, 107, 53, 0.5),
        0 8px 25px rgba(99, 102, 241, 0.4),
        0 0 0 4px rgba(255, 107, 53, 0.15);
}

#backToTop:active {
    transform: translateY(-2px) scale(1.05);
}

#backToTop svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    transition: transform 0.3s var(--ease-out-expo);
}

#backToTop:hover svg {
    transform: translateY(-2px);
}

/* ============================================
   PAGE HERO - Consistent Hero for Subpages
   ============================================ */

.page-hero {
    position: relative;
    min-height: auto;
    padding: calc(var(--navbar-height) + 2rem) 0 2.5rem;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-lighter) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 60%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.08) 0%, transparent 60%);
    z-index: 0;
}

.page-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 50%;
    height: 140%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 60%);
    z-index: 0;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    font-size: clamp(2rem, 8vw, 3.5rem);
    color: #fff;
    margin-bottom: 1rem;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

.page-hero .lead {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
}

.page-hero-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    font-weight: 600;
}

/* ============================================
   BREADCRUMB - Dark Theme Navigation
   ============================================ */

.breadcrumb-dark {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    display: inline-flex;
}

.breadcrumb-dark .breadcrumb {
    margin-bottom: 0;
    background: transparent;
    padding: 0;
}

.breadcrumb-dark .breadcrumb-item {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.breadcrumb-dark .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.breadcrumb-dark .breadcrumb-item a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s var(--ease-out-expo);
}

.breadcrumb-dark .breadcrumb-item a:hover {
    color: var(--color-primary-light);
}

.breadcrumb-dark .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   PRICING CARDS - Premium Pricing Design
   ============================================ */

.pricing-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s var(--ease-out-expo);
}

.pricing-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: var(--shadow-xl);
}

.pricing-card.pricing-featured {
    border: 2px solid var(--color-primary);
    box-shadow: 0 20px 40px rgba(255, 107, 53, 0.15);
    transform: scale(1.02);
}

.pricing-card.pricing-featured:hover {
    transform: scale(1.02) translateY(-8px);
    box-shadow: 0 30px 60px rgba(255, 107, 53, 0.2);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.pricing-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pricing-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.pricing-description {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 1.5rem;
}

.pricing-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.pricing-currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-dark);
}

.pricing-value {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-dark);
    line-height: 1;
}

.pricing-period {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-top: 0.5rem;
}

.pricing-features {
    flex: 1;
    margin-bottom: 2rem;
}

.pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-features li {
    padding: 0.75rem 0;
    color: var(--color-dark);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features li::before {
    content: '';
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2.5'%3E%3Cpath d='M20 6L9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.pricing-features li.unavailable {
    color: #cbd5e1;
    opacity: 0.6;
}

.pricing-features li.unavailable::before {
    background: rgba(0, 0, 0, 0.05);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2'%3E%3Cpath d='M18 6L6 18M6 6l12 12'%3E%3C/path%3E%3C/svg%3E");
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}

.pricing-cta {
    margin-top: auto;
}

.pricing-cta .btn {
    width: 100%;
}

/* ============================================
   FAQ ACCORDION - Interactive Expandable Items
   ============================================ */

.faq-section {
    background: linear-gradient(180deg, var(--color-light) 0%, #fff 100%);
}

.faq-accordion {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-sm);
}

.faq-accordion .accordion-item {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.faq-accordion .accordion-item:last-child {
    border-bottom: none;
}

.faq-accordion .accordion-button {
    padding: 1.5rem;
    background: transparent;
    color: var(--color-dark);
    font-weight: 600;
    font-size: 1rem;
    border: none;
    transition: all 0.3s var(--ease-out-expo);
}

.faq-accordion .accordion-button:not(.collapsed) {
    background: rgba(255, 107, 53, 0.04);
    color: var(--color-primary);
    box-shadow: none;
}

.faq-accordion .accordion-button:hover {
    background: rgba(255, 107, 53, 0.03);
}

.faq-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FF6B35'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    transition: transform 0.3s var(--ease-out-expo);
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

.faq-accordion .accordion-body {
    padding: 0 1.5rem 1.5rem;
    color: var(--color-muted);
    line-height: 1.7;
}

.faq-accordion .accordion-body strong {
    color: var(--color-dark);
}

/* FAQ Category Tabs */
.faq-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.faq-tab {
    padding: 0.625rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-pill);
    color: var(--color-dark);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
}

.faq-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.faq-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ============================================
   TEAM CARDS - Team Member Profiles
   ============================================ */

.team-card {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.4s var(--ease-out-expo);
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(255, 107, 53, 0.15);
}

.team-card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.team-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s var(--ease-out-expo);
}

.team-card:hover .team-card-image img {
    transform: scale(1.05);
}

.team-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(15, 23, 42, 0.9) 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
}

.team-card:hover .team-card-overlay {
    opacity: 1;
}

.team-card-socials {
    display: flex;
    gap: 0.75rem;
}

.team-card-socials a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.3s ease;
}

.team-card-socials a:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
}

.team-card-content {
    padding: 1.5rem;
    text-align: center;
}

.team-card-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.25rem;
}

.team-card-role {
    font-size: 0.875rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.team-card-bio {
    font-size: 0.85rem;
    color: var(--color-muted);
    line-height: 1.6;
}

/* ============================================
   PORTFOLIO CARDS - Project Showcase
   ============================================ */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 991.98px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

.portfolio-card {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.4s var(--ease-out-expo);
}

.portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.portfolio-card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.portfolio-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s var(--ease-out-expo);
}

.portfolio-card:hover .portfolio-card-image img {
    transform: scale(1.08);
}

.portfolio-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(15, 23, 42, 0.85) 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1.5rem;
}

.portfolio-card:hover .portfolio-card-overlay {
    opacity: 1;
}

.portfolio-overlay-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.875rem;
    background: rgba(255, 107, 53, 0.2);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.portfolio-overlay-title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.portfolio-overlay-link {
    color: var(--color-primary-light);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.portfolio-overlay-link:hover {
    gap: 0.75rem;
    color: #fff;
}

.portfolio-card-content {
    padding: 1.5rem;
}

.portfolio-category {
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.portfolio-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.75rem;
}

.portfolio-description {
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.portfolio-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.portfolio-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 107, 53, 0.08);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Portfolio Filter */
.portfolio-filter {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.portfolio-filter-btn {
    padding: 0.625rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-pill);
    color: var(--color-dark);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
}

.portfolio-filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.portfolio-filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ============================================
   BLOG CARDS - Article Preview Cards
   ============================================ */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 991.98px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

.blog-card {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.4s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(255, 107, 53, 0.15);
}

.blog-card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s var(--ease-out-expo);
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.875rem;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.blog-category {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 107, 53, 0.08);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
}

.blog-date {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.blog-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.75rem;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.blog-card:hover .blog-title {
    color: var(--color-primary);
}

.blog-excerpt {
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.65;
    margin-bottom: 1rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: auto;
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-dark);
    font-weight: 500;
}

.blog-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-reading-time {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.blog-read-more:hover {
    gap: 0.75rem;
}

/* Blog Featured Card */
.blog-card-featured {
    grid-column: span 2;
}

.blog-card-featured .blog-card-image {
    aspect-ratio: 21 / 9;
}

@media (max-width: 575.98px) {
    .blog-card-featured {
        grid-column: span 1;
    }
}

/* ============================================
   CONTACT FORM - Form Elements & Validation
   ============================================ */

.contact-section {
    background: linear-gradient(180deg, var(--color-light) 0%, #fff 100%);
}

.contact-form {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-md);
}

.contact-form-group {
    margin-bottom: 1.5rem;
}

.contact-form-group label {
    display: block;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.contact-form-group label .required {
    color: #ef4444;
}

.contact-form-group input,
.contact-form-group textarea,
.contact-form-group select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-dark);
    transition: all 0.3s var(--ease-out-expo);
    background: #f8fafc;
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color: var(--color-muted);
}

.contact-form-group input:focus,
.contact-form-group textarea:focus,
.contact-form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.contact-form-group textarea {
    resize: vertical;
    min-height: 140px;
}

.contact-form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B35' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1.2em;
    padding-right: 2.5rem;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .contact-form-row {
        grid-template-columns: 1fr;
    }

    /* Application Form Responsive */
    .application-form-wrapper {
        padding: 1.5rem;
    }

    .form-progress {
        gap: 0;
    }

    .form-progress-step .step-label {
        font-size: 0.7rem;
    }

    .form-progress-step .step-number {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .form-progress-line {
        max-width: 40px;
    }

    .form-step-actions {
        flex-direction: column;
    }

    .form-step-actions .btn-prev {
        margin-right: 0;
        order: 2;
    }

    .form-step-actions .btn-next,
    .form-step-actions .btn-submit {
        width: 100%;
    }

    .file-upload-premium {
        padding: 1.5rem 1rem;
    }
}

.contact-form-submit {
    margin-top: 2rem;
}

.contact-form-submit .btn {
    width: 100%;
    padding: 1rem 2rem;
}

/* Contact Info Cards */
.contact-info-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s var(--ease-out-expo);
}

.contact-info-card:hover {
    border-color: rgba(255, 107, 53, 0.2);
    box-shadow: var(--shadow-md);
}

.contact-info-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(99, 102, 241, 0.1));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.contact-info-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 0.25rem;
}

.contact-info-content p {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 0;
}

.contact-info-content a {
    color: var(--color-primary);
    text-decoration: none;
}

.contact-info-content a:hover {
    text-decoration: underline;
}

/* ============================================
   VALUES CARDS - Company Values Section
   ============================================ */

.values-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    text-align: center;
    transition: all 0.4s var(--ease-out-expo);
    height: 100%;
}

.values-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(255, 107, 53, 0.15);
}

.values-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(99, 102, 241, 0.1));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.values-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.75rem;
}

.values-card p {
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 0;
}

/* ============================================
   STATS SECTION - Numbers Display
   ============================================ */

.stats-section {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-lighter) 100%);
    padding: 4rem 0;
}

.stat-item {
    text-align: center;
    padding: 1.5rem;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   PROCESS STEPS - How We Work Section
   ============================================ */

.process-step {
    text-align: center;
    padding: 2rem;
    position: relative;
}

.process-step-number {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    font-family: var(--font-mono);
    position: relative;
    z-index: 2;
}

.process-step h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.75rem;
}

.process-step p {
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Process connector line */
.process-step::after {
    content: '';
    position: absolute;
    top: 52px;
    left: calc(50% + 40px);
    width: calc(100% - 80px);
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    opacity: 0.3;
}

.process-step:last-child::after {
    display: none;
}

@media (max-width: 991.98px) {
    .process-step::after {
        display: none;
    }
}

/* ============================================
   TESTIMONIAL CARDS
   ============================================ */

.testimonial-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    height: 100%;
}

.testimonial-content {
    font-size: 1rem;
    color: var(--color-dark);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 0.125rem;
}

.testimonial-info span {
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* ============================================
   LEGAL PAGES - Privacy Policy, Terms
   ============================================ */

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255, 107, 53, 0.2);
}

.legal-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.legal-content p {
    color: var(--color-muted);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.legal-content ul {
    color: var(--color-muted);
    line-height: 1.8;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
}

.legal-toc {
    background: var(--color-light);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    margin-bottom: 2.5rem;
}

.legal-toc h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 1rem;
}

.legal-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.legal-toc li {
    padding: 0.375rem 0;
}

.legal-toc a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.legal-toc a:hover {
    text-decoration: underline;
}

.legal-updated {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 2rem;
}

/* ============================================
   ABOUT PAGE - Interactive Elements
   ============================================ */

/* Hero Section */
.hero-about-section {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-lighter) 100%);
    position: relative;
    min-height: 80vh;
}

.hero-about-bg {
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.03)"/></svg>');
    opacity: 0.5;
}

.hero-about-content {
    z-index: 2;
}

/* Hero Stats */
.hero-stat-item {
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hero Visual Cards */
.hero-about-visual {
    position: relative;
    height: 100%;
}

.about-card-floating-1 {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 320px;
    z-index: 2;
    animation: float1 6s ease-in-out infinite;
}

.about-card-floating-2 {
    position: absolute;
    bottom: 20%;
    left: 0;
    max-width: 280px;
    z-index: 3;
    animation: float2 5s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes float1 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Scroll Indicator */
.scroll-indicator {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.scroll-indicator-line {
    width: 2px;
    height: 60px;
    background: linear-gradient(to bottom, var(--color-primary), transparent);
    margin: 0 auto;
    animation: scrollPulse 2s ease-in-out infinite;
}

.scroll-indicator-dot {
    width: 12px;
    height: 12px;
    background: var(--color-primary);
    border-radius: 50%;
    margin: 8px auto 0;
    animation: scrollDotPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes scrollDotPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 107, 53, 0.3);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 0 15px rgba(255, 107, 53, 0.5);
    }
}

/* Story Timeline */
.story-timeline {
    position: relative;
    padding-left: 40px;
}

.timeline-item {
    position: relative;
    padding-bottom: 3rem;
    padding-left: 40px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-primary), rgba(255, 107, 53, 0.2));
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-marker {
    position: absolute;
    left: -40px;
    top: 0;
    width: 60px;
    height: 60px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
}

.timeline-marker-glow {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
}

.timeline-content {
    background: var(--color-light);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s var(--ease-out-expo);
}

.timeline-item:hover .timeline-content {
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
}

/* Interactive Values Cards */
.values-card-interactive {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.4s var(--ease-out-expo);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.values-card-interactive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-out-expo);
}

.values-card-interactive:hover::before {
    transform: scaleX(1);
}

.values-card-icon-wrapper {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: white;
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.25);
    transition: all 0.4s var(--ease-out-expo);
}

.values-card-interactive:hover .values-card-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 30px rgba(255, 107, 53, 0.35);
}

/* Interactive Team Cards */
.team-card-interactive {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.4s var(--ease-out-expo);
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.team-card-interactive:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.team-card-avatar {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--color-light-darker), var(--color-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    border: 3px solid var(--color-primary);
    padding: 1.5rem;
    color: var(--color-muted);
    transition: all 0.4s var(--ease-out-expo);
}

.team-card-interactive:hover .team-card-avatar {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    color: white;
    transform: scale(1.1) rotate(5deg);
}

.team-card-social {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

/* Interactive Stats Section */
.stats-section-interactive {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-lighter) 100%);
    position: relative;
    overflow: hidden;
}

.stats-section-interactive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.02)"/></svg>');
    opacity: 0.5;
}

.stats-item-interactive {
    text-align: center;
    padding: 2rem 1rem;
    transition: all 0.4s var(--ease-out-expo);
    border-radius: var(--radius-lg);
}

.stats-item-interactive:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.05);
}

.stats-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: rgba(255, 107, 53, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s var(--ease-out-expo);
}

.stats-item-interactive:hover .stats-icon {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 107, 53, 0.25);
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

.stats-number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.05em;
}

.stats-label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* Interactive Technologies Section */
.tech-logo-wrapper-interactive {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    transition: all 0.4s var(--ease-out-expo);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.tech-logo-wrapper-interactive:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary);
}

.tech-logo {
    display: inline-block;
    transition: all 0.4s var(--ease-out-expo);
}

.tech-logo-wrapper-interactive:hover .tech-logo {
    transform: scale(1.1);
}

/* Interactive CTA Section */
.cta-section-interactive {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    position: relative;
    overflow: hidden;
}

.cta-section-interactive::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: ctaGlow 10s ease-in-out infinite;
}

@keyframes ctaGlow {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-20px, -20px);
    }
}

.cta-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Glass Card */
.glass-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Badge with Glow */
.bg-glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.badge-glow-dot {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    display: inline-block;
    animation: badgeGlow 2s ease-in-out infinite;
}

@keyframes badgeGlow {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(255, 107, 53, 0.3);
    }

    50% {
        box-shadow: 0 0 10px rgba(255, 107, 53, 0.6);
    }
}

/* Animations for Hero Elements */
.hero-badge-anim {
    animation: fadeInUp 0.6s var(--ease-out-expo) forwards;
    animation-delay: 0.1s;
    opacity: 0;
}

.hero-title-anim {
    animation: fadeInUp 0.6s var(--ease-out-expo) forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

.hero-desc-anim {
    animation: fadeInUp 0.6s var(--ease-out-expo) forwards;
    animation-delay: 0.5s;
    opacity: 0;
}

.hero-buttons-anim {
    animation: fadeInUp 0.6s var(--ease-out-expo) forwards;
    animation-delay: 0.7s;
    opacity: 0;
}

.hero-stats-anim {
    animation: fadeInUp 0.6s var(--ease-out-expo) forwards;
    animation-delay: 0.9s;
    opacity: 0;
}

.hero-visual-anim {
    animation: fadeInRight 0.8s var(--ease-out-expo) forwards;
    animation-delay: 0.5s;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 991px) {

    .about-card-floating-1,
    .about-card-floating-2 {
        position: relative;
        max-width: 100%;
        margin-bottom: 2rem;
    }

    .hero-about-section {
        min-height: auto;
    }
}

@media (max-width: 767px) {
    .story-timeline {
        padding-left: 20px;
    }

    .timeline-marker {
        left: -30px;
        width: 50px;
        height: 50px;
        font-size: 0.75rem;
    }

    .hero-stat-item {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ============================================
   PORTFOLIO PAGE - Premium Redesign
   ============================================ */

/* Portfolio Hero Section */
.portfolio-hero-section {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1033 50%, var(--color-dark-lighter) 100%);
    position: relative;
    min-height: auto;
    padding: calc(var(--navbar-height) + 2rem) 0 2.5rem;
    overflow: hidden;
}

.portfolio-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.5;
}

.portfolio-hero-bg {
    background:
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 80% 50% at 20% 80%, rgba(255, 107, 53, 0.1) 0%, transparent 50%);
}

.min-vh-50 {
    min-height: auto;
}

/* Portfolio Filter Tabs */
.portfolio-filter-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.portfolio-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-pill);
    color: var(--color-dark);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
}

.portfolio-filter-btn svg {
    opacity: 0.6;
    transition: all 0.3s ease;
}

.portfolio-filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.portfolio-filter-btn:hover svg {
    opacity: 1;
}

.portfolio-filter-btn.active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.portfolio-filter-btn.active svg {
    opacity: 1;
}

/* Portfolio Premium Cards */
.portfolio-card-premium {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.4s var(--ease-out-expo);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.portfolio-card-premium:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border-color: transparent;
}

.portfolio-card-highlight {
    border: 2px solid rgba(255, 107, 53, 0.2);
}

.portfolio-card-highlight:hover {
    border-color: rgba(255, 107, 53, 0.4);
    box-shadow: 0 20px 50px rgba(255, 107, 53, 0.15);
}

/* Portfolio Card Image Wrapper */
.portfolio-card-image-wrapper {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.portfolio-card-gradient {
    position: absolute;
    inset: 0;
}

.portfolio-gradient-blue {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 50%, #3182ce 100%);
}

.portfolio-gradient-purple {
    background: linear-gradient(135deg, #2d1b4e 0%, #553c9a 50%, #805ad5 100%);
}

.portfolio-gradient-cyan {
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0891b2 100%);
}

.portfolio-gradient-orange {
    background: linear-gradient(135deg, #7c2d12 0%, #c2410c 50%, #ea580c 100%);
}

.portfolio-gradient-green {
    background: linear-gradient(135deg, #14532d 0%, #166534 50%, #22c55e 100%);
}

.portfolio-gradient-pink {
    background: linear-gradient(135deg, #831843 0%, #be185d 50%, #ec4899 100%);
}

.portfolio-card-icon-wrapper {
    position: relative;
    z-index: 2;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s var(--ease-out-expo);
}

.portfolio-card-premium:hover .portfolio-card-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 255, 255, 0.15);
}

.portfolio-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    padding: 0.375rem 0.875rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.portfolio-card-badge.badge-geo {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.8), rgba(255, 143, 102, 0.8));
    border-color: rgba(255, 107, 53, 0.4);
}

/* Portfolio Card Content */
.portfolio-card-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.portfolio-card-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.portfolio-card-category-badge .category-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.portfolio-card-category-badge.web {
    color: #3b82f6;
}

.portfolio-card-category-badge.web .category-dot {
    background: #3b82f6;
}

.portfolio-card-category-badge.ecommerce {
    color: #8b5cf6;
}

.portfolio-card-category-badge.ecommerce .category-dot {
    background: #8b5cf6;
}

.portfolio-card-category-badge.mobile {
    color: #0891b2;
}

.portfolio-card-category-badge.mobile .category-dot {
    background: #0891b2;
}

.portfolio-card-category-badge.ai {
    color: var(--color-primary);
}

.portfolio-card-category-badge.ai .category-dot {
    background: var(--color-primary);
    animation: pulseDot 2s ease-in-out infinite;
}

.portfolio-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.625rem;
    line-height: 1.3;
}

.portfolio-card-desc {
    font-size: 0.875rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1;
}

.portfolio-card-stats {
    margin-bottom: 1rem;
    padding: 0.875rem;
    background: var(--color-light);
    border-radius: var(--radius-md);
}

.portfolio-stat {
    display: flex;
    flex-direction: column;
}

.portfolio-stat-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.portfolio-stat-label {
    font-size: 0.75rem;
    color: var(--color-muted);
    font-weight: 500;
}

/* Text gradient variants */
.text-gradient-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-green {
    background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-pink {
    background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tech Stack Badges */
.portfolio-card-tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: auto;
}

.tech-badge {
    padding: 0.25rem 0.625rem;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-dark-lightest);
}

/* ============================================
   TESTIMONIAL CARDS - Premium Design
   ============================================ */

.testimonial-card-premium {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s var(--ease-out-expo);
}

.testimonial-card-premium:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.testimonial-card-featured {
    background: linear-gradient(135deg, #fff8f5 0%, #fff 100%);
    border-color: rgba(255, 107, 53, 0.15);
}

.testimonial-card-featured:hover {
    box-shadow: 0 20px 50px rgba(255, 107, 53, 0.1);
}

.testimonial-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.testimonial-stars-premium {
    display: flex;
    gap: 0.25rem;
}

.testimonial-stars-premium svg {
    filter: drop-shadow(0 2px 4px rgba(255, 184, 0, 0.3));
}

.testimonial-quote-icon {
    color: rgba(255, 107, 53, 0.2);
}

.testimonial-quote-text {
    font-size: 1rem;
    color: var(--color-dark);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex: 1;
}

.testimonial-quote-text strong {
    color: var(--color-primary);
}

.testimonial-author-premium {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: auto;
}

.testimonial-avatar-premium {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-light-darker), var(--color-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-dark);
    font-size: 0.875rem;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.testimonial-avatar-premium.avatar-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
}

.testimonial-author-info {
    flex: 1;
}

.testimonial-author-name {
    font-weight: 600;
    color: var(--color-dark);
    font-size: 0.95rem;
    margin-bottom: 0.125rem;
}

.testimonial-author-role {
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* ============================================
   LEGAL PAGES - Enhanced Styling
   ============================================ */

.legal-section {
    scroll-margin-top: 100px;
}

.legal-content .alert {
    border-radius: var(--radius-md);
}

.legal-content .alert-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.04));
    border: 1px solid rgba(59, 130, 246, 0.15);
    color: #1e40af;
}

.legal-content .alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.04));
    border: 1px solid rgba(245, 158, 11, 0.15);
    color: #92400e;
}

.legal-content .alert-secondary {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.08), rgba(100, 116, 139, 0.04));
    border: 1px solid rgba(100, 116, 139, 0.15);
    color: #475569;
}

.legal-toc .nav-link {
    color: var(--color-muted);
    font-size: 0.85rem;
    padding: 0.375rem 0;
    transition: all 0.3s ease;
    border-left: 2px solid transparent;
    padding-left: 0.75rem;
    margin-left: -0.75rem;
}

.legal-toc .nav-link:hover {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    transform: translateX(4px);
}

/* Primary soft badge */
.bg-primary-soft {
    background: rgba(255, 107, 53, 0.1) !important;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Portfolio filter animation */
.portfolio-item {
    animation: fadeInUp 0.5s ease forwards;
}

/* ============================================
   PREMIUM LEGAL PAGES
   ============================================ */

/* Legal Hero Section */
.legal-hero-section {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1033 50%, var(--color-dark-lighter) 100%);
    min-height: auto;
    padding: calc(var(--navbar-height) + 2rem) 0 2.5rem;
    display: flex;
    align-items: center;
}

.legal-hero-bg {
    background:
        radial-gradient(circle at 20% 80%, rgba(var(--color-primary-rgb), 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}

.legal-hero-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.legal-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1), rgba(139, 92, 246, 0.05));
    filter: blur(60px);
}

.legal-shape-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -100px;
    animation: floatShape 20s ease-in-out infinite;
}

.legal-shape-2 {
    width: 300px;
    height: 300px;
    bottom: -50px;
    left: 10%;
    animation: floatShape 15s ease-in-out infinite reverse;
}

.legal-shape-3 {
    width: 200px;
    height: 200px;
    top: 50%;
    right: 20%;
    animation: floatShape 18s ease-in-out infinite 3s;
}

@keyframes floatShape {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -30px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.95);
    }
}

.legal-meta-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

/* Premium TOC Card - Sticky Container */
.legal-toc-sticky {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 150px);
    /* 100px top + 50px bottom margin */
    display: flex;
    flex-direction: column;
}

/* Premium TOC Card */
.legal-toc-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.legal-toc-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-dark);
    flex-shrink: 0;
}

.legal-toc-header svg {
    color: var(--color-primary);
}

.legal-toc-nav {
    padding: 1rem 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    /* Important for flex scroll */
}

/* Custom scrollbar for TOC nav */
.legal-toc-nav::-webkit-scrollbar {
    width: 6px;
}

.legal-toc-nav::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.legal-toc-nav::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.legal-toc-nav::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.legal-toc-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.5rem;
    text-decoration: none;
    color: #64748b;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.legal-toc-link:hover,
.legal-toc-link.active {
    background: rgba(var(--color-primary-rgb), 0.05);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

.toc-number {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    color: #94a3b8;
    min-width: 20px;
}

.legal-toc-link:hover .toc-number,
.legal-toc-link.active .toc-number {
    color: var(--color-primary);
}

.toc-text {
    flex: 1;
}

.legal-toc-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: #fafafa;
    flex-shrink: 0;
}

/* Premium TOC Footer Button */
.btn-toc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-lighter) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.btn-toc-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-toc-cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.btn-toc-cta:hover::before {
    opacity: 1;
}

.btn-toc-cta svg,
.btn-toc-cta span {
    position: relative;
    z-index: 1;
}

.btn-toc-cta svg {
    transition: transform 0.3s ease;
}

.btn-toc-cta:hover svg {
    transform: scale(1.1);
}

/* Premium Legal Content */
.legal-content-premium {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.legal-section-premium {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.legal-section-premium:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.legal-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.legal-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--icon-color), 0.1), rgba(var(--icon-color), 0.05));
    color: var(--icon-color, var(--color-primary));
}

.legal-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.legal-section-body {
    padding: 2rem;
}

.legal-section-body p {
    color: #475569;
    line-height: 1.75;
    margin-bottom: 1rem;
}

.legal-section-body p:last-child {
    margin-bottom: 0;
}

.legal-subsection-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin: 1.75rem 0 0.75rem;
    padding-left: 1rem;
    border-left: 3px solid var(--color-primary);
}

/* Legal Lists */
.legal-list {
    margin: 1rem 0;
    padding-left: 0;
    list-style: none;
}

.legal-list li {
    position: relative;
    padding: 0.5rem 0 0.5rem 2rem;
    color: #475569;
    line-height: 1.6;
}

.legal-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.9rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), #f97316);
}

.legal-list-featured li {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    padding: 1rem 1rem 1rem 2.5rem;
    margin-bottom: 0.5rem;
}

.legal-list-featured li::before {
    left: 0.75rem;
    top: 1.35rem;
}

.legal-list-check li::before {
    content: '✓';
    width: auto;
    height: auto;
    background: none;
    color: #10B981;
    font-weight: 700;
    top: 0.5rem;
}

/* Legal Callouts */
.legal-callout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 12px;
    margin-top: 1.5rem;
}

.legal-callout-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.legal-callout-content {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.6;
}

.legal-callout-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.legal-callout-success .legal-callout-icon {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.legal-callout-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.legal-callout-info .legal-callout-icon {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.legal-callout-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.legal-callout-warning .legal-callout-icon {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

/* Legal Grid */
.legal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1rem 0;
}

.legal-grid-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.legal-grid-item strong {
    font-size: 0.9rem;
    color: var(--color-dark);
}

.legal-grid-item span {
    font-size: 0.8rem;
    color: #64748b;
}

/* Legal Rights Grid */
.legal-rights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1rem 0;
}

.legal-right-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.legal-right-item:hover {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05), #fff);
    border-color: rgba(var(--color-primary-rgb), 0.2);
    transform: translateY(-2px);
}

.legal-right-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1), rgba(var(--color-primary-rgb), 0.05));
    border-radius: 8px;
    color: var(--color-primary);
}

.legal-right-item>div:last-child {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.legal-right-item strong {
    font-size: 0.9rem;
    color: var(--color-dark);
}

.legal-right-item span {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

/* Legal Contact Card */
.legal-contact-card {
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 1rem;
}

.legal-contact-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary), #f97316);
    color: #fff;
}

.legal-contact-header svg {
    color: #fff;
}

.legal-contact-body {
    display: grid;
    gap: 0;
}

.legal-contact-item {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: var(--color-dark);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.legal-contact-item:last-child {
    border-bottom: none;
}

.legal-contact-item:hover {
    background: rgba(var(--color-primary-rgb), 0.05);
}

.legal-contact-item svg {
    color: var(--color-primary);
}

.legal-contact-item span {
    font-weight: 500;
}

.legal-contact-item small {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Legal Consent Notice */
.legal-consent-notice {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-lg);
    margin-top: 1rem;
}

.legal-consent-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 12px;
    color: #10B981;
}

.legal-consent-content {
    flex: 1;
    font-size: 0.95rem;
    color: #065f46;
    line-height: 1.5;
}

/* Warning soft badge */
.bg-warning-soft {
    background: rgba(245, 158, 11, 0.1) !important;
}

.text-warning {
    color: #d97706 !important;
}

/* Responsive Legal Pages */
@media (max-width: 991.98px) {
    .legal-hero-section {
        min-height: auto;
        padding: calc(var(--navbar-height) + 2rem) 0 3rem;
    }

    .legal-hero-section h1 {
        font-size: 2.5rem;
    }

    .legal-rights-grid,
    .legal-grid {
        grid-template-columns: 1fr;
    }

    .legal-section-header {
        padding: 1.25rem 1.5rem;
    }

    .legal-section-body {
        padding: 1.5rem;
    }

    /* TOC becomes non-sticky on tablet/mobile */
    .legal-toc-sticky {
        position: relative;
        top: auto;
        max-height: none;
    }

    .legal-toc-card {
        max-height: none;
    }

    .legal-toc-nav {
        overflow-y: visible;
        max-height: none;
    }
}

@media (max-width: 575.98px) {
    .legal-hero-section h1 {
        font-size: 2rem;
    }

    .legal-meta-item {
        font-size: 0.8rem;
    }

    .legal-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .legal-section-title {
        font-size: 1.1rem;
    }

    .legal-callout {
        flex-direction: column;
        text-align: center;
    }

    .legal-consent-notice {
        flex-direction: column;
        text-align: center;
    }

    /* TOC compact mobile styles */
    .legal-toc-header {
        padding: 1rem 1.25rem;
        font-size: 0.85rem;
    }

    .legal-toc-link {
        padding: 0.5rem 1.25rem;
        font-size: 0.8rem;
    }

    .legal-toc-footer {
        padding: 0.875rem 1.25rem;
    }

    .legal-toc-footer .btn-toc-cta {
        font-size: 0.8rem;
        padding: 0.625rem 0.875rem;
    }
}

/* ============================================
   COOKIE TABLE STYLES
   ============================================ */

.cookie-table-wrapper {
    overflow-x: auto;
    margin: 1.5rem 0;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.cookie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.cookie-table thead {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.cookie-table th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-dark);
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}

.cookie-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: #475569;
    vertical-align: middle;
}

.cookie-table tbody tr:hover {
    background: rgba(var(--color-primary-rgb), 0.03);
}

.cookie-table tbody tr:last-child td {
    border-bottom: none;
}

.cookie-table code {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85em;
    color: #e11d48;
}

/* Cookie Badges */
.cookie-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cookie-essential {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.cookie-analytics {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.cookie-functional {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

.cookie-marketing {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

@media (max-width: 767.98px) {

    .cookie-table th,
    .cookie-table td {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    .cookie-table th:first-child,
    .cookie-table td:first-child {
        min-width: 120px;
    }
}

/* ============================================
   PREMIUM CONTACT PAGE STYLES
   ============================================ */

/* Contact Hero Section */
.contact-hero-section {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-lighter) 100%);
    min-height: auto;
    display: flex;
    align-items: center;
    padding: calc(var(--navbar-height) + 2rem) 0 2.5rem;
}

.contact-hero-bg {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(99, 102, 241, 0.12) 0%, transparent 50%);
}

.min-vh-50 {
    min-height: auto;
}

/* Floating Elements */
.contact-floating-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.contact-float-1,
.contact-float-2,
.contact-float-3 {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(99, 102, 241, 0.08));
    filter: blur(60px);
}

.contact-float-1 {
    width: 400px;
    height: 400px;
    top: 10%;
    left: -10%;
    animation: floatContact 15s ease-in-out infinite;
}

.contact-float-2 {
    width: 300px;
    height: 300px;
    top: 60%;
    right: -5%;
    animation: floatContact 18s ease-in-out infinite reverse;
}

.contact-float-3 {
    width: 200px;
    height: 200px;
    top: 30%;
    right: 20%;
    animation: floatContact 12s ease-in-out infinite 2s;
}

@keyframes floatContact {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -30px) scale(1.05);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.95);
    }
}

/* Scroll Indicator */
.contact-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.6;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-mouse {
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    position: relative;
}

.scroll-wheel {
    width: 4px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 2s ease-in-out infinite;
}

@keyframes scrollBounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

@keyframes scrollWheel {

    0%,
    100% {
        opacity: 1;
        top: 8px;
    }

    50% {
        opacity: 0.3;
        top: 18px;
    }
}

/* Contact Method Cards */
.contact-method-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.contact-method-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    transform: scaleX(0);
    transition: transform 0.4s var(--ease-out-expo);
}

.contact-method-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.contact-method-card:hover::before {
    transform: scaleX(1);
}

.contact-method-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 107, 53, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    transition: all 0.4s var(--ease-out-expo);
}

.contact-method-icon.secondary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05));
    color: var(--color-secondary);
}

.contact-method-icon.accent {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    color: var(--color-accent);
}

.contact-method-card:hover .contact-method-icon {
    transform: scale(1.1);
}

.contact-method-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: var(--color-dark);
}

.contact-method-link {
    color: var(--color-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-method-link:hover {
    color: var(--color-primary);
}

.contact-method-text {
    color: var(--color-muted);
    font-size: 0.95rem;
}

.contact-method-badge {
    margin-top: auto;
}

/* Soft badge variants */
.bg-success-soft {
    background: rgba(16, 185, 129, 0.1) !important;
}

.text-success {
    color: #059669 !important;
}

.bg-accent-soft {
    background: rgba(16, 185, 129, 0.1) !important;
}

.text-accent {
    color: #10B981 !important;
}

/* Premium Contact Form */
.contact-form-premium {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.contact-form-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.contact-form-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.contact-form-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--color-dark);
}

.contact-form-subtitle {
    font-size: 0.95rem;
    color: var(--color-muted);
    margin-bottom: 0;
}

.contact-form-body {
    padding: 2rem 2.5rem 2.5rem;
}

/* Premium Form Labels - Base Styles (overridden by main styles below) */
/* Note: Main .form-floating-premium styles are defined later in the file */

/* Premium Checkbox */
.form-check-premium {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.form-check-premium .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0.15rem;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    flex-shrink: 0;
}

.form-check-premium .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-premium .form-check-label {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Submit Button Premium */
.btn-submit-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    font-size: 1.1rem;
}

.btn-submit-premium .btn-icon {
    transition: transform 0.3s var(--ease-out-expo);
}

.btn-submit-premium:hover .btn-icon {
    transform: translateX(5px) translateY(-3px);
}

/* Contact Sidebar */
.contact-sidebar-premium {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-card {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-lighter) 100%);
    border-radius: var(--radius-lg);
    padding: 2rem;
    color: #fff;
}

.contact-info-title {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #fff;
}

.contact-info-title svg {
    color: var(--color-primary);
}

.contact-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.contact-benefits-list li:last-child {
    border-bottom: none;
}

.benefit-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #10B981;
}

/* Social Connect Card */
.contact-social-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.contact-social-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}

.contact-social-desc {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 1.25rem;
}

.contact-social-links {
    display: flex;
    gap: 0.75rem;
}

.contact-social-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark);
    transition: all 0.3s ease;
}

.contact-social-btn:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-3px);
}

/* Premium FAQ */
.faq-premium {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item-premium {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item-premium:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.faq-question-premium {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question-premium:hover {
    background: #f8fafc;
}

.faq-question-premium:not(.collapsed) {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.faq-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 107, 53, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.faq-text {
    flex: 1;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-dark);
}

.faq-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    transition: transform 0.3s ease;
}

.faq-question-premium:not(.collapsed) .faq-toggle {
    transform: rotate(180deg);
}

.faq-answer-premium {
    padding: 0 1.5rem 1.5rem;
}

.faq-answer-premium p {
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* Contact CTA Section */
.contact-cta-section {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-lighter) 100%);
    padding: 5rem 0;
}

.contact-cta-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(99, 102, 241, 0.12) 0%, transparent 50%);
}

/* Responsive Contact Page */
@media (max-width: 991.98px) {
    .contact-hero-section {
        min-height: auto;
        padding: calc(var(--navbar-height) + 2rem) 0 5rem;
    }

    .contact-hero-section h1 {
        font-size: 2.5rem;
    }

    .contact-sidebar-premium {
        position: relative;
        top: auto;
    }

    .contact-form-header {
        padding: 1.5rem 1.75rem;
    }

    .contact-form-body {
        padding: 1.5rem 1.75rem 2rem;
    }
}

@media (max-width: 767.98px) {
    .contact-hero-section h1 {
        font-size: 2rem;
    }

    .contact-method-card {
        padding: 1.5rem;
    }

    .contact-form-header {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .contact-form-body {
        padding: 1.5rem;
    }

    .contact-form-title {
        font-size: 1.25rem;
    }

    .faq-question-premium {
        padding: 1rem 1.25rem;
    }

    .faq-icon {
        width: 36px;
        height: 36px;
    }

    .faq-text {
        font-size: 0.95rem;
    }

    .faq-answer-premium {
        padding: 0 1.25rem 1.25rem;
    }
}

@media (max-width: 575.98px) {

    .contact-float-1,
    .contact-float-2,
    .contact-float-3 {
        display: none;
    }

    .contact-scroll-indicator {
        display: none;
    }

    .contact-method-icon {
        width: 52px;
        height: 52px;
    }

    .contact-info-card {
        padding: 1.5rem;
    }

    .contact-social-card {
        padding: 1.5rem;
    }
}

/* ============================================
   PREMIUM ABOUT & CONTACT PAGE STYLES
   New Redesigned Components
   ============================================ */

/* =============================================
   ABOUT PAGE PREMIUM HERO
   ============================================= */
.about-hero-premium {
    position: relative;
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 50%, var(--color-dark-lighter) 100%);
    overflow: hidden;
    min-height: auto;
    padding: calc(var(--navbar-height) + 2rem) 0 3rem;
    display: flex;
    align-items: center;
}

.about-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse at 30% 20%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
    opacity: 1;
}

.about-hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.3) 100%);
}

.about-hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="0.8" fill="rgba(255,255,255,0.04)"/></svg>');
    background-size: 60px 60px;
}

.about-hero-content {
    position: relative;
    z-index: 2;
}

.min-vh-75 {
    min-height: auto;
}

/* About Page Animations */
.about-anim {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s var(--ease-out-expo);
}

.about-anim.animate {
    opacity: 1;
    transform: translateY(0);
}

.about-anim-1 {
    transition-delay: 0s;
}

.about-anim-2 {
    transition-delay: 0.1s;
}

.about-anim-3 {
    transition-delay: 0.2s;
}

.about-anim-4 {
    transition-delay: 0.3s;
}

.about-anim-5 {
    transition-delay: 0.4s;
}

/* About Stats Panel */
.about-stats-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
}

.about-stats-header {
    background: rgba(255, 255, 255, 0.02);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.about-stats-badge {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.about-stats-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.3s var(--ease-out-expo);
}

.about-stat-card:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateX(5px);
}

.about-stat-card-featured {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%);
    border-color: rgba(255, 107, 53, 0.2);
}

.about-stat-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(255, 107, 53, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.about-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-stat-icon-blue {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%);
    color: #818CF8;
}

.about-stat-icon-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%);
    color: #A855F7;
}

.about-stat-icon-orange {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(255, 107, 53, 0.1) 100%);
    color: var(--color-primary);
}

.about-stat-content {
    flex: 1;
}

.about-stat-number {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: white;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.about-stat-number-orange {
    color: var(--color-primary);
}

.about-stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* =============================================
   STORY SECTION PREMIUM
   ============================================= */
.story-section-premium {
    background: white;
}

/* Timeline Premium */
.timeline-premium {
    position: relative;
    padding-left: 60px;
}

.timeline-premium::before {
    content: '';
    position: absolute;
    left: 32px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-primary), rgba(255, 107, 53, 0.2), transparent);
}

.timeline-item-premium {
    position: relative;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s var(--ease-out-expo);
}

.timeline-item-premium:nth-child(even) {
    transform: translateX(30px);
}

.timeline-item-premium.timeline-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger animation delay */
.timeline-item-premium:nth-child(1) {
    transition-delay: 0s;
}

.timeline-item-premium:nth-child(2) {
    transition-delay: 0.1s;
}

.timeline-item-premium:nth-child(3) {
    transition-delay: 0.2s;
}

.timeline-item-premium:nth-child(4) {
    transition-delay: 0.3s;
}

.timeline-item-premium:nth-child(5) {
    transition-delay: 0.4s;
}

.timeline-item-premium:last-child {
    margin-bottom: 0;
}

.timeline-item-last .timeline-premium::before {
    bottom: 50%;
}

.timeline-marker-premium {
    position: absolute;
    left: -60px;
    top: 0;
    width: 64px;
    height: 64px;
    background: white;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.2);
}

.timeline-marker-glow {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-color: var(--color-primary);
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.4);
}

.timeline-marker-glow .timeline-year {
    color: white;
}

.timeline-year {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-primary);
}

.timeline-content-premium {
    padding-left: 1.5rem;
}

.timeline-card-premium {
    background: var(--color-light);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s var(--ease-out-expo);
    position: relative;
}

.timeline-item-premium:hover .timeline-card-premium {
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
}

.timeline-card-featured {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.05) 0%, rgba(255, 107, 53, 0.02) 100%);
    border-color: rgba(255, 107, 53, 0.2);
}

.timeline-icon-wrapper {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 1rem;
}

.timeline-icon-purple {
    background: linear-gradient(135deg, #A855F7, #9333EA);
}

.timeline-icon-cyan {
    background: linear-gradient(135deg, #22D3EE, #06B6D4);
}

.timeline-icon-orange {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
}

.timeline-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--color-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =============================================
   VALUES SECTION PREMIUM - Enhanced Design
   ============================================= */
.values-section-premium {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    position: relative;
}

.values-section-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse 60% 40% at 10% 20%, rgba(255, 107, 53, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 90% 80%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.value-card-premium {
    background: white;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s var(--ease-out-expo);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.value-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease-out-expo);
}

.value-card-premium:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.value-card-premium:hover::before {
    transform: scaleX(1);
}

/* Individual card accent colors on hover */
.value-card-premium:nth-child(1):hover {
    border-color: rgba(255, 107, 53, 0.3);
}

.value-card-premium:nth-child(2):hover {
    border-color: rgba(99, 102, 241, 0.3);
}

.value-card-premium:nth-child(3):hover {
    border-color: rgba(168, 85, 247, 0.3);
}

.value-card-premium:nth-child(4):hover {
    border-color: rgba(6, 182, 212, 0.3);
}

.value-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease-out-expo);
}

.value-card-premium:hover .value-card-accent {
    transform: scaleX(1);
}

.value-accent-orange {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
}

.value-accent-blue {
    background: linear-gradient(90deg, #6366F1, #818CF8);
}

.value-accent-purple {
    background: linear-gradient(90deg, #A855F7, #C084FC);
}

.value-accent-cyan {
    background: linear-gradient(90deg, #06B6D4, #22D3EE);
}

.value-card-body {
    padding: 2.5rem 2rem;
}

.value-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
    transition: all 0.5s var(--ease-out-expo);
    position: relative;
}

.value-icon-wrapper::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 24px;
    background: inherit;
    opacity: 0.3;
    filter: blur(10px);
    z-index: -1;
    transition: all 0.5s var(--ease-out-expo);
}

.value-card-premium:hover .value-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

.value-card-premium:hover .value-icon-wrapper::after {
    opacity: 0.5;
    filter: blur(15px);
}

.value-icon-orange {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(255, 107, 53, 0.1) 100%);
    color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.2);
}

.value-icon-blue {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%);
    color: #6366F1;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

.value-icon-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%);
    color: #A855F7;
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.15);
}

.value-icon-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.08) 100%);
    color: #06B6D4;
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.15);
}

/* =============================================
   TEAM SECTION PREMIUM - Enhanced Design
   ============================================= */
.team-section-premium {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
}

.team-section-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse 40% 30% at 80% 0%, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 20% 100%, rgba(255, 107, 53, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

.team-card-premium {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.5s var(--ease-out-expo);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    position: relative;
}

.team-card-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, transparent 0%, transparent 40%, rgba(255, 107, 53, 0.3) 50%, rgba(99, 102, 241, 0.3) 60%, transparent 70%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out-expo);
}

.team-card-premium:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
    border-color: transparent;
}

.team-card-premium:hover::before {
    opacity: 1;
}

.team-card-image {
    position: relative;
    padding: 2.5rem 2rem 1.5rem;
    display: flex;
    justify-content: center;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.5) 0%, transparent 100%);
}

.team-avatar-placeholder {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    border: 4px solid transparent;
    background-clip: padding-box;
    position: relative;
    transition: all 0.5s var(--ease-out-expo);
}

.team-avatar-placeholder::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    z-index: -1;
}

.team-avatar-placeholder::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: inherit;
    opacity: 0;
    filter: blur(15px);
    z-index: -2;
    transition: all 0.5s var(--ease-out-expo);
}

.team-avatar-purple::before {
    background: linear-gradient(135deg, #A855F7, #EC4899);
}

.team-avatar-cyan::before {
    background: linear-gradient(135deg, #06B6D4, #6366F1);
}

.team-avatar-pink::before {
    background: linear-gradient(135deg, #EC4899, #F43F5E);
}

.team-card-premium:hover .team-avatar-placeholder {
    transform: scale(1.05);
}

.team-card-premium:hover .team-avatar-placeholder::after {
    opacity: 0.4;
    filter: blur(20px);
}

/* Override for premium team cards - remove dark gradient */
.team-card-premium .team-card-overlay {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    transition: all 0.4s var(--ease-out-expo);
    inset: auto;
    background: none;
    padding: 0;
    display: block;
    align-items: initial;
}

.team-card-premium:hover .team-card-overlay {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.team-social-links {
    display: flex;
    gap: 0.5rem;
    background: white;
    padding: 0.5rem;
    border-radius: 100px;
    box-shadow: var(--shadow-md);
}

.team-social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-muted);
    transition: all 0.3s var(--ease-out-expo);
}

.team-social-link:hover {
    background: var(--color-primary);
    color: white;
}

.team-card-content {
    padding: 0 1.5rem 2rem;
    text-align: center;
}

.team-role {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* =============================================
   TEAM SECTION MODERN - Complete Redesign
   ============================================= */
.team-section-modern {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
    position: relative;
}

.team-section-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse 50% 30% at 10% 30%, rgba(255, 107, 53, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 25% at 90% 70%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

.team-member-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
}

.team-member-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.5) 0%, rgba(99, 102, 241, 0.5) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.team-member-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.team-member-card:hover::before {
    opacity: 1;
}

.team-member-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.team-member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.team-member-card:hover .team-member-image img {
    transform: scale(1.08);
}

.team-member-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            transparent 0%,
            transparent 40%,
            rgba(15, 23, 42, 0.7) 70%,
            rgba(15, 23, 42, 0.9) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1.5rem;
}

.team-member-card:hover .team-member-overlay {
    opacity: 1;
}

.team-member-socials {
    display: flex;
    gap: 0.75rem;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
}

.team-member-card:hover .team-member-socials {
    transform: translateY(0);
}

.team-member-socials a {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

.team-member-socials a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-4px);
}

.team-member-info {
    padding: 1.75rem;
    text-align: center;
    background: white;
    position: relative;
}

.team-member-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.team-member-role {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
}

.team-member-bio {
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin: 0;
}

/* Responsive Team Cards */
@media (max-width: 767.98px) {
    .team-member-card {
        max-width: 320px;
        margin: 0 auto;
    }

    .team-member-info {
        padding: 1.5rem;
    }
}

/* =============================================
   TECH STACK SECTION (Dark Background)
   ============================================= */
.bg-dark-gradient {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-lighter) 100%);
}

.tech-stack-section {
    position: relative;
    overflow: hidden;
}

.tech-stack-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="0.6" fill="rgba(255,255,255,0.02)"/></svg>');
    background-size: 50px 50px;
}

/* =============================================
   TECH STACK SECTION (Light Background)
   ============================================= */
.tech-stack-section-light {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.tech-stack-section-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(255, 107, 53, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
}

.tech-stack-section-light .tech-item {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.tech-stack-section-light .tech-item:hover {
    border-color: rgba(255, 107, 53, 0.2);
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.1);
}

.tech-stack-section-light .tech-item span {
    color: var(--color-dark);
}

/* =============================================
   PREMIUM SECTION BADGE
   ============================================= */
.badge-section {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border: 1px solid rgba(255, 107, 53, 0.2);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 100px;
    padding: 0.5rem 1.25rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.badge-section::before {
    content: '';
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: 50%;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* Badge on dark backgrounds */
.bg-dark .badge-section,
.bg-dark-gradient .badge-section,
[class*="hero"] .badge-section {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* =============================================
   CTA SECTION PREMIUM
   ============================================= */
.cta-section-premium {
    position: relative;
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 50%, var(--color-dark-lighter) 100%);
    overflow: hidden;
}

.cta-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse at 30% 50%, rgba(255, 107, 53, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(99, 102, 241, 0.08) 0%, transparent 40%);
}

.cta-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.cta-stat-item {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s var(--ease-out-expo);
}

.cta-stat-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-5px);
}

.cta-stat-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    background: rgba(255, 107, 53, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.cta-stat-number {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: white;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.cta-stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* =============================================
   CONTACT PAGE PREMIUM HERO
   ============================================= */
.contact-hero-premium {
    position: relative;
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 50%, var(--color-dark-lighter) 100%);
    overflow: hidden;
    min-height: auto;
    padding: calc(var(--navbar-height) + 2rem) 0 2.5rem;
    display: flex;
    align-items: center;
}

.contact-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse at 50% 30%, rgba(255, 107, 53, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 40%);
}

.contact-hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.4) 100%);
}

.contact-hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="0.8" fill="rgba(255,255,255,0.04)"/></svg>');
    background-size: 60px 60px;
}

.min-vh-50 {
    min-height: auto;
}

/* Contact Page Animations */
.contact-anim {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s var(--ease-out-expo);
}

.contact-anim.animate {
    opacity: 1;
    transform: translateY(0);
}

.contact-anim-1 {
    transition-delay: 0s;
}

.contact-anim-2 {
    transition-delay: 0.1s;
}

.contact-anim-3 {
    transition-delay: 0.2s;
}

/* =============================================
   CONTACT METHODS SECTION
   ============================================= */
.contact-methods-section {
    margin-top: -60px;
    padding-bottom: 3rem;
    position: relative;
    z-index: 10;
}

.contact-method-premium {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    transition: all 0.3s var(--ease-out-expo);
}

.contact-method-premium:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.contact-method-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%);
    color: var(--color-primary);
    flex-shrink: 0;
}

.contact-method-secondary .contact-method-icon-wrapper {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
    color: #6366F1;
}

.contact-method-accent .contact-method-icon-wrapper {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: #10B981;
}

.contact-method-body {
    flex: 1;
}

.contact-method-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--color-dark);
}

.contact-method-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.contact-method-link:hover {
    color: var(--color-primary-dark);
}

.contact-method-text {
    color: var(--color-muted);
    font-size: 0.95rem;
}

.contact-method-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.badge-primary {
    background: rgba(255, 107, 53, 0.1);
    color: var(--color-primary);
}

.badge-accent {
    background: rgba(99, 102, 241, 0.1);
    color: #6366F1;
}

/* =============================================
   CONTACT FORM CARD - PREMIUM REDESIGN
   ============================================= */
.contact-form-card {
    background: linear-gradient(180deg, white 0%, rgba(248, 250, 252, 0.5) 100%);
    border-radius: 28px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.03),
        0 12px 48px rgba(0, 0, 0, 0.05),
        0 24px 80px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
}

.contact-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary));
    background-size: 200% 100%;
    animation: gradientShift 4s ease infinite;
}

.contact-form-header {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.04) 0%, rgba(99, 102, 241, 0.03) 100%);
    padding: 2rem 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

.contact-form-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 2.5rem;
    right: 2.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.2), transparent);
}

.contact-form-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3);
    flex-shrink: 0;
}

.contact-form-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--color-dark);
}

.contact-form-subtitle {
    font-size: 0.95rem;
    color: var(--color-muted);
    margin: 0;
}

.contact-form-body {
    padding: 2.5rem;
}

/* Premium Form Controls */
.form-group-premium {
    margin-bottom: 0;
    position: relative;
}

.form-label-premium {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 0.625rem;
    letter-spacing: -0.01em;
}

.form-control-premium,
.form-select-premium {
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    border: 2px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.5);
    transition: all 0.3s var(--ease-out-expo);
    color: var(--color-dark);
}

.form-control-premium:hover,
.form-select-premium:hover {
    border-color: rgba(0, 0, 0, 0.1);
    background: white;
}

.form-control-premium:focus,
.form-select-premium:focus {
    outline: none;
    border-color: var(--color-primary);
    background: white;
    box-shadow:
        0 0 0 4px rgba(255, 107, 53, 0.08),
        0 4px 12px rgba(255, 107, 53, 0.06);
}

.form-control-premium::placeholder {
    color: #94a3b8;
}

textarea.form-control-premium {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

.form-select-premium {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    padding-right: 3rem;
    cursor: pointer;
}

.form-select-premium:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Custom Checkbox */
.form-check-premium {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(248, 250, 252, 0.5);
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.form-check-premium:hover {
    background: rgba(255, 107, 53, 0.03);
    border-color: rgba(255, 107, 53, 0.1);
}

.form-check-input-premium {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    appearance: none;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0;
    position: relative;
}

.form-check-input-premium:hover {
    border-color: var(--color-primary);
}

.form-check-input-premium:checked {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.form-check-label-premium {
    font-size: 0.9rem;
    color: var(--color-muted);
    cursor: pointer;
    line-height: 1.5;
}

/* Premium Submit Button */
.btn-submit-glow {
    position: relative;
    overflow: hidden;
    padding: 1.125rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #ff8f5c 50%, var(--color-primary) 100%);
    background-size: 200% 100%;
    border: none;
    transition: all 0.4s var(--ease-out-expo);
    box-shadow:
        0 4px 16px rgba(255, 107, 53, 0.3),
        0 8px 32px rgba(255, 107, 53, 0.15);
}

.btn-submit-glow:hover {
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(255, 107, 53, 0.4),
        0 16px 48px rgba(255, 107, 53, 0.2);
}

.btn-submit-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s ease;
}

.btn-submit-glow:hover::before {
    left: 100%;
}

.btn-submit-glow .btn-text {
    position: relative;
    z-index: 1;
}

.btn-submit-glow svg {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.btn-submit-glow:hover svg {
    transform: translateX(4px) translateY(-2px);
}

/* Form Field Focus Ring Animation */
@keyframes focusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.2);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(255, 107, 53, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
    }
}

/* Responsive Contact Form */
@media (max-width: 767.98px) {
    .contact-form-header {
        padding: 1.5rem;
        flex-direction: column;
        text-align: center;
    }

    .contact-form-header::after {
        left: 1.5rem;
        right: 1.5rem;
    }

    .contact-form-body {
        padding: 1.5rem;
    }

    .contact-form-title {
        font-size: 1.25rem;
    }
}

/* =============================================
   MODERN FORM CONTROLS - Premium Design
   ============================================= */
.form-group-modern {
    position: relative;
    margin-bottom: 0.5rem;
}

/* Label Above Input */
.form-label-modern {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

/* Required Indicator */
.required-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Input & Select Base Styles */
.form-input-modern,
.form-select-modern {
    width: 100%;
    padding: 0.875rem 1.125rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-dark);
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    outline: none;
    transition: all 0.2s ease;
}

.form-input-modern::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.form-input-modern:hover,
.form-select-modern:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.form-input-modern:focus,
.form-select-modern:focus {
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 3px rgba(255, 107, 53, 0.12),
        0 2px 8px rgba(255, 107, 53, 0.08);
}

/* Hide the highlight bar - not needed with this design */
.form-input-highlight {
    display: none;
}

/* Textarea Specific */
.form-textarea-modern {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

/* Select Dropdown */
.form-select-modern {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 2.75rem;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 18px;
}

.form-select-modern:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ff6b35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.form-select-modern option {
    background: white;
    color: var(--color-dark);
    padding: 0.75rem;
}

/* Hide select label class - use regular label */
.form-label-select {
    /* No special styling needed */
}

/* Error State */
.form-group-modern.has-error .form-input-modern,
.form-group-modern.has-error .form-select-modern {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.form-group-modern.has-error .form-input-modern:focus,
.form-group-modern.has-error .form-select-modern:focus {
    box-shadow:
        0 0 0 3px rgba(239, 68, 68, 0.12),
        0 2px 8px rgba(239, 68, 68, 0.08);
}

.form-group-modern.has-error .form-label-modern {
    color: #dc2626;
}

.form-error-msg {
    display: none;
    font-size: 0.8rem;
    color: #dc2626;
    font-weight: 500;
    margin-top: 0.5rem;
    padding-left: 0.25rem;
}

.form-group-modern.has-error .form-error-msg {
    display: block;
}

/* Success State */
.form-group-modern.is-valid .form-input-modern,
.form-group-modern.is-valid .form-select-modern {
    border-color: #22c55e;
    background-color: #f0fdf4;
}

.form-group-modern.is-valid .form-input-modern:focus,
.form-group-modern.is-valid .form-select-modern:focus {
    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.12),
        0 2px 8px rgba(34, 197, 94, 0.08);
}

/* Modern Checkbox */
.form-checkbox-modern {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    cursor: pointer;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.2s ease;
    border: 1.5px solid #e2e8f0;
}

.form-checkbox-modern:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.form-checkbox-modern input {
    display: none;
}

.checkbox-custom {
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: white;
}

.checkbox-custom::after {
    content: '';
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0;
    transform: scale(0);
    transition: all 0.15s ease;
}

.form-checkbox-modern input:checked~.checkbox-custom {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.form-checkbox-modern input:checked~.checkbox-custom::after {
    opacity: 1;
    transform: scale(1);
}

.checkbox-label {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.4;
}

/* Modern Submit Button */
.btn-submit-modern {
    width: 100%;
    padding: 1.125rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, var(--color-primary) 0%, #ff8f5c 50%, var(--color-primary) 100%);
    background-size: 200% 100%;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 16px rgba(255, 107, 53, 0.3),
        0 8px 32px rgba(255, 107, 53, 0.15);
}

.btn-submit-modern:hover {
    background-position: 100% 0;
    transform: translateY(-3px);
    box-shadow:
        0 8px 24px rgba(255, 107, 53, 0.4),
        0 16px 48px rgba(255, 107, 53, 0.2);
}

.btn-submit-modern:active {
    transform: translateY(-1px);
}

.btn-submit-modern .btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.btn-submit-modern .btn-icon {
    transition: transform 0.3s ease;
}

.btn-submit-modern:hover .btn-icon {
    transform: translateX(4px) translateY(-2px);
}

.btn-submit-modern .btn-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
}

.btn-submit-modern.is-loading .btn-content {
    opacity: 0;
    visibility: hidden;
}

.btn-submit-modern.is-loading .btn-loader {
    opacity: 1;
    visibility: visible;
}

.btn-submit-modern .spinner {
    width: 24px;
    height: 24px;
    animation: rotate 1s linear infinite;
}

.btn-submit-modern .spinner circle {
    stroke: white;
    stroke-linecap: round;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Success Message */
.form-success-message {
    display: none;
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 2px solid #86efac;
    border-radius: 20px;
    margin-top: 1.5rem;
}

.form-success-message.show {
    display: block;
    animation: successPop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes successPop {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.success-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    box-shadow: 0 12px 32px rgba(34, 197, 94, 0.3);
}

.success-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #166534;
    margin-bottom: 0.75rem;
}

.success-text {
    font-size: 1rem;
    color: #475569;
    margin: 0 0 1.5rem 0;
    line-height: 1.7;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.btn-send-another {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #166534;
    background: white;
    border: 2px solid #86efac;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-send-another:hover {
    background: #166534;
    border-color: #166534;
    color: white;
}

/* Responsive Modern Form */
@media (max-width: 767.98px) {

    .form-input-modern,
    .form-select-modern {
        padding: 1.125rem 1rem 0.625rem;
    }

    .form-checkbox-modern {
        padding: 1rem;
    }
}

/* =============================================
   CONTACT SIDEBAR
   ============================================= */
.contact-info-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.contact-info-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.contact-info-header svg {
    width: 42px;
    height: 42px;
    padding: 10px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%);
    border-radius: 12px;
    color: var(--color-primary);
}

.contact-info-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.contact-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 0.95rem;
    color: var(--color-dark);
}

.contact-benefits-list li:last-child {
    border-bottom: none;
}

.benefit-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #10B981;
}

/* Social Card */
.contact-social-card {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-lighter) 100%);
    border-radius: 20px;
    padding: 2rem;
    color: white;
}

.contact-social-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.contact-social-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
}

.contact-social-grid {
    display: flex;
    gap: 0.75rem;
}

.social-link-premium {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s var(--ease-out-expo);
}

.social-link-premium:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transform: translateY(-4px);
}

/* =============================================
   FAQ SECTION PREMIUM
   ============================================= */
.faq-section-premium {
    background: var(--color-light);
}

/* Contact Page FAQ - Clean Minimal Style */
.faq-section-premium {
    background: #f8fafc;
}

.faq-section-premium .faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-section-premium .faq-item-premium {
    background: white;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    box-shadow: none;
}

.faq-section-premium .faq-item-premium:first-child {
    border-radius: 16px 16px 0 0;
}

.faq-section-premium .faq-item-premium:last-child {
    border-radius: 0 0 16px 16px;
    border-bottom: none;
}

.faq-section-premium .faq-item-premium:only-child {
    border-radius: 16px;
}

.faq-section-premium .faq-question-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.faq-section-premium .faq-question-btn:hover {
    background: #f9fafb;
}

.faq-section-premium .faq-icon-wrapper {
    display: none;
}

.faq-section-premium .faq-question-text {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.5;
}

.faq-section-premium .faq-toggle-icon {
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.faq-section-premium .faq-question-btn:not(.collapsed) .faq-toggle-icon {
    background: var(--color-primary);
    color: white;
    transform: rotate(180deg);
}

.faq-section-premium .faq-answer {
    border-top: none;
    background: transparent;
}

.faq-section-premium .faq-answer-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.faq-section-premium .faq-answer-body p {
    color: #6b7280;
    margin: 0;
    line-height: 1.7;
    font-size: 0.95rem;
}

/* FAQ wrapper card effect */
.faq-section-premium .faq-accordion {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* =============================================
   CONTACT CTA SECTION
   ============================================= */
.contact-cta-premium {
    position: relative;
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 50%, var(--color-dark-lighter) 100%);
    overflow: hidden;
}

.contact-cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse at 50% 50%, rgba(255, 107, 53, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(99, 102, 241, 0.06) 0%, transparent 40%);
}

/* =============================================
   RESPONSIVE ADJUSTMENTS
   ============================================= */
@media (max-width: 991.98px) {
    .about-hero-premium {
        min-height: auto;
        padding: 4rem 0;
    }

    .min-vh-75 {
        min-height: auto;
    }

    .timeline-premium {
        padding-left: 50px;
    }

    .timeline-marker-premium {
        width: 56px;
        height: 56px;
        left: -50px;
    }

    .contact-methods-section {
        margin-top: -40px;
    }
}

@media (max-width: 767.98px) {
    .about-stats-panel {
        display: none;
    }

    .timeline-premium {
        padding-left: 40px;
    }

    .timeline-premium::before {
        left: 22px;
    }

    .timeline-marker-premium {
        width: 44px;
        height: 44px;
        left: -40px;
    }

    .timeline-year {
        font-size: 0.7rem;
    }

    .timeline-content-premium {
        padding-left: 1rem;
    }

    .contact-method-premium {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .contact-method-badge {
        position: static;
        margin-top: 0.75rem;
    }

    .contact-form-header {
        flex-direction: column;
        text-align: center;
    }

    .contact-form-body {
        padding: 1.5rem;
    }

    .faq-answer-body {
        padding-left: 1.5rem;
    }

    .cta-stats-grid {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .value-card-body {
        padding: 1.5rem;
    }

    .value-icon-wrapper {
        width: 60px;
        height: 60px;
    }

    .team-card-content {
        padding: 0 1.25rem 1.5rem;
    }

    .team-avatar-placeholder {
        width: 100px;
        height: 100px;
    }
}

/* ============================================
   CAREERS PAGE PREMIUM STYLES
   ============================================ */

/* Careers Hero Section */
.careers-hero-premium {
    position: relative;
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 50%, var(--color-dark-lighter) 100%);
    overflow: hidden;
    min-height: auto;
    padding: calc(var(--navbar-height) + 2rem) 0 3rem;
    display: flex;
    align-items: center;
    z-index: 1;
}

.careers-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse at 30% 20%, rgba(255, 107, 53, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%);
}

.careers-hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.3) 100%);
}

.careers-hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="0.8" fill="rgba(255,255,255,0.04)"/></svg>');
    background-size: 60px 60px;
}

.min-vh-65 {
    min-height: 65vh;
}

/* Careers Animations */
.careers-anim {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s var(--ease-out-expo);
}

.careers-anim.animate {
    opacity: 1;
    transform: translateY(0);
}

.careers-anim-1 {
    transition-delay: 0s;
}

.careers-anim-2 {
    transition-delay: 0.1s;
}

.careers-anim-3 {
    transition-delay: 0.2s;
}

.careers-anim-4 {
    transition-delay: 0.3s;
}

.careers-anim-5 {
    transition-delay: 0.4s;
}

/* Pulsing Badge Dot */
.badge-dot-pulse {
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

/* Careers Stats Panel */
.careers-stats-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.careers-stats-header {
    background: rgba(255, 255, 255, 0.02);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.careers-stats-badge {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.careers-stats-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.careers-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.careers-stat-mini {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.3s var(--ease-out-expo);
}

.careers-stat-mini:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

.careers-stat-mini-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.careers-stat-icon-blue {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%);
    color: #818CF8;
}

.careers-stat-icon-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%);
    color: #A855F7;
}

.careers-stat-icon-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.1) 100%);
    color: #22D3EE;
}

.careers-stat-icon-orange {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(255, 107, 53, 0.1) 100%);
    color: var(--color-primary);
}

.careers-stat-mini-content {
    display: flex;
    flex-direction: column;
}

.careers-stat-mini-value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.careers-stat-mini-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Benefits Section */
.why-join-section {
    background: white;
    position: relative;
    z-index: 2;
}

.benefit-card-premium {
    background: var(--color-light);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s var(--ease-out-expo);
    height: 100%;
    position: relative;
    z-index: 1;
}

.benefit-card-premium:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    transform: translateY(-8px);
    z-index: 2;
}

.benefit-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.benefit-icon-orange {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 107, 53, 0.08) 100%);
    color: var(--color-primary);
}

.benefit-icon-blue {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%);
    color: #6366F1;
}

.benefit-icon-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%);
    color: #A855F7;
}

.benefit-icon-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.08) 100%);
    color: #06B6D4;
}

.benefit-icon-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    color: #10B981;
}

.benefit-icon-pink {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(236, 72, 153, 0.08) 100%);
    color: #EC4899;
}

/* Position Filters */
.position-filters {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.position-filter-btn {
    padding: 0.625rem 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    background: white;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}

.position-filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.position-filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Positions Section */
.positions-section {
    position: relative;
    z-index: 2;
}

/* Position Cards Grid */
.positions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

.position-card-premium {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-sm);
    transition: all 0.4s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.position-card-premium:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.position-card-premium.fade-in {
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.position-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.position-icon-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.position-icon-orange {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 107, 53, 0.08) 100%);
    color: var(--color-primary);
}

.position-icon-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%);
    color: #A855F7;
}

.position-icon-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.08) 100%);
    color: #06B6D4;
}

.position-icon-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    color: #10B981;
}

.position-icon-blue {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%);
    color: #6366F1;
}

.position-icon-pink {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(236, 72, 153, 0.08) 100%);
    color: #EC4899;
}

.position-meta {
    display: flex;
    gap: 0.5rem;
}

.position-type,
.position-location {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    background: var(--color-light);
    color: var(--color-muted);
}

.position-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.position-description {
    font-size: 0.95rem;
    color: var(--color-muted);
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.position-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.position-tag {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    background: rgba(255, 107, 53, 0.08);
    color: var(--color-primary);
}

/* Hiring Process Section */
.hiring-process-section {
    background: white;
    position: relative;
    z-index: 2;
}

.hiring-process-section .row {
    margin-top: 1.5rem;
}

.process-step-card {
    background: var(--color-light);
    border-radius: 20px;
    padding: 2rem;
    padding-top: 2.5rem;
    text-align: center;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s var(--ease-out-expo);
    margin-top: 16px;
}

.process-step-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.process-step-number {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.process-step-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem auto 1.25rem;
}

.process-icon-orange {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 107, 53, 0.08) 100%);
    color: var(--color-primary);
}

.process-icon-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%);
    color: #A855F7;
}

.process-icon-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.08) 100%);
    color: #06B6D4;
}

.process-icon-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    color: #10B981;
}

/* Careers CTA Section */
.careers-cta-premium {
    position: relative;
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 50%, var(--color-dark-lighter) 100%);
    overflow: hidden;
    z-index: 2;
}

.careers-cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse at 50% 50%, rgba(255, 107, 53, 0.1) 0%, transparent 60%);
}

/* ============================================
   CAREERS APPLICATION FORM STYLES
   ============================================ */

.application-form-section {
    background: var(--color-light);
    position: relative;
    z-index: 2;
}

.application-form-wrapper {
    background: white;
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Form Progress Steps */
.form-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 500px;
    margin: 0 auto;
}

.form-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.form-progress-step .step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-light);
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-muted);
    transition: all 0.4s var(--ease-out-expo);
}

.form-progress-step .step-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    transition: all 0.3s ease;
}

.form-progress-step.active .step-number {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.35);
}

.form-progress-step.active .step-label {
    color: var(--color-primary);
}

.form-progress-step.completed .step-number {
    background: #10B981;
    border-color: #10B981;
    color: white;
}

.form-progress-step.completed .step-number::after {
    content: '';
    width: 10px;
    height: 6px;
    border: 2px solid white;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
    position: absolute;
}

.form-progress-step.completed .step-label {
    color: #10B981;
}

.form-progress-line {
    flex: 1;
    height: 3px;
    background: #e2e8f0;
    max-width: 80px;
    transition: all 0.4s ease;
}

.form-progress-line.completed {
    background: #10B981;
}

/* Form Steps */
.form-step {
    display: none;
    animation: fadeInStep 0.4s ease;
}

.form-step.active {
    display: block;
}

@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.form-step-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    color: var(--color-dark);
}

.form-step-title .step-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.12) 0%, rgba(255, 107, 53, 0.06) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

/* Premium Form Labels Above - Modern Style */
.form-floating-premium {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 0;
}

/* Label displayed ABOVE the input */
.form-floating-premium label {
    order: -1;
    position: static;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    pointer-events: auto;
}

.form-floating-premium label .text-danger {
    color: #EF4444;
}

/* Input/Select wrapper for icon positioning */
.form-floating-premium {
    --input-padding-left: 3rem;
}

.form-floating-premium .form-control,
.form-floating-premium .form-select {
    height: 56px;
    padding: 1rem 1rem 1rem var(--input-padding-left);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    background: #ffffff;
    transition: all 0.3s ease;
    order: 0;
}

/* Hide placeholder since we have visible labels */
.form-floating-premium .form-control::placeholder {
    color: transparent;
}

.form-floating-premium .form-control:focus,
.form-floating-premium .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);
    outline: none;
}

.form-floating-premium .form-control.is-valid,
.form-floating-premium .form-select.is-valid {
    border-color: #10B981;
    background-image: none;
}

.form-floating-premium .form-control.is-invalid,
.form-floating-premium .form-select.is-invalid {
    border-color: #EF4444;
    background-image: none;
}

/* Input icon - positioned inside the input, vertically centered */
.form-floating-premium .input-icon {
    position: absolute;
    left: 1rem;
    /* Position from top: label height (font + margin) + half input height */
    top: calc(0.875rem + 0.5rem + 28px);
    transform: translateY(-50%);
    color: #9CA3AF;
    transition: color 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.form-floating-premium .form-control:focus~.input-icon,
.form-floating-premium:focus-within .input-icon {
    color: var(--color-primary);
}

/* Select without icon needs less left padding */
.form-floating-premium .form-select {
    padding-left: 1rem;
    background-position: right 1rem center;
}

/* Textarea adjustments */
.form-floating-premium textarea.form-control {
    height: auto;
    min-height: 120px;
    padding: 1rem;
    resize: vertical;
}

/* Textarea with icon - position near top since textarea is taller */
.form-floating-premium:has(textarea) .input-icon {
    top: calc(0.875rem + 0.5rem + 1.25rem);
    transform: none;
}

.form-floating-premium .input-hint {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-top: 0.5rem;
    padding-left: 0.25rem;
    order: 2;
}

.form-floating-premium .char-counter {
    position: absolute;
    bottom: 0.75rem;
    right: 1rem;
    font-size: 0.75rem;
    color: var(--color-muted);
}

.form-floating-premium .invalid-feedback,
.form-floating-premium .valid-feedback {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    padding-left: 0.25rem;
    order: 3;
}

/* Skill Tags Display */
.skill-tags-display {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.skill-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%);
    border: 1px solid rgba(255, 107, 53, 0.2);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-primary);
    animation: popIn 0.3s var(--ease-out-back);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* File Upload Premium */
.file-upload-premium {
    position: relative;
    border: 2px dashed #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(248, 250, 252, 0.5);
}

.file-upload-premium:hover {
    border-color: var(--color-primary);
    background: rgba(255, 107, 53, 0.02);
}

.file-upload-premium.drag-over {
    border-color: var(--color-primary);
    background: rgba(255, 107, 53, 0.05);
    transform: scale(1.02);
}

.file-upload-premium.has-file {
    border-style: solid;
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.03);
}

.file-upload-premium .file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.file-upload-icon {
    color: var(--color-muted);
    transition: color 0.3s ease;
}

.file-upload-premium:hover .file-upload-icon {
    color: var(--color-primary);
}

.file-upload-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.file-upload-title {
    font-weight: 600;
    color: var(--color-dark);
}

.file-upload-hint {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.file-preview {
    margin-top: 1rem;
}

.file-preview .file-info {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.file-preview .file-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-dark);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-preview .file-remove {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--color-muted);
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

.file-preview .file-remove:hover {
    color: #EF4444;
}

/* Form Checkboxes Premium */
.form-check-premium {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--color-light);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.form-check-premium .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0.1rem;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.form-check-premium .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-premium .form-check-label {
    font-size: 0.9rem;
    color: var(--color-dark);
    cursor: pointer;
}

.form-check-premium .form-check-label a {
    color: var(--color-primary);
    font-weight: 500;
}

/* Form Step Actions */
.form-step-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.form-step-actions .btn-prev {
    margin-right: auto;
}

/* Submit Button States */
.btn-submit .spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Form Success State */
.form-success {
    text-align: center;
    padding: 3rem 2rem;
    animation: fadeInStep 0.5s ease;
}

.success-animation {
    margin-bottom: 2rem;
}

.checkmark {
    width: 80px;
    height: 80px;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #10B981;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #10B981;
    stroke-width: 3;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

/* Highlight field animation */
.highlight-field {
    animation: highlightPulse 1.5s ease;
}

@keyframes highlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(255, 107, 53, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
    }
}

.highlight-field .form-control,
.highlight-field .form-select {
    border-color: var(--color-primary) !important;
    animation: borderPulse 1.5s ease;
}

@keyframes borderPulse {

    0%,
    100% {
        border-color: #10B981;
    }

    50% {
        border-color: var(--color-primary);
    }
}

/* ============================================
   FAQ PAGE PREMIUM STYLES
   ============================================ */

/* FAQ Hero Section */
.faq-hero-premium {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 50%, var(--color-dark-lighter) 100%);
    padding: calc(var(--navbar-height) + 2rem) 0 2.5rem;
}

.faq-hero-bg {
    background-image:
        radial-gradient(ellipse at 50% 30%, rgba(255, 107, 53, 0.12) 0%, transparent 50%);
}

.faq-hero-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.faq-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
}

.faq-shape-1 {
    width: 300px;
    height: 300px;
    background: var(--color-primary);
    top: 10%;
    right: -50px;
    animation: float 6s ease-in-out infinite;
}

.faq-shape-2 {
    width: 200px;
    height: 200px;
    background: #6366F1;
    bottom: 20%;
    left: -50px;
    animation: float 8s ease-in-out infinite reverse;
}

.faq-shape-3 {
    width: 150px;
    height: 150px;
    background: #06B6D4;
    top: 40%;
    right: 20%;
    animation: float 7s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* FAQ Animations */
.faq-anim {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s var(--ease-out-expo);
}

.faq-anim.animate {
    opacity: 1;
    transform: translateY(0);
}

.faq-anim-1 {
    transition-delay: 0s;
}

.faq-anim-2 {
    transition-delay: 0.1s;
}

.faq-anim-3 {
    transition-delay: 0.2s;
}

.faq-anim-4 {
    transition-delay: 0.3s;
}

/* FAQ Search Box */
.faq-search-box {
    max-width: 500px;
}

.faq-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.faq-search-icon {
    position: absolute;
    left: 1.25rem;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

.faq-search-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.faq-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.faq-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
}

.faq-search-hint {
    position: absolute;
    right: 1rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* FAQ TOC Sidebar */
.faq-toc-sticky {
    position: sticky;
    top: 100px;
}

.faq-toc-card {
    background: white;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.faq-toc-header {
    background: var(--color-light);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-dark);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.faq-toc-header svg {
    color: var(--color-primary);
}

.faq-toc-nav {
    padding: 1rem 0;
}

.faq-toc-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.faq-toc-link:hover {
    background: var(--color-light);
    color: var(--color-dark);
}

.faq-toc-link.active {
    background: rgba(255, 107, 53, 0.05);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    font-weight: 600;
}

.toc-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toc-icon-orange {
    background: rgba(255, 107, 53, 0.1);
    color: var(--color-primary);
}

.toc-icon-blue {
    background: rgba(99, 102, 241, 0.1);
    color: #6366F1;
}

.toc-icon-purple {
    background: rgba(168, 85, 247, 0.1);
    color: #A855F7;
}

.toc-icon-cyan {
    background: rgba(6, 182, 212, 0.1);
    color: #06B6D4;
}

.toc-icon-green {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.toc-text {
    flex: 1;
}

.toc-count {
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-light);
    color: var(--color-muted);
    padding: 0.2rem 0.5rem;
    border-radius: 100px;
}

.faq-toc-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-toc-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-toc-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.25);
    color: white;
}

/* FAQ Category Section */
.faq-category-section {
    margin-bottom: 3rem;
}

.faq-category-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-light);
}

.faq-category-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-icon-orange {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 107, 53, 0.08) 100%);
    color: var(--color-primary);
}

.faq-icon-blue {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%);
    color: #6366F1;
}

.faq-icon-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%);
    color: #A855F7;
}

.faq-icon-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.08) 100%);
    color: #06B6D4;
}

.faq-icon-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    color: #10B981;
}

.faq-category-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.faq-category-desc {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin: 0;
}

/* FAQ Items */
.faq-items-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item-premium {
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s var(--ease-out-expo);
    box-shadow: var(--shadow-xs);
    position: relative;
}

.faq-item-premium:hover {
    box-shadow: var(--shadow-md);
}

.faq-item-premium.expanded {
    border-color: var(--color-primary);
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.1);
}

.faq-item-featured {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.03) 0%, rgba(255, 107, 53, 0.01) 100%);
    border-color: rgba(255, 107, 53, 0.15);
}

.faq-featured-badge {
    position: absolute;
    top: 0;
    right: 1.5rem;
    background: var(--color-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 0 0 8px 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.faq-question-btn-premium {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.faq-question-btn-premium:hover {
    background: rgba(0, 0, 0, 0.01);
}

.faq-q-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    flex-shrink: 0;
}

.faq-q-text {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
}

.faq-toggle {
    width: 36px;
    height: 36px;
    background: var(--color-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.faq-question-btn-premium:not(.collapsed) .faq-toggle {
    background: var(--color-primary);
    color: white;
    transform: rotate(180deg);
}

/* FAQ Answer */
.faq-answer-premium {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.faq-answer-body {
    padding: 1.5rem;
}

.faq-answer-body p {
    color: var(--color-dark);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.faq-answer-body p:last-child {
    margin-bottom: 0;
}

/* FAQ Lists */
.faq-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.faq-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}

.faq-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

.faq-list-check li::before {
    content: '✓';
    width: auto;
    height: auto;
    background: none;
    color: #10B981;
    font-weight: 700;
    top: 0;
}

/* FAQ Callout */
.faq-callout {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(255, 107, 53, 0.04) 100%);
    border-left: 4px solid var(--color-primary);
    padding: 1rem 1.25rem;
    border-radius: 0 12px 12px 0;
    margin-top: 1rem;
}

.faq-callout-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(168, 85, 247, 0.04) 100%);
    border-left-color: #A855F7;
}

.faq-callout-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
    border-left-color: #10B981;
}

/* FAQ Tech Grid */
.faq-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}

.faq-tech-item {
    background: var(--color-light);
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.faq-tech-item strong {
    font-size: 0.85rem;
    color: var(--color-dark);
}

.faq-tech-item span {
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* FAQ Comparison */
.faq-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
}

.faq-comparison-item {
    background: var(--color-light);
    padding: 1.25rem;
    border-radius: 14px;
}

.faq-comparison-item h5 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.faq-comparison-item ul {
    margin: 0;
    padding-left: 1.25rem;
}

.faq-comparison-item li {
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    color: var(--color-muted);
}

.faq-comparison-highlight {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.faq-comparison-highlight h5 {
    color: #A855F7;
}

/* FAQ Timeline Grid */
.faq-timeline-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}

.faq-timeline-item {
    background: var(--color-light);
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.faq-timeline-duration {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
}

.faq-timeline-type {
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* FAQ Process Steps */
.faq-process-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

.faq-process-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.faq-step-num {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.faq-process-step strong {
    display: block;
    color: var(--color-dark);
    margin-bottom: 0.25rem;
}

.faq-process-step p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* FAQ Packages Grid */
.faq-packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}

.faq-package-item {
    background: var(--color-light);
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.faq-package-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: 0.25rem;
}

.faq-package-value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-dark);
}

.faq-package-featured {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%);
    border: 1px solid rgba(255, 107, 53, 0.2);
}

.faq-package-featured .faq-package-value {
    color: var(--color-primary);
}

/* FAQ Pricing Grid */
.faq-pricing-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

.faq-pricing-item {
    background: var(--color-light);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-pricing-range {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-primary);
}

.faq-pricing-type {
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* FAQ CTA Section */
.faq-cta-premium {
    position: relative;
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 50%, var(--color-dark-lighter) 100%);
    overflow: hidden;
}

.faq-cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse at 50% 50%, rgba(255, 107, 53, 0.1) 0%, transparent 60%);
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .careers-hero-premium {
        min-height: auto;
        padding: 4rem 0;
    }

    .positions-grid {
        grid-template-columns: 1fr;
    }

    .faq-toc-sticky {
        position: static;
    }

    .faq-toc-card {
        margin-bottom: 2rem;
    }

    .faq-toc-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 1rem;
    }

    .faq-toc-link {
        flex: 1 1 auto;
        min-width: 120px;
        padding: 0.625rem 1rem;
        border-radius: 10px;
        border-left: none;
        justify-content: center;
        text-align: center;
        background: var(--color-light);
    }

    .faq-toc-link .toc-icon,
    .faq-toc-link .toc-count {
        display: none;
    }

    .faq-toc-link.active {
        background: var(--color-primary);
        color: white;
    }
}

@media (max-width: 767.98px) {
    .careers-stats-panel {
        display: none;
    }

    .faq-tech-grid,
    .faq-comparison,
    .faq-timeline-grid {
        grid-template-columns: 1fr;
    }

    .faq-packages-grid {
        grid-template-columns: 1fr;
    }

    .faq-answer-body {
        padding-left: 1.5rem;
    }

    .faq-pricing-item {
        flex-direction: column;
        text-align: center;
        gap: 0.25rem;
    }
}

@media (max-width: 575.98px) {
    .benefit-card-premium {
        padding: 1.5rem;
    }

    .position-card-premium {
        padding: 1.5rem;
    }

    .faq-question-btn-premium {
        padding: 1rem;
    }

    .faq-q-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* =============================================
   WHY PARTNER WITH US - PREMIUM CARD
   ============================================= */
.why-partner-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%);
    border-radius: 24px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.04),
        0 12px 48px rgba(0, 0, 0, 0.03);
}

.why-partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary));
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.why-partner-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.why-partner-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.25);
}

.why-partner-icon i {
    font-size: 1.75rem;
    color: white;
}

.why-partner-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 0.25rem 0;
}

.why-partner-subtitle {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin: 0;
}

/* Partner Stats Grid */
.why-partner-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.partner-stat {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.06) 0%, rgba(99, 102, 241, 0.04) 100%);
    border-radius: 16px;
    padding: 1.25rem;
    text-align: center;
    border: 1px solid rgba(255, 107, 53, 0.1);
    transition: all 0.3s var(--ease-out-expo);
}

.partner-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.12);
}

.partner-stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.partner-stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Partner Benefits List */
.why-partner-benefits {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.partner-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s var(--ease-out-expo);
}

.partner-benefit-item:hover {
    background: white;
    transform: translateX(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.benefit-icon-modern {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-icon-modern.icon-orange {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 107, 53, 0.08) 100%);
    color: var(--color-primary);
}

.benefit-icon-modern.icon-purple {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%);
    color: var(--color-secondary);
}

.benefit-icon-modern.icon-green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%);
    color: #22c55e;
}

.benefit-icon-modern i {
    font-size: 1.1rem;
}

.benefit-content h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 0.25rem 0;
}

.benefit-content p {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: 0;
    line-height: 1.5;
}

/* Social Connect Card */
.social-connect-card {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 100%);
    border-radius: 24px;
    padding: 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.social-connect-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(255, 107, 53, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(99, 102, 241, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

.social-connect-card h4 {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 167, 128, 0.85) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.social-connect-card p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.social-links-modern {
    display: flex;
    justify-content: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.social-link-modern {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.3rem;
    transition: all 0.3s var(--ease-out-expo);
    text-decoration: none;
}

.social-link-modern:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.social-link-modern.linkedin:hover {
    background: linear-gradient(135deg, #0077b5, #00a0dc);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(0, 119, 181, 0.4);
}

.social-link-modern.twitter:hover {
    background: linear-gradient(135deg, #1da1f2, #4dc1ff);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(29, 161, 242, 0.4);
}

.social-link-modern.instagram:hover {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(225, 48, 108, 0.4);
}

.social-link-modern.facebook:hover {
    background: linear-gradient(135deg, #1877f2, #42a5f5);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(24, 119, 242, 0.4);
}

.social-link-modern.github:hover {
    background: linear-gradient(135deg, #333, #555);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(51, 51, 51, 0.4);
}

/* Responsive Why Partner Section */
@media (max-width: 767.98px) {
    .why-partner-card {
        padding: 1.75rem;
    }

    .why-partner-header {
        flex-direction: column;
        text-align: center;
    }

    .why-partner-stats {
        grid-template-columns: 1fr;
    }

    .partner-benefit-item:hover {
        transform: translateX(4px);
    }

    .social-connect-card {
        padding: 1.75rem;
    }

    .social-links-modern {
        flex-wrap: wrap;
    }
}

/* ============================================
   BLOG PAGE - Premium Blog Styling
   ============================================ */

/* Featured Post Card */
.featured-post-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: all 0.4s var(--ease-out-expo);
}

.featured-post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.featured-post-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.featured-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 350px;
    transition: transform 0.6s var(--ease-out-expo);
}

.featured-post-card:hover .featured-post-image img {
    transform: scale(1.05);
}

.featured-badge {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.featured-post-content {
    padding: 2.5rem;
}

/* Blog Category Badges */
.blog-category {
    display: inline-block;
    width: fit-content;
    align-self: flex-start;
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-pill);
    margin-bottom: 0.75rem;
}

.blog-category-geo {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 143, 102, 0.15));
    color: var(--color-primary);
    border: 1px solid rgba(255, 107, 53, 0.2);
}

.blog-category-ecommerce {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.15));
    color: var(--color-accent);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.blog-category-seo {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.15));
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.blog-category-mobile {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(34, 211, 238, 0.15));
    color: #0891B2;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.blog-category-strategy {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(248, 113, 113, 0.15));
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.blog-category-dev {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(129, 140, 248, 0.15));
    color: var(--color-secondary);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Post Meta */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.post-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.post-meta-item i {
    color: var(--color-primary);
    font-size: 0.8rem;
}

/* Section Header Inline */
.section-header-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.section-header-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent);
    border-radius: 1px;
}

/* Blog Cards */
.blog-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s var(--ease-out-expo);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 107, 53, 0.15);
}

.blog-card-image {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.08);
}

.blog-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
}

.blog-card:hover .blog-card-overlay {
    opacity: 1;
}

.blog-card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.blog-card-title a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.3s var(--ease-out-expo);
}

.blog-card-title a:hover {
    color: var(--color-primary);
}

.blog-card-excerpt {
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.meta-divider {
    width: 4px;
    height: 4px;
    background: var(--color-muted);
    border-radius: 50%;
    opacity: 0.5;
}

/* Premium Pagination */
.pagination-premium {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination-premium .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 0.75rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    color: var(--color-dark);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s var(--ease-out-expo);
}

.pagination-premium .page-item .page-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.pagination-premium .page-item.active .page-link {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.pagination-premium .page-item.disabled .page-link {
    background: var(--color-light);
    color: var(--color-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Sidebar Cards */
.sidebar-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s var(--ease-out-expo);
}

.sidebar-card:hover {
    box-shadow: var(--shadow-md);
}

.sidebar-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

.sidebar-card-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: 1px;
}

/* Search Input Group */
.search-input-group {
    display: flex;
    gap: 0.5rem;
}

.search-input-group .form-control {
    border-radius: var(--radius-pill);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    transition: all 0.3s var(--ease-out-expo);
}

.search-input-group .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.search-input-group .btn {
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-pill);
}

/* Category List */
.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    margin-bottom: 0.5rem;
}

.category-list li:last-child {
    margin-bottom: 0;
}

.category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-dark);
    font-size: 0.9rem;
    transition: all 0.3s var(--ease-out-expo);
    background: rgba(0, 0, 0, 0.02);
}

.category-list a:hover {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.08), rgba(255, 143, 102, 0.05));
    color: var(--color-primary);
    transform: translateX(4px);
}

.category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.5rem;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    transition: all 0.3s var(--ease-out-expo);
}

.category-list a:hover .category-count {
    background: var(--color-primary);
    color: #fff;
}

/* Newsletter Sidebar Card */
.sidebar-card-newsletter {
    position: relative;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-lighter) 100%);
    border: none;
    overflow: hidden;
}

.sidebar-card-newsletter::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.15) 0%, transparent 60%);
    z-index: 0;
}

.sidebar-card-newsletter .sidebar-card-title {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
}

.sidebar-card-newsletter .sidebar-card-title::after {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
}

.newsletter-glow {
    position: absolute;
    bottom: -30%;
    left: -20%;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 60%);
    z-index: 0;
}

.newsletter-description {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.newsletter-input {
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.875rem 1.25rem;
    color: #fff;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
    color: #fff;
}

.sidebar-card-newsletter .btn-light {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-pill);
    font-weight: 600;
    transition: all 0.3s var(--ease-out-expo);
}

.sidebar-card-newsletter .btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}

.newsletter-note {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.75rem;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

/* Popular Posts List */
.popular-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.popular-posts-list li {
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.popular-posts-list li:first-child {
    padding-top: 0;
}

.popular-posts-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.popular-posts-list a {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-decoration: none;
    transition: all 0.3s var(--ease-out-expo);
}

.popular-posts-list a:hover {
    transform: translateX(4px);
}

.popular-post-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.4;
    transition: color 0.3s var(--ease-out-expo);
}

.popular-posts-list a:hover .popular-post-title {
    color: var(--color-primary);
}

.popular-post-views {
    font-size: 0.75rem;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.popular-post-views i {
    font-size: 0.7rem;
}

/* Blog Post Detail Page Styles */
.article-hero {
    position: relative;
    padding: calc(var(--navbar-height) + 3rem) 0 3rem;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-lighter) 100%);
    overflow: hidden;
}

.article-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 60%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 60%);
    z-index: 0;
}

.article-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 50%;
    height: 140%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
    z-index: 0;
}

.article-hero .container {
    position: relative;
    z-index: 1;
}

.article-author-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}

.article-author-avatar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.article-author-avatar img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.article-author-avatar .author-details {
    display: flex;
    flex-direction: column;
}

.article-author-avatar .author-name {
    font-weight: 600;
    color: #fff;
    font-size: 0.95rem;
}

.article-author-avatar .author-role {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.article-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.article-meta-item .meta-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.article-meta-item .meta-value {
    font-weight: 600;
    color: #fff;
    font-size: 0.9rem;
}

/* Featured Image */
.article-featured-image {
    margin-top: -4rem;
    margin-bottom: 3rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.article-featured-image img {
    width: 100%;
    height: auto;
}

/* Article Content */
.article-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-dark-lighter);
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255, 107, 53, 0.2);
}

.article-content h3 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--color-dark);
}

.article-content ul,
.article-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.article-content li {
    margin-bottom: 0.5rem;
}

.article-content blockquote {
    position: relative;
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.05), rgba(99, 102, 241, 0.03));
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--color-dark);
}

.article-content blockquote footer {
    font-style: normal;
    font-size: 0.9rem;
    color: var(--color-muted);
    font-weight: 600;
}

.article-content pre {
    background: var(--color-dark);
    color: #e2e8f0;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 1.5rem 0;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.6;
}

.article-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

.article-content pre code {
    background: none;
    padding: 0;
}

/* Author Bio Card */
.author-bio-card {
    background: linear-gradient(135deg, var(--color-light), var(--color-light-darker));
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-top: 3rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.author-bio-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: var(--shadow-md);
}

/* Share Buttons */
.share-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* Base Share Button Style */
.btn-share {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-pill);
    border: 1.5px solid;
    background: transparent;
    transition: all 0.3s var(--ease-out-expo);
}

.btn-share:hover {
    transform: translateY(-2px);
}

/* Twitter/X */
.btn-share-twitter {
    color: #000;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-share-twitter:hover {
    background: #000;
    border-color: #000;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* LinkedIn */
.btn-share-linkedin {
    color: #0A66C2;
    border-color: rgba(10, 102, 194, 0.3);
}

.btn-share-linkedin:hover {
    background: linear-gradient(135deg, #0A66C2, #0077B5);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px rgba(10, 102, 194, 0.35);
}

/* Facebook */
.btn-share-facebook {
    color: #1877F2;
    border-color: rgba(24, 119, 242, 0.3);
}

.btn-share-facebook:hover {
    background: linear-gradient(135deg, #1877F2, #42A5F5);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px rgba(24, 119, 242, 0.35);
}

/* Copy Link */
.btn-share-copy {
    color: var(--color-muted);
    border-color: rgba(148, 163, 184, 0.3);
}

.btn-share-copy:hover {
    background: linear-gradient(135deg, var(--color-dark), var(--color-dark-lighter));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
}

/* Table of Contents */
.toc-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.toc-link {
    display: block;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    color: var(--color-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.3s var(--ease-out-expo);
}

.toc-link:hover {
    background: rgba(255, 107, 53, 0.08);
    color: var(--color-primary);
    transform: translateX(4px);
}

.toc-link.active {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.12), rgba(255, 143, 102, 0.08));
    color: var(--color-primary);
    font-weight: 600;
    border-left: 3px solid var(--color-primary);
    padding-left: calc(0.875rem - 3px);
}

/* Sidebar CTA Icon Wrapper */
.cta-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 143, 102, 0.15));
    border-radius: 50%;
    border: 2px solid rgba(255, 107, 53, 0.2);
}

.cta-icon-wrapper i {
    font-size: 1.75rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Related Posts Cards */
.related-post-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s var(--ease-out-expo);
    height: 100%;
}

.related-post-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 107, 53, 0.15);
}

.related-post-card .card-img-top {
    height: 180px;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
}

.related-post-card:hover .card-img-top {
    transform: scale(1.05);
}

/* Blog Page Responsive */
@media (max-width: 991.98px) {
    .featured-post-image {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .featured-post-image img {
        min-height: 280px;
    }

    .featured-post-content {
        padding: 2rem;
    }

    .article-author-info {
        gap: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .featured-post-content {
        padding: 1.5rem;
    }

    .post-meta {
        gap: 0.75rem;
    }

    .post-meta-item {
        font-size: 0.8rem;
    }

    .blog-card-image {
        height: 180px;
    }

    .article-content {
        font-size: 1rem;
    }

    .article-content h2 {
        font-size: 1.5rem;
    }

    .article-content h3 {
        font-size: 1.2rem;
    }

    .share-buttons {
        flex-wrap: wrap;
    }
}

/* ============================================
   ENHANCED HERO ANIMATIONS
   ============================================ */

/* Base hero animation elements */
.hero-anim {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
    will-change: transform, opacity;
}

/* Staggered animation delays */
.hero-anim-1 {
    transition-delay: 0.1s;
}

.hero-anim-2 {
    transition-delay: 0.2s;
}

.hero-anim-3 {
    transition-delay: 0.3s;
}

.hero-anim-4 {
    transition-delay: 0.4s;
}

.hero-anim-5 {
    transition-delay: 0.5s;
}

.hero-anim-6 {
    transition-delay: 0.6s;
}

/* Activated animation state */
.hero-anim.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced staggered text animations with spring effects */
@keyframes heroTextSlideInUp {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

    70% {
        opacity: 1;
        transform: translateY(-5px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroTextFadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px) rotate(-2deg);
    }

    60% {
        opacity: 1;
        transform: translateX(5px) rotate(0.5deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0);
    }
}

@keyframes heroTextScaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
        filter: blur(8px);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05) translateY(-5px);
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

/* Advanced parallax-ready hero text animations */
.hero-anim-heading {
    animation: heroTextScaleIn 1s var(--ease-out-back) forwards;
    opacity: 0;
}

.hero-anim-subtext {
    animation: heroTextSlideInUp 0.9s var(--ease-out-expo) forwards;
    opacity: 0;
}

.hero-anim-badge {
    animation: heroTextFadeInLeft 0.7s var(--ease-spring) forwards;
    opacity: 0;
}

/* Enhanced gradient animations for hero text */
@keyframes heroGradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.hero-anim .text-gradient-orange,
.hero-anim .text-gradient-geo,
.hero-anim .text-gradient-cyan {
    background-size: 200% 200%;
    animation: heroGradientFlow 3s ease-in-out infinite;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Premium card animations for stats panel */
@keyframes statCardFloatIn {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    50% {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    }
}

.hero-anim .stats-panel-v2 {
    animation: statCardFloatIn 1.2s var(--ease-out-back) forwards;
    opacity: 0;
}

/* Enhanced button animations */
@keyframes premiumButtonSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
        filter: blur(4px);
    }

    60% {
        opacity: 0.8;
        transform: translateY(-3px) scale(1.02);
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.hero-anim .btn {
    animation: premiumButtonSlideIn 0.8s var(--ease-out-expo) forwards;
    opacity: 0;
}

/* Responsive adjustments for animations */
@media (max-width: 767.98px) {
    .hero-anim {
        transform: translateY(20px);
    }

    @keyframes heroTextScaleIn {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
        }

        70% {
            opacity: 1;
            transform: translateY(-3px) scale(1.01);
        }

        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}
/* ============================================
   SERVICES HUB PAGE
   Components: hero, framework cards, process strip, AI platform stack
   ============================================ */

/* --- Hero ------------------------------------------------ */
.services-hub-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #312e81 100%);
    color: #fff;
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin-top: calc(var(--navbar-height) * -1);
    padding-top: calc(var(--navbar-height) + 3rem);
}

.services-hub-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 400px at 0% 0%, rgba(255,107,53,0.18), transparent 60%),
        radial-gradient(700px 500px at 100% 100%, rgba(99,102,241,0.22), transparent 60%);
    pointer-events: none;
}

.services-hub-hero-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.services-hub-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    animation: services-hub-float 12s ease-in-out infinite;
}

.services-hub-shape-1 {
    width: 380px;
    height: 380px;
    top: -120px;
    left: -120px;
    background: linear-gradient(135deg, #FF6B35, #FF8F66);
}

.services-hub-shape-2 {
    width: 320px;
    height: 320px;
    bottom: -80px;
    right: 8%;
    background: linear-gradient(135deg, #6366F1, #818CF8);
    animation-delay: -4s;
}

.services-hub-shape-3 {
    width: 240px;
    height: 240px;
    top: 20%;
    right: -100px;
    background: linear-gradient(135deg, #10B981, #34D399);
    animation-delay: -8s;
    opacity: 0.28;
}

@keyframes services-hub-float {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(28px, -22px); }
}

.services-hub-hero .breadcrumb-dark .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.4);
}

.services-hub-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.services-hub-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    transition: transform 0.4s var(--ease-out-expo), background 0.4s var(--ease-out-expo);
}

.services-hub-stat:hover {
    transform: translateX(6px);
    background: rgba(255,255,255,0.07);
}

.services-hub-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.services-hub-stat-1 .services-hub-stat-icon { background: linear-gradient(135deg, #FF6B35, #FF8F66); }
.services-hub-stat-2 .services-hub-stat-icon { background: linear-gradient(135deg, #6366F1, #818CF8); }
.services-hub-stat-3 .services-hub-stat-icon { background: linear-gradient(135deg, #10B981, #34D399); }

.services-hub-stat-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.services-hub-stat-value {
    font-weight: 700;
    color: #fff;
    font-size: 1.05rem;
}

/* --- Framework cards (PLAN / BUILD / GET VISIBLE) ------- */
.framework-card {
    padding: 2rem;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(15,23,42,0.06);
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.framework-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.framework-card-plan::before    { background: linear-gradient(90deg, #6366F1, #818CF8); }
.framework-card-build::before   { background: linear-gradient(90deg, #FF6B35, #FF8F66); }
.framework-card-visible::before { background: linear-gradient(90deg, #10B981, #34D399); }

.framework-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.framework-card-header {
    margin-bottom: 1.25rem;
}

.framework-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    margin-bottom: 1rem;
}

.framework-badge i {
    font-size: 0.8rem;
}

.framework-badge-plan {
    background: rgba(99,102,241,0.1);
    color: #4f46e5;
}

.framework-badge-build {
    background: rgba(255,107,53,0.1);
    color: #c2410c;
}

.framework-badge-visible {
    background: rgba(16,185,129,0.1);
    color: #047857;
}

.framework-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--color-dark);
    letter-spacing: -0.02em;
}

.framework-card-desc {
    color: var(--color-muted);
    font-size: 0.95rem;
    margin-bottom: 0;
}

.framework-card-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    border-top: 1px solid rgba(15,23,42,0.06);
    padding-top: 1.25rem;
}

.framework-card-list li {
    margin-bottom: 0.6rem;
}

.framework-card-list li:last-child { margin-bottom: 0; }

.framework-card-list a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-dark);
    font-weight: 600;
    text-decoration: none;
    padding: 0.4rem 0;
    transition: color 0.3s var(--ease-out-expo), gap 0.3s var(--ease-out-expo);
}

.framework-card-list a i {
    color: var(--color-primary);
    font-size: 0.8rem;
    transition: transform 0.3s var(--ease-out-expo);
}

.framework-card-list a:hover {
    color: var(--color-primary);
    gap: 0.85rem;
}

.framework-card-list a:hover i { transform: translateX(3px); }

.framework-card-plan .framework-card-list a:hover    { color: #6366F1; }
.framework-card-plan .framework-card-list a:hover i  { color: #6366F1; }
.framework-card-visible .framework-card-list a:hover { color: #10B981; }
.framework-card-visible .framework-card-list a:hover i { color: #10B981; }

/* --- 5-step process strip -------------------------------- */
.services-process-row > [class*="col-"] {
    position: relative;
}

@media (min-width: 992px) {
    .services-process-row > [class*="col-"]:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 28px;
        right: -8px;
        width: 16px;
        height: 2px;
        background: linear-gradient(90deg, rgba(255,107,53,0.3), rgba(99,102,241,0.3));
        z-index: 1;
    }
}

.services-process-step {
    position: relative;
    padding: 1.5rem 1.25rem;
    text-align: center;
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid rgba(15,23,42,0.06);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
    height: 100%;
}

.services-process-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.services-process-num {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    font-size: 1.15rem;
    box-shadow: 0 8px 24px rgba(255,107,53,0.25);
}

/* --- AI platform stack (inside featured GEO card) -------- */
.ai-platform-stack {
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(255,107,53,0.05), rgba(99,102,241,0.05));
    border-radius: var(--radius-md);
    border: 1px solid rgba(15,23,42,0.06);
}

.ai-platform-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    justify-content: center;
}

.ai-platform-row img {
    width: 36px;
    height: 36px;
    padding: 6px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.3s var(--ease-out-expo);
}

.ai-platform-row img:hover { transform: translateY(-3px); }

.ai-platform-stat {
    text-align: center;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(15,23,42,0.08);
}

.ai-platform-stat-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.25rem;
}

.ai-platform-stat-label {
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* --- Small util reused on services hub ------------------- */
.bg-primary-soft { background-color: rgba(255,107,53,0.1); }
.bg-warning-soft { background-color: rgba(245,158,11,0.1); }

/* --- Responsive ----------------------------------------- */
@media (max-width: 991.98px) {
    .services-hub-hero { padding-top: calc(var(--navbar-height) + 2rem); padding-bottom: 3rem; }
    .services-hub-hero h1.display-2 { font-size: clamp(2rem, 7vw, 3rem); }
}

@media (max-width: 575.98px) {
    .framework-card { padding: 1.5rem; }
    .ai-platform-row img { width: 32px; height: 32px; }
}

/* ============================================
   SERVICES HUB — Featured GEO card
   ============================================ */
.geo-featured-card {
    position: relative;
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #312e81 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    opacity: 1 !important;          /* override .service-card opacity:0 */
    transform: none !important;
}

.geo-featured-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 300px at 0% 0%, rgba(255,107,53,0.18), transparent 60%),
        radial-gradient(500px 400px at 100% 100%, rgba(99,102,241,0.22), transparent 60%);
    z-index: 0;
    pointer-events: none;
}

.geo-featured-glow {
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-lg);
    padding: 1px;
    background: linear-gradient(135deg, #FF6B35, #6366F1, #10B981);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

.geo-featured-row { position: relative; z-index: 2; }

.geo-featured-number {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.9rem;
    color: #fff !important;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 !important;
}

.geo-featured-badge {
    background: rgba(239,68,68,0.18);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,0.35);
    padding: 0.45rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
}

.geo-featured-badge-new {
    background: linear-gradient(135deg, rgba(255,107,53,0.25), rgba(99,102,241,0.25));
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0.45rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
}

.geo-featured-card h3,
.geo-featured-card .display-6 { color: #fff; }
.geo-featured-card .text-muted { color: rgba(255,255,255,0.7) !important; }

.geo-feature-bullet {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 0.85rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    transition: background 0.3s var(--ease-out-expo);
}

.geo-feature-bullet:hover { background: rgba(255,255,255,0.07); }

.geo-feature-bullet i {
    color: #FF8F66;
    font-size: 1.05rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.geo-feature-bullet strong {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.geo-feature-bullet span {
    display: block;
    color: rgba(255,255,255,0.65);
    font-size: 0.85rem;
    line-height: 1.4;
}

.btn-glass-dark {
    background: rgba(255,255,255,0.08);
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.18);
}

.btn-glass-dark:hover {
    background: rgba(255,255,255,0.14);
    color: #fff !important;
}

/* --- Featured GEO right-side visual ---------- */
.geo-featured-visual {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

.geo-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.geo-platform-tile {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    padding: 0.85rem 0.5rem;
    text-align: center;
    transition: transform 0.3s var(--ease-out-expo), background 0.3s var(--ease-out-expo);
}

.geo-platform-tile:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.1);
}

.geo-platform-tile img {
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto 0.4rem;
    filter: brightness(0) invert(1);
}

.geo-platform-tile span {
    display: block;
    color: rgba(255,255,255,0.85);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.geo-featured-stat-card {
    background: linear-gradient(135deg, rgba(255,107,53,0.15), rgba(99,102,241,0.15));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    text-align: center;
}

.geo-featured-stat-number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.3rem;
}

.geo-featured-stat-label {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.geo-featured-stat-sub {
    color: rgba(255,255,255,0.55);
    font-size: 0.78rem;
}

@media (max-width: 991.98px) {
    .geo-featured-card { padding: 1.75rem; }
    .geo-featured-card h3.display-6 { font-size: clamp(1.5rem, 5vw, 2rem); }
    .geo-platform-tile img { width: 26px; height: 26px; }
}

@media (max-width: 575.98px) {
    .geo-featured-card { padding: 1.5rem; }
    .geo-platform-grid { gap: 0.5rem; }
    .geo-platform-tile { padding: 0.65rem 0.4rem; }
}

/* ============================================
   SHARED SERVICE-PAGE COMPONENTS
   (timeline, architecture cards, case spotlight, why-list, accordion)
   ============================================ */

/* --- Stack-label inside .svc-glass-card -------- */
.svc-stack-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(226,232,240,0.55);
    margin-bottom: 1rem;
}

/* --- Architecture principle card ------------ */
.arch-principle-card {
    padding: 1.75rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
    height: 100%;
}

.arch-principle-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.arch-principle-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.arch-icon-blue   { background: linear-gradient(135deg, #6366F1, #818CF8); }
.arch-icon-orange { background: linear-gradient(135deg, #FF6B35, #FF8F66); }
.arch-icon-green  { background: linear-gradient(135deg, #10B981, #34D399); }
.arch-icon-purple { background: linear-gradient(135deg, #818CF8, #6366F1); }

/* --- Service timeline (vertical, with markers) -- */
.svc-timeline {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding-left: 0;
}

.svc-timeline::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(180deg, #FF6B35 0%, #6366F1 100%);
    opacity: 0.25;
    z-index: 0;
}

.svc-timeline-item {
    position: relative;
    display: flex;
    gap: 1.5rem;
    padding: 0.5rem 0 2rem;
    align-items: flex-start;
}

.svc-timeline-item:last-child { padding-bottom: 0; }

.svc-timeline-marker {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    box-shadow: 0 8px 22px rgba(255,107,53,0.25);
    z-index: 1;
}

.svc-timeline-content {
    flex: 1;
    padding-top: 0.5rem;
}

.svc-timeline-deliverables {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* --- Case study spotlight (preview card) -------- */
.case-spotlight {
    background: linear-gradient(135deg, #fafbff 0%, #ffffff 60%);
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.case-spotlight-text {
    padding: 2.5rem;
}

.case-spotlight-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(255,107,53,0.08);
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-pill);
    margin-bottom: 1.25rem;
}

.case-spotlight-stat {
    padding: 0.85rem 1rem;
    background: rgba(99,102,241,0.04);
    border: 1px solid rgba(99,102,241,0.1);
    border-radius: var(--radius-sm);
    height: 100%;
}

.case-spotlight-stat-num {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.case-spotlight-stat-label {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 0.2rem;
}

/* --- Case study mock dashboard (right side) ----- */
.case-spotlight-visual {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 2rem;
    display: flex;
    align-items: center;
}

.case-spotlight-mock {
    width: 100%;
    background: #fff;
    border-radius: var(--radius-md);
    padding: 1rem;
    box-shadow: 0 30px 60px rgba(15,23,42,0.4);
}

.case-mock-dots {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.case-mock-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.case-mock-dots span:nth-child(1) { background: #FF6B35; }
.case-mock-dots span:nth-child(2) { background: #F59E0B; }
.case-mock-dots span:nth-child(3) { background: #10B981; }

.case-mock-bar {
    height: 12px;
    background: linear-gradient(90deg, #6366F1 30%, rgba(99,102,241,0.2) 30%);
    border-radius: 6px;
    margin-bottom: 0.85rem;
}

.case-mock-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.case-mock-card {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 8px;
    aspect-ratio: 1;
    border: 1px solid #e2e8f0;
}

.case-mock-card-tall {
    grid-row: span 2;
    aspect-ratio: auto;
    background: linear-gradient(135deg, rgba(255,107,53,0.15), rgba(99,102,241,0.15));
    border-color: rgba(255,107,53,0.2);
}

.case-mock-card-wide {
    grid-column: span 2;
    aspect-ratio: 2/1;
    background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(99,102,241,0.12));
    border-color: rgba(16,185,129,0.2);
}

/* --- Why-list row (icon + text) ----------- */
.why-list-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.why-list-row:last-child { margin-bottom: 0; }

.why-list-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(99,102,241,0.1));
    color: var(--color-primary);
    display: grid;
    place-items: center;
    font-size: 1rem;
}

/* --- Side card (dark gradient quote/contact card) -- */
.svc-side-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #312e81 100%);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}

.svc-side-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(400px 200px at 0% 0%, rgba(255,107,53,0.15), transparent 60%),
        radial-gradient(400px 200px at 100% 100%, rgba(99,102,241,0.18), transparent 60%);
    pointer-events: none;
}

.svc-side-card > * { position: relative; z-index: 1; }

/* --- Service-page accordion --------------- */
.svc-accordion .accordion-item {
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: var(--radius-md) !important;
    margin-bottom: 0.75rem;
    background: #fff;
    overflow: hidden;
}

.svc-accordion .accordion-button {
    border-radius: var(--radius-md);
    font-weight: 600;
    color: var(--color-dark);
    padding: 1.15rem 1.4rem;
}

.svc-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(255,107,53,0.05), rgba(99,102,241,0.05));
    color: var(--color-dark);
    box-shadow: none;
}

.svc-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.18rem rgba(255,107,53,0.15);
    border-color: rgba(255,107,53,0.2);
}

.svc-accordion .accordion-body {
    padding: 0 1.4rem 1.25rem;
    color: var(--color-muted);
    font-size: 0.97rem;
    line-height: 1.7;
}

/* --- Responsive ---------------------------- */
@media (max-width: 767.98px) {
    .svc-timeline::before { left: 22px; }
    .svc-timeline-marker { width: 44px; height: 44px; font-size: 0.85rem; }
    .case-spotlight-text { padding: 1.75rem; }
    .case-spotlight-visual { padding: 1.25rem; }
}

/* ============================================
   DIGITAL STRATEGY — methodology + Gantt
   ============================================ */

/* --- 5-phase methodology strip (dark bg) ---------- */
.methodology-step {
    height: 100%;
    padding: 1.5rem 1.25rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    text-align: center;
    transition: transform 0.4s var(--ease-out-expo), background 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo);
}

.methodology-step:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,107,53,0.3);
}

.methodology-step h3 { color: #fff; }

.methodology-step-num {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #FF6B35, #6366F1);
    box-shadow: 0 8px 22px rgba(255,107,53,0.25);
}

.text-white-70 { color: rgba(255,255,255,0.7) !important; }

/* --- 8-week Gantt timeline ------------ */
.strategy-gantt {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem 2.5rem;
    position: relative;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.strategy-gantt-header {
    display: flex;
    align-items: center;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(15,23,42,0.08);
    margin-bottom: 1rem;
}

.strategy-gantt-header .strategy-gantt-label {
    width: 180px;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: var(--color-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.strategy-gantt-weeks {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-muted);
    text-align: center;
    letter-spacing: 0.05em;
}

.strategy-gantt-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.strategy-gantt-row .strategy-gantt-label {
    width: 180px;
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.strategy-gantt-num {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
}

.strategy-gantt-bar-track {
    flex: 1;
    position: relative;
    height: 40px;
    background: repeating-linear-gradient(
        to right,
        rgba(15,23,42,0.03) 0,
        rgba(15,23,42,0.03) calc(12.5% - 1px),
        rgba(15,23,42,0.06) calc(12.5% - 1px),
        rgba(15,23,42,0.06) 12.5%
    );
    border-radius: 8px;
}

.strategy-gantt-bar {
    position: absolute;
    top: 6px;
    height: 28px;
    border-radius: 6px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.6rem;
    box-shadow: 0 6px 14px rgba(15,23,42,0.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.3s var(--ease-out-expo);
}

.strategy-gantt-bar:hover {
    transform: translateY(-2px);
    cursor: default;
}

.strategy-gantt-milestones {
    position: relative;
    height: 32px;
    margin-top: 0.75rem;
    margin-left: 188px;
}

.strategy-gantt-milestone {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 600;
}

.strategy-gantt-milestone i {
    margin-bottom: 2px;
}

.strategy-gantt-milestone span {
    font-family: var(--font-mono);
    color: var(--color-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
    white-space: nowrap;
}

/* --- Gantt responsive (stack on mobile) ----- */
@media (max-width: 767.98px) {
    .strategy-gantt { padding: 1.25rem 1rem 1.75rem; }
    .strategy-gantt-header .strategy-gantt-label,
    .strategy-gantt-row .strategy-gantt-label { width: 110px; font-size: 0.8rem; }
    .strategy-gantt-weeks { font-size: 0.62rem; }
    .strategy-gantt-bar { font-size: 0.6rem; padding: 0 0.35rem; }
    .strategy-gantt-num { width: 22px; height: 22px; font-size: 0.62rem; }
    .strategy-gantt-milestones { margin-left: 118px; }
    .strategy-gantt-milestone span { font-size: 0.55rem; }
}

/* ============================================
   E-COMMERCE — platform cards + integrations grid
   ============================================ */
.platform-card {
    padding: 1.75rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
    position: relative;
}

.platform-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.platform-card-featured {
    background: linear-gradient(135deg, #fff 0%, #fff8f3 100%);
    border-color: rgba(255,107,53,0.2);
}

.platform-card-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
    padding: 0.3rem 0.75rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 14px rgba(255,107,53,0.25);
}

.platform-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.platform-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(99,102,241,0.1));
    color: var(--color-primary);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.platform-card-best {
    font-size: 0.85rem;
    color: var(--color-dark);
    padding: 0.6rem 0.85rem;
    background: rgba(99,102,241,0.05);
    border-left: 3px solid var(--color-secondary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: 1rem;
}

/* --- Integrations grid (pill cloud) --------- */
.integrations-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    max-width: 980px;
    margin: 0 auto;
}

.integration-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    font-weight: 600;
    color: var(--color-dark);
    font-size: 0.9rem;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo);
}

.integration-pill:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(255,107,53,0.2);
}

.integration-pill i {
    color: var(--color-primary);
    font-size: 1rem;
}

/* ============================================
   MOBILE — comparison matrix + benchmark cards
   ============================================ */
.comparison-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
}

.comparison-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 720px;
}

.comparison-table th,
.comparison-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: middle;
    color: rgba(255,255,255,0.85);
    font-size: 0.92rem;
}

.comparison-table thead th {
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

.comparison-table tbody tr:hover {
    background: rgba(255,255,255,0.025);
}

.comparison-col-a, .comparison-col-b { width: 30%; }

.cmp-good, .cmp-mid, .cmp-bad {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    font-size: 0.88rem;
}

.cmp-good { color: #10B981; }
.cmp-mid  { color: #FF8F66; }
.cmp-bad  { color: #EF4444; }

/* --- Benchmark cards (dark bg) ------------- */
.benchmark-card {
    padding: 1.75rem 1.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    text-align: center;
    transition: transform 0.4s var(--ease-out-expo), background 0.4s var(--ease-out-expo);
    height: 100%;
}

.benchmark-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.07);
}

.benchmark-card-num {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #FF6B35, #6366F1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.benchmark-card-label {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    font-weight: 500;
}

/* ============================================
   AI VISIBILITY (GEO) — comparison + levers
   ============================================ */
.geo-vs-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid rgba(15,23,42,0.08);
    box-shadow: var(--shadow-sm);
    background: #fff;
}

.geo-vs-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
}

.geo-vs-table th,
.geo-vs-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid rgba(15,23,42,0.06);
    vertical-align: middle;
    color: var(--color-dark);
    font-size: 0.94rem;
}

.geo-vs-table thead th {
    background: linear-gradient(135deg, #fafbff, #f8fafc);
    color: var(--color-dark);
    font-weight: 700;
    font-size: 0.95rem;
}

.geo-vs-table tbody tr:hover { background: rgba(255,107,53,0.02); }

.geo-col-seo, .geo-col-geo { width: 38%; }

.geo-col-seo i {
    color: #4285F4;
    margin-right: 0.5rem;
}

.geo-col-geo i {
    color: var(--color-primary);
    margin-right: 0.5rem;
}

.geo-vs-table td:first-child { color: var(--color-dark); font-weight: 600; }
.geo-vs-table td strong { color: var(--color-dark); }

/* --- 5 GEO Levers --------- */
.geo-lever-card {
    padding: 1.75rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-md);
    height: 100%;
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.geo-lever-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.geo-lever-num {
    position: absolute;
    top: -12px;
    left: 1.5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 6px 16px rgba(255,107,53,0.3);
}

.geo-lever-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(99,102,241,0.1));
    color: var(--color-primary);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    margin: 0.85rem 0 1rem;
}

.geo-lever-card-cta {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #312e81 100%);
    border-color: rgba(255,255,255,0.08);
    color: #fff;
    overflow: hidden;
    position: relative;
}

.geo-lever-card-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(400px 200px at 0% 0%, rgba(255,107,53,0.18), transparent 60%),
        radial-gradient(400px 200px at 100% 100%, rgba(99,102,241,0.2), transparent 60%);
    pointer-events: none;
}

.geo-lever-card-cta > * { position: relative; z-index: 1; }

.geo-lever-card-cta .geo-lever-icon {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* ============================================
   SEO — reporting dashboard mockup
   ============================================ */
.seo-report-mock {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px rgba(15,23,42,0.12);
    padding: 1.5rem;
    overflow: hidden;
}

.seo-report-header {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(15,23,42,0.08);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}

.seo-report-tab {
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-muted);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.seo-report-tab-active {
    background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(99,102,241,0.1));
    color: var(--color-primary);
}

.seo-report-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.seo-report-stat {
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #fafbff, #f8fafc);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(15,23,42,0.05);
}

.seo-report-stat-label {
    font-size: 0.7rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.seo-report-stat-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-dark);
    line-height: 1.1;
    margin-bottom: 0.2rem;
}

.seo-report-stat-delta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
}

.seo-report-chart {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.4rem;
    height: 120px;
    align-items: end;
    padding: 0.5rem;
    background: linear-gradient(180deg, transparent, rgba(99,102,241,0.04));
    border-radius: var(--radius-sm);
}

.seo-report-chart-bar {
    background: linear-gradient(180deg, rgba(99,102,241,0.4), rgba(99,102,241,0.15));
    border-radius: 4px 4px 0 0;
    min-height: 8px;
    transition: opacity 0.3s var(--ease-out-expo);
}

.seo-report-chart-bar-active {
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-light));
    box-shadow: 0 -8px 20px rgba(255,107,53,0.4);
}

/* ============================================
   AI AUTOMATION — reference architecture diagrams
   ============================================ */
.ref-arch-card {
    padding: 1.75rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    height: 100%;
    position: relative;
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

.ref-arch-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.ref-arch-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(255,107,53,0.08);
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    margin-bottom: 0.85rem;
}

.ref-arch-diagram {
    padding: 1rem;
    background: linear-gradient(135deg, #fafbff, #f8fafc);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(15,23,42,0.04);
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.ref-arch-node {
    width: 100%;
    text-align: center;
    padding: 0.55rem 0.85rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-dark);
    box-shadow: 0 2px 6px rgba(15,23,42,0.04);
}

.ref-arch-node-input {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(52,211,153,0.05));
    border-color: rgba(16,185,129,0.25);
    color: #047857;
}

.ref-arch-node-llm {
    background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(129,140,248,0.05));
    border-color: rgba(99,102,241,0.25);
    color: #4f46e5;
}

.ref-arch-node-output {
    background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(255,143,102,0.05));
    border-color: rgba(255,107,53,0.25);
    color: #c2410c;
}

.ref-arch-arrow {
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1;
}

.ref-arch-node-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    width: 100%;
}

/* ============================================
   GENERIC PAGE-HERO (used by About, Portfolio, Pricing, 404)
   Dark gradient background + 3 floating shapes (variant of services-hub-hero)
   ============================================ */
.page-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #312e81 100%);
    color: #fff;
    padding-top: calc(var(--navbar-height) + 3rem);
    padding-bottom: 4rem;
    margin-top: calc(var(--navbar-height) * -1);
    position: relative;
    overflow: hidden;
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 400px at 0% 0%, rgba(255,107,53,0.18), transparent 60%),
        radial-gradient(700px 500px at 100% 100%, rgba(99,102,241,0.22), transparent 60%);
    pointer-events: none;
}

.page-hero-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.page-hero-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: services-hub-float 12s ease-in-out infinite;
}

.page-hero-shape-1 {
    width: 380px;
    height: 380px;
    top: -120px;
    left: -120px;
    background: linear-gradient(135deg, #FF6B35, #FF8F66);
}

.page-hero-shape-2 {
    width: 320px;
    height: 320px;
    bottom: -80px;
    right: 8%;
    background: linear-gradient(135deg, #6366F1, #818CF8);
    animation-delay: -4s;
}

.page-hero-shape-3 {
    width: 240px;
    height: 240px;
    top: 20%;
    right: -100px;
    background: linear-gradient(135deg, #10B981, #34D399);
    animation-delay: -8s;
    opacity: 0.28;
}

/* ============================================
   ABOUT PAGE — bespoke components
   ============================================ */

/* hero side-quote ------------ */
.about-hero-quote {
    position: relative;
    padding: 2rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
}

.about-hero-quote-mark {
    position: absolute;
    top: -10px;
    left: 1.5rem;
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.7;
}

.about-hero-quote p {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.about-hero-quote-author strong {
    display: block;
    color: #fff;
    font-size: 0.95rem;
}

.about-hero-quote-author span {
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
}

/* Numbers band -------------- */
.about-stats-row { margin: 0; }

.about-stat {
    text-align: center;
    padding: 1.5rem 0.5rem;
}

.about-stat-num {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.about-stat-label {
    font-size: 0.95rem;
    color: var(--color-muted);
    font-weight: 500;
}

/* Story / 3-act narrative ----- */
.story-act {
    height: 100%;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
    position: relative;
}

.story-act:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.story-act-num {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    margin-bottom: 0.6rem;
    letter-spacing: 0.08em;
}

.story-act-year {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 0.75rem;
}

/* Value cards (light bg) ------ */
.about-value-card {
    height: 100%;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

.about-value-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.about-value-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

/* Team stub cards ------------- */
.team-card-stub {
    height: 100%;
    padding: 2rem;
    background: linear-gradient(135deg, #fff, #fafbff);
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

.team-card-stub:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.team-card-stub-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(99,102,241,0.1));
    color: var(--color-primary);
    margin: 0 auto 1.25rem;
    display: grid;
    place-items: center;
    font-size: 1.75rem;
    border: 1px solid rgba(255,107,53,0.15);
}

.team-card-stub-chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Operating principles -------- */
.principle-card {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    height: 100%;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}

.principle-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.principle-card i {
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
    display: inline-block;
}

.principle-card p {
    color: var(--color-dark);
    font-size: 0.95rem;
    line-height: 1.55;
}

.principle-card strong { color: var(--color-dark); }

/* ============================================
   PORTFOLIO — outcome tiles, filter bar, case cards, testimonials
   ============================================ */

/* outcome band ----------- */
.outcome-tile {
    text-align: center;
    padding: 1.75rem 1rem;
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid rgba(15,23,42,0.06);
    box-shadow: var(--shadow-xs);
    height: 100%;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}

.outcome-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.outcome-tile-num {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.outcome-tile-label {
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 0.25rem;
}

.outcome-tile-sub {
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* filter bar ----------- */
.case-filter-bar {
    background: #fff;
    border-top: 1px solid rgba(15,23,42,0.05);
    border-bottom: 1px solid rgba(15,23,42,0.05);
    padding: 1rem 0;
    position: sticky;
    top: var(--navbar-height-shrink);
    z-index: 50;
}

.case-filter-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.case-filter-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 600;
}

.case-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.case-filter-pill {
    appearance: none;
    border: 1px solid rgba(15,23,42,0.1);
    background: #fff;
    color: var(--color-dark);
    padding: 0.45rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
}

.case-filter-pill:hover {
    border-color: rgba(255,107,53,0.3);
    color: var(--color-primary);
}

.case-filter-pill-active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(255,107,53,0.25);
}

/* case cards ----------- */
.case-card {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 100%;
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.case-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.case-card-cover {
    height: 180px;
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.case-card-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,23,42,0.5), rgba(99,102,241,0.2));
}

/* Generated gradient covers (no external imagery needed) */
.case-cover-1 { background: linear-gradient(135deg, #6366F1, #818CF8); }
.case-cover-2 { background: linear-gradient(135deg, #FF8F66, #818CF8); }
.case-cover-3 { background: linear-gradient(135deg, #10B981, #34D399); }
.case-cover-4 { background: linear-gradient(135deg, #FF6B35, #FF8F66); }
.case-cover-5 { background: linear-gradient(135deg, #818CF8, #FF6B35); }
.case-cover-6 { background: linear-gradient(135deg, #FF8F66, #34D399); }
.case-cover-7 { background: linear-gradient(135deg, #10B981, #6366F1); }
.case-cover-8 { background: linear-gradient(135deg, #34D399, #818CF8); }
.case-cover-9 { background: linear-gradient(135deg, #FF6B35, #6366F1); }

.case-card-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255,255,255,0.95);
    color: var(--color-dark);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    z-index: 1;
}

.case-card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.case-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
    letter-spacing: -0.02em;
}

.case-card-desc {
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 1rem;
    flex: 1;
}

.case-card-results {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(15,23,42,0.05);
    border-bottom: 1px solid rgba(15,23,42,0.05);
}

.case-card-results span {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.case-card-results strong {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: 1rem;
    margin-right: 0.2rem;
}

.case-card-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* testimonial card ----- */
.testimonial-card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(15,23,42,0.06);
    box-shadow: var(--shadow-sm);
    height: 100%;
    position: relative;
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.testimonial-quote-mark {
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.6;
    margin-bottom: -0.5rem;
}

.testimonial-card p {
    color: var(--color-dark);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.testimonial-author strong {
    display: block;
    color: var(--color-dark);
    font-weight: 700;
}

.testimonial-author span {
    color: var(--color-muted);
    font-size: 0.85rem;
}

/* ============================================
   PRICING — engagement cards
   ============================================ */
.pricing-engagement-card {
    position: relative;
    padding: 2.25rem 1.75rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
}

.pricing-engagement-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.pricing-engagement-card-featured {
    background: linear-gradient(135deg, #fff, #fff8f3);
    border-color: rgba(255,107,53,0.2);
    box-shadow: 0 16px 48px rgba(255,107,53,0.12);
}

.pricing-engagement-badge {
    position: absolute;
    top: -12px;
    left: 1.75rem;
    background: #fff;
    color: var(--color-secondary);
    border: 1px solid rgba(99,102,241,0.25);
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-engagement-badge-featured {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(255,107,53,0.25);
}

.pricing-engagement-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.3rem;
    margin: 0.5rem 0 1.25rem;
}

.pricing-engagement-price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

.pricing-engagement-price span {
    font-size: 2.5rem;
    font-weight: 900;
    margin-left: 0.2rem;
}

.pricing-engagement-sub {
    color: var(--color-muted);
    font-size: 0.82rem;
    margin-bottom: 1.5rem;
}

.pricing-engagement-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1;
}

.pricing-engagement-list li {
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(15,23,42,0.06);
    color: var(--color-dark);
    font-size: 0.92rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.pricing-engagement-list li:last-child { border-bottom: none; }
.pricing-engagement-list li i { margin-top: 4px; flex-shrink: 0; }

/* ============================================
   404 PAGE — helpful link cards
   ============================================ */
.not-found-link-card {
    display: block;
    height: 100%;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo);
}

.not-found-link-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255,107,53,0.2);
    color: inherit;
}

.not-found-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.3rem;
    margin: 0 auto 1rem;
}

/* ============================================
   INSIGHTS — index featured card, post cards, filter
   ============================================ */

/* Featured post card (index) ------------- */
.featured-post-card {
    display: block;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

.featured-post-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    color: inherit;
}

.featured-post-cover {
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.featured-post-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,23,42,0.4), rgba(99,102,241,0.15));
}

.featured-post-tag {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    background: rgba(255,255,255,0.95);
    color: var(--color-dark);
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    z-index: 1;
}

.featured-post-body {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-post-meta {
    display: flex;
    gap: 0.6rem;
    color: var(--color-muted);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    font-family: var(--font-mono);
}

.featured-post-divider { opacity: 0.5; }

.featured-post-title {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--color-dark);
}

.featured-post-excerpt {
    color: var(--color-muted);
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.featured-post-readmore {
    color: var(--color-primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

/* Insights filter pills ----------------- */
.insights-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.insights-filter-pill {
    text-decoration: none;
    color: var(--color-dark);
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s var(--ease-out-expo);
}

.insights-filter-pill:hover {
    border-color: rgba(255,107,53,0.3);
    color: var(--color-primary);
}

.insights-filter-pill span {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    background: rgba(15,23,42,0.05);
    color: var(--color-muted);
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
}

.insights-filter-pill-active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(255,107,53,0.25);
}

.insights-filter-pill-active span {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Insights post card (grid) ------------- */
.insights-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

.insights-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    color: inherit;
}

.insights-card-cover {
    height: 180px;
    position: relative;
    overflow: hidden;
}

.insights-card-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,23,42,0.45), rgba(99,102,241,0.2));
}

.insights-card-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255,255,255,0.95);
    color: var(--color-dark);
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    z-index: 1;
}

.insights-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.insights-card-meta {
    display: flex;
    gap: 0.5rem;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-family: var(--font-mono);
    margin-bottom: 0.75rem;
}

.insights-card-meta span:nth-child(2) { opacity: 0.5; }

.insights-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--color-dark);
    letter-spacing: -0.02em;
    line-height: 1.35;
}

.insights-card-excerpt {
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 1rem;
    flex: 1;
}

.insights-card-readmore {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
}

/* Newsletter band ---------------------- */
.newsletter-band {
    padding: 2.5rem;
    background: linear-gradient(135deg, #fafbff, #fff8f3);
    border: 1px solid rgba(255,107,53,0.1);
    border-radius: var(--radius-lg);
}

.newsletter-band-form {
    display: flex;
    gap: 0.5rem;
}

.newsletter-band-form input {
    flex: 1;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(15,23,42,0.1);
    padding: 0.75rem 1.2rem;
}

.newsletter-band-form input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255,107,53,0.15);
}

.newsletter-band-form .btn {
    white-space: nowrap;
}

/* ============================================
   INSIGHTS POST PAGE — hero, TOC, body, share
   ============================================ */

.insights-article-hero {
    padding-top: calc(var(--navbar-height) + 4rem);
    padding-bottom: 4rem;
    margin-top: calc(var(--navbar-height) * -1);
    position: relative;
    overflow: hidden;
    color: #fff;
}

.insights-article-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0.75) 100%);
    pointer-events: none;
}

.insights-article-hero-content { position: relative; }

.insights-article-hero-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    color: rgba(255,255,255,0.85);
    font-family: var(--font-mono);
    font-size: 0.88rem;
}

.insights-article-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.insights-article-hero-meta i { color: var(--color-primary); }

/* TOC sticky --------- */
.insights-toc-sticky {
    position: sticky;
    top: calc(var(--navbar-height) + 1.5rem);
}

.insights-toc {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.insights-toc-header {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(15,23,42,0.06);
}

.insights-toc-header i { color: var(--color-primary); margin-right: 0.4rem; }

.insights-toc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.insights-toc-link {
    text-decoration: none;
    color: var(--color-muted);
    padding: 0.4rem 0.6rem;
    font-size: 0.88rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    transition: all 0.25s var(--ease-out-expo);
    line-height: 1.4;
}

.insights-toc-link-l3 { padding-left: 1.2rem; font-size: 0.82rem; }

.insights-toc-link:hover {
    color: var(--color-dark);
    background: rgba(15,23,42,0.03);
}

.insights-toc-link-active {
    color: var(--color-primary) !important;
    background: rgba(255,107,53,0.06);
    border-left-color: var(--color-primary);
    font-weight: 600;
}

.insights-toc-share {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(15,23,42,0.06);
}

.insights-toc-share-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.insights-toc-share-buttons {
    display: flex;
    gap: 0.4rem;
}

.insights-toc-share-buttons a,
.insights-toc-share-buttons button {
    appearance: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(15,23,42,0.04);
    border: 1px solid rgba(15,23,42,0.06);
    color: var(--color-dark);
    display: grid;
    place-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
}

.insights-toc-share-buttons a:hover,
.insights-toc-share-buttons button:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: transparent;
}

/* Article body markdown styles -------- */
.insights-article-body {
    color: var(--color-dark);
    font-size: 1.08rem;
    line-height: 1.75;
}

.insights-article-body h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 2.5rem 0 1rem;
    letter-spacing: -0.025em;
    scroll-margin-top: calc(var(--navbar-height) + 1rem);
}

.insights-article-body h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 2rem 0 0.85rem;
    scroll-margin-top: calc(var(--navbar-height) + 1rem);
}

.insights-article-body p { margin-bottom: 1.25rem; }

.insights-article-body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.insights-article-body a:hover { text-decoration-thickness: 2px; }

.insights-article-body ul,
.insights-article-body ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.insights-article-body li {
    margin-bottom: 0.4rem;
}

.insights-article-body blockquote {
    border-left: 4px solid var(--color-primary);
    margin: 1.5rem 0;
    padding: 0.5rem 1.25rem;
    background: rgba(255,107,53,0.04);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--color-dark);
    font-style: italic;
}

.insights-article-body blockquote p:last-child { margin-bottom: 0; }

.insights-article-body code {
    background: rgba(99,102,241,0.08);
    color: #4f46e5;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.insights-article-body pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 1.25rem;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    line-height: 1.6;
}

.insights-article-body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.insights-article-body img {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: 1.5rem 0;
}

.insights-article-body strong {
    color: var(--color-dark);
    font-weight: 700;
}

/* Article footer (share inline + author) - */
.insights-article-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(15,23,42,0.08);
}

.insights-share-inline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.insights-share-inline a,
.insights-share-inline button {
    appearance: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: rgba(15,23,42,0.04);
    border: 1px solid rgba(15,23,42,0.06);
    color: var(--color-dark);
    display: inline-grid;
    place-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
}

.insights-share-inline a:hover,
.insights-share-inline button:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: transparent;
}

.insights-author-card {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fafbff, #fff8f3);
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-md);
    align-items: flex-start;
}

.insights-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.insights-author-card strong {
    display: block;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.3rem;
}

/* ============================================
   PROCESS PAGE — stat cards for each phase
   ============================================ */
.process-stat-card {
    padding: 1.75rem;
    background: linear-gradient(135deg, #fff, #fafbff);
    border: 1px solid rgba(99,102,241,0.12);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.process-stat-card-build {
    background: linear-gradient(135deg, #fff, #fff8f3);
    border-color: rgba(255,107,53,0.15);
}

.process-stat-card-visible {
    background: linear-gradient(135deg, #fff, #f0fdf4);
    border-color: rgba(16,185,129,0.15);
}

.process-stat-card-header {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 700;
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(15,23,42,0.06);
}

.process-stat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.process-stat-list li {
    padding: 0.6rem 0;
    color: var(--color-dark);
    border-bottom: 1px dashed rgba(15,23,42,0.06);
}

.process-stat-list li:last-child { border-bottom: none; }

.process-stat-list strong {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 800;
    margin-right: 0.3rem;
}

/* ============================================
   COMPARISON PAGE — TL;DR + scenario cards
   ============================================ */
.comparison-tldr {
    position: relative;
    padding: 1.75rem 1.75rem 1.5rem;
    background: linear-gradient(135deg, #fff8f3, #fef3c7);
    border: 1px solid rgba(255,107,53,0.2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.comparison-tldr-label {
    position: absolute;
    top: -12px;
    left: 1.5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    box-shadow: 0 6px 14px rgba(255,107,53,0.25);
}

.comparison-tldr p {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--color-dark);
    margin: 0;
}

/* vs-scenario-card ------ */
.vs-scenario-card {
    height: 100%;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.vs-scenario-card-seo {
    background: linear-gradient(135deg, #fff, #f0f9ff);
    border-color: rgba(66,133,244,0.18);
}

.vs-scenario-card-geo {
    background: linear-gradient(135deg, #fff, #fff8f3);
    border-color: rgba(255,107,53,0.2);
}

.vs-scenario-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 1rem;
}

.vs-scenario-card-seo .vs-scenario-icon {
    background: linear-gradient(135deg, #4285F4, #6FA8FA);
}

.vs-scenario-card-geo .vs-scenario-icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

.vs-scenario-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vs-scenario-list li {
    padding: 0.6rem 0 0.6rem 1.6rem;
    border-bottom: 1px dashed rgba(15,23,42,0.08);
    position: relative;
    color: var(--color-dark);
    font-size: 0.95rem;
    line-height: 1.55;
}

.vs-scenario-list li:last-child { border-bottom: none; }

.vs-scenario-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.55rem;
    color: var(--color-primary);
    font-weight: 700;
}

.vs-scenario-card-seo .vs-scenario-list li::before { color: #4285F4; }

/* ============================================
   THANK YOU PAGE — animated check
   ============================================ */
.thankyou-check {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981, #34D399);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    margin: 0 auto 1.5rem;
    box-shadow: 0 20px 50px rgba(16,185,129,0.35), 0 0 0 12px rgba(16,185,129,0.1);
    animation: thankyouPop 0.6s var(--ease-out-back);
}

@keyframes thankyouPop {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================
   CASE STUDY PAGE — hero, sections, results, quote
   ============================================ */
.case-study-hero {
    padding-top: calc(var(--navbar-height) + 4rem);
    padding-bottom: 4rem;
    margin-top: calc(var(--navbar-height) * -1);
    position: relative;
    overflow: hidden;
    color: #fff;
}

.case-study-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0.5), rgba(15,23,42,0.78));
    pointer-events: none;
}

.case-study-hero-meta {
    display: inline-block;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px);
}

.case-study-hero-meta span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 0.3rem;
}

.case-study-hero-meta strong {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: #fff;
}

/* Stats band ----------- */
.case-study-stats { margin: 0; }

.case-study-stat {
    text-align: center;
    padding: 1.5rem 0.5rem;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    border: 1px solid rgba(15,23,42,0.04);
    height: 100%;
}

.case-study-stat-num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.4rem;
}

.case-study-stat-label {
    color: var(--color-muted);
    font-size: 0.92rem;
    font-weight: 500;
}

/* Sections ----------- */
.case-study-section {
    margin-bottom: 3rem;
}

.case-study-section:last-child { margin-bottom: 0; }

.case-study-section-label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(255,107,53,0.08);
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    margin-bottom: 1rem;
}

.case-study-section p.lead {
    color: var(--color-dark);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Results list ----- */
.case-study-results {
    list-style: none;
    padding: 0;
    margin: 0;
}

.case-study-results li {
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-bottom: 1px dashed rgba(15,23,42,0.08);
    color: var(--color-dark);
    font-size: 1.05rem;
    line-height: 1.6;
}

.case-study-results li:last-child { border-bottom: none; }

.case-study-results li i {
    color: var(--color-accent);
    margin-top: 6px;
    flex-shrink: 0;
}

/* Quote ----------- */
.case-study-quote {
    position: relative;
    padding: 2.5rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #312e81 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    margin-top: 2rem;
    overflow: hidden;
}

.case-study-quote::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(400px 200px at 100% 0%, rgba(255,107,53,0.18), transparent 60%);
    pointer-events: none;
}

.case-study-quote-mark {
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.7;
    margin-bottom: -0.5rem;
    position: relative;
}

.case-study-quote p {
    font-size: 1.2rem;
    line-height: 1.65;
    color: #fff;
    margin-bottom: 1.25rem;
    position: relative;
}

.case-study-quote-author strong {
    display: block;
    color: #fff;
    font-weight: 700;
}

.case-study-quote-author span {
    color: rgba(255,255,255,0.6);
    font-size: 0.92rem;
}

/* ============================================
   Portfolio card link wrapper (no decoration)
   ============================================ */
.case-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.case-card-link:hover {
    color: inherit;
}

.case-card-link .case-card {
    cursor: pointer;
}

/* ====================================================================
   DIGITAL STRATEGY PAGE — interactive components
   (hero snapshot · phase explorer · deliverable gallery · metrics ·
    animated gantt · scroll reveal)
   ==================================================================== */

/* --- scroll reveal utility --- */
[data-sreveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
    will-change: opacity, transform;
}
[data-sreveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* --- shared strategy keyframes --- */
@keyframes stratDraw   { to { stroke-dashoffset: 0; } }
@keyframes stratPop    { 0% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes stratGrowY  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes stratFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============ HERO — Strategy Snapshot panel ============ */
.svc-hero-strategy .breadcrumb { justify-content: flex-start; }

.strat-snapshot {
    position: relative;
    background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 1.5rem 1.6rem 1.7rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 30px 70px rgba(5,7,20,0.55);
    overflow: hidden;
    isolation: isolate;
    animation: stratFadeUp 0.8s var(--ease-out-expo) both;
}
.strat-snapshot-glow {
    position: absolute;
    width: 320px; height: 320px;
    top: -140px; right: -120px;
    background: radial-gradient(circle, rgba(255,107,53,0.45), transparent 65%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}
.strat-snapshot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.strat-snapshot-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
}
.strat-live-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 0 0 rgba(52,211,153,0.6);
    animation: stratLivePulse 2s infinite;
}
@keyframes stratLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(52,211,153,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.strat-snapshot-tag {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #34D399;
    border: 1px solid rgba(52,211,153,0.4);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

/* hero phase rail */

/* hero live readout */
.strat-snapshot-phase {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 0.95rem 1.1rem;
    margin-bottom: 1.1rem;
}
.strat-phase-name {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-top: 0.1rem;
}
.strat-phase-note {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.62);
    margin: 0.25rem 0 0;
}
.strat-snapshot-phase.is-switching { animation: stratFadeUp 0.4s var(--ease-out-expo); }

/* hero KPI tiles */
.strat-snapshot-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
}
.strat-kpi {
    text-align: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0.7rem 0.4rem;
}
.strat-kpi-num {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #FF8F66, #818CF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.strat-kpi-label {
    font-size: 0.66rem;
    color: rgba(255,255,255,0.55);
    margin-top: 0.3rem;
}

/* ============ OUTCOMES — animated SVG illustrations ============ */
.svc-flip-front .svc-illo {
    width: 76px; height: 76px;
    margin-bottom: 0.85rem;
}
.svc-flip-front .svc-illo svg { width: 100%; height: 100%; overflow: visible; }
.svc-illo [class^="illo-"] { opacity: 0; }
.svc-illo .illo-ring,
.svc-illo .illo-link,
.svc-illo .illo-scan,
.svc-illo .illo-trend,
.svc-illo .illo-arrow {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
}
[data-sreveal].is-revealed .svc-illo [class^="illo-"] { opacity: 1; }
[data-sreveal].is-revealed .svc-illo .illo-ring,
[data-sreveal].is-revealed .svc-illo .illo-link,
[data-sreveal].is-revealed .svc-illo .illo-scan,
[data-sreveal].is-revealed .svc-illo .illo-trend,
[data-sreveal].is-revealed .svc-illo .illo-arrow {
    animation: stratDraw 0.9s var(--ease-out-expo) 0.15s forwards;
}
[data-sreveal].is-revealed .svc-illo .illo-dot,
[data-sreveal].is-revealed .svc-illo .illo-node,
[data-sreveal].is-revealed .svc-illo .illo-core,
[data-sreveal].is-revealed .svc-illo .illo-pop,
[data-sreveal].is-revealed .svc-illo .illo-bar {
    animation: stratPop 0.55s var(--ease-out-expo) 0.5s both;
    transform-box: fill-box;
    transform-origin: center;
}
/* outcome flip cards */
.svc-flip {
    perspective: 1600px;
    min-height: 350px;
    cursor: pointer;
    border-radius: 18px;
}
.svc-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 350px;
    transition: transform 0.7s var(--ease-out-expo);
    transform-style: preserve-3d;
}
.svc-flip:hover .svc-flip-inner,
.svc-flip:focus-visible .svc-flip-inner,
.svc-flip.is-flipped .svc-flip-inner {
    transform: rotateY(180deg);
}
.svc-flip:focus-visible { outline: none; }
.svc-flip-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1.75rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.07);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    transition: box-shadow 0.4s var(--ease-out-expo);
}
.svc-flip-front::after {
    content: '';
    position: absolute;
    top: -70px; right: -70px;
    width: 170px; height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,0.13), transparent 70%);
    pointer-events: none;
}
.svc-flip-back {
    transform: rotateY(180deg);
    background: linear-gradient(160deg, #ffffff, #f5f3ff);
}
.svc-flip:hover .svc-flip-face,
.svc-flip:focus-visible .svc-flip-face,
.svc-flip.is-flipped .svc-flip-face {
    box-shadow: 0 24px 52px rgba(99,102,241,0.2);
}
.svc-flip-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6366F1;
}
.svc-flip-hint i { transition: transform 0.6s var(--ease-out-expo); }
.svc-flip:hover .svc-flip-hint i,
.svc-flip:focus-visible .svc-flip-hint i { transform: rotate(180deg); }

/* ============ METHODOLOGY — phase explorer ============ */
.phase-explorer { max-width: 1140px; margin: 0 auto; }

.phase-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
}
.phase-tab {
    flex: 1 1 165px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.3rem 1rem;
    background: color-mix(in srgb, var(--pc, #6366F1) 10%, #fff);
    border: 2px solid color-mix(in srgb, var(--pc, #6366F1) 24%, transparent);
    border-radius: 16px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: transform 0.35s var(--ease-out-expo), border-color 0.35s, color 0.35s, background 0.35s, box-shadow 0.35s;
}
.phase-tab::before {
    content: '';
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--pc, #6366F1);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s, background 0.35s;
}
.phase-tab-label { transition: color 0.35s; }
.phase-tab:hover {
    background: color-mix(in srgb, var(--pc, #6366F1) 28%, #fff);
    border-color: var(--pc, #6366F1);
    color: var(--pc, #6366F1);
    transform: translateY(-4px);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--pc, #6366F1) 38%, transparent);
}
.phase-tab:hover::before {
    transform: scale(1.45);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc, #6366F1) 22%, transparent);
}
.phase-tab.is-active {
    background: linear-gradient(135deg, var(--pc, #6366F1), color-mix(in srgb, var(--pc, #6366F1) 58%, #fff));
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--pc, #6366F1) 48%, transparent);
}
.phase-tab.is-active::before { background: #fff; transform: scale(1.15); }
.phase-tab.is-active .phase-tab-label { color: #fff; }
.phase-arrow {
    display: inline-flex;
    align-items: center;
    color: #b3bcce;
    font-size: 1.15rem;
    flex-shrink: 0;
    margin: 0 0.15rem;
}

.phase-stage {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 20px;
    padding: 2rem 2.25rem;
    box-shadow: 0 18px 44px rgba(15,23,42,0.07);
}
.phase-card { display: none; }
.phase-card.is-active { display: block; animation: stratFadeUp 0.5s var(--ease-out-expo); }

.phase-card-kicker {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pc, #FF6B35);
    margin-bottom: 0.5rem;
}
.phase-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
}
.phase-card-list li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.5rem;
    color: #475569;
    font-size: 0.92rem;
}
.phase-card-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 7px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35, #6366F1);
}
.phase-card-artifact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #334155;
    background: color-mix(in srgb, var(--pc, #FF6B35) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--pc, #FF6B35) 40%, transparent);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
}
.phase-card-artifact i { color: var(--pc, #FF6B35); }
.phase-card-artifact strong { color: #0f172a; }

.phase-visual {
    background: linear-gradient(160deg, #f5f7fc, #e9edf6);
    border: 1px solid rgba(15,23,42,0.07);
    border-radius: 16px;
    padding: 1rem;
}
.phase-visual svg { width: 100%; height: auto; display: block; overflow: visible; }

/* phase visual element animations (restart each time card is shown) */
.phase-visual .pv-line,
.phase-visual .pv-trend,
.phase-visual .pv-path { stroke-dasharray: 360; stroke-dashoffset: 360; }
.phase-visual .pv-ring  { stroke-dasharray: 400; stroke-dashoffset: 400; }
.phase-visual .pv-fade,
.phase-visual .pv-grow,
.phase-visual .pv-pop,
.phase-visual .pv-pin { opacity: 0; }
.phase-visual .pv-grow { transform-box: fill-box; transform-origin: bottom; }

.phase-card.is-active .pv-fade  { animation: stratFadeUp 0.6s var(--ease-out-expo) 0.1s both; }
.phase-card.is-active .pv-line  { animation: stratDraw 0.7s var(--ease-out-expo) 0.25s forwards; }
.phase-card.is-active .pv-ring  { animation: stratDraw 1s var(--ease-out-expo) 0.2s forwards; }
.phase-card.is-active .pv-trend,
.phase-card.is-active .pv-path  { animation: stratDraw 1s var(--ease-out-expo) 0.35s forwards; }
.phase-card.is-active .pv-grow  { animation: stratGrowY 0.6s var(--ease-out-expo) 0.3s both; }
.phase-card.is-active .pv-pop   { animation: stratPop 0.55s var(--ease-out-expo) 0.7s both; transform-box: fill-box; transform-origin: center; }
.phase-card.is-active .pv-pin   { animation: stratPop 0.5s var(--ease-out-expo) 0.5s both; transform-box: fill-box; transform-origin: center; }

/* ============ DELIVERABLES — expandable cards (Ideal-Clients card style) ============ */
.deliv-grid { max-width: 1080px; margin: 0 auto; }
#delivGrid .row { --bs-gutter-x: 2.85rem; --bs-gutter-y: 2.85rem; }

.deliv-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.13);
    overflow: hidden;
    transition: transform 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), background 0.35s var(--ease-out-expo);
}
.deliv-card::before {
    content: '';
    position: absolute;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.1), transparent 70%);
    top: -50px; right: -50px;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}
.deliv-card:hover {
    transform: translateY(-8px);
    background: linear-gradient(160deg, #ffffff 35%, rgba(var(--color-primary-rgb), 0.09));
    border-color: rgba(var(--color-primary-rgb), 0.3);
    box-shadow: 0 26px 56px rgba(var(--color-primary-rgb), 0.18);
}
.deliv-card:hover::before,
.deliv-card.is-open::before { opacity: 1; transform: scale(1.3); }
.deliv-card.is-open {
    transform: none;
    background: linear-gradient(160deg, #ffffff 35%, rgba(var(--color-primary-rgb), 0.09));
    border-color: rgba(var(--color-primary-rgb), 0.3);
    box-shadow: 0 22px 52px rgba(var(--color-primary-rgb), 0.16);
}
/* alternate accent per column, like the Ideal Clients cards */
#delivGrid .row > div:nth-child(even) > .deliv-card:hover {
    background: linear-gradient(160deg, #ffffff 35%, rgba(var(--color-secondary-rgb), 0.09));
    border-color: rgba(var(--color-secondary-rgb), 0.3);
    box-shadow: 0 26px 56px rgba(var(--color-secondary-rgb), 0.18);
}
.deliv-card:hover .deliv-card-title { color: var(--color-primary); }
.deliv-card:hover .deliv-card-toggle { background: var(--color-primary); color: #fff; }
.deliv-card:not(.is-open):hover .deliv-card-chev { transform: translateY(3px); }

.deliv-card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2.15rem 2rem;
    min-height: 272px;
    cursor: pointer;
}
.deliv-card-head:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -4px;
    border-radius: 22px;
}
.deliv-card-icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 14px;
    font-size: 1.2rem;
    color: var(--color-primary);
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.16), rgba(var(--color-secondary-rgb), 0.16));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
    transition: transform 0.35s var(--ease-out-expo), background 0.35s ease;
}
.deliv-card:hover .deliv-card-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.22), rgba(var(--color-secondary-rgb), 0.22));
}
.deliv-card-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin-bottom: 0.45rem; transition: color 0.3s; }
.deliv-card-desc { font-size: 0.86rem; line-height: 1.6; color: var(--color-muted); margin-bottom: 1rem; }
.deliv-card-toggle {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    background: rgba(var(--color-primary-rgb), 0.1);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--color-primary);
    transition: background 0.3s, color 0.3s;
}
.deliv-card-chev { font-size: 0.68rem; transition: transform 0.4s var(--ease-out-expo); }
.deliv-card.is-open .deliv-card-toggle { background: var(--color-primary); color: #fff; }
.deliv-card.is-open .deliv-card-chev { transform: rotate(180deg); }

.deliv-card-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.55s var(--ease-out-expo);
}
.deliv-card.is-open .deliv-card-panel { max-height: 640px; }
.deliv-card-panel-inner { padding: 0 2rem 2rem; }
.deliv-card-mock {
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s var(--ease-out-expo) 0.12s, transform 0.45s var(--ease-out-expo) 0.12s;
}
.deliv-card.is-open .deliv-card-mock { opacity: 1; transform: none; }

.deliv-window-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    background: #f1f3f9;
    border-bottom: 1px solid rgba(15,23,42,0.07);
}
.deliv-dot { width: 10px; height: 10px; border-radius: 50%; background: #cdd3e2; }
.deliv-dot:nth-child(1) { background: #FF6B5F; }
.deliv-dot:nth-child(2) { background: #FEBC2E; }
.deliv-dot:nth-child(3) { background: #2BC840; }
.deliv-window-name {
    margin-left: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: #64748b;
}
.deliv-window-body { padding: 1.2rem 1.35rem 1.35rem; }
.deliv-doc-title { font-weight: 700; font-size: 1rem; color: #0f172a; }
.deliv-doc-sub   { font-size: 0.8rem; color: var(--color-muted); margin-bottom: 1rem; }
.deliv-tagrow { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
.deliv-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: #4338ca;
    background: rgba(99,102,241,0.1);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
}
.deliv-tag-risk { color: #b91c1c; background: rgba(239,68,68,0.1); }

/* mock: bar chart */
.deliv-barchart {
    display: flex;
    align-items: flex-end;
    gap: 0.7rem;
    height: 150px;
    padding-bottom: 26px;
}
.deliv-bar {
    position: relative;
    flex: 1;
    height: var(--h);
    border-radius: 7px 7px 0 0;
    background: linear-gradient(180deg, #818CF8, #6366F1);
    transform-origin: bottom;
}
.deliv-bar-you { background: linear-gradient(180deg, #FF8F66, #FF6B35); }
.deliv-bar span {
    position: absolute;
    bottom: -22px; left: 0; right: 0;
    text-align: center;
    font-size: 0.68rem;
    color: var(--color-muted);
}
.deliv-card.is-open .deliv-bar { animation: stratGrowY 0.7s var(--ease-out-expo) both; }

/* mock: roadmap */
.deliv-roadmap { display: flex; flex-direction: column; gap: 0.6rem; }
.deliv-rm-row { display: flex; align-items: center; gap: 0.6rem; }
.deliv-rm-label { width: 92px; flex-shrink: 0; font-size: 0.74rem; font-weight: 600; color: #334155; line-height: 1.3; }
.deliv-rm-bar {
    position: relative;
    height: 22px;
    flex: 1;
    background: #eef0f6;
    border-radius: 6px;
}
.deliv-rm-bar::after {
    content: '';
    position: absolute;
    top: 0; left: var(--l); height: 100%;
    width: 0;
    border-radius: 6px;
    background: var(--c);
}
.deliv-card.is-open .deliv-rm-bar::after {
    animation: delivRmGrow 0.8s var(--ease-out-expo) 0.15s forwards;
}
@keyframes delivRmGrow { to { width: var(--w); } }

/* mock: architecture */
.deliv-arch { display: flex; flex-direction: column; align-items: center; gap: 0; }
.deliv-arch-node {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    max-width: 320px;
    font-weight: 600;
    font-size: 0.86rem;
    color: #0f172a;
    border-radius: 10px;
    padding: 0.7rem 0.95rem;
    border: 1.5px solid;
}
.deliv-arch-node i { width: 18px; }
.deliv-arch-node.deliv-ok   { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.4); }
.deliv-arch-node.deliv-warn { background: rgba(245,158,11,0.09); border-color: rgba(245,158,11,0.45); }
.deliv-arch-node.deliv-risk { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.4); }
.deliv-arch-score {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.deliv-ok   .deliv-arch-score { color: #047857; }
.deliv-warn .deliv-arch-score { color: #b45309; }
.deliv-risk .deliv-arch-score { color: #b91c1c; }
.deliv-arch-link { width: 2px; height: 16px; background: #cdd3e2; }
.deliv-card.is-open .deliv-arch-node { animation: stratFadeUp 0.5s var(--ease-out-expo) both; }
.deliv-card.is-open .deliv-arch-node:nth-child(3) { animation-delay: 0.12s; }
.deliv-card.is-open .deliv-arch-node:nth-child(5) { animation-delay: 0.24s; }

/* mock: journey */
.deliv-journey-line { width: 100%; height: auto; }
.deliv-journey-line polyline { stroke-dasharray: 360; stroke-dashoffset: 360; }
.deliv-card.is-open .deliv-journey-line polyline { animation: stratDraw 1s var(--ease-out-expo) 0.2s forwards; }
.deliv-journey-steps { display: flex; justify-content: space-between; margin-top: 0.2rem; }
.deliv-journey-steps span { font-size: 0.74rem; font-weight: 600; color: #475569; }
.deliv-journey-steps .deliv-friction { color: #dc2626; }

/* mock: checklist */
.deliv-checklist { list-style: none; padding: 0; margin: 0; }
.deliv-checklist li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: #0f172a;
    padding: 0.55rem 0;
    border-bottom: 1px dashed rgba(15,23,42,0.1);
}
.deliv-checklist li:last-child { border-bottom: 0; }
.deliv-checklist li i { color: #10B981; }
.deliv-impact {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
}
.deliv-impact-high { color: #b91c1c; background: rgba(239,68,68,0.12); }
.deliv-impact-med  { color: #b45309; background: rgba(245,158,11,0.13); }
.deliv-card.is-open .deliv-checklist li { animation: stratFadeUp 0.45s var(--ease-out-expo) both; }
.deliv-card.is-open .deliv-checklist li:nth-child(2) { animation-delay: 0.08s; }
.deliv-card.is-open .deliv-checklist li:nth-child(3) { animation-delay: 0.16s; }
.deliv-card.is-open .deliv-checklist li:nth-child(4) { animation-delay: 0.24s; }

/* mock: risk matrix */
.deliv-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-width: 168px;
}
.deliv-cell {
    position: relative;
    aspect-ratio: 1;
    border-radius: 6px;
}
.deliv-m-lo { background: rgba(16,185,129,0.22); }
.deliv-m-md { background: rgba(245,158,11,0.28); }
.deliv-m-hi { background: rgba(239,68,68,0.3); }
.deliv-risk-dot {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #0f172a;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.deliv-card.is-open .deliv-risk-dot { animation: stratPop 0.5s var(--ease-out-expo) 0.3s both; }

/* mock: budget donut */
.deliv-budget { display: flex; align-items: center; gap: 1.4rem; }
.deliv-donut { width: 120px; height: 120px; flex-shrink: 0; }
.deliv-donut circle { transition: stroke-dasharray 0.9s var(--ease-out-expo); }
.deliv-budget-legend { list-style: none; padding: 0; margin: 0; }
.deliv-budget-legend li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #334155;
    margin-bottom: 0.4rem;
}
.deliv-budget-legend span { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.deliv-budget-legend strong { margin-left: auto; color: #0f172a; }

/* mock: gauge */
.deliv-gauge-wrap { position: relative; width: 200px; margin: 0 auto 0.4rem; }
.deliv-gauge { width: 100%; height: auto; }
.deliv-gauge-fill { transition: stroke-dashoffset 1s var(--ease-out-expo); }
.deliv-card.is-open .deliv-gauge-fill { animation: delivGauge 1.1s var(--ease-out-expo) 0.2s both; }
@keyframes delivGauge { from { stroke-dashoffset: 264; } to { stroke-dashoffset: 92; } }
.deliv-gauge-score {
    position: absolute;
    bottom: 4px; left: 0; right: 0;
    text-align: center;
}
.deliv-gauge-score strong { font-size: 1.7rem; font-weight: 800; color: #6366F1; }
.deliv-gauge-score span   { font-size: 0.8rem; color: var(--color-muted); }
.deliv-readiness { list-style: none; padding: 0; margin: 0.6rem 0 0; }
.deliv-readiness li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.84rem;
    color: #334155;
    padding: 0.3rem 0;
}
.deliv-ok-i   { color: #10B981; }
.deliv-warn-i { color: #f59e0b; }

/* ============ METRICS BAND ============ */
.strat-stats {
    padding: 3rem 0;
    background: linear-gradient(135deg, #f1f0ff 0%, #fff3ec 100%);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(15,23,42,0.06);
    border-bottom: 1px solid rgba(15,23,42,0.06);
}
.strat-stats::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(500px 240px at 20% 0%, rgba(255,107,53,0.12), transparent 65%),
                radial-gradient(500px 240px at 85% 100%, rgba(99,102,241,0.13), transparent 65%);
}
.strat-stats .container { position: relative; }
.strat-stat-num {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #FF8F66, #818CF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.strat-stat-suffix { -webkit-text-fill-color: transparent; }
.strat-stat-label {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 0.45rem;
}

/* ============ GANTT — scroll-triggered animation ============ */
.strategy-gantt-bar {
    width: 0;
    transition: width 1.1s var(--ease-out-expo);
}
.strategy-gantt-milestone {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}
.strategy-gantt.is-revealed .strategy-gantt-milestone { opacity: 1; transform: none; }
.strategy-gantt.is-revealed .strategy-gantt-milestone:nth-child(2) { transition-delay: 0.55s; }
.strategy-gantt.is-revealed .strategy-gantt-milestone:nth-child(3) { transition-delay: 0.75s; }
.strategy-gantt.is-revealed .strategy-gantt-milestone:nth-child(4) { transition-delay: 0.95s; }

/* ============ responsive ============ */
@media (max-width: 1199px) {
    /* below this width the row wraps — drop the connectors so boxes cluster cleanly */
    .phase-arrow { display: none; }
}
@media (max-width: 991px) {
    .strat-snapshot { margin-top: 0.5rem; }
}
@media (max-width: 575px) {
    .strat-snapshot { padding: 1.25rem 1.1rem 1.4rem; }
    .phase-nav { gap: 0.4rem 0.6rem; }
    .phase-tab { padding: 0.58rem 1rem; font-size: 0.82rem; }
    .phase-arrow { font-size: 0.7rem; }
    .phase-stage { padding: 1.4rem 1.15rem; }
    .strat-stat-num { font-size: 2rem; }
    .svc-flip, .svc-flip-inner { min-height: 318px; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
    [data-sreveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .strat-snapshot,
    .phase-card.is-active { animation: none !important; }
    .svc-illo [class^="illo-"],
    .phase-visual .pv-fade,
    .phase-visual .pv-grow,
    .phase-visual .pv-pop,
    .phase-visual .pv-pin { opacity: 1 !important; }
    .svc-illo .illo-ring, .svc-illo .illo-link, .svc-illo .illo-scan,
    .svc-illo .illo-trend, .svc-illo .illo-arrow,
    .phase-visual .pv-line, .phase-visual .pv-trend,
    .phase-visual .pv-path, .phase-visual .pv-ring { stroke-dashoffset: 0 !important; animation: none !important; }
    .strat-live-dot { animation: none !important; }
    .deliv-bar, .deliv-rm-bar::after, .deliv-arch-node,
    .deliv-checklist li, .deliv-risk-dot, .deliv-gauge-fill,
    .deliv-journey-line polyline { animation: none !important; }
    .deliv-rm-bar::after { width: var(--w); }
    .deliv-gauge-fill { stroke-dashoffset: 92; }
    .deliv-journey-line polyline { stroke-dashoffset: 0; }
    .svc-flip-inner { transition-duration: 0.01ms !important; }
    .deliv-card-panel { transition-duration: 0.01ms !important; }
    .deliv-card-mock { opacity: 1 !important; transform: none !important; }
}

/* ====================================================================
   DELIVERABLES — interactive preview mocks (hover states) + polish
   ==================================================================== */

/* --- card chrome polish --- */
.deliv-card-mock { box-shadow: 0 8px 22px rgba(15,23,42,0.07); }
.deliv-window-body { padding-top: 1.35rem; }

/* --- mock: bar chart — hover a bar to highlight + reveal its value --- */
.deliv-barchart .deliv-bar { transition: filter 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo), opacity 0.25s; }
.deliv-bar::after {
    content: attr(data-v);
    position: absolute;
    top: 6px; left: 0; right: 0;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 800;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.deliv-bar:hover { filter: brightness(1.1) saturate(1.15); box-shadow: 0 0 18px color-mix(in srgb, #6366F1 55%, transparent); }
.deliv-bar-you:hover { box-shadow: 0 0 18px color-mix(in srgb, #FF6B35 60%, transparent); }
.deliv-bar:hover::after { opacity: 1; }
.deliv-barchart:hover .deliv-bar:not(:hover) { opacity: 0.5; }

/* --- mock: roadmap — hover a phase row --- */
.deliv-rm-row { transition: background 0.2s; border-radius: 8px; }
.deliv-rm-bar, .deliv-rm-label { transition: filter 0.25s, box-shadow 0.25s, color 0.25s; }
.deliv-rm-row:hover { background: rgba(99,102,241,0.06); }
.deliv-rm-row:hover .deliv-rm-label { color: #0f172a; }
.deliv-rm-row:hover .deliv-rm-bar::after { filter: brightness(1.12); box-shadow: 0 3px 12px color-mix(in srgb, var(--c) 55%, transparent); }

/* --- mock: architecture — hover a layer --- */
.deliv-arch-node { transition: box-shadow 0.25s var(--ease-out-expo), background 0.25s; }
.deliv-arch-node.deliv-ok:hover   { background: rgba(16,185,129,0.16); box-shadow: 0 6px 18px rgba(16,185,129,0.3); }
.deliv-arch-node.deliv-warn:hover { background: rgba(245,158,11,0.18); box-shadow: 0 6px 18px rgba(245,158,11,0.32); }
.deliv-arch-node.deliv-risk:hover { background: rgba(239,68,68,0.16);  box-shadow: 0 6px 18px rgba(239,68,68,0.3); }

/* --- mock: journey — hover a touchpoint --- */
.deliv-journey-steps span { transition: transform 0.25s var(--ease-out-expo), color 0.25s; }
.deliv-journey-steps span:hover { transform: translateY(-3px) scale(1.07); color: #6366F1; }
.deliv-journey-steps .deliv-friction:hover { color: #dc2626; }

/* --- mock: checklist — hover a quick win --- */
.deliv-checklist li { transition: background 0.22s; border-radius: 8px; }
.deliv-checklist li i { transition: transform 0.25s var(--ease-out-expo); }
.deliv-checklist li:hover { background: rgba(99,102,241,0.07); }
.deliv-checklist li:hover i { transform: scale(1.25); }

/* --- mock: risk matrix — hover a cell --- */
.deliv-cell { transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s; }
.deliv-cell:hover { transform: scale(1.14); box-shadow: 0 5px 16px rgba(15,23,42,0.22); z-index: 2; }

/* --- mock: budget — hover the donut or a legend row --- */
.deliv-donut { transition: transform 0.35s var(--ease-out-expo); }
.deliv-budget:hover .deliv-donut { transform: scale(1.05) rotate(-4deg); }
.deliv-budget-legend li { transition: transform 0.25s var(--ease-out-expo); border-radius: 6px; }
.deliv-budget-legend li span { transition: transform 0.25s var(--ease-out-expo); }
.deliv-budget-legend li:hover { transform: translateX(5px); }
.deliv-budget-legend li:hover span { transform: scale(1.4); }

/* --- mock: AI readiness — hover a criterion --- */
.deliv-readiness li { transition: transform 0.25s var(--ease-out-expo), color 0.25s; }
.deliv-readiness li i { transition: transform 0.25s var(--ease-out-expo); }
.deliv-readiness li:hover { transform: translateX(5px); color: #0f172a; }
.deliv-readiness li:hover i { transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
    .deliv-barchart .deliv-bar, .deliv-rm-row, .deliv-rm-bar, .deliv-rm-label,
    .deliv-arch-node, .deliv-journey-steps span, .deliv-checklist li,
    .deliv-checklist li i, .deliv-cell, .deliv-donut, .deliv-budget-legend li,
    .deliv-budget-legend li span, .deliv-readiness li, .deliv-readiness li i {
        transition: none !important;
    }
    .deliv-cell:hover, .deliv-journey-steps span:hover, .deliv-budget-legend li:hover,
    .deliv-readiness li:hover, .deliv-budget:hover .deliv-donut { transform: none !important; }
}

/* ====================================================================
   WHY STRATEGY FIRST — flip-card extra interactivity
   ==================================================================== */
/* back-face content staggers in as the card flips */
.svc-flip-back > * { opacity: 0; transform: translateY(12px); }
.svc-flip:hover .svc-flip-back > *,
.svc-flip:focus-visible .svc-flip-back > *,
.svc-flip.is-flipped .svc-flip-back > * {
    animation: stratFadeUp 0.5s var(--ease-out-expo) 0.32s forwards;
}
.svc-flip:hover .svc-flip-back > *:last-child,
.svc-flip:focus-visible .svc-flip-back > *:last-child,
.svc-flip.is-flipped .svc-flip-back > *:last-child { animation-delay: 0.46s; }

/* the result chip reacts on hover */
.svc-flip .meta-chip { transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s; cursor: default; }
.svc-flip .meta-chip:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 7px 18px rgba(15,23,42,0.18); }

@media (prefers-reduced-motion: reduce) {
    .svc-flip-back > * { opacity: 1 !important; transform: none !important; animation: none !important; }
    .svc-flip .meta-chip { transition: none !important; }
}

/* ============================================================
   === WEB DEVELOPMENT PAGE — interactive redesign ============
   Hero deploy-pipeline panel · capability illustrations ·
   layered tech stack · architecture-icon motion
   ============================================================ */

/* --- Hero: left-aligned breadcrumb (two-column layout) --- */
.svc-hero-webdev .breadcrumb { justify-content: flex-start; }

/* --- Hero: live Deploy Pipeline panel --- */
.webdev-pipeline {
    position: relative;
    background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 1.5rem 1.6rem 1.7rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 30px 70px rgba(5,7,20,0.55);
    overflow: hidden;
    isolation: isolate;
}
.webdev-pipeline-glow {
    position: absolute;
    width: 320px; height: 320px;
    top: -150px; right: -120px;
    background: radial-gradient(circle, rgba(99,102,241,0.5), transparent 65%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}
.webdev-pipeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.15rem;
}
.webdev-pipeline-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
}
.webdev-pipeline-tag {
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    font-weight: 700;
    color: #A5B4FC;
    border: 1px solid rgba(129,140,248,0.4);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
}

/* pipeline stages */
.webdev-pipeline-stages { display: flex; flex-direction: column; gap: 0.55rem; }
.webdev-pipe-stage {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    animation: webdevPipeRow 4.8s var(--d, 0s) infinite;
}
.webdev-pipe-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(139,92,246,0.35));
    color: #C7D2FE;
    font-size: 0.82rem;
}
.webdev-pipe-label {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.86);
}
.webdev-pipe-status {
    width: 22px; height: 22px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #10B981;
    color: #fff;
    font-size: 0.62rem;
    animation: webdevPipeCheck 4.8s var(--d, 0s) infinite;
}
@keyframes webdevPipeRow {
    0%, 5%   { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); }
    12%, 90% { background: rgba(99,102,241,0.14); border-color: rgba(129,140,248,0.42); }
    100%     { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); }
}
@keyframes webdevPipeCheck {
    0%, 7%   { opacity: 0; transform: scale(0.2); }
    15%, 90% { opacity: 1; transform: scale(1); }
    100%     { opacity: 0; transform: scale(0.2); }
}

.webdev-pipeline-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
    margin: 1.25rem 0;
}

/* pipeline stat row */
.webdev-pipeline-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
}
.webdev-pl-stat {
    text-align: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0.7rem 0.35rem;
}
.webdev-pl-num {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #FF8F66, #818CF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.webdev-pl-label {
    font-size: 0.66rem;
    color: rgba(255,255,255,0.55);
    margin-top: 0.35rem;
}

/* --- Capabilities: animated SVG illustrations --- */
.webdev-cap-illo {
    width: 62px;
    height: 62px;
    margin-bottom: 1rem;
    transition: transform 0.4s var(--ease-out-expo);
}
.webdev-cap-illo svg { width: 100%; height: 100%; overflow: visible; }
.webdev-cap:hover .webdev-cap-illo { transform: scale(1.08) rotate(-4deg); }

/* --- Tech stack: interactive layered diagram --- */
.webdev-stack {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.webdev-layer {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 3px solid var(--lc, #6366F1);
    border-radius: 14px;
    padding: 0 1.2rem;
    cursor: pointer;
    outline: none;
    transition: transform 0.35s var(--ease-out-expo), background 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.webdev-layer:hover,
.webdev-layer:focus-visible {
    transform: translateX(4px);
    background: color-mix(in srgb, var(--lc, #6366F1) 16%, rgba(255,255,255,0.05));
    box-shadow: -6px 0 24px color-mix(in srgb, var(--lc, #6366F1) 32%, transparent);
}
.webdev-layer-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.05rem 0;
}
.webdev-layer-rank {
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--lc, #6366F1);
}
.webdev-layer-name {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}
.webdev-layer-ico { color: var(--lc, #6366F1); font-size: 1rem; }
.webdev-layer-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}
.webdev-layer-chev { transition: transform 0.35s var(--ease-out-expo); }
.webdev-layer:hover .webdev-layer-chev,
.webdev-layer:focus-visible .webdev-layer-chev { transform: rotate(180deg); }

.webdev-layer-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--ease-out-expo), opacity 0.35s, padding 0.45s var(--ease-out-expo);
}
.webdev-layer:hover .webdev-layer-body,
.webdev-layer:focus-visible .webdev-layer-body {
    max-height: 260px;
    opacity: 1;
    padding-bottom: 1.15rem;
}
.webdev-tech-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.84rem;
    color: rgba(255,255,255,0.88);
}
.webdev-tech-chip img { display: block; }
.webdev-tech-chip i { color: var(--lc, #6366F1); font-size: 0.78rem; }

/* touch devices / narrow viewports — show every layer expanded */
@media (hover: none), (max-width: 767.98px) {
    .webdev-layer-body { max-height: 260px; opacity: 1; padding-bottom: 1.15rem; }
    .webdev-layer-chev { display: none; }
}

/* --- Architecture principles: icon motion on hover --- */
.arch-principle-icon { transition: transform 0.4s var(--ease-out-expo); }
.arch-principle-card:hover .arch-principle-icon { transform: scale(1.12) rotate(-6deg); }

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .webdev-pipeline { margin-top: 0.5rem; }
}
@media (max-width: 575.98px) {
    .webdev-pipeline { padding: 1.25rem 1.1rem 1.4rem; }
    .webdev-layer { padding: 0 0.95rem; }
    .webdev-layer-meta { display: none; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .webdev-pipe-stage {
        animation: none !important;
        background: rgba(99,102,241,0.14);
        border-color: rgba(129,140,248,0.42);
    }
    .webdev-pipe-status { animation: none !important; opacity: 1; transform: none; }
    .webdev-cap-illo,
    .arch-principle-icon { transition: none !important; }
}

/* --- Capabilities section: blueprint grid pattern + soft brand glows --- */
.webdev-caps-section { position: relative; overflow: hidden; isolation: isolate; }
.webdev-caps-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(99,102,241,0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.13) 1px, transparent 1px),
        radial-gradient(circle at 0 0, rgba(99,102,241,0.42) 2.6px, transparent 0),
        radial-gradient(680px 420px at 88% -8%, rgba(255,107,53,0.16), transparent 72%),
        radial-gradient(640px 460px at 4% 108%, rgba(99,102,241,0.16), transparent 72%);
    background-size: 52px 52px, 52px 52px, 52px 52px, 100% 100%, 100% 100%;
    -webkit-mask-image: radial-gradient(ellipse 100% 86% at 50% 42%, #000 62%, transparent 100%);
            mask-image: radial-gradient(ellipse 100% 86% at 50% 42%, #000 62%, transparent 100%);
    pointer-events: none;
}
.webdev-caps-section > .container { position: relative; z-index: 1; }

/* --- Capabilities cards: accent-color shift on hover --- */
#what-we-build .webdev-cap {
    --cap: #6366F1;
    transition: transform 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo),
                box-shadow 0.35s var(--ease-out-expo), background-color 0.35s var(--ease-out-expo);
}
#what-we-build .webdev-cap h3 { transition: color 0.3s var(--ease-out-expo); }
#what-we-build .webdev-cap:hover {
    background-color: color-mix(in srgb, var(--cap) 11%, #fff);
    border-color: color-mix(in srgb, var(--cap) 55%, transparent);
    box-shadow: 0 24px 54px color-mix(in srgb, var(--cap) 26%, transparent);
}
#what-we-build .webdev-cap:hover h3 { color: var(--cap); }

/* --- Architecture (How we build) cards: accent-color shift on hover --- */
.webdev-arch {
    --cap: #6366F1;
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo),
                background-color 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo);
}
.webdev-arch h3 { transition: color 0.3s var(--ease-out-expo); }
.webdev-arch:hover {
    background-color: color-mix(in srgb, var(--cap) 11%, #fff);
    border-color: color-mix(in srgb, var(--cap) 50%, transparent);
    box-shadow: 0 24px 54px color-mix(in srgb, var(--cap) 26%, transparent);
}
.webdev-arch:hover h3 { color: var(--cap); }

/* --- "Why build with us" rows as accent-hover cards --- */
.webdev-why {
    --cap: #6366F1;
    padding: 1.2rem 1.35rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.07);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo),
                background-color 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo);
}
.webdev-why .why-list-icon {
    background: color-mix(in srgb, var(--cap) 15%, #fff);
    color: var(--cap);
    transition: transform 0.4s var(--ease-out-expo), background 0.35s, color 0.35s;
}
.webdev-why h3 { transition: color 0.3s var(--ease-out-expo); }
.webdev-why:hover {
    transform: translateY(-6px);
    background-color: color-mix(in srgb, var(--cap) 11%, #fff);
    border-color: color-mix(in srgb, var(--cap) 50%, transparent);
    box-shadow: 0 24px 54px color-mix(in srgb, var(--cap) 26%, transparent);
}
.webdev-why:hover h3 { color: var(--cap); }
.webdev-why:hover .why-list-icon { transform: scale(1.1) rotate(-6deg); }
@media (prefers-reduced-motion: reduce) {
    .webdev-why, .webdev-why .why-list-icon { transition: none !important; }
}

/* ============================================================
   === "A RECENT DELIVERY" — animated case-study dashboard ====
   ============================================================ */
.case-section { background: linear-gradient(180deg, #ffffff 0%, #f4f6fc 100%); }

/* left column: count-up stat tiles */
.case-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
}
.case-stat {
    --cs: #6366F1;
    padding: 0.95rem 0.9rem;
    background: color-mix(in srgb, var(--cs) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--cs) 22%, transparent);
    border-radius: var(--radius-md);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo),
                border-color 0.35s var(--ease-out-expo);
}
.case-stat:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--cs) 55%, transparent);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--cs) 24%, transparent);
}
.case-stat-num {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--cs);
}
.case-stat-label {
    font-size: 0.76rem;
    color: var(--color-muted);
    margin-top: 0.25rem;
}

/* left column: tech chip row */
.case-tech { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.case-tech-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-right: 0.15rem;
}

/* right column: dark stage + glow */
.case-spotlight-visual { position: relative; overflow: hidden; }
.case-glow {
    position: absolute;
    width: 360px; height: 360px;
    top: -120px; right: -120px;
    background: radial-gradient(circle, rgba(99,102,241,0.5), transparent 65%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

/* the app window */
.case-app {
    position: relative;
    z-index: 1;
    width: 100%;
    background: #fdfdff;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 34px 70px rgba(5,7,20,0.5);
    overflow: hidden;
    transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s var(--ease-out-expo);
}
.case-app:hover {
    transform: translateY(-6px);
    box-shadow: 0 42px 86px rgba(5,7,20,0.6);
}

/* window chrome */
.case-app-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    background: #eef0f6;
    border-bottom: 1px solid #e2e5ee;
}
.case-app-dot { width: 9px; height: 9px; border-radius: 50%; }
.case-app-dot:nth-child(1) { background: #FF6B35; }
.case-app-dot:nth-child(2) { background: #F59E0B; }
.case-app-dot:nth-child(3) { background: #10B981; }
.case-app-url {
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    color: #8a93a6;
    background: #fff;
    border: 1px solid #e2e5ee;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}
.case-app-url i { font-size: 0.6rem; color: #10B981; }

/* window body: nav + main */
.case-app-body { display: flex; }
.case-app-nav {
    flex-shrink: 0;
    width: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0.9rem 0;
    background: #f4f5fa;
    border-right: 1px solid #e9ebf2;
}
.case-app-logo {
    width: 22px; height: 22px;
    border-radius: 7px;
    background: linear-gradient(135deg, #6366F1, #FF6B35);
    margin-bottom: 0.3rem;
}
.case-app-navitem {
    width: 22px; height: 22px;
    border-radius: 7px;
    background: #dfe2ec;
}
.case-app-navitem.is-active {
    background: color-mix(in srgb, #6366F1 22%, #fff);
    box-shadow: inset 0 0 0 1.5px #6366F1;
}
.case-app-main {
    flex: 1;
    padding: 0.95rem 1.05rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* toolbar */
.case-app-toolbar { display: flex; align-items: center; justify-content: space-between; }
.case-app-crumb {
    width: 96px; height: 9px;
    border-radius: 5px;
    background: linear-gradient(90deg, #c9cee0, #e6e9f1);
}
.case-app-live {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: #0f9d6e;
    background: rgba(16,185,129,0.12);
    border-radius: 999px;
    padding: 0.16rem 0.5rem;
}
.case-app-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10B981;
    animation: stratLivePulse 2s infinite;
}

/* KPI tiles */
.case-app-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
.case-app-kpi {
    --k: #6366F1;
    padding: 0.6rem 0.55rem;
    background: color-mix(in srgb, var(--k) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--k) 20%, transparent);
    border-radius: 10px;
    transition: border-color 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}
.case-app-kpi:hover {
    border-color: color-mix(in srgb, var(--k) 60%, transparent);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--k) 26%, transparent);
}
.case-app-kpi-num {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--k);
}
.case-app-kpi-cap {
    font-size: 0.6rem;
    color: #9097a8;
    margin-top: 0.25rem;
}

/* chart card */
.case-app-chart {
    background: #f7f8fc;
    border: 1px solid #eceef5;
    border-radius: 11px;
    padding: 0.7rem 0.8rem 0.5rem;
}
.case-app-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.2rem;
}
.case-app-chart-cap { font-size: 0.7rem; font-weight: 700; color: #5b6272; }
.case-app-chart-tag {
    font-size: 0.62rem;
    font-weight: 700;
    color: #0f9d6e;
    background: rgba(16,185,129,0.12);
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
}
.case-app-chart-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* project rows with progress bars */
.case-app-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.case-app-row { display: flex; align-items: center; gap: 0.6rem; }
.case-app-row-label {
    flex-shrink: 0;
    width: 42px; height: 8px;
    border-radius: 4px;
    background: #dfe2ec;
}
.case-app-row-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: #e9ebf2;
    overflow: hidden;
}
.case-app-row-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c));
    transition: width 0.95s var(--ease-out-expo);
}

/* ---- reveal-driven build animations ---- */
.case-app-kpi,
.case-app-navitem,
.case-app-logo,
.case-app-crumb,
.case-app-live { opacity: 0; }
.case-chart-area { opacity: 0; }
.case-chart-dot {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.25s var(--ease-out-expo);
}
.case-chart-line { stroke-dasharray: 600; stroke-dashoffset: 600; }

@keyframes caseFade   { to { opacity: 1; } }
@keyframes caseKpiIn  { from { opacity: 0; transform: scale(0.8) translateY(8px); } to { opacity: 1; transform: none; } }

.case-spotlight.is-revealed .case-app-logo            { animation: caseFade 0.4s ease 0.1s both; }
.case-spotlight.is-revealed .case-app-navitem         { animation: caseFade 0.4s ease both; }
.case-spotlight.is-revealed .case-app-navitem:nth-of-type(2) { animation-delay: 0.16s; }
.case-spotlight.is-revealed .case-app-navitem:nth-of-type(3) { animation-delay: 0.24s; }
.case-spotlight.is-revealed .case-app-navitem:nth-of-type(4) { animation-delay: 0.32s; }
.case-spotlight.is-revealed .case-app-navitem:nth-of-type(5) { animation-delay: 0.40s; }
.case-spotlight.is-revealed .case-app-crumb           { animation: caseFade 0.4s ease 0.2s both; }
.case-spotlight.is-revealed .case-app-live            { animation: caseFade 0.4s ease 0.3s both; }
.case-spotlight.is-revealed .case-app-kpi             { animation: caseKpiIn 0.5s var(--ease-out-expo) both; }
.case-spotlight.is-revealed .case-app-kpi:nth-child(1){ animation-delay: 0.30s; }
.case-spotlight.is-revealed .case-app-kpi:nth-child(2){ animation-delay: 0.42s; }
.case-spotlight.is-revealed .case-app-kpi:nth-child(3){ animation-delay: 0.54s; }
.case-spotlight.is-revealed .case-chart-area          { animation: caseFade 0.6s ease 0.6s both; }
.case-spotlight.is-revealed .case-chart-line          { animation: stratDraw 1.1s var(--ease-out-expo) 0.65s forwards; }
.case-spotlight.is-revealed .case-chart-dot           { animation: caseFade 0.35s ease both; }
.case-spotlight.is-revealed .case-chart-dot:nth-of-type(1){ animation-delay: 0.80s; }
.case-spotlight.is-revealed .case-chart-dot:nth-of-type(2){ animation-delay: 0.92s; }
.case-spotlight.is-revealed .case-chart-dot:nth-of-type(3){ animation-delay: 1.04s; }
.case-spotlight.is-revealed .case-chart-dot:nth-of-type(4){ animation-delay: 1.16s; }
.case-spotlight.is-revealed .case-chart-dot:nth-of-type(5){ animation-delay: 1.28s; }
.case-spotlight.is-revealed .case-chart-dot:nth-of-type(6){ animation-delay: 1.40s; }
.case-spotlight.is-revealed .case-app-row:nth-child(1) .case-app-row-bar { width: 86%; transition-delay: 0.7s; }
.case-spotlight.is-revealed .case-app-row:nth-child(2) .case-app-row-bar { width: 62%; transition-delay: 0.85s; }
.case-spotlight.is-revealed .case-app-row:nth-child(3) .case-app-row-bar { width: 48%; transition-delay: 1.0s; }

/* chart data point hover */
.case-chart-dot:hover { transform: scale(1.75); }
.case-chart-dot-hi { filter: drop-shadow(0 0 5px rgba(255,107,53,0.6)); }

/* responsive */
@media (max-width: 575.98px) {
    .case-app-nav { width: 38px; }
    .case-app-main { padding: 0.8rem 0.85rem 1rem; }
    .case-stat-num { font-size: 1.4rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .case-app-kpi, .case-app-navitem, .case-app-logo, .case-app-crumb,
    .case-app-live, .case-chart-area, .case-chart-dot {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .case-chart-line { stroke-dashoffset: 0 !important; animation: none !important; }
    .case-app-row-bar { transition: none !important; }
    .case-app, .case-stat, .case-app-kpi { transition: none !important; }
}

/* ====================================================================
   === ECOMMERCE SERVICE PAGE — interactive redesign ==================
   Live storefront snapshot · platform explorer · capability flips ·
   funnel + CRO stage explorer · vitals dashboard · orbital hub
   ==================================================================== */

/* --- Hero: left-aligned breadcrumb --- */
.svc-hero-ecom .breadcrumb { justify-content: flex-start; }

/* --- Hero: Live Storefront snapshot (extends .strat-snapshot) --- */
.ecom-storefront .strat-snapshot-glow {
    background: radial-gradient(circle, rgba(99,102,241,0.5), transparent 65%);
}
.ecom-kpi-suffix {
    font-size: 1.05rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FF8F66, #818CF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 1px;
}

/* product rail */
.ecom-product-rail {
    position: relative;
    height: 122px;
    margin-bottom: 1.1rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}
.ecom-product {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo);
    pointer-events: none;
}
.ecom-product.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.ecom-product-img {
    width: 64px; height: 64px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--pc, #FF6B35) 50%, transparent), color-mix(in srgb, var(--pc, #FF6B35) 20%, transparent));
    border: 1px solid color-mix(in srgb, var(--pc, #FF6B35) 45%, transparent);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--pc, #FF6B35) 35%, transparent);
}
.ecom-product-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.ecom-product-name {
    font-size: 0.94rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ecom-product-price {
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pc, #FF6B35);
}
.ecom-product-cta {
    flex-shrink: 0;
    border: 0;
    background: linear-gradient(135deg, var(--pc, #FF6B35), color-mix(in srgb, var(--pc, #FF6B35) 60%, #fff));
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    cursor: default;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--pc, #FF6B35) 38%, transparent);
}

/* --- PLATFORMS: admin mock SVG --- */
.ecom-admin-mock {
    padding: 0.65rem;
    background: linear-gradient(160deg, #f5f7fc, #e9edf6);
}
.ecom-admin-mock svg { width: 100%; height: auto; }
.phase-card-best { font-size: 0.92rem; color: #475569; margin-bottom: 0.6rem; }
.phase-card-best strong { color: #0f172a; }

/* --- WHAT WE BUILD: ecom flip illos draw the same as svc-illo --- */
.ecom-illo svg .illo-bar,
.ecom-illo svg .illo-core { transform-box: fill-box; transform-origin: center; }
.ecom-illo svg .illo-trend {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
}
[data-sreveal].is-revealed .ecom-illo .illo-trend {
    animation: stratDraw 0.9s var(--ease-out-expo) 0.15s forwards;
}
[data-sreveal].is-revealed .ecom-illo .illo-bar {
    animation: stratPop 0.6s var(--ease-out-expo) 0.5s both;
}

/* --- CRO: animated funnel viz (label | tapered bar | count) --- */
.ecom-funnel {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.4rem 0;
}
.ecom-funnel-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    position: relative;
}
.ecom-funnel-rowlabel {
    flex-shrink: 0;
    width: 96px;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.78);
}
.ecom-funnel-track {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}
.ecom-funnel-bar {
    display: block;
    height: 44px;
    width: 0;
    max-width: var(--w);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 38%, transparent);
    transition: transform 0.3s var(--ease-out-expo);
}
[data-sreveal].is-revealed .ecom-funnel-bar {
    animation: ecomFunnelGrow 0.9s var(--ease-out-expo) both;
}
[data-sreveal].is-revealed .ecom-funnel-row:nth-child(1) .ecom-funnel-bar { animation-delay: 0.1s; }
[data-sreveal].is-revealed .ecom-funnel-row:nth-child(2) .ecom-funnel-bar { animation-delay: 0.22s; }
[data-sreveal].is-revealed .ecom-funnel-row:nth-child(3) .ecom-funnel-bar { animation-delay: 0.34s; }
[data-sreveal].is-revealed .ecom-funnel-row:nth-child(4) .ecom-funnel-bar { animation-delay: 0.46s; }
[data-sreveal].is-revealed .ecom-funnel-row:nth-child(5) .ecom-funnel-bar { animation-delay: 0.58s; }
@keyframes ecomFunnelGrow {
    from { width: 0; opacity: 0; }
    to   { width: var(--w); opacity: 1; }
}
.ecom-funnel-bar:hover { transform: translateY(-2px) scale(1.02); }
.ecom-funnel-rownum {
    flex-shrink: 0;
    width: 56px;
    text-align: left;
    font-family: var(--font-mono, monospace);
    font-size: 0.84rem;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
}
.ecom-funnel-friction .ecom-funnel-bar {
    position: relative;
}
.ecom-funnel-friction .ecom-funnel-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    animation: ecomFunnelPulse 2.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ecomFunnelPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(239,68,68,0.45), 0 0 14px rgba(239,68,68,0.25); }
    50%      { box-shadow: 0 0 0 3px rgba(239,68,68,0.6),  0 0 26px rgba(239,68,68,0.45); }
}
.ecom-funnel-flag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    background: #EF4444;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    box-shadow: 0 6px 14px rgba(239,68,68,0.45);
    z-index: 2;
}
.ecom-funnel-flag i { margin-right: 0.25rem; font-size: 0.6rem; }

/* CRO stage explorer — dark variant */
.ecom-cro-explorer .phase-nav { margin-bottom: 1.4rem; }
.phase-nav-compact { gap: 0.45rem; }
.phase-nav-compact .phase-tab {
    flex: 1 1 110px;
    padding: 0.75rem 0.7rem;
    font-size: 0.85rem;
}
.phase-stage-dark {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 18px 44px rgba(5,7,20,0.5);
    padding: 1.5rem 1.75rem;
}
.phase-stage-dark .phase-card-list li { color: rgba(255,255,255,0.78); }
.ecom-cro-mock {
    margin-top: 1.1rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
}

/* CRO mock: heatmap */
.ecom-heatmap {
    position: relative;
    height: 160px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, transparent 0%, transparent 49.5%, rgba(255,255,255,0.06) 49.5%, rgba(255,255,255,0.06) 50.5%, transparent 50.5%),
        linear-gradient(0deg,  transparent 0%, transparent 49.5%, rgba(255,255,255,0.06) 49.5%, rgba(255,255,255,0.06) 50.5%, transparent 50.5%),
        rgba(255,255,255,0.02);
    overflow: hidden;
}
.ecom-heat-dot {
    position: absolute;
    width: var(--size, 30px);
    height: var(--size, 30px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,0.85) 0%, rgba(245,158,11,0.15) 60%, transparent 75%);
    transform: translate(-50%, -50%);
    animation: ecomHeatPulse 3.2s ease-in-out infinite;
}
.ecom-heat-dot.ecom-heat-hot { background: radial-gradient(circle, rgba(239,68,68,0.9) 0%, rgba(239,68,68,0.2) 60%, transparent 75%); }
.ecom-heat-dot.ecom-heat-cold { background: radial-gradient(circle, rgba(99,102,241,0.7) 0%, rgba(99,102,241,0.15) 60%, transparent 75%); }
@keyframes ecomHeatPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
    50%      { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}

/* CRO mock: hypothesis list */
.ecom-hypotheses { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ecom-hypotheses li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.86);
    padding: 0.55rem 0.75rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
}
.ecom-hyp-tag {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    color: #fff;
    background: var(--c, #10B981);
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    letter-spacing: 0.05em;
}
.ecom-hyp-lift {
    margin-left: auto;
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    font-weight: 700;
    color: #34D399;
}

/* CRO mock: A/B test bars */
.ecom-ab-test { display: flex; flex-direction: column; gap: 0.7rem; }
.ecom-ab-bar { display: flex; align-items: center; gap: 0.65rem; }
.ecom-ab-label {
    flex-shrink: 0;
    width: 70px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}
.ecom-ab-track {
    position: relative;
    flex: 1;
    height: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.ecom-ab-fill {
    position: absolute;
    inset: 0;
    width: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c, #10B981));
    border-radius: 999px;
    transition: width 1.1s var(--ease-out-expo);
}
.phase-card.is-active .ecom-ab-fill { width: var(--w); }
.ecom-ab-num {
    flex-shrink: 0;
    width: 78px;
    text-align: right;
    font-family: var(--font-mono, monospace);
    font-size: 0.84rem;
    font-weight: 700;
    color: rgba(255,255,255,0.86);
}
.ecom-ab-win { color: #34D399; }
.ecom-ab-win i { font-size: 0.7rem; margin-left: 0.15rem; }
.ecom-ab-meta {
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.25rem;
    margin-left: 78px;
}

/* CRO mock: ship list */
.ecom-ship-list { list-style: none; padding: 0; margin: 0; }
.ecom-ship-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.86);
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.ecom-ship-list li:last-child { border-bottom: 0; }
.ecom-ship-list li i.fa-circle-check  { color: #10B981; }
.ecom-ship-list li i.fa-circle-xmark  { color: #94a3b8; }
.ecom-ship-tag {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
}
.ecom-ship-win  { color: #34D399; background: rgba(16,185,129,0.14); }
.ecom-ship-lose { color: #94a3b8; background: rgba(148,163,184,0.16); text-decoration: line-through; }

/* --- PERFORMANCE & SEO: interactive Audit Lab --- */
.ecom-perf-section { position: relative; overflow: hidden; }
.ecom-perf-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(680px 360px at 12% 15%, rgba(99,102,241,0.07), transparent 65%),
        radial-gradient(620px 320px at 90% 90%, rgba(255,107,53,0.08), transparent 65%);
    pointer-events: none;
}

.ecom-audit-wrap { max-width: 1120px; margin: 0 auto; }
.ecom-audit {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 22px;
    box-shadow: 0 28px 70px rgba(15,23,42,0.13);
    overflow: hidden;
}

/* window chrome bar */
.ecom-audit-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
    background: linear-gradient(180deg, #f4f6fb, #eef1f8);
    border-bottom: 1px solid rgba(15,23,42,0.07);
    flex-wrap: wrap;
}
.ecom-audit-bar .deliv-window-name { margin-left: 0.4rem; }
.ecom-audit-pulse {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #047857;
    background: rgba(16,185,129,0.13);
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    transition: color 0.4s, background 0.4s;
}
.ecom-audit-pulse .strat-live-dot { width: 7px; height: 7px; }
.ecom-audit[data-mode="before"] .ecom-audit-pulse {
    color: #b91c1c;
    background: rgba(239,68,68,0.12);
}
.ecom-audit[data-mode="before"] .ecom-audit-pulse .strat-live-dot {
    background: #EF4444;
    animation: stratLivePulseBad 2s infinite;
}
@keyframes stratLivePulseBad {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* segmented mode toggle */
.ecom-mode-toggle {
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
    padding: 4px;
    background: rgba(15,23,42,0.06);
    border-radius: 999px;
    margin: 0 0.5rem;
}
.ecom-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    background: transparent;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.3s var(--ease-out-expo), color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-out-expo);
    white-space: nowrap;
}
.ecom-mode-btn i { font-size: 0.74rem; }
.ecom-mode-btn:hover { color: #0f172a; }
.ecom-mode-btn.is-active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 4px 14px rgba(15,23,42,0.1);
}
.ecom-mode-btn[data-mode="before"].is-active {
    color: #b91c1c;
    box-shadow: 0 4px 14px rgba(239,68,68,0.22);
}
.ecom-mode-btn[data-mode="before"].is-active i { color: #EF4444; }
.ecom-mode-btn[data-mode="after"].is-active {
    color: #047857;
    box-shadow: 0 4px 14px rgba(16,185,129,0.22);
}
.ecom-mode-btn[data-mode="after"].is-active i { color: #10B981; }

.ecom-audit-body { padding: 1.9rem 1.7rem 1.6rem; }

/* big Performance Score gauge */
.ecom-score {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 0.65rem;
}
.ecom-score-svg { width: 100%; height: 100%; display: block; }
.ecom-score-fill {
    stroke: url(#ecomScoreGood);
    transition: stroke-dashoffset 1.1s var(--ease-out-expo), stroke 0.5s;
}
.ecom-audit[data-mode="before"] .ecom-score-fill { stroke: url(#ecomScoreBad); }
.ecom-score-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.ecom-score-num {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
    color: #10B981;
    font-family: var(--font-display);
    letter-spacing: -0.04em;
    transition: color 0.5s var(--ease-out-expo);
}
.ecom-audit[data-mode="before"] .ecom-score-num { color: #EF4444; }
.ecom-score-cap {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
    margin-top: 0.45rem;
}
.ecom-score-grade {
    position: absolute;
    top: 14px;
    right: 4px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981, #34D399);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(16,185,129,0.36);
    transition: background 0.5s, box-shadow 0.5s, transform 0.5s var(--ease-out-expo);
}
.ecom-score-grade::after { content: attr(data-after); }
.ecom-audit[data-mode="before"] .ecom-score-grade::after { content: attr(data-before); }
.ecom-audit[data-mode="before"] .ecom-score-grade {
    background: linear-gradient(135deg, #EF4444, #FCA5A5);
    box-shadow: 0 6px 18px rgba(239,68,68,0.36);
}
.ecom-score-meta {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
.ecom-score-label { font-size: 0.78rem; font-weight: 600; color: #0f172a; }
.ecom-score-delta {
    display: inline-block;
    margin: 0 auto;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(16,185,129,0.12);
    color: #047857;
    transition: background 0.4s, color 0.4s;
}
.ecom-score-delta::after { content: attr(data-after); }
.ecom-audit[data-mode="before"] .ecom-score-delta::after { content: attr(data-before); }
.ecom-audit[data-mode="before"] .ecom-score-delta {
    background: rgba(239,68,68,0.1);
    color: #b91c1c;
}

/* 2x2 mini dial grid */
.ecom-mini-grid { --bs-gutter-x: 1rem; }
.ecom-mini {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    background: #f7f9fd;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 14px;
    transition: transform 0.35s var(--ease-out-expo), background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.ecom-mini:hover {
    transform: translateY(-3px);
    background: #fff;
    border-color: rgba(99,102,241,0.25);
    box-shadow: 0 14px 32px rgba(99,102,241,0.16);
}
.ecom-mini-dial {
    position: relative;
    width: 84px;
    height: 84px;
    flex-shrink: 0;
}
.ecom-mini-dial svg { width: 100%; height: 100%; display: block; }
.ecom-mini-fill {
    transition: stroke-dashoffset 1.1s var(--ease-out-expo), stroke 0.5s;
}
/* per-metric "after" (good) colors */
.ecom-mini[data-metric="lcp"] .ecom-mini-fill { stroke: #10B981; }
.ecom-mini[data-metric="inp"] .ecom-mini-fill { stroke: #6366F1; }
.ecom-mini[data-metric="cls"] .ecom-mini-fill { stroke: #818CF8; }
.ecom-mini[data-metric="ai"]  .ecom-mini-fill { stroke: #FF6B35; }
/* "before" (bad) all turn red */
.ecom-audit[data-mode="before"] .ecom-mini-fill { stroke: #EF4444; }

.ecom-mini-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ecom-mini-num {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    transition: color 0.5s;
}
.ecom-mini-unit {
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b;
    margin-left: 1px;
    transition: color 0.5s;
}
.ecom-mini[data-metric="lcp"] .ecom-mini-num { color: #047857; }
.ecom-mini[data-metric="inp"] .ecom-mini-num { color: #4338ca; }
.ecom-mini[data-metric="cls"] .ecom-mini-num { color: #4f46e5; }
.ecom-mini[data-metric="ai"]  .ecom-mini-num { color: #c2410c; }
.ecom-audit[data-mode="before"] .ecom-mini-num { color: #b91c1c; }
.ecom-mini-text { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.ecom-mini-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.01em;
}
.ecom-mini-link {
    display: inline-grid;
    place-items: center;
    width: 18px; height: 18px;
    color: #6366F1;
    font-size: 0.6rem;
    border-radius: 50%;
    background: rgba(99,102,241,0.12);
    transition: background 0.25s, transform 0.25s;
}
.ecom-mini-link:hover { background: rgba(99,102,241,0.22); transform: scale(1.15); }
.ecom-mini-cap { font-size: 0.7rem; color: #64748b; }

/* filmstrip — page render timeline */
.ecom-filmstrip {
    margin-top: 1.9rem;
    padding-top: 1.5rem;
    border-top: 1px dashed rgba(15,23,42,0.1);
}
.ecom-film-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ecom-film-cap {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.ecom-film-cap i { color: #6366F1; }
.ecom-film-lcp {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #047857;
    background: rgba(16,185,129,0.12);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    transition: color 0.4s, background 0.4s;
}
.ecom-film-lcp i { font-size: 0.7rem; }
.ecom-audit[data-mode="before"] .ecom-film-lcp {
    color: #b91c1c;
    background: rgba(239,68,68,0.12);
}
.ecom-audit[data-mode="before"] .ecom-film-lcp i { color: #EF4444; }
.ecom-audit[data-mode="before"] .ecom-film-lcp i::before { content: '\f071'; /* triangle-exclamation */ }

.ecom-film-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.65rem;
}
.ecom-film-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.ecom-film-mini {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    background: #f4f6fb;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 10px;
    padding: 0.45rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.ecom-film-frame:hover .ecom-film-mini {
    transform: translateY(-3px);
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 12px 24px rgba(99,102,241,0.18);
}
.ecom-film-bar {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(135deg, #FF6B35, #6366F1);
    width: 0;
    transition: width 0.5s var(--ease-out-expo) var(--d, 0s);
}
.ecom-film-skel {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #d8dde9;
    width: 0;
    transition: width 0.5s var(--ease-out-expo) var(--d, 0s), background 0.4s;
}
.ecom-film-skel:nth-of-type(2) { width: 60%; }
.ecom-film-t {
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    color: #64748b;
}
.ecom-film-marker {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
    background: #10B981;
    padding: 0.15rem 0.48rem;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(16,185,129,0.4);
    z-index: 2;
    transition: background 0.4s, box-shadow 0.4s, opacity 0.4s;
}
.ecom-audit[data-mode="before"] .ecom-film-marker {
    background: #94a3b8;
    box-shadow: none;
    opacity: 0.55;
}

/* render stages — AFTER mode (fast): content fills early */
.ecom-audit[data-mode="after"] [data-stage="1"] .ecom-film-bar  { width: 100%; }
.ecom-audit[data-mode="after"] [data-stage="2"] .ecom-film-bar  { width: 100%; }
.ecom-audit[data-mode="after"] [data-stage="2"] .ecom-film-skel { width: 75%; --d: 0.1s; }
.ecom-audit[data-mode="after"] [data-stage="2"] .ecom-film-skel:nth-of-type(2) { width: 45%; --d: 0.15s; }
.ecom-audit[data-mode="after"] [data-stage="3"] .ecom-film-bar  { width: 100%; }
.ecom-audit[data-mode="after"] [data-stage="3"] .ecom-film-mini { background: linear-gradient(180deg, #f4f6fb 30%, #e3e8f4 100%); }
.ecom-audit[data-mode="after"] [data-stage="3"] .ecom-film-skel { width: 85%; height: 22px; background: linear-gradient(135deg, #FF8F66, #6366F1); border-radius: 6px; }
.ecom-audit[data-mode="after"] [data-stage="3"] .ecom-film-skel:nth-of-type(2) { height: 6px; width: 70%; background: #d8dde9; }
.ecom-audit[data-mode="after"] [data-stage="4"] .ecom-film-bar  { width: 100%; }
.ecom-audit[data-mode="after"] [data-stage="4"] .ecom-film-mini { background: linear-gradient(180deg, #fff 30%, #f1f4fb 100%); border-color: rgba(16,185,129,0.45); box-shadow: 0 0 0 2px rgba(16,185,129,0.25); }
.ecom-audit[data-mode="after"] [data-stage="4"] .ecom-film-skel { width: 100%; height: 26px; background: linear-gradient(135deg, #FF8F66, #6366F1); border-radius: 6px; }
.ecom-audit[data-mode="after"] [data-stage="4"] .ecom-film-skel:nth-of-type(2) { height: 6px; width: 90%; background: #cdd5e4; }
.ecom-audit[data-mode="after"] [data-stage="5"] .ecom-film-bar  { width: 100%; }
.ecom-audit[data-mode="after"] [data-stage="5"] .ecom-film-mini { background: #fff; }
.ecom-audit[data-mode="after"] [data-stage="5"] .ecom-film-skel { width: 100%; height: 28px; background: linear-gradient(135deg, #FF8F66, #6366F1); border-radius: 6px; }
.ecom-audit[data-mode="after"] [data-stage="5"] .ecom-film-skel:nth-of-type(2) { height: 5px; width: 100%; background: #b0b9cd; }

/* render stages — BEFORE mode (slow): mostly empty until end */
.ecom-audit[data-mode="before"] [data-stage="1"] .ecom-film-bar { width: 0; }
.ecom-audit[data-mode="before"] [data-stage="2"] .ecom-film-bar { width: 40%; }
.ecom-audit[data-mode="before"] [data-stage="3"] .ecom-film-bar { width: 80%; }
.ecom-audit[data-mode="before"] [data-stage="3"] .ecom-film-skel { width: 50%; }
.ecom-audit[data-mode="before"] [data-stage="3"] .ecom-film-skel:nth-of-type(2) { width: 30%; }
.ecom-audit[data-mode="before"] [data-stage="4"] .ecom-film-bar { width: 100%; }
.ecom-audit[data-mode="before"] [data-stage="4"] .ecom-film-mini { border-color: rgba(239,68,68,0.35); box-shadow: 0 0 0 2px rgba(239,68,68,0.18); }
.ecom-audit[data-mode="before"] [data-stage="4"] .ecom-film-skel { width: 80%; }
.ecom-audit[data-mode="before"] [data-stage="4"] .ecom-film-skel:nth-of-type(2) { width: 60%; }
.ecom-audit[data-mode="before"] [data-stage="5"] .ecom-film-bar { width: 100%; }
.ecom-audit[data-mode="before"] [data-stage="5"] .ecom-film-skel { width: 95%; height: 22px; background: #d8dde9; border-radius: 6px; }
.ecom-audit[data-mode="before"] [data-stage="5"] .ecom-film-skel:nth-of-type(2) { height: 6px; width: 78%; background: #d8dde9; }

/* optimization tag rail */
.ecom-perf-stack {
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px dashed rgba(15,23,42,0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.85rem;
}
.ecom-perf-stack-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-right: 0.4rem;
}
.ecom-perf-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ecom-perf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    background: rgba(99,102,241,0.07);
    border: 1px solid rgba(99,102,241,0.18);
    border-radius: 999px;
    padding: 0.36rem 0.85rem;
    transition: transform 0.3s var(--ease-out-expo), background 0.3s, color 0.3s, box-shadow 0.3s, border-color 0.3s;
    cursor: default;
}
.ecom-perf-chip i {
    font-size: 0.74rem;
    color: #6366F1;
    transition: color 0.3s, transform 0.3s var(--ease-out-expo);
}
.ecom-perf-chip:hover {
    transform: translateY(-3px) scale(1.04);
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(255,107,53,0.18));
    border-color: rgba(99,102,241,0.45);
    box-shadow: 0 10px 22px rgba(99,102,241,0.22);
    color: #0f172a;
}
.ecom-perf-chip:hover i { color: #FF6B35; transform: rotate(-12deg) scale(1.15); }
/* stagger chip reveal on scroll-in */
[data-sreveal].is-revealed .ecom-perf-chip { animation: stratFadeUp 0.5s var(--ease-out-expo) both; }
[data-sreveal].is-revealed .ecom-perf-chip:nth-child(1) { animation-delay: 0.1s; }
[data-sreveal].is-revealed .ecom-perf-chip:nth-child(2) { animation-delay: 0.16s; }
[data-sreveal].is-revealed .ecom-perf-chip:nth-child(3) { animation-delay: 0.22s; }
[data-sreveal].is-revealed .ecom-perf-chip:nth-child(4) { animation-delay: 0.28s; }
[data-sreveal].is-revealed .ecom-perf-chip:nth-child(5) { animation-delay: 0.34s; }
[data-sreveal].is-revealed .ecom-perf-chip:nth-child(6) { animation-delay: 0.40s; }
[data-sreveal].is-revealed .ecom-perf-chip:nth-child(7) { animation-delay: 0.46s; }
[data-sreveal].is-revealed .ecom-perf-chip:nth-child(8) { animation-delay: 0.52s; }
[data-sreveal].is-revealed .ecom-perf-chip:nth-child(9) { animation-delay: 0.58s; }
[data-sreveal].is-revealed .ecom-perf-chip:nth-child(10) { animation-delay: 0.64s; }

/* responsive — collapse mode toggle wrap, stack mini dials */
@media (max-width: 767.98px) {
    .ecom-audit-bar { padding: 0.7rem 0.85rem; }
    .ecom-mode-toggle { order: 4; flex: 1 0 100%; margin: 0.6rem 0 0; justify-content: center; }
    .ecom-audit-body { padding: 1.4rem 1.1rem 1.2rem; }
    .ecom-score { width: 170px; height: 170px; }
    .ecom-score-num { font-size: 2.6rem; }
    .ecom-film-mini { padding: 0.3rem 0.35rem; gap: 0.25rem; }
    .ecom-film-bar { height: 6px; }
    .ecom-film-skel { height: 4px; }
    .ecom-film-marker { font-size: 0.5rem; padding: 0.12rem 0.35rem; }
    .ecom-film-t { font-size: 0.62rem; }
}

/* ============ HOW WE WORK — interactive project timeline ============ */
.ecom-process-section { position: relative; }
.ecom-process { max-width: 1140px; margin: 0 auto; }

/* Stepper bar */
.ecom-process-stepper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    margin-bottom: 2.5rem;
    padding: 0 0.4rem;
}
.ecom-process-line {
    position: absolute;
    top: 22px;
    left: calc(100% / 12);
    right: calc(100% / 12);
    height: 4px;
    background: #e2e8f0;
    border-radius: 999px;
    z-index: 0;
}
.ecom-process-line-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, #6366F1 0%, #818CF8 18%, #FF6B35 40%, #FF8F66 60%, #10B981 80%, #34D399 100%);
    border-radius: 999px;
    transition: width 0.7s var(--ease-out-expo);
    box-shadow: 0 0 16px rgba(99,102,241,0.35);
}

.ecom-process-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.25rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: center;
    transition: transform 0.3s var(--ease-out-expo);
}
.ecom-process-step:hover { transform: translateY(-3px); }
.ecom-process-num {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #e2e8f0;
    color: #94a3b8;
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    transition: background 0.45s var(--ease-out-expo), color 0.45s, border-color 0.45s, box-shadow 0.45s, transform 0.45s var(--ease-out-expo);
}
.ecom-process-step.is-past .ecom-process-num {
    background: color-mix(in srgb, var(--sc, #6366F1) 15%, #fff);
    border-color: color-mix(in srgb, var(--sc, #6366F1) 55%, transparent);
    color: var(--sc, #6366F1);
}
.ecom-process-step.is-active .ecom-process-num {
    background: linear-gradient(135deg, var(--sc, #6366F1), color-mix(in srgb, var(--sc, #6366F1) 55%, #fff));
    border-color: transparent;
    color: #fff;
    transform: scale(1.18);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--sc, #6366F1) 45%, transparent),
                0 0 0 6px color-mix(in srgb, var(--sc, #6366F1) 14%, transparent);
}
.ecom-process-step-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #475569;
    transition: color 0.4s;
}
.ecom-process-step.is-active .ecom-process-step-name { color: var(--sc, #6366F1); }
.ecom-process-step-week {
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    color: #94a3b8;
    letter-spacing: 0.04em;
}
.ecom-process-step.is-active .ecom-process-step-week { color: #64748b; }

/* Detail stage */
.ecom-process-stage {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 22px;
    box-shadow: 0 28px 70px rgba(15,23,42,0.1);
    padding: 2.25rem 2rem;
    position: relative;
    overflow: hidden;
    min-height: 460px;
}
.ecom-process-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(520px 280px at 8% 12%, color-mix(in srgb, var(--stage-c, #6366F1) 12%, transparent), transparent 65%),
        radial-gradient(520px 280px at 92% 88%, color-mix(in srgb, var(--stage-c, #6366F1) 8%, transparent), transparent 65%);
    pointer-events: none;
    transition: background 0.6s var(--ease-out-expo);
    opacity: 0.85;
}
.ecom-process-stage > * { position: relative; }
.ecom-process-panel { display: none; }
.ecom-process-panel.is-active { display: block; animation: stratFadeUp 0.55s var(--ease-out-expo); }

.ecom-process-kicker {
    display: inline-block;
    font-family: var(--font-mono, monospace);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sc, #6366F1);
    margin-bottom: 0.6rem;
}
.ecom-process-deliv {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}
.ecom-process-deliv li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.96rem;
    color: #334155;
    padding: 0.42rem 0;
    border-bottom: 1px dashed rgba(15,23,42,0.08);
}
.ecom-process-deliv li:last-child { border-bottom: 0; }
.ecom-process-deliv li i {
    color: var(--sc, #6366F1);
    font-size: 1rem;
}
.ecom-process-panel.is-active .ecom-process-deliv li {
    animation: stratFadeUp 0.45s var(--ease-out-expo) both;
}
.ecom-process-panel.is-active .ecom-process-deliv li:nth-child(1) { animation-delay: 0.1s; }
.ecom-process-panel.is-active .ecom-process-deliv li:nth-child(2) { animation-delay: 0.18s; }
.ecom-process-panel.is-active .ecom-process-deliv li:nth-child(3) { animation-delay: 0.26s; }
.ecom-process-panel.is-active .ecom-process-deliv li:nth-child(4) { animation-delay: 0.34s; }

.ecom-process-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ecom-process-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    background: color-mix(in srgb, var(--sc, #6366F1) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--sc, #6366F1) 30%, transparent);
    border-radius: 999px;
    padding: 0.36rem 0.78rem;
}
.ecom-process-badge i { color: var(--sc, #6366F1); font-size: 0.72rem; }

/* Visual frame */
.ecom-process-visual {
    position: relative;
    height: 340px;
    border-radius: 18px;
    background: linear-gradient(160deg, #f5f7fc, #e9edf6);
    border: 1px solid rgba(15,23,42,0.07);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.ecom-pv {
    position: relative;
    width: 92%;
    height: 88%;
}

/* === 01 Discovery: sticky-notes workshop board === */
.ecom-pv-discovery {
    background:
        linear-gradient(180deg, #6b3a1f 0%, #54301c 100%);
    border-radius: 14px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
    padding: 1rem;
}
.ecom-pv-label {
    position: absolute;
    top: 10px; left: 12px;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.85);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
}
.ecom-pv-label i { font-size: 0.6rem; color: #FF8F66; }
.ecom-pv-note {
    position: absolute;
    width: 90px;
    min-height: 60px;
    padding: 0.55rem 0.6rem;
    background: #FFE6B8;
    color: #4a3416;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(0,0,0,0.04);
    display: grid;
    place-items: center;
    text-align: center;
    transform-origin: top center;
    opacity: 0;
}
.ecom-pv-note::before {
    content: '';
    position: absolute;
    top: -5px; left: 50%;
    transform: translateX(-50%);
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #b91c1c;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.ecom-pv-n1 { top: 42px;  left: 18px;  background: #FFE6B8; transform: rotate(-6deg); }
.ecom-pv-n2 { top: 38px;  left: 130px; background: #C7D2FE; transform: rotate(4deg); }
.ecom-pv-n3 { top: 42px;  right: 14px; background: #FBCFB7; transform: rotate(-3deg); }
.ecom-pv-n4 { top: 148px; left: 22px;  background: #B9F4D7; transform: rotate(5deg); }
.ecom-pv-n5 { top: 152px; left: 128px; background: #FFE6B8; transform: rotate(-4deg); }
.ecom-pv-n6 { top: 152px; right: 18px; background: #C7D2FE; transform: rotate(3deg); }
.ecom-process-panel[data-step="0"].is-active .ecom-pv-note {
    animation: ecomNoteDrop 0.5s var(--ease-out-back) both;
}
.ecom-process-panel[data-step="0"].is-active .ecom-pv-n2 { animation-delay: 0.12s; }
.ecom-process-panel[data-step="0"].is-active .ecom-pv-n3 { animation-delay: 0.22s; }
.ecom-process-panel[data-step="0"].is-active .ecom-pv-n4 { animation-delay: 0.32s; }
.ecom-process-panel[data-step="0"].is-active .ecom-pv-n5 { animation-delay: 0.42s; }
.ecom-process-panel[data-step="0"].is-active .ecom-pv-n6 { animation-delay: 0.52s; }
@keyframes ecomNoteDrop {
    0% { opacity: 0; transform: translateY(-18px) rotate(var(--r, 0deg)) scale(0.9); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) scale(1); }
}
/* preserve per-note rotation in animation */
.ecom-pv-n1 { --r: -6deg; } .ecom-pv-n2 { --r: 4deg; } .ecom-pv-n3 { --r: -3deg; }
.ecom-pv-n4 { --r: 5deg; }  .ecom-pv-n5 { --r: -4deg; } .ecom-pv-n6 { --r: 3deg; }

/* === 02 Design: phone with screen-tabs === */
.ecom-pv-design {
    display: flex; align-items: center; justify-content: center;
}
.ecom-pv-phone {
    position: relative;
    width: 178px;
    height: 100%;
    max-height: 290px;
    background: linear-gradient(180deg, #1e293b, #0f172a);
    border-radius: 28px;
    padding: 14px 10px;
    box-shadow: 0 22px 48px rgba(15,23,42,0.32), inset 0 0 0 2px rgba(255,255,255,0.08);
}
.ecom-pv-notch {
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 14px;
    background: #0f172a;
    border-radius: 0 0 10px 10px;
}
.ecom-pv-screen {
    width: 100%; height: 100%;
    background: linear-gradient(180deg, #ffffff, #f1f4fb);
    border-radius: 18px;
    display: flex; flex-direction: column;
    padding: 14px 10px 10px;
    gap: 8px;
    overflow: hidden;
}
.ecom-pv-topnav {
    display: flex; gap: 4px; align-items: center;
    margin-top: 2px;
}
.ecom-pv-topnav span {
    flex: 1; height: 6px;
    background: #cdd5e4;
    border-radius: 3px;
}
.ecom-pv-topnav span:nth-child(2) { background: linear-gradient(90deg, #818CF8, #6366F1); }
.ecom-pv-hero {
    height: 56px;
    background: linear-gradient(135deg, #FF6B35, #6366F1);
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(255,107,53,0.28);
}
.ecom-pv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex: 1;
}
.ecom-pv-grid span {
    background: #e2e8f0;
    border-radius: 6px;
}
.ecom-pv-grid span:nth-child(1) { background: linear-gradient(180deg, #FF8F66 50%, #cdd5e4 50%); }
.ecom-pv-grid span:nth-child(2) { background: linear-gradient(180deg, #818CF8 50%, #cdd5e4 50%); }
.ecom-pv-grid span:nth-child(3) { background: linear-gradient(180deg, #10B981 50%, #cdd5e4 50%); }
.ecom-pv-grid span:nth-child(4) { background: linear-gradient(180deg, #FF6B35 50%, #cdd5e4 50%); }
.ecom-pv-cta {
    background: linear-gradient(135deg, #FF6B35, #FF8F66);
    color: #fff;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 6px 0;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(255,107,53,0.35);
}
.ecom-pv-screen-tag {
    position: absolute;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(15,23,42,0.08);
}
.ecom-pv-screen-tag.is-active {
    color: #fff;
    background: linear-gradient(135deg, #818CF8, #6366F1);
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(99,102,241,0.35);
}
.ecom-pv-tag-1 { top: 22%; left: 8%; }
.ecom-pv-tag-2 { top: 46%; right: 6%; }
.ecom-pv-tag-3 { top: 70%; left: 10%; }

/* === 03 Build: code editor + terminal === */
.ecom-pv-build {
    background: #0f172a;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(0,0,0,0.45);
    display: flex; flex-direction: column;
}
.ecom-pv-code-bar {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    background: #1e293b;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ecom-pv-code-bar .deliv-dot { width: 9px; height: 9px; }
.ecom-pv-code-branch {
    margin-left: auto;
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem;
    color: #94a3b8;
}
.ecom-pv-code-branch i { color: #FF8F66; margin-right: 4px; font-size: 0.6rem; }
.ecom-pv-code-body {
    display: flex;
    flex: 1;
    background: #0f172a;
}
.ecom-pv-code-tree {
    width: 110px;
    flex-shrink: 0;
    background: #1a2236;
    padding: 0.6rem 0.5rem;
    display: flex; flex-direction: column;
    gap: 0.35rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    color: #64748b;
    border-right: 1px solid rgba(255,255,255,0.04);
}
.ecom-pv-code-tree > span:first-child { color: #94a3b8; font-weight: 700; }
.ecom-pv-file { padding-left: 0.8rem; transition: color 0.3s; }
.ecom-pv-file::before { content: '└ '; color: #475569; }
.ecom-pv-file.is-active {
    color: #FF8F66;
    background: linear-gradient(90deg, rgba(255,107,53,0.15), transparent);
    border-radius: 4px;
}
.ecom-pv-code-lines {
    flex: 1;
    padding: 0.7rem 0.85rem;
    display: flex; flex-direction: column;
    gap: 0.42rem;
}
.ecom-pv-line {
    display: block;
    height: 7px;
    border-radius: 3px;
    background: #334155;
    width: var(--w, 60%);
}
.ecom-pv-line-string { background: linear-gradient(90deg, #818CF8, #6366F1); }
.ecom-pv-cursor {
    background: #FF6B35;
    position: relative;
}
.ecom-pv-cursor::after {
    content: '';
    position: absolute;
    right: -5px; top: -2px;
    width: 3px; height: 11px;
    background: #FF8F66;
    animation: ecomCursorBlink 1s steps(2) infinite;
}
@keyframes ecomCursorBlink { 50% { opacity: 0; } }
.ecom-pv-terminal {
    background: #050810;
    padding: 0.55rem 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; flex-direction: column;
    gap: 0.25rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
}
.ecom-pv-term-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #10B981;
}
.ecom-pv-term-line i { font-size: 0.62rem; }
.ecom-pv-term-deploy { color: #FF8F66; }
.ecom-pv-term-deploy::after {
    content: '_';
    margin-left: 4px;
    animation: ecomCursorBlink 1s steps(2) infinite;
}

/* === 04 Integrate: hub-and-spoke === */
.ecom-pv-integrate { display: grid; place-items: center; }
.ecom-pv-int-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ecom-pv-int-svg line {
    stroke-dasharray: 4 6;
    animation: ecomDash 14s linear infinite;
}
@keyframes ecomDash { to { stroke-dashoffset: -100; } }
.ecom-pv-int-core {
    position: relative;
    z-index: 2;
    width: 88px; height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35, #6366F1);
    color: #fff;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.18rem;
    font-weight: 800;
    box-shadow: 0 16px 36px rgba(99,102,241,0.4);
}
.ecom-pv-int-core i { font-size: 1.4rem; }
.ecom-pv-int-core span {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ecom-pv-int-spoke {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #0f172a;
    background: #fff;
    border: 1.5px solid rgba(15,23,42,0.1);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    box-shadow: 0 6px 14px rgba(15,23,42,0.1);
    white-space: nowrap;
    animation: ecomFloat 4.5s ease-in-out infinite;
}
.ecom-pv-int-spoke i { font-size: 0.7rem; }
.ecom-pv-spoke-1 { top: 18%;  left: 8%;   --d: 0s;   } .ecom-pv-spoke-1 i { color: #6366F1; }
.ecom-pv-spoke-2 { top: 18%;  right: 8%;  --d: 0.4s; } .ecom-pv-spoke-2 i { color: #10B981; }
.ecom-pv-spoke-3 { top: 54%;  left: 4%;   --d: 0.8s; } .ecom-pv-spoke-3 i { color: #FF6B35; }
.ecom-pv-spoke-4 { top: 54%;  right: 4%;  --d: 1.2s; } .ecom-pv-spoke-4 i { color: #FF8F66; }
.ecom-pv-spoke-5 { bottom: 8%; left: 16%; --d: 1.6s; } .ecom-pv-spoke-5 i { color: #818CF8; }
.ecom-pv-spoke-6 { bottom: 8%; right: 16%;--d: 2.0s; } .ecom-pv-spoke-6 i { color: #34D399; }
.ecom-pv-int-spoke { animation-delay: var(--d); }
@keyframes ecomFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* === 05 Launch: browser go-live + sparkles === */
.ecom-pv-launch { display: grid; place-items: center; }
.ecom-pv-browser {
    width: 100%; max-width: 320px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15,23,42,0.18);
    overflow: hidden;
    border: 1px solid rgba(15,23,42,0.08);
}
.ecom-pv-browser-bar {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    background: #f4f6fb;
    border-bottom: 1px solid rgba(15,23,42,0.06);
}
.ecom-pv-url {
    margin-left: 0.4rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem;
    color: #64748b;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 999px;
    padding: 0.16rem 0.6rem;
    display: inline-flex; align-items: center; gap: 0.32rem;
}
.ecom-pv-url i { font-size: 0.55rem; color: #10B981; }
.ecom-pv-live-pill {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.6rem; font-weight: 700;
    color: #047857;
    background: rgba(16,185,129,0.15);
    border-radius: 999px;
    padding: 0.16rem 0.55rem;
}
.ecom-pv-live-pill .strat-live-dot { width: 6px; height: 6px; }
.ecom-pv-browser-body { padding: 0.85rem 0.9rem 1rem; }
.ecom-pv-launch-hero {
    text-align: center;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.5rem 0.95rem;
    border-bottom: 1px dashed rgba(15,23,42,0.1);
    margin-bottom: 0.75rem;
}
.ecom-pv-launch-emoji {
    font-size: 2rem;
    animation: ecomBounce 2.4s ease-in-out infinite;
}
@keyframes ecomBounce {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50%      { transform: translateY(-6px) rotate(8deg); }
}
.ecom-pv-launch-hero strong {
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 800;
}
.ecom-pv-launch-hero em {
    font-style: normal;
    font-family: var(--font-mono, monospace);
    font-size: 0.74rem;
    color: #047857;
}
.ecom-pv-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; flex-direction: column;
    gap: 0.32rem;
}
.ecom-pv-checklist li {
    display: flex; align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    color: #334155;
}
.ecom-pv-checklist li i { color: #10B981; font-size: 0.78rem; }
.ecom-pv-sparkle {
    position: absolute;
    font-size: 1rem;
    color: #FF6B35;
    pointer-events: none;
    animation: ecomSparkle 2.6s ease-in-out infinite;
    text-shadow: 0 0 12px rgba(255,107,53,0.6);
}
.ecom-pv-sp1 { top: 12%; left: 14%; animation-delay: 0s; }
.ecom-pv-sp2 { top: 18%; right: 12%; animation-delay: 0.7s; color: #6366F1; text-shadow: 0 0 12px rgba(99,102,241,0.6); }
.ecom-pv-sp3 { bottom: 14%; right: 22%; animation-delay: 1.3s; color: #10B981; text-shadow: 0 0 12px rgba(16,185,129,0.6); }
@keyframes ecomSparkle {
    0%, 100% { opacity: 0.25; transform: scale(0.8) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1.15) rotate(180deg); }
}

/* === 06 Optimize: analytics chart === */
.ecom-pv-optimize {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15,23,42,0.1);
    border: 1px solid rgba(15,23,42,0.08);
    padding: 1.1rem 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.ecom-pv-stats-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
}
.ecom-pv-stats-cap {
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.03em;
}
.ecom-pv-stats-delta {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.84rem;
    font-weight: 800;
    color: #047857;
    background: rgba(16,185,129,0.13);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
}
.ecom-pv-stats-delta i { font-size: 0.7rem; }
.ecom-pv-chart {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 0.55rem;
    height: 150px;
    padding-bottom: 4px;
}
.ecom-pv-bar {
    height: 0;
    background: linear-gradient(180deg, #818CF8, #6366F1);
    border-radius: 4px 4px 0 0;
    animation: ecomBarGrow 0.7s var(--ease-out-expo) both;
}
.ecom-pv-bar:nth-child(1) { animation-delay: 0.1s; }
.ecom-pv-bar:nth-child(2) { animation-delay: 0.18s; }
.ecom-pv-bar:nth-child(3) { animation-delay: 0.26s; }
.ecom-pv-bar:nth-child(4) { animation-delay: 0.34s; }
.ecom-pv-bar:nth-child(5) { animation-delay: 0.42s; }
.ecom-pv-bar:nth-child(6) { animation-delay: 0.50s; }
.ecom-pv-bar:nth-child(7) { animation-delay: 0.58s; }
.ecom-pv-bar-now { background: linear-gradient(180deg, #34D399, #10B981); box-shadow: 0 0 14px rgba(16,185,129,0.4); }
@keyframes ecomBarGrow { to { height: var(--h); } }
.ecom-pv-trend {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.ecom-pv-trend path {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}
.ecom-process-panel[data-step="5"].is-active .ecom-pv-trend path { animation: stratDraw 1.2s var(--ease-out-expo) 0.7s forwards; }
.ecom-pv-trend circle {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.ecom-process-panel[data-step="5"].is-active .ecom-pv-trend circle { animation: stratPop 0.5s var(--ease-out-expo) 1.7s both; }

.ecom-pv-ab-row {
    display: flex; align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.22);
    border-radius: 10px;
}
.ecom-pv-ab-pulse {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #10B981;
    animation: stratLivePulse 2s infinite;
}
.ecom-pv-ab-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: #047857;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ecom-pv-ab-id {
    margin-left: auto;
    font-family: var(--font-mono, monospace);
    font-size: 0.74rem;
    color: #334155;
}

/* Responsive */
@media (max-width: 991.98px) {
    .ecom-process-stepper { gap: 0; padding: 0; }
    .ecom-process-num { width: 38px; height: 38px; font-size: 0.7rem; }
    .ecom-process-line { top: 17px; }
    .ecom-process-step-name { font-size: 0.78rem; }
    .ecom-process-step-week { font-size: 0.62rem; }
    .ecom-process-stage { padding: 1.5rem 1.2rem; min-height: auto; }
    .ecom-process-visual { height: 280px; }
}
@media (max-width: 575.98px) {
    .ecom-process-stepper { grid-template-columns: repeat(3, 1fr); row-gap: 1.2rem; }
    .ecom-process-line { display: none; }
    .ecom-process-step-name { font-size: 0.74rem; }
    .ecom-process-visual { height: 260px; }
    .ecom-pv-phone { width: 150px; max-height: 250px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ecom-process-line-fill, .ecom-process-num, .ecom-process-step-name { transition: none !important; }
    .ecom-process-panel.is-active { animation: none !important; }
    .ecom-process-panel.is-active .ecom-process-deliv li,
    .ecom-pv-note, .ecom-pv-bar { animation: none !important; opacity: 1 !important; }
    .ecom-pv-note { transform: rotate(var(--r, 0deg)) !important; }
    .ecom-pv-int-spoke, .ecom-pv-launch-emoji, .ecom-pv-sparkle,
    .ecom-pv-cursor::after, .ecom-pv-term-deploy::after, .ecom-pv-int-svg line,
    .ecom-pv-bar-now, .ecom-pv-ab-pulse { animation: none !important; }
    .ecom-pv-bar { height: var(--h) !important; }
    .ecom-pv-trend path { stroke-dashoffset: 0 !important; animation: none !important; }
    .ecom-pv-trend circle { opacity: 1 !important; animation: none !important; }
}

/* --- INTEGRATIONS: orbital ecosystem hub --- */
.ecom-hub { max-width: 920px; margin: 0 auto; }
.ecom-hub-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}
.ecom-hub-chip {
    --c: #6366F1;
    border: 2px solid color-mix(in srgb, var(--c) 28%, transparent);
    background: color-mix(in srgb, var(--c) 8%, #fff);
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: transform 0.25s var(--ease-out-expo), background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.ecom-hub-chip:hover {
    transform: translateY(-2px);
    border-color: var(--c);
    color: var(--c);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 32%, transparent);
}
.ecom-hub-chip.is-active {
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 40%, transparent);
}

.ecom-hub-stage {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    aspect-ratio: 1;
    --hub-r-outer: 260px;
    --hub-r-inner: 142px;
}
.ecom-hub-ring {
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    border: 1.5px dashed rgba(99,102,241,0.25);
    pointer-events: none;
}
.ecom-hub-ring-outer { width: 87%; height: 87%; }
.ecom-hub-ring-inner { width: 48%; height: 48%; border-color: rgba(255,107,53,0.28); }

.ecom-hub-core {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 132px; height: 132px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #6366F1, #FF6B35);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 20px 50px rgba(99,102,241,0.4);
    z-index: 3;
}
.ecom-hub-core i { font-size: 1.8rem; }
.ecom-hub-core span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }

.ecom-hub-orbit {
    position: absolute;
    inset: 0;
    margin: auto;
    pointer-events: none;
}

.ecom-hub-pill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: #fff;
    border: 1.5px solid rgba(15,23,42,0.1);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 8px 20px rgba(15,23,42,0.1);
    pointer-events: auto;
    cursor: default;
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.3s, opacity 0.4s, filter 0.4s, border-color 0.3s;
    white-space: nowrap;
}
.ecom-hub-orbit-inner .ecom-hub-pill { --r: var(--hub-r-inner); }
.ecom-hub-orbit-outer .ecom-hub-pill { --r: var(--hub-r-outer); }
.ecom-hub-pill:hover {
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) scale(1.08);
    box-shadow: 0 14px 28px rgba(15,23,42,0.18);
    z-index: 4;
}
.ecom-hub-pill i { color: #6366F1; font-size: 0.78rem; }
.ecom-hub-pill[data-cat="pay"] i  { color: #6366F1; }
.ecom-hub-pill[data-cat="mkt"] i  { color: #FF6B35; }
.ecom-hub-pill[data-cat="ship"] i { color: #10B981; }
.ecom-hub-pill[data-cat="sup"] i  { color: #818CF8; }
.ecom-hub-pill[data-cat="rev"] i  { color: #FF8F66; }
.ecom-hub-pill[data-cat="ana"] i  { color: #34D399; }
.ecom-hub.is-filtered .ecom-hub-pill { opacity: 0.22; filter: grayscale(0.6); }
.ecom-hub.is-filtered .ecom-hub-pill.is-match {
    opacity: 1;
    filter: none;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--match, #6366F1) 36%, transparent);
    border-color: color-mix(in srgb, var(--match, #6366F1) 55%, transparent);
}

/* responsive: shrink orbit on tablet, collapse to chip grid on mobile */
@media (max-width: 991.98px) {
    .ecom-hub-stage {
        max-width: 540px;
        --hub-r-outer: 220px;
        --hub-r-inner: 120px;
    }
    .ecom-hub-core { width: 116px; height: 116px; }
    .ecom-hub-core i { font-size: 1.5rem; }
}
@media (max-width: 767.98px) {
    .ecom-hub-stage {
        aspect-ratio: auto;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .ecom-hub-ring { display: none; }
    .ecom-hub-core {
        position: relative;
        inset: auto;
        margin: 0 auto 1.5rem;
        width: 104px; height: 104px;
    }
    .ecom-hub-orbit {
        position: static;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.55rem;
    }
    .ecom-hub-pill {
        position: static;
        transform: none !important;
    }
    .ecom-hub-pill:hover {
        transform: translateY(-2px) scale(1.05) !important;
    }
}

/* --- Reduced motion overrides for ecommerce-only pieces --- */
@media (prefers-reduced-motion: reduce) {
    .ecom-product { transition: none !important; }
    .ecom-funnel-bar {
        width: var(--w) !important;
        animation: none !important;
        opacity: 1 !important;
    }
    .ecom-funnel-friction .ecom-funnel-bar::after { animation: none !important; }
    .ecom-heat-dot { animation: none !important; }
    .ecom-mini-fill, .ecom-score-fill { transition: none !important; }
    .ecom-film-bar, .ecom-film-skel { transition: none !important; }
    .ecom-perf-chip { animation: none !important; }
    .ecom-hub-pill { transition: none !important; }
    .ecom-hub-chip { transition: none !important; }
    .phase-card.is-active .ecom-ab-fill { transition: none !important; }
}

/* ====================================================================
   === DIGITAL STRATEGY PAGE — card chrome polish =====================
   Scoped to .page-strategy so other pages keep their existing chrome.
   Bumps radius + softens shadow for every card on the page.
   ==================================================================== */

/* Hero snapshot — already strong, just lift the shadow a touch */
.page-strategy .strat-snapshot {
    border-radius: 24px;
    box-shadow: 0 36px 80px rgba(5,7,20,0.6),
                0 12px 30px rgba(99,102,241,0.18);
}

/* OUTCOMES — flip cards */
.page-strategy .svc-flip { border-radius: 22px; }
.page-strategy .svc-flip-face {
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.12);
    box-shadow: 0 18px 44px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.06);
    transition: box-shadow 0.45s var(--ease-out-expo), transform 0.45s var(--ease-out-expo);
}
.page-strategy .svc-flip:hover .svc-flip-face,
.page-strategy .svc-flip:focus-visible .svc-flip-face,
.page-strategy .svc-flip.is-flipped .svc-flip-face {
    box-shadow: 0 28px 60px rgba(255,107,53,0.22),
                0 8px 20px rgba(99,102,241,0.18);
}

/* METHODOLOGY — phase stage card */
.page-strategy .phase-stage {
    border-radius: 24px;
    border: 1px solid rgba(99,102,241,0.12);
    box-shadow: 0 24px 56px rgba(15,23,42,0.1),
                0 4px 14px rgba(99,102,241,0.08);
}
.page-strategy .phase-tab { border-radius: 18px; }
.page-strategy .phase-visual {
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(99,102,241,0.08),
                0 6px 18px rgba(15,23,42,0.06);
}

/* DELIVERABLES — preview cards */
.page-strategy .deliv-card {
    border-radius: 24px;
    border: 1px solid rgba(99,102,241,0.14);
    box-shadow: 0 22px 50px rgba(15,23,42,0.12),
                0 4px 14px rgba(99,102,241,0.08);
}
.page-strategy .deliv-card:hover {
    box-shadow: 0 32px 64px rgba(99,102,241,0.22),
                0 8px 22px rgba(255,107,53,0.12);
}
.page-strategy .deliv-card.is-open {
    box-shadow: 0 30px 64px rgba(99,102,241,0.2),
                0 8px 22px rgba(255,107,53,0.12);
}
.page-strategy .deliv-card-head:focus-visible { border-radius: 24px; }
.page-strategy .deliv-card-mock {
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(15,23,42,0.1);
}

/* METRICS — stat tiles inside the band */
.page-strategy .strat-stats {
    border-radius: 0; /* full-width band keeps its shape */
}
.page-strategy .strat-stat {
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(99,102,241,0.18);
    border-radius: 20px;
    padding: 1.4rem 1rem;
    box-shadow: 0 14px 36px rgba(99,102,241,0.12),
                0 4px 10px rgba(255,107,53,0.07);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), border-color 0.35s;
}
.page-strategy .strat-stat:hover {
    transform: translateY(-4px);
    border-color: rgba(99,102,241,0.45);
    box-shadow: 0 22px 48px rgba(99,102,241,0.22),
                0 8px 18px rgba(255,107,53,0.14);
}

/* GANTT — animated timeline */
.page-strategy .strategy-gantt {
    border-radius: 24px;
    border: 1px solid rgba(99,102,241,0.12);
    box-shadow: 0 22px 50px rgba(15,23,42,0.1),
                0 4px 14px rgba(99,102,241,0.08);
}
.page-strategy .strategy-gantt-bar { border-radius: 10px; }

/* WHO IT'S FOR — svc cards */
.page-strategy .svc-card {
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.14);
    box-shadow: 0 16px 40px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.08);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), border-color 0.35s;
}
.page-strategy .svc-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,107,53,0.45);
    box-shadow: 0 26px 58px rgba(255,107,53,0.2),
                0 8px 20px rgba(99,102,241,0.14);
}

/* FAQ — accordion items */
.page-strategy .svc-faq .accordion {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.page-strategy .svc-faq .accordion-item {
    border: 1px solid rgba(99,102,241,0.14) !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15,23,42,0.07),
                0 3px 10px rgba(99,102,241,0.06);
    transition: box-shadow 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo), border-color 0.35s;
}
.page-strategy .svc-faq .accordion-item:hover {
    transform: translateY(-2px);
    border-color: rgba(99,102,241,0.32) !important;
    box-shadow: 0 18px 38px rgba(99,102,241,0.14),
                0 5px 14px rgba(255,107,53,0.08);
}
.page-strategy .svc-faq .accordion-button {
    border-radius: 18px !important;
    font-weight: 700;
}
.page-strategy .svc-faq .accordion-button:not(.collapsed) {
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(255,107,53,0.08));
    color: #0f172a;
    box-shadow: none;
}
.page-strategy .svc-faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }

/* RELATED SERVICES — dark cards */
.page-strategy .svc-related-card {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 22px 50px rgba(5,7,20,0.45),
                0 6px 16px rgba(99,102,241,0.18);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), border-color 0.4s;
}
.page-strategy .svc-related-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,107,53,0.55);
    box-shadow: 0 30px 64px rgba(255,107,53,0.32),
                0 10px 22px rgba(99,102,241,0.2);
}

/* PHASE VISUAL — deliv mocks inside the methodology section get a softer wrap */
.page-strategy .deliv-window-bar { border-radius: 16px 16px 0 0; }
.page-strategy .deliv-card-mock,
.page-strategy .deliv-window-body { border-radius: 0 0 16px 16px; }

/* Slight responsive easing */
@media (max-width: 575.98px) {
    .page-strategy .strat-snapshot,
    .page-strategy .phase-stage,
    .page-strategy .deliv-card,
    .page-strategy .strategy-gantt { border-radius: 18px; }
    .page-strategy .svc-card,
    .page-strategy .svc-flip-face { border-radius: 16px; }
}

/* ====================================================================
   === WEB DEVELOPMENT PAGE — card chrome polish ======================
   Scoped to .page-webdev. Boosts radius + box-shadow on every card so
   the page reads as more prominent and matches the brand palette.
   ==================================================================== */

/* Hero — Deploy Pipeline panel */
.page-webdev .webdev-pipeline {
    border-radius: 24px;
    box-shadow: 0 36px 80px rgba(5,7,20,0.6),
                0 12px 30px rgba(99,102,241,0.18);
}

/* Capability cards */
.page-webdev .webdev-cap,
.page-webdev .svc-card.webdev-cap {
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.14);
    box-shadow: 0 18px 44px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.08);
}
.page-webdev .webdev-cap:hover,
.page-webdev .svc-card.webdev-cap:hover {
    box-shadow: 0 28px 60px rgba(255,107,53,0.22),
                0 8px 20px rgba(99,102,241,0.18);
}

/* Tech stack layers */
.page-webdev .webdev-layer {
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(5,7,20,0.45),
                0 4px 12px rgba(99,102,241,0.16);
}

/* Architecture principle cards */
.page-webdev .arch-principle-card,
.page-webdev .webdev-arch {
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.14);
    box-shadow: 0 18px 44px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.08);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), background-color 0.35s, border-color 0.35s;
}
.page-webdev .arch-principle-card:hover,
.page-webdev .webdev-arch:hover {
    box-shadow: 0 28px 60px rgba(255,107,53,0.22),
                0 8px 20px rgba(99,102,241,0.18);
}

/* Methodology phase explorer */
.page-webdev .phase-stage {
    border-radius: 24px;
    border: 1px solid rgba(99,102,241,0.12);
    box-shadow: 0 24px 56px rgba(15,23,42,0.1),
                0 4px 14px rgba(99,102,241,0.08);
}
.page-webdev .phase-tab { border-radius: 18px; }
.page-webdev .phase-visual {
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(99,102,241,0.08),
                0 6px 18px rgba(15,23,42,0.06);
}

/* Case study spotlight — app + stat tiles */
.page-webdev .case-app {
    border-radius: 18px;
    box-shadow: 0 38px 76px rgba(5,7,20,0.55),
                0 12px 28px rgba(99,102,241,0.2);
}
.page-webdev .case-stat {
    border-radius: 18px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--cs, #6366F1) 18%, transparent),
                0 4px 10px rgba(15,23,42,0.06);
}

/* Metrics band — stat tiles */
.page-webdev .strat-stat {
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(99,102,241,0.18);
    border-radius: 20px;
    padding: 1.4rem 1rem;
    box-shadow: 0 14px 36px rgba(99,102,241,0.12),
                0 4px 10px rgba(255,107,53,0.07);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), border-color 0.35s;
}
.page-webdev .strat-stat:hover {
    transform: translateY(-4px);
    border-color: rgba(99,102,241,0.45);
    box-shadow: 0 22px 48px rgba(99,102,241,0.22),
                0 8px 18px rgba(255,107,53,0.14);
}

/* "Why build with us" rows */
.page-webdev .webdev-why {
    border-radius: 20px;
    border: 1px solid rgba(99,102,241,0.14);
    box-shadow: 0 16px 40px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.08);
}
.page-webdev .webdev-why:hover {
    box-shadow: 0 26px 58px rgba(255,107,53,0.2),
                0 8px 20px rgba(99,102,241,0.14);
}

/* FAQ accordion items, if present */
.page-webdev .accordion { display: flex; flex-direction: column; gap: 0.85rem; }
.page-webdev .accordion-item {
    border: 1px solid rgba(99,102,241,0.14) !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15,23,42,0.07),
                0 3px 10px rgba(99,102,241,0.06);
    transition: box-shadow 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo), border-color 0.35s;
}
.page-webdev .accordion-item:hover {
    transform: translateY(-2px);
    border-color: rgba(99,102,241,0.32) !important;
    box-shadow: 0 18px 38px rgba(99,102,241,0.14),
                0 5px 14px rgba(255,107,53,0.08);
}
.page-webdev .accordion-button { border-radius: 18px !important; font-weight: 700; }
.page-webdev .accordion-button:not(.collapsed) {
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(255,107,53,0.08));
    color: #0f172a;
    box-shadow: none;
}
.page-webdev .accordion-button:focus { box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }

/* Responsive easing — keep radii sane on small screens */
@media (max-width: 575.98px) {
    .page-webdev .webdev-pipeline,
    .page-webdev .phase-stage,
    .page-webdev .case-app { border-radius: 18px; }
    .page-webdev .webdev-cap,
    .page-webdev .svc-card.webdev-cap,
    .page-webdev .arch-principle-card,
    .page-webdev .webdev-arch,
    .page-webdev .webdev-why { border-radius: 16px; }
}

/* ====================================================================
   === MOBILE APP DEVELOPMENT PAGE — card chrome polish ===============
   Scoped to .page-mobile.
   ==================================================================== */

/* Platform cards (iOS/Android/Flutter/RN) */
.page-mobile .platform-card {
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.14);
    box-shadow: 0 18px 44px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.08);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), border-color 0.35s, background-color 0.35s;
}
.page-mobile .platform-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,107,53,0.4);
    box-shadow: 0 28px 60px rgba(255,107,53,0.2),
                0 8px 20px rgba(99,102,241,0.16);
}
.page-mobile .platform-card-featured {
    box-shadow: 0 22px 50px rgba(255,107,53,0.22),
                0 6px 16px rgba(99,102,241,0.14);
}

/* Comparison table wrapper */
.page-mobile .comparison-table-wrapper {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    overflow: hidden;
    box-shadow: 0 24px 56px rgba(5,7,20,0.5),
                0 6px 16px rgba(99,102,241,0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Capability svc-cards */
.page-mobile .svc-card {
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.14);
    box-shadow: 0 18px 44px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.08);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), border-color 0.35s;
}
.page-mobile .svc-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,107,53,0.45);
    box-shadow: 0 28px 60px rgba(255,107,53,0.2),
                0 8px 20px rgba(99,102,241,0.16);
}

/* Timeline items */
.page-mobile .svc-timeline-item {
    border-radius: 20px;
}
.page-mobile .svc-timeline-content {
    border-radius: 20px;
    border: 1px solid rgba(99,102,241,0.14);
    box-shadow: 0 16px 40px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.08);
    background: #fff;
    padding: 1.25rem 1.4rem;
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), border-color 0.35s;
}
.page-mobile .svc-timeline-content:hover {
    transform: translateY(-3px);
    border-color: rgba(255,107,53,0.4);
    box-shadow: 0 22px 50px rgba(255,107,53,0.18),
                0 8px 20px rgba(99,102,241,0.14);
}

/* Quality & compliance arch-principle-cards */
.page-mobile .arch-principle-card {
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.14);
    box-shadow: 0 18px 44px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.08);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), border-color 0.35s;
}
.page-mobile .arch-principle-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,107,53,0.4);
    box-shadow: 0 28px 60px rgba(255,107,53,0.2),
                0 8px 20px rgba(99,102,241,0.16);
}

/* Benchmark cards (dark band) */
.page-mobile .benchmark-card {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.14);
    background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    padding: 1.4rem 1.2rem;
    text-align: center;
    box-shadow: 0 18px 44px rgba(5,7,20,0.45),
                0 4px 12px rgba(99,102,241,0.18);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), border-color 0.35s;
}
.page-mobile .benchmark-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,107,53,0.55);
    box-shadow: 0 26px 58px rgba(255,107,53,0.28),
                0 8px 20px rgba(99,102,241,0.2);
}

/* Responsive easing */
@media (max-width: 575.98px) {
    .page-mobile .platform-card,
    .page-mobile .svc-card,
    .page-mobile .arch-principle-card,
    .page-mobile .benchmark-card,
    .page-mobile .svc-timeline-content { border-radius: 16px; }
}

/* ====================================================================
   === MOBILE APP DEV PAGE — interactive rebuild ======================
   Live App Preview · platform mockups · TestFlight/Store mocks · dials
   ==================================================================== */

/* Hero: left-aligned breadcrumb (two-column layout) */
.svc-hero-mobile .breadcrumb { justify-content: flex-start; }

/* Hero: Live App Preview panel (extends .strat-snapshot) */
.mobile-preview .strat-snapshot-glow {
    background: radial-gradient(circle, rgba(99,102,241,0.55), transparent 65%);
}
.mobile-kpi-suffix {
    font-size: 1rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FF8F66, #818CF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 2px;
}

/* Phone frame in hero */
.mobile-phone-frame {
    position: relative;
    width: 220px;
    height: 350px;
    margin: 0 auto 1.1rem;
    background: linear-gradient(180deg, #1e293b, #0f172a);
    border-radius: 36px;
    padding: 16px 12px;
    box-shadow:
        0 24px 60px rgba(0,0,0,0.55),
        inset 0 0 0 2px rgba(255,255,255,0.08);
}
.mobile-phone-notch {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 80px; height: 18px;
    background: #050810;
    border-radius: 0 0 14px 14px;
    z-index: 3;
}
.mobile-phone-screens {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff, #f1f4fb);
}
.mobile-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 12px 12px;
    gap: 0.55rem;
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.mobile-screen.is-active { opacity: 1; transform: none; }

.mobile-screen-statusbar {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    color: #64748b;
    font-weight: 700;
}
.mobile-screen-statusbar i { font-size: 0.55rem; margin-left: 2px; }
.mobile-screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.2rem;
}
.mobile-screen-header strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.mobile-screen-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35, #818CF8);
}
.mobile-screen-pill {
    font-size: 0.6rem;
    font-weight: 800;
    color: #047857;
    background: rgba(16,185,129,0.15);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}
.mobile-screen-hero {
    height: 64px;
    background: linear-gradient(135deg, #FF6B35, #818CF8);
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(99,102,241,0.3);
}
.mobile-screen-list { display: flex; flex-direction: column; gap: 0.36rem; flex: 1; }
.mobile-screen-list > span {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: rgba(99,102,241,0.06);
    border-radius: 8px;
    font-size: 0.66rem;
    color: #334155;
    font-weight: 600;
}
.mobile-screen-list > span > span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #6366F1;
    flex-shrink: 0;
}
.mobile-screen-list > span:nth-child(2) > span { background: #FF6B35; }
.mobile-screen-list > span:nth-child(3) > span { background: #10B981; }
.mobile-screen-list em { font-style: normal; }
.mobile-screen-cta {
    background: linear-gradient(135deg, #FF6B35, #FF8F66);
    color: #fff;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.55rem 0;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(255,107,53,0.4);
}

/* screen variants */
.mobile-screen-chart {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 0.3rem;
    padding-top: 0.4rem;
}
.mp-bar {
    display: block;
    width: 100%;
    height: var(--h, 40%);
    background: linear-gradient(180deg, #818CF8, #6366F1);
    border-radius: 4px 4px 0 0;
    animation: ecomBarGrow 0.7s var(--ease-out-expo) both;
}
.mp-bar:nth-child(2) { animation-delay: 0.08s; }
.mp-bar:nth-child(3) { animation-delay: 0.16s; }
.mp-bar:nth-child(4) { animation-delay: 0.24s; }
.mp-bar:nth-child(5) { animation-delay: 0.32s; }
.mp-bar:nth-child(6) { animation-delay: 0.40s; }
.mp-bar:nth-child(7) { animation-delay: 0.48s; }
.mp-bar-hot {
    background: linear-gradient(180deg, #FF8F66, #FF6B35);
    box-shadow: 0 0 12px rgba(255,107,53,0.4);
}
.mobile-screen-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 0.4rem 0;
    border-top: 1px dashed rgba(15,23,42,0.1);
}
.mobile-screen-meta strong {
    font-size: 1.4rem;
    font-weight: 800;
    color: #6366F1;
    letter-spacing: -0.03em;
}
.mobile-screen-meta em {
    font-style: normal;
    font-size: 0.66rem;
    color: #64748b;
    font-weight: 600;
}

/* profile screen */
.mobile-screen-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
}
.mobile-screen-photo {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #818CF8, #FF6B35);
    box-shadow: 0 8px 18px rgba(99,102,241,0.3);
}
.mobile-screen-profile strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
}
.mobile-screen-profile em {
    font-style: normal;
    font-size: 0.66rem;
    color: #64748b;
    font-weight: 600;
}
.mobile-screen-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    flex: 1;
    align-items: center;
}
.mobile-screen-stats > span {
    display: flex; flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    padding: 0.5rem 0.3rem;
    background: rgba(99,102,241,0.06);
    border-radius: 8px;
}
.mobile-screen-stats strong {
    font-size: 0.86rem;
    font-weight: 800;
    color: #FF6B35;
}
.mobile-screen-stats em {
    font-style: normal;
    font-size: 0.58rem;
    color: #64748b;
    font-weight: 600;
}

/* dots indicator */
.mobile-phone-dots {
    position: absolute;
    bottom: 28px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}
.mobile-phone-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(15,23,42,0.25);
    transition: background 0.4s, width 0.4s var(--ease-out-expo);
}
.mobile-phone-dots span.is-active {
    background: #FF6B35;
    width: 16px;
    border-radius: 6px;
}

/* ============ PLATFORMS — per-platform mockups ============ */
.mobile-platform-mock {
    background: linear-gradient(160deg, #f5f7fc, #e9edf6);
    padding: 1.2rem;
    min-height: 320px;
    display: grid;
    place-items: center;
}

/* iOS mockup */
.mobile-pf-phone {
    position: relative;
    width: 170px;
    height: 280px;
    border-radius: 32px;
    padding: 12px 10px;
    box-shadow: 0 20px 44px rgba(15,23,42,0.25), inset 0 0 0 2px rgba(15,23,42,0.05);
}
.mobile-pf-ios {
    background: linear-gradient(180deg, #1e293b, #0f172a);
}
.mobile-pf-notch {
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 60px; height: 14px;
    background: #050810;
    border-radius: 0 0 10px 10px;
    z-index: 2;
}
.mobile-pf-screen {
    width: 100%; height: 100%;
    background: linear-gradient(180deg, #fff, #f1f4fb);
    border-radius: 22px;
    padding: 16px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow: hidden;
}
.mobile-pf-statusbar {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono, monospace);
    font-size: 0.56rem;
    color: #64748b;
    font-weight: 700;
}
.mobile-pf-large-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
    margin-top: 0.2rem;
}
.mobile-pf-card-ios {
    background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(99,102,241,0.04));
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 10px;
    padding: 0.55rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.mobile-pf-pill {
    font-size: 0.52rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--c, #6366F1);
    border-radius: 999px;
    padding: 0.15rem 0.45rem;
    align-self: flex-start;
}
.mobile-pf-card-ios strong { font-size: 0.78rem; color: #0f172a; }
.mobile-pf-card-ios em { font-style: normal; font-size: 0.58rem; color: #64748b; }
.mobile-pf-list-ios {
    display: flex; flex-direction: column;
    flex: 1;
}
.mobile-pf-list-ios > span {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(15,23,42,0.05);
    font-size: 0.6rem;
    color: #334155;
}
.mobile-pf-list-ios > span:last-child { border-bottom: 0; }
.mobile-pf-list-ios > span > span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #6366F1;
}
.mobile-pf-tabbar-ios {
    display: flex;
    justify-content: space-around;
    padding: 0.45rem 0 0.1rem;
    border-top: 1px solid rgba(15,23,42,0.08);
}
.mobile-pf-tabbar-ios span {
    color: #94a3b8;
    font-size: 0.78rem;
}
.mobile-pf-tabbar-ios span.is-active { color: #6366F1; }

/* Android mockup */
.mobile-pf-android {
    background: linear-gradient(180deg, #0f172a, #1e293b);
}
.mobile-pf-camera-dot {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #050810;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);
    z-index: 2;
}
.mobile-pf-statusbar-android {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
}
.mobile-pf-statusbar-android i { font-size: 0.5rem; margin-right: 2px; }
.mobile-pf-topbar-md3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0 0.2rem;
}
.mobile-pf-topbar-md3 strong { font-size: 0.96rem; color: #0f172a; font-weight: 800; }
.mobile-pf-topbar-md3 i { font-size: 0.7rem; color: #475569; }
.mobile-pf-chips-md3 { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.mobile-pf-chips-md3 span {
    font-size: 0.56rem;
    font-weight: 700;
    color: #334155;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}
.mobile-pf-chips-md3 span.is-active {
    background: #10B981;
    color: #fff;
    border-color: transparent;
}
.mobile-pf-cards-md3 {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    margin-top: 0.2rem;
}
.mobile-pf-cards-md3 span {
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(16,185,129,0.13), rgba(16,185,129,0.04));
    border: 1px solid rgba(16,185,129,0.15);
}
.mobile-pf-cards-md3 span:nth-child(2) {
    background: linear-gradient(135deg, rgba(255,107,53,0.13), rgba(255,107,53,0.04));
    border-color: rgba(255,107,53,0.18);
}
.mobile-pf-fab-md3 {
    position: absolute;
    right: 18px;
    bottom: 56px;
    width: 36px; height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, #10B981, #34D399);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    box-shadow: 0 8px 18px rgba(16,185,129,0.45);
    z-index: 3;
}
.mobile-pf-navbar-md3 {
    display: flex;
    justify-content: space-around;
    padding: 0.45rem 0;
    border-top: 1px solid rgba(15,23,42,0.08);
}
.mobile-pf-navbar-md3 span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.54rem;
    color: #94a3b8;
}
.mobile-pf-navbar-md3 span.is-active {
    color: #10B981;
    font-weight: 700;
}
.mobile-pf-navbar-md3 i { font-size: 0.72rem; }

/* Flutter mockup */
.mobile-pf-flutter {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}
.mobile-pf-flutter-code {
    width: 100%;
    background: #0f172a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(15,23,42,0.4);
}
.mobile-pf-code-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: #1e293b;
}
.mobile-pf-code-name {
    margin-left: 0.4rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    color: #94a3b8;
}
.mobile-pf-code-body {
    padding: 0.65rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    color: #cbd5e1;
}
.mobile-pf-code-body em {
    color: #FF8F66;
    font-style: normal;
    font-weight: 700;
}
.mobile-pf-flutter-arrows {
    display: flex;
    gap: 1.6rem;
    color: #FF6B35;
    font-size: 0.85rem;
    animation: stratFadeUp 0.6s var(--ease-out-expo);
}
.mobile-pf-flutter-output {
    display: flex;
    gap: 0.7rem;
}
.mobile-pf-mini-phone {
    width: 78px;
    height: 130px;
    background: linear-gradient(180deg, #1e293b, #0f172a);
    border-radius: 14px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 10px 22px rgba(15,23,42,0.3);
    color: #94a3b8;
    font-size: 0.55rem;
    font-weight: 700;
}
.mobile-pf-mini-phone i { font-size: 0.95rem; margin-top: 4px; color: #fff; }
.mobile-pf-mini-screen {
    width: 100%;
    flex: 1;
    background: linear-gradient(135deg, #FF6B35 30%, #818CF8 100%);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
    margin-top: 4px;
}
.mobile-pf-mini-phone em {
    font-style: normal;
    font-size: 0.58rem;
    color: #cbd5e1;
}

/* React Native mockup */
.mobile-pf-rn {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    grid-template-areas:
        "js bridge native"
        "ota ota ota";
    row-gap: 1rem;
}
.mobile-pf-rn-js {
    grid-area: js;
    background: linear-gradient(135deg, rgba(129,140,248,0.15), rgba(129,140,248,0.04));
    border: 1.5px solid rgba(129,140,248,0.4);
    border-radius: 12px;
    padding: 0.8rem 0.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.mobile-pf-rn-js strong { font-size: 0.84rem; color: #4f46e5; font-weight: 800; }
.mobile-pf-rn-js em { font-style: normal; font-family: var(--font-mono, monospace); font-size: 0.66rem; color: #6366F1; }
.mobile-pf-rn-bridge { grid-area: bridge; width: 100%; max-width: 130px; height: auto; }
.mobile-pf-rn-native {
    grid-area: native;
    background: linear-gradient(135deg, rgba(255,107,53,0.15), rgba(255,107,53,0.04));
    border: 1.5px solid rgba(255,107,53,0.4);
    border-radius: 12px;
    padding: 0.8rem 0.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.mobile-pf-rn-native strong { font-size: 0.84rem; color: #c2410c; font-weight: 800; }
.mobile-pf-rn-native em { font-style: normal; font-size: 0.7rem; color: #FF6B35; font-weight: 600; }
.mobile-pf-rn-ota {
    grid-area: ota;
    background: linear-gradient(135deg, #818CF8, #6366F1);
    color: #fff;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    box-shadow: 0 8px 20px rgba(99,102,241,0.36);
}
.mobile-pf-rn-ota i { margin-right: 4px; }

/* ============ FLIP-CARD ILLOS — extend existing svc-illo ============ */
.mobile-illo svg .illo-bar,
.mobile-illo svg .illo-core { transform-box: fill-box; transform-origin: center; }
.mobile-illo svg .illo-trend {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
}
[data-sreveal].is-revealed .mobile-illo .illo-trend {
    animation: stratDraw 0.9s var(--ease-out-expo) 0.15s forwards;
}
[data-sreveal].is-revealed .mobile-illo .illo-bar {
    animation: stratPop 0.6s var(--ease-out-expo) 0.5s both;
}

/* ============ DECISION MATRIX — wins tally ============ */
.comparison-tally td {
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.comparison-tally td strong { color: #fff; font-size: 0.95rem; }
.comparison-wins {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(255,255,255,0.1);
}
.comparison-wins i { color: #cbd5e1; }
.comparison-wins strong { color: #fff; font-weight: 800; }
.comparison-wins-leader {
    background: linear-gradient(135deg, rgba(255,107,53,0.18), rgba(99,102,241,0.18));
    border-color: rgba(255,107,53,0.45);
    color: #fff;
}
.comparison-wins-leader i { color: #FF8F66; }

/* ============ LIFECYCLE — extra mockups ============ */
/* Build phase — TestFlight version history */
.mobile-pv-build {
    width: 100%;
    background: linear-gradient(180deg, #fff, #f7f9fd);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15,23,42,0.1);
    border: 1px solid rgba(15,23,42,0.08);
    padding: 1rem 1.1rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.mobile-pv-build-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(15,23,42,0.07);
}
.mobile-pv-build-head i { font-size: 1.1rem; color: #0f172a; }
.mobile-pv-build-head strong { font-size: 0.95rem; color: #0f172a; font-weight: 800; }
.mobile-pv-build-tag {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 700;
    color: #6366F1;
    background: rgba(99,102,241,0.1);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}
.mobile-pv-build-versions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.mobile-pv-build-versions li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    background: rgba(99,102,241,0.04);
    border: 1px solid rgba(99,102,241,0.1);
    border-radius: 8px;
}
.mobile-pv-build-versions li:first-child {
    background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(99,102,241,0.06));
    border-color: rgba(255,107,53,0.3);
}
.mobile-pv-build-version {
    font-family: var(--font-mono, monospace);
    font-size: 0.74rem;
    font-weight: 700;
    color: #0f172a;
}
.mobile-pv-build-status {
    font-size: 0.62rem;
    font-weight: 800;
    color: #047857;
    background: rgba(16,185,129,0.12);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mobile-pv-build-status.mobile-pv-build-now {
    color: #fff;
    background: linear-gradient(135deg, #FF6B35, #FF8F66);
    box-shadow: 0 4px 10px rgba(255,107,53,0.35);
}
.mobile-pv-build-versions li:nth-child(4) .mobile-pv-build-status {
    color: #94a3b8;
    background: rgba(148,163,184,0.15);
}
.mobile-pv-build-time {
    margin-left: auto;
    font-size: 0.65rem;
    color: #64748b;
}
.mobile-pv-build-foot {
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    color: #10B981;
    padding-top: 0.45rem;
    border-top: 1px dashed rgba(15,23,42,0.08);
}
.mobile-pv-build-foot i { margin-right: 4px; }

/* Launch phase — App Store + Play Store cards */
.mobile-pv-launch {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.mobile-pv-store {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "head head head" "title rating cta" "subtitle rating cta";
    grid-template-rows: auto auto auto;
    gap: 0.15rem 0.7rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 14px;
    padding: 0.7rem 0.85rem;
    box-shadow: 0 12px 28px rgba(15,23,42,0.08);
}
.mobile-pv-store-head {
    grid-area: head;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 999px;
    padding: 0.22rem 0.7rem;
    justify-self: start;
    margin-bottom: 0.3rem;
}
.mobile-pv-store-head i { font-size: 0.74rem; }
.mobile-pv-store-head-android { background: linear-gradient(135deg, #10B981, #34D399); }
.mobile-pv-store > strong { grid-area: title; font-size: 0.88rem; color: #0f172a; font-weight: 800; }
.mobile-pv-store > em { grid-area: subtitle; font-style: normal; font-size: 0.66rem; color: #64748b; }
.mobile-pv-store-rating {
    grid-area: rating;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: #FF8F66;
    font-size: 0.72rem;
    align-self: center;
}
.mobile-pv-store-rating i { font-size: 0.7rem; }
.mobile-pv-store-rating span {
    margin-left: 0.35rem;
    font-weight: 800;
    color: #0f172a;
}
.mobile-pv-store-cta {
    grid-area: cta;
    align-self: center;
    background: linear-gradient(135deg, #6366F1, #818CF8);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(99,102,241,0.35);
}
.mobile-pv-store-cta-android {
    background: linear-gradient(135deg, #10B981, #34D399);
    box-shadow: 0 6px 14px rgba(16,185,129,0.35);
}
.mobile-pv-launch-pulse {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #047857;
    background: rgba(16,185,129,0.13);
    border-radius: 999px;
    padding: 0.32rem 0.85rem;
    align-self: center;
    margin-top: 0.2rem;
}
.mobile-pv-launch-pulse .strat-live-dot { width: 7px; height: 7px; }

/* ============ BENCHMARKS — dial dashboard ============ */
.mobile-bench-section { position: relative; overflow: hidden; }
.mobile-bench-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(640px 320px at 8% 12%, rgba(99,102,241,0.07), transparent 65%),
        radial-gradient(600px 320px at 92% 88%, rgba(255,107,53,0.07), transparent 65%);
    pointer-events: none;
}
.mobile-bench-dash {
    max-width: 1080px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 22px;
    box-shadow: 0 28px 70px rgba(15,23,42,0.13);
    overflow: hidden;
}
.mobile-bench-body { padding: 1.9rem 1.7rem 1.6rem; }
.mobile-bench-card {
    flex-direction: column;
    text-align: center;
    gap: 0.85rem;
    padding: 1.2rem 0.9rem;
}
.mobile-bench-card .ecom-mini-dial { width: 110px; height: 110px; }
.mobile-bench-card .ecom-mini-num { font-size: 1.4rem; }
.mobile-bench-card .ecom-mini-unit { font-size: 0.78rem; }
.mobile-bench-card .ecom-mini-text { align-items: center; }
.mobile-bench-card .ecom-mini-label { font-size: 0.96rem; }
.mobile-bench-card .ecom-mini-cap { text-align: center; }
.mobile-bench-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(15,23,42,0.1);
}

/* Initial dial state — invisible until reveal */
.mobile-bench-card .ecom-mini-fill {
    transition: stroke-dashoffset 1.2s var(--ease-out-expo);
    stroke-dashoffset: 276.46;
}
[data-sreveal].is-revealed .mobile-bench-card .ecom-mini-fill {
    stroke-dashoffset: var(--target, 60);
}

/* Responsive */
@media (max-width: 991.98px) {
    .mobile-phone-frame { width: 200px; height: 320px; }
    .mobile-platform-mock { min-height: 280px; }
}
@media (max-width: 575.98px) {
    .mobile-phone-frame { width: 180px; height: 290px; }
    .mobile-pf-rn { grid-template-columns: 1fr; grid-template-areas: "js" "bridge" "native" "ota"; gap: 0.6rem; }
    .mobile-pf-rn-bridge { transform: rotate(90deg); max-height: 60px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mobile-screen { transition: none !important; }
    .mp-bar { animation: none !important; height: var(--h) !important; }
    .mobile-pf-flutter-arrows { animation: none !important; }
    .mobile-bench-card .ecom-mini-fill { transition: none !important; }
}

/* ====================================================================
   === AI VISIBILITY (GEO) PAGE — interactive rebuild =================
   Live AI Mention Tracker · orbital AI hub · process explorer mocks
   ==================================================================== */

/* Hero: left-aligned breadcrumb */
.svc-hero-aivis .breadcrumb { justify-content: flex-start; }

/* ---- Hero: Live AI Mention Tracker ---- */
.aivis-tracker .strat-snapshot-glow {
    background: radial-gradient(circle, rgba(16,185,129,0.5), transparent 65%);
}
.aivis-kpi-suffix {
    font-size: 1rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FF8F66, #818CF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 2px;
}

.aivis-console-rail {
    position: relative;
    height: 220px;
    margin-bottom: 1.1rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}
.aivis-console {
    position: absolute;
    inset: 0;
    padding: 0.85rem 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
}
.aivis-console.is-active { opacity: 1; transform: none; }

.aivis-console-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
    margin-bottom: 0.55rem;
}
.aivis-console-logo {
    width: 28px; height: 28px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.85rem;
}
.aivis-logo-chatgpt { background: linear-gradient(135deg, #10B981, #34D399); }
.aivis-logo-claude  { background: linear-gradient(135deg, #FF6B35, #FF8F66); }
.aivis-logo-perplexity { background: linear-gradient(135deg, #6366F1, #818CF8); }
.aivis-console-name {
    font-weight: 800;
    color: #fff;
    font-size: 0.88rem;
}
.aivis-console-q {
    margin-left: auto;
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    color: rgba(255,255,255,0.6);
    text-align: right;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aivis-console-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.aivis-console-line {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.45;
    margin: 0;
}
.aivis-console-line strong {
    color: #fff;
    background: linear-gradient(135deg, rgba(255,107,53,0.45), rgba(99,102,241,0.35));
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
}
.aivis-console-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.aivis-console-list li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.85);
    padding: 0.28rem 0.5rem;
    background: rgba(255,255,255,0.04);
    border-radius: 7px;
}
.aivis-console-list li strong {
    color: #fff;
    background: linear-gradient(135deg, #FF6B35, #FF8F66);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
}
.aivis-cite-num {
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    flex-shrink: 0;
    width: 16px;
}
.aivis-cite-pill {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: linear-gradient(135deg, #10B981, #34D399);
    border-radius: 999px;
    padding: 0.16rem 0.55rem;
}
.aivis-cite-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.aivis-cite-row .aivis-cite-pill {
    margin-left: 0;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    text-transform: none;
    letter-spacing: 0;
    border: 1px solid rgba(255,255,255,0.12);
    font-family: var(--font-mono, monospace);
}
.aivis-cite-pill-1 { background: linear-gradient(135deg, rgba(99,102,241,0.4), rgba(99,102,241,0.18)) !important; border-color: rgba(99,102,241,0.5) !important; }
.aivis-cite-pill-2 { background: linear-gradient(135deg, rgba(255,107,53,0.4), rgba(255,107,53,0.18)) !important; border-color: rgba(255,107,53,0.5) !important; }
.aivis-cite-pill-3 { background: linear-gradient(135deg, rgba(16,185,129,0.4), rgba(16,185,129,0.18)) !important; border-color: rgba(16,185,129,0.5) !important; }
.aivis-console-foot {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(255,255,255,0.08);
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    color: rgba(255,255,255,0.5);
}

.aivis-console-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 1rem;
}
.aivis-console-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transition: background 0.4s, width 0.4s var(--ease-out-expo);
}
.aivis-console-dots span.is-active {
    background: #FF6B35;
    width: 16px;
    border-radius: 6px;
}

/* ---- What is GEO: brand-aligned glass stat cards ---- */
.aivis-stat-grid { --bs-gutter-x: 0.85rem; --bs-gutter-y: 0.85rem; }
.aivis-stat-card {
    text-align: center;
    padding: 1.4rem 1rem;
    background: linear-gradient(160deg, rgba(99,102,241,0.07), rgba(255,107,53,0.05));
    border: 1px solid rgba(99,102,241,0.18);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(99,102,241,0.1);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s, border-color 0.35s;
}
.aivis-stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,107,53,0.4);
    box-shadow: 0 18px 38px rgba(255,107,53,0.18);
}
.aivis-stat-num {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #FF8F66, #6366F1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.aivis-stat-card small {
    display: block;
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 0.35rem;
}

/* ---- GEO vs SEO: wins tally row ---- */
.geo-vs-tally td {
    padding-top: 1rem;
    border-top: 1px solid rgba(15,23,42,0.1);
}
.geo-vs-tally td strong { color: #0f172a; }
.geo-vs-wins {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: #64748b;
    background: rgba(15,23,42,0.04);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(15,23,42,0.08);
}
.geo-vs-wins strong { color: #0f172a; }
.geo-vs-wins-leader {
    background: linear-gradient(135deg, rgba(255,107,53,0.16), rgba(99,102,241,0.16));
    border-color: rgba(255,107,53,0.45);
    color: #0f172a;
}
.geo-vs-wins-leader i { color: #FF6B35; }
.geo-vs-wins-leader strong { color: #c2410c; }

/* ---- AI Platforms: orbital hub ---- */
.aivis-hub { max-width: 920px; margin: 0 auto; }
.aivis-hub-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}
.aivis-hub-chip {
    --c: #6366F1;
    border: 2px solid color-mix(in srgb, var(--c) 36%, transparent);
    background: color-mix(in srgb, var(--c) 12%, rgba(255,255,255,0.04));
    color: rgba(255,255,255,0.85);
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: transform 0.25s var(--ease-out-expo), background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.aivis-hub-chip:hover {
    transform: translateY(-2px);
    border-color: var(--c);
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 32%, transparent);
}
.aivis-hub-chip.is-active {
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 40%, transparent);
}

.aivis-hub-stage {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    aspect-ratio: 1;
    --hub-r-outer: 260px;
    --hub-r-inner: 130px;
}
.aivis-hub-ring {
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,0.18);
    pointer-events: none;
}
.aivis-hub-ring-outer { width: 87%; height: 87%; }
.aivis-hub-ring-inner { width: 45%; height: 45%; border-color: rgba(255,107,53,0.36); }

.aivis-hub-core {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 132px; height: 132px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #6366F1, #FF6B35);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 20px 50px rgba(99,102,241,0.5);
    z-index: 3;
}
.aivis-hub-core i { font-size: 1.4rem; }
.aivis-hub-core span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }

.aivis-hub-orbit {
    position: absolute;
    inset: 0;
    margin: auto;
    pointer-events: none;
}
.aivis-hub-pill {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    box-shadow: 0 8px 20px rgba(0,0,0,0.32);
    pointer-events: auto;
    cursor: default;
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.3s, opacity 0.4s, filter 0.4s, border-color 0.3s, background 0.3s;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.aivis-hub-orbit-inner .aivis-hub-pill { --r: var(--hub-r-inner); }
.aivis-hub-orbit-outer .aivis-hub-pill { --r: var(--hub-r-outer); }
.aivis-hub-pill:hover {
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) scale(1.08);
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.4);
    z-index: 4;
}
.aivis-hub-pill i { font-size: 0.8rem; }
.aivis-hub-pill[data-cat="chat"] i { color: #34D399; }
.aivis-hub-pill[data-cat="search"] i { color: #FF8F66; }
.aivis-hub-pill[data-cat="enterprise"] i { color: #A5B4FC; }
.aivis-hub.is-filtered .aivis-hub-pill { opacity: 0.18; filter: grayscale(0.6); }
.aivis-hub.is-filtered .aivis-hub-pill.is-match {
    opacity: 1;
    filter: none;
    background: rgba(255,255,255,0.16);
    border-color: color-mix(in srgb, var(--match, #FF6B35) 60%, transparent);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--match, #FF6B35) 40%, transparent);
}

@media (max-width: 991.98px) {
    .aivis-hub-stage { max-width: 540px; --hub-r-outer: 220px; --hub-r-inner: 116px; }
    .aivis-hub-core { width: 116px; height: 116px; }
}
@media (max-width: 767.98px) {
    .aivis-hub-stage {
        aspect-ratio: auto;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .aivis-hub-ring { display: none; }
    .aivis-hub-core { position: relative; inset: auto; margin: 0 auto 1.5rem; width: 104px; height: 104px; }
    .aivis-hub-orbit { position: static; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
    .aivis-hub-pill { position: static; transform: none !important; }
    .aivis-hub-pill:hover { transform: translateY(-2px) scale(1.05) !important; }
}

/* ---- Why it matters: flip card illustrations share the existing engine ---- */
.aivis-illo svg .illo-bar,
.aivis-illo svg .illo-core { transform-box: fill-box; transform-origin: center; }
.aivis-illo svg .illo-trend {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
}
[data-sreveal].is-revealed .aivis-illo .illo-trend {
    animation: stratDraw 0.9s var(--ease-out-expo) 0.15s forwards;
}
[data-sreveal].is-revealed .aivis-illo .illo-bar {
    animation: stratPop 0.6s var(--ease-out-expo) 0.5s both;
}

/* ---- GEO Process: visuals per stage ---- */
.aivis-process-section { position: relative; }
.aivis-process-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(640px 320px at 8% 8%, rgba(99,102,241,0.07), transparent 65%),
        radial-gradient(620px 320px at 92% 92%, rgba(16,185,129,0.07), transparent 65%);
    pointer-events: none;
}

.aivis-pv {
    position: relative;
    width: 100%;
}

/* Audit visual */
.aivis-pv-audit {
    background: linear-gradient(180deg, #fff, #f7f9fd);
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(15,23,42,0.08);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.aivis-pv-audit-q {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    background: rgba(99,102,241,0.07);
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 10px;
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
    color: #475569;
}
.aivis-pv-audit-q i { color: #6366F1; }
.aivis-pv-audit-results { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.aivis-pv-audit-results li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    background: rgba(15,23,42,0.04);
    border-radius: 8px;
    font-size: 0.86rem;
    color: #334155;
}
.aivis-pv-result-rank {
    font-family: var(--font-mono, monospace);
    font-weight: 800;
    color: #94a3b8;
    flex-shrink: 0;
    width: 24px;
}
.aivis-pv-result-pct {
    margin-left: auto;
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    font-weight: 700;
    color: #6366F1;
}
.aivis-pv-result-you {
    background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(239,68,68,0.04));
    border: 1px solid rgba(239,68,68,0.25);
}
.aivis-pv-result-you .aivis-pv-result-rank { color: #b91c1c; }
.aivis-pv-result-you .aivis-pv-result-pct { color: #b91c1c; }
.aivis-pv-audit-foot {
    font-size: 0.78rem;
    color: #b91c1c;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(15,23,42,0.08);
    font-weight: 600;
}
.aivis-pv-audit-foot i { margin-right: 4px; }

/* Knowledge graph visual */
.aivis-pv-graph {
    background: linear-gradient(180deg, #fff, #f7f9fd);
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(15,23,42,0.08);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.aivis-pv-graph svg { width: 100%; height: auto; }
.aivis-pv-graph-legend {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(15,23,42,0.08);
    font-size: 0.74rem;
    color: #64748b;
}
.aivis-pv-graph-legend i { font-size: 0.6rem; margin-right: 4px; }

/* Content visual */
.aivis-pv-content {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(15,23,42,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.aivis-pv-doc-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    background: #f4f6fb;
    border-bottom: 1px solid rgba(15,23,42,0.07);
    font-family: var(--font-mono, monospace);
    font-size: 0.74rem;
    color: #64748b;
}
.aivis-pv-doc-head i { color: #FF6B35; }
.aivis-pv-doc-body {
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}
.aivis-pv-doc-line {
    font-size: 0.82rem;
    color: #334155;
    margin: 0;
    line-height: 1.5;
}
.aivis-pv-stat {
    background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.06));
    color: #047857;
    font-weight: 700;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
}
.aivis-pv-quote {
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(99,102,241,0.06));
    color: #4f46e5;
    font-weight: 700;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-style: normal;
}
.aivis-pv-doc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: #334155;
}
.aivis-pv-doc-list li { padding-left: 0.8rem; position: relative; }
.aivis-pv-doc-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #FF6B35;
    font-weight: 800;
}
.aivis-pv-doc-foot {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.7rem 1rem;
    background: rgba(99,102,241,0.04);
    border-top: 1px dashed rgba(15,23,42,0.08);
}
.aivis-pv-pill {
    font-size: 0.66rem;
    font-weight: 800;
    color: #4f46e5;
    background: rgba(99,102,241,0.13);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    letter-spacing: 0.03em;
}

/* Schema visual */
.aivis-pv-schema {
    background: #0f172a;
    border-radius: 14px;
    box-shadow: 0 20px 44px rgba(0,0,0,0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.aivis-pv-schema-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    background: #1e293b;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.aivis-pv-schema-name {
    margin-left: 0.4rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    color: #94a3b8;
}
.aivis-pv-schema-body {
    padding: 0.85rem 1rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    color: #e2e8f0;
    margin: 0;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-x: auto;
}
.aivis-pv-syntax-brace { color: #FF8F66; }
.aivis-pv-syntax-key { color: #818CF8; }
.aivis-pv-syntax-str { color: #34D399; }
.aivis-pv-schema-foot {
    padding: 0.55rem 1rem;
    background: #050810;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    color: #10B981;
}
.aivis-pv-schema-foot i { margin-right: 4px; }

/* Amplify visual */
.aivis-pv-amplify {
    background: linear-gradient(180deg, #fff, #f7f9fd);
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(15,23,42,0.08);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.aivis-pv-amplify-source {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    color: #0f172a;
    padding: 0.55rem 0.7rem;
    background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(99,102,241,0.06));
    border: 1px solid rgba(255,107,53,0.25);
    border-radius: 10px;
}
.aivis-pv-amplify-source i { color: #FF6B35; }
.aivis-pv-amplify-source strong { color: #c2410c; font-weight: 800; }
.aivis-pv-amplify-source em { font-style: normal; color: #64748b; margin-left: auto; font-size: 0.74rem; }
.aivis-pv-amplify-cites {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.aivis-pv-cite-card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.7rem;
    border-radius: 9px;
    background: rgba(15,23,42,0.04);
    border: 1px solid rgba(15,23,42,0.08);
    font-size: 0.76rem;
    color: #334155;
}
.aivis-pv-cite-card strong { color: #0f172a; font-size: 0.84rem; }
.aivis-pv-cite-card em { font-style: normal; font-size: 0.66rem; color: #64748b; }
.aivis-pv-cite-tc { background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03)); border-color: rgba(16,185,129,0.22); }
.aivis-pv-cite-fb { background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(99,102,241,0.03)); border-color: rgba(99,102,241,0.22); }
.aivis-pv-cite-g2 { background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(255,107,53,0.03)); border-color: rgba(255,107,53,0.22); }
.aivis-pv-cite-vb { background: linear-gradient(135deg, rgba(129,140,248,0.1), rgba(129,140,248,0.03)); border-color: rgba(129,140,248,0.22); }
.aivis-pv-amplify-counter {
    text-align: center;
    padding: 0.55rem 0.8rem;
    background: linear-gradient(135deg, #10B981, #34D399);
    color: #fff;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(16,185,129,0.35);
}
.aivis-pv-amplify-counter strong {
    font-size: 1.15rem;
    font-weight: 800;
    margin-right: 0.35rem;
}

/* ---- GEO Techniques: flip-card example styling ---- */
.aivis-tech-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(255,107,53,0.16), rgba(99,102,241,0.16));
    color: #FF6B35;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
.aivis-tech-example { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; text-align: center; }
.aivis-tech-vs { font-size: 0.85rem; color: #334155; margin: 0; }
.aivis-tech-bad { color: #94a3b8; text-decoration: line-through; }
.aivis-tech-good {
    background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.06));
    color: #047857;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
}
.aivis-tech-arrow { color: #FF6B35; font-size: 0.8rem; margin: 0; }
.aivis-tech-quote {
    font-style: italic;
    font-size: 0.86rem;
    color: #334155;
    padding: 0.6rem 0.8rem;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(99,102,241,0.03));
    border-left: 3px solid #6366F1;
    border-radius: 0 8px 8px 0;
    margin: 0;
}
.aivis-tech-attrib {
    font-size: 0.72rem;
    color: #6366F1;
    font-weight: 700;
    margin: 0;
}
.aivis-tech-src {
    display: inline-block;
    background: rgba(255,107,53,0.13);
    color: #c2410c;
    font-weight: 700;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    text-decoration: none;
    margin: 0 0.1rem;
}
.aivis-tech-q {
    font-family: var(--font-mono, monospace);
    color: #6366F1;
    font-weight: 700;
}
.aivis-tech-example-code {
    text-align: left;
}
.aivis-tech-example-code code {
    display: block;
    background: #0f172a;
    color: #34D399;
    font-family: var(--font-mono, monospace);
    font-size: 0.74rem;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    line-height: 1.6;
}

/* Make flip-card front face on aivis pages match the tech-icon layout */
.page-aivis .svc-flip-front .aivis-tech-icon { margin: 0 0 1rem 0; }

/* ---- Case studies: CSS gradient covers (no stock images) ---- */
.aivis-case-card {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(15,23,42,0.12);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.aivis-case-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(255,107,53,0.2);
}
.aivis-case-cover {
    position: relative;
    height: 180px;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem 1.1rem;
}
.aivis-case-cover-1 { background: linear-gradient(135deg, #6366F1 0%, #818CF8 50%, #FF6B35 100%); }
.aivis-case-cover-2 { background: linear-gradient(135deg, #FF6B35 0%, #FF8F66 50%, #818CF8 100%); }
.aivis-case-cover-3 { background: linear-gradient(135deg, #10B981 0%, #34D399 50%, #6366F1 100%); }
.aivis-case-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(220px 140px at 20% 20%, rgba(255,255,255,0.22), transparent 70%),
        radial-gradient(220px 140px at 80% 80%, rgba(255,255,255,0.12), transparent 70%);
}
.aivis-case-bubble {
    display: inline-block;
    align-self: flex-start;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-family: var(--font-mono, monospace);
    font-size: 0.74rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
    margin-bottom: 0.5rem;
}
.aivis-case-cite {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    background: rgba(16,185,129,0.92);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    box-shadow: 0 8px 16px rgba(16,185,129,0.35);
    position: relative;
    z-index: 1;
}
.aivis-case-watermark {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 7rem;
    opacity: 0.18;
    color: #fff;
    transform: rotate(-12deg);
}
.aivis-case-body {
    padding: 1.4rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
.aivis-case-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6366F1;
    background: rgba(99,102,241,0.1);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
}
.aivis-case-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.85rem 0;
    border-top: 1px dashed rgba(15,23,42,0.1);
    border-bottom: 1px dashed rgba(15,23,42,0.1);
}
.aivis-case-metrics > div {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.aivis-case-metrics strong {
    font-size: 1.15rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FF6B35, #6366F1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.aivis-case-metrics em {
    font-style: normal;
    font-size: 0.66rem;
    color: #64748b;
    font-weight: 600;
}
.aivis-case-highlight {
    font-size: 0.84rem;
    color: #334155;
    margin-top: 0.5rem;
    line-height: 1.5;
}

/* ====================================================================
   === AI VISIBILITY PAGE — card chrome polish ========================
   Scoped to .page-aivis. Boost radius + box-shadow on cards.
   ==================================================================== */
.page-aivis .strat-snapshot {
    border-radius: 24px;
    box-shadow: 0 36px 80px rgba(5,7,20,0.6),
                0 12px 30px rgba(16,185,129,0.18);
}
.page-aivis .geo-vs-table-wrapper {
    border-radius: 22px;
    box-shadow: 0 22px 50px rgba(15,23,42,0.1),
                0 4px 14px rgba(99,102,241,0.08);
}
.page-aivis .svc-flip-face {
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.12);
    box-shadow: 0 18px 44px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.08);
}
.page-aivis .svc-flip:hover .svc-flip-face,
.page-aivis .svc-flip:focus-visible .svc-flip-face,
.page-aivis .svc-flip.is-flipped .svc-flip-face {
    box-shadow: 0 28px 60px rgba(255,107,53,0.22),
                0 8px 20px rgba(99,102,241,0.18);
}
.page-aivis .geo-lever-card {
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.14);
    box-shadow: 0 18px 44px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.08);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s, border-color 0.35s, background 0.35s;
}
.page-aivis .geo-lever-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,107,53,0.4);
    box-shadow: 0 26px 56px rgba(255,107,53,0.2),
                0 8px 20px rgba(99,102,241,0.14);
}
.page-aivis .geo-lever-card-cta {
    background: linear-gradient(135deg, #6366F1 0%, #FF6B35 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 24px 54px rgba(99,102,241,0.35),
                0 8px 20px rgba(255,107,53,0.22);
}
.page-aivis .geo-lever-card-cta:hover {
    box-shadow: 0 32px 70px rgba(99,102,241,0.45),
                0 12px 26px rgba(255,107,53,0.3);
}
.page-aivis .geo-lever-card-cta .geo-lever-icon { color: #fff; }
.page-aivis .ecom-process-stage {
    border-radius: 24px;
    border: 1px solid rgba(99,102,241,0.12);
    box-shadow: 0 24px 56px rgba(15,23,42,0.1),
                0 4px 14px rgba(99,102,241,0.08);
}
.page-aivis .svc-pricing-card {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 22px 50px rgba(5,7,20,0.45),
                0 6px 16px rgba(99,102,241,0.18);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), border-color 0.4s;
}
.page-aivis .svc-pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 64px rgba(255,107,53,0.2),
                0 10px 22px rgba(99,102,241,0.18);
}
.page-aivis .svc-pricing-card.featured {
    border-color: rgba(255,107,53,0.55);
    box-shadow: 0 30px 64px rgba(255,107,53,0.32),
                0 10px 24px rgba(99,102,241,0.22);
}
.page-aivis .svc-faq .accordion { display: flex; flex-direction: column; gap: 0.85rem; }
.page-aivis .svc-faq .accordion-item {
    border: 1px solid rgba(99,102,241,0.14) !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15,23,42,0.07),
                0 3px 10px rgba(99,102,241,0.06);
    transition: box-shadow 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo), border-color 0.35s;
}
.page-aivis .svc-faq .accordion-item:hover {
    transform: translateY(-2px);
    border-color: rgba(99,102,241,0.32) !important;
    box-shadow: 0 18px 38px rgba(99,102,241,0.14),
                0 5px 14px rgba(255,107,53,0.08);
}
.page-aivis .svc-faq .accordion-button { border-radius: 18px !important; font-weight: 700; }
.page-aivis .svc-faq .accordion-button:not(.collapsed) {
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(255,107,53,0.08));
    color: #0f172a;
    box-shadow: none;
}
.page-aivis .svc-faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }

/* Responsive */
@media (max-width: 575.98px) {
    .page-aivis .strat-snapshot,
    .page-aivis .ecom-process-stage,
    .page-aivis .aivis-case-card { border-radius: 18px; }
    .aivis-console-rail { height: 240px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .aivis-console { transition: none !important; }
    .aivis-hub-pill { transition: none !important; }
    .aivis-stat-card { transition: none !important; }
}

/* ====================================================================
   === SEO & DIGITAL MARKETING PAGE — interactive rebuild =============
   Live rankings tracker · service flips · process explorer mocks ·
   report tabs · orbital tooling hub
   ==================================================================== */

/* Hero: left-aligned breadcrumb */
.svc-hero-seo .breadcrumb { justify-content: flex-start; }

/* Hero: Live Rankings Tracker (extends .strat-snapshot) */
.seo-tracker .strat-snapshot-glow {
    background: radial-gradient(circle, rgba(255,107,53,0.5), transparent 65%);
}
.seo-kpi-suffix {
    font-size: 1rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FF8F66, #818CF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 2px;
}

.seo-console-rail {
    position: relative;
    height: 200px;
    margin-bottom: 1.1rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}
.seo-console {
    position: absolute;
    inset: 0;
    padding: 0.85rem 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
}
.seo-console.is-active { opacity: 1; transform: none; }
.seo-console-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
    margin-bottom: 0.55rem;
}
.seo-console-icon {
    width: 28px; height: 28px;
    border-radius: 7px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #FF6B35, #FF8F66);
    color: #fff;
    font-size: 0.78rem;
}
.seo-console-name {
    font-weight: 800;
    color: #fff;
    font-size: 0.88rem;
}
.seo-console-q {
    margin-left: auto;
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    color: rgba(255,255,255,0.6);
}
.seo-console-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.seo-console-foot {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(255,255,255,0.08);
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    color: rgba(255,255,255,0.55);
}

/* SERP rank console */
.seo-rank-row {
    display: flex; align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono, monospace);
}
.seo-rank-from {
    font-size: 1.1rem;
    font-weight: 800;
    color: rgba(255,255,255,0.45);
    text-decoration: line-through;
}
.seo-rank-arrow { color: #FF8F66; font-size: 0.85rem; }
.seo-rank-to {
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FF6B35, #FF8F66);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.seo-rank-delta {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 700;
    color: #34D399;
    background: rgba(16,185,129,0.15);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}
.seo-rank-delta i { font-size: 0.6rem; margin-right: 2px; }
.seo-rank-spark {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 0.3rem;
    height: 56px;
}
.seo-rank-spark span {
    display: block;
    width: 100%;
    height: var(--h, 30%);
    background: linear-gradient(180deg, #818CF8, #6366F1);
    border-radius: 3px 3px 0 0;
    animation: ecomBarGrow 0.7s var(--ease-out-expo) both;
}
.seo-rank-spark span:nth-child(2) { animation-delay: 0.08s; }
.seo-rank-spark span:nth-child(3) { animation-delay: 0.16s; }
.seo-rank-spark span:nth-child(4) { animation-delay: 0.24s; }
.seo-rank-spark span:nth-child(5) { animation-delay: 0.32s; }
.seo-rank-spark span:nth-child(6) { animation-delay: 0.40s; }
.seo-rank-spark span:nth-child(7) { animation-delay: 0.48s; }
.seo-rank-spark span.is-now {
    background: linear-gradient(180deg, #FF8F66, #FF6B35);
    box-shadow: 0 0 12px rgba(255,107,53,0.5);
}
.seo-rank-spark-line span {
    background: linear-gradient(180deg, #34D399, #10B981);
}
.seo-rank-spark-line span.is-now {
    background: linear-gradient(180deg, #FF8F66, #FF6B35);
}

/* Traffic console */
.seo-traffic-num {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.seo-traffic-num strong {
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    font-family: var(--font-display);
}
.seo-traffic-delta {
    font-family: var(--font-mono, monospace);
    font-size: 0.84rem;
    font-weight: 700;
    color: #34D399;
}
.seo-traffic-delta i { font-size: 0.7rem; margin-right: 2px; }

/* Conversions console */
.seo-conv-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}
.seo-conv-list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.85);
    padding: 0.4rem 0.55rem;
    background: rgba(255,255,255,0.04);
    border-radius: 7px;
}
.seo-conv-list li em {
    margin-left: auto;
    font-style: normal;
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem;
    color: rgba(255,255,255,0.5);
}
.seo-conv-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #10B981;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(16,185,129,0.55);
}

.seo-console-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 1rem;
}
.seo-console-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transition: background 0.4s, width 0.4s var(--ease-out-expo);
}
.seo-console-dots span.is-active {
    background: #FF6B35;
    width: 16px;
    border-radius: 6px;
}

/* ---- Problem / Solution cards ---- */
.seo-ps-card {
    height: 100%;
    border-radius: 22px;
    padding: 1.85rem 1.85rem;
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s, border-color 0.35s;
}
.seo-ps-problem {
    background: linear-gradient(160deg, #fef2f2 0%, #fff1ea 100%);
    border: 1px solid rgba(239,68,68,0.22);
    box-shadow: 0 16px 40px rgba(239,68,68,0.1),
                0 4px 12px rgba(15,23,42,0.06);
}
.seo-ps-problem .chip-warm {
    display: inline-block;
    background: rgba(239,68,68,0.13);
    color: #b91c1c;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}
.seo-ps-problem li i.fa-xmark { color: #EF4444; }
.seo-ps-problem:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(239,68,68,0.18);
}
.seo-ps-solution {
    background: linear-gradient(160deg, #f1f5fb 0%, #ecfbf3 100%);
    border: 1px solid rgba(16,185,129,0.25);
    box-shadow: 0 16px 40px rgba(16,185,129,0.1),
                0 4px 12px rgba(15,23,42,0.06);
}
.seo-ps-solution .chip-cool {
    display: inline-block;
    background: linear-gradient(135deg, rgba(99,102,241,0.13), rgba(16,185,129,0.13));
    color: #047857;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}
.seo-ps-solution li i.fa-check { color: #10B981; }
.seo-ps-solution:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(16,185,129,0.18);
}

/* ---- SEO Services: flip card illustrations ---- */
.seo-illo svg .illo-bar,
.seo-illo svg .illo-core { transform-box: fill-box; transform-origin: center; }
.seo-illo svg .illo-trend {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
}
[data-sreveal].is-revealed .seo-illo .illo-trend {
    animation: stratDraw 0.9s var(--ease-out-expo) 0.15s forwards;
}
[data-sreveal].is-revealed .seo-illo .illo-bar {
    animation: stratPop 0.6s var(--ease-out-expo) 0.5s both;
}
.seo-flip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
}
.seo-flip-list li {
    position: relative;
    padding: 0.32rem 0 0.32rem 1.3rem;
    font-size: 0.86rem;
    color: #334155;
    border-bottom: 1px dashed rgba(15,23,42,0.08);
}
.seo-flip-list li:last-child { border-bottom: 0; }
.seo-flip-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.55rem;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35, #818CF8);
}

/* ---- Content Marketing — bold rows + animated bars ---- */
.seo-content-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid rgba(99,102,241,0.12);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15,23,42,0.06);
    margin-bottom: 0.9rem;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s, border-color 0.3s;
}
.seo-content-row:hover {
    transform: translateY(-3px);
    border-color: rgba(255,107,53,0.4);
    box-shadow: 0 18px 38px rgba(255,107,53,0.14);
}
.seo-content-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(255,107,53,0.18));
    color: #6366F1;
    font-size: 1rem;
    flex-shrink: 0;
}
.seo-results-card {
    background: #fff;
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.14);
    box-shadow: 0 22px 48px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.08);
    padding: 1.85rem 1.85rem;
}
.seo-results-row { margin-bottom: 1.25rem; }
.seo-results-row:last-child { margin-bottom: 0; }
.seo-results-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.86rem;
}
.seo-results-head span { color: var(--color-muted); }
.seo-results-head strong {
    color: #FF6B35;
    font-weight: 800;
}
.seo-results-bar {
    height: 10px;
    background: #eef0f6;
    border-radius: 999px;
    overflow: hidden;
}
.seo-results-fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #818CF8, #6366F1 35%, #FF6B35 100%);
    border-radius: 999px;
    transition: width 1.2s var(--ease-out-expo) var(--d, 0s);
}
[data-sreveal].is-revealed .seo-results-fill { width: var(--w); }
[data-sreveal].is-revealed .seo-results-row:nth-child(2) .seo-results-fill { transition-delay: 0.1s; }
[data-sreveal].is-revealed .seo-results-row:nth-child(3) .seo-results-fill { transition-delay: 0.2s; }
[data-sreveal].is-revealed .seo-results-row:nth-child(4) .seo-results-fill { transition-delay: 0.3s; }

/* ---- Process — section background ---- */
.seo-process-section { position: relative; }
.seo-process-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(640px 320px at 8% 8%, rgba(99,102,241,0.07), transparent 65%),
        radial-gradient(620px 320px at 92% 92%, rgba(255,107,53,0.07), transparent 65%);
    pointer-events: none;
}

/* ---- Process mockups ---- */
.seo-pv {
    position: relative;
    width: 100%;
}

/* Audit mock */
.seo-pv-audit {
    background: linear-gradient(180deg, #fff, #f7f9fd);
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(15,23,42,0.08);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.seo-pv-audit-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px dashed rgba(15,23,42,0.08);
}
.seo-pv-audit-head i { color: #6366F1; font-size: 0.95rem; }
.seo-pv-audit-head strong { font-size: 0.95rem; color: #0f172a; font-weight: 800; }
.seo-pv-audit-score {
    margin-left: auto;
    font-family: var(--font-mono, monospace);
    font-size: 0.74rem;
    font-weight: 700;
    color: #6366F1;
    background: rgba(99,102,241,0.1);
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
}
.seo-pv-audit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.seo-pv-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.48rem 0.65rem;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #334155;
}
.seo-pv-row i { font-size: 0.85rem; flex-shrink: 0; }
.seo-pv-row em { margin-left: auto; font-style: normal; font-size: 0.74rem; font-weight: 700; }
.seo-pv-good { background: rgba(16,185,129,0.08); }
.seo-pv-good i { color: #10B981; }
.seo-pv-good em { color: #047857; }
.seo-pv-warn { background: rgba(255,143,102,0.1); }
.seo-pv-warn i { color: #FF8F66; }
.seo-pv-warn em { color: #c2410c; }
.seo-pv-bad { background: rgba(239,68,68,0.08); }
.seo-pv-bad i { color: #EF4444; }
.seo-pv-bad em { color: #b91c1c; }
.seo-pv-audit-foot {
    font-size: 0.78rem;
    font-weight: 600;
    color: #FF6B35;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(15,23,42,0.08);
}
.seo-pv-audit-foot i { margin-right: 5px; }

/* Strategy mock — bubble chart */
.seo-pv-strategy {
    background: linear-gradient(180deg, #fff, #f7f9fd);
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(15,23,42,0.08);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.seo-pv-strategy-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed rgba(15,23,42,0.08);
}
.seo-pv-strategy-head strong { font-size: 0.9rem; color: #0f172a; font-weight: 800; }
.seo-pv-strategy-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6366F1;
    background: rgba(99,102,241,0.1);
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
}
.seo-pv-bubble-chart {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, transparent 49.5%, rgba(99,102,241,0.06) 49.5%, rgba(99,102,241,0.06) 50.5%, transparent 50.5%),
        linear-gradient(0deg,  transparent 49.5%, rgba(99,102,241,0.06) 49.5%, rgba(99,102,241,0.06) 50.5%, transparent 50.5%);
}
.seo-pv-bubble {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 80%, transparent) 0%, color-mix(in srgb, var(--c) 30%, transparent) 70%, transparent 90%);
    border: 1.5px solid var(--c);
    color: var(--c);
    display: grid;
    place-items: center;
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.1;
    padding: 0.25rem;
    animation: stratPop 0.6s var(--ease-out-expo) both;
    cursor: default;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s;
}
.seo-pv-bubble:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 24px color-mix(in srgb, var(--c) 45%, transparent);
    z-index: 2;
}
.seo-pv-bubble:nth-child(2) { animation-delay: 0.1s; }
.seo-pv-bubble:nth-child(3) { animation-delay: 0.2s; }
.seo-pv-bubble:nth-child(4) { animation-delay: 0.3s; }
.seo-pv-bubble:nth-child(5) { animation-delay: 0.4s; }
.seo-pv-bubble em {
    font-style: normal;
    font-weight: 600;
    font-size: 0.58rem;
    opacity: 0.8;
}
.seo-pv-strategy-axes {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #94a3b8;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(15,23,42,0.08);
}

/* Implementation mock — publishing queue */
.seo-pv-impl {
    background: linear-gradient(180deg, #fff, #f7f9fd);
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(15,23,42,0.08);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.seo-pv-impl-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed rgba(15,23,42,0.08);
}
.seo-pv-impl-head i { color: #FF6B35; font-size: 0.95rem; }
.seo-pv-impl-head strong { font-size: 0.92rem; color: #0f172a; font-weight: 800; }
.seo-pv-impl-tag {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #FF6B35, #FF8F66);
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
}
.seo-pv-impl-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.seo-pv-impl-list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    background: rgba(255,107,53,0.05);
    border: 1px solid rgba(255,107,53,0.16);
    border-radius: 8px;
    font-size: 0.82rem;
    color: #334155;
}
.seo-pv-impl-list li em {
    margin-left: auto;
    font-style: normal;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
}
.seo-pv-impl-pill {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
}
.seo-pv-impl-blog { background: #6366F1; }
.seo-pv-impl-pillar { background: #FF6B35; }
.seo-pv-impl-pr { background: #10B981; }
.seo-pv-impl-foot {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    color: #10B981;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(15,23,42,0.08);
}
.seo-pv-impl-foot i { margin-right: 5px; }

/* ---- Reporting dashboard — interactive tabs ---- */
.seo-report-interactive .seo-report-tab {
    cursor: pointer;
    background: transparent;
    border: 0;
}
.seo-report-view {
    display: none;
    padding: 1.25rem 1.4rem;
    animation: stratFadeUp 0.5s var(--ease-out-expo);
}
.seo-report-view.is-active { display: block; }
.seo-report-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    margin-bottom: 1rem;
}
.seo-report-stat {
    background: rgba(99,102,241,0.05);
    border: 1px solid rgba(99,102,241,0.13);
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
}
.seo-report-stat-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.25rem;
}
.seo-report-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    font-family: var(--font-display);
}
.seo-report-stat-delta {
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 0.2rem;
}
.seo-up { color: #10B981; }
.seo-down { color: #EF4444; }

.seo-report-channels {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.seo-channel-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.seo-channel-label {
    width: 110px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    flex-shrink: 0;
}
.seo-channel-bar {
    flex: 1;
    height: 12px;
    background: rgba(15,23,42,0.06);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.seo-channel-fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c, #6366F1));
    border-radius: 999px;
    transition: width 0.9s var(--ease-out-expo);
}
.seo-report-view.is-active .seo-channel-fill { width: var(--w); }
.seo-report-view.is-active .seo-channel-row:nth-child(2) .seo-channel-fill { transition-delay: 0.08s; }
.seo-report-view.is-active .seo-channel-row:nth-child(3) .seo-channel-fill { transition-delay: 0.16s; }
.seo-report-view.is-active .seo-channel-row:nth-child(4) .seo-channel-fill { transition-delay: 0.24s; }
.seo-report-view.is-active .seo-channel-row:nth-child(5) .seo-channel-fill { transition-delay: 0.32s; }
.seo-channel-val {
    width: 48px;
    text-align: right;
    font-family: var(--font-mono, monospace);
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
    flex-shrink: 0;
}

.seo-report-funnel {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.seo-funnel-row {
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.95rem;
    margin: 0 auto;
    width: 0;
    max-width: var(--w);
    font-weight: 700;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 32%, transparent);
    animation: ecomFunnelGrow 0.8s var(--ease-out-expo) both;
}
.seo-funnel-row:nth-child(1) { animation-delay: 0.1s; }
.seo-funnel-row:nth-child(2) { animation-delay: 0.22s; }
.seo-funnel-row:nth-child(3) { animation-delay: 0.34s; }
.seo-funnel-row:nth-child(4) { animation-delay: 0.46s; }
.seo-funnel-row span { font-size: 0.84rem; }
.seo-funnel-row strong { font-family: var(--font-mono, monospace); font-size: 0.84rem; opacity: 0.9; }

.seo-report-pages {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.seo-report-pages li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: rgba(99,102,241,0.05);
    border: 1px solid rgba(99,102,241,0.13);
    border-radius: 8px;
    font-size: 0.82rem;
}
.seo-page-url {
    flex: 1;
    font-family: var(--font-mono, monospace);
    color: #4338ca;
    font-weight: 600;
}
.seo-page-pv {
    font-family: var(--font-mono, monospace);
    color: #0f172a;
    font-weight: 700;
}
.seo-page-delta {
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    font-weight: 700;
    width: 60px;
    text-align: right;
}

/* ---- Tools — orbital hub (same engine as ecom/aivis hubs) ---- */
.seo-hub { max-width: 920px; margin: 0 auto; }
.seo-hub-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}
.seo-hub-chip {
    --c: #6366F1;
    border: 2px solid color-mix(in srgb, var(--c) 28%, transparent);
    background: color-mix(in srgb, var(--c) 8%, #fff);
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: transform 0.25s var(--ease-out-expo), background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.seo-hub-chip:hover {
    transform: translateY(-2px);
    border-color: var(--c);
    color: var(--c);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 32%, transparent);
}
.seo-hub-chip.is-active {
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 40%, transparent);
}

.seo-hub-stage {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    aspect-ratio: 1;
    --hub-r-outer: 260px;
    --hub-r-inner: 130px;
}
.seo-hub-ring {
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    border: 1.5px dashed rgba(99,102,241,0.25);
    pointer-events: none;
}
.seo-hub-ring-outer { width: 87%; height: 87%; }
.seo-hub-ring-inner { width: 45%; height: 45%; border-color: rgba(255,107,53,0.28); }

.seo-hub-core {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 132px; height: 132px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #6366F1, #FF6B35);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 20px 50px rgba(99,102,241,0.4);
    z-index: 3;
}
.seo-hub-core i { font-size: 1.6rem; }
.seo-hub-core span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }

.seo-hub-orbit {
    position: absolute;
    inset: 0;
    margin: auto;
    pointer-events: none;
}
.seo-hub-pill {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: #fff;
    border: 1.5px solid rgba(15,23,42,0.1);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 8px 20px rgba(15,23,42,0.1);
    pointer-events: auto;
    cursor: default;
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.3s, opacity 0.4s, filter 0.4s, border-color 0.3s;
    white-space: nowrap;
}
.seo-hub-orbit-inner .seo-hub-pill { --r: var(--hub-r-inner); }
.seo-hub-orbit-outer .seo-hub-pill { --r: var(--hub-r-outer); }
.seo-hub-pill:hover {
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) scale(1.08);
    box-shadow: 0 14px 28px rgba(15,23,42,0.18);
    z-index: 4;
}
.seo-hub-pill i { font-size: 0.78rem; }
.seo-hub-pill[data-cat="seo"] i { color: #6366F1; }
.seo-hub-pill[data-cat="ana"] i { color: #10B981; }
.seo-hub-pill[data-cat="ads"] i { color: #FF6B35; }
.seo-hub-pill[data-cat="content"] i { color: #FF8F66; }
.seo-hub-pill[data-cat="test"] i { color: #818CF8; }
.seo-hub.is-filtered .seo-hub-pill { opacity: 0.22; filter: grayscale(0.6); }
.seo-hub.is-filtered .seo-hub-pill.is-match {
    opacity: 1;
    filter: none;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--match, #6366F1) 36%, transparent);
    border-color: color-mix(in srgb, var(--match, #6366F1) 55%, transparent);
}

@media (max-width: 991.98px) {
    .seo-hub-stage { max-width: 540px; --hub-r-outer: 220px; --hub-r-inner: 116px; }
    .seo-hub-core { width: 116px; height: 116px; }
}
@media (max-width: 767.98px) {
    .seo-hub-stage {
        aspect-ratio: auto;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .seo-hub-ring { display: none; }
    .seo-hub-core { position: relative; inset: auto; margin: 0 auto 1.5rem; width: 104px; height: 104px; }
    .seo-hub-orbit { position: static; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
    .seo-hub-pill { position: static; transform: none !important; }
    .seo-hub-pill:hover { transform: translateY(-2px) scale(1.05) !important; }
}

/* ====================================================================
   === SEO PAGE — card chrome polish ==================================
   ==================================================================== */
.page-seo .strat-snapshot {
    border-radius: 24px;
    box-shadow: 0 36px 80px rgba(5,7,20,0.6),
                0 12px 30px rgba(255,107,53,0.2);
}
.page-seo .svc-flip-face {
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.12);
    box-shadow: 0 18px 44px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.08);
}
.page-seo .svc-flip:hover .svc-flip-face,
.page-seo .svc-flip:focus-visible .svc-flip-face,
.page-seo .svc-flip.is-flipped .svc-flip-face {
    box-shadow: 0 28px 60px rgba(255,107,53,0.22),
                0 8px 20px rgba(99,102,241,0.18);
}
.page-seo .svc-glass-card {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 22px 50px rgba(5,7,20,0.45),
                0 6px 16px rgba(99,102,241,0.18);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s, border-color 0.35s;
}
.page-seo .svc-glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,107,53,0.4);
    box-shadow: 0 30px 60px rgba(255,107,53,0.25),
                0 10px 22px rgba(99,102,241,0.2);
}
.page-seo .ecom-process-stage {
    border-radius: 24px;
    border: 1px solid rgba(99,102,241,0.12);
    box-shadow: 0 24px 56px rgba(15,23,42,0.1),
                0 4px 14px rgba(99,102,241,0.08);
}
.page-seo .seo-report-mock {
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.16);
    box-shadow: 0 24px 56px rgba(15,23,42,0.12),
                0 6px 16px rgba(99,102,241,0.1);
    overflow: hidden;
    background: #fff;
}
.page-seo .svc-pricing-card {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 22px 50px rgba(5,7,20,0.45),
                0 6px 16px rgba(99,102,241,0.18);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.page-seo .svc-pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 64px rgba(255,107,53,0.22),
                0 10px 22px rgba(99,102,241,0.18);
}
.page-seo .svc-pricing-card.featured {
    border-color: rgba(255,107,53,0.55);
    box-shadow: 0 30px 64px rgba(255,107,53,0.34),
                0 10px 24px rgba(99,102,241,0.2);
}
.page-seo .svc-faq .accordion { display: flex; flex-direction: column; gap: 0.85rem; }
.page-seo .svc-faq .accordion-item {
    border: 1px solid rgba(99,102,241,0.14) !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15,23,42,0.07),
                0 3px 10px rgba(99,102,241,0.06);
    transition: box-shadow 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo), border-color 0.35s;
}
.page-seo .svc-faq .accordion-item:hover {
    transform: translateY(-2px);
    border-color: rgba(99,102,241,0.32) !important;
    box-shadow: 0 18px 38px rgba(99,102,241,0.14),
                0 5px 14px rgba(255,107,53,0.08);
}
.page-seo .svc-faq .accordion-button { border-radius: 18px !important; font-weight: 700; }
.page-seo .svc-faq .accordion-button:not(.collapsed) {
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(255,107,53,0.08));
    color: #0f172a;
    box-shadow: none;
}
.page-seo .svc-faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }

@media (max-width: 575.98px) {
    .page-seo .strat-snapshot,
    .page-seo .ecom-process-stage,
    .page-seo .seo-report-mock { border-radius: 18px; }
    .seo-console-rail { height: 230px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .seo-console, .seo-hub-pill, .seo-content-row,
    .seo-ps-card, .seo-results-fill, .seo-channel-fill { transition: none !important; }
    .seo-rank-spark span, .seo-pv-bubble, .seo-funnel-row { animation: none !important; }
    [data-sreveal].is-revealed .seo-results-fill { width: var(--w); }
}

/* ====================================================================
   === INSIGHTS (BLOG) PAGE — interactive rebuild =====================
   Latest Insights tracker · interactive topic cards · post grid polish
   ==================================================================== */

/* ---- Hero: two-column layout adjustments ---- */
.insights-hero { padding: 6rem 0 4rem; }
.insights-hero .breadcrumb { justify-content: flex-start; }

/* ---- Hero: Latest Insights tracker ---- */
.insights-tracker .strat-snapshot-glow {
    background: radial-gradient(circle, rgba(255,107,53,0.45), transparent 65%);
}
.insights-kpi-suffix {
    font-size: 0.78rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FF8F66, #818CF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 2px;
}

.insights-tracker-rail {
    position: relative;
    height: 180px;
    margin-bottom: 0.8rem;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.insights-tracker-card {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0;
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo);
    pointer-events: none;
}
.insights-tracker-card.is-active { opacity: 1; transform: none; pointer-events: auto; }
.insights-tracker-cover {
    position: relative;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 0.7rem;
}
.insights-tracker-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
}
.insights-tracker-body {
    padding: 0.9rem 1rem 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}
.insights-tracker-title {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.insights-tracker-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem;
    color: rgba(255,255,255,0.55);
}

.insights-tracker-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 1rem;
}
.insights-tracker-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transition: background 0.4s, width 0.4s var(--ease-out-expo);
}
.insights-tracker-dots span.is-active {
    background: #FF6B35;
    width: 16px;
    border-radius: 6px;
}

/* ---- Featured post enhancements ---- */
.insights-featured-section .featured-post-card {
    border-radius: 24px;
    box-shadow: 0 28px 70px rgba(15,23,42,0.14),
                0 8px 22px rgba(99,102,241,0.1);
    transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s var(--ease-out-expo);
}
.insights-featured-section .featured-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 90px rgba(255,107,53,0.22),
                0 14px 32px rgba(99,102,241,0.18);
}
.insights-featured-section .featured-post-cover {
    position: relative;
    overflow: hidden;
}
.featured-post-watermark {
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 8rem;
    color: rgba(255,255,255,0.18);
    transform: rotate(-12deg);
    pointer-events: none;
}

/* ---- Topic Category cards ---- */
.insights-topics { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.insights-topic-card {
    --tc: #6366F1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 22px;
    border: 1px solid rgba(99,102,241,0.14);
    box-shadow: 0 18px 44px rgba(15,23,42,0.1),
                0 4px 12px rgba(99,102,241,0.08);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), border-color 0.4s;
}
.insights-topic-card:hover {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--tc) 50%, transparent);
    box-shadow: 0 30px 64px color-mix(in srgb, var(--tc) 28%, transparent),
                0 10px 24px rgba(99,102,241,0.16);
    text-decoration: none;
    color: inherit;
}
.insights-topic-card.is-active {
    border-color: color-mix(in srgb, var(--tc) 65%, transparent);
    box-shadow: 0 24px 56px color-mix(in srgb, var(--tc) 32%, transparent),
                0 8px 20px rgba(99,102,241,0.14);
}
.insights-topic-cover {
    position: relative;
    height: 130px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
}
.insights-topic-cover-all {
    position: relative;
    height: 130px;
    background: linear-gradient(135deg, #6366F1 0%, #FF6B35 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
}
.insights-topic-cover-all::before,
.insights-topic-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(180px 100px at 25% 30%, rgba(255,255,255,0.22), transparent 70%),
        radial-gradient(180px 100px at 75% 75%, rgba(255,255,255,0.12), transparent 70%);
    pointer-events: none;
}
.insights-topic-icon {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.4rem;
    transition: transform 0.4s var(--ease-out-expo);
}
.insights-topic-card:hover .insights-topic-icon {
    transform: scale(1.1) rotate(-6deg);
}
.insights-topic-count {
    position: relative;
    font-size: 0.74rem;
    font-weight: 800;
    color: #fff;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.insights-topic-body {
    padding: 1.2rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}
.insights-topic-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
    transition: color 0.3s;
}
.insights-topic-card:hover .insights-topic-name { color: var(--tc); }
.insights-topic-meta {
    font-size: 0.84rem;
    color: #64748b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.insights-topic-meta i { font-size: 0.7rem; color: var(--tc); }
.insights-topic-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tc);
}
.insights-topic-cta i { transition: transform 0.3s var(--ease-out-expo); }
.insights-topic-card:hover .insights-topic-cta i { transform: translateX(4px); }

/* ---- Essay grid: lift + brand-color shadow on hover ---- */
.insights-grid .insights-card {
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(15,23,42,0.08),
                0 4px 12px rgba(99,102,241,0.06);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.insights-grid .insights-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 28px 60px rgba(255,107,53,0.18),
                0 10px 24px rgba(99,102,241,0.14);
}

/* ---- Newsletter band — branded ---- */
.insights-newsletter {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 2.4rem 2.5rem;
    box-shadow: 0 32px 70px rgba(5,7,20,0.45),
                0 10px 24px rgba(99,102,241,0.2);
    overflow: hidden;
    isolation: isolate;
}
.insights-newsletter-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(420px 240px at 10% 0%, rgba(99,102,241,0.4), transparent 60%),
        radial-gradient(420px 260px at 90% 100%, rgba(255,107,53,0.32), transparent 60%);
    pointer-events: none;
}
.insights-newsletter-icon {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FF6B35, #FF8F66);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    box-shadow: 0 12px 28px rgba(255,107,53,0.38);
}
.insights-newsletter-pulse {
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    border: 2px solid rgba(255,107,53,0.55);
    animation: insightsPulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes insightsPulse {
    0%   { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(1.35); opacity: 0; }
}
.insights-newsletter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
}
.insights-newsletter-pill i { color: #34D399; font-size: 0.7rem; }
.insights-newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.insights-newsletter-form .form-control {
    flex: 1;
    min-width: 220px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    color: #fff;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.insights-newsletter-form .form-control::placeholder { color: rgba(255,255,255,0.45); }
.insights-newsletter-form .form-control:focus {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,107,53,0.6);
    box-shadow: 0 0 0 4px rgba(255,107,53,0.18);
    color: #fff;
}
.insights-newsletter-form .btn {
    border-radius: 12px;
    padding: 0.85rem 1.4rem;
    font-weight: 700;
    white-space: nowrap;
}
.insights-newsletter-trust {
    margin: 0.7rem 0 0;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    text-align: right;
}

/* ---- Page-scoped card chrome ---- */
.page-insights .strat-snapshot {
    border-radius: 24px;
    box-shadow: 0 36px 80px rgba(5,7,20,0.6),
                0 12px 30px rgba(99,102,241,0.18);
}

@media (max-width: 991.98px) {
    .insights-newsletter { padding: 1.8rem 1.6rem; }
    .insights-newsletter-trust { text-align: left; margin-top: 0.5rem; }
}
@media (max-width: 767.98px) {
    .insights-hero { padding: 5rem 0 3rem; }
    .insights-tracker-rail { height: 200px; }
    .insights-tracker-card { grid-template-columns: 100px 1fr; }
    .insights-tracker-title { font-size: 0.92rem; }
}
@media (max-width: 575.98px) {
    .insights-tracker-card { grid-template-columns: 1fr; }
    .insights-tracker-cover { height: 90px; }
    .insights-tracker-rail { height: 250px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .insights-tracker-card,
    .insights-topic-card,
    .insights-grid .insights-card,
    .insights-featured-section .featured-post-card { transition: none !important; }
    .insights-newsletter-pulse { animation: none !important; }
}

/* ====================================================================
   === INSIGHTS — interactivity layer =================================
   Scroll progress · search/sort/view toolbar · bookmark · saved badge
   ==================================================================== */

/* Scroll progress bar */
.insights-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #6366F1, #FF6B35);
    z-index: 1080;
    transition: width 0.08s linear;
    box-shadow: 0 0 12px rgba(255,107,53,0.5);
    pointer-events: none;
}

/* Utility */
.is-hidden { display: none !important; }

/* Hero saved/read badges */
.insights-saved-badge,
.insights-read-badge {
    cursor: pointer;
    border: 1px solid color-mix(in srgb, #FF6B35 55%, transparent);
    background: rgba(255,107,53,0.15);
    color: #fff;
    transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease-out-expo);
}
.insights-saved-badge:hover {
    background: rgba(255,107,53,0.28);
    border-color: rgba(255,107,53,0.85);
    transform: translateY(-2px);
}
.insights-read-badge {
    border-color: rgba(16,185,129,0.55);
    background: rgba(16,185,129,0.15);
    cursor: default;
}
.insights-saved-badge.is-active {
    background: linear-gradient(135deg, #FF6B35, #FF8F66);
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(255,107,53,0.38);
}

/* Toolbar */
.insights-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.85rem 1rem;
    grid-template-areas:
        "search controls"
        "count count";
    align-items: center;
    background: #fff;
    border: 1px solid rgba(99,102,241,0.16);
    border-radius: 16px;
    padding: 1rem 1.2rem;
    margin-bottom: 2rem;
    box-shadow: 0 14px 36px rgba(15,23,42,0.07),
                0 4px 12px rgba(99,102,241,0.06);
}
.insights-toolbar-search {
    grid-area: search;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.insights-toolbar-search > i {
    position: absolute;
    left: 1rem;
    color: #94a3b8;
    font-size: 0.9rem;
    pointer-events: none;
}
.insights-toolbar-search input {
    flex: 1;
    width: 100%;
    background: rgba(99,102,241,0.06);
    border: 1.5px solid rgba(99,102,241,0.18);
    border-radius: 999px;
    padding: 0.62rem 2.5rem 0.62rem 2.6rem;
    font-size: 0.9rem;
    color: #0f172a;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.insights-toolbar-search input:focus {
    outline: none;
    background: #fff;
    border-color: #FF6B35;
    box-shadow: 0 0 0 4px rgba(255,107,53,0.18);
}
.insights-toolbar-search input::placeholder { color: #94a3b8; }
#insightsSearchClear {
    position: absolute;
    right: 0.6rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: rgba(15,23,42,0.08);
    color: #475569;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background 0.25s, color 0.25s;
}
#insightsSearchClear:hover { background: #FF6B35; color: #fff; }

.insights-toolbar-controls {
    grid-area: controls;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.insights-sort-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}
.insights-sort-wrap > i {
    position: absolute;
    left: 0.85rem;
    color: #94a3b8;
    font-size: 0.78rem;
    pointer-events: none;
}
.insights-sort-wrap select {
    background: rgba(99,102,241,0.06);
    border: 1.5px solid rgba(99,102,241,0.18);
    border-radius: 999px;
    padding: 0.62rem 2.4rem 0.62rem 2.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%236366F1' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 12px 12px;
    transition: border-color 0.25s, background-color 0.25s;
}
.insights-sort-wrap select:hover { border-color: #6366F1; background-color: rgba(99,102,241,0.1); }
.insights-sort-wrap select:focus {
    outline: none;
    border-color: #FF6B35;
    box-shadow: 0 0 0 4px rgba(255,107,53,0.18);
}

.insights-view-toggle {
    display: inline-flex;
    background: rgba(99,102,241,0.08);
    border: 1.5px solid rgba(99,102,241,0.16);
    border-radius: 999px;
    padding: 3px;
}
.insights-view-toggle button {
    border: 0;
    background: transparent;
    color: #475569;
    width: 36px;
    height: 32px;
    border-radius: 999px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.insights-view-toggle button:hover { color: #FF6B35; }
.insights-view-toggle button.is-active {
    background: #fff;
    color: #FF6B35;
    box-shadow: 0 4px 10px rgba(255,107,53,0.22);
}

.insights-toolbar-saved {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(99,102,241,0.06);
    border: 1.5px solid rgba(99,102,241,0.18);
    color: #475569;
    border-radius: 999px;
    padding: 0.55rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.insights-toolbar-saved:hover { color: #FF6B35; border-color: #FF6B35; }
.insights-toolbar-saved.is-active {
    background: linear-gradient(135deg, #FF6B35, #FF8F66);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px rgba(255,107,53,0.32);
}
.insights-toolbar-saved.is-active i { color: #fff; }
.insights-toolbar-saved.is-active i::before { content: '\f02e'; /* fa-solid bookmark */ font-weight: 900; }
.insights-toolbar-saved-count {
    font-family: var(--font-mono, monospace);
    font-weight: 800;
    background: rgba(15,23,42,0.06);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    min-width: 22px;
    text-align: center;
}
.insights-toolbar-saved.is-active .insights-toolbar-saved-count {
    background: rgba(255,255,255,0.28);
    color: #fff;
}

.insights-result-count {
    grid-area: count;
    color: #64748b;
    font-size: 0.86rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(15,23,42,0.08);
}
.insights-result-count strong { color: #0f172a; font-weight: 800; }
.insights-result-empty { color: #FF6B35; margin-left: 0.4rem; }

/* Card bookmark icon */
.insights-card-cover { position: relative; }
.insights-card-bookmark {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.85);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.3s var(--ease-out-expo), background 0.3s, color 0.3s, box-shadow 0.3s;
    z-index: 2;
}
.insights-card-bookmark:hover {
    transform: scale(1.12);
    background: rgba(0,0,0,0.4);
    color: #fff;
}
.insights-card-bookmark.is-saved {
    background: linear-gradient(135deg, #FF6B35, #FF8F66);
    color: #fff;
    box-shadow: 0 10px 22px rgba(255,107,53,0.5);
    animation: insightsBookmarkPop 0.5s var(--ease-out-back);
}
.insights-card-bookmark.is-saved i::before { content: '\f02e'; /* fa-solid bookmark */ font-weight: 900; }
@keyframes insightsBookmarkPop {
    0%   { transform: scale(0.7); }
    60%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* List view */
.insights-grid.is-list-view {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}
.insights-grid.is-list-view .insights-grid-item {
    flex: 0 0 100%;
    max-width: 100%;
}
.insights-grid.is-list-view .insights-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    height: auto;
    min-height: 160px;
}
.insights-grid.is-list-view .insights-card-cover {
    height: 100%;
    min-height: 160px;
}
.insights-grid.is-list-view .insights-card-body {
    padding: 1.25rem 1.5rem;
}
@media (max-width: 575.98px) {
    .insights-grid.is-list-view .insights-card { grid-template-columns: 1fr; }
    .insights-grid.is-list-view .insights-card-cover { min-height: 90px; }
}

/* Empty state */
.insights-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #64748b;
}
.insights-empty-state i {
    font-size: 2.4rem;
    color: rgba(99,102,241,0.35);
    margin-bottom: 0.85rem;
    display: block;
}
.insights-empty-state .btn-link { color: #FF6B35; text-decoration: underline; }

/* Grid item filter-out animation */
.insights-grid-item.is-filtered-out {
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
    transition: opacity 0.35s, transform 0.35s var(--ease-out-expo);
    display: none;
}

/* Responsive */
@media (max-width: 767.98px) {
    .insights-toolbar {
        grid-template-columns: 1fr;
        grid-template-areas: "search" "controls" "count";
    }
    .insights-toolbar-controls { justify-content: space-between; }
}

/* ====================================================================
   === AI AUTOMATION PAGE — interactive rebuild =======================
   Live console · workflow tabs · platform flip · integration galaxy
   architecture explorer · matrix · case studies · ROI · security
   ==================================================================== */

.page-aiauto {
    --ai-primary: var(--color-primary);          /* #FF6B35 */
    --ai-primary-light: var(--color-primary-light);
    --ai-secondary: var(--color-secondary);      /* #6366F1 */
    --ai-secondary-light: var(--color-secondary-light);
    --ai-accent: var(--color-accent);            /* #10B981 */
    --ai-dark: var(--color-dark);
    --ai-card-bg: #ffffff;
    --ai-card-shadow: 0 10px 30px rgba(15,23,42,0.08);
    --ai-card-shadow-lg: 0 20px 50px rgba(15,23,42,0.12);
    --ai-border: rgba(15,23,42,0.08);
}

/* ============ HERO — Live Automation Console ============ */
.svc-hero-aiauto { padding: 7rem 0 5rem; }

.aiauto-console {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 22px;
    padding: 1.5rem 1.5rem 1.75rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    overflow: hidden;
    color: #fff;
}
.aiauto-console-glow {
    position: absolute; inset: -40%;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,107,53,0.25), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(99,102,241,0.22), transparent 50%);
    z-index: 0;
    pointer-events: none;
    animation: aiautoConsoleGlow 14s ease-in-out infinite alternate;
}
@keyframes aiautoConsoleGlow {
    0%   { transform: translate(0,0); }
    100% { transform: translate(8%, -6%); }
}
.aiauto-console > * { position: relative; z-index: 1; }
.aiauto-console-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.25rem;
}
.aiauto-console-title {
    font-weight: 700; font-size: 0.95rem; color: #fff;
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.aiauto-live-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--ai-accent);
    box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
    animation: aiautoPulseDot 1.6s ease-out infinite;
}
@keyframes aiautoPulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
    100% { box-shadow: 0 0 0 14px rgba(16,185,129,0); }
}
.aiauto-console-tag {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255,107,53,0.18);
    color: #FFB58C;
    border: 1px solid rgba(255,107,53,0.3);
    padding: 0.3rem 0.7rem; border-radius: 999px;
    transition: background 0.4s, color 0.4s, border-color 0.4s;
}

/* flow */
.aiauto-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    background: rgba(15,23,42,0.45);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 1.25rem 0.75rem;
    margin-bottom: 1.25rem;
}
.aiauto-flow-node {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.5rem;
    color: #fff;
    text-align: center;
    transition: transform 0.3s;
}
.aiauto-flow-node i {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    font-size: 1.1rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, transform 0.35s;
}
.aiauto-flow-node.is-active i {
    background: rgba(var(--color-primary-rgb), 0.18);
    border-color: rgba(var(--color-primary-rgb), 0.55);
    box-shadow: 0 0 24px rgba(var(--color-primary-rgb), 0.45);
    transform: scale(1.08);
}
.aiauto-flow-ai i { background: rgba(99,102,241,0.16); border-color: rgba(99,102,241,0.3); }
.aiauto-flow-ai.is-active i {
    background: rgba(99,102,241,0.32);
    border-color: rgba(99,102,241,0.7);
    box-shadow: 0 0 24px rgba(99,102,241,0.55);
}
.aiauto-flow-action i { background: rgba(16,185,129,0.16); border-color: rgba(16,185,129,0.3); }
.aiauto-flow-action.is-active i {
    background: rgba(16,185,129,0.32);
    border-color: rgba(16,185,129,0.7);
    box-shadow: 0 0 24px rgba(16,185,129,0.55);
}
.aiauto-flow-label {
    font-size: 0.78rem;
    color: rgba(226,232,240,0.75);
    font-weight: 600;
}
.aiauto-flow-wire {
    position: relative;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
    overflow: hidden;
}
.aiauto-flow-pulse {
    position: absolute; top: 0; left: -30%;
    width: 30%; height: 100%;
    background: linear-gradient(90deg, transparent, var(--ai-primary), transparent);
    animation: aiautoWire 2.2s linear infinite;
}
.aiauto-flow-wire:nth-of-type(4) .aiauto-flow-pulse {
    background: linear-gradient(90deg, transparent, var(--ai-accent), transparent);
    animation-delay: 1.1s;
}
@keyframes aiautoWire {
    0%   { left: -30%; }
    100% { left: 100%; }
}

/* rail */
.aiauto-rail {
    display: flex; justify-content: center; gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.aiauto-rail-dot {
    width: 28px; height: 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.18);
    border: 0;
    cursor: pointer;
    transition: background 0.3s, width 0.3s;
}
.aiauto-rail-dot.is-active {
    background: var(--ai-primary);
    width: 44px;
}

/* kpis */
.aiauto-console-kpis {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
}
.aiauto-kpi {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0.9rem 0.5rem;
    text-align: center;
}
.aiauto-kpi-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.4rem; font-weight: 800;
    color: #fff;
    line-height: 1;
}
.aiauto-kpi-suffix { font-size: 0.9em; opacity: 0.75; }
.aiauto-kpi-label {
    margin-top: 0.35rem;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: rgba(226,232,240,0.6);
}

/* ============ USE CASES — workflow explorer ============ */
.aiauto-uc {
    background: var(--ai-card-bg);
    border: 1px solid var(--ai-border);
    border-radius: 24px;
    padding: 1.75rem;
    box-shadow: var(--ai-card-shadow);
}
.aiauto-uc-tabs {
    display: flex; flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ai-border);
}
.aiauto-uc-tab {
    --pc: #6366F1;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1.1rem;
    background: #f8fafc;
    border: 1px solid var(--ai-border);
    border-radius: 999px;
    font-weight: 600; font-size: 0.9rem;
    color: var(--color-dark);
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.aiauto-uc-tab i { color: var(--pc); font-size: 0.9rem; }
.aiauto-uc-tab:hover {
    border-color: var(--pc);
    transform: translateY(-1px);
}
.aiauto-uc-tab.is-active {
    background: var(--pc);
    color: #fff;
    border-color: var(--pc);
    box-shadow: 0 8px 18px rgba(var(--color-primary-rgb), 0.18);
}
.aiauto-uc-tab.is-active i { color: #fff; }
.aiauto-uc-stage { position: relative; }
.aiauto-uc-card {
    display: none;
    animation: aiautoUcIn 0.4s ease-out both;
}
.aiauto-uc-card.is-active { display: block; }
@keyframes aiautoUcIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.aiauto-uc-kicker {
    display: inline-block;
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--pc);
    background: rgba(var(--color-primary-rgb), 0.08);
    padding: 0.3rem 0.7rem; border-radius: 999px;
    margin-bottom: 0.75rem;
}
.aiauto-uc-list {
    list-style: none; padding: 0; margin: 0 0 1rem 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem;
}
.aiauto-uc-list li {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.92rem; color: var(--color-dark);
}
.aiauto-uc-list li i { color: var(--pc); font-size: 0.85rem; }
.aiauto-uc-stats {
    display: flex; gap: 1.25rem;
    margin-top: 0.75rem;
}
.aiauto-uc-stats > div {
    display: flex; flex-direction: column;
}
.aiauto-uc-stats strong {
    font-size: 1.5rem; font-weight: 800; color: var(--pc);
    line-height: 1.1;
}
.aiauto-uc-stats span {
    font-size: 0.78rem; color: var(--color-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.aiauto-uc-mock {
    background: #f8fafc;
    border: 1px solid var(--ai-border);
    border-radius: 16px;
    padding: 1.25rem;
    overflow: hidden;
}
.aiauto-uc-mock svg { width: 100%; height: auto; display: block; }

/* SVG mock styles */
.ucm-box {
    fill: #fff;
    stroke: rgba(99,102,241,0.55);
    stroke-width: 1.5;
    filter: drop-shadow(0 4px 8px rgba(99,102,241,0.10));
}
.ucm-ai { stroke: rgba(255,107,53,0.55); }
.ucm-out { stroke: rgba(16,185,129,0.55); }
.ucm-text { font-size: 11px; fill: #334155; font-weight: 600; }
.ucm-text-ai { fill: var(--ai-primary); }
.ucm-text-out { fill: var(--ai-accent); }
.ucm-wire {
    stroke: rgba(99,102,241,0.35);
    stroke-width: 2; fill: none;
    stroke-dasharray: 4 6;
    animation: ucmWireDash 18s linear infinite;
}
@keyframes ucmWireDash {
    to { stroke-dashoffset: -200; }
}

/* dashboard mock */
.aiauto-uc-mock-dash { padding: 0; }
.aiauto-dash-bar {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    background: #eef2f6;
    border-bottom: 1px solid var(--ai-border);
    border-radius: 16px 16px 0 0;
}
.aiauto-dash-bar span {
    width: 10px; height: 10px; border-radius: 50%;
    background: #d0d6de;
}
.aiauto-dash-bar em {
    margin-left: 0.5rem; font-style: normal;
    font-size: 0.78rem; color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.aiauto-dash-body { padding: 1rem; }
.aiauto-dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }
.aiauto-dash-tile {
    background: #fff; border: 1px solid var(--ai-border);
    border-radius: 10px; padding: 0.65rem 0.85rem;
}
.aiauto-dash-lbl { font-size: 0.7rem; text-transform: uppercase; color: var(--color-muted); letter-spacing: 0.05em; }
.aiauto-dash-tile strong { display: block; font-size: 1.25rem; color: var(--color-dark); }
.aiauto-dash-tile em { font-style: normal; font-size: 0.78rem; }
.aiauto-dash-tile em.up { color: var(--ai-accent); }
.aiauto-dash-chart {
    background: #fff; border: 1px solid var(--ai-border);
    border-radius: 10px; padding: 0.5rem;
    margin-bottom: 0.75rem;
}
.aiauto-dash-line {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: dashLine 2s ease-out forwards;
}
@keyframes dashLine { to { stroke-dashoffset: 0; } }
.aiauto-dash-alert {
    background: rgba(255,107,53,0.08);
    color: #b8501f;
    font-size: 0.85rem; font-weight: 600;
    padding: 0.55rem 0.8rem;
    border-left: 3px solid var(--ai-primary);
    border-radius: 6px;
    display: flex; align-items: center; gap: 0.5rem;
}

/* chat mock */
.aiauto-uc-mock-chat { padding: 0; }
.aiauto-chat-bar {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    background: #eef2f6;
    border-bottom: 1px solid var(--ai-border);
    border-radius: 16px 16px 0 0;
}
.aiauto-chat-bar span { width: 10px; height: 10px; border-radius: 50%; background: #d0d6de; }
.aiauto-chat-bar em { margin-left: 0.5rem; font-style: normal; font-size: 0.78rem; color: #64748b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.aiauto-chat-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.aiauto-chat-msg {
    max-width: 80%;
    background: #fff;
    border: 1px solid var(--ai-border);
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: var(--color-dark);
}
.aiauto-chat-msg.in { align-self: flex-start; }
.aiauto-chat-msg.out {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--ai-secondary), var(--ai-secondary-light));
    color: #fff;
    border: 0;
}
.aiauto-chat-who {
    display: block;
    font-size: 0.7rem; opacity: 0.65;
    margin-bottom: 0.15rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.aiauto-chat-typing {
    align-self: flex-end;
    display: flex; gap: 4px;
    padding: 0.55rem 0.75rem;
    background: linear-gradient(135deg, var(--ai-secondary), var(--ai-secondary-light));
    border-radius: 12px;
}
.aiauto-chat-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.85);
    animation: aiautoTyping 1.2s ease-in-out infinite;
}
.aiauto-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.aiauto-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aiautoTyping {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-3px); opacity: 1; }
}
.aiauto-chat-handoff {
    align-self: stretch;
    background: rgba(16,185,129,0.08);
    color: #0e7a5e;
    font-size: 0.82rem; font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-top: 0.25rem;
}

/* ecom mock */
.aiauto-uc-mock-ecom { padding: 1.25rem; }
.aiauto-ecom-row {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.aiauto-ecom-tile {
    background: #fff;
    border: 1px solid var(--ai-border);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    display: flex; flex-direction: column;
    align-items: flex-start;
}
.aiauto-ecom-tile i { font-size: 1.2rem; color: var(--ai-primary); margin-bottom: 0.25rem; }
.aiauto-ecom-tile span { font-weight: 700; font-size: 0.88rem; color: var(--color-dark); }
.aiauto-ecom-tile em {
    font-style: normal; font-size: 0.78rem;
    color: var(--color-muted);
}
.aiauto-ecom-tile em strong { color: var(--ai-accent); font-weight: 700; }
.aiauto-ecom-sync {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(16,185,129,0.12);
    color: var(--ai-accent);
    display: inline-flex; align-items: center; justify-content: center;
}
.aiauto-ecom-sync i { animation: aiautoSpin 6s linear infinite; }
@keyframes aiautoSpin { to { transform: rotate(360deg); } }
.aiauto-ecom-alert {
    background: rgba(16,185,129,0.08);
    color: #0e7a5e;
    font-size: 0.85rem; font-weight: 600;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    margin-top: 0.25rem;
    text-align: center;
}

/* ops mock */
.aiauto-uc-mock-ops { padding: 1.25rem; }
.aiauto-ops-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    background: #fff;
    border: 1px solid var(--ai-border);
    border-radius: 8px;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: var(--color-dark);
    transition: transform 0.25s;
}
.aiauto-ops-item i { color: var(--color-muted); }
.aiauto-ops-item.is-done { background: rgba(16,185,129,0.06); }
.aiauto-ops-item.is-done i { color: var(--ai-accent); }
.aiauto-ops-item.is-active {
    background: rgba(255,107,53,0.08);
    border-color: rgba(255,107,53,0.3);
    transform: translateX(4px);
}
.aiauto-ops-item.is-active i { color: var(--ai-primary); }

/* ============ PLATFORMS — flip cards & galaxy ============ */
.aiauto-platforms-section { background: var(--color-dark); }

.aiauto-plat-flip {
    perspective: 1200px;
    height: 100%;
    min-height: 320px;
    cursor: pointer;
}
.aiauto-plat-flip-inner {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(.16,1,.3,1);
}
.aiauto-plat-flip:hover .aiauto-plat-flip-inner,
.aiauto-plat-flip:focus-visible .aiauto-plat-flip-inner,
.aiauto-plat-flip.is-flipped .aiauto-plat-flip-inner {
    transform: rotateY(180deg);
}
.aiauto-plat-face {
    position: absolute; inset: 0;
    border-radius: 18px;
    padding: 1.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex; flex-direction: column;
    color: #fff;
}
.aiauto-plat-back {
    transform: rotateY(180deg);
    background: linear-gradient(150deg, rgba(var(--color-primary-rgb), 0.12), rgba(255,255,255,0.03));
    border-color: rgba(var(--color-primary-rgb), 0.35);
}
.aiauto-plat-blurb {
    font-size: 0.92rem;
    color: rgba(226,232,240,0.7);
    margin-bottom: 1rem;
}
.aiauto-plat-list {
    list-style: none; padding: 0; margin: 0 0 1rem 0;
    flex: 1;
}
.aiauto-plat-list li {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.88rem;
    color: rgba(226,232,240,0.85);
    padding: 0.2rem 0;
}
.aiauto-plat-list li i { color: var(--ai-accent); font-size: 0.85rem; }
.aiauto-plat-hint {
    font-size: 0.75rem;
    color: rgba(226,232,240,0.5);
    text-align: center;
    border-top: 1px dashed rgba(255,255,255,0.12);
    padding-top: 0.65rem;
    margin-top: auto;
}
.aiauto-plat-back-kicker {
    display: inline-block;
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--pc);
    margin-bottom: 0.75rem;
}
.aiauto-plat-back-list {
    list-style: none; padding: 0; margin: 0;
}
.aiauto-plat-back-list li {
    position: relative;
    padding-left: 1.4rem; margin-bottom: 0.55rem;
    font-size: 0.92rem;
    color: rgba(226,232,240,0.9);
}
.aiauto-plat-back-list li::before {
    content: ""; position: absolute;
    left: 0; top: 0.4rem;
    width: 14px; height: 14px;
    border-radius: 4px;
    background: var(--pc);
    opacity: 0.85;
}

/* galaxy */
.aiauto-galaxy {
    position: relative;
    width: 100%; max-width: 560px;
    aspect-ratio: 1;
    margin: 0 auto;
}
.aiauto-galaxy-core {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 96px; height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ai-primary), var(--ai-primary-light));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 0 60px rgba(var(--color-primary-rgb), 0.55);
    z-index: 5;
}
.aiauto-galaxy-core i { font-size: 1.5rem; margin-bottom: 0.15rem; }
.aiauto-galaxy-core span { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.aiauto-galaxy-ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(255,255,255,0.16);
    border-radius: 50%;
    animation: aiautoOrbit 60s linear infinite;
}
.aiauto-galaxy-ring-inner { width: 56%; height: 56%; }
.aiauto-galaxy-ring-outer {
    width: 92%; height: 92%;
    animation-duration: 90s;
    animation-direction: reverse;
}
@keyframes aiautoOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

.aiauto-galaxy-icon {
    --count: 8;
    --r: 50%;
    position: absolute;
    top: 50%; left: 50%;
    width: 48px; height: 48px;
    margin: -24px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
    /* place around the ring */
    transform: rotate(calc(var(--i) * (360deg / var(--count)))) translate(var(--r)) rotate(calc(var(--i) * (-360deg / var(--count))));
}
/* keep icons upright while ring rotates */
.aiauto-galaxy-ring { display: block; }
.aiauto-galaxy-ring-inner .aiauto-galaxy-icon {
    --count: 8;
    --r: 100px;
}
.aiauto-galaxy-ring-outer .aiauto-galaxy-icon {
    --count: 12;
    --r: 180px;
}
@media (min-width: 768px) {
    .aiauto-galaxy-ring-inner .aiauto-galaxy-icon { --r: 140px; }
    .aiauto-galaxy-ring-outer .aiauto-galaxy-icon { --r: 230px; }
}
@media (min-width: 1200px) {
    .aiauto-galaxy-ring-inner .aiauto-galaxy-icon { --r: 160px; }
    .aiauto-galaxy-ring-outer .aiauto-galaxy-icon { --r: 260px; }
}
.aiauto-galaxy-icon i { font-size: 1.1rem; }
.aiauto-galaxy-icon:hover {
    background: var(--ai-primary);
    color: #fff;
    box-shadow: 0 0 24px rgba(var(--color-primary-rgb), 0.55);
    z-index: 4;
}
.aiauto-galaxy-icon::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: var(--color-dark);
    color: #fff;
    font-size: 0.72rem; white-space: nowrap;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
}
.aiauto-galaxy-icon:hover::after { opacity: 1; }

/* ============ ARCHITECTURES — tabbed explorer ============ */
.aiauto-arch {
    background: var(--ai-card-bg);
    border: 1px solid var(--ai-border);
    border-radius: 24px;
    padding: 1.75rem;
    box-shadow: var(--ai-card-shadow);
}
.aiauto-arch-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}
.aiauto-arch-tab {
    --pc: #6366F1;
    text-align: left;
    background: #f8fafc;
    border: 1px solid var(--ai-border);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex; align-items: center; gap: 0.85rem;
}
.aiauto-arch-tab:hover {
    border-color: var(--pc);
    transform: translateY(-2px);
}
.aiauto-arch-tab.is-active {
    background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc), #fff 20%));
    color: #fff;
    border-color: var(--pc);
    box-shadow: 0 10px 24px rgba(15,23,42,0.15);
}
.aiauto-arch-tab-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95rem; font-weight: 800;
    color: var(--pc);
    background: rgba(var(--color-primary-rgb), 0.10);
    padding: 0.3rem 0.55rem; border-radius: 6px;
    transition: color 0.3s, background 0.3s;
}
.aiauto-arch-tab.is-active .aiauto-arch-tab-num {
    color: #fff;
    background: rgba(255,255,255,0.22);
}
.aiauto-arch-tab-name {
    font-weight: 700;
    font-size: 0.95rem;
}
.aiauto-arch-stage { position: relative; }
.aiauto-arch-card {
    display: none;
    animation: aiautoUcIn 0.4s ease-out both;
}
.aiauto-arch-card.is-active { display: block; }
.aiauto-arch-kicker {
    display: inline-block;
    font-size: 0.75rem; font-weight: 800;
    color: var(--pc);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.aiauto-arch-list {
    list-style: none; padding: 0; margin: 0;
}
.aiauto-arch-list li {
    padding: 0.45rem 0;
    border-top: 1px solid var(--ai-border);
    font-size: 0.92rem;
    color: var(--color-dark);
}
.aiauto-arch-list li:first-child { border-top: 0; }
.aiauto-arch-list li strong { color: var(--pc); margin-right: 0.35rem; }
.aiauto-arch-visual {
    background: #f8fafc;
    border: 1px solid var(--ai-border);
    border-radius: 16px;
    padding: 1.25rem;
}
.aiauto-arch-visual svg { width: 100%; height: auto; display: block; }

/* arch SVG styles */
.av-box { fill: #fff; stroke: var(--pc); stroke-width: 1.5; filter: drop-shadow(0 4px 10px rgba(15,23,42,0.08)); }
.av-trig { stroke: var(--pc); }
.av-ai { stroke: var(--pc); fill: color-mix(in srgb, var(--pc), #fff 92%); }
.av-tool { stroke: rgba(99,102,241,0.55); fill: #fff; }
.av-out { stroke: var(--ai-accent); fill: color-mix(in srgb, var(--ai-accent), #fff 92%); }
.av-store { stroke: var(--ai-secondary); fill: color-mix(in srgb, var(--ai-secondary), #fff 92%); }
.av-chunks { stroke: var(--ai-secondary); fill: rgba(99,102,241,0.06); stroke-dasharray: 5 5; }
.av-llm {
    fill: var(--pc);
    filter: drop-shadow(0 8px 16px rgba(var(--color-primary-rgb), 0.35));
}
.av-t { font-size: 11px; fill: #334155; font-weight: 600; }
.av-t-tool { font-size: 11px; fill: var(--ai-secondary); font-weight: 700; }
.av-t-llm { font-size: 12px; fill: #fff; font-weight: 700; }
.av-t-llm-sm { font-size: 9px; opacity: 0.85; }
.av-wire {
    stroke: var(--pc);
    stroke-width: 2; fill: none;
    opacity: 0.55;
    stroke-dasharray: 4 6;
    animation: ucmWireDash 14s linear infinite;
}
.av-pulse {
    fill: var(--pc);
    filter: drop-shadow(0 0 6px var(--pc));
    animation: avPulse 2.4s ease-in-out infinite;
}
@keyframes avPulse {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50%      { opacity: 1; transform: scale(1.2); }
}

/* ============ BUILD vs BUY — interactive matrix ============ */
.aiauto-matrix {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    overflow: hidden;
}
.aiauto-matrix-head,
.aiauto-matrix-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.4fr 1fr;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.aiauto-matrix-head {
    background: rgba(255,255,255,0.04);
    font-size: 0.78rem;
    color: rgba(226,232,240,0.6);
    text-transform: uppercase; letter-spacing: 0.06em;
    font-weight: 700;
}
.aiauto-matrix-row {
    color: rgba(226,232,240,0.9);
    cursor: pointer;
    transition: background 0.25s;
    position: relative;
}
.aiauto-matrix-row:hover {
    background: rgba(255,255,255,0.04);
}
.aiauto-matrix-row.is-open {
    background: rgba(var(--color-primary-rgb), 0.06);
}
.aiauto-matrix-scenario {
    font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem;
}
.aiauto-matrix-chev {
    color: var(--ai-primary);
    transition: transform 0.3s;
    font-size: 0.8rem;
}
.aiauto-matrix-row.is-open .aiauto-matrix-chev { transform: rotate(90deg); }
.aiauto-matrix-cell {
    font-size: 0.88rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.4rem;
}
.aiauto-matrix-cell i { font-size: 0.95rem; }
.aiauto-matrix-cell.good { color: #34D399; }
.aiauto-matrix-cell.good i { color: #34D399; }
.aiauto-matrix-cell.mid  { color: #FBBF24; }
.aiauto-matrix-cell.mid i  { color: #FBBF24; }
.aiauto-matrix-cell.bad  { color: #F87171; }
.aiauto-matrix-cell.bad i  { color: #F87171; }
.aiauto-matrix-detail {
    grid-column: 1 / -1;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease, padding 0.3s ease;
    font-size: 0.9rem;
    color: rgba(226,232,240,0.85);
    border-top: 0;
}
.aiauto-matrix-row.is-open .aiauto-matrix-detail {
    max-height: 280px;
    padding-top: 0.65rem;
    border-top: 1px dashed rgba(255,255,255,0.12);
    margin-top: 0.65rem;
}

@media (max-width: 767.98px) {
    .aiauto-matrix-head { display: none; }
    .aiauto-matrix-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .aiauto-matrix-cell::before {
        content: attr(data-l);
        font-size: 0.7rem; color: rgba(226,232,240,0.5);
        text-transform: uppercase; letter-spacing: 0.05em;
        margin-right: 0.5rem;
    }
}

/* ============ CASE STUDIES — animated counters ============ */
.aiauto-case {
    position: relative;
    background: #fff;
    border: 1px solid var(--ai-border);
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
    box-shadow: var(--ai-card-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
}
.aiauto-case::before {
    content: "";
    position: absolute; top: 0; left: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, var(--pc), color-mix(in srgb, var(--pc), #fff 30%));
}
.aiauto-case:hover {
    transform: translateY(-4px);
    box-shadow: var(--ai-card-shadow-lg);
}
.aiauto-case-head {
    display: flex; align-items: center; gap: 0.85rem;
    margin-bottom: 1rem;
}
.aiauto-case-illo { width: 56px; height: 56px; flex-shrink: 0; }
.aiauto-case-illo svg { width: 100%; height: 100%; }
.aiauto-case-tag {
    font-size: 0.7rem; font-weight: 700;
    color: var(--pc);
    text-transform: uppercase; letter-spacing: 0.05em;
    background: rgba(var(--color-primary-rgb), 0.08);
    padding: 0.3rem 0.65rem; border-radius: 999px;
}
.aiauto-case-metrics {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.85rem 0;
    border-top: 1px solid var(--ai-border);
    border-bottom: 1px solid var(--ai-border);
}
.aiauto-case-metrics > div {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
.aiauto-case-metrics strong {
    font-size: 1.2rem; font-weight: 800;
    color: var(--pc);
    line-height: 1.1;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.aiauto-case-metrics span {
    font-size: 0.72rem; color: var(--color-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-top: 0.2rem;
}
.aiauto-case-quote {
    font-size: 0.88rem; font-style: italic;
    color: var(--color-dark);
    padding-left: 0.75rem;
    border-left: 3px solid var(--pc);
}

/* ============ INTEGRATIONS HUB — chip filter ============ */
.aiauto-hub-chips {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.75rem;
}
.aiauto-hub-chip {
    --c: var(--ai-secondary);
    background: #fff;
    border: 1px solid var(--ai-border);
    color: var(--color-dark);
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-weight: 600; font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.aiauto-hub-chip:hover {
    border-color: var(--c);
    transform: translateY(-1px);
}
.aiauto-hub-chip.is-active {
    background: var(--c);
    color: #fff;
    border-color: var(--c);
    box-shadow: 0 8px 16px rgba(15,23,42,0.12);
}
.aiauto-hub-pills {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    justify-content: center;
    transition: filter 0.3s;
}
.aiauto-hub-pill {
    --match: var(--ai-secondary);
    background: #fff;
    border: 1px solid var(--ai-border);
    color: var(--color-dark);
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    font-size: 0.88rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.5rem;
    transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s, opacity 0.3s, filter 0.3s;
}
.aiauto-hub-pill i { color: var(--color-muted); }
.aiauto-hub:not(.is-filtered) .aiauto-hub-pill:hover {
    border-color: var(--ai-primary);
    color: var(--ai-primary);
    transform: translateY(-1px);
}
.aiauto-hub.is-filtered .aiauto-hub-pill {
    opacity: 0.35;
    filter: grayscale(0.5);
}
.aiauto-hub.is-filtered .aiauto-hub-pill.is-match {
    opacity: 1;
    filter: none;
    border-color: var(--match);
    color: var(--match);
    background: color-mix(in srgb, var(--match), #fff 92%);
}
.aiauto-hub.is-filtered .aiauto-hub-pill.is-match i { color: var(--match); }

/* ============ ROI CALCULATOR ============ */
.aiauto-roi {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 1.75rem;
}
.aiauto-roi-control { margin-bottom: 1.5rem; }
.aiauto-roi-control:last-child { margin-bottom: 0; }
.aiauto-roi-control label {
    display: block;
    font-size: 0.88rem; font-weight: 600;
    color: rgba(226,232,240,0.78);
    margin-bottom: 0.5rem;
}
.aiauto-roi-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
}
.aiauto-roi-row input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%; height: 6px;
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
    outline: none;
}
.aiauto-roi-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ai-primary);
    border: 3px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.55);
    transition: transform 0.2s;
}
.aiauto-roi-row input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.aiauto-roi-row input[type=range]::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ai-primary);
    border: 3px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.55);
}
.aiauto-roi-val {
    background: rgba(255,107,53,0.15);
    color: var(--ai-primary-light);
    border: 1px solid rgba(255,107,53,0.3);
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    min-width: 100px;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    color: #fff;
}
.aiauto-roi-val em { font-style: normal; opacity: 0.7; font-size: 0.85rem; margin-left: 0.25rem; }
.aiauto-roi-val strong { font-size: 1.05rem; }

.aiauto-roi-result {
    position: relative;
    background: linear-gradient(150deg, rgba(var(--color-primary-rgb), 0.18), rgba(16,185,129,0.12));
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
    border-radius: 18px;
    padding: 1.75rem;
    height: 100%;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.aiauto-roi-result-glow {
    position: absolute; top: -50%; right: -50%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,107,53,0.4), transparent 70%);
    filter: blur(20px);
    animation: aiautoConsoleGlow 14s ease-in-out infinite alternate;
}
.aiauto-roi-result > * { position: relative; z-index: 1; }
.aiauto-roi-result-label {
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(226,232,240,0.75);
}
.aiauto-roi-result-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    margin: 0.5rem 0 1rem;
    text-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.4);
}
.aiauto-roi-result-sub {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 1rem;
}
.aiauto-roi-result-sub > span {
    display: flex; flex-direction: column;
    color: #fff;
}
.aiauto-roi-result-sub strong {
    font-size: 1.3rem; font-weight: 800;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ai-accent);
}
.aiauto-roi-result-sub em {
    font-style: normal; font-size: 0.78rem;
    color: rgba(226,232,240,0.7);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.aiauto-roi-result-foot {
    margin-top: auto;
    font-size: 0.78rem;
    color: rgba(226,232,240,0.65);
    display: flex; align-items: flex-start; gap: 0.4rem;
}

/* ============ SECURITY & GOVERNANCE — animated consoles ============ */
.aiauto-sec-card {
    background: #fff;
    border: 1px solid var(--ai-border);
    border-radius: 16px;
    padding: 1.25rem;
    height: 100%;
    box-shadow: var(--ai-card-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
}
.aiauto-sec-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc), #fff 30%));
}
.aiauto-sec-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ai-card-shadow-lg);
}
.aiauto-sec-head {
    display: flex; align-items: center; gap: 0.65rem;
    margin-bottom: 1rem;
}
.aiauto-sec-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--pc), #fff 88%);
    color: var(--pc);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.aiauto-sec-mock {
    background: #0f172a;
    border-radius: 10px;
    padding: 0.85rem;
    min-height: 130px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: rgba(226,232,240,0.85);
    margin-bottom: 0.85rem;
    overflow: hidden;
    position: relative;
}
.aiauto-sec-desc {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: 0;
    flex: 1;
}

/* PII redaction */
.aiauto-sec-mock-pii .aiauto-sec-line {
    padding: 0.18rem 0;
    color: rgba(226,232,240,0.7);
}
.aiauto-sec-mock-pii em {
    font-style: normal;
    color: #fff;
    background: rgba(255,255,255,0.03);
    padding: 0 0.25rem;
    border-radius: 3px;
    transition: background 0.4s, color 0.4s, filter 0.4s;
}
.aiauto-sec-mock-pii em.is-redacted {
    background: rgba(99,102,241,0.25);
    color: transparent;
    filter: blur(1px);
    position: relative;
}
.aiauto-sec-mock-pii em.is-redacted::before {
    content: "▮▮▮▮▮▮▮▮▮▮";
    position: absolute; inset: 0;
    display: flex; align-items: center;
    color: rgba(255,255,255,0.6);
    filter: blur(0);
    overflow: hidden;
    letter-spacing: 1px;
}

/* Audit log */
.aiauto-sec-mock-log .aiauto-sec-log-line {
    padding: 0.16rem 0;
    border-bottom: 1px dashed rgba(255,255,255,0.06);
    display: flex; gap: 0.5rem; align-items: baseline;
    opacity: 0;
    animation: aiautoLogIn 0.35s ease-out forwards;
}
.aiauto-sec-mock-log .aiauto-sec-log-time { color: rgba(99,102,241,0.85); font-weight: 700; }
.aiauto-sec-mock-log .aiauto-sec-log-msg { color: rgba(226,232,240,0.85); }
.aiauto-sec-mock-log .aiauto-sec-log-tag {
    margin-left: auto;
    background: rgba(16,185,129,0.18);
    color: #6EE7B7;
    border-radius: 4px;
    padding: 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
}
@keyframes aiautoLogIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Human-in-the-loop */
.aiauto-sec-mock-hitl { display: flex; align-items: center; }
.aiauto-sec-approval {
    width: 100%;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 8px;
    padding: 0.75rem;
    transition: opacity 0.4s, transform 0.4s, background 0.4s, border-color 0.4s;
}
.aiauto-sec-approval-tag {
    display: inline-block;
    background: #FBBF24;
    color: #422006;
    font-size: 0.65rem; font-weight: 800;
    padding: 0.15rem 0.4rem; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}
.aiauto-sec-approval-body {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: rgba(226,232,240,0.92);
    margin-bottom: 0.6rem;
}
.aiauto-sec-approval-actions {
    display: flex; gap: 0.4rem;
}
.aiauto-sec-approve,
.aiauto-sec-reject {
    flex: 1;
    border: 0;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    font-size: 0.76rem; font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
}
.aiauto-sec-approve { background: var(--ai-accent); color: #fff; }
.aiauto-sec-reject  { background: rgba(248,113,113,0.85); color: #fff; }
.aiauto-sec-approve:hover, .aiauto-sec-reject:hover { transform: translateY(-1px); filter: brightness(1.08); }
.aiauto-sec-approval.is-approved {
    background: rgba(16,185,129,0.24);
    border-color: rgba(16,185,129,0.6);
}
.aiauto-sec-approval.is-rejected {
    background: rgba(248,113,113,0.18);
    border-color: rgba(248,113,113,0.45);
}

/* Cost gauge */
.aiauto-sec-mock-cost { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.aiauto-sec-mock-cost svg { width: 100%; max-width: 180px; height: auto; }
.aiauto-cost-arc { transition: stroke-dashoffset 0.6s ease, stroke 0.4s; }
.aiauto-cost-num {
    text-align: center;
    color: #fff;
}
.aiauto-cost-num strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.3rem; font-weight: 800;
    color: var(--ai-primary-light);
}
.aiauto-cost-num span { display: block; font-size: 0.72rem; color: rgba(226,232,240,0.6); }
.aiauto-cost-bar {
    width: 100%; height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}
.aiauto-cost-bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--ai-accent), var(--ai-primary));
    transition: width 0.6s ease;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 991.98px) {
    .aiauto-arch-tabs { grid-template-columns: 1fr; }
    .aiauto-uc-list { grid-template-columns: 1fr; }
    .aiauto-galaxy-ring-outer .aiauto-galaxy-icon { --r: 150px; }
    .aiauto-galaxy-ring-inner .aiauto-galaxy-icon { --r: 80px; }
}
@media (max-width: 575.98px) {
    .aiauto-flow {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    .aiauto-flow-wire {
        width: 2px; height: 24px;
        margin: 0 auto;
    }
    .aiauto-flow-pulse {
        left: 0; top: -30%; width: 100%; height: 30%;
        background: linear-gradient(180deg, transparent, var(--ai-primary), transparent) !important;
        animation: aiautoWireVert 2.2s linear infinite !important;
    }
    @keyframes aiautoWireVert {
        0%   { top: -30%; }
        100% { top: 100%; }
    }
    .aiauto-uc-tab span { display: none; }
    .aiauto-uc-tab { padding: 0.65rem 0.85rem; }
    .aiauto-galaxy { aspect-ratio: 1; max-width: 360px; }
    .aiauto-galaxy-ring-outer .aiauto-galaxy-icon { --r: 120px; }
    .aiauto-galaxy-ring-inner .aiauto-galaxy-icon { --r: 60px; }
    .aiauto-galaxy-icon { width: 38px; height: 38px; margin: -19px; }
    .aiauto-galaxy-icon i { font-size: 0.9rem; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    .aiauto-console-glow,
    .aiauto-flow-pulse,
    .aiauto-galaxy-ring,
    .aiauto-ecom-sync i,
    .aiauto-chat-typing span,
    .aiauto-live-dot,
    .av-pulse,
    .av-wire,
    .ucm-wire,
    .aiauto-dash-line {
        animation: none !important;
    }
    .aiauto-plat-flip:hover .aiauto-plat-flip-inner { transform: none; }
}

/* ====================================================================
   === PORTFOLIO PAGE — interactive rebuild ===========================
   Mosaic hero · auto-cycle featured · counter outcomes · constellation
   bespoke SVG covers · animated filter · auto-cycle testimonials
   ==================================================================== */

.page-portfolio {
    --pf-primary: var(--color-primary);          /* #FF6B35 */
    --pf-primary-light: var(--color-primary-light);
    --pf-secondary: var(--color-secondary);      /* #6366F1 */
    --pf-secondary-light: var(--color-secondary-light);
    --pf-accent: var(--color-accent);            /* #10B981 */
    --pf-dark: var(--color-dark);
    --pf-card-bg: #ffffff;
    --pf-card-shadow: 0 10px 30px rgba(15,23,42,0.08);
    --pf-card-shadow-lg: 0 22px 50px rgba(15,23,42,0.14);
    --pf-border: rgba(15,23,42,0.08);
}

/* ============ HERO MOSAIC ============ */
.pf-hero .pf-hero-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pf-mosaic {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.6rem;
    aspect-ratio: 1;
    max-width: 460px;
    margin: 0 auto;
    padding: 0.6rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 22px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    overflow: hidden;
}
.pf-mosaic-glow {
    position: absolute; inset: -40%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,107,53,0.22), transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(99,102,241,0.20), transparent 50%);
    pointer-events: none;
    z-index: 0;
    animation: pfMosaicGlow 12s ease-in-out infinite alternate;
}
@keyframes pfMosaicGlow {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(6%, -4%); }
}
.pf-mosaic-tile {
    position: relative;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.35rem;
    color: rgba(226,232,240,0.78);
    z-index: 1;
    transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s, color 0.4s;
}
.pf-mosaic-tile i { font-size: 1.2rem; }
.pf-mosaic-tile span {
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.pf-mosaic-tile.is-active {
    background: var(--pf-primary);
    border-color: var(--pf-primary);
    color: #fff;
    box-shadow: 0 0 28px rgba(var(--color-primary-rgb), 0.55);
    transform: scale(1.04);
}
.pf-mosaic-core {
    background: linear-gradient(135deg, var(--pf-primary), var(--pf-primary-light)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 0 36px rgba(var(--color-primary-rgb), 0.55);
}
.pf-mosaic-core-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.pf-mosaic-core-lbl {
    font-size: 0.65rem !important;
    opacity: 0.85;
}

@media (max-width: 991.98px) {
    .pf-mosaic { margin: 2rem auto 0; }
}

/* ============ FEATURED CAROUSEL ============ */
.pf-featured {
    position: relative;
    background: var(--pf-card-bg);
    border: 1px solid var(--pf-border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--pf-card-shadow-lg);
}
.pf-featured-progress {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(15,23,42,0.06);
    z-index: 3;
}
.pf-featured-progress-bar {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--pf-primary), var(--pf-primary-light));
    transition: width 0.18s linear;
}
.pf-featured-stage {
    position: relative;
    min-height: 460px;
}
.pf-featured-slide {
    display: none;
    animation: pfFeatIn 0.45s ease-out both;
}
.pf-featured-slide.is-active { display: block; }
@keyframes pfFeatIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pf-featured-text {
    padding: 3rem 2.5rem 2rem;
}
.pf-featured-tag {
    display: inline-block;
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--pc);
    background: color-mix(in srgb, var(--pc), #fff 88%);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}
.pf-featured-stat {
    background: #f8fafc;
    border: 1px solid var(--pf-border);
    border-radius: 12px;
    padding: 0.85rem;
    text-align: center;
}
.pf-featured-stat-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.5rem; font-weight: 800;
    color: var(--pc);
    line-height: 1;
}
.pf-featured-stat-label {
    font-size: 0.72rem; color: var(--color-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-top: 0.35rem;
}
.pf-featured-visual {
    background: linear-gradient(160deg, color-mix(in srgb, var(--pc), #fff 88%), #fff);
    padding: 2rem;
    display: flex; align-items: center; justify-content: center;
}

.pf-chip {
    display: inline-flex; align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pc, #6366F1), #fff 90%);
    color: var(--pc, #6366F1);
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.02em;
}

/* featured rail */
.pf-featured-rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--pf-border);
}
.pf-rail-btn {
    background: #fff;
    border: 0;
    border-right: 1px solid var(--pf-border);
    padding: 1rem 1rem;
    display: flex; flex-direction: column; gap: 0.2rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
}
.pf-rail-btn:last-child { border-right: 0; }
.pf-rail-btn:hover { background: #f8fafc; }
.pf-rail-btn.is-active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--pf-primary), #fff 90%), #fff);
    box-shadow: inset 0 3px 0 var(--pf-primary);
}
.pf-rail-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem; font-weight: 800;
    color: var(--pf-primary);
}
.pf-rail-name {
    font-weight: 700; font-size: 0.95rem;
    color: var(--color-dark);
}

/* featured mockups (shared) */
.pf-mock {
    background: #fff;
    border: 1px solid var(--pf-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(15,23,42,0.10);
    width: 100%;
    max-width: 480px;
}
.pf-mock-bar {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    background: #eef2f6;
    border-bottom: 1px solid var(--pf-border);
}
.pf-mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: #d0d6de; }
.pf-mock-bar em {
    margin-left: 0.5rem; font-style: normal;
    font-size: 0.76rem; color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pf-mock-body {
    display: grid;
    grid-template-columns: 80px 1fr;
    min-height: 220px;
}
.pf-mock-side {
    background: #f4f6fb;
    padding: 0.85rem 0.65rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    border-right: 1px solid var(--pf-border);
}
.pf-mock-side-item {
    height: 10px;
    background: rgba(99,102,241,0.18);
    border-radius: 4px;
}
.pf-mock-side-item.is-on {
    background: linear-gradient(90deg, #6366F1, #818CF8);
}
.pf-mock-main { padding: 1rem; }
.pf-mock-stat-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.pf-mock-stat {
    background: #f8fafc;
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    padding: 0.55rem;
    text-align: center;
}
.pf-mock-stat strong {
    display: block; font-size: 1rem; font-weight: 800;
    color: var(--color-dark);
}
.pf-mock-stat span {
    font-size: 0.66rem; color: var(--color-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.pf-mock-chart {
    width: 100%; height: 80px;
    margin-bottom: 0.65rem;
}
.pf-mock-tasks { display: flex; flex-direction: column; gap: 0.35rem; }
.pf-mock-task {
    display: block; height: 8px; border-radius: 4px;
    background: rgba(99,102,241,0.14);
    animation: pfMockSkel 2.4s ease-in-out infinite;
}
.pf-mock-task:nth-child(2) { width: 70%; animation-delay: 0.25s; }
.pf-mock-task:nth-child(3) { width: 55%; animation-delay: 0.5s; }
@keyframes pfMockSkel {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* shop mock */
.pf-mock-body-shop {
    grid-template-columns: 1fr;
    padding: 0.85rem;
    gap: 0.55rem;
    display: flex; flex-direction: column;
}
.pf-mock-prod {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
    background: #f8fafc;
    border: 1px solid var(--pf-border);
    border-radius: 8px;
}
.pf-mock-prod-img {
    --bg: #FF6B35;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--bg), #fff 30%));
}
.pf-mock-prod strong { font-size: 0.88rem; }
.pf-mock-prod em {
    font-style: normal; font-weight: 700;
    color: var(--pf-primary);
}
.pf-mock-cart {
    background: linear-gradient(90deg, var(--pf-primary), var(--pf-primary-light));
    color: #fff;
    padding: 0.7rem;
    border-radius: 8px;
    font-weight: 800;
    text-align: center;
}

/* mobile mock */
.pf-mock-mobile {
    background: transparent;
    border: 0;
    box-shadow: none;
    max-width: 280px;
    display: flex;
    justify-content: center;
}
.pf-phone {
    width: 220px;
    background: #0f172a;
    border-radius: 32px;
    padding: 12px;
    position: relative;
    box-shadow: 0 18px 36px rgba(15,23,42,0.35);
}
.pf-phone-notch {
    width: 80px; height: 18px;
    background: #0f172a;
    border-radius: 0 0 10px 10px;
    margin: 0 auto 6px;
    position: relative; top: -2px;
}
.pf-phone-screen {
    background: linear-gradient(180deg, #0f172a, #1e293b);
    border-radius: 22px;
    padding: 14px 12px;
    min-height: 360px;
    color: #fff;
}
.pf-phone-status {
    display: flex; justify-content: space-between;
    font-size: 0.72rem; opacity: 0.7;
    margin-bottom: 0.85rem;
}
.pf-phone-greet {
    font-size: 0.9rem; line-height: 1.3;
    color: rgba(255,255,255,0.85);
    margin-bottom: 1rem;
}
.pf-phone-ring {
    position: relative;
    width: 130px; height: 130px;
    margin: 0 auto 1rem;
}
.pf-phone-ring svg { width: 100%; height: 100%; transform: rotate(0deg); }
.pf-phone-ring-fill {
    transition: stroke-dashoffset 1.2s ease;
}
.pf-phone-ring-num {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.pf-phone-ring-num strong { font-size: 1.4rem; font-weight: 800; }
.pf-phone-ring-num em {
    font-style: normal;
    font-size: 0.65rem;
    opacity: 0.7;
}
.pf-phone-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
}
.pf-phone-tile {
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 0.6rem;
    text-align: center;
    color: #fff;
}
.pf-phone-tile i { color: #10B981; font-size: 0.9rem; margin-bottom: 0.2rem; display: block; }
.pf-phone-tile span { font-weight: 800; display: block; }
.pf-phone-tile em { font-style: normal; font-size: 0.65rem; opacity: 0.6; }

/* GEO mock */
.pf-mock-body-geo {
    grid-template-columns: 1fr;
    padding: 0.85rem;
    display: flex; flex-direction: column;
    gap: 0.5rem;
}
.pf-geo-row {
    display: grid;
    grid-template-columns: 20px 80px 1fr 32px;
    align-items: center;
    gap: 0.65rem;
}
.pf-geo-row i { color: var(--color-muted); }
.pf-geo-row span {
    font-weight: 700;
    font-size: 0.85rem;
}
.pf-geo-bar {
    height: 8px;
    background: #eef2f6;
    border-radius: 4px;
    overflow: hidden;
}
.pf-geo-bar span {
    display: block; height: 100%;
    border-radius: 4px;
    animation: pfGeoFill 1.2s ease-out both;
}
@keyframes pfGeoFill { from { width: 0 !important; } }
.pf-geo-row strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 800;
    color: var(--pf-primary);
    text-align: right;
}
.pf-geo-foot {
    margin-top: 0.35rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* ============ OUTCOMES BAND ============ */
.pf-outcome {
    text-align: center;
    background: #fff;
    border: 1px solid var(--pf-border);
    border-radius: 16px;
    padding: 1.5rem 1rem 1.25rem;
    box-shadow: var(--pf-card-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}
.pf-outcome:hover {
    transform: translateY(-3px);
    box-shadow: var(--pf-card-shadow-lg);
}
.pf-outcome-arc {
    position: relative;
    width: 140px; height: 140px;
    margin: 0 auto 1rem;
}
.pf-outcome-arc svg { width: 100%; height: 100%; }
.pf-outcome-arc-fill {
    transition: stroke-dashoffset 1.2s ease;
}
.pf-outcome-arc-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.65rem; font-weight: 800;
    color: var(--pc);
}
.pf-outcome-label {
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.15rem;
}
.pf-outcome-sub {
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* ============ TECH CONSTELLATION ============ */
.pf-galaxy {
    position: relative;
    width: 100%; max-width: 600px;
    aspect-ratio: 1;
    margin: 0 auto;
}
.pf-galaxy-core {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120px; height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pf-primary), var(--pf-secondary));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 0 70px rgba(var(--color-primary-rgb), 0.55);
    z-index: 5;
    text-align: center;
    line-height: 1.15;
}
.pf-galaxy-core i { font-size: 1.6rem; margin-bottom: 0.25rem; }
.pf-galaxy-core span {
    font-size: 0.74rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.pf-galaxy-ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(255,255,255,0.16);
    border-radius: 50%;
    animation: pfOrbit 60s linear infinite;
}
.pf-galaxy-ring-inner { width: 56%; height: 56%; }
.pf-galaxy-ring-outer {
    width: 92%; height: 92%;
    animation-duration: 90s;
    animation-direction: reverse;
}
@keyframes pfOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
.pf-galaxy-icon {
    --count: 8;
    --r: 100px;
    position: absolute;
    top: 50%; left: 50%;
    width: 52px; height: 52px;
    margin: -26px;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
    transform: rotate(calc(var(--i) * (360deg / var(--count)))) translate(var(--r)) rotate(calc(var(--i) * (-360deg / var(--count))));
}
.pf-galaxy-ring-inner .pf-galaxy-icon { --count: 8; --r: 120px; }
.pf-galaxy-ring-outer .pf-galaxy-icon { --count: 12; --r: 200px; }
@media (min-width: 768px) {
    .pf-galaxy-ring-inner .pf-galaxy-icon { --r: 150px; }
    .pf-galaxy-ring-outer .pf-galaxy-icon { --r: 250px; }
}
@media (min-width: 1200px) {
    .pf-galaxy-ring-inner .pf-galaxy-icon { --r: 175px; }
    .pf-galaxy-ring-outer .pf-galaxy-icon { --r: 285px; }
}
.pf-galaxy-icon i { font-size: 1.25rem; }
.pf-galaxy-icon:hover {
    background: var(--pf-primary);
    box-shadow: 0 0 26px rgba(var(--color-primary-rgb), 0.55);
    z-index: 4;
}
.pf-galaxy-icon::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: var(--pf-dark);
    color: #fff;
    font-size: 0.74rem; white-space: nowrap;
    padding: 0.28rem 0.6rem; border-radius: 4px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
}
.pf-galaxy-icon:hover::after { opacity: 1; }

/* ============ FILTER BAR ============ */
.pf-case-filter {
    padding: 1.5rem 0;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-top: 1px solid var(--pf-border);
    border-bottom: 1px solid var(--pf-border);
    position: sticky;
    top: 80px;
    z-index: 50;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.pf-case-filter-progress {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(15,23,42,0.05);
    overflow: hidden;
}
.pf-case-filter-progress-bar {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--pf-primary), var(--pf-primary-light));
    transition: width 0.18s linear, background 0.3s ease;
}
.pf-filter-inner {
    display: flex; align-items: center; gap: 1rem;
    flex-wrap: wrap; justify-content: center;
}
.pf-filter-label {
    font-weight: 700;
    color: var(--color-muted);
    font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.pf-filter-pills {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    justify-content: center;
}
.pf-pill {
    --c: var(--pf-primary);
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 1.1rem;
    background: #fff;
    border: 1px solid var(--pf-border);
    color: var(--color-dark);
    border-radius: 999px;
    font-weight: 700; font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.pf-pill em {
    font-style: normal;
    background: var(--pf-border);
    color: var(--color-muted);
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 22px; text-align: center;
}
.pf-pill:hover {
    border-color: var(--c);
    transform: translateY(-1px);
}
.pf-pill.is-active {
    background: var(--c);
    color: #fff;
    border-color: var(--c);
    box-shadow: 0 8px 18px rgba(15,23,42,0.14);
}
.pf-pill.is-active em {
    background: rgba(255,255,255,0.22);
    color: #fff;
}

/* ============ CASE GRID ============ */
.pf-item {
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.pf-item.is-hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    position: absolute;
    width: 0; height: 0;
    overflow: hidden;
    padding: 0; margin: 0;
}
.pf-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}
.pf-card {
    background: var(--pf-card-bg);
    border: 1px solid var(--pf-border);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex; flex-direction: column;
    transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
    box-shadow: var(--pf-card-shadow);
    position: relative;
}
.pf-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc), #fff 30%));
    opacity: 0; transition: opacity 0.3s;
    z-index: 2;
}
.pf-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pf-card-shadow-lg);
    border-color: var(--pc);
}
.pf-card:hover::before { opacity: 1; }
.pf-card-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.pf-cover-svg {
    width: 100%; height: 100%;
    display: block;
    transition: transform 0.6s cubic-bezier(.16,1,.3,1);
}
.pf-card:hover .pf-cover-svg { transform: scale(1.05); }
.pf-cover-line {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: pfCoverDraw 1.8s ease-out forwards;
}
@keyframes pfCoverDraw { to { stroke-dashoffset: 0; } }
.pf-card-tag {
    position: absolute;
    top: 14px; left: 14px;
    background: rgba(255,255,255,0.92);
    color: var(--pc);
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
}
.pf-card-body {
    padding: 1.25rem;
    display: flex; flex-direction: column;
    flex: 1;
}
.pf-card-title {
    font-size: 1.15rem; font-weight: 800;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}
.pf-card-desc {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin-bottom: 0.85rem;
    flex: 1;
}
.pf-card-results {
    display: flex; flex-wrap: wrap;
    gap: 0.85rem;
    padding: 0.65rem 0;
    border-top: 1px solid var(--pf-border);
    border-bottom: 1px solid var(--pf-border);
    margin-bottom: 0.85rem;
}
.pf-card-results span {
    font-size: 0.82rem;
    color: var(--color-muted);
}
.pf-card-results strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--pc);
    font-weight: 800;
}
.pf-card-tech {
    display: flex; flex-wrap: wrap;
    gap: 0.35rem;
}
.pf-grid-empty {
    font-size: 1rem;
}

/* ============ TESTIMONIALS CAROUSEL ============ */
.pf-testimonials {
    position: relative;
    background: #fff;
    border: 1px solid var(--pf-border);
    border-radius: 24px;
    padding: 2rem 2rem 1.5rem;
    box-shadow: var(--pf-card-shadow-lg);
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}
.pf-testimonials-progress {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(15,23,42,0.06);
}
.pf-testimonials-progress-bar {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--pf-primary), var(--pf-primary-light));
    transition: width 0.18s linear;
}
.pf-testimonial-stage {
    position: relative;
    min-height: 200px;
}
.pf-testimonial {
    display: none;
    animation: pfTestIn 0.45s ease-out both;
}
.pf-testimonial.is-active { display: block; }
@keyframes pfTestIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pf-testimonial-mark {
    font-family: Georgia, serif;
    font-size: 4rem;
    line-height: 0.6;
    color: var(--pc);
    margin-bottom: 0.5rem;
}
.pf-testimonial p {
    font-size: 1.18rem;
    line-height: 1.55;
    color: var(--color-dark);
    margin-bottom: 1.2rem;
}
.pf-testimonial-author {
    display: flex; align-items: center; gap: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--pf-border);
}
.pf-testimonial-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc), #fff 25%));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
}
.pf-testimonial-author strong {
    display: block;
    color: var(--color-dark);
    font-size: 0.95rem;
}
.pf-testimonial-author em {
    font-style: normal;
    font-size: 0.82rem;
    color: var(--color-muted);
}

.pf-testimonial-dots {
    display: flex; justify-content: center; gap: 0.5rem;
    margin-top: 1.25rem;
}
.pf-test-dot {
    width: 24px; height: 6px;
    background: var(--pf-border);
    border: 0; border-radius: 3px;
    cursor: pointer;
    transition: background 0.3s, width 0.3s;
}
.pf-test-dot.is-active {
    background: var(--pf-primary);
    width: 40px;
}

/* ============ BOTTOM CTA ============ */
.pf-cta {
    background:
        radial-gradient(900px 520px at 10% 20%, rgba(var(--color-primary-rgb), 0.18), transparent 60%),
        radial-gradient(800px 480px at 90% 0%, rgba(var(--color-secondary-rgb), 0.16), transparent 60%),
        linear-gradient(135deg, #0a0c16 0%, #0f172a 45%, #0b0f1d 100%);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 991.98px) {
    .pf-featured-stage { min-height: 0; }
    .pf-featured-text { padding: 2rem 1.5rem; }
    .pf-featured-visual { padding: 1.5rem; }
    .pf-featured-rail { grid-template-columns: repeat(2, 1fr); }
    .pf-rail-btn:nth-child(2) { border-right: 0; }
}
@media (max-width: 575.98px) {
    .pf-mosaic { max-width: 300px; }
    .pf-featured-rail { grid-template-columns: 1fr; }
    .pf-rail-btn { border-right: 0; border-bottom: 1px solid var(--pf-border); }
    .pf-rail-btn:last-child { border-bottom: 0; }
    .pf-galaxy-ring-outer .pf-galaxy-icon { --r: 130px; }
    .pf-galaxy-ring-inner .pf-galaxy-icon { --r: 70px; }
    .pf-galaxy-icon { width: 40px; height: 40px; margin: -20px; }
    .pf-galaxy-icon i { font-size: 1rem; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    .pf-mosaic-glow,
    .pf-galaxy-ring,
    .pf-mock-task,
    .pf-cover-line,
    .pf-geo-bar span {
        animation: none !important;
    }
}

/* ====================================================================
   === INSIGHTS PAGE — bespoke SVG covers + roadmap + 3s tracker ======
   ==================================================================== */

/* Bespoke SVG cover — absolutely fills the cover area, replaces case-cover-N */
.insights-cover-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    z-index: 0;
}

/* Make every cover container a positioning context so the SVG sits behind tags/icons */
.insights-tracker-cover,
.insights-card-cover,
.insights-topic-cover,
.featured-post-cover {
    position: relative;
    overflow: hidden;
    /* override any inherited gradient backgrounds from case-cover-N */
    background: transparent !important;
}

/* Keep tags & overlays above the SVG */
.insights-tracker-tag,
.insights-card-tag,
.insights-topic-icon,
.insights-topic-count,
.insights-card-bookmark,
.featured-post-tag,
.featured-post-watermark {
    position: relative;
    z-index: 2;
}

/* Subtle scale on hover for cover SVGs */
.insights-card:hover .insights-cover-svg,
.insights-topic-card:hover .insights-cover-svg,
.featured-post-card:hover .insights-cover-svg {
    transform: scale(1.04);
    transition: transform 0.6s cubic-bezier(.16,1,.3,1);
}
.insights-cover-svg { transition: transform 0.6s cubic-bezier(.16,1,.3,1); }

/* ============ HERO TRACKER — 3s progress bar ============ */
.insights-tracker-progress {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.10);
    border-radius: 22px 22px 0 0;
    overflow: hidden;
    z-index: 3;
}
.insights-tracker-progress-bar {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    transition: width 0.18s linear;
}
/* Dots are buttons now, ensure they look clickable */
.insights-tracker-dots button {
    background: rgba(255,255,255,0.25);
    border: 0;
    width: 26px; height: 6px;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, width 0.3s;
}
.insights-tracker-dots button.is-active {
    background: var(--color-primary);
    width: 40px;
}

/* ============ READING ROADMAP ============ */
.insights-roadmap-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.insights-roadmap {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(15,23,42,0.10);
}
.insights-roadmap-progress {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(15,23,42,0.05);
    z-index: 3;
}
.insights-roadmap-progress-bar {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    transition: width 0.18s linear;
}

.insights-roadmap-trail {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(15,23,42,0.06);
    background: #f8fafc;
}
.insights-roadmap-step {
    --tc: var(--color-primary);
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.08);
    color: var(--color-dark);
    padding: 0.6rem 1.1rem 0.6rem 0.85rem;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.6rem;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.insights-roadmap-step:hover {
    border-color: var(--tc);
    transform: translateY(-1px);
}
.insights-roadmap-step.is-active {
    background: var(--tc);
    color: #ffffff;
    border-color: var(--tc);
    box-shadow: 0 10px 22px rgba(15,23,42,0.18);
}
.insights-roadmap-step-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: rgba(0,0,0,0.08);
    color: var(--tc);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.78rem;
    transition: background 0.25s, color 0.25s;
}
.insights-roadmap-step.is-active .insights-roadmap-step-num {
    background: rgba(255,255,255,0.22);
    color: #ffffff;
}
.insights-roadmap-step-label { font-size: 0.92rem; }
.insights-roadmap-arrow {
    color: rgba(15,23,42,0.3);
    font-size: 0.9rem;
}

.insights-roadmap-stage {
    position: relative;
    padding: 2.5rem 2rem;
}
.insights-roadmap-slide {
    display: none;
    animation: insightsRoadIn 0.45s ease-out both;
}
.insights-roadmap-slide.is-active { display: block; }
@keyframes insightsRoadIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.insights-roadmap-kicker {
    display: inline-block;
    font-size: 0.78rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--tc);
    background: color-mix(in srgb, var(--tc), #fff 88%);
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}
.insights-roadmap-meta {
    display: flex; flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}
.insights-roadmap-meta i {
    color: var(--tc);
    margin-right: 0.35rem;
}
.insights-roadmap-art {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(15,23,42,0.15);
}
.insights-roadmap-art .insights-cover-svg {
    position: absolute; inset: 0;
}

@media (max-width: 575.98px) {
    .insights-roadmap-trail { gap: 0.35rem; padding: 1rem; }
    .insights-roadmap-step { padding: 0.45rem 0.7rem; font-size: 0.78rem; }
    .insights-roadmap-step-label { display: none; }
    .insights-roadmap-arrow { display: none; }
    .insights-roadmap-stage { padding: 1.75rem 1.25rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .insights-cover-svg,
    .insights-card:hover .insights-cover-svg,
    .insights-topic-card:hover .insights-cover-svg,
    .featured-post-card:hover .insights-cover-svg {
        transform: none !important;
    }
}

/* ====================================================================
   === INSIGHTS PAGE — card visibility polish =========================
   Stronger cards, colored accents, clearer hover states, section tints
   ==================================================================== */

/* per-card accent color falls back to indigo, overridden by inline --tc on each card */
.page-insights .insights-card,
.page-insights .featured-post-card,
.page-insights .insights-topic-card,
.page-insights .insights-tracker-card {
    --pc: var(--tc, #6366F1);
}

/* Section backgrounds — give white cards something to pop against */
.page-insights .insights-featured-section {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}
.page-insights .insights-grid-section {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 60%, #eef2ff 100%);
}

/* ---- Featured essay card ---- */
.page-insights .featured-post-card {
    border: 1px solid rgba(15,23,42,0.10);
    box-shadow: 0 18px 44px rgba(15,23,42,0.12);
    position: relative;
    overflow: hidden;
}
.page-insights .featured-post-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
    z-index: 4;
}
.page-insights .featured-post-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 36px 72px rgba(15,23,42,0.20),
        0 0 0 1px rgba(99,102,241,0.18);
    border-color: rgba(99,102,241,0.30);
}

/* ---- Topic category cards ---- */
.page-insights .insights-topic-card {
    border: 1px solid rgba(15,23,42,0.10);
    background: #ffffff;
    box-shadow:
        0 14px 30px rgba(15,23,42,0.08),
        0 2px 6px rgba(15,23,42,0.05);
    position: relative;
}
.page-insights .insights-topic-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tc), color-mix(in srgb, var(--tc), #fff 35%));
    z-index: 4;
    border-radius: 22px 22px 0 0;
}
.page-insights .insights-topic-card:hover {
    transform: translateY(-8px);
    border-color: var(--tc);
    box-shadow:
        0 28px 64px color-mix(in srgb, var(--tc) 32%, transparent),
        0 8px 20px rgba(15,23,42,0.10);
}
.page-insights .insights-topic-card.is-active {
    border-color: var(--tc);
    box-shadow:
        0 24px 56px color-mix(in srgb, var(--tc) 38%, transparent),
        0 0 0 2px color-mix(in srgb, var(--tc) 30%, transparent);
}

/* ---- Essay grid cards ---- */
.page-insights .insights-card {
    border: 1px solid rgba(15,23,42,0.10);
    box-shadow:
        0 14px 30px rgba(15,23,42,0.08),
        0 2px 6px rgba(15,23,42,0.05);
    position: relative;
    overflow: hidden;
}
.page-insights .insights-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tc, var(--color-primary)), color-mix(in srgb, var(--tc, var(--color-primary)), #fff 35%));
    z-index: 4;
    opacity: 0.85;
    transition: opacity 0.3s, height 0.3s;
}
.page-insights .insights-card:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--tc, var(--color-primary)) 45%, rgba(15,23,42,0.10));
    box-shadow:
        0 28px 60px color-mix(in srgb, var(--tc, var(--color-primary)) 26%, rgba(15,23,42,0.10)),
        0 6px 18px rgba(15,23,42,0.08);
}
.page-insights .insights-card:hover::before {
    height: 5px;
    opacity: 1;
}
/* per-category accent variable on grid items (read off the lowercase data-category) */
.page-insights .insights-grid-item[data-category="ai visibility"] .insights-card,
.page-insights .insights-card-cover .insights-card-tag { --tc: #FF6B35; }
.page-insights .insights-grid-item[data-category="e-commerce"]     .insights-card { --tc: #6366F1; }
.page-insights .insights-grid-item[data-category="web development"] .insights-card { --tc: #818CF8; }
.page-insights .insights-grid-item[data-category="seo"]             .insights-card { --tc: #10B981; }
.page-insights .insights-grid-item[data-category="strategy"]        .insights-card { --tc: #FF8F66; }
.page-insights .insights-grid-item[data-category="engineering"]     .insights-card { --tc: #34D399; }

/* Tighter, more legible card meta + title */
.page-insights .insights-card-tag,
.page-insights .featured-post-tag {
    background: #ffffff;
    color: var(--tc, var(--color-primary));
    border: 1px solid color-mix(in srgb, var(--tc, var(--color-primary)) 35%, transparent);
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(15,23,42,0.08);
}

/* Bookmark button — make it more visible */
.page-insights .insights-card-bookmark {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(15,23,42,0.10) !important;
    color: var(--color-dark) !important;
    box-shadow: 0 4px 10px rgba(15,23,42,0.10) !important;
}
.page-insights .insights-card-bookmark:hover {
    background: var(--tc, var(--color-primary)) !important;
    color: #ffffff !important;
    border-color: var(--tc, var(--color-primary)) !important;
}

/* "Read essay" link — make the affordance clearer */
.page-insights .insights-card-readmore,
.page-insights .featured-post-readmore {
    color: var(--tc, var(--color-primary));
    font-weight: 700;
}
.page-insights .insights-card:hover .insights-card-readmore,
.page-insights .featured-post-card:hover .featured-post-readmore {
    color: var(--tc, var(--color-primary));
    text-shadow: 0 0 0;
}

/* ---- Hero tracker cards (inside the dark glass panel) ---- */
.page-insights .insights-tracker-card {
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 14px 32px rgba(0,0,0,0.25);
    transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
    position: relative;
}
.page-insights .insights-tracker-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tc, var(--color-primary)), color-mix(in srgb, var(--tc, var(--color-primary)), #fff 30%));
    border-radius: 14px 14px 0 0;
    z-index: 2;
}
.page-insights .insights-tracker-card.is-active {
    border-color: color-mix(in srgb, var(--tc, var(--color-primary)) 55%, transparent);
    box-shadow:
        0 20px 40px rgba(0,0,0,0.35),
        0 0 0 1px color-mix(in srgb, var(--tc, var(--color-primary)) 30%, transparent);
}
.page-insights .insights-tracker-title { color: #ffffff; }
.page-insights .insights-tracker-meta { color: rgba(226,232,240,0.7); }
.page-insights .insights-tracker-tag {
    background: var(--tc, var(--color-primary)) !important;
    color: #ffffff !important;
    border: 0;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--tc, var(--color-primary)) 45%, transparent);
}

/* ---- Newsletter band — slightly more pop ---- */
.page-insights .insights-newsletter {
    box-shadow: 0 30px 60px rgba(15,23,42,0.30);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .page-insights .featured-post-card:hover,
    .page-insights .insights-card:hover,
    .page-insights .insights-topic-card:hover {
        transform: none !important;
    }
}

/* ============================================
   INSIGHTS — dark sections to match the header/footer theme
   The hero (.insights-hero) and bottom CTA (.cta-section) are already
   dark navy; this brings the four light content sections + the
   newsletter band onto the same #0f172a→#1e293b palette, with the same
   orange/indigo accent glows used by the hero and footer. White content
   cards (.featured-post-card / .insights-roadmap / .insights-topic-card /
   .insights-card / .insights-toolbar) intentionally stay light so they
   pop against the dark backdrop and their internal text stays readable.
   ============================================ */
.page-insights .insights-featured-section {
    background:
        radial-gradient(700px 340px at 12% 0%, rgba(255,107,53,0.10), transparent 60%),
        radial-gradient(640px 320px at 88% 100%, rgba(99,102,241,0.14), transparent 62%),
        linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}
.page-insights .insights-roadmap-section {
    background:
        radial-gradient(640px 320px at 90% 0%, rgba(99,102,241,0.14), transparent 62%),
        radial-gradient(700px 340px at 10% 100%, rgba(255,107,53,0.10), transparent 60%),
        linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}
.page-insights .svc-light {
    background:
        radial-gradient(700px 340px at 12% 0%, rgba(255,107,53,0.10), transparent 60%),
        radial-gradient(640px 320px at 88% 100%, rgba(99,102,241,0.14), transparent 62%),
        linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}
.page-insights .insights-grid-section {
    background:
        radial-gradient(640px 320px at 90% 0%, rgba(99,102,241,0.14), transparent 62%),
        radial-gradient(700px 340px at 10% 100%, rgba(255,107,53,0.10), transparent 60%),
        linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}
.page-insights .insights-newsletter-section {
    background:
        radial-gradient(700px 340px at 12% 0%, rgba(255,107,53,0.10), transparent 60%),
        radial-gradient(640px 320px at 88% 100%, rgba(99,102,241,0.14), transparent 62%),
        linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

/* Section headers sit directly on the dark background (not inside a card),
   so their text must be lightened. Scoped to the header wrapper that is a
   direct grandchild of the <section> so card-internal .text-muted (e.g. in
   the roadmap slides) is left untouched and stays readable on its white card. */
.page-insights .insights-featured-section > .container > .text-center h2,
.page-insights .insights-roadmap-section  > .container > .text-center h2,
.page-insights .svc-light                  > .container > .text-center h2,
.page-insights .insights-grid-section      > .container > .d-flex h2 {
    color: #fff;
}
.page-insights .insights-featured-section > .container > .text-center .text-muted,
.page-insights .insights-featured-section > .container > .text-center .lead,
.page-insights .insights-roadmap-section  > .container > .text-center .text-muted,
.page-insights .insights-roadmap-section  > .container > .text-center .lead,
.page-insights .svc-light                  > .container > .text-center .text-muted,
.page-insights .svc-light                  > .container > .text-center .lead,
.page-insights .insights-grid-section      > .container > .d-flex .text-muted {
    color: rgba(226, 232, 240, 0.78) !important;
}
/* No-results / empty states render directly on the dark grid section */
.page-insights .insights-grid-section .insights-empty-state,
.page-insights .insights-grid-section > .container > .text-center .text-muted {
    color: rgba(226, 232, 240, 0.7) !important;
}