/* ============================================================
   BROLLY - "Your Road to Outstanding" Marketing Website
   Complete Stylesheet
   ============================================================
   Design System:
     Primary:        #0a1628
     Primary Light:  #1a2d4a
     Accent Gold:    #c9952b
     Gold Light:     #d4a843
     Teal:           #0e7490
     Teal Light:     #14b8a6
     Success:        #10b981
     Warning:        #f59e0b
     Error:          #ef4444
     Text Primary:   #0f172a
     Text Secondary: #475569
     Text Light:     #94a3b8
     Bg:             #ffffff
     Bg Alt:         #f8fafc
     Bg Dark:        #0a1628
     Border:         #e2e8f0
   ============================================================ */

/* ----------------------------------------------------------
   0. IMPORTS & RESET
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

* {
    font-family: 'Ubuntu';
}
:root {
    --color-primary: #302473;
    --color-primary-light: #3d2f8a;
    --color-primary-rgb: 48, 36, 115;
    --color-accent-gold: #c9952b;
    --color-accent-gold-light: #d4a843;
    --color-accent-gold-rgb: 201, 149, 43;
    --color-teal: #0e7490;
    --color-teal-light: #14b8a6;
    --color-teal-rgb: 14, 116, 144;
    --color-success: #10b981;
    --color-success-rgb: 16, 185, 129;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-light: #94a3b8;
    --color-bg: #ffffff;
    --color-bg-alt: #ededed;
    --color-bg-dark: #302473;
    --color-border: #e2e8f0;
    /* Gradients */
    --gradient-software: linear-gradient(135deg, #51caff, #2675ea);
    --gradient-consultancy: linear-gradient(135deg, #ff55a2, #cc0a8b);
    --gradient-training: linear-gradient(135deg, #fcd224, #fd8300);
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.18);
    --shadow-gold: 0 4px 14px rgba(201, 149, 43, 0.3);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --nav-height: 80px;
    --container-max: 1280px;
    --container-narrow: 900px;
    --section-padding: 6rem;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.website-body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-base);
}

ul,
ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

.website-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
}

.website-container--narrow {
    max-width: var(--container-narrow);
}


/* ----------------------------------------------------------
   1. NAVIGATION (.site-nav)
   ---------------------------------------------------------- */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 1000;
    background: transparent;
    transition: background var(--transition-slow),
                box-shadow var(--transition-slow),
                backdrop-filter var(--transition-slow);
}

.site-nav.scrolled {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.site-nav .website-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* -- Logo -- */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    flex-shrink: 0;
    z-index: 1010;
}

.nav-logo-img {
    height: 38px;
    width: auto;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-logo-dark {
    display: none;
}

.nav-logo:hover .nav-logo-img {
    transform: scale(1.05);
}

.site-nav.scrolled .nav-logo-white {
    display: none;
}

.site-nav.scrolled .nav-logo-dark {
    display: block;
}

/* -- Nav Links -- */
.nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    font-size: 0.925rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-sm);
    transition: color var(--transition-base), background var(--transition-base);
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: #ff55a2;
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-base);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.nav-link:hover {
    color: #ffffff;
}

.site-nav.scrolled .nav-link {
    color: var(--color-text-secondary);
}

.site-nav.scrolled .nav-link:hover {
    color: var(--color-primary);
    background: var(--color-bg-alt);
}

.site-nav.scrolled .nav-link.active {
    color: var(--color-primary);
}

/* -- Dropdown -- */
.nav-item-dropdown {
    position: relative;
}

.nav-dropdown-toggle .nav-chevron {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition-fast);
    margin-left: 2px;
}

.nav-item-dropdown:hover .nav-dropdown-toggle .nav-chevron,
.nav-item-dropdown.open .nav-dropdown-toggle .nav-chevron {
    transform: rotate(-135deg) translateY(-2px);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 280px;
    background: #ffffff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base),
                transform var(--transition-base),
                visibility var(--transition-base);
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-left: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
}

.nav-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-dropdown-link:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
}

.nav-dropdown-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.nav-dropdown-link:hover .nav-dropdown-icon {
    background: rgba(var(--color-primary-rgb), 0.1);
}

.nav-dropdown-text {
    display: flex;
    flex-direction: column;
}

.nav-dropdown-title {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    line-height: 1.3;
}

.nav-dropdown-desc {
    font-size: 0.78rem;
    color: var(--color-text-light);
    font-weight: 400;
    line-height: 1.4;
}

/* -- Mega Menu -- */
.nav-mega-menu {
    min-width: 780px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    padding: 1rem;
}

.mega-menu-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mega-menu-heading {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    padding: 0.5rem 1rem 0.5rem;
    margin-bottom: 0.25rem;
}

.mega-menu-divider {
    width: 1px;
    background: var(--color-border);
    margin: 0 0.5rem;
}

/* Colourful product links in mega menu */
.nav-dropdown-link[href="Consultancy.html"] .nav-dropdown-icon {
    background: rgba(204, 10, 139, 0.1);
    color: #cc0a8b;
}
.nav-dropdown-link[href="Consultancy.html"]:hover .nav-dropdown-icon {
    background: var(--gradient-consultancy);
    color: #ffffff;
}
.nav-dropdown-link[href="Consultancy.html"]:hover {
    background: rgba(204, 10, 139, 0.06);
}

.nav-dropdown-link[href="Software.html"] .nav-dropdown-icon {
    background: rgba(38, 117, 234, 0.1);
    color: #2675ea;
}
.nav-dropdown-link[href="Software.html"]:hover .nav-dropdown-icon {
    background: var(--gradient-software);
    color: #ffffff;
}
.nav-dropdown-link[href="Software.html"]:hover {
    background: rgba(38, 117, 234, 0.06);
}

.nav-dropdown-link[href="Training.html"] .nav-dropdown-icon {
    background: rgba(253, 131, 0, 0.1);
    color: #fd8300;
}
.nav-dropdown-link[href="Training.html"]:hover .nav-dropdown-icon {
    background: var(--gradient-training);
    color: #ffffff;
}
.nav-dropdown-link[href="Training.html"]:hover {
    background: rgba(253, 131, 0, 0.06);
}

/* Mega menu product image banner */
.mega-menu-banner {
    display: block;
    margin-top: 0.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.06), rgba(204, 10, 139, 0.06));
    border-radius: var(--radius-md);
    text-align: center;
}

.mega-menu-banner-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
}

.mega-menu-banner-desc {
    font-size: 0.72rem;
    color: var(--color-text-light);
    margin-top: 0.15rem;
}

/* Mega menu featured promo panel */
.mega-menu-featured {
    display: flex;
    align-items: stretch;
}

.mega-menu-featured-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, #302473 0%, #1a1254 100%);
    min-width: 220px;
}

.mega-menu-featured-visual {
    padding: 1.25rem 1.25rem 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mega-menu-featured-img {
    width: 48px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(81, 202, 255, 0.3));
}

.mega-menu-featured-content {
    padding: 0 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mega-menu-featured-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #51caff;
}

.mega-menu-featured-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
}

.mega-menu-featured-desc {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

.mega-menu-featured-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #ff55a2, #cc0a8b);
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    margin-top: 0.35rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
    width: fit-content;
}

.mega-menu-featured-btn:hover {
    opacity: 0.9;
    transform: translateX(2px);
}

/* Mobile section labels */
.mobile-nav-section-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    padding: 0 1rem;
}

/* -- Login Button in Nav -- */
.btn-login-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 600;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast),
                border-color var(--transition-base),
                color var(--transition-base),
                background var(--transition-base);
    white-space: nowrap;
}

.btn-login-nav:hover {
    border-color: rgba(255, 255, 255, 0.7);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.site-nav.scrolled .btn-login-nav {
    color: var(--color-primary);
    border-color: rgba(var(--color-primary-rgb), 0.3);
}

.site-nav.scrolled .btn-login-nav:hover {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.06);
    color: var(--color-primary);
}

/* -- CTA Button in Nav -- */
.btn-cta-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    background: var(--gradient-consultancy);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast),
                box-shadow var(--transition-base),
                opacity var(--transition-base);
    margin-left: 0.75rem;
    white-space: nowrap;
}

.btn-cta-nav:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(204, 10, 139, 0.35);
    color: #ffffff;
    opacity: 0.9;
}

.btn-cta-nav:active {
    transform: translateY(0);
}

/* -- Mobile Hamburger -- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 1010;
    background: none;
    border: none;
    padding: 0;
}

.nav-toggle-line {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform var(--transition-base),
                opacity var(--transition-fast),
                background var(--transition-base);
}

.nav-toggle-line + .nav-toggle-line {
    margin-top: 6px;
}

.site-nav.scrolled .nav-toggle-line {
    background: var(--color-primary);
}

.nav-toggle.active .nav-toggle-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle.active .nav-toggle-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle.active .nav-toggle-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* -- Mobile Overlay -- */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--color-primary-rgb), 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1005;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    gap: 0.5rem;
}

.mobile-nav-link {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background var(--transition-fast);
    text-align: center;
}

.mobile-nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.mobile-nav-cta {
    margin-top: 1.5rem;
    padding: 0.85rem 2.5rem;
    background: var(--gradient-consultancy);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: opacity var(--transition-base), box-shadow var(--transition-base);
}

.mobile-nav-cta:hover {
    opacity: 0.9;
    box-shadow: 0 4px 14px rgba(204, 10, 139, 0.35);
}


/* ----------------------------------------------------------
   2. HERO SECTION (.hero-section)
   ---------------------------------------------------------- */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: var(--nav-height);
    background: linear-gradient(135deg, #1a1254 0%, #302473 45%, #3d2f8a 70%, #4a3a9e 100%);
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 70%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(var(--color-accent-gold-rgb), 0.06) 0%, transparent 65%);
    pointer-events: none;
}

/* Angled cut at bottom of hero (Stripe-style diagonal) */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    background: var(--color-bg-alt);
    clip-path: polygon(0 100%, 100% 30%, 100% 100%);
    pointer-events: none;
    z-index: 2;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 3;
    padding: 3rem 0 6rem;
}

.hero-content {
    max-width: 600px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.5rem;
}

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

.hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

.hero-headline .gold-text-original {
    /* Overridden by new gradient styles */
}

.hero-subtitle {
    font-family: var(--font-primary);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    font-weight: 400;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2.25rem;
    max-width: 520px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 2.25rem;
    background: var(--gradient-consultancy);
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-base),
                opacity var(--transition-base);
    position: relative;
    overflow: hidden;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.hero-cta:hover::before {
    left: 100%;
}

.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(204, 10, 139, 0.35);
    color: #ffffff;
    opacity: 0.9;
}

.hero-cta:active {
    transform: translateY(0);
}

.hero-secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color var(--transition-base), gap var(--transition-base);
}

.hero-secondary-link:hover {
    color: #ffffff;
    gap: 0.75rem;
}

.hero-secondary-link .arrow {
    font-size: 1.2rem;
    transition: transform var(--transition-base);
}

.hero-secondary-link:hover .arrow {
    transform: translateX(3px);
}

/* Hero outline button (secondary CTA) */
.hero-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 2.25rem;
    background: transparent;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    border: 2px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-base),
                border-color var(--transition-base),
                background var(--transition-base);
}

.hero-btn-outline:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* -- Hero Visual -- */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-visual-container {
    position: relative;
    width: 100%;
    max-width: 700px;
    aspect-ratio: 1 / 1;
}

.hero-lottie,
.hero-image {
    width: 150%;
    height: 120%;
    object-fit: contain;
}

.hero-visual-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(var(--color-accent-gold-rgb), 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(40px);
}

/* -- Hero Interactive Boxes (replace Lottie on completion) -- */
.hero-boxes {
    position: absolute;
    /* Position to match the 3 boxes in the Lottie final frame */
    /* Lottie canvas is 16:9 inside a ~150%x120% overflow area */
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 76%;
    display: flex;
    align-items: stretch;
    gap: 2.5%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    z-index: 2;
}

.hero-boxes.active {
    opacity: 1;
    pointer-events: auto;
}

.hero-box {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 4rem 0.75rem;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.hero-box-software {
    background: var(--gradient-software);
    flex: 1;
    min-width:200px;
    max-height:152px;
}

.hero-box-consultancy {
    background: var(--gradient-consultancy);
    flex: 1.4;
    min-width: 200px;
    max-height: 152px;
}

.hero-box-training {
    background: var(--gradient-training);
    flex: 1;
    min-width: 200px;
    max-height: 152px;
}

.hero-box-label {
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(0.7rem, 1.5vw, 1.1rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
}

.hero-box:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.hero-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
}

.hero-box-label {
    position: relative;
    z-index: 1;
}

/* Lottie hidden state after animation completes */
.hero-lottie.completed {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* -- Hero Stacked Layout -- */
.hero-stacked {
    position: relative;
    z-index: 3;
    padding: 3rem 0 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-content-centered {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2.5rem;
}

.hero-content-centered .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.hero-content-centered .hero-actions {
    justify-content: center;
}

/* -- Hero Headline Rotator -- */
.hero-rotator {
    position: relative;
    min-height: 2.4em;
}

.hero-rotator-slide {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.hero-rotator-slide.active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
    pointer-events: auto;
}

/* Active step card highlight synced with rotator */
.hero-step-card.hero-step-active {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 25px rgba(var(--color-accent-gold-rgb), 0.2);
}

.hero-step-card-featured.hero-step-active {
    box-shadow: 0 0 30px rgba(var(--color-accent-gold-rgb), 0.3);
}

/* -- Hero Step Cards (full width) -- */
.hero-steps-cards {
    display: flex;
    gap: 1.25rem;
    width: 100%;
}

.hero-step-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    text-decoration: none;
    color: #ffffff;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.hero-step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: left 0.5s ease;
}

.hero-step-card:hover::before {
    left: 100%;
}

.hero-step-card:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

.hero-step-card-featured {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 20px rgba(var(--color-accent-gold-rgb), 0.15);
}

.hero-step-card-featured:hover {
    border-color: var(--color-accent-gold-light);
    box-shadow: 0 12px 40px rgba(var(--color-accent-gold-rgb), 0.25);
}

.hero-step-number {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.75rem;
}

.hero-step-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--color-accent-gold-rgb), 0.2), rgba(var(--color-accent-gold-rgb), 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-accent-gold);
    margin-bottom: 0.75rem;
}

.hero-step-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 0.75rem;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.hero-step-card-featured .hero-step-avatar {
    border-color: var(--color-accent-gold);
}

.hero-step-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-step-avatar-live {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    background: var(--color-accent-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    color: #fff;
    border: 2px solid #1a1254;
}

.hero-step-card-featured .hero-step-avatar-live {
    animation: pulse 2s ease-in-out infinite;
}

.hero-step-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.hero-step-desc {
    font-size: 1.2rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.75rem;
    flex: 1;
}

.hero-step-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: black;
    background: #fff;
    min-width: 150px;
    margin-bottom: 0.6rem;
    min-height: 25px;
    border-radius: 15px;
    transition: gap 0.2s ease;
}

.hero-step-card:hover .hero-step-cta {
    gap: 0.6rem;
}

.hero-step-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 0.03em;
}

.hero-step-card-featured .hero-step-badge {
    background: rgba(var(--color-accent-gold-rgb), 0.15);
    color: var(--color-accent-gold);
}

/* CTA dual actions */
.cta-dual-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.cta-secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cta-secondary-link:hover {
    color: var(--color-primary-light);
}

/* -- Scroll Indicator -- */
.scroll-indicator {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: pulse 2.5s ease-in-out infinite;
    cursor: pointer;
    transition: color var(--transition-base);
}

.scroll-indicator:hover {
    color: rgba(255, 255, 255, 0.8);
}

.scroll-indicator-chevron {
    width: 24px;
    height: 24px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    animation: bounceDown 2s ease-in-out infinite;
}


/* ----------------------------------------------------------
   3. PROBLEM SECTION (.problem-section)
   ---------------------------------------------------------- */
.problem-section {
    position: relative;
    background: var(--color-bg-alt);
    color: var(--color-text-primary);
    padding: var(--section-padding) 0;
    overflow: hidden;
    
}

.problem-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(var(--color-primary-rgb), 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(var(--color-accent-gold-rgb), 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.problem-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3.5rem;
}

.problem-content .section-badge {
    color: var(--color-primary);
    border-color: rgba(var(--color-primary-rgb), 0.2);
    background: rgba(var(--color-primary-rgb), 0.06);
}

.problem-content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

.problem-content p {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 2;
}

.stat-card {
    position: relative;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    text-align: center;
    transition: transform var(--transition-base),
                background var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--color-primary-rgb), 0.15);
}

.stat-number {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 3.25rem);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.stat-description {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}


/* ----------------------------------------------------------
   4. PROGRAMME SECTION (.programme-section)
   ---------------------------------------------------------- */
.programme-section {
    position: relative;
    background: var(--color-bg);
    padding: var(--section-padding) 0;
    overflow: hidden;
}

.programme-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 4rem;
}

.programme-road {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    padding-top: 2rem;
}

/* -- Road Path (connecting line) -- */
.programme-road::before {
    content: '';
    position: absolute;
    top: -10px;
    left: calc(16.66% + 1.25rem);
    right: calc(16.66% + 1.25rem);
    height: 3px;
    background: linear-gradient(90deg,
        #cc0a8b,
        #2675ea 50%,
        #fd8300
    );
    border-radius: 2px;
    z-index: 1;
}

.programme-step {
    position: relative;
    z-index: 2;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.programme-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: transparent;
}

.step-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.5rem;
    position: relative;
    z-index: 3;
}

.programme-step:nth-child(1) .step-icon {
    background: var(--gradient-consultancy);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(204, 10, 139, 0.3);
}

.programme-step:nth-child(2) .step-icon {
    background: var(--gradient-software);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(38, 117, 234, 0.3);
}

.programme-step:nth-child(3) .step-icon {
    background: var(--gradient-training);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(253, 131, 0, 0.3);
}

.programme-step:nth-child(1):hover {
    border-color: rgba(204, 10, 139, 0.3);
}

.programme-step:nth-child(2):hover {
    border-color: rgba(38, 117, 234, 0.3);
}

.programme-step:nth-child(3):hover {
    border-color: rgba(253, 131, 0, 0.3);
}

.step-number {
    display: inline-block;
    padding: 0.2rem 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--radius-full);
    margin-bottom: 0.75rem;
}

.programme-step:nth-child(1) .step-number {
    background: rgba(204, 10, 139, 0.1);
    color: #cc0a8b;
}

.programme-step:nth-child(2) .step-number {
    background: rgba(38, 117, 234, 0.1);
    color: #2675ea;
}

.programme-step:nth-child(3) .step-number {
    background: rgba(253, 131, 0, 0.1);
    color: #fd8300;
}

.step-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.step-features {
    text-align: left;
    margin-bottom: 1.5rem;
}

.step-features li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.5rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.step-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
}

.programme-step:nth-child(1) .step-features li::before {
    background: #cc0a8b;
}

.programme-step:nth-child(2) .step-features li::before {
    background: #2675ea;
}

.programme-step:nth-child(3) .step-features li::before {
    background: #fd8300;
}

.step-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: gap var(--transition-base), color var(--transition-base);
}

.step-learn-more:hover {
    gap: 0.65rem;
    color: var(--color-primary-light);
}

.programme-step:nth-child(1) .step-learn-more { color: #cc0a8b; }
.programme-step:nth-child(2) .step-learn-more { color: #2675ea; }
.programme-step:nth-child(3) .step-learn-more { color: #fd8300; }


/* ----------------------------------------------------------
   5. DIFFERENTIATOR SECTION (.differentiator-section)
   ---------------------------------------------------------- */
.differentiator-section {
    background: var(--color-bg-alt);
    padding: var(--section-padding) 0;
}

.differentiator-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}

.comparison-table {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comparison-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: center;
}

.comparison-header {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.comparison-header .comparison-old,
.comparison-header .comparison-new {
    background: transparent;
    border: none;
    padding: 0.5rem 0;
}

.comparison-header-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.comparison-header .comparison-old .comparison-header-label {
    color: var(--color-error);
}

.comparison-header .comparison-new .comparison-header-label {
    color: var(--color-success);
}

.comparison-vs {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-light);
    background: var(--color-bg);
    border-radius: 50%;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

.comparison-old,
.comparison-new {
    padding: 1.15rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: 0.925rem;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.comparison-old {
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.12);
    color: var(--color-text-secondary);
}

.comparison-new {
    background: rgba(16, 185, 129, 0.04);
    border: 1px solid rgba(16, 185, 129, 0.12);
    color: var(--color-text-primary);
}

.comparison-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    margin-top: 2px;
}

.comparison-old .comparison-icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
}

.comparison-new .comparison-icon {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
}


/* ----------------------------------------------------------
   6. ROI SECTION (.roi-section)
   ---------------------------------------------------------- */
.roi-section {
    background: var(--color-bg);
    padding: var(--section-padding) 0;
}

.roi-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}

.roi-quote {
    position: relative;
    max-width: 800px;
    margin: 0 auto 4rem;
    padding: 2rem 2.5rem;
    border-left: 4px solid var(--color-primary);
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.03), transparent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.roi-quote p {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.7;
    color: var(--color-text-primary);
}

.roi-quote-author {
    margin-top: 1rem;
    font-family: var(--font-primary);
    font-style: normal;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.roi-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.roi-feature-card {
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    overflow: hidden;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.roi-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #cc0a8b, #2675ea, #fd8300);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.roi-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.roi-feature-card:hover::before {
    opacity: 1;
}

.roi-feature-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    font-size: 1.35rem;
    margin-bottom: 1.25rem;
    transition: background var(--transition-base);
}

.roi-feature-card:hover .roi-feature-icon {
    background: rgba(var(--color-primary-rgb), 0.1);
}

.roi-feature-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.65rem;
    line-height: 1.3;
}

.roi-feature-desc {
    font-size: 0.925rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}


/* ----------------------------------------------------------
   6b. INTRODUCTION SECTION (.intro-section)
   ---------------------------------------------------------- */
.intro-section {
    padding: 5rem 0 4rem;
    background: var(--color-bg-alt);
}

.intro-content {
    max-width: 780px;
    margin: 0 auto;
}

.intro-heading {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.35;
    margin-bottom: 1.25rem;
    text-align: center;
}

.intro-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 3rem;
}

.intro-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.intro-step {
    display: flex;
    gap: 1.5rem;
    padding: 1.75rem 0;
}

.intro-step:not(:last-child) {
    border-bottom: 1px solid rgba(48, 36, 115, 0.06);
}

.intro-step-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.intro-step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-step-line {
    width: 2px;
    flex: 1;
    background: linear-gradient(180deg, var(--color-primary) 0%, rgba(48, 36, 115, 0.08) 100%);
    margin-top: 0.5rem;
}

.intro-step-content h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.intro-step-content p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
}

.intro-step-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.intro-step-link:hover {
    gap: 0.65rem;
    color: var(--color-primary-light);
}

@media (max-width: 768px) {
    .intro-section {
        padding: 3rem 0 2.5rem;
    }

    .intro-step {
        gap: 1rem;
        padding: 1.25rem 0;
    }

    .intro-step-number {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .intro-step-content h3 {
        font-size: 1rem;
    }

    .intro-step-content p {
        font-size: 0.9rem;
    }
}

/* ----------------------------------------------------------
   7. CREDIBILITY SECTION (.credibility-section)
   ---------------------------------------------------------- */
.credibility-section {
    position: relative;
    background: linear-gradient(135deg, #302473 0%, #3d2f8a 40%, #4a3a9e 100%);
    padding: 4.5rem 0;
    overflow: hidden;
}

.credibility-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

.credibility-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 2;
}

.credibility-stat {
    text-align: center;
    padding: 1.5rem 1rem;
}

.credibility-number {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 0.35rem;
}

.credibility-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}


/* ----------------------------------------------------------
   8. TESTIMONIAL SECTION (.testimonial-section)
   ---------------------------------------------------------- */
.testimonial-section {
    background: var(--color-bg-alt);
    padding: var(--section-padding) 0;
}

.testimonial-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.testimonial-quote-mark {
    font-family: var(--font-display);
    font-size: 6rem;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.2;
    margin-bottom: -1.5rem;
    display: block;
    user-select: none;
}

.testimonial-quote {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.8;
    color: var(--color-text-primary);
    margin-bottom: 1.75rem;
}

.stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
}

.star {
    color: var(--color-warning);
    font-size: 1.2rem;
}

.testimonial-author {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.testimonial-role {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-top: 0.15rem;
}


/* ----------------------------------------------------------
   9. CTA SECTION (.cta-section)
   ---------------------------------------------------------- */
.cta-section {
    position: relative;
    background: linear-gradient(135deg, #f0eef5 0%, #e8e4f0 50%, #f5f3fa 100%);
    padding: 5.5rem 0;
    text-align: center;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(48, 36, 115, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(201, 149, 43, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 1rem;
    line-height: 1.25;
}

.cta-content p {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.cta-heading {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 1rem;
    line-height: 1.25;
}

.cta-subtext {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin-bottom: 2.25rem;
    line-height: 1.7;
}

.btn-cta-large {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.1rem 3rem;
    background: var(--gradient-consultancy);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-base),
                opacity var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn-cta-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.7s ease;
}

.btn-cta-large:hover::before {
    left: 100%;
}

.btn-cta-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(204, 10, 139, 0.35);
    color: #ffffff;
    opacity: 0.9;
}

.btn-cta-large:active {
    transform: translateY(0);
}

.cta-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    color: var(--color-text-light);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color var(--transition-base);
}

.cta-phone:hover {
    color: var(--color-primary);
}


/* ----------------------------------------------------------
   10. PAGE HEROES (.page-hero) -- Inner Pages
   ---------------------------------------------------------- */
.page-hero {
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--nav-height) + 3rem) 2rem 3rem;
    overflow: hidden;
}

/* Gradient canvas hero - left-aligned, taller, with WebGL background */
.page-hero.has-gradient {
    min-height: 85vh;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    padding: calc(var(--nav-height) + 4rem) 0 4rem;
}

.page-hero.has-gradient .page-hero-content {
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    box-sizing: border-box;
}

.page-hero.has-gradient h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    max-width: 750px;
}

.page-hero.has-gradient p {
    margin: 0;
}

.page-hero.has-gradient .page-hero-step {
    margin-bottom: 1.25rem;
}

/* Page Hero CTA block */
.page-hero-cta {
    margin-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.page-hero-cta .hero-cta {
    font-size: 1.05rem;
    padding: 1rem 2.25rem;
    animation: heroCTAPulse 3s ease-in-out infinite;
}

@keyframes heroCTAPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(255, 85, 162, 0.3); }
    50% { box-shadow: 0 4px 30px rgba(255, 85, 162, 0.55); }
}

.page-hero-reassurance {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.page-hero-avatar-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
}

.page-hero-avatar-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
    .page-hero-cta {
        align-items: center;
        text-align: center;
    }

    .page-hero-cta .hero-cta {
        font-size: 0.95rem;
        padding: 0.85rem 1.75rem;
    }

    .page-hero-avatar-preview {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
}

/* Gradient canvas element */
.page-hero #gradient-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.page-hero #gradient-canvas.isLoaded {
    opacity: 1;
}

/* Angled cut at bottom of hero (Stripe-style diagonal) */
.page-hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    background: var(--color-bg-alt);
    clip-path: polygon(0 100%, 100% 40%, 100% 100%);
    pointer-events: none;
    z-index: 2;
}

.page-hero-content {
    position: relative;
    z-index: 3;
    max-width: 700px;
}

.page-hero-step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.page-hero-step .step-divider {
    width: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.page-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.page-hero p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

/* -- Wide hero layout for Consultancy -- */
.consultancy-hero-wide {
    max-width: var(--container-max) !important;
    text-align: center;
}

.consultancy-hero-wide h1 {
    max-width: 900px !important;
    margin-left: auto;
    margin-right: auto;
}

.consultancy-hero-wide .hero-subtitle {
    max-width: 680px !important;
    margin: 0 auto !important;
    text-align: center;
}

.consultancy-hero-wide .page-hero-cta {
    align-items: center;
}

/* Trust badges */
.hero-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.25rem;
    justify-content: center;
}

.hero-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    padding: 0.6rem 1.25rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-trust-badge i {
    font-size: 0.9rem;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .hero-trust-badges {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .hero-trust-badge {
        font-size: 0.88rem;
        padding: 0.5rem 1rem;
    }
}

/* -- Hero Variants -- */
.consultancy-hero {
    background: linear-gradient(135deg, #4a1040 0%, #cc0a8b 50%, #ff55a2 100%);
}

.consultancy-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 50%;
    height: 160%;
    background: radial-gradient(ellipse, rgba(255, 85, 162, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

/* -- Wide hero layout for Software -- */
.software-hero-wide {
    max-width: var(--container-max) !important;
}

.software-hero-layout {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
    width: 100%;
}

.software-hero-text {
    max-width: 680px;
}

.software-hero-text .hero-subtitle {
    max-width: 580px;
}

.software-hero-text .page-hero-cta {
    align-items: flex-start;
}

/* Avatar showcase */
.software-hero-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.software-avatar-frame {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: visible;
}

.software-avatar-frame img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 2;
}

.software-avatar-pulse {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    border: 2px solid rgba(81, 202, 255, 0.5);
    animation: avatarPulse 2.5s ease-in-out infinite;
    z-index: 1;
}

@keyframes avatarPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.2;
    }
}

.software-avatar-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.03em;
}

.software-avatar-live-dot {
    font-size: 0.5rem;
    color: #22c55e;
    margin-right: 4px;
    animation: liveBlink 1.5s ease-in-out infinite;
}

@keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@media (max-width: 900px) {
    .software-hero-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .software-hero-text {
        max-width: 100%;
    }

    .software-hero-text .hero-subtitle {
        max-width: 100%;
        margin: 0 auto !important;
        text-align: center;
    }

    .software-hero-text .page-hero-cta {
        align-items: center;
    }

    .software-hero-avatar {
        order: -1;
    }

    .software-avatar-frame {
        width: 140px;
        height: 140px;
    }
}

.software-hero {
    background: linear-gradient(135deg, #1a1254 0%, #2675ea 50%, #51caff 100%);
}

.software-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 50%;
    height: 160%;
    background: radial-gradient(ellipse, rgba(81, 202, 255, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.training-hero {
    background: linear-gradient(135deg, #5a3000 0%, #fd8300 50%, #fcd224 100%);
}

.training-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 50%;
    height: 160%;
    background: radial-gradient(ellipse, rgba(252, 210, 36, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.about-hero {
    background: linear-gradient(135deg, #1a1254 0%, #302473 50%, #3d2f8a 100%);
}

.about-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 50%;
    height: 160%;
    background: radial-gradient(ellipse, rgba(var(--color-primary-rgb), 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.assessment-hero {
    background: linear-gradient(135deg, #1a1254 0%, #302473 50%, #3d2f8a 100%);
}

.assessment-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 50%;
    height: 160%;
    background: radial-gradient(ellipse, rgba(var(--color-primary-rgb), 0.15) 0%, transparent 60%);
    pointer-events: none;
}


/* ----------------------------------------------------------
   11. INNER PAGE CONTENT SECTIONS
   ---------------------------------------------------------- */
.content-section {
    padding: 5rem 0;
}

.content-section.alt {
    background: var(--color-bg-alt);
}

.content-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}

.content-grid {
    display: grid;
    gap: 2rem;
}

.content-grid.two-col {
    grid-template-columns: repeat(2, 1fr);
}

.content-grid.three-col {
    grid-template-columns: repeat(3, 1fr);
}

.content-grid.four-col {
    grid-template-columns: repeat(4, 1fr);
}

/* -- Feature Card -- */
.feature-card {
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(var(--color-primary-rgb), 0.2);
}

.feature-card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08), rgba(81, 202, 255, 0.1));
    border-radius: var(--radius-md);
    font-size: 1.35rem;
    margin-bottom: 1.25rem;
    color: var(--color-primary);
}

.feature-card-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.65rem;
    line-height: 1.3;
}

.feature-card-desc {
    font-size: 0.925rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.feature-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: gap var(--transition-base);
}

.feature-card-link:hover {
    gap: 0.65rem;
}

/* -- Process Step -- */
.process-step {
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.process-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.process-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: 1.25rem;
}

.process-step-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.65rem;
    line-height: 1.3;
}

.process-step-desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* -- CQC Card -- */
.cqc-card {
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    padding-left: 2.35rem;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.cqc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5px;
    border-radius: 16px 0 0 16px;
}

.cqc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* CQC Card colour variants */
.cqc-card.cqc-safe {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.05), rgba(14, 116, 144, 0.02));
    border-color: rgba(14, 116, 144, 0.15);
}
.cqc-card.cqc-safe::before { background: var(--color-teal); }
.cqc-card.cqc-safe:hover { border-color: rgba(14, 116, 144, 0.35); }

.cqc-card.cqc-effective {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(16, 185, 129, 0.02));
    border-color: rgba(16, 185, 129, 0.15);
}
.cqc-card.cqc-effective::before { background: var(--color-success); }
.cqc-card.cqc-effective:hover { border-color: rgba(16, 185, 129, 0.35); }

.cqc-card.cqc-caring {
    background: linear-gradient(135deg, rgba(253, 131, 0, 0.05), rgba(253, 131, 0, 0.02));
    border-color: rgba(253, 131, 0, 0.15);
}
.cqc-card.cqc-caring::before { background: #fd8300; }
.cqc-card.cqc-caring:hover { border-color: rgba(253, 131, 0, 0.35); }

.cqc-card.cqc-responsive {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(139, 92, 246, 0.02));
    border-color: rgba(139, 92, 246, 0.15);
}
.cqc-card.cqc-responsive::before { background: #8b5cf6; }
.cqc-card.cqc-responsive:hover { border-color: rgba(139, 92, 246, 0.35); }

.cqc-card.cqc-well-led {
    background: linear-gradient(135deg, rgba(48, 36, 115, 0.05), rgba(48, 36, 115, 0.02));
    border-color: rgba(48, 36, 115, 0.15);
}
.cqc-card.cqc-well-led::before { background: var(--color-primary); }
.cqc-card.cqc-well-led:hover { border-color: rgba(48, 36, 115, 0.35); }

/* CQC Card icons - stronger coloured backgrounds */
.cqc-safe .cqc-icon { background: rgba(14, 116, 144, 0.12); color: var(--color-teal); }
.cqc-effective .cqc-icon { background: rgba(16, 185, 129, 0.12); color: var(--color-success); }
.cqc-caring .cqc-icon { background: rgba(253, 131, 0, 0.12); color: #fd8300; }
.cqc-responsive .cqc-icon { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.cqc-well-led .cqc-icon { background: rgba(48, 36, 115, 0.12); color: var(--color-primary); }

.cqc-card-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
    padding-top: 0.25rem;
}

.cqc-card-desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.cqc-card-list {
    margin-top: 0.75rem;
}

.cqc-card-list li {
    position: relative;
    padding: 0.3rem 0 0.3rem 1.25rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.cqc-card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border);
}

/* -- Value Card -- */
.value-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    text-align: center;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
}

.value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.value-card-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.75rem;
    background: var(--color-bg-alt);
    border-radius: 50%;
    transition: background var(--transition-base);
}

.value-card:hover .value-card-icon {
    background: rgba(var(--color-primary-rgb), 0.1);
}

.value-card-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.65rem;
}

.value-card-desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* -- Team Card -- */
.team-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.team-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    overflow: hidden;
}

.team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.team-role {
    font-size: 0.875rem;
    color: #cc0a8b;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.team-bio {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* -- Timeline -- */
.timeline {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    padding: 1rem 0;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #cc0a8b, #2675ea, #fd8300);
    border-radius: 1px;
}

.timeline-item {
    position: relative;
    padding: 0 0 2.5rem 4rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: 15px;
    top: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 3px solid var(--color-primary);
    z-index: 2;
    transition: background var(--transition-base), border-color var(--transition-base);
}

.timeline-item:hover .timeline-marker {
    background: var(--color-primary);
}

.timeline-year {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
}

.timeline-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.timeline-desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}


/* ----------------------------------------------------------
   12. ASSESSMENT PAGE
   ---------------------------------------------------------- */
.assessment-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3rem;
    align-items: start;
}

/* -- Progress Bar -- */
.progress-bar {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 2.5rem;
    position: relative;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 2;
}

.progress-step::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    z-index: -1;
}

.progress-step:last-child::before {
    display: none;
}

.progress-step.completed::before {
    background: var(--color-primary);
}

.progress-step-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    color: var(--color-text-light);
    transition: all var(--transition-base);
    margin-bottom: 0.5rem;
}

.progress-step.active .progress-step-circle {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.15);
}

.progress-step.completed .progress-step-circle {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.progress-step-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-align: center;
    transition: color var(--transition-base);
}

.progress-step.active .progress-step-label,
.progress-step.completed .progress-step-label {
    color: var(--color-text-primary);
}

/* -- Assessment Form -- */
.assessment-form {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;
    animation: fadeInUp 0.4s ease-out;
}

.form-step-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.form-step-desc {
    font-size: 0.925rem;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.question-group {
    margin-bottom: 2rem;
}

.question-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.question-options {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.question-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-base),
                background var(--transition-base),
                box-shadow var(--transition-base);
}

.question-option:hover {
    border-color: rgba(var(--color-primary-rgb), 0.3);
    background: rgba(var(--color-primary-rgb), 0.02);
}

.question-option.selected {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.04);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.question-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.question-option-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.question-option-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    transform: scale(0);
    transition: transform var(--transition-spring);
}

.question-option.selected .question-option-radio {
    border-color: var(--color-primary);
}

.question-option.selected .question-option-radio::after {
    transform: scale(1);
}

.question-option-text {
    font-size: 0.925rem;
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
}

.question-option.selected .question-option-text {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* -- Form Input Fields -- */
.form-field {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.4rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-primary);
    font-size: 0.925rem;
    color: var(--color-text-primary);
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-light);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.btn-form-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.5rem;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.btn-form-back:hover {
    background: var(--color-bg-alt);
    color: var(--color-text-primary);
    border-color: var(--color-text-light);
}

.btn-form-next {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.75rem;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
}

.btn-form-next:hover {
    background: var(--color-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.3);
}

/* -- Benefits Card (sidebar) -- */
.benefits-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    position: sticky;
    top: calc(var(--nav-height) + 2rem);
}

.benefits-card-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.25rem;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.benefit-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-success-rgb), 0.1);
    color: var(--color-success);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.benefit-text {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.benefit-text strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* -- Trust Signals -- */
.trust-signals {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.trust-signal {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.trust-signal-icon {
    font-size: 1rem;
    flex-shrink: 0;
}


/* ----------------------------------------------------------
   13. FOOTER (.site-footer)
   ---------------------------------------------------------- */
.footer-accent-line {
    height: 3px;
    background: linear-gradient(90deg, #cc0a8b, #2675ea 50%, #fd8300);
}

.site-footer {
    background: var(--color-bg-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 0;
}

.site-footer .website-container {
    padding-top: 4.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3.5rem;
}

/* -- Footer Brand -- */
.footer-brand {
    max-width: 300px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.footer-logo-img {
    height: 34px;
    width: auto;
}

.footer-logo-text {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
}

.footer-brand-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.25rem;
}

/* -- Footer Social -- */
.footer-social {
    display: flex;
    gap: 0.65rem;
}

.footer-social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
}

.footer-social-link:hover {
    background: var(--gradient-consultancy);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(204, 10, 139, 0.3);
}

/* -- Footer Link Groups -- */
.footer-links-group h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 0.75rem;
}

.footer-links-group h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--gradient-consultancy);
    border-radius: 1px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-link {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    transition: color var(--transition-base), padding-left var(--transition-base);
}

.footer-link:hover {
    color: #ff55a2;
    padding-left: 4px;
}

/* -- Footer Bottom -- */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copyright {
    font-size: 0.825rem;
    color: rgba(255, 255, 255, 0.35);
}

.footer-legal-links {
    display: flex;
    gap: 1.5rem;
}

.footer-legal-link {
    font-size: 0.825rem;
    color: rgba(255, 255, 255, 0.35);
    transition: color var(--transition-base);
}

.footer-legal-link:hover {
    color: rgba(255, 255, 255, 0.65);
}

/* -- Footer Newsletter -- */
.footer-newsletter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 0;
    margin-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-newsletter-content h4 {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.footer-newsletter-content p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-newsletter-btn {
    padding: 0.75rem 2rem;
    background: var(--gradient-consultancy);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-family: var(--font-primary);
    transition: opacity var(--transition-base), transform var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.footer-newsletter-btn i {
    margin-right: 6px;
}

.footer-newsletter-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* -- Newsletter Modal -- */
/* -- Newsletter Promo Popup -- */
.nl-promo {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1.25rem 1.5rem;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transform: translateY(120%) scale(0.95);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    pointer-events: none;
}

.nl-promo.visible {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.nl-promo-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: var(--color-text-light);
    font-size: 0.85rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.nl-promo-close:hover {
    background: var(--color-bg-alt);
}

.nl-promo-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-purple));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.nl-promo-content strong {
    display: block;
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: 0.2rem;
}

.nl-promo-content p {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0;
}

.nl-promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    align-self: flex-start;
}

.nl-promo-btn:hover {
    background: var(--color-accent-purple);
    transform: translateY(-1px);
}

@media (max-width: 480px) {
    .nl-promo {
        right: 12px;
        left: 12px;
        bottom: 12px;
        max-width: none;
    }
}

/* -- Calendly Booking Modal -- */
.calendly-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.calendly-modal.open {
    opacity: 1;
    visibility: visible;
}

.calendly-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.calendly-modal-container {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    width: 90vw;
    max-width: 780px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s ease;
}

.calendly-modal.open .calendly-modal-container {
    transform: scale(1) translateY(0);
}

.calendly-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--color-text-light);
    transition: background 0.2s ease;
}

.calendly-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.calendly-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
}

.calendly-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.calendly-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.calendly-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.calendly-header p {
    font-size: 0.78rem;
    color: var(--color-text-light);
    margin: 0;
}

.calendly-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 380px;
}

.calendly-info {
    padding: 1.25rem;
    border-right: 1px solid #e2e8f0;
    background: #f8fafc;
}

.calendly-info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    padding: 0.35rem 0;
}

.calendly-info-item i {
    color: var(--color-primary);
    width: 16px;
    text-align: center;
    font-size: 0.8rem;
}

.calendly-description {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.calendly-picker {
    padding: 1.25rem;
}

.calendly-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.calendly-month-nav h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.calendly-nav-btn {
    background: none;
    border: 1px solid #e2e8f0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.calendly-nav-btn:hover {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb, 30, 64, 175), 0.04);
}

.calendly-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 0.5rem;
}

.calendly-weekdays span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    padding: 0.3rem 0;
}

.calendly-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendly-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.82rem;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    cursor: default;
    transition: background 0.15s ease, color 0.15s ease;
}

.calendly-day.available {
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
}

.calendly-day.available:hover {
    background: rgba(var(--color-primary-rgb, 30, 64, 175), 0.08);
}

.calendly-day.selected {
    background: var(--color-primary);
    color: #ffffff;
}

.calendly-day.empty {
    visibility: hidden;
}

.calendly-day.past {
    color: #cbd5e1;
}

.calendly-times h4 {
    font-size: 0.85rem;
    color: var(--color-text-primary);
    margin: 1rem 0 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.calendly-time-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.calendly-time-slot {
    padding: 0.5rem;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.calendly-time-slot:hover {
    background: var(--color-primary);
    color: #ffffff;
}

/* -- Calendly Form -- */
.calendly-form {
    padding: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.calendly-form h4 {
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.calendly-form-slot {
    font-size: 0.85rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

.calendly-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.calendly-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.calendly-field:nth-child(n+3) {
    grid-column: span 1;
}

.calendly-field:last-child {
    grid-column: 1 / -1;
}

.calendly-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.calendly-field input,
.calendly-field textarea {
    padding: 0.55rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.2s ease;
}

.calendly-field input:focus,
.calendly-field textarea:focus {
    border-color: var(--color-primary);
}

.calendly-confirm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.7rem 1.75rem;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.calendly-confirm-btn:hover {
    background: var(--color-accent-purple);
    transform: translateY(-1px);
}

/* -- Calendly Success -- */
.calendly-success {
    text-align: center;
    padding: 3rem 2rem;
}

.calendly-success-icon {
    font-size: 3rem;
    color: #22c55e;
    margin-bottom: 1rem;
}

.calendly-success h3 {
    font-size: 1.3rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.calendly-success p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.calendly-success-note {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.calendly-done-btn {
    margin-top: 1.25rem;
    padding: 0.6rem 2rem;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.calendly-done-btn:hover {
    background: var(--color-accent-purple);
}

@media (max-width: 768px) {
    .calendly-body {
        grid-template-columns: 1fr;
    }

    .calendly-info {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .calendly-form-fields {
        grid-template-columns: 1fr;
    }

    .calendly-time-slots {
        grid-template-columns: repeat(2, 1fr);
    }
}

.newsletter-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.25s ease;
}

.newsletter-modal {
    background: #ffffff;
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
    position: relative;
}

.newsletter-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2;
}

.newsletter-modal-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.newsletter-modal-header {
    background: linear-gradient(135deg, var(--color-primary), #1a1254);
    padding: 2rem 2rem 1.5rem;
    text-align: center;
    color: #ffffff;
}

.newsletter-modal-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.4rem;
}

.newsletter-modal-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.newsletter-modal-tagline {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

.newsletter-modal-body {
    padding: 1.5rem 2rem 2rem;
}

.newsletter-modal-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.newsletter-benefit {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
}

.newsletter-benefit i {
    color: var(--color-primary);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.newsletter-benefit strong {
    color: #111827;
}

.newsletter-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.newsletter-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.newsletter-form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.newsletter-form-group label i {
    margin-right: 4px;
    color: var(--color-primary);
    font-size: 0.75rem;
}

.newsletter-form-group input {
    padding: 0.65rem 0.9rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: var(--font-primary);
    transition: border-color 0.2s;
}

.newsletter-form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(48, 36, 115, 0.1);
}

.newsletter-modal-submit {
    padding: 0.75rem 1.5rem;
    background: var(--gradient-consultancy);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-primary);
    transition: opacity 0.2s, transform 0.15s;
    margin-top: 0.25rem;
}

.newsletter-modal-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.newsletter-modal-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.newsletter-modal-privacy {
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: center;
    margin: 0.5rem 0 0;
}

.newsletter-modal-privacy i {
    margin-right: 3px;
}

.newsletter-modal-privacy a {
    color: var(--color-primary);
    text-decoration: underline;
}

.newsletter-modal-preview-btn {
    display: block;
    text-align: center;
    margin: 16px 0 8px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(48, 36, 115, 0.08);
    border: 2px solid var(--color-primary);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.newsletter-modal-preview-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

.newsletter-modal-preview-btn i {
    margin-right: 6px;
}


/* ----------------------------------------------------------
   14. UTILITY CLASSES
   ---------------------------------------------------------- */

/* -- Section Badge -- */
.section-badge {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.06);
    border: 1px solid rgba(var(--color-primary-rgb), 0.12);
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
}

/* -- Section Heading -- */
.section-heading {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.25;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.section-subheading {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    line-height: 1.75;
    max-width: 600px;
    margin: 0 auto 40px;
}

/* -- Buttons -- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 2rem;
    background: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-base),
                transform var(--transition-fast),
                box-shadow var(--transition-base);
}

.btn-primary:hover {
    background: var(--color-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.3);
    color: #ffffff;
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 2rem;
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-fast);
}

.btn-secondary:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-text-light);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(0);
}

.btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 2rem;
    background: #ffffff;
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-base),
                transform var(--transition-fast),
                box-shadow var(--transition-base);
}

.btn-white:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* -- Gold Text -- */
.gold-text {
    background: var(--gradient-consultancy);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-headline .gold-text {
    background: var(--gradient-training);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* -- Text Utilities -- */
.text-center {
    text-align: center;
}

.text-white {
    color: #ffffff;
}

/* -- Fade-in Animation Class -- */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.fade-in-up:nth-child(1) { transition-delay: 0ms; }
.fade-in-up:nth-child(2) { transition-delay: 100ms; }
.fade-in-up:nth-child(3) { transition-delay: 200ms; }
.fade-in-up:nth-child(4) { transition-delay: 300ms; }
.fade-in-up:nth-child(5) { transition-delay: 400ms; }
.fade-in-up:nth-child(6) { transition-delay: 500ms; }

/* -- Spacing -- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }


/* ----------------------------------------------------------
   15. KEYFRAME ANIMATIONS
   ---------------------------------------------------------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-14px);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes bounceDown {
    0%, 100% {
        transform: rotate(45deg) translateY(0);
    }
    50% {
        transform: rotate(45deg) translateY(6px);
    }
}

@keyframes shimmer {
    0% {
        box-shadow: 0 4px 14px rgba(var(--color-accent-gold-rgb), 0.25);
    }
    50% {
        box-shadow: 0 4px 24px rgba(var(--color-accent-gold-rgb), 0.4);
    }
    100% {
        box-shadow: 0 4px 14px rgba(var(--color-accent-gold-rgb), 0.25);
    }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ----------------------------------------------------------
   15b. INNER PAGE PATTERNS (Bridge Rules)
   ---------------------------------------------------------- */

/* -- Generic Section -- */
.section {
    padding: var(--section-padding) 0;
}

.section:nth-child(even) {
    background: var(--color-bg-alt);
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}

/* -- Inner Page Grids -- */
.overview-grid,
.features-grid,
.ai-highlights-grid,
.roi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.process-grid,
.delivery-grid,
.training-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.cqc-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* -- Inner Page Cards (Generic) -- */
.overview-card,
.process-card,
.delivery-card,
.training-type-card,
.ai-highlight-card,
.roi-card,
.included-feature {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.overview-card:hover,
.process-card:hover,
.delivery-card:hover,
.training-type-card:hover,
.ai-highlight-card:hover,
.roi-card:hover,
.included-feature:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(var(--color-primary-rgb), 0.2);
}

/* -- Card Icons -- */
.overview-icon,
.process-icon,
.feature-icon,
.delivery-icon,
.training-type-icon,
.ai-highlight-icon,
.roi-icon,
.included-feature-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08), rgba(81, 202, 255, 0.1));
    border-radius: var(--radius-md);
    font-size: 1.35rem;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}

/* -- Card Headings & Text -- */
.overview-card h3,
.process-card h3,
.delivery-card h3,
.training-type-card h3,
.ai-highlight-card h3,
.roi-card h3,
.included-feature h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.65rem;
    line-height: 1.3;
}

.overview-card p,
.process-card p,
.delivery-card p,
.training-type-card p,
.ai-highlight-card p,
.roi-card p,
.included-feature p {
    font-size: 0.925rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* -- Process Numbers -- */
.process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: 1.25rem;
}

/* -- CQC Framework -- */
.cqc-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.cqc-safe .cqc-icon { background: rgba(var(--color-teal-rgb), 0.1); color: var(--color-teal); }
.cqc-effective .cqc-icon { background: rgba(var(--color-success-rgb), 0.1); color: var(--color-success); }
.cqc-caring .cqc-icon { background: rgba(253, 131, 0, 0.1); color: #fd8300; }
.cqc-responsive .cqc-icon { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.cqc-well-led .cqc-icon { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); }

.cqc-checklist {
    margin-top: 0.75rem;
}

.cqc-checklist li {
    position: relative;
    padding: 0.25rem 0 0.25rem 1.25rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.cqc-checklist li i {
    position: absolute;
    left: 0;
    top: 0.45rem;
    font-size: 0.7rem;
    color: var(--color-success);
}

/* -- Training Topics -- */
.training-topics li {
    position: relative;
    padding: 0.2rem 0 0.2rem 1rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.training-topics li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fd8300;
}

/* ----------------------------------------------------------
   PILLARS SECTION
   ---------------------------------------------------------- */
.pillars-section {
    background: var(--color-bg);
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.pillar-card {
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem 2rem;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.pillar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.pillar-number {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 2.5rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: rgba(0, 0, 0, 0.2);
    line-height: 1;
}

.pillar-icon-wrap {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-purple));
    color: #ffffff;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}

.pillar-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.pillar-card > p {
    font-size: 0.925rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 1.25rem;
}

.pillar-highlight {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    background: rgba(var(--color-primary-rgb, 30, 64, 175), 0.04);
    border: 1px solid rgba(var(--color-primary-rgb, 30, 64, 175), 0.1);
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
}

.pillar-highlight-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #ffffff;
    border-radius: 50%;
    font-size: 1rem;
}

.pillar-highlight-content strong {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.pillar-highlight-content p {
    font-size: 0.825rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

.pillar-delivery-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.pillar-delivery-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.pillar-delivery-item i {
    color: var(--color-accent-gold);
    font-size: 0.85rem;
}

.pillar-demo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1.5rem;
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast);
    margin-bottom: 1.25rem;
}

.pillar-demo-btn:hover {
    background: var(--color-primary);
    color: #ffffff;
    transform: translateY(-2px);
}

.pillar-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pillar-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.pillar-features li i {
    color: var(--color-success);
    font-size: 0.75rem;
}

/* ----------------------------------------------------------
   PILLAR MODALS
   ---------------------------------------------------------- */
.pillar-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pillar-modal.open {
    opacity: 1;
    visibility: visible;
}

.pillar-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.pillar-modal-container {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    width: 90vw;
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s ease;
}

.pillar-modal.open .pillar-modal-container {
    transform: scale(1) translateY(0);
}

.pillar-modal-wide {
    max-width: 960px;
}

.pillar-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--color-primary);
    color: #ffffff;
}

.pillar-modal-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pillar-modal-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
}

.avatar-status {
    font-size: 0.7rem;
    opacity: 0.8;
}

.avatar-status i {
    font-size: 0.45rem;
    color: #22c55e;
    margin-right: 4px;
}

.avatar-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.pillar-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.pillar-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* -- Chat Interface -- */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 300px;
    max-height: 400px;
    background: #f8fafc;
}

.chat-message {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    max-width: 88%;
}

.chat-message-bot {
    align-self: flex-start;
}

.chat-message-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    background: var(--color-primary);
    color: #ffffff;
}

.chat-message-user .chat-avatar {
    background: var(--color-accent-gold);
}

.chat-bubble {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.6;
}

.chat-message-bot .chat-bubble {
    background: #ffffff;
    color: var(--color-text-primary);
    border: 1px solid #e2e8f0;
    border-top-left-radius: 4px;
}

.chat-message-user .chat-bubble {
    background: var(--color-primary);
    color: #ffffff;
    border-top-right-radius: 4px;
}

.chat-bubble p {
    margin: 0 0 0.5rem;
}

.chat-bubble p:last-child {
    margin-bottom: 0;
}

.chat-bubble ul {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.chat-bubble ul li {
    font-size: 0.825rem;
    color: var(--color-text-secondary);
    padding: 0.15rem 0;
}

.chat-message-user .chat-bubble ul li {
    color: rgba(255, 255, 255, 0.85);
}

.chat-input-area {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

.chat-input {
    flex: 1;
    padding: 0.65rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.chat-input:focus {
    border-color: var(--color-primary);
}

.chat-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.chat-send:hover {
    background: var(--color-accent-purple);
}

.chat-demo-notice {
    padding: 0.6rem 1.25rem;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
    font-size: 0.75rem;
    color: #92400e;
    text-align: center;
}

.chat-demo-notice i {
    margin-right: 4px;
}

.chat-typing {
    display: flex;
    gap: 4px;
    padding: 0.75rem 1rem;
}

.chat-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    animation: chatTyping 1.4s ease-in-out infinite;
}

.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatTyping {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* -- Inspector Intro -- */
.inspector-intro {
    text-align: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border-bottom: 1px solid #e2e8f0;
}

.inspector-avatar-large {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e3a5f, #2563eb);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.25);
}

.inspector-intro h3 {
    font-size: 1.1rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.inspector-intro p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* -- e-Learning Demo -- */
.elearning-demo {
    display: grid;
    grid-template-columns: 260px 1fr;
    flex: 1;
    overflow: hidden;
    max-height: 520px;
}

.elearning-sidebar {
    background: #1e293b;
    color: #ffffff;
    overflow-y: auto;
    padding: 1rem 0;
}

.elearning-progress-overall {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1rem;
    border-bottom: 1px solid #334155;
    margin-bottom: 0.75rem;
}

.elearning-progress-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #334155;
    border-top-color: var(--color-accent-gold);
    border-right-color: var(--color-accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.elearning-progress-circle span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-accent-gold);
}

.elearning-progress-overall strong {
    display: block;
    font-size: 0.8rem;
}

.elearning-progress-overall p {
    font-size: 0.7rem;
    color: #94a3b8;
    margin: 0;
}

.elearning-nav-section {
    margin-bottom: 0.5rem;
}

.elearning-nav-section h4 {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    padding: 0.5rem 1rem 0.35rem;
}

.elearning-nav-section h4 i {
    margin-right: 6px;
    font-size: 0.65rem;
}

.elearning-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    font-size: 0.78rem;
    color: #cbd5e1;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
}

.elearning-nav-item:hover {
    background: #334155;
}

.elearning-nav-item.active {
    background: rgba(253, 131, 0, 0.15);
    color: var(--color-accent-gold);
    border-left: 3px solid var(--color-accent-gold);
}

.elearning-nav-item.completed i {
    color: #22c55e;
}

.elearning-nav-item.locked {
    color: #475569;
    cursor: default;
}

.elearning-nav-item.locked:hover {
    background: transparent;
}

.elearning-content {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    background: #ffffff;
}

.elearning-breadcrumb {
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-bottom: 0.75rem;
}

.elearning-breadcrumb i {
    font-size: 0.55rem;
    margin: 0 4px;
}

.elearning-content h2 {
    font-size: 1.2rem;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.elearning-video-wrap {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: #0f172a;
}

.elearning-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.elearning-lesson-content h4 {
    font-size: 0.95rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.elearning-lesson-content ul {
    padding-left: 1.25rem;
    margin-bottom: 1.25rem;
}

.elearning-lesson-content ul li {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    padding: 0.15rem 0;
}

.elearning-knowledge-check {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.elearning-knowledge-check h4 {
    color: #0369a1;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.elearning-knowledge-check h4 i {
    margin-right: 6px;
}

.elearning-knowledge-check > p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.elearning-options {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.elearning-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.elearning-option:hover {
    border-color: var(--color-primary);
    background: #eef2ff;
}

.elearning-option input[type="radio"] {
    accent-color: var(--color-primary);
}

.elearning-actions {
    display: flex;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
}

.elearning-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease, transform 0.15s ease;
}

.elearning-btn-primary {
    background: var(--color-accent-gold);
    color: #ffffff;
}

.elearning-btn-primary:hover {
    transform: translateY(-1px);
}

.elearning-btn-secondary {
    background: #e2e8f0;
    color: var(--color-text-secondary);
}

.elearning-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* -- Pillar Modal Responsive -- */
@media (max-width: 768px) {
    .pillars-grid {
        grid-template-columns: 1fr;
    }

    .pillar-modal-wide {
        max-width: 95vw;
    }

    .elearning-demo {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .elearning-sidebar {
        max-height: 200px;
    }
}

/* -- AI Feature List -- */
.ai-feature-list li {
    padding: 0.3rem 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.ai-feature-list li i {
    color: var(--color-success);
    margin-right: 0.5rem;
    font-size: 0.8rem;
}

/* -- AI Highlight Header -- */
.ai-highlight-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ai-highlight-header h3 {
    margin-bottom: 0;
}

/* -- ROI Card Stats -- */
.roi-stat {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.roi-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.roi-detail {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* -- Two-Column Layouts -- */
.who-delivers-grid,
.mission-grid,
.included-grid,
.overview-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.who-delivers-content p,
.mission-content p,
.included-content p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* -- Credentials List -- */
.credentials-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.credentials-list li:last-child {
    border-bottom: none;
}

.credentials-list li i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    margin-top: 2px;
}

.credentials-list li strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.credentials-list li span {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* -- Who Delivers Stats -- */
.who-delivers-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.who-delivers-stats .stat-card {
    text-align: center;
    padding: 1.75rem 1.25rem;
}

/* -- Mission Visual -- */
.mission-quote {
    position: relative;
    padding: 2rem 2rem 2rem 2.5rem;
    border-left: 4px solid var(--color-primary);
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.03), transparent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-bottom: 2rem;
}

.mission-quote i {
    color: var(--color-primary);
    opacity: 0.4;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.mission-quote blockquote {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.7;
    color: var(--color-text-primary);
}

.mission-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.mission-stat {
    text-align: center;
    padding: 1.5rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
}

.mission-stat-number {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.2;
}

.mission-stat-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

/* -- Team Credentials -- */
.team-credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.team-credentials span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    background: rgba(var(--color-accent-gold-rgb), 0.08);
    color: var(--color-accent-gold);
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: var(--radius-full);
}

.team-credentials span i {
    font-size: 0.65rem;
}

.avatar-initials {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
}

/* -- Demo Video Banner -- */
.demo-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 2.5rem 0;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #1a1254 0%, #302473 60%, #3d2f8a 100%);
    border-radius: 12px;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.demo-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    transition: left 0.6s ease;
}

.demo-banner:hover::before {
    left: 100%;
}

.demo-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(48, 36, 115, 0.4);
    color: #ffffff;
}

.demo-banner-icon {
    flex-shrink: 0;
    font-size: 2.5rem;
    color: var(--color-accent-gold);
    animation: demoPulse 2s ease-in-out infinite;
}

@keyframes demoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.demo-banner-text {
    flex: 1;
}

.demo-banner-text h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.demo-banner-text p {
    font-size: 0.9rem;
    opacity: 0.85;
    line-height: 1.5;
    margin: 0;
}

.demo-banner-cta {
    flex-shrink: 0;
}

.demo-banner-cta span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    background: var(--color-accent-gold);
    color: #ffffff;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.demo-banner:hover .demo-banner-cta span {
    background: var(--color-accent-gold-light);
}

@media (max-width: 768px) {
    .demo-banner {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem 1.5rem;
        gap: 1rem;
    }

    .demo-banner-icon {
        font-size: 2rem;
    }

    .demo-banner-text h3 {
        font-size: 1.05rem;
    }
}

/* -- Training Flow -- */
.training-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.training-flow-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    transition: background var(--transition-base);
}

.training-flow-step.active {
    background: rgba(var(--color-accent-gold-rgb), 0.08);
    border: 1px solid rgba(var(--color-accent-gold-rgb), 0.2);
}

.training-flow-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
}

.training-flow-step.active .training-flow-icon {
    background: var(--color-accent-gold);
    color: #ffffff;
    border-color: var(--color-accent-gold);
}

.training-flow-content h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.training-flow-content p {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.training-flow-arrow {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

/* -- Included Features Grid -- */
.included-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.included-feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.included-feature-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.included-feature-content h4 {
    margin-bottom: 0.35rem;
}

/* -- Brolly Logo Large -- */
.brolly-logo-large {
    max-width: 200px;
    margin: 0 auto 1rem;
}

.brolly-logo-tagline {
    display: block;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-accent-gold);
}

.overview-intro-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

/* -- Device Showcase Carousel -- */
.device-showcase {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    position: sticky;
    top: 2rem;
}

.monitor-frame {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.monitor-frame:hover {
    transform: translateY(-4px);
}

.monitor-img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    position: relative;
    z-index: 2;
}

.monitor-screen {
    position: absolute;
    top: 4%;
    left: 3%;
    right: 2%;
    bottom: 34%;
    z-index: 1;
    overflow: hidden;
    background: #f1f5f9;
}

.device-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.device-slide.active {
    opacity: 1;
}

.device-indicators {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 4px;
}

.device-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    padding: 0;
}

.device-indicator.active {
    background: var(--color-primary);
    transform: scale(1.25);
}

.device-indicator:hover:not(.active) {
    background: #94a3b8;
}

.device-hint {
    text-align: center;
    font-size: 0.7rem;
    color: var(--color-text-light);
    padding: 2px 0 0;
    margin: 0;
}

.device-hint i {
    margin-right: 4px;
}

/* -- Software Lightbox -- */
.software-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.software-lightbox.open {
    opacity: 1;
    visibility: visible;
}

.lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.software-lightbox.open .lightbox-img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: 500;
}

/* -- Inner Page CTA -- */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 2.25rem;
    background: var(--color-accent-gold);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: background var(--transition-base),
                transform var(--transition-fast),
                box-shadow var(--transition-base);
}

.btn-cta:hover {
    background: var(--color-accent-gold-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--color-accent-gold-rgb), 0.35);
    color: #ffffff;
}

.cta-reassurance {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cta-reassurance i {
    margin-right: 0.25rem;
}

/* -- Assessment Page Styles -- */
.assessment-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3rem;
    align-items: start;
}

.assessment-form-wrapper {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
}

.assessment-form-header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 0.35rem;
}

.assessment-form-header p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

.assessment-progress {
    margin-bottom: 2rem;
}

.assessment-progress.hidden {
    display: none;
}

.assessment-progress-bar {
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.assessment-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #302473, #3d2f8a);
    border-radius: 3px;
    transition: width var(--transition-base);
    width: 14.28%;
}

.assessment-progress-text {
    font-size: 0.8rem;
    color: var(--color-text-light);
    font-weight: 500;
}

.assessment-step {
    display: none;
}

.assessment-step.active {
    display: block;
    animation: fadeInUp 0.4s ease-out;
}

.assessment-question {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.assessment-question h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.4;
    padding-top: 0.25rem;
}

.assessment-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.assessment-option {
    cursor: pointer;
    min-height: 150px;
}

.assessment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.option-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    transition: border-color var(--transition-base),
                background var(--transition-base),
                color var(--transition-base);
}

.option-card i {
    font-size: 1.1rem;
    color: var(--color-text-light);
    transition: color var(--transition-base);
}

.assessment-option:hover .option-card {
    border-color: rgba(var(--color-primary-rgb), 0.3);
    background: rgba(var(--color-primary-rgb), 0.02);
}

.assessment-option input:checked + .option-card {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.04);
    color: var(--color-text-primary);
    font-weight: 500;
}

.assessment-option input:checked + .option-card i {
    color: var(--color-primary);
}

/* CQC Rating-specific colours */
.assessment-option input[value="Outstanding"]:checked + .option-card {
    border-color: #244598;
    background: rgba(36, 69, 152, 0.06);
}
.assessment-option input[value="Outstanding"]:checked + .option-card i {
    color: #244598;
}

.assessment-option input[value="Good"]:checked + .option-card {
    border-color: #54833B;
    background: rgba(84, 131, 59, 0.06);
}
.assessment-option input[value="Good"]:checked + .option-card i {
    color: #54833B;
}

.assessment-option input[value="Requires Improvement"]:checked + .option-card {
    border-color: #F3A839;
    background: rgba(243, 168, 57, 0.06);
}
.assessment-option input[value="Requires Improvement"]:checked + .option-card i {
    color: #F3A839;
}

.assessment-option input[value="Inadequate"]:checked + .option-card {
    border-color: #BA3526;
    background: rgba(186, 53, 38, 0.06);
}
.assessment-option input[value="Inadequate"]:checked + .option-card i {
    color: #BA3526;
}

.assessment-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.btn-assessment-next,
.btn-assessment-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.75rem;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
}

.btn-assessment-next:hover,
.btn-assessment-submit:hover {
    background: var(--color-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.3);
}

.btn-assessment-prev {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.5rem;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}

.btn-assessment-prev:hover {
    background: var(--color-bg-alt);
    color: var(--color-text-primary);
}

/* -- Contact Form Fields -- */
.contact-form-fields {
    margin-bottom: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.35rem;
}

.form-group label i {
    margin-right: 0.35rem;
    color: var(--color-text-light);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-primary);
    font-size: 0.925rem;
    color: var(--color-text-primary);
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.form-group-full {
    grid-column: 1 / -1;
}

/* -- Assessment Success -- */
.assessment-success {
    text-align: center;
    padding: 2rem 0;
}

.success-icon {
    font-size: 4rem;
    color: var(--color-success);
    margin-bottom: 1.5rem;
}

.assessment-success h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.assessment-success p {
    color: var(--color-text-secondary);
    max-width: 450px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.success-next-steps {
    text-align: left;
    max-width: 400px;
    margin: 0 auto 2rem;
    padding: 1.5rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
}

.success-next-steps h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.success-next-steps li {
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.success-next-steps li i {
    color: var(--color-primary);
    margin-right: 0.5rem;
    width: 16px;
}

.btn-assessment-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: background var(--transition-base);
}

.btn-assessment-home:hover {
    background: var(--color-primary-light);
    color: #ffffff;
}

/* -- Assessment Benefits Column -- */
.assessment-benefits-column {
    position: sticky;
    top: calc(var(--nav-height) + 2rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.assessment-benefits-column .benefits-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.25rem;
}

.assessment-benefits-column .benefits-card h3 i {
    color: var(--color-primary);
    margin-right: 0.5rem;
}

.assessment-benefits-column .benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.assessment-benefits-column .benefits-list li > i {
    color: var(--color-success);
    margin-top: 3px;
    flex-shrink: 0;
}

.assessment-benefits-column .benefits-list li strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    margin-bottom: 0.15rem;
}

.assessment-benefits-column .benefits-list li span {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

/* -- Programme Preview Mini -- */
.programme-preview {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.programme-preview h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.programme-steps-mini {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.programme-step-mini {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.step-mini-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: #ffffff;
}

.programme-step-mini:nth-child(1) .step-mini-icon {
    background: var(--gradient-consultancy);
}

.programme-step-mini:nth-child(2) .step-mini-icon {
    background: var(--gradient-software);
}

.programme-step-mini:nth-child(3) .step-mini-icon {
    background: var(--gradient-training);
}

.step-mini-content strong {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-primary);
}

.step-mini-content span {
    font-size: 0.72rem;
    color: var(--color-text-light);
}

/* -- Shake Animation -- */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* -- Trust Signal Icon -- */
.trust-signal-icon {
    font-size: 1rem;
    flex-shrink: 0;
}


/* -- Provider Lookup (Assessment page simplified) -- */
.provider-lookup-centered {
    max-width: 640px;
    margin: 0 auto;
}

.provider-lookup-centered .assessment-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.provider-lookup-centered .option-card {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem 1rem;
    gap: 0.5rem;
    min-height: 160px;
    justify-content: center;
}

.provider-lookup-centered .option-card i {
    font-size: 1.4rem;
}

.provider-lookup-centered .option-card > span:not(.option-card-sub) {
    font-weight: 600;
    font-size: 0.9rem;
}

.option-card-sub {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-light);
    font-weight: 400;
    line-height: 1.3;
    margin-top: 0.1rem;
}

.assessment-option input:checked + .option-card .option-card-sub {
    color: var(--color-text-secondary);
}

.provider-input-group {
    margin-top: 0.5rem;
}

.provider-input-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.provider-input-row {
    display: flex;
    gap: 0.75rem;
}

.provider-input {
    flex: 1;
    padding: 0.8rem 1.15rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-text-primary);
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.provider-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.provider-input::placeholder {
    color: var(--color-text-light);
}

.provider-input-hint {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-top: 0.5rem;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .provider-lookup-centered .assessment-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .provider-lookup-centered .assessment-options {
        grid-template-columns: 1fr;
    }

    .provider-input-row {
        flex-direction: column;
    }
}


/* ----------------------------------------------------------
   CONTACT PAGE
   ---------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    align-items: start;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.contact-form .form-group-full {
    grid-column: 1 / -1;
}

.contact-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.4rem;
}

.contact-form label i {
    color: var(--color-primary);
    margin-right: 0.3rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    color: var(--color-text-primary);
    background: var(--color-bg);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    background: var(--gradient-consultancy);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-family: var(--font-primary);
    transition: transform var(--transition-fast), box-shadow var(--transition-base), opacity var(--transition-base);
    align-self: flex-start;
}

.contact-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(204, 10, 139, 0.3);
    opacity: 0.9;
}

.contact-details-card {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    position: sticky;
    top: calc(var(--nav-height) + 2rem);
}

.contact-details-card h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
}

.contact-details-card h3 i {
    color: var(--color-primary);
    margin-right: 0.4rem;
}

.contact-detail {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.contact-detail > i {
    font-size: 1rem;
    color: var(--color-primary);
    margin-top: 0.15rem;
}

.contact-detail strong {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-primary);
    margin-bottom: 0.15rem;
}

.contact-detail a,
.contact-detail span {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.contact-detail a:hover {
    color: var(--color-primary);
}

.contact-cta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.contact-cta p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
}

.btn-cta-small {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    background: var(--gradient-consultancy);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast), opacity var(--transition-base);
}

.btn-cta-small:hover {
    transform: translateY(-1px);
    opacity: 0.9;
    color: #ffffff;
}


/* ----------------------------------------------------------
   LANDING PAGE ENHANCEMENTS
   ---------------------------------------------------------- */

/* Animated gradient canvas on hero */
.hero-section #gradient-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-section #gradient-canvas.isLoaded {
    opacity: 0.4;
}

/* Programme step cards - coloured hover glow */
.programme-step:nth-child(1):hover {
    box-shadow: 0 20px 40px rgba(204, 10, 139, 0.1), var(--shadow-xl);
}

.programme-step:nth-child(2):hover {
    box-shadow: 0 20px 40px rgba(38, 117, 234, 0.1), var(--shadow-xl);
}

.programme-step:nth-child(3):hover {
    box-shadow: 0 20px 40px rgba(253, 131, 0, 0.1), var(--shadow-xl);
}


/* ----------------------------------------------------------
   16. RESPONSIVE DESIGN
   ---------------------------------------------------------- */

/* -- Tablet (max-width: 1024px) -- */
@media (max-width: 1024px) {
    :root {
        --section-padding: 4.5rem;
        --nav-height: 72px;
    }

    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }

    .hero-headline {
        font-size: clamp(2rem, 4vw, 2.75rem);
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }

    .programme-road {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .programme-road::before {
        left: calc(16.66% + 0.75rem);
        right: calc(16.66% + 0.75rem);
    }

    .roi-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .credibility-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 2rem;
    }

    .assessment-container {
        grid-template-columns: 1fr 320px;
        gap: 2rem;
    }

    .content-grid.four-col {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid,
    .delivery-grid,
    .training-types-grid,
    .values-grid,
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cqc-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .assessment-layout {
        grid-template-columns: 1fr 320px;
        gap: 2rem;
    }
}

/* -- Tablet Small (max-width: 900px) -- */
@media (max-width: 900px) {
    .hero-stacked {
        padding: 2rem 0 4rem;
    }

    .hero-steps-cards {
        gap: 0.75rem;
    }

    .hero-step-card {
        padding: 1.25rem 0.75rem 1rem;
    }

    .hero-step-desc {
        font-size: 0.72rem;
    }

    .assessment-container,
    .assessment-layout {
        grid-template-columns: 1fr;
    }

    .benefits-card,
    .assessment-benefits-column {
        position: static;
        order: -1;
    }

    .who-delivers-grid,
    .mission-grid,
    .included-grid,
    .overview-intro {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .training-flow {
        flex-direction: column;
    }

    .training-flow-arrow {
        transform: rotate(90deg);
    }

    .comparison-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .comparison-vs {
        margin: 0 auto;
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }
}

/* -- Mobile (max-width: 768px) -- */
@media (max-width: 768px) {
    :root {
        --section-padding: 3.5rem;
        --nav-height: 64px;
    }

    .website-container {
        padding: 0 1.25rem;
    }

    /* Nav Mobile */
    .nav-links {
        display: none;
    }

    .btn-cta-nav,
    .btn-login-nav {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .mobile-nav-overlay {
        display: block;
    }

    .nav-logo-text {
        font-size: 1.3rem;
    }

    /* Hero */
    .hero-section {
        min-height: auto;
        padding-top: calc(var(--nav-height) + 2rem);
        padding-bottom: 4rem;
    }

    .hero-stacked {
        padding: 1.5rem 0 2rem;
    }

    .hero-content-centered {
        margin-bottom: 1.5rem;
    }

    .hero-headline {
        font-size: clamp(1.85rem, 6vw, 2.5rem);
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-steps-cards {
        flex-direction: column;
        gap: 0.6rem;
    }

    .hero-step-card {
        flex-direction: row;
        padding: 1rem 1.25rem;
        text-align: left;
        gap: 1rem;
    }

    .hero-step-icon,
    .hero-step-avatar {
        width: 64px;
        height: 64px;
        min-width: 64px;
        margin-bottom: 0;
        font-size: 1rem;
    }

    .hero-step-number {
        display: none;
    }

    .hero-step-title {
        font-size: 0.95rem;
        margin-bottom: 0.15rem;
    }

    .hero-step-desc {
        font-size: 0.75rem;
        margin-bottom: 0.35rem;
    }

    .hero-step-badge {
        display: none;
    }

    .scroll-indicator {
        display: none;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-card {
        padding: 1.75rem 1.5rem;
    }

    /* Programme */
    .programme-road {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .programme-road::before {
        display: none;
    }

    .programme-step {
        padding: 2rem 1.5rem 1.5rem;
    }

    /* ROI */
    .roi-features {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .roi-quote {
        padding: 1.5rem 1.75rem;
    }

    /* Credibility */
    .credibility-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Content Grids */
    .content-grid.two-col,
    .content-grid.three-col,
    .content-grid.four-col,
    .overview-grid,
    .features-grid,
    .ai-highlights-grid,
    .roi-grid,
    .process-grid,
    .delivery-grid,
    .training-types-grid,
    .values-grid,
    .team-grid,
    .cqc-grid {
        grid-template-columns: 1fr;
    }

    /* Page Heroes */
    .page-hero {
        min-height: 30vh;
        padding: calc(var(--nav-height) + 2rem) 1.25rem 2.5rem;
    }

    .page-hero.has-gradient {
        min-height: 60vh;
        padding: calc(var(--nav-height) + 2.5rem) 0 2.5rem;
    }

    .page-hero.has-gradient .page-hero-content {
        padding: 0 1.25rem;
    }

    .page-hero h1 {
        font-size: clamp(1.65rem, 5vw, 2.25rem);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

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

    .newsletter-modal-body {
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .newsletter-modal-header {
        padding: 1.5rem 1.25rem 1.25rem;
    }

    /* Contact page */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-details-card {
        position: static;
    }

    /* Assessment */
    .assessment-form {
        padding: 1.75rem;
    }

    .progress-step-label {
        display: none;
    }

    /* Section Headings */
    .section-heading {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }

    .section-subheading {
        font-size: 1rem;
    }

    /* Testimonial */
    .testimonial-quote {
        font-size: clamp(1.05rem, 3vw, 1.25rem);
    }

    .testimonial-quote-mark {
        font-size: 4rem;
    }

    /* CTA */
    .cta-heading {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }

    .btn-cta-large {
        padding: 0.95rem 2.25rem;
        font-size: 1rem;
    }

    /* Timeline */
    .timeline::before {
        left: 18px;
    }

    .timeline-item {
        padding-left: 3rem;
    }

    .timeline-marker {
        left: 10px;
        width: 18px;
        height: 18px;
    }
}

/* -- Small Mobile (max-width: 480px) -- */
@media (max-width: 480px) {
    :root {
        --section-padding: 3rem;
    }

    .website-container {
        padding: 0 1rem;
    }

    .hero-headline {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .hero-actions {
        flex-direction: column;
        gap: 1rem;
    }

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

    .stat-number {
        font-size: 2.25rem;
    }

    .credibility-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .credibility-number {
        font-size: 2rem;
    }

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

    .footer-brand {
        grid-column: auto;
    }

    .mobile-nav-link {
        font-size: 1.35rem;
    }

    /* Assessment */
    .assessment-form,
    .assessment-form-wrapper {
        padding: 1.25rem;
    }

    .question-option,
    .option-card {
        padding: 0.85rem 1rem;
    }

    .form-actions,
    .assessment-nav {
        flex-direction: column;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .btn-form-back,
    .btn-form-next {
        width: 100%;
        justify-content: center;
    }

    /* Buttons */
    .btn-primary,
    .btn-secondary,
    .btn-cta-large {
        width: 100%;
        justify-content: center;
    }

    .comparison-old,
    .comparison-new {
        padding: 0.9rem 1rem;
        font-size: 0.85rem;
    }

    .contact-form .form-row {
        grid-template-columns: 1fr;
    }

    .roi-quote p {
        font-size: 1.05rem;
    }

    .cta-section {
        padding: 3.5rem 0;
    }
}

/* ----------------------------------------------------------
   17. PRINT STYLES
   ---------------------------------------------------------- */
@media print {
    .site-nav,
    .scroll-indicator,
    .mobile-nav-overlay,
    .nav-toggle,
    .cta-section,
    .footer-social {
        display: none !important;
    }

    .hero-section {
        min-height: auto;
        padding: 2rem 0;
        background: #ffffff !important;
        color: #000000 !important;
    }

    .hero-headline,
    .hero-subtitle {
        color: #000000 !important;
    }

    body.website-body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000000;
        background: #ffffff;
    }

    .content-section,
    .problem-section,
    .credibility-section {
        background: #ffffff !important;
        color: #000000 !important;
        padding: 1.5rem 0;
    }

    .fade-in-up {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ----------------------------------------------------------
   18. REDUCED MOTION
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

    .fade-in-up {
        opacity: 1;
        transform: none;
    }

    .hero-visual {
        animation: none;
    }

    .scroll-indicator {
        animation: none;
    }

    .scroll-indicator-chevron {
        animation: none;
    }

    .gsap-reveal {
        visibility: visible !important;
    }

    .scroll-progress {
        display: none !important;
    }
}

/* ============================================================
   GSAP & ANIMATION UTILITIES
   ============================================================ */

/* Scroll Progress Bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #51caff, #2675ea, #ff55a2, #cc0a8b, #fcd224, #fd8300);
    width: 0%;
    z-index: 10001;
    pointer-events: none;
}

/* Hero Line Wrappers (for GSAP staggered text reveals) */
.hero-line {
    display: block;
    overflow: hidden;
}

.hero-line-inner {
    display: block;
    font-size:46px;
}

/* Gradient Text Utility */
.gradient-text {
    background: linear-gradient(135deg, #ff55a2, #cc0a8b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Brolly 3-Colour Gradient Text */
.brolly-gradient-text {
    background: #cc0a8b;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* GSAP initial hidden state */
.gsap-reveal {
    visibility: hidden;
}

/* ============================================================
   REDESIGNED PROBLEM SECTION (left text + right stats)
   ============================================================ */
.problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.problem-grid .problem-content {
    text-align: left;
    max-width: none;
    margin: 0;
}

.problem-stats {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.problem-stat {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.problem-stat:last-child {
    border-bottom: none;
}

.problem-stat-number {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    min-width: 100px;
}

.problem-stat-text {
    padding-top: 0.25rem;
}

.problem-stat-label {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.problem-stat-desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .problem-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .problem-grid .problem-content {
        text-align: center;
    }
    .problem-stat {
        gap: 1rem;
    }
    .problem-stat-number {
        min-width: 80px;
        font-size: 2rem;
    }
}

/* ============================================================
   REDESIGNED COMPARISON / DIFFERENTIATOR (two columns)
   ============================================================ */
.diff-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}

.diff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.diff-column {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.diff-column-old {
    background: rgba(148, 120, 130, 0.04);
    border: 1px solid rgba(148, 120, 130, 0.15);
}

.diff-column-new {
    background: rgba(99, 148, 120, 0.05);
    border: 1px solid rgba(99, 148, 120, 0.18);
}

.diff-column-header {
    padding: 1.25rem 1.75rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.diff-column-old .diff-column-header {
    background: #9b8a91;
    color: #ffffff;
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.diff-column-old .diff-column-header i {
    color: #ffffff;
}

.diff-column-new .diff-column-header {
    background: var(--color-primary);
    color: #ffffff;
}

.diff-column-new .diff-column-header i {
    color: #ffffff;
}

.diff-item {
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.diff-item:last-child {
    border-bottom: none;
}

.diff-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

.diff-column-new .diff-item p {
    color: var(--color-text-primary);
}

@media (max-width: 768px) {
    .diff-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   REDESIGNED AI SECTION (dark, Stripe-style)
   ============================================================ */
.ai-section {
    position: relative;
    background: #100a2a;
    padding: 6rem 0;
    overflow: hidden;
}

.ai-section #ai-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.9;
}

.ai-section .website-container {
    position: relative;
    z-index: 2;
}

.ai-intro {
    max-width: 700px;
    margin-bottom: 4rem;
    padding-bottom: 3rem;
}

.ai-intro-text {
    font-family: var(--font-primary);
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}

.ai-intro-highlight {
    font-weight: 700;
    color: #ffffff;
}

.ai-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.ai-feature {
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}

.ai-feature:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-3px);
}

.ai-feature-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.ai-feature-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.6rem;
}

.ai-feature-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
}

@media (max-width: 768px) {
    .ai-section {
        padding: 4rem 0;
    }
    .ai-features {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .ai-intro {
        margin-bottom: 3rem;
    }
}

/* Page hero punchy styles - bright white last line for contrast */
.page-hero h1 .hero-line:last-of-type {
    color: #ffffff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

.page-hero .hero-subtitle {
    font-size: 1.15rem;
    font-weight: 400;
    opacity: 0.85;
    max-width: 560px;
    margin: 1rem auto 0;
    line-height: 1.7;
}


/* ============================================================
   ERROR PAGES (400, 401, 403, 404, 500, 503)
   ============================================================ */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0d0829 0%, #1a1254 35%, #302473 70%, #0d0829 100%);
    position: relative;
    overflow: hidden;
    padding: 2rem;
    font-family: 'Inter', system-ui, sans-serif;
}

.error-page::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 60%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(81, 202, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.error-page::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 50%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(204, 10, 139, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.error-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.5;
}

.error-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 560px;
}

.error-code {
    font-family: 'Inter', sans-serif;
    font-size: clamp(7rem, 18vw, 12rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #ff55a2, #cc0a8b, #8b5cf6, #51caff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.error-description {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.error-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.error-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ff55a2, #cc0a8b);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.error-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(204, 10, 139, 0.35);
}

.error-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.error-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.error-meta {
    margin-top: 3rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.18);
    font-family: 'Inter', sans-serif;
}

.error-meta code {
    font-family: 'SF Mono', 'Cascadia Code', monospace;
}

/* 503 Maintenance variant */
.error-page.is-maintenance {
    background: linear-gradient(145deg, #0d0829 0%, #1a1254 50%, #302473 100%);
}

.error-page.is-maintenance .error-code {
    background: linear-gradient(135deg, #fcd224, #fd8300, #ff55a2);
    -webkit-background-clip: text;
    background-clip: text;
}

.maintenance-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(252, 210, 36, 0.1);
    border: 1px solid rgba(252, 210, 36, 0.2);
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fcd224;
    margin-bottom: 2rem;
    font-family: 'Inter', sans-serif;
}

.maintenance-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fcd224;
    animation: maint-pulse 2s ease-in-out infinite;
}

@keyframes maint-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(252, 210, 36, 0.4); }
    50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(252, 210, 36, 0); }
}

.maintenance-eta {
    margin-top: 2rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Inter', sans-serif;
}

.maintenance-eta strong {
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 480px) {
    .error-actions {
        flex-direction: column;
    }
    .error-btn-primary,
    .error-btn-secondary {
        width: 100%;
        justify-content: center;
    }
}


/* ==============================================================
   ASSESSMENT PAGE - LEAD GENERATION FUNNEL
   ============================================================== */

/* -- Intro Section -- */
.assessment-intro-container {
    max-width: 760px;
    margin: 0 auto;
}

.assessment-intro-card {
    text-align: center;
    padding: 3rem 2.5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.assessment-intro-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1), rgba(204, 10, 139, 0.1));
    border-radius: var(--radius-lg);
    font-size: 1.75rem;
    color: var(--color-primary);
}

.assessment-intro-card h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin-bottom: 1rem;
}

.assessment-intro-subtitle {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    line-height: 1.75;
    max-width: 580px;
    margin: 0 auto 2.5rem;
}

.assessment-intro-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    text-align: left;
    margin-bottom: 2.5rem;
}

.assessment-intro-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
}

.intro-feature-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #ffffff;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    font-size: 0.9rem;
}

.assessment-intro-feature strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    margin-bottom: 0.2rem;
}

.assessment-intro-feature span {
    font-size: 0.8rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

.assessment-intro-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.assessment-intro-trust span {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.assessment-intro-trust i {
    margin-right: 0.3rem;
    color: var(--color-primary);
}

/* -- Funnel Progress -- */
.assessment-funnel-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2.5rem;
    padding: 1.25rem 0;
}

.funnel-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    opacity: 0.4;
    transition: opacity var(--transition-base);
}

.funnel-step.active,
.funnel-step.completed {
    opacity: 1;
}

.funnel-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background var(--transition-base), color var(--transition-base);
}

.funnel-step.active .funnel-step-dot {
    background: var(--color-primary);
    color: #ffffff;
}

.funnel-step.completed .funnel-step-dot {
    background: var(--color-success);
    color: #ffffff;
}

.funnel-step span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.funnel-step.active span {
    color: var(--color-primary);
}

.funnel-step.completed span {
    color: var(--color-success);
}

.funnel-step-line {
    width: 60px;
    height: 2px;
    background: var(--color-border);
    margin: 0 0.5rem;
    margin-bottom: 1.25rem;
}

/* -- Error Message -- */
.assessment-error {
    margin-top: 0.75rem;
    padding: 0.65rem 1rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-sm);
    color: var(--color-error);
    font-size: 0.85rem;
    font-weight: 500;
}

/* -- Modal System -- */
.brolly-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 22, 40, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn 0.25s ease-out;
}

.brolly-modal {
    position: relative;
    background: #ffffff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    animation: fadeInUp 0.35s ease-out;
}

.brolly-modal--report {
    max-width: 740px;
}

.brolly-modal--processing {
    max-width: 480px;
    text-align: center;
}

.brolly-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-text-light);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
    z-index: 10;
    border: none;
    cursor: pointer;
}

.brolly-modal-close:hover {
    background: var(--color-border);
    color: var(--color-text-primary);
}

.brolly-modal-header {
    padding: 2.5rem 2.5rem 1rem;
    text-align: center;
}

.brolly-modal-header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.brolly-modal-header p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.brolly-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
}

.brolly-modal-icon--info {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

.brolly-modal-icon--success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
}

.brolly-modal-body {
    padding: 0 2.5rem 1.5rem;
}

.brolly-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 2.5rem 2rem;
}

/* -- Provider Confirm Card -- */
.provider-confirm-card {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}

.provider-confirm-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.provider-confirm-details {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.provider-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.provider-detail-row i {
    color: var(--color-primary);
    width: 16px;
    flex-shrink: 0;
    margin-top: 3px;
}

.provider-detail-row strong {
    color: var(--color-text-primary);
}

/* -- Rating Badges -- */
.rating-badge {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
}

.rating-outstanding {
    background: rgba(36, 69, 152, 0.1);
    color: #244598;
}

.rating-good {
    background: rgba(84, 131, 59, 0.1);
    color: #54833B;
}

.rating-requires-improvement {
    background: rgba(243, 168, 57, 0.1);
    color: #d4940f;
}

.rating-inadequate {
    background: rgba(186, 53, 38, 0.1);
    color: #BA3526;
}

.rating-none,
.rating-not-rated {
    background: var(--color-bg-alt);
    color: var(--color-text-light);
}

/* -- Key Question Ratings -- */
.provider-key-ratings {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.provider-key-ratings h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.key-ratings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.key-rating-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #ffffff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.key-rating-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.key-rating-value {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-full);
}

/* -- Processing Modal -- */
.processing-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
}

.processing-spinner {
    position: absolute;
    inset: 0;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
}

.processing-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--color-primary);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.processing-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: left;
    padding: 1rem 0;
}

.processing-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--color-text-light);
    transition: color var(--transition-base), background var(--transition-base);
}

.processing-step.active {
    color: var(--color-text-primary);
    background: rgba(var(--color-primary-rgb), 0.04);
}

.processing-step.active i.fa-check-circle {
    color: var(--color-success);
}

.processing-step i {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* -- Report Modal Content -- */
.report-email-notice {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(var(--color-primary-rgb), 0.06);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 500;
}

.report-content {
    padding: 1.5rem 0;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.report-content h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.1);
}

.report-content h3:first-child {
    margin-top: 0;
}

.report-content p {
    margin-bottom: 1rem;
    font-size: 0.92rem;
}

.report-content ul,
.report-content ol {
    margin: 0.75rem 0 1rem 1.25rem;
    list-style: disc;
}

.report-content li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    list-style: inherit;
}

.report-content strong {
    color: var(--color-text-primary);
}

/* -- Programme Upsell -- */
.upsell-report-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.75rem;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-lg);
    margin-bottom: 3rem;
}

.upsell-report-icon {
    font-size: 1.5rem;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
}

.upsell-report-banner strong {
    display: block;
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.upsell-report-banner span {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.upsell-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 3rem;
}

.upsell-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.upsell-header p {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    line-height: 1.75;
}

.upsell-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.upsell-step {
    padding: 2rem 2.25rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.upsell-step:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.upsell-step--done {
    opacity: 0.7;
    background: var(--color-bg-alt);
}

.upsell-step--highlight {
    border-color: rgba(var(--color-primary-rgb), 0.15);
}

.upsell-step-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.upsell-step-badge--consultancy {
    background: rgba(204, 10, 139, 0.1);
    color: #cc0a8b;
}

.upsell-step-badge--software {
    background: rgba(38, 117, 234, 0.1);
    color: #2675ea;
}

.upsell-step-badge--training {
    background: rgba(253, 131, 0, 0.1);
    color: #fd8300;
}

.upsell-step h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.upsell-step p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.upsell-step-done-tag {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-success);
}

.upsell-step-done-tag i {
    margin-right: 0.3rem;
}

.upsell-features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.upsell-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    list-style: none;
}

.upsell-features li i {
    color: var(--color-success);
    margin-top: 4px;
    flex-shrink: 0;
}

.upsell-features li strong {
    color: var(--color-text-primary);
}

/* -- Upsell CTA -- */
.upsell-cta-section {
    text-align: center;
    padding: 3rem;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.04), rgba(204, 10, 139, 0.04));
    border-radius: var(--radius-xl);
    border: 1px solid rgba(var(--color-primary-rgb), 0.1);
    max-width: 800px;
    margin: 0 auto;
}

.upsell-cta-section h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.upsell-cta-section p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 550px;
    margin: 0 auto 1.75rem;
}

.upsell-reassurance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.upsell-reassurance span {
    font-size: 0.8rem;
    color: var(--color-text-light);
    font-weight: 500;
}

.upsell-reassurance i {
    margin-right: 0.3rem;
    color: var(--color-success);
}

/* -- Enrolment Section -- */
.enrolment-container {
    max-width: 640px;
    margin: 0 auto;
}

.enrolment-form-wrapper {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
}

.enrolment-header {
    text-align: center;
    margin-bottom: 2rem;
}

.enrolment-header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.enrolment-header p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

.enrolment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* -- Pricing Card -- */
.pricing-card {
    margin-top: 1.5rem;
    background: var(--color-bg-alt);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: fadeInUp 0.4s ease-out;
}

.pricing-header {
    text-align: center;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.06), rgba(var(--color-primary-rgb), 0.02));
    border-bottom: 1px solid var(--color-border);
}

.pricing-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    display: block;
    margin-bottom: 0.5rem;
}

.pricing-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.1rem;
}

.pricing-currency {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-text-primary);
}

.pricing-value {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1;
}

.pricing-period {
    font-size: 1rem;
    color: var(--color-text-light);
    font-weight: 500;
    margin-left: 0.25rem;
}

.pricing-breakdown {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-top: 0.5rem;
}

.pricing-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 1.25rem 1.75rem;
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.pricing-feature i {
    color: var(--color-success);
    flex-shrink: 0;
}

.pricing-trial {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 1rem 1.75rem 1.25rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    background: rgba(var(--color-primary-rgb), 0.03);
    border-top: 1px solid var(--color-border);
}

.pricing-trial i {
    color: var(--color-accent-gold);
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 1.1rem;
}

.pricing-trial strong {
    color: var(--color-text-primary);
}

/* -- Success Details -- */
.success-details {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.success-detail-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.success-detail-row i {
    color: var(--color-primary);
    width: 16px;
    flex-shrink: 0;
}

.success-detail-row strong {
    color: var(--color-text-primary);
}

/* -- Assessment page responsive -- */
@media (max-width: 768px) {
    .assessment-intro-features {
        grid-template-columns: 1fr;
    }

    .brolly-modal {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }

    .brolly-modal-header {
        padding: 2rem 1.5rem 1rem;
    }

    .brolly-modal-body {
        padding: 0 1.5rem 1rem;
    }

    .brolly-modal-actions {
        padding: 1rem 1.5rem 1.5rem;
        flex-direction: column;
    }

    .brolly-modal-actions .btn-assessment-prev,
    .brolly-modal-actions .btn-assessment-submit,
    .brolly-modal-actions .hero-cta {
        width: 100%;
        justify-content: center;
    }

    .key-ratings-grid {
        grid-template-columns: 1fr;
    }

    .upsell-steps {
        gap: 1rem;
    }

    .upsell-step {
        padding: 1.5rem;
    }

    .upsell-cta-section {
        padding: 2rem 1.5rem;
    }

    .pricing-features {
        grid-template-columns: 1fr;
    }

    .enrolment-form-wrapper {
        padding: 1.75rem;
    }

    .enrolment-actions {
        flex-direction: column;
    }

    .enrolment-actions button {
        width: 100%;
        justify-content: center;
    }

    .assessment-intro-card {
        padding: 2rem 1.5rem;
    }

    .funnel-step span {
        display: none;
    }

    .funnel-step-line {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .upsell-reassurance {
        flex-direction: column;
        gap: 0.5rem;
    }

    .assessment-intro-trust {
        flex-direction: column;
        gap: 0.5rem;
    }

    .provider-confirm-card {
        padding: 1.25rem;
    }

    .pricing-header {
        padding: 1.25rem 1rem;
    }
}


/* ==============================================================
   LEGAL PAGES (Terms, Privacy)
   ============================================================== */
.legal-section {
    padding-bottom: 4rem;
}

.legal-content {
    max-width: 780px;
    margin: 0 auto;
}

.legal-effective-date {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.06);
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    margin-bottom: 2.5rem;
}

.legal-content h2 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.legal-content h2:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.legal-content h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.legal-content p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.legal-content ul {
    margin: 0.5rem 0 1.25rem 1.25rem;
    list-style: none;
}

.legal-content ul li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.25rem;
    font-size: 0.92rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.legal-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

.legal-content ul li strong {
    color: var(--color-text-primary);
}

.legal-content code {
    font-size: 0.85rem;
    background: var(--color-bg-alt);
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    font-family: 'Courier New', monospace;
    color: var(--color-primary);
}

.legal-contact-card {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin: 1rem 0 1.5rem;
}

.legal-contact-card p {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

.legal-contact-card p:last-child {
    margin-bottom: 0;
}

.legal-contact-card i {
    color: var(--color-primary);
    margin-right: 0.4rem;
    width: 16px;
}

.legal-highlight-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-lg);
    margin: 1rem 0 1.5rem;
}

.legal-highlight-box > i {
    font-size: 1.5rem;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
}

.legal-highlight-box strong {
    display: block;
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.legal-highlight-box p {
    margin-bottom: 0;
    font-size: 0.92rem;
}

.legal-table-wrapper {
    overflow-x: auto;
    margin: 1rem 0 1.5rem;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.legal-table th {
    text-align: left;
    font-weight: 700;
    color: var(--color-text-primary);
    padding: 0.75rem 1rem;
    background: var(--color-bg-alt);
    border-bottom: 2px solid var(--color-border);
}

.legal-table td {
    padding: 0.65rem 1rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.legal-table tr:last-child td {
    border-bottom: none;
}

@media (max-width: 768px) {
    .legal-content h2 {
        font-size: 1.2rem;
    }

    .legal-highlight-box {
        flex-direction: column;
        gap: 0.5rem;
    }
}


/* ==============================================================
   COOKIE NOTICE
   ============================================================== */
.cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    padding: 1rem 2rem;
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
    animation: cookieSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cookieSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.cookie-notice-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cookie-notice-text {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    flex: 1;
}

.cookie-notice-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.cookie-notice-text p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

.cookie-notice-text strong {
    color: #ffffff;
}

.cookie-notice-text a {
    color: var(--color-accent-gold-light);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.cookie-notice-text a:hover {
    color: var(--color-accent-gold);
}

.cookie-notice-accept {
    flex-shrink: 0;
    padding: 0.65rem 1.5rem;
    background: var(--color-accent-gold);
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: 0.88rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-base),
                transform var(--transition-fast),
                box-shadow var(--transition-base);
}

.cookie-notice-accept:hover {
    background: var(--color-accent-gold-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--color-accent-gold-rgb), 0.35);
}

.cookie-notice-accept:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .cookie-notice {
        padding: 1rem;
    }

    .cookie-notice-inner {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .cookie-notice-text {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .cookie-notice-accept {
        width: 100%;
    }
}


/* ==============================================================
   INDUSTRY MODAL
   ============================================================== */
.industry-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 22, 40, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn 0.2s ease-out;
}

.industry-modal {
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    animation: fadeInUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.industry-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    z-index: 10;
}

.industry-modal-close:hover {
    background: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

/* -- Hero Header -- */
.industry-modal-hero {
    padding: 3rem 2.5rem 2.5rem;
    text-align: center;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    position: relative;
    overflow: hidden;
}

.industry-modal-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15) 0%, transparent 60%);
    pointer-events: none;
}

.industry-modal-hero-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    font-size: 1.75rem;
    color: #ffffff;
    position: relative;
}

.industry-modal-hero h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.5rem;
    position: relative;
}

.industry-modal-tagline {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    position: relative;
}

/* -- Body -- */
.industry-modal-body {
    padding: 2rem 2.5rem 2.5rem;
}

.industry-modal-content p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.industry-modal-content p:last-child {
    margin-bottom: 0;
}

/* -- Features -- */
.industry-modal-features {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border);
}

.industry-modal-features h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.industry-modal-features ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.industry-modal-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.industry-modal-features li i {
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 0.85rem;
}

/* -- CTA -- */
.industry-modal-cta {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.industry-modal-cta-sub {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-top: 0.75rem;
}

/* -- Responsive -- */
@media (max-width: 768px) {
    .industry-modal-overlay {
        padding: 1rem;
        align-items: flex-end;
    }

    .industry-modal {
        max-height: 92vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .industry-modal-hero {
        padding: 2.5rem 1.5rem 2rem;
    }

    .industry-modal-hero h2 {
        font-size: 1.4rem;
    }

    .industry-modal-body {
        padding: 1.5rem;
    }
}


/* ----------------------------------------------------------
   DEMO REQUEST PAGE
   ---------------------------------------------------------- */

.demo-request-section {
    padding: 4rem 0 5rem;
}

.demo-request-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
}

/* Promo Side */
.demo-request-promo {
    padding-right: 1rem;
}

.demo-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    margin-bottom: 1.5rem;
}

.demo-promo-badge i {
    font-size: 1rem;
}

.demo-request-promo .section-heading {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.demo-promo-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 2.5rem;
}

.demo-promo-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.demo-promo-feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.demo-promo-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--gradient-consultancy);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.demo-promo-feature strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.demo-promo-feature p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

.demo-promo-quote {
    background: var(--color-bg-alt);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1.5rem 1.5rem 1.25rem;
    position: relative;
}

.demo-promo-quote > i {
    color: var(--color-accent);
    font-size: 1.1rem;
    opacity: 0.6;
    margin-bottom: 0.5rem;
    display: block;
}

.demo-promo-quote p {
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
}

.demo-promo-quote span {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}

/* Form Side */
.demo-request-form-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: calc(var(--nav-height) + 2rem);
}

.demo-request-form-card h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.demo-request-form-card h3 i {
    color: var(--color-primary);
    margin-right: 0.4rem;
}

.demo-form-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 1.75rem;
    line-height: 1.5;
}

.demo-request-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.demo-request-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.demo-request-form .form-group-full {
    grid-column: 1 / -1;
}

.demo-request-form label {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.35rem;
}

.demo-request-form label i {
    color: var(--color-primary);
    margin-right: 0.25rem;
    font-size: 0.8rem;
}

.demo-request-form input,
.demo-request-form textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 0.9rem;
    color: var(--color-text-primary);
    background: var(--color-bg);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    box-sizing: border-box;
}

.demo-request-form input:focus,
.demo-request-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.demo-request-form textarea {
    resize: vertical;
    min-height: 80px;
}

.demo-radio-group {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.35rem;
}

.demo-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 400 !important;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

.demo-radio-label input[type="radio"] {
    width: auto;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.demo-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 2rem;
    background: var(--gradient-consultancy);
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-family: var(--font-primary);
    transition: transform var(--transition-fast), box-shadow var(--transition-base), opacity var(--transition-base);
    width: 100%;
    margin-top: 0.5rem;
}

.demo-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.3);
    opacity: 0.95;
}

.demo-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.demo-form-disclaimer {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 0.5rem;
}

.demo-form-disclaimer i {
    margin-right: 0.2rem;
}

@media (max-width: 768px) {
    .demo-request-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .demo-request-promo {
        padding-right: 0;
    }

    .demo-request-promo .section-heading {
        font-size: 1.6rem;
    }

    .demo-request-form-card {
        position: static;
        padding: 1.75rem 1.25rem;
    }

    .demo-request-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------
   SAMPLE REPORT SECTION (Consultancy page)
   ---------------------------------------------------------- */

.sample-report-section {
    background: var(--color-bg-alt);
}

.sample-report-frame {
    max-width: 820px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 4px 24px rgba(0,0,0,0.10),
        0 1px 3px rgba(0,0,0,0.06);
    background: #fff;
}

.sample-report-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1e1e2e;
    padding: 10px 16px;
}

.sample-report-dots {
    display: flex;
    gap: 6px;
}

.sample-report-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.sample-report-dots span:nth-child(1) { background: #ff5f57; }
.sample-report-dots span:nth-child(2) { background: #febc2e; }
.sample-report-dots span:nth-child(3) { background: #28c840; }

.sample-report-label {
    font-size: 0.8rem;
    color: #a0a0b0;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.sample-report-label i {
    margin-right: 6px;
    opacity: 0.7;
}

.sample-report-body {
    max-height: 620px;
    overflow-y: auto;
    padding: 0;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #c4c4c4 transparent;
}

.sample-report-body::-webkit-scrollbar {
    width: 6px;
}

.sample-report-body::-webkit-scrollbar-track {
    background: transparent;
}

.sample-report-body::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 3px;
}

.sample-report-header {
    text-align: center;
    padding: 2.5rem 2rem 1.5rem;
    border-bottom: 1px solid #e8e8ee;
    background: linear-gradient(180deg, #f5f3ff 0%, #fff 100%);
}

.sample-report-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), #6b3fd4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.sample-report-icon i {
    font-size: 1.4rem;
    color: #fff;
}

.sample-report-header h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.sample-report-prepared {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

.sample-report-email-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.06);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 500;
}

.sample-report-content {
    padding: 2rem 2.5rem 3rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    font-size: 0.92rem;
}

.sample-report-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 2rem 0 0.5rem;
}

.sample-report-content h4:first-child {
    margin-top: 0;
}

.sample-report-content p {
    margin-bottom: 0.75rem;
}

.sample-report-divider {
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), #6b3fd4);
    border-radius: 2px;
    margin-bottom: 1rem;
}

/* Findings */
.sample-report-finding {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e8ecf1;
}

.sample-report-rating {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.rating-good {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.rating-requires-improvement {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.rating-outstanding {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.sample-report-finding div {
    font-size: 0.88rem;
    line-height: 1.65;
}

.sample-report-finding strong {
    color: var(--color-text-primary);
}

/* Improvements list */
.sample-report-improvements {
    padding-left: 1.25rem;
    margin: 0.5rem 0 1.5rem;
}

.sample-report-improvements li {
    margin-bottom: 12px;
    line-height: 1.65;
    font-size: 0.9rem;
}

.sample-report-improvements li strong {
    color: var(--color-text-primary);
}

/* Timeline phases */
.sample-report-timeline {
    margin: 0.5rem 0 1.5rem;
}

.sample-report-phase {
    position: relative;
    padding: 16px 20px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #f8fafc;
    border-left: 3px solid var(--color-primary);
}

.sample-report-phase strong {
    display: block;
    font-size: 0.92rem;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.sample-report-phase ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sample-report-phase ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
    font-size: 0.85rem;
    line-height: 1.6;
}

.sample-report-phase ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.7rem;
    color: var(--color-success);
}

/* Fade overlay */
.sample-report-fade {
    position: relative;
    height: 80px;
    margin-top: -80px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 90%);
    pointer-events: none;
    z-index: 1;
}

/* CTA below report */
.sample-report-cta {
    text-align: center;
    padding: 2.5rem 1rem 0;
}

.sample-report-cta h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.25rem;
}

.sample-report-cta .hero-cta {
    margin-bottom: 1rem;
}

.sample-report-cta .page-hero-reassurance {
    display: block;
    margin-top: 0.75rem;
    color: var(--color-text-light);
    font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 768px) {
    .sample-report-frame {
        border-radius: 8px;
    }

    .sample-report-content {
        padding: 1.25rem 1.25rem 2.5rem;
    }

    .sample-report-header {
        padding: 1.5rem 1.25rem 1rem;
    }

    .sample-report-finding {
        flex-direction: column;
        gap: 8px;
    }

    .sample-report-body {
        max-height: 480px;
    }

    .sample-report-cta h3 {
        font-size: 1.15rem;
    }
}

/* ----------------------------------------------------------
   BROLLY DIFFERENTIATORS (Software page)
   ---------------------------------------------------------- */

.brolly-diff-section {
    background: #fff;
}

.brolly-diff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.brolly-diff-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.75rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e8ecf1;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.brolly-diff-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(var(--color-primary-rgb), 0.2);
}

.brolly-diff-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary), #6b3fd4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brolly-diff-icon i {
    font-size: 1.15rem;
    color: #fff;
}

.brolly-diff-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.4rem;
    line-height: 1.35;
}

.brolly-diff-body p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin: 0;
}

.brolly-diff-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.08);
    padding: 4px 10px;
    border-radius: 20px;
}

.brolly-diff-tag i {
    font-size: 0.6rem;
}

.brolly-diff-footer {
    text-align: center;
    margin-top: 2.5rem;
    padding: 1.5rem 2rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.04), rgba(107, 63, 212, 0.04));
    border: 1px dashed rgba(var(--color-primary-rgb), 0.15);
}

.brolly-diff-footer p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}

@media (max-width: 900px) {
    .brolly-diff-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .brolly-diff-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 1.5rem 1.25rem;
    }

    .brolly-diff-tag {
        position: static;
        margin-top: 0.75rem;
    }

    .brolly-diff-footer {
        padding: 1.25rem 1rem;
    }
}

/* ----------------------------------------------------------
   TRAINING HERO - Wide layout with avatar
   ---------------------------------------------------------- */

.training-hero-wide {
    max-width: var(--container-max) !important;
}

.training-hero-layout {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
    width: 100%;
}

.training-hero-text {
    max-width: 680px;
}

.training-hero-text .hero-subtitle {
    max-width: 580px;
}

.training-hero-text .page-hero-cta {
    align-items: flex-start;
}

/* Avatar */
.training-hero-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.training-avatar-frame {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: visible;
}

.training-avatar-frame img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 2;
}

.training-avatar-pulse {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    border: 2px solid rgba(252, 210, 36, 0.5);
    animation: trainingAvatarPulse 2.5s ease-in-out infinite;
    z-index: 1;
}

@keyframes trainingAvatarPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.2;
    }
}

.training-avatar-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.03em;
}

.training-avatar-live-dot {
    font-size: 0.5rem;
    color: #22c55e;
    margin-right: 4px;
    animation: liveBlink 1.5s ease-in-out infinite;
}

@media (max-width: 900px) {
    .training-hero-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .training-hero-text {
        max-width: 100%;
    }

    .training-hero-text .hero-subtitle {
        max-width: 100%;
        margin: 0 auto !important;
        text-align: center;
    }

    .training-hero-text .page-hero-cta {
        align-items: center;
    }

    .training-hero-avatar {
        order: -1;
    }

    .training-avatar-frame {
        width: 140px;
        height: 140px;
    }
}