/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Premium Luxury Colors */
    --primary-color: #d4af37; /* Luxury Gold */
    --primary-dark: #b8941f;
    /* Gold is only legible against the dark sections. On white/#fafafa the brand
       golds measure 2.1:1 and 2.9:1, so text set in gold on a light background
       uses this darker tone instead: 4.9:1 on white, 4.7:1 on #fafafa. */
    --gold-text: #8a6d10;
    --secondary-color: #2c2c2c; /* Elegant Dark Gray */
    --accent-color: #ff6b35; /* Premium Orange */
    --text-primary: #1a1a1a; /* Rich Black */
    --text-secondary: #4a4a4a; /* Refined Gray */
    --text-light: #6e6e6e; /* 5.1:1 on white, 4.9:1 on #fafafa */
    --background: #ffffff;
    --background-light: #fafafa;
    --background-dark: #0a0a0a; /* Deep Black */
    --border-color: #e8e8e8;
    --gold-gradient: linear-gradient(135deg, #d4af37 0%, #ffd700 50%, #d4af37 100%);
    --luxury-shadow: 0 20px 40px rgba(212, 175, 55, 0.1);
    --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-large: 0 20px 60px rgba(0, 0, 0, 0.15);
    --glow-effect: 0 0 30px rgba(212, 175, 55, 0.3);
    
    /* Typography */
    --font-primary: 'Heebo', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Premium Animation */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--background);
    font-size: var(--font-size-base);
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(255, 107, 53, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
    animation: backgroundMove 20s ease-in-out infinite alternate;
}

@keyframes backgroundMove {
    0% { transform: translateX(0) translateY(0) scale(1); }
    50% { transform: translateX(-20px) translateY(-10px) scale(1.02); }
    100% { transform: translateX(10px) translateY(20px) scale(0.98); }
}

/* Floating Particles */
.floating-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0.3;
    animation: float 20s infinite linear;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 25s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 30s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 35s; }
.particle:nth-child(4) { left: 40%; animation-delay: 6s; animation-duration: 28s; }
.particle:nth-child(5) { left: 50%; animation-delay: 8s; animation-duration: 32s; }
.particle:nth-child(6) { left: 60%; animation-delay: 10s; animation-duration: 27s; }
.particle:nth-child(7) { left: 70%; animation-delay: 12s; animation-duration: 33s; }
.particle:nth-child(8) { left: 80%; animation-delay: 14s; animation-duration: 29s; }
.particle:nth-child(9) { left: 90%; animation-delay: 16s; animation-duration: 31s; }

@keyframes float {
    0% { 
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% { 
        opacity: 0.3;
    }
    90% { 
        opacity: 0.3;
    }
    100% { 
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.fade-in {
    animation: fadeInUp 0.8s ease-out;
}

.fade-in-delay-1 {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.fade-in-delay-2 {
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* Top Header with Logo */
.top-header {
    position: relative;
    padding: var(--spacing-xl) 0 var(--spacing-md) 0;
    background: linear-gradient(135deg, 
        var(--background) 0%, 
        var(--background-light) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-bottom: 1px solid rgba(37, 99, 235, 0.08);
}

.top-header .main-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    animation: fadeInDown 1s ease-out;
    text-align: center;
}

.top-header .main-logo:hover {
    transform: translateY(-2px) scale(1.01);
}

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

/* Top Header Logo Specific Styles */
.top-header .logo-text {
    font-size: 4rem;
    font-weight: 900;
    color: var(--primary-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Heebo', sans-serif;
    line-height: 1;
    transition: all 0.4s ease;
}

.top-header .main-logo:hover .logo-text {
    color: var(--primary-dark);
    text-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.top-header .logo-subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 10px;
    letter-spacing: 1px;
    font-style: italic;
    opacity: 0.9;
    transition: all 0.4s ease;
}

.top-header .main-logo:hover .logo-subtitle {
    opacity: 1;
    color: var(--primary-color);
}

/* Navigation */
.navbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    z-index: 1000;
    box-shadow: var(--luxury-shadow);
    transition: var(--transition-base);
    border-bottom: 1px solid rgba(37, 99, 235, 0.1);
}

.nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-lg);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding: 12px 20px;
    border-radius: 16px;
    background: linear-gradient(145deg, 
        rgba(255,255,255,0.95), 
        rgba(248,249,250,0.9));
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 
        0 4px 20px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 0 0 1px rgba(37, 99, 235, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.nav-logo:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 12px 40px rgba(37, 99, 235, 0.15),
        inset 0 1px 0 rgba(255,255,255,1),
        0 0 0 2px rgba(37, 99, 235, 0.2);
}

.logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(37, 99, 235, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.logo-icon i {
    font-size: 1.2rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.nav-logo:hover .logo-icon {
    transform: rotate(5deg) scale(1.1);
    box-shadow: 
        0 6px 25px rgba(37, 99, 235, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.3);
}

.logo-content {
    display: flex;
    flex-direction: column;
}

.logo-text {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: 1.2px;
    position: relative;
    text-transform: uppercase;
    font-family: 'Heebo', sans-serif;
    line-height: 1;
    transition: all 0.3s ease;
}

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

.logo-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: 0.5px;
    position: relative;
    font-style: italic;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.nav-logo:hover .logo-subtitle {
    opacity: 1;
    color: var(--primary-color);
}

.logo-subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #2563eb 100%);
    transition: width 0.4s ease;
    border-radius: 1px;
}

.nav-logo:hover .logo-subtitle::before {
    width: 100%;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-xl);
}

.nav-link {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    transition: var(--transition-base);
    position: relative;
    padding: 12px 24px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.nav-link:hover {
    color: var(--primary-color);
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--gold-gradient);
    transition: var(--transition-base);
    border-radius: 1px;
}

.nav-link:hover::after {
    width: 80%;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    background: none;
    border: none;
    padding: 10px;
    margin: 0;
    align-items: center;
    justify-content: center;
}

.bar {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    margin: 3px 0;
    transition: var(--transition-base);
}

/* Hero Section */
.hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, 
        var(--background-light) 0%, 
        var(--background) 25%, 
        #f8fafc 50%, 
        var(--background) 75%, 
        var(--background-light) 100%);
    padding: var(--spacing-xl) 0;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-xl);
    color: var(--text-primary);
    letter-spacing: 1px;
}

.highlight {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    font-weight: 900;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
}

.highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gold-gradient);
    opacity: 0.8;
    z-index: -1;
    border-radius: 2px;
    animation: shimmer 2s ease-in-out infinite alternate;
}

@keyframes shimmer {
    0% { opacity: 0.6; transform: scaleX(1); }
    100% { opacity: 1; transform: scaleX(1.05); }
}

.hero-subtitle {
    font-size: 1.4rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2xl);
    line-height: 1.8;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 18px 36px;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-medium);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.btn::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: var(--transition-slow);
}

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

.btn-primary {
    background: var(--gold-gradient);
    color: var(--text-primary);
    border: 2px solid transparent;
    box-shadow: 0 8px 32px rgba(212, 175, 55, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #b8941f 0%, #d4af37 50%, #b8941f 100%);
    transform: translateY(-4px);
    box-shadow: 0 15px 45px rgba(212, 175, 55, 0.45);
    border-color: rgba(212, 175, 55, 0.5);
}

.btn-secondary {
    background: var(--background);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--background-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

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

.automation-dashboard {
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow-large);
    padding: var(--spacing-xl);
    width: 100%;
    max-width: 400px;
    animation: slideInRight 1s ease-out 0.3s both;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.dashboard-title {
    font-weight: 600;
    color: var(--text-primary);
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-color);
    animation: pulse 2s infinite;
}

.dashboard-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.metric-card {
    background: var(--background-light);
    padding: var(--spacing-md);
    border-radius: 8px;
    text-align: center;
}

.metric-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.dashboard-chart {
    display: flex;
    align-items: end;
    gap: var(--spacing-sm);
    height: 80px;
    padding: var(--spacing-md);
    background: var(--background-light);
    border-radius: 8px;
}

.chart-bar {
    flex: 1;
    background: linear-gradient(to top, var(--primary-color), var(--accent-color));
    border-radius: 4px 4px 0 0;
    animation: fadeInUp 1s ease-out;
    transition: var(--transition-base);
}

.chart-bar:hover {
    opacity: 0.8;
}

/* Section Styles */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    position: relative;
}

.section-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: var(--gold-gradient);
    border-radius: 2px;
    box-shadow: var(--glow-effect);
}

.section-subtitle {
    font-size: 1.3rem;
    color: var(--text-secondary);
    font-weight: 300;
    letter-spacing: 1px;
}

/* About Section */
.about {
    padding: var(--spacing-3xl) 0;
    background: #ffffff;
    position: relative;
}

/* Single column since the headline-figures panel was removed: the claims it
   carried could not be substantiated, and an unprovable number on a sales page
   is a liability rather than a feature. */
.about-content {
    max-width: 780px;
    margin: 0 auto;
}

.about-text h3 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
}

.about-text p {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.7;
}

.about-highlights {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    list-style: none;
    padding: 0;
    margin: 0;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.highlight-item i {
    color: var(--primary-color);
    font-size: var(--font-size-lg);
}

.highlight-item span {
    color: var(--text-primary);
    font-weight: 500;
}

.about-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.stat-item {
    text-align: center;
    padding: var(--spacing-xl);
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    transition: var(--transition-base);
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.stat-number {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

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

/* Services Section */
.services {
    padding: var(--spacing-3xl) 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
}

.service-card {
    background: white;
    padding: var(--spacing-2xl);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    transition: var(--transition-base);
    border: 1px solid var(--border-color);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-large);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.service-icon i {
    font-size: var(--font-size-xl);
    color: white;
}

.service-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.service-card p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

.service-card ul {
    list-style: none;
}

.service-card li {
    padding: var(--spacing-xs) 0;
    color: var(--text-secondary);
    position: relative;
    padding-left: var(--spacing-lg);
}

.service-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: 600;
}

/* Testimonials Section */
.testimonials {
    padding: var(--spacing-3xl) 0;
    background: var(--background-light);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.testimonial-card {
    background: white;
    padding: var(--spacing-2xl);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    transition: var(--transition-base);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

/* ===== "How We Work" cards =====
   Reuses the card shell, but the steps are a real <ol>, so the ordering is
   structure a screen reader announces rather than a decorative number. */
.process-grid {
    list-style: none;
    padding: 0;
}

.process-card {
    display: flex;
    flex-direction: column;
}

.process-card .process-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gold-gradient);
    color: var(--text-primary);
    font-weight: 800;
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}

.process-card h3 {
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.process-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-style: normal;
}

.testimonial-content p {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.author-info h4 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.author-info span {
    color: var(--text-light);
    font-size: var(--font-size-sm);
}

.clients-logos {
    text-align: center;
}

.clients-logos h3 {
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xl);
}

.logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-lg);
}

.logo-placeholder {
    height: 80px;
    background: white;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: var(--font-size-sm);
    transition: var(--transition-base);
}

.logo-placeholder:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Contact Section */
.contact {
    padding: var(--spacing-3xl) 0;
}

.contact-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-3xl);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-group {
    position: relative;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    background: var(--background);
    transition: var(--transition-base);
    outline: none;
}

.form-group textarea {
    height: 120px;
    resize: vertical;
}

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

.form-group label {
    position: absolute;
    top: var(--spacing-lg);
    left: var(--spacing-md);
    color: var(--text-light);
    transition: var(--transition-base);
    pointer-events: none;
    background: var(--background);
    padding: 0 var(--spacing-xs);
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -8px;
    font-size: var(--font-size-sm);
    /* Brand gold sits at 2.1:1 on the white field background. Field labels are
       the one thing on a form that must stay readable, so they use the dark
       gold instead. */
    color: var(--gold-text);
}

.contact-info h3 {
    font-size: var(--font-size-2xl);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xl);
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.contact-method {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-base);
}

.contact-method:hover {
    color: var(--primary-color);
}

.contact-method i {
    font-size: var(--font-size-lg);
    width: 20px;
}

.availability h4 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.availability p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

/* Footer */
.footer {
    background: var(--text-primary);
    color: white;
    padding: var(--spacing-3xl) 0 var(--spacing-xl) 0;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: var(--spacing-md);
    color: white;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: var(--spacing-xs);
}

.footer-section a {
    color: #b0b0b0;
    text-decoration: none;
    transition: var(--transition-base);
}

.footer-section a:hover {
    color: white;
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-xl);
    border-top: 1px solid #374151;
    color: #b0b0b0;
}

.footer-bottom a {
    color: #b0b0b0;
}

.footer-bottom a:hover {
    color: white;
}

/* Shown only when the contact form could not deliver a message, so the visitor
   gets a working alternative instead of a dead end. */
.form-fallback {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    border: 2px solid #ef4444;
    border-radius: 8px;
    background: #fff5f5;
}

.form-fallback p {
    color: var(--text-primary);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

/* Attribution required by the Font Awesome Free icon licence (CC BY 4.0). */
.footer-credits {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    line-height: 1.6;
}

.footer-credits a {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        right: -100%;
        top: 70px;
        flex-direction: column;
        background: white;
        width: 100%;
        text-align: center;
        transition: var(--transition-base);
        box-shadow: var(--shadow-medium);
        padding: var(--spacing-xl) 0;
    }

    .nav-menu.active {
        right: 0;
    }

    .hamburger {
        display: flex;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-2xl);
    }

    .hero-title {
        font-size: var(--font-size-3xl);
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    .hero-buttons {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    .hero-title {
        font-size: var(--font-size-2xl);
    }

    .section-title {
        font-size: var(--font-size-3xl);
    }

    .about-stats {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Scroll Animations */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.scroll-animate.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Loading Animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===================================================================
   ACCESSIBILITY STYLES
   =================================================================== */

/* Screen-reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip to Content Link */
.skip-to-content {
    position: absolute;
    top: -9999px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--text-primary);
    padding: 12px 24px;
    z-index: 10001;
    text-decoration: none;
    font-weight: 700;
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow-medium);
    transition: top 0.3s ease;
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
    top: 0;
}

/* Focus Indicators - double ring so it stays visible on light and dark areas */
:focus-visible {
    outline: 3px solid var(--text-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.9);
}

/* Keep sticky navbar from covering section headings on anchor navigation */
section[id],
main[id] {
    scroll-margin-top: 100px;
}

/* ===== Accessibility Widget ===== */
.accessibility-widget {
    position: fixed;
    top: 120px;
    left: 0;
    z-index: 9990;
}

.accessibility-btn {
    background: var(--primary-color);
    color: var(--text-primary);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: all 0.3s ease;
}

.accessibility-btn:hover,
.accessibility-btn:focus {
    width: 58px;
    background: var(--primary-dark);
}

/* Always-visible link to the accessibility statement, right under the menu
   button, so users don't need to open the popup or scroll to the footer. */
.accessibility-statement-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 84px;
    min-height: 62px;
    margin-top: 4px;
    background: var(--secondary-color);
    color: #fff;
    border-radius: 0 8px 8px 0;
    text-decoration: none;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.22);
    transition: background 0.3s ease, color 0.3s ease, width 0.3s ease;
    line-height: 1.15;
    padding: 6px 4px;
    text-align: center;
}

.accessibility-statement-link i {
    font-size: 16px;
    margin-bottom: 3px;
}

.accessibility-statement-text {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    display: block;
}

.accessibility-statement-link:hover,
.accessibility-statement-link:focus-visible {
    width: 94px;
    background: var(--primary-color);
    color: var(--text-primary);
}

/* Call-to-action at the TOP of the menu popup, so the statement is reachable
   without scrolling past 16 toggles. */
.accessibility-statement-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 12px;
    margin: 0 0 12px 0;
    background: var(--primary-color);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    min-height: 48px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.accessibility-statement-cta i {
    font-size: 18px;
}

.accessibility-statement-cta:hover,
.accessibility-statement-cta:focus-visible {
    background: var(--primary-dark);
    color: var(--text-primary);
}

/* The closed menu is display:none rather than parked off-screen: on this RTL
   page an off-screen panel widened the document and left its buttons reachable
   by Tab while the menu was supposed to be closed. */
.accessibility-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    max-height: 90vh;
    background: #fff;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    border-radius: 0 12px 12px 0;
    padding: 20px;
    display: none;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
}

.accessibility-menu.active {
    display: flex;
    animation: accMenuSlideIn 0.3s ease;
}

@keyframes accMenuSlideIn {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.accessibility-menu::-webkit-scrollbar {
    width: 8px;
}

.accessibility-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.accessibility-menu::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

.accessibility-menu::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

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

.accessibility-header h3 {
    font-size: 18px;
    margin: 0;
    color: var(--text-primary);
}

.accessibility-header button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 6px;
    line-height: 1;
}

.accessibility-options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.accessibility-options button {
    width: 100%;
    padding: 12px;
    text-align: left;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    font-size: 16px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.accessibility-options button:hover,
.accessibility-options button:focus {
    background: #ececec;
    border-color: #d8d8d8;
}

.accessibility-options button.active {
    background: var(--primary-color);
    color: var(--text-primary);
    border-color: var(--primary-dark);
    font-weight: 700;
}

/* ===== Accessibility Modes ===== */

/* Large Text */
body.large-text {
    font-size: 120%;
}

body.large-text h1 { font-size: 2.5em; }
body.large-text h2 { font-size: 2em; }
body.large-text h3 { font-size: 1.5em; }
body.large-text p { font-size: 1.2em; }

/* Huge Text */
body.huge-text {
    font-size: 160% !important;
}

body.huge-text h1 { font-size: 3.5em !important; }
body.huge-text h2 { font-size: 2.8em !important; }
body.huge-text h3 { font-size: 2.2em !important; }
body.huge-text h4 { font-size: 1.8em !important; }
body.huge-text p { font-size: 1.6em !important; }
body.huge-text a { font-size: 1.6em !important; }
body.huge-text button { font-size: 1.4em !important; }
body.huge-text li { font-size: 1.6em !important; }

body.large-text .accessibility-menu,
body.huge-text .accessibility-menu {
    font-size: 1rem;
}

/* High Contrast */
body.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}

body.high-contrast * {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.high-contrast::before,
body.high-contrast .floating-particles {
    display: none !important;
}

body.high-contrast img {
    filter: grayscale(100%) contrast(120%);
}

body.high-contrast a {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

body.high-contrast button,
body.high-contrast .btn {
    background-color: #ffff00 !important;
    color: #000 !important;
    border: 2px solid #fff !important;
}

body.high-contrast .accessibility-menu {
    border: 2px solid #fff;
}

/* The blanket button rule above paints every button the same, which would hide
   which accessibility options are currently on. Restore the distinction. */
body.high-contrast .accessibility-options button,
body.high-contrast .accessibility-header button {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

body.high-contrast .accessibility-options button.active {
    background-color: #ffff00 !important;
    color: #000 !important;
}

/* Highlight Links */
body.highlight-links a {
    text-decoration: underline !important;
    background-color: yellow !important;
    color: black !important;
}

body.highlight-links .btn {
    border: 3px solid yellow !important;
}

/* Readable Font */
body.readable-font,
body.readable-font * {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Light Background */
body.light-background {
    background-color: #f0f0f0 !important;
}

body.light-background * {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
}

body.light-background::before,
body.light-background .floating-particles {
    display: none !important;
}

body.light-background a {
    color: #0056b3 !important;
}

body.light-background button,
body.light-background .btn {
    background-color: var(--primary-color) !important;
    color: #1a1a1a !important;
}

/* Same here - keep the on/off state of the accessibility toggles readable. */
body.light-background .accessibility-options button,
body.light-background .accessibility-header button {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #8a8a8a !important;
}

body.light-background .accessibility-options button.active {
    background-color: var(--primary-color) !important;
    color: #000 !important;
    border: 2px solid #000 !important;
}

/* Negative Contrast.
   The filter is moved to the root element where supported, because a filter on
   <body> turns it into a containing block and makes the fixed accessibility
   widget scroll away with the page. */
body.negative-contrast {
    filter: invert(1) hue-rotate(180deg);
}

body.negative-contrast img {
    filter: invert(1) hue-rotate(180deg);
}

body.grayscale-mode {
    filter: grayscale(100%);
}

@supports selector(html:has(body)) {
    body.negative-contrast,
    body.grayscale-mode {
        filter: none;
    }
    html:has(body.negative-contrast) {
        filter: invert(1) hue-rotate(180deg);
    }
    html:has(body.grayscale-mode) {
        filter: grayscale(100%);
    }
    html:has(body.negative-contrast):has(body.grayscale-mode) {
        filter: invert(1) hue-rotate(180deg) grayscale(100%);
    }
}

/* Line Height */
body.increased-line-height,
body.increased-line-height * {
    line-height: 2 !important;
}

/* Text Spacing */
body.increased-text-spacing * {
    letter-spacing: 0.15em !important;
    word-spacing: 0.2em !important;
}

/* Big Cursor */
body.big-cursor,
body.big-cursor * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" style="font-size: 48px;"><text y="32">➤</text></svg>') 12 12, auto !important;
}

body.big-cursor a,
body.big-cursor button {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" style="font-size: 48px;"><text y="32">👆</text></svg>') 12 12, pointer !important;
}

/* Reading Guide */
.reading-guide-line {
    position: fixed;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(212, 175, 55, 0.95);
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6),
                0 -50px 50px rgba(0, 0, 0, 0.3),
                0 50px 50px rgba(0, 0, 0, 0.3);
}

/* Stop Animations */
body.stop-animations *,
body.stop-animations *::before,
body.stop-animations *::after,
body.stop-animations::before,
body.stop-animations::after {
    animation: none !important;
    transition: none !important;
}

body.stop-animations .floating-particles {
    display: none !important;
}

body.stop-animations {
    scroll-behavior: auto !important;
}

/* Tooltips for Links */
body.show-tooltips a[href] {
    position: relative;
}

body.show-tooltips a[href]:hover::after,
body.show-tooltips a[href]:focus-visible::after {
    content: attr(href);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 9999;
    margin-bottom: 8px;
    direction: ltr;
}

body.show-tooltips a[href]:hover::before,
body.show-tooltips a[href]:focus-visible::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
    margin-bottom: 2px;
}

/* Keep the widget readable while a page-wide filter is on.
   High contrast is not filter based, so it is deliberately left alone - the
   forced black/white/yellow palette already gives the widget full contrast. */
body.negative-contrast .accessibility-widget,
html:has(body.negative-contrast) .accessibility-widget {
    filter: invert(1) hue-rotate(180deg);
}

body.grayscale-mode .accessibility-widget,
html:has(body.grayscale-mode) .accessibility-widget {
    filter: grayscale(0);
}

/* ===== Accessibility statement page / legal pages ===== */
.accessibility-page {
    padding: var(--spacing-3xl) 0;
    background: var(--background);
}

.accessibility-page .section-header {
    margin-bottom: var(--spacing-2xl);
}

.accessibility-content {
    max-width: 850px;
    margin: 0 auto;
    background: #fff;
    padding: var(--spacing-2xl);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    line-height: 1.9;
    color: var(--text-secondary);
}

.accessibility-content h2 {
    color: var(--text-primary);
    font-size: var(--font-size-2xl);
    margin: var(--spacing-xl) 0 var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--primary-color);
}

.accessibility-content h2:first-child {
    margin-top: 0;
}

.accessibility-content h3 {
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.accessibility-content p {
    margin-bottom: var(--spacing-md);
}

.accessibility-content ul {
    margin: 0 0 var(--spacing-lg) var(--spacing-lg);
    padding-left: var(--spacing-md);
}

.accessibility-content li {
    margin-bottom: var(--spacing-xs);
}

.accessibility-content a {
    color: var(--gold-text);
    text-decoration: underline;
}

.accessibility-content a:hover {
    color: var(--text-primary);
}

.accessibility-content .legal-meta {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.accessibility-content address.legal-address {
    font-style: normal;
    background: var(--background-light);
    border-left: 3px solid var(--primary-color);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

/* Warranty disclaimers, liability caps and automatic-renewal terms only count as
   "conspicuous" under US state law if they are visually set apart from the body
   copy around them — hence the box and the tint, not just bold text. */
.accessibility-content .legal-conspicuous {
    border: 2px solid var(--text-primary);
    border-radius: 8px;
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0 var(--spacing-xl);
    background: #fffdf5;
}

.accessibility-content .legal-conspicuous h3 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--spacing-sm);
}

.accessibility-content .legal-conspicuous p:last-child {
    margin-bottom: 0;
}

.accessibility-content .legal-allcaps {
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.75;
}

/* ===== Pricing Section ===== */
.pricing {
    padding: var(--spacing-3xl) 0;
    background: var(--background-light);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.pricing-card {
    background: #fff;
    padding: var(--spacing-2xl);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-large);
}

.pricing-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.pricing-amount {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--gold-text);
    line-height: 1.2;
    margin-bottom: var(--spacing-xs);
}

.pricing-amount .pricing-from {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-xs);
}

.pricing-unit {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    margin-bottom: var(--spacing-lg);
}

.pricing-card ul {
    list-style: none;
    margin-bottom: var(--spacing-lg);
    flex-grow: 1;
}

.pricing-card li {
    padding: var(--spacing-xs) 0;
    color: var(--text-secondary);
    position: relative;
    padding-left: var(--spacing-lg);
}

.pricing-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: 600;
}

.pricing-note {
    max-width: 850px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-light);
}

/* Automatic-renewal disclosure. Subscription law in several US states requires
   the renewal terms to be set off from the surrounding text, not buried in it,
   so this block is deliberately boxed and tinted rather than styled as body copy. */
.autorenew-notice {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    border: 2px solid var(--gold-text);
    border-radius: 8px;
    background: #fffdf5;
}

.autorenew-notice h4 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--spacing-sm);
}

.autorenew-notice p {
    color: var(--text-primary);
    line-height: 1.8;
    margin-bottom: 0;
}

.pricing-note h3 {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.pricing-note p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.8;
}

.pricing-note p:last-child {
    margin-bottom: 0;
}

.pricing-note a {
    color: var(--gold-text);
    text-decoration: underline;
}

.pricing-note a:hover {
    color: var(--text-primary);
}

/* ===== Business address block (contact section) ===== */
.business-address {
    margin-top: var(--spacing-lg);
}

.business-address h4 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-lg);
}

.business-address address {
    font-style: normal;
    color: var(--text-secondary);
    line-height: 1.8;
}

.footer-section address {
    font-style: normal;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    font-size: var(--font-size-sm);
}

/* ===== Reduced motion (respects the OS setting) ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto !important;
    }

    .floating-particles {
        display: none !important;
    }
}

/* ===== Mobile tweaks for the widget ===== */
@media (max-width: 768px) {
    .accessibility-widget {
        top: 90px;
    }

    .accessibility-menu {
        width: 88vw;
    }
}

/* ===== Print: clear accessibility filters so they don't follow to paper ===== */
@media print {
    body[class*="-contrast"],
    body.grayscale-mode {
        filter: none !important;
    }
    body.large-text,
    body.huge-text {
        font-size: 100% !important;
    }
    body.increased-line-height {
        line-height: normal !important;
    }
    .accessibility-widget,
    .skip-to-content,
    .floating-particles {
        display: none !important;
    }
}