/* ============================================================
   BRITESITE - ENHANCED BUSINESS WEBSITE STYLES
   Full-width layout, complex symmetrical tech patterns, flashy animations
   Desktop animations + Mobile optimized performance
   ============================================================ */

/* -----------------------------------------------------------
   CSS VARIABLES & DESIGN TOKENS
----------------------------------------------------------- */
:root {
    /* Color Scheme */
    color-scheme: light;
    
    /* Primary Colors */
    --color-primary: #2563EB;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #3b82f6;
    --color-primary-soft: #EFF6FF;
    --color-primary-subtle: rgba(37, 99, 235, 0.08);
    
    /* Text Colors - Enhanced contrast */
    --color-text-main: #1e293b;
    --color-text-heading: #0f172a;
    --color-text-muted: #475569;
    --color-text-light: #64748b;
    
    /* Background Colors */
    --color-bg: #FFFFFF;
    --color-bg-soft: #F8FAFC;
    --color-bg-muted: #f1f5f9;
    
    /* Border Colors */
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    
    /* Success/Error Colors */
    --color-success: #10b981;
    --color-error: #ef4444;
    
    /* Typography */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 5rem;
    --spacing-3xl: 8rem;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Shadows - Enhanced for depth */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.08), 0 6px 12px -3px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.04);
    --shadow-primary: 0 4px 14px 0 rgba(37, 99, 235, 0.25);
    --shadow-primary-hover: 0 8px 25px rgba(37, 99, 235, 0.35);
    --shadow-glow: 0 0 40px rgba(37, 99, 235, 0.15);
    --shadow-glow-intense: 0 0 60px rgba(37, 99, 235, 0.25);
    
    /* Transitions */
    --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-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-nav: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;
    --z-pattern: -1;
    --z-tech-pattern: 0;
}

/* -----------------------------------------------------------
   RESET & BASE STYLES
----------------------------------------------------------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scroll-padding-top: 80px;
    width: 100%;
    /* Prevent horizontal scrolling on narrow viewports by explicitly hiding any
       overflow along the x‑axis. While the body already hides horizontal
       overflow, some mobile browsers calculate scrollable width based on the
       root element. Adding this rule here ensures the legal page (and other
       pages) won’t appear zoomed in or allow side‑to‑side panning on small
       screens. */
    overflow-x: hidden;
    color-scheme: light;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-primary);
    color: var(--color-text-main);
    line-height: 1.7;
    background-color: var(--color-bg);
    overflow-x: hidden;
    width: 100%;
    position: relative;
    min-height: 100vh;
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    z-index: 9999;
    text-decoration: none;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 1rem;
}

/* Selection Styling */
::selection {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* Focus Visible Styling */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------
   DESKTOP ANIMATIONS - KEYFRAMES
----------------------------------------------------------- */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes tech-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

@keyframes node-blink {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

@keyframes node-glow-pulse {
    0%, 100% { 
        opacity: 0.6; 
        filter: drop-shadow(0 0 2px rgba(37, 99, 235, 0.4));
    }
    50% { 
        opacity: 1; 
        filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.8));
    }
}

@keyframes circuit-flow {
    0% { stroke-dashoffset: 200; }
    100% { stroke-dashoffset: 0; }
}

@keyframes data-flow-v {
    0% { stroke-dashoffset: 300; }
    100% { stroke-dashoffset: 0; }
}

@keyframes data-flow-h {
    0% { stroke-dashoffset: 150; }
    100% { stroke-dashoffset: 0; }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

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

@keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(37, 99, 235, 0.3); }
    50% { box-shadow: 0 0 40px rgba(37, 99, 235, 0.5); }
}

@keyframes scale-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes slide-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes border-glow {
    0%, 100% { border-color: rgba(37, 99, 235, 0.3); }
    50% { border-color: rgba(37, 99, 235, 0.8); }
}

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-3px) scale(1.1); }
    50% { transform: translateY(0) scale(1); }
    75% { transform: translateY(-2px) scale(1.05); }
}

@keyframes float-code {
    0%, 100% { 
        transform: translateY(0) rotate(-3deg); 
        opacity: 0.5;
    }
    50% { 
        transform: translateY(-10px) rotate(3deg); 
        opacity: 0.8;
    }
}

@keyframes binary-flicker {
    0%, 100% { opacity: 0.3; }
    25% { opacity: 0.6; }
    50% { opacity: 0.4; }
    75% { opacity: 0.7; }
}

@keyframes hex-rotate {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
}

/* -----------------------------------------------------------
   ABSTRACT BACKGROUND PATTERNS - BASE
----------------------------------------------------------- */
.bg-pattern {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: var(--z-pattern);
}

/* Subtle mesh gradient */
.mesh-gradient {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(37, 99, 235, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(59, 130, 246, 0.04) 0%, transparent 50%);
}

/* Floating orbs */
.pattern-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}

.pattern-orb-1 {
    width: 400px;
    height: 400px;
    background: rgba(37, 99, 235, 0.15);
    top: -10%;
    left: -5%;
}

.pattern-orb-2 {
    width: 300px;
    height: 300px;
    background: rgba(59, 130, 246, 0.12);
    bottom: 5%;
    right: -5%;
}

.pattern-orb-3 {
    width: 250px;
    height: 250px;
    background: rgba(37, 99, 235, 0.1);
    top: 50%;
    left: 40%;
}

/*
 * Mirror classes for the hero section's decorative orbs and dots.
 * These variants reposition the existing shapes to the opposite side of
 * the hero, creating a perfectly balanced, symmetrical layout.
 */
.mirror-orb-1 {
    /* Mirror the top‑left orb (pattern‑orb‑1) to the top‑right */
    top: -10%;
    right: -5%;
    left: auto;
}

.mirror-orb-2 {
    /* Mirror the bottom‑right orb (pattern‑orb‑2) to the bottom‑left */
    bottom: 5%;
    left: -5%;
    right: auto;
}

.mirror-dots-1 {
    /* Mirror the top‑right dot pattern (pattern‑dots‑1) to the top‑left */
    top: 15%;
    left: 8%;
    right: auto;
}

/* Mirrored secondary hero blob */
.hero-blob-secondary-left {
    /* Match the size and radial gradient of the original secondary blob */
    bottom: -20%;
    left: -10%;
    right: auto;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 60%);
    z-index: 0;
}

/* Dot pattern */
.pattern-dots {
    position: absolute;
    width: 180px;
    height: 180px;
    background-image: radial-gradient(circle, rgba(37, 99, 235, 0.15) 2px, transparent 2px);
    background-size: 24px 24px;
    opacity: 0.5;
}

.pattern-dots-1 {
    top: 15%;
    right: 8%;
}

.pattern-dots-2 {
    bottom: 20%;
    left: 5%;
}

/* Grid pattern */
.pattern-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Hexagon pattern */
.pattern-hex {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%232563eb' fill-opacity='0.04'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

/* -----------------------------------------------------------
   BALANCED TECH PATTERNS - HERO SIDES (Desktop Only) - SYMMETRICAL
----------------------------------------------------------- */
.tech-pattern-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: var(--z-tech-pattern);
}

/* Tech Patterns - Perfectly Balanced */
.tech-pattern-left,
.tech-pattern-right {
    position: absolute;
    top: 0;
    width: 140px;
    height: 100%;
    opacity: 0;
}

.tech-pattern-left {
    left: 0;

}

.tech-pattern-right {
    /* Shift the right‑hand tech pattern slightly left so it doesn’t hug
     * the viewport edge. Using a viewport‑based offset keeps the shift
     * proportional on different screen sizes. */
    /* Position flush to the right and gently shift the entire pattern left
     * using a transform. This adjustment brings the mirrored tech graphic
     * inward without relying on fixed pixel offsets. */
    right: 0;
    /* Move the right‑side tech pattern slightly inward so it doesn’t sit
     * flush against the edge. Negative horizontal translation shifts it
     * left relative to its own width. A value of -30% provides a subtle
     * adjustment across a range of screen sizes. */
    transform: translateX(-30%);
}

/* Single SVG Layer */
.circuit-svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Circuit Line Styles */
.circuit-line {
    fill: none;
    stroke-linecap: round;
}

.circuit-line.main {
    stroke: rgba(37, 99, 235, 0.22);
    stroke-width: 2.5;
}

.circuit-line.secondary {
    stroke: rgba(37, 99, 235, 0.14);
    stroke-width: 1.5;
}

.circuit-line.connect {
    stroke: rgba(37, 99, 235, 0.16);
    stroke-width: 2;
}

.circuit-line.diagonal {
    stroke: rgba(37, 99, 235, 0.1);
    stroke-width: 1.5;
}

/* Circuit Nodes */
.circuit-node {
    transition: all 0.3s ease;
}

.circuit-node.main {
    fill: rgba(37, 99, 235, 0.5);
}

.circuit-node.secondary {
    fill: rgba(37, 99, 235, 0.35);
}

.circuit-node.dot {
    fill: rgba(37, 99, 235, 0.25);
}

/* Square Nodes */
.circuit-square {
    fill: rgba(37, 99, 235, 0.2);
    stroke: rgba(37, 99, 235, 0.3);
    stroke-width: 1;
}

/* Hexagon Shapes */
.circuit-hex {
    fill: rgba(37, 99, 235, 0.08);
    stroke: rgba(37, 99, 235, 0.18);
    stroke-width: 1;
}

/* Floating Code Elements */
.code-float {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(37, 99, 235, 0.3);
    letter-spacing: 1px;
    pointer-events: none;
}

.code-float.binary {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: rgba(37, 99, 235, 0.22);
}

/* -----------------------------------------------------------
   TYPOGRAPHY - Enhanced readability
----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text-heading);
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2.25rem, 5vw, 4rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.2;
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
}

p {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

p.lead {
    font-size: var(--text-lg);
    color: var(--color-text-main);
    font-weight: 500;
    line-height: 1.7;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

.highlight {
    color: var(--color-primary);
    position: relative;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.text-link:hover {
    color: var(--color-primary-dark);
}

/* -----------------------------------------------------------
   LAYOUT UTILITIES - FULL WIDTH DESKTOP
----------------------------------------------------------- */
.container {
    /*
     * Provide consistent horizontal padding across all viewports so that
     * content never sits flush against the edge of the browser window. 1rem
     * (approximately 16px) on smaller screens ensures adequate breathing
     * room, while larger screens gain slightly more space via the media
     * query below. Removing the previous zero‑padding rule prevents the
     * header logo and other elements from touching the viewport edge on
     * desktop displays.
     */
    width: 100%;
    margin: 0;
    padding: 0 1rem;
}

/*
 * Broaden the width of text‑centric sections for a more expansive layout,
 * while still constraining the maximum width to maintain readable line
 * lengths. Without a limit, very wide viewports can lead to lines
 * that are difficult to scan. These constraints allow decorative
 * backgrounds to span full width while the content remains comfortably
 * centered. Hero sections remain full width for dramatic effect.
 */
.value-section > .container,
.services-section > .container,
/*
 * Widen the primary content sections by increasing their maximum width.
 * A broader layout provides more horizontal space for content while
 * keeping it centered. The contact section remains full width.
 */
.site-footer > .container {
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) {
    .container {
        /* Increase horizontal padding on larger screens to roughly 24px per side.
         * This keeps content framed nicely without creating overly large gutters.
         */
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/*
 * Give sections a little more breathing room by increasing their
 * vertical padding. A taller top and bottom margin helps separate
 * content blocks, making the overall layout feel more open without
 * compromising readability or mobile responsiveness.
 */
section {
    /* Further increase vertical padding on sections for even more
     * separation between major content areas. Combining the 8rem base
     * with an additional large spacing produces roughly 10rem of space
     * above and below each section.
     */
    /* Provide comfortable vertical spacing above and below each section.
     * Using the 3XL spacing (8rem) strikes a balance between openness
     * and keeping the scroll length reasonable. Increasing the width of
     * sections means we don't need the extra vertical padding previously
     * applied.
     */
    padding: var(--spacing-3xl) 0;
    position: relative;
}

.bg-soft {
    background-color: var(--color-bg-soft);
    position: relative;
}

/* Section Headers */
.section-header {
    text-align: center;
    max-width: 700px;
    /* Separate the section header from following content with a
     * slightly larger margin. This extra space helps callouts and
     * grids breathe, improving visual hierarchy without adding
     * unnecessary clutter.
     */
    /* Increase the space below section headings to further separate
     * them from the content that follows. Adding a large spacing unit
     * results in roughly seven rem of bottom margin.
     */
    /* Reset section header bottom margin to a moderate size. This
     * spacing ensures the headings remain visually separated from the
     * content without adding excessive vertical distance now that
     * sections are wider rather than taller.
     */
    margin: 0 auto var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-sm);
}

.section-header h2 {
    margin-bottom: var(--spacing-sm);
}

.section-header p {
    font-size: var(--text-lg);
    margin-bottom: 0;
    color: var(--color-text-muted);
}

/* -----------------------------------------------------------
   ANIMATIONS & REVEAL EFFECTS
----------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }

/* -----------------------------------------------------------
   BUTTONS - ENHANCED WITH FLASHY ANIMATIONS
----------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 16px 32px;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-base);
    transition: all var(--transition-base);
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Primary Button - Flashy Effects */
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    box-shadow: var(--shadow-primary);
}

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

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-primary-hover), var(--shadow-glow-intense);
    color: white;
}

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

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

/* Secondary Button - Enhanced */
.btn-secondary {
    background-color: white;
    border-color: var(--color-border);
    color: var(--color-text-main);
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-md);
}

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

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

/* Primary Light Button */
.btn-primary-light {
    background: white;
    color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.btn-primary-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
    transition: left 0.6s ease;
}

.btn-primary-light:hover {
    background: var(--color-bg-soft);
    transform: translateY(-3px) scale(1.02);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-lg);
}

.btn-primary-light:hover::before {
    left: 100%;
}

/* Outline Light Button */
.btn-outline-light {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: white;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
    color: white;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

/* -----------------------------------------------------------
   HEADER & NAVIGATION
----------------------------------------------------------- */
.site-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-nav);
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    padding: 1rem 0;
    transition: all var(--transition-base);
}

.site-header.scrolled {
    padding: 0.75rem 0;
    box-shadow: var(--shadow-sm);
    background: rgba(255, 255, 255, 0.98);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    z-index: calc(var(--z-nav) + 1);
}

.site-logo {
    height: 36px;
    width: auto;
    display: block;
    transition: transform var(--transition-fast);
}

.logo-link:hover .site-logo {
    transform: scale(1.05);
}

/* Navigation */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: var(--color-text-main);
    font-weight: 500;
    font-size: var(--text-sm);
    position: relative;
    transition: all var(--transition-fast);
    padding: 0.5rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    transition: width var(--transition-base);
    border-radius: 2px;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
}

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

.nav-cta {
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    background: var(--color-primary-soft);
    padding: 0.625rem 1.25rem !important;
    border-radius: var(--radius-full);
    transition: all var(--transition-base) !important;
}

.nav-cta::after {
    display: none !important;
}

.nav-cta:hover {
    background: var(--color-primary) !important;
    color: white !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-primary);
}

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: calc(var(--z-nav) + 1);
    flex-direction: column;
    gap: 5px;
}

.bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-main);
    border-radius: 2px;
    transition: all var(--transition-base);
}

/* -----------------------------------------------------------
   HERO SECTION - Enhanced with Complex Symmetrical Tech Patterns
----------------------------------------------------------- */
.hero-section {
    padding: 0;
    text-align: center;
    overflow: hidden;
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
}

.hero-blob,
.hero-blob-secondary {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.hero-blob {
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    height: 1400px;
    background: radial-gradient(circle, var(--color-primary-subtle) 0%, transparent 60%);
    z-index: 0;
}

.hero-blob-secondary {
    bottom: -20%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 60%);
    z-index: 0;
}

.hero-content {
    /*
     * Allow the hero copy to use the full width of its container. Removing the
     * max‑width and centering margins lets the section span the entire page on
     * larger displays. We still keep generous top and bottom padding and a
     * modest horizontal padding to prevent text from hugging the viewport edge.
     */
    width: 100%;
    margin: 0;
    position: relative;
    z-index: 2;
    /* Reduce horizontal padding on large screens so the hero copy takes
     * advantage of the available width. 2vw on either side equates to
     * approximately 20px on a 1024px wide display and scales up on
     * larger monitors.
     * Adjust the vertical padding to be slightly more compact (8rem top and
     * 5rem bottom) for a more balanced hero section on desktop without
     * compromising the sense of spaciousness.
     */
    padding: 7rem 2vw 6rem;
}

.hero-text h1 {
    margin-bottom: var(--spacing-md);
    line-height: 1.1;
    color: var(--color-text-heading);
    /*
     * Reduce the hero heading size on large displays. The previous
     * clamp() allowed the text to grow up to 4.5rem (about 72px), which
     * overwhelmed the layout on desktop screens. By lowering both the
     * minimum and maximum values and using a smaller viewport‑scaled
     * factor (4vw instead of 5vw), the heading remains prominent
     * without dominating the hero section. For example, on a 1440px wide
     * screen 4vw equals roughly 57.6px, but the max value of 3.5rem
     * (56px) prevents it from becoming any larger.
     */
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.hero-subtext {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    margin-bottom: var(--spacing-xl);
    /*
     * Limit the width of the subtext to maintain comfortable line lengths.
     * Without a cap the paragraph can stretch across the full viewport,
     * reducing readability. Center it within the hero for a balanced look.
     */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.cta-group {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl);
}

/* Hero Stats - Enhanced design */
.hero-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
    min-width: 120px;
}

.stat-item:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-soft);
}

.stat-number {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

.stat-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--color-border);
}

/* -----------------------------------------------------------
   HERO TWO-COLUMN LAYOUT & MOCKUP
----------------------------------------------------------- */
.hero-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
    text-align: center;
}

@media (min-width: 1024px) {
    .hero-layout {
        grid-template-columns: 1fr 1.2fr;
        text-align: left;
    }
    .hero-text .cta-group {
        justify-content: flex-start;
    }
    .hero-text .hero-subtext {
        margin-left: 0;
        margin-right: 0;
    }
    .hero-text .hero-stats {
        justify-content: flex-start;
    }
}

.hero-visual {
    display: none;
}

@media (min-width: 1024px) {
    .hero-visual {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* Hero mockup image */
.hero-mockup-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.10));
}

/* Browser mockup (unused - kept for reference) */
.mockup-browser {
    width: 100%;
    max-width: 460px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.13), 0 4px 16px rgba(0,0,0,0.07);
    border: 1px solid var(--color-border);
    background: #fff;
}

.mockup-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
}

.mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
    flex-shrink: 0;
}

.mockup-url {
    flex: 1;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-left: 6px;
}

.mockup-screen {
    padding: 0;
    background: #fff;
}

.mockup-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-light);
}

.mockup-logo-bar {
    width: 60px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 4px;
    opacity: 0.85;
}

.mockup-nav-links {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mockup-nav-link {
    width: 28px;
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
}

.mockup-nav-cta {
    width: 36px;
    height: 18px;
    background: var(--color-primary);
    border-radius: 4px;
    opacity: 0.8;
}

.mockup-hero-block {
    padding: 20px 16px 16px;
    background: var(--color-bg-soft);
}

.mockup-headline {
    height: 10px;
    background: var(--color-text-heading);
    border-radius: 5px;
    margin-bottom: 8px;
    opacity: 0.15;
}

.mockup-headline.short {
    width: 65%;
}

.mockup-sub {
    height: 6px;
    background: var(--color-text-muted);
    border-radius: 3px;
    margin-bottom: 6px;
    opacity: 0.2;
}

.mockup-sub.short {
    width: 50%;
    margin-bottom: 14px;
}

.mockup-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.mockup-btn {
    height: 20px;
    border-radius: 5px;
}

.mockup-btn.primary {
    width: 80px;
    background: var(--color-primary);
    opacity: 0.85;
}

.mockup-btn.secondary {
    width: 60px;
    background: var(--color-border);
}

.mockup-cards {
    display: flex;
    gap: 8px;
    padding: 14px 16px;
}

.mockup-card {
    flex: 1;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    padding: 10px 8px;
}

.mockup-card-icon {
    width: 20px;
    height: 20px;
    background: var(--color-primary-soft);
    border-radius: 5px;
    margin-bottom: 8px;
}

.mockup-card-line {
    height: 5px;
    background: var(--color-border);
    border-radius: 3px;
    margin-bottom: 5px;
}

.mockup-card-line.short {
    width: 60%;
}

/* -----------------------------------------------------------
   CARDS & GRIDS - FULL WIDTH
----------------------------------------------------------- */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Spread cards apart more on larger screens to prevent a cramped
     * appearance. Using a bigger gap improves scannability while still
     * retaining harmony with other spacing scales across the site.
     */
    gap: var(--spacing-2xl);
}

.card {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

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

.card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(37, 99, 235, 0.02) 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary-soft);
}

.card:hover::before {
    transform: scaleX(1);
}

.card:hover::after {
    opacity: 1;
}

.icon-box {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    display: inline-flex;
    background: var(--color-primary-soft);
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-bounce);
    position: relative;
    z-index: 1;
}

.card:hover .icon-box {
    background: var(--color-primary);
    color: white;
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--shadow-primary);
}

.card h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-heading);
    position: relative;
    z-index: 1;
}

.card p {
    margin-bottom: 0;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--color-text-muted);
    position: relative;
    z-index: 1;
}

/* -----------------------------------------------------------
   SERVICES SECTION - FULL WIDTH
----------------------------------------------------------- */
.services-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Increase the spacing between service cards to give each
     * offering more breathing room and enhance visual separation.
     */
    gap: var(--spacing-2xl);
}

.service-box {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.service-box:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px) scale(1.01);
    border-color: var(--color-primary-soft);
}

.service-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

.service-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all var(--transition-bounce);
}

.service-box:hover .service-icon {
    transform: scale(1.1) rotate(-5deg);
}

.service-box:not(.exclusion-box) .service-icon {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.exclusion-box .service-icon {
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}

.service-header h3 {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--color-text-heading);
}

.exclusion-box {
    background: var(--color-bg-soft);
    border: 2px dashed var(--color-border);
}

.exclusion-intro {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    font-size: var(--text-sm);
}

/* Lists */
.check-list,
.cross-list {
    list-style: none;
}

.check-list li,
.cross-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-size: var(--text-sm);
    color: var(--color-text-main);
    transition: transform var(--transition-fast);
}

.check-list li:hover,
.cross-list li:hover {
    transform: translateX(4px);
}

.check-icon,
.cross-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all var(--transition-bounce);
}

.check-list li:hover .check-icon,
.cross-list li:hover .cross-icon {
    transform: scale(1.2);
}

.check-icon {
    background: var(--color-success);
    color: white;
}

.cross-icon {
    background: var(--color-text-light);
    color: white;
}

/* Reference Block */
.reference-block {
    background: white;
    padding: var(--spacing-xl);
    /* Add extra vertical spacing above the reference block to
     * differentiate it from the preceding content. This makes the
     * testimonial/reference stand out and avoids crowding.
     */
    margin-top: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xl);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

.reference-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-light));
}

.reference-block::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.reference-block:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-soft);
    transform: translateY(-6px) scale(1.01);
}

.reference-block:hover::after {
    opacity: 1;
}

.ref-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-sm);
}

.ref-content h3 {
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-heading);
    font-size: var(--text-xl);
}

.ref-content p {
    margin-bottom: 0;
    max-width: 500px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.ref-action {
    flex-shrink: 0;
}

.ref-action .btn i {
    transition: transform var(--transition-fast);
}

.ref-action .btn:hover i {
    transform: translateX(6px);
}

/* Ensure the icons in our new reference card buttons animate on hover just like the original */
.ref-card-action .btn i {
    transition: transform var(--transition-fast);
}

.ref-card-action .btn:hover i {
    transform: translateX(6px);
}

/* Prevent decorative pseudo-elements from intercepting pointer events.
   Without this, the clickable area of buttons can shift left because the
   ::before or ::after layers sit on top of the button and capture clicks. */
.btn::before,
.btn-secondary::before,
.reference-card::after {
    pointer-events: none;
}

/* -----------------------------------------------------------
   MAINTENANCE SECTION
----------------------------------------------------------- */
.maintenance-block {
    background: white;
    padding: var(--spacing-xl);
    /* Provide extra space above the maintenance call‑to‑action block
     * so that it feels distinct from preceding content. This helps
     * draw attention to the maintenance offering without cramping
     * surrounding elements.
     */
    margin-top: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xl);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

.maintenance-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--color-success), #34d399);
}

.maintenance-block::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.maintenance-block:hover {
    box-shadow: var(--shadow-lg);
    border-color: rgba(16, 185, 129, 0.2);
    transform: translateY(-6px) scale(1.01);
}

.maintenance-block:hover::after {
    opacity: 1;
}

.maintenance-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-sm);
}

.maintenance-content h3 {
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-heading);
    font-size: var(--text-xl);
}

.maintenance-content p {
    margin-bottom: 0;
    max-width: 500px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.maintenance-action {
    flex-shrink: 0;
}

/* -----------------------------------------------------------
   PROCESS SECTION
----------------------------------------------------------- */
.process-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* Increase horizontal spacing between steps to give each item more breathing room.
     * This helps prevent the process section from feeling cramped when displayed
     * in a multi‑column layout on larger screens.
     */
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.step {
    position: relative;
    text-align: center;
}

.step-connector {
    position: absolute;
    top: 27px;
    left: calc(50% + 31px);
    width: calc(100% - 31px);
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    opacity: 0.25;
}

.step:last-child .step-connector {
    display: none;
}

.step-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.step-number {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
    background: white;
    border: 2px solid var(--color-primary);
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-bounce);
}

.step:hover .step-number {
    background: var(--color-primary);
    color: white;
    transform: scale(1.1);
    box-shadow: var(--shadow-primary);
}

.step-icon {
    width: 40px;
    height: 40px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    transition: all var(--transition-bounce);
}

.step:hover .step-icon {
    background: var(--color-primary);
    color: white;
    transform: rotate(10deg) scale(1.1);
}

.step-content h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-heading);
}

.step-content p {
    font-size: var(--text-sm);
    margin-bottom: 0;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* -----------------------------------------------------------
   ABOUT SECTION
----------------------------------------------------------- */
/*
 * Restrict the width of the about section content on larger screens to
 * improve readability. Without a max‑width the text can stretch across
 * the entire container, creating long line lengths that are hard to read.
 * The new limit centers the content and adds breathing room on either side.
 */
.about-content {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Use equal column widths for the about section and align items to the top
 * rather than vertically centering them. This makes the layout feel more
 * balanced and ensures that longer text doesn’t appear misaligned next
 * to the visual cards. The gap is reduced to a more moderate spacing.
 */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* On larger screens, allow the text and image columns more
     * separation. A wider gap ensures the layout feels airy and
     * balanced while still reading comfortably on mobile.
     */
    gap: var(--spacing-2xl);
    align-items: flex-start;
}

.about-text .section-tag {
    margin-bottom: var(--spacing-sm);
}

.about-text h2 {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-heading);
}

.about-body {
    margin-bottom: var(--spacing-lg);
}

.about-body p {
    margin-bottom: var(--spacing-md);
}

.about-body p:last-child {
    margin-bottom: 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border: 1px solid var(--color-border);
    padding: 0.625rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-main);
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-base);
}

.badge:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-sm);
    border-color: var(--color-primary-soft);
}

.badge i {
    color: var(--color-primary);
}

/* About Visual Cards */
.about-visual {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.visual-card {
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: all var(--transition-base);
}

.visual-card:hover {
    transform: translateX(10px) scale(1.02);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-soft);
}

.visual-icon {
    width: 56px;
    height: 56px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all var(--transition-bounce);
}

.visual-card:hover .visual-icon {
    background: var(--color-primary);
    color: white;
    transform: scale(1.1) rotate(-5deg);
}

.visual-text {
    display: flex;
    flex-direction: column;
}

.visual-number {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-heading);
    line-height: 1.2;
}

.visual-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* -----------------------------------------------------------
   CONTACT SECTION
----------------------------------------------------------- */
.contact-section {
    /* Give the contact section extra breathing room so that the call
     * to action feels intentionally separated from preceding content and
     * the footer. Increasing both top and bottom padding keeps it
     * balanced and draws more attention to the gradient card.
     */
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-3xl);
    position: relative;
}

.contact-wrapper {
    /*
     * Allow the contact area to span the full width of its section on desktop.
     * Removing the max‑width and centering margin gives the content more
     * breathing room and aligns it with the new wider container. On small
     * screens the grid will stack naturally via responsive rules defined
     * further down.
     */
    width: 100%;
    max-width: none;
    margin: 0;
}

.contact-card {
    background: linear-gradient(135deg, #2563EB 0%, #1d4ed8 100%);
    color: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl) var(--spacing-xl);
    text-align: center;
    box-shadow: 0 12px 24px -6px rgba(37, 99, 235, 0.4), 0 6px 12px -3px rgba(37, 99, 235, 0.2);
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%);
    animation: rotate-slow 20s linear infinite;
}

.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 1;
}

.contact-card h2 {
    color: white;
    margin-bottom: var(--spacing-sm);
    position: relative;
    z-index: 1;
}

.contact-card > p {
    color: rgba(255, 255, 255, 1);
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-xl);
    position: relative;
    z-index: 1;
}

.contact-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl);
    position: relative;
    z-index: 1;
}

.contact-info {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.95);
}

.info-item i {
    color: rgba(255, 255, 255, 0.8);
}

/* -----------------------------------------------------------
   FOOTER
----------------------------------------------------------- */
.site-footer {
    background: var(--color-bg-soft);
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
    font-size: var(--text-sm);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    position: relative;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.footer-brand {
    max-width: 400px;
}

.footer-logo {
    height: 28px;
    width: auto;
    margin-bottom: var(--spacing-md);
    display: block;
    transition: transform var(--transition-fast);
}

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

.footer-brand p {
    margin-bottom: var(--spacing-md);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--color-text-muted);
}

.footer-social {
    display: flex;
    gap: var(--spacing-sm);
}

.footer-social a {
    width: 44px;
    height: 44px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: all var(--transition-bounce);
}

.footer-social a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transform: translateY(-4px) scale(1.1);
    box-shadow: var(--shadow-primary);
}

.footer-nav {
    display: flex;
    gap: var(--spacing-2xl);
}

.footer-nav-group h4 {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-heading);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-nav-group ul {
    list-style: none;
}

.footer-nav-group li {
    margin-bottom: var(--spacing-xs);
}

.footer-nav-group a {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
    display: inline-block;
}

.footer-nav-group a:hover {
    color: var(--color-primary);
    transform: translateX(6px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.footer-bottom p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.footer-credit {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.footer-credit i {
    color: #ef4444;
    animation: scale-pulse 2s ease-in-out infinite;
}

/* -----------------------------------------------------------
   DESKTOP ANIMATIONS - APPLIED (min-width: 769px)
----------------------------------------------------------- */
@media (min-width: 769px) {
    /* Show tech patterns on desktop */
    .tech-pattern-left,
    .tech-pattern-right {
        opacity: 1;
    }
    
    /* Floating animation for orbs */
    .pattern-orb-1 {
        animation: float-slow 8s ease-in-out infinite;
    }
    
    .pattern-orb-2 {
        animation: float 10s ease-in-out infinite;
        animation-delay: -3s;
    }
    
    .pattern-orb-3 {
        animation: float-slow 12s ease-in-out infinite;
        animation-delay: -5s;
    }
    
    /* Pulsing glow for hero blobs */
    .hero-blob {
        animation: pulse-glow 6s ease-in-out infinite;
    }
    
    .hero-blob-secondary {
        animation: pulse-glow 8s ease-in-out infinite;
        animation-delay: -2s;
    }
    
    /* Balanced Circuit Pattern Animations */
    
    /* Main lines - subtle pulse */
    .circuit-line.main {
        animation: tech-pulse 4s ease-in-out infinite;
    }
    
    /* Secondary lines - staggered pulse */
    .circuit-line.secondary {
        animation: tech-pulse 5s ease-in-out infinite;
        animation-delay: 0.5s;
    }
    
    /* Connection lines - pulse */
    .circuit-line.connect {
        animation: tech-pulse 5s ease-in-out infinite;
        animation-delay: 0.3s;
    }
    
    /* Diagonal lines - slower pulse */
    .circuit-line.diagonal {
        animation: tech-pulse 6s ease-in-out infinite;
        animation-delay: 0.8s;
    }
    
    /* Main nodes - bright pulse with stagger */
    .circuit-node.main {
        animation: node-glow-pulse 2.5s ease-in-out infinite;
    }
    
    .circuit-node.main:nth-of-type(2n) {
        animation-delay: 0.4s;
    }
    
    .circuit-node.main:nth-of-type(3n) {
        animation-delay: 0.8s;
    }
    
    /* Secondary nodes - subtle blink */
    .circuit-node.secondary {
        animation: node-blink 3s ease-in-out infinite;
    }
    
    .circuit-node.secondary:nth-of-type(2n) {
        animation-delay: 0.6s;
    }
    
    /* Small dots - gentle pulse */
    .circuit-node.dot {
        animation: node-blink 4s ease-in-out infinite;
    }
    
    .circuit-node.dot:nth-of-type(2n) {
        animation-delay: 1s;
    }
    
    /* Square nodes - border glow */
    .circuit-square {
        animation: border-glow 4s ease-in-out infinite;
    }
    
    .circuit-square:nth-of-type(2n) {
        animation-delay: 1.3s;
    }
    
    /* Hexagon shapes - gentle rotation */
    .circuit-hex {
        animation: hex-rotate 10s ease-in-out infinite;
        transform-origin: center;
    }
    
    .circuit-hex:nth-of-type(2) {
        animation-delay: -3s;
        animation-direction: reverse;
    }
    
    /* Floating code elements */
    .code-float {
        animation: float-code 7s ease-in-out infinite;
    }
    
    .code-float:nth-of-type(2) {
        animation-delay: -2s;
        animation-duration: 9s;
    }
    
    .code-float:nth-of-type(3) {
        animation-delay: -4s;
        animation-duration: 6s;
    }
    
    .code-float:nth-of-type(4) {
        animation-delay: -1s;
        animation-duration: 8s;
    }
    
    /* Enhanced button hover effects */
    .btn-primary::after {
        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.5s;
    }
    
    .btn-primary:hover::after {
        left: 100%;
    }
    
    /* Card hover lift enhancement */
    .card:hover {
        transform: translateY(-10px) scale(1.02);
    }
    
    /* Stat item enhanced hover */
    .stat-item:hover {
        transform: translateY(-8px) scale(1.05);
        box-shadow: var(--shadow-xl);
    }
    
    /* Step connector shimmer on hover */
    .step:hover .step-connector {
        animation: shimmer 2s linear infinite;
        background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), var(--color-primary));
        background-size: 200% 100%;
        opacity: 0.5;
    }
    
    /* Visual card enhanced animation */
    .visual-card:hover {
        transform: translateX(12px) scale(1.03);
    }
    
    /* Service box enhanced hover */
    .service-box:hover {
        transform: translateY(-6px) scale(1.01);
    }
    
    /* Reference block enhanced */
    .reference-block:hover {
        transform: translateY(-8px) scale(1.01);
    }
    
    /* Maintenance block enhanced */
    .maintenance-block:hover {
        transform: translateY(-8px) scale(1.01);
    }
}

/* -----------------------------------------------------------
   RESPONSIVE DESIGN - TABLET
----------------------------------------------------------- */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-lg);
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .process-steps {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .step:nth-child(3) .step-connector {
        display: none;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .about-visual {
        flex-direction: row;
        justify-content: center;
    }
    
    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .footer-brand {
        max-width: 100%;
        text-align: center;
    }
    
    .footer-logo {
        margin: 0 auto var(--spacing-md);
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-nav {
        justify-content: center;
    }
    
    /* Hide tech patterns on tablet */
    .tech-pattern-left,
    .tech-pattern-right {
        display: none;
    }
}

/* -----------------------------------------------------------
   RESPONSIVE DESIGN - MOBILE
----------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --spacing-2xl: 3rem;
    }
    
    html {
        scroll-padding-top: 70px;
    }
    
    section {
        padding: var(--spacing-xl) 0;
    }
    
    .container {
        padding: 0 var(--spacing-md);
    }
    
    /* Mobile Navigation */
    .mobile-toggle {
        display: flex;
    }
    
    .mobile-toggle.active .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    
    .mobile-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-toggle.active .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(12px);
        padding: 100px 2rem;
        transition: right 0.35s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: var(--z-nav);
        box-shadow: var(--shadow-xl);
    }
    
    .main-nav.active {
        right: 0;
    }
    
    .main-nav ul {
        flex-direction: column;
        gap: var(--spacing-lg);
        text-align: center;
        width: 100%;
    }
    
    .main-nav a {
        font-size: var(--text-xl);
        display: block;
        padding: var(--spacing-sm) 0;
    }
    
    .nav-cta {
        margin-top: var(--spacing-md);
    }
    
    /* Hero Mobile */
    .hero-section {
        min-height: auto;
        padding: 0;
    }
    
    .hero-content {
        padding: 7rem var(--spacing-md) 4rem;
    }
    
    .hero-stats {
        gap: var(--spacing-sm);
    }
    
    .stat-divider {
        display: none;
    }
    
    .stat-item {
        flex: 1;
        min-width: 90px;
        padding: var(--spacing-sm);
    }
    
    .stat-number {
        font-size: var(--text-lg);
    }
    
    /* Grids Mobile */
    .grid-3 {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .services-wrapper {
        grid-template-columns: 1fr;
    }
    
    .card {
        padding: var(--spacing-lg);
    }
    
    /* Process Mobile */
    .process-steps {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .step {
        display: flex;
        align-items: flex-start;
        text-align: left;
        gap: var(--spacing-md);
    }
    
    .step-connector {
        display: none;
    }
    
    .step-header {
        flex-direction: column;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .step-number {
        width: 48px;
        height: 48px;
        font-size: var(--text-sm);
    }
    
    .step-icon {
        display: none;
    }
    
    .step-content h3 {
        margin-top: 0;
    }
    
    /* Reference Block Mobile */
    .reference-block {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--spacing-lg);
    }
    
    .ref-action {
        width: 100%;
    }
    
    .ref-action .btn {
        width: 100%;
        white-space: nowrap;
    }
    
    /* Maintenance Block Mobile */
    .maintenance-block {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--spacing-lg);
    }
    
    .maintenance-action {
        width: 100%;
    }
    
    .maintenance-action .btn {
        width: 100%;
        white-space: nowrap;
    }
    
    /* About Mobile */
    .about-visual {
        flex-direction: column;
    }
    
    .visual-card {
        padding: var(--spacing-md);
    }
    
    /* Contact Mobile */
    .contact-card {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .contact-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
    
    /* Footer Mobile */
    .footer-nav {
        /* Keep navigation and legal links side by side on mobile. Using a row
         * orientation and center justification prevents them from stacking and
         * keeps the footer height compact. */
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-lg);
        text-align: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-xs);
    }
    
    /* Ensure tech patterns are hidden on mobile */
    .tech-pattern-left,
    .tech-pattern-right {
        display: none;
    }
}

/* -----------------------------------------------------------
   LARGE SCREENS - EXTRA WIDE
----------------------------------------------------------- */
@media (min-width: 1600px) {
    .container {
        /* Reduce side padding on extra‑wide screens to allow the main content
         * to extend closer to the viewport edges. Previously 6vw created
         * large gutters on desktop; using 2vw maintains a small margin while
         * significantly expanding the usable width. */
        padding: 0 2vw;
    }
    
    .tech-pattern-left,
    .tech-pattern-right {
        width: 160px;
    }
    
    .hero-content {
        /* Remove the fixed width cap on the hero so it can use the full width
         * of its container on very large displays. This ensures the hero copy
         * aligns with the wider layout and doesn’t appear artificially
         * centered. */
        max-width: none;
    }
}

@media (min-width: 1920px) {
    .container {
        /* Reduce padding further on ultra‑wide screens (≥1920px). Previously
         * 8vw left extremely large margins; 3vw provides ample breathing room
         * without making the content feel boxed in. */
        padding: 0 3vw;
    }
    
    .tech-pattern-left,
    .tech-pattern-right {
        width: 180px;
    }
}

/* -----------------------------------------------------------
   LEGAL PAGE STYLES
----------------------------------------------------------- */
.legal-hero {
    /* Reduce top padding slightly to balance the legal hero section. */
    padding: 8rem 0 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
}

/* Restrict the width of the legal page content for better readability */
.legal-content {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.legal-hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-heading);
}

.legal-date {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-top: var(--spacing-sm);
}

.legal-section {
    padding: var(--spacing-xl) 0;
    position: relative;
}

.legal-content {
    /*
     * Let the legal page content use the full width of its container. This
     * change removes the fixed width cap and centering, which makes long
     * passages easier to read on high‑resolution monitors. A modest
     * line length remains achievable thanks to the typography settings.
     */
    max-width: none;
    margin: 0;
    /*
     * Provide a modest horizontal padding for the legal page text so that
     * long paragraphs remain readable even when the content spans the
     * full width of the viewport. Without this, the text can butt up
     * against the browser edges on large screens.
     */
    padding-left: 2vw;
    padding-right: 2vw;
}

.legal-block {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    margin-bottom: var(--spacing-xl);
    transition: all var(--transition-base);
}

.legal-block:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-soft);
}

.legal-block h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-primary);
    font-size: var(--text-xl);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-primary-soft);
}

.legal-block h3 {
    color: var(--color-text-heading);
    font-size: var(--text-lg);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.legal-block h4 {
    color: var(--color-text-main);
    font-size: var(--text-base);
    font-weight: 600;
    margin: var(--spacing-md) 0 var(--spacing-xs);
}

.legal-block p {
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

.legal-list {
    list-style: none;
    padding-left: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.legal-list li {
    position: relative;
    padding-left: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-muted);
}

.legal-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

.legal-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border), transparent);
    margin: var(--spacing-xl) 0;
}

.legal-disclaimer {
    background: var(--color-bg-soft);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-primary);
    margin-top: var(--spacing-xl);
}

.legal-disclaimer p {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.legal-disclaimer i {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

/*
 * Ensure long words like email addresses within the legal content wrap
 * properly on narrow viewports. Without these rules, lengthy strings
 * (e.g. `POPIAComplaints@inforegulator.org.za`) can overflow their
 * containers and butt up against the screen edges on mobile devices.
 * Applying word-break and overflow-wrap to links inside the legal
 * section allows long email addresses or URLs to wrap at any
 * character boundary, preventing horizontal scrolling or layout
 * breakage. The `inline-block` display ensures the anchor respects
 * max-width constraints while still participating in text flow.
 */
.legal-content a {
    display: inline-block;
    /* Break long words at any character to prevent overflow */
    word-break: break-all;
    /* Provide an additional hint to wrap long words gracefully */
    overflow-wrap: anywhere;
}

.contact-card-compact {
    padding: var(--spacing-xl);
}

.contact-card-compact h3 {
    color: white;
    margin-bottom: var(--spacing-sm);
}

.contact-card-compact p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-lg);
}

/* Legal Page Responsive */
@media (max-width: 768px) {
    .legal-hero {
        padding: 7rem 0 3rem;
    }
    
    .legal-block {
        padding: var(--spacing-lg);
    }
    
    .legal-block h2 {
        font-size: var(--text-lg);
    }
    
    .legal-disclaimer {
        padding: var(--spacing-md);
    }
}

/* -----------------------------------------------------------
   REDUCED MOTION PREFERENCE
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* -----------------------------------------------------------
   SCROLL TO TOP BUTTON
----------------------------------------------------------- */
/*
 * A floating action button that lets users quickly return to the top
 * of the page. It remains hidden by default and fades in once the
 * user scrolls past a threshold. On hover, the colour subtly
 * darkens to provide feedback. Icons are centred within the circle.
 */
.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: var(--shadow-primary);
    border: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-base);
    z-index: var(--z-sticky);
}

.scroll-top:hover {
    background-color: var(--color-primary-dark);
}

.scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* -----------------------------------------------------------
   SERVICES PACKAGES STYLES
   Custom pricing cards for the Services & Scope section
----------------------------------------------------------- */

/* Grid layout for the service packages */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

/* Base card styling */
.package-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Slight elevation on hover */
.package-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-6px) scale(1.01);
    border-color: var(--color-primary-soft);
}

/* Header row for icons and titles */
.package-header {
    display: flex;
    /* Align icon with the first line of text rather than the midpoint of the title+subtitle. */
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

/* Icon styling */
.package-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    transition: transform var(--transition-bounce);
    /* Prevent shrinking when the title wraps to multiple lines, ensuring a consistent square shape */
    flex-shrink: 0;

    /* Nudge the icon down slightly so it aligns visually with the heading line */
    margin-top: 0.15rem;
}

/* Highlighted card icon uses primary colour background */
/* Featured package icon styling */
/* Featured package icon styling */
.featured .package-icon {
    /* Match the neutral background used by other icons for visual consistency */
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

/* Icon hover animation */
.package-card:hover .package-icon {
    transform: scale(1.1) rotate(-5deg);
}

/* Title and subtitle */
.package-title h3 {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--color-text-heading);
}

.package-subtitle {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary-dark);
}

/* Price styling with increased hierarchy */
.package-price {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-primary-dark);
    /* Space above price is now handled by the divider, so only a small margin is needed */
    margin-top: var(--spacing-md);
    padding-top: 0;
    border-top: none;
}

/* Features list spacing */
.package-features {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* Note text at bottom of card */
.package-note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: auto;
}

/* Payment and exclusions layout */
.package-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
}

.payment-structure h3,
.exclusions h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-heading);
}

.payment-structure p,
.exclusions p {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
    font-size: var(--text-sm);
}

.payment-structure .small-print {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin-top: var(--spacing-sm);
}

/* Give payment structure and exclusions their own card styling */
.payment-structure,
.exclusions {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Services section note */
.services-note {
    margin-top: var(--spacing-2xl);
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 600px;
    font-size: var(--text-sm);
    /* Style the helper note as a bordered callout */
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-subtle);
    color: var(--color-primary-dark);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
}

/* Divider between header and pricing */
.package-divider {
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--spacing-md);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .package-price {
        font-size: var(--text-2xl);
    }
}

/* -----------------------------------------------------------
   Reference Projects Section
   This section replaces the single reference block with a flexible
   two‑card layout. Each card inherits many of the stylistic
   characteristics of the original reference block – white
   background, subtle border, soft shadow and gradient accents – but
   can stack responsively on narrow screens. The wrapper adds
   introductory copy and a calm sentence below the cards. Text and
   badge are centered for emphasis.
----------------------------------------------------------- */

.reference-section {
    margin-top: var(--spacing-2xl);
}

/* Center align the badge, heading and intro copy */
.reference-section .ref-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.reference-section h2 {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
}

.reference-section .intro {
    margin-top: var(--spacing-sm);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 45ch;
    margin-left: auto;
    margin-right: auto;
}

/* Container for the two cards */
.reference-section .reference-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

/* Individual reference cards */
.reference-card {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xl);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
    flex: 1 1 0;
    min-width: 280px;
}

.reference-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-light));
}

.reference-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.reference-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-soft);
    transform: translateY(-6px) scale(1.01);
}

.reference-card:hover::after {
    opacity: 1;
}

.ref-card-content h4 {
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-heading);
    font-size: var(--text-lg);
    line-height: 1.2;
}

.ref-card-content p {
    margin-bottom: 0;
    max-width: 40ch;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.ref-card-action {
    flex-shrink: 0;
}

/* Calm explanatory sentence */
.reference-section .ref-note {
    margin-top: var(--spacing-lg);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Responsive adjustments for reference cards */
@media (max-width: 1024px) {
    .reference-section .reference-cards {
        flex-direction: column;
    }
    .reference-card {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--spacing-lg);
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    .ref-card-content {
        width: 100%;
    }
    .ref-card-action {
        width: 100%;
        flex-shrink: 0;
    }
    .ref-card-action .btn {
        width: 100%;
        white-space: nowrap;
    }
    /* Align card content to the left on mobile */
    .ref-card-content h4,
    .ref-card-content p {
        text-align: left;
    }
}