/* ==============================================================================
   HassleFreebooks — Global UI Enhancement Stylesheet (style.css)
   ==============================================================================
   Purpose: Provide consistent UI enhancements for buttons, forms, navigation,
   and layout components with responsive design and accessibility improvements.

   Enhanced Features:
   1. Button styles with consistent border-radius and hover effects
   2. Form input styles with consistent padding and focus states
   3. Navigation link styles with proper font sizing and hover effects
   4. Responsive grid system and layout utilities
   5. Enhanced modal styles with animations
   6. Mobile-first responsive design with media queries
   7. CSS custom properties for maintainability
   8. Accessibility improvements (focus states, contrast)
   9. Glass morphism effects and modern UI patterns
   10. Micro-animations and interactive feedback
   11. Enhanced color system with gradients
   12. Improved loading states and transitions
   13. Refined typography scale and spacing
   14. Enhanced hero section styling
   15. Improved card and feature grid layouts

   Author: UI Enhancement Implementation
   Date: February 2026
   Version: 2.1.0 - Home Page UI Polish
   ============================================================================== */

/* CSS variables have moved to design-tokens.css — no :root block needed here. */

/* ==============================================================================
   GLOBAL RESET AND BASE STYLES
   ============================================================================== */

/* Box sizing reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Focus visible for keyboard navigation only */
:focus:not(:focus-visible) {
    outline: none;
}

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Enhanced body styles for better typography */
body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ==============================================================================
   TYPOGRAPHY ENHANCEMENTS
   ============================================================================== */

/* Heading styles with improved scale and rhythm */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4) 0;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

h1 {
    font-size: clamp(2rem, 5vw, var(--font-size-4xl));
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.025em;
}

h2 {
    font-size: clamp(1.5rem, 4vw, var(--font-size-3xl));
    letter-spacing: -0.02em;
}

h3 {
    font-size: clamp(1.25rem, 3vw, var(--font-size-2xl));
    letter-spacing: -0.015em;
}

/* Paragraph and text styles */
p {
    margin: 0 0 var(--space-4) 0;
    color: inherit;
}

/* Text utilities */
.text--large {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}

.text--small {
    font-size: var(--font-size-sm);
}

.text--muted {
    color: var(--color-text-secondary);
}

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

.text--secondary {
    color: var(--color-secondary);
}

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

/* Gradient text effect */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* Link styles */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

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

/* Focus ring utility */
.focus-ring {
    position: relative;
}

.focus-ring:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==============================================================================
   LAYOUT UTILITIES
   ============================================================================== */

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (min-width: 640px) {
    .container {
        max-width: var(--container-sm);
    }
}

@media (min-width: 768px) {
    .container {
        max-width: var(--container-md);
        padding: 0 var(--space-6);
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: var(--container-lg);
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: var(--container-xl);
    }
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--space-6);
}

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

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

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

/* Responsive grid adjustments */
@media (max-width: 768px) {
    .grid--cols-3,
    .grid--cols-4 {
        grid-template-columns: 1fr;
    }

    .grid--cols-2 {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Flexbox Utilities */
.flex {
    display: flex;
}

.flex--center {
    justify-content: center;
    align-items: center;
}

.flex--gap-2 { gap: var(--space-2); }
.flex--gap-3 { gap: var(--space-3); }
.flex--gap-4 { gap: var(--space-4); }

/* ==============================================================================
   BUTTON ENHANCEMENTS
   ==============================================================================
   All buttons have consistent border-radius of 5px, primary color #3498db,
   and smooth hover transitions with color change to #2980b9
   ============================================================================== */

/* Base button styles */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    /* Display and box model */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    min-height: 40px;

    /* Typography */
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;

    /* Visual */
    border: 1px solid transparent;
    border-radius: var(--radius-base) !important;
    cursor: pointer;

    /* Transitions */
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base),
                transform var(--transition-fast),
                box-shadow var(--transition-base);
}

/* Button sizes */
.btn--sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    min-height: 32px;
}

.btn--lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-lg);
    min-height: 48px;
}

/* Primary button */
.btn--primary,
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important; /* Text on primary button — keep literal white */
}

.btn--primary:hover,
.btn-primary:hover,
.btn--primary:focus-visible,
.btn-primary:focus-visible {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--primary:active,
.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Enhanced: Ripple effect for buttons */
.btn {
    position: relative;
    overflow: hidden;
}

.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple 600ms ease-out;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Enhanced: Gradient buttons */
.btn--gradient {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: var(--color-white) !important; /* Text on gradient button — keep literal white */
    position: relative;
    z-index: 1;
}

.btn--gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    filter: brightness(0.8);
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity var(--transition-base);
}

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

/* Enhanced: Glass button variant */
.btn--glass {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(var(--backdrop-blur-md));
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--text-color) !important;
}

.btn--glass:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Enhanced: Glow effect for primary CTAs */
.btn--glow {
    animation: subtle-glow 2s ease-in-out infinite alternate;
}

@keyframes subtle-glow {
    from {
        box-shadow: 0 4px 14px 0 rgba(52, 152, 219, 0.25);
    }
    to {
        box-shadow: 0 4px 20px 0 rgba(52, 152, 219, 0.4);
    }
}

/* Outline button */
.btn--outline {
    background-color: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    background-color: var(--color-surface-alt);
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

/* CTA button with subtext */
.btn--cta {
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-8);
}

.btn__text {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.btn__subtext {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    opacity: 0.9;
}

/* Loading state */
.btn--loading {
    position: relative;
    color: transparent !important;
}

.btn__loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.btn--loading .btn__loading {
    display: block;
}

.spinner {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

.spinner-circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-dasharray: 63;
    stroke-dashoffset: 63;
    animation: spinner-dash 1.5s ease-in-out infinite;
}

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

@keyframes spinner-dash {
    0% { stroke-dashoffset: 63; }
    50% { stroke-dashoffset: 15; }
    100% { stroke-dashoffset: 63; }
}

/* ==============================================================================
   FORM INPUT ENHANCEMENTS
   ==============================================================================
   All form inputs have consistent padding of 10px, border color #ccc,
   and focus state with border color #3498db
   ============================================================================== */

/* Base form styles */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
    /* Display and box model */
    display: block;
    width: 100%;
    padding: var(--space-3) !important;

    /* Typography */
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);

    /* Visual */
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-base);

    /* Transitions */
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base),
                background-color var(--transition-base);
}

/* Large form control */
.form-control--lg {
    padding: var(--space-4) var(--space-5) !important;
    font-size: var(--font-size-lg);
}

/* Focus states */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus) !important;
    outline: none !important;
}

/* Hover state */
.form-control:hover:not(:focus),
input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
    border-color: var(--color-text-muted) !important;
}

/* Invalid state */
.form-control.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--color-danger) !important;
}

.is-invalid:focus {
    border-color: var(--color-danger) !important;
    box-shadow: var(--color-danger-alpha) !important;
}

/* Valid state */
.form-control.is-valid,
input.is-valid,
select.is-valid,
textarea.is-valid {
    border-color: var(--color-success) !important;
}

.is-valid:focus {
    border-color: var(--color-success) !important;
    box-shadow: var(--color-success-alpha) !important;
}

/* Form error messages */
.form-error {
    display: none;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-danger);
}

.is-invalid ~ .form-error {
    display: block;
}

/* Form hints */
.form-hint {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Enhanced: Floating label pattern */
.form-group {
    position: relative;
    margin-bottom: var(--space-6);
}

.form-group--floating {
    padding-top: var(--space-4);
}

.form-label--floating {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    transform: translateY(-50%);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    pointer-events: none;
    transition: all var(--transition-base);
    background: var(--color-surface);
    padding: 0 var(--space-1);
    z-index: 1;
}

.form-group--floating .form-control {
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-2) !important;
}

.form-group--floating.has-focus .form-label--floating,
.form-group--floating.has-value .form-label--floating {
    top: 0;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
}

/* Enhanced: Input icons */
.form-group--icon {
    position: relative;
}

.form-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    pointer-events: none;
}

.form-icon--left {
    left: var(--space-3);
}

.form-icon--right {
    right: var(--space-3);
}

.form-group--icon .form-control {
    padding-left: calc(var(--space-3) * 3) !important;
}

.form-group--icon-right .form-control {
    padding-right: calc(var(--space-3) * 3) !important;
}

/* Enhanced: Progress bar for forms */
.form-progress {
    height: 4px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-6);
    overflow: hidden;
}

.form-progress__bar {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: inherit;
    transition: width var(--transition-base);
    position: relative;
}

.form-progress__bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.5s infinite;
}

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

/* ==============================================================================
   NAVIGATION LINK ENHANCEMENTS
   ==============================================================================
   Navigation links have font size 16px, color #2c3e50, and underline on hover
   ============================================================================== */

/* Base navigation styles */
a,
.nav-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base),
                text-decoration var(--transition-base);
}

a:hover,
.nav-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Focus visible for accessibility */
a:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Footer navigation specific styles */
.footer-nav__link {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    text-decoration: none;
}

.footer-nav__link:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* ==============================================================================
   CARD COMPONENTS
   ============================================================================== */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card--hover {
    cursor: pointer;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
}

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

.card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card__icon {
    margin-bottom: var(--space-4);
}

.icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-lg);
    font-size: 2.5rem;
}

.card__icon--primary .icon-wrapper {
    background: var(--color-primary-alpha);
}

.card__icon--success .icon-wrapper {
    background: var(--color-success-alpha);
}

.card__icon--info .icon-wrapper {
    background: rgba(52, 152, 219, 0.1);
}

.card__header {
    margin-bottom: var(--space-3);
}

.card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.card__body {
    flex: 1;
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.card__features {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
}

.card__features li {
    padding: var(--space-1) 0;
    padding-left: var(--space-5);
    position: relative;
}

.card__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: bold;
}

.card__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-surface-alt);
}

.card__link {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.card__link:hover {
    text-decoration: none;
    gap: var(--space-2);
}

/* Enhanced: Glass morphism card variant */
.card--glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(var(--backdrop-blur-lg));
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-dark .card--glass {
    background: rgba(39, 39, 42, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Enhanced: Card with gradient border */
.card--gradient-border {
    position: relative;
    background: var(--color-surface);
    border: none;
}

.card--gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient-primary);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.card--gradient-border:hover::before {
    opacity: 1;
}

/* Enhanced: Interactive card with tilt effect */
.card--interactive {
    transition: all var(--transition-base);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card--interactive::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(52, 152, 219, 0.06),
        transparent 40%
    );
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--transition-base);
}

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

/* Enhanced: Skeleton loading for cards */
.card--skeleton {
    position: relative;
    overflow: hidden;
}

.skeleton {
    background: var(--color-border);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    animation: skeleton-shimmer 1.5s infinite;
}

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

.skeleton-text {
    height: 1em;
    margin-bottom: var(--space-2);
}

.skeleton-title {
    height: 1.5em;
    width: 60%;
    margin-bottom: var(--space-3);
}

/* ==============================================================================
   MODAL STYLES
   ============================================================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.modal[hidden] {
    display: none !important;
}

.modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal__content {
    position: relative;
    z-index: var(--z-modal);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-2xl);
    animation: modalSlideIn var(--transition-slow) ease-out;
}

.modal--visible .modal__content {
    animation: modalSlideIn var(--transition-slow) ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-surface-alt);
}

.modal__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.modal__close {
    background: var(--color-surface-alt);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.modal__close:hover {
    background: var(--color-border);
    transform: rotate(90deg);
}

.modal__body {
    padding: var(--space-6);
}

.modal__footer {
    padding: var(--space-6);
    border-top: 1px solid var(--color-surface-alt);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

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

/* Text utilities */
.text--center { text-align: center; }
.text--large { font-size: var(--font-size-lg); }
.text--small { font-size: var(--font-size-sm); }
.text--muted { color: var(--color-text-secondary); }

/* Spacing utilities */
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

/* Background utilities */
.bg-light { background-color: var(--color-surface-alt); }
.border-top { border-top: 1px solid var(--color-border); }

/* Screen reader only */
.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;
}

/* Icons */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
}

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

/* Links */
.link--underline {
    text-decoration: underline;
}

/* ==============================================================================
   RESPONSIVE DESIGN
   ==============================================================================
   Mobile-first approach with breakpoints at 768px, 1024px, and 1280px
   ============================================================================== */

/* Mobile styles (default) */
@media (max-width: 767px) {
    /* Typography adjustments */
    :root {
        --font-size-base: 16px;
        --font-size-3xl: 24px;
        --font-size-4xl: 30px;
    }

    /* Navigation font size */
    a,
    .nav-link {
        font-size: var(--font-size-sm) !important;
    }

    /* Larger touch targets */
    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        padding: var(--space-3) var(--space-4);
    }

    /* Form inputs - prevent zoom on iOS */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px;
        padding: var(--space-4) !important;
    }

    /* Stack buttons on mobile */
    .hero__actions,
    .cta__actions {
        flex-direction: column;
        width: 100%;
    }

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

    /* Newsletter form stacking */
    .newsletter__row {
        flex-direction: column;
    }

    .newsletter__submit {
        width: 100%;
    }

    /* Modal adjustments */
    .modal__content {
        margin: var(--space-2);
    }

    /* Footer nav stacking */
    .footer-nav__column {
        margin-bottom: var(--space-8);
        text-align: center;
    }

    /* Hide decorative elements on mobile */
    .hero__features {
        display: none;
    }

    /* Stat grid on mobile */
    .cta__stats {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Adjust grid for tablets */
    .grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero layout */
    .hero-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
        align-items: center;
    }
}

/* Desktop styles */
@media (min-width: 1024px) {
    /* Hero layout with sidebar features */
    .hero-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
        align-items: center;
    }

    /* Features grid stays 3 columns */
    .features-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }

    /* CTA stats inline */
    .cta__stats {
        display: flex;
        justify-content: center;
        gap: var(--space-12);
        margin: var(--space-8) 0;
    }

    /* Footer nav proper spacing */
    .footer-nav {
        padding: var(--space-12) 0;
    }

    .footer-nav__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: var(--space-8);
        padding-top: var(--space-8);
        border-top: 1px solid var(--color-border);
    }
}

/* Large desktop styles */
@media (min-width: 1280px) {
    /* Increase container padding */
    .container {
        padding: 0 var(--space-8);
    }

    /* Larger sections on big screens */
    .section {
        padding: var(--space-20) 0;
    }
}

/* Dark mode is now handled automatically via CSS variable overrides
   in design-tokens.css — no @media (prefers-color-scheme: dark) block needed here. */

/* ==============================================================================
   ACCESSIBILITY IMPROVEMENTS
   ==============================================================================
   Reduced motion and high contrast support
   ============================================================================== */

/* Reduced motion preferences */
@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;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .btn,
    .card,
    .form-control,
    input,
    select,
    textarea {
        border-width: 2px !important;
    }

    .btn:focus-visible,
    .form-control:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid !important;
        outline-offset: 2px !important;
    }
}

/* ==============================================================================
   PRINT STYLES
   ==============================================================================
   Clean printing support
   ============================================================================== */

@media print {
    /* Hide interactive elements */
    .btn,
    .modal,
    .hero__features,
    .form-control,
    button,
    input,
    select,
    textarea {
        display: none !important;
    }

    /* Simplify layout */
    .hero-section,
    .section {
        padding: 20px 0;
        background: none !important;
    }

    /* Ensure text is readable */
    body {
        color: black;
        background: white;
    }

    /* Show link URLs */
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/* ==============================================================================
   SECTION STYLES
   ==============================================================================
   Consistent section spacing and styling for better content flow
   ============================================================================== */

.section {
    padding: var(--space-20) 0;
    position: relative;
}

.section--features {
    background: linear-gradient(to bottom,
        var(--color-surface) 0%,
        var(--color-surface-alt) 100%);
}

.section--newsletter {
    background: var(--color-surface-alt);
}

.section--cta {
    background: linear-gradient(135deg,
        var(--color-surface-alt) 0%,
        rgba(52, 152, 219, 0.05) 100%);
}

.section__header {
    margin-bottom: var(--space-12);
}

.section__header--centered {
    text-align: center;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.section__title {
    font-size: clamp(1.75rem, 4vw, var(--font-size-3xl));
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
}

.section__subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0;
}

/* ==============================================================================
   ANIMATION UTILITIES
   ==============================================================================
   Smooth animations for interactive elements
   ============================================================================== */

/* Fade animations */
.fade-in {
    animation: fadeIn var(--transition-slow) ease-out;
}

.fade-in-up {
    animation: fadeInUp var(--transition-slow) ease-out;
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reveal animations for scroll */
.reveal {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.animate-in {
    opacity: 1;
}

.reveal[data-animate="fadeInUp"] {
    transform: translateY(30px);
}

.reveal[data-animate="fadeInUp"].animate-in {
    transform: translateY(0);
}

.reveal[data-animate="scale"] {
    transform: scale(0.9);
}

.reveal[data-animate="scale"].animate-in {
    transform: scale(1);
}

/* Stagger animations */
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }

/* ==============================================================================
   HOME PAGE SPECIFIC STYLES
   ==============================================================================
   Enhanced with improved alignment, spacing, and responsive design.
   Focuses on visual hierarchy, better spacing rhythm, and polished UI details.
   ============================================================================== */

.home-page {
    padding: 0;
    /* Enhanced: Smoother scroll behavior for internal navigation */
    scroll-padding-top: var(--space-16);
}

/* ==============================================================================
   HERO SECTION
   ============================================================================== */
.hero-section {
    /* Enhanced spacing for better visual breathing room */
    padding: calc(var(--space-20) + var(--space-4)) 0 var(--space-20);
    /* Improved gradient with subtle color shift */
    background: linear-gradient(145deg,
        rgba(248, 249, 250, 0.8) 0%,
        rgba(255, 255, 255, 0.95) 40%,
        rgba(248, 249, 250, 0.4) 100%);
    position: relative;
    overflow: hidden;
}

/* Enhanced: Add decorative background pattern */
.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -25%;
    width: 70%;
    height: 150%;
    background: radial-gradient(
        ellipse at center,
        var(--color-primary-alpha) 0%,
        transparent 70%
    );
    opacity: 0.15;
    pointer-events: none;
    transform: rotate(-15deg);
}

/* Hero container with improved alignment */
.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
    position: relative;
    /* Enhanced: Better content alignment */
    min-height: 500px;
}

.hero__content {
    z-index: 2;
    /* Enhanced: Better content spacing */
    padding-right: var(--space-8);
}

.hero__title {
    font-size: clamp(2rem, 5vw, var(--font-size-4xl));
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-6);
    line-height: var(--line-height-tight);
    /* Enhanced: Better text rendering */
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.hero__brand {
    color: var(--color-primary);
    /* Enhanced: Add subtle text shadow for depth */
    text-shadow: 0 2px 4px rgba(52, 152, 219, 0.1);
}

.hero__subtitle {
    font-size: clamp(1.125rem, 2.5vw, var(--font-size-xl));
    color: var(--color-text-secondary);
    margin-bottom: var(--space-10);
    line-height: var(--line-height-relaxed);
    /* Enhanced: Max width for better readability */
    max-width: 42ch;
}

/* Enhanced hero actions with better spacing and alignment */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
    /* Enhanced: Align buttons better */
    align-items: center;
}

/* Enhanced button hover effects */
.hero__actions .btn {
    /* Enhanced: Add subtle shadow to primary button */
    position: relative;
    overflow: hidden;
}

.hero__actions .btn--primary {
    box-shadow: 0 4px 14px 0 rgba(52, 152, 219, 0.25);
}

.hero__actions .btn--primary:hover {
    box-shadow: 0 6px 20px 0 rgba(52, 152, 219, 0.35);
}

/* Enhanced trust indicators */
.hero__trust {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    /* Enhanced: Add subtle background */
    background: var(--color-surface-alt);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-surface-alt);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.trust-icon {
    color: var(--color-warning);
    filter: drop-shadow(0 1px 2px rgba(243, 156, 18, 0.3));
}

/* Enhanced floating feature cards */
.hero__features {
    position: relative;
    height: 450px;
    /* Enhanced: Better containment */
    display: flex;
    align-items: center;
    justify-content: center;
}

.features-grid {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 500px;
}

.feature-float {
    position: absolute;
    background: var(--color-surface);
    border: 1px solid var(--color-surface-alt);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Enhanced: Add backdrop blur for glass effect */
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

.feature-float:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary-alpha);
}

/* Enhanced positioning for better visual balance */
.feature-float--1 {
    top: 10%;
    left: 5%;
    animation: float 8s ease-in-out infinite;
}

.feature-float--2 {
    top: 25%;
    right: 10%;
    animation: float 8s ease-in-out 2.5s infinite;
}

.feature-float--3 {
    bottom: 15%;
    right: 25%;
    animation: float 8s ease-in-out 5s infinite;
}

/* Enhanced float animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-8px) rotate(1deg);
    }
    50% {
        transform: translateY(-12px) rotate(-1deg);
    }
    75% {
        transform: translateY(-8px) rotate(0.5deg);
    }
}

.feature-float__icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
    /* Enhanced: Add subtle animation */
    transition: transform var(--transition-base);
}

.feature-float:hover .feature-float__icon {
    transform: scale(1.1) rotate(5deg);
}

.feature-float__label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

/* ==============================================================================
   SECTION SPACING AND TYPOGRAPHY
   ============================================================================== */

/* Enhanced section spacing for better rhythm */
.section {
    padding: var(--space-20) 0;
    position: relative;
}

.section__header {
    margin-bottom: var(--space-12);
    /* Enhanced: Center align section headers */
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.section__title {
    font-size: clamp(1.75rem, 4vw, var(--font-size-3xl));
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-4);
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.section__subtitle {
    font-size: clamp(1.125rem, 2vw, var(--font-size-lg));
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

/* ==============================================================================
   FEATURES SECTION
   ============================================================================== */

.section--features {
    padding: calc(var(--space-20) + var(--space-4)) 0;
    background: var(--color-surface);
    /* Enhanced: Add subtle top border */
    border-top: 1px solid var(--color-surface-alt);
}

/* Enhanced features grid with better responsive behavior */
.features-grid.grid--cols-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-12);
}

/* Enhanced card hover effects */
.card--feature {
    /* Enhanced: Better initial state */
    border-color: var(--color-surface-alt);
    transition: all var(--transition-slow);
}

.card--feature:hover {
    border-color: var(--color-primary-alpha);
    /* Enhanced: More pronounced hover effect */
    transform: translateY(-8px) scale(1.02);
}

/* ==============================================================================
   NEWSLETTER SECTION
   ============================================================================== */

.section--newsletter {
    padding: var(--space-20) 0;
    /* Enhanced: Improved gradient background */
    background: linear-gradient(180deg,
        var(--color-surface-alt) 0%,
        rgba(248, 249, 250, 0.5) 100%);
    border-top: 1px solid var(--color-surface-alt);
}

.newsletter--enhanced {
    max-width: 640px;
    margin: 0 auto;
    /* Enhanced: Add card-like appearance */
    background: var(--color-surface);
    padding: var(--space-10);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.newsletter__form {
    margin-top: var(--space-8);
}

.newsletter__row {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    /* Enhanced: Better alignment */
    align-items: stretch;
}

.newsletter__input-wrapper {
    flex: 1;
    position: relative;
}

/* Enhanced newsletter input styling */
.newsletter__input-wrapper .form-control {
    /* Enhanced: Remove default border radius on right */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.newsletter__submit {
    /* Enhanced: Connect button to input visually */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.newsletter__privacy {
    text-align: center;
    /* Enhanced: Add spacing */
    margin-top: var(--space-3);
}

/* Enhanced form success/error states */
.newsletter__message {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--transition-base);
}

.newsletter__message.success {
    background: var(--color-success-alpha);
    color: var(--color-success);
    border: 1px solid var(--color-success-light);
    opacity: 1;
    transform: translateY(0);
}

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

.section--cta {
    padding: calc(var(--space-20) + var(--space-8)) 0;
    /* Enhanced: More sophisticated gradient */
    background: linear-gradient(135deg,
        rgba(52, 152, 219, 0.03) 0%,
        rgba(255, 255, 255, 1) 50%,
        rgba(52, 152, 219, 0.02) 100%);
    position: relative;
    overflow: hidden;
}

/* Enhanced: Add decorative element */
.section--cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 40%;
    height: 200%;
    background: radial-gradient(
        ellipse at center,
        var(--color-primary-alpha) 0%,
        transparent 60%
    );
    opacity: 0.1;
    transform: rotate(30deg);
}

.cta--enhanced {
    text-align: center;
    position: relative;
    z-index: 1;
}

.cta__title {
    font-size: clamp(1.875rem, 4.5vw, var(--font-size-3xl));
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-4);
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.cta__subtitle {
    margin-bottom: var(--space-10);
    font-size: var(--font-size-lg);
}

/* Enhanced CTA Stats with better visual hierarchy */
.cta__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-8);
    max-width: 800px;
    margin: var(--space-10) auto;
    /* Enhanced: Add visual separator */
    padding: var(--space-8) 0;
    border-top: 2px solid var(--color-surface-alt);
    border-bottom: 2px solid var(--color-surface-alt);
}

.stat {
    text-align: center;
    /* Enhanced: Add hover effect */
    transition: transform var(--transition-base);
}

.stat:hover {
    transform: scale(1.05);
}

.stat__number {
    display: block;
    font-size: clamp(2rem, 5vw, var(--font-size-3xl));
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
    /* Enhanced: Add counting animation hint */
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.stat__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Enhanced CTA actions */
.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
    margin: var(--space-10) 0 var(--space-6);
}

.cta__note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* Enhanced: Add pill style */
    background: var(--color-surface-alt);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
}

/* ==============================================================================
   FOOTER NAVIGATION
   ============================================================================== */

.section--footer-nav {
    padding: var(--space-20) 0 var(--space-12);
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
}

/* Enhanced footer grid */
.footer-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-8) var(--space-12);
}

.footer-nav__column {
    /* Enhanced: Better spacing on mobile */
    margin-bottom: 0;
}

.footer-nav__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-5);
    color: var(--color-text);
    /* Enhanced: Add visual indicator */
    position: relative;
    padding-bottom: var(--space-2);
}

.footer-nav__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--color-primary);
}

.footer-nav__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav__links li {
    margin-bottom: var(--space-3);
    /* Enhanced: Add subtle hover indicator */
    padding-left: 0;
    transition: padding-left var(--transition-base);
}

.footer-nav__links li:hover {
    padding-left: var(--space-2);
}

/* Enhanced footer bottom section */
.footer-nav__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.footer-nav__copyright {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.footer-nav__social {
    display: flex;
    gap: var(--space-3);
}

/* Enhanced social links */
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    transition: all var(--transition-base);
}

.social-link:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white); /* Text on primary button hover — keep literal white */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.social-link svg {
    width: 20px;
    height: 20px;
}

/* ==============================================================================
   ANIMATION UTILITIES
   ============================================================================== */

/* Enhanced scroll animations */
[data-animate] {
    opacity: 0;
    transform: translateY(20px);
}

[data-animate].animate-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

[data-animate="fadeInUp"][data-delay="100"].animate-in {
    transition-delay: 100ms;
}

[data-animate="fadeInUp"][data-delay="200"].animate-in {
    transition-delay: 200ms;
}

[data-animate="fadeInUp"][data-delay="400"].animate-in {
    transition-delay: 400ms;
}

[data-animate="fadeInUp"][data-delay="600"].animate-in {
    transition-delay: 600ms;
}

/* ==============================================================================
   RESPONSIVE ADJUSTMENTS FOR HOME PAGE
   ============================================================================== */

@media (max-width: 1024px) {
    /* Tablet adjustments */
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero__content {
        padding-right: 0;
        max-width: 600px;
        margin: 0 auto;
    }

    .hero__subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__features {
        display: none;
    }

    .cta__stats {
        gap: var(--space-6);
    }
}

@media (max-width: 768px) {
    /* Mobile adjustments */
    .hero-section {
        padding: var(--space-16) 0 var(--space-12);
    }

    .hero__title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: var(--space-4);
    }

    .hero__subtitle {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-6);
    }

    .hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .section {
        padding: var(--space-12) 0;
    }

    .section__title {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .features-grid.grid--cols-3 {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .newsletter--enhanced {
        padding: var(--space-6);
    }

    .newsletter__row {
        flex-direction: column;
    }

    .newsletter__input-wrapper .form-control {
        border-radius: var(--radius-base);
        border-right: 1px solid var(--color-border-strong);
    }

    .newsletter__submit {
        border-radius: var(--radius-base);
        width: 100%;
    }

    .cta__stats {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding: var(--space-6) 0;
    }

    .cta__actions {
        flex-direction: column;
        width: 100%;
    }

    .cta__actions .btn {
        width: 100%;
    }

    .footer-nav {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-nav__title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-nav__links li:hover {
        padding-left: 0;
    }

    .footer-nav__bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ==============================================================================
   NOTIFICATION & TOAST SYSTEM
   ============================================================================== */

.notifications {
    position: fixed;
    top: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-notification);
    pointer-events: none;
}

.notification {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
    min-width: 300px;
    max-width: 400px;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    animation: slideInRight var(--transition-base) var(--ease-bounce);
    position: relative;
    overflow: hidden;
}

.notification::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-primary);
}

.notification--success::before {
    background: var(--color-success);
}

.notification--error::before {
    background: var(--color-danger);
}

.notification--warning::before {
    background: var(--color-warning);
}

.notification__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
}

.notification--success .notification__icon {
    background: var(--color-success-alpha);
    color: var(--color-success);
}

.notification__content {
    flex: 1;
}

.notification__title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
    color: var(--color-text);
}

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

.notification__close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.notification__close:hover {
    color: var(--color-text);
}

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

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.notification--removing {
    animation: slideOutRight var(--transition-base) forwards;
}

/* ==============================================================================
   LOADING STATES & SPINNERS
   ============================================================================== */

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(var(--backdrop-blur-sm));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.theme-dark .loading-overlay {
    background: rgba(26, 26, 30, 0.9);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    position: relative;
}

.loading-spinner__circle {
    position: absolute;
    inset: 0;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-spinner__circle--inner {
    inset: 8px;
    border-width: 2px;
    animation-duration: 1.5s;
    animation-direction: reverse;
}

/* Dots loading animation */
.loading-dots {
    display: inline-flex;
    gap: var(--space-1);
}

.loading-dots__dot {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: bounce 1.4s ease-in-out infinite both;
}

.loading-dots__dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dots__dot:nth-child(2) { animation-delay: -0.16s; }
.loading-dots__dot:nth-child(3) { animation-delay: 0; }

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* ==============================================================================
   TOOLTIP ENHANCEMENTS
   ============================================================================== */

.tooltip {
    position: absolute;
    background: var(--color-text);
    color: var(--color-white);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    pointer-events: none;
    z-index: var(--z-tooltip);
    opacity: 0;
    transform: translateY(-4px);
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--color-text);
}

.tooltip.fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: all var(--transition-fast);
}

/* ==============================================================================
   BADGE SYSTEM
   ============================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    border-radius: var(--radius-full);
    background: var(--color-surface-alt);
    color: var(--color-text);
}

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

.badge--success {
    background: var(--color-success-alpha);
    color: var(--color-success);
}

.badge--danger {
    background: var(--color-danger-alpha);
    color: var(--color-danger);
}

.badge--pill {
    padding: var(--space-2) var(--space-3);
}

.badge--dot {
    padding-left: var(--space-3);
    position: relative;
}

.badge--dot::before {
    content: '';
    position: absolute;
    left: var(--space-1);
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
}

/* ==============================================================================
   GRADIENT TEXT & DECORATIVE ELEMENTS
   ============================================================================== */

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gradient-border {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 2px;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    border-radius: inherit;
    z-index: -1;
}

.gradient-border__content {
    background: var(--color-surface);
    border-radius: calc(var(--radius-lg) - 2px);
    padding: var(--space-6);
}

/* Glass morphism utility */
.glass-morphism {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(var(--backdrop-blur-lg));
    -webkit-backdrop-filter: blur(var(--backdrop-blur-lg));
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-dark .glass-morphism {
    background: rgba(39, 39, 42, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ==============================================================================
   FLOATING ACTION BUTTON
   ============================================================================== */

.fab {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    color: var(--color-white);
    border: none;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    z-index: var(--z-dropdown);
}

.fab:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.fab:active {
    transform: translateY(-2px);
}

.fab__icon {
    width: 24px;
    height: 24px;
    transition: transform var(--transition-base);
}

.fab:hover .fab__icon {
    transform: scale(1.1);
}

/* ==============================================================================
   ANIMATION UTILITIES
   ============================================================================== */

/* Float animation for decorative elements */
.float-animation {
    animation: gentle-float 6s ease-in-out infinite;
}

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

/* Pulse animation for attention */
.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
}

/* Slide animations */
.slide-in-left {
    animation: slideInLeft var(--transition-base) var(--ease-smooth);
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-up {
    animation: slideInUp var(--transition-base) var(--ease-smooth);
}

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

/* ==============================================================================
   ABOUT & CONTACT PAGE SPECIFIC STYLES
   ==============================================================================
   Enhanced with improved alignment, spacing, and responsive design.
   Focuses on visual hierarchy, better spacing rhythm, and polished UI details.
   Added for UI polish task - ensuring consistency across all views.
   ============================================================================== */

/* ==============================================================================
   SHARED PAGE HERO STYLES
   ============================================================================== */

.about-hero,
.contact-hero {
    padding: calc(var(--space-20) + var(--space-4)) 0 var(--space-20);
    background: linear-gradient(135deg,
        rgba(248, 249, 250, 0.9) 0%,
        rgba(233, 236, 239, 0.9) 100%);
    position: relative;
    overflow: hidden;
}

/* Enhanced breadcrumb navigation */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    font-size: var(--font-size-sm);
}

.breadcrumb-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-base);
    opacity: 0.8;
}

.breadcrumb-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--color-text-secondary);
    user-select: none;
}

.breadcrumb-current {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

/* Enhanced brand highlight */
.brand-highlight {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    text-shadow: 0 2px 4px rgba(52, 152, 219, 0.1);
}

/* ==============================================================================
   ABOUT PAGE SPECIFIC STYLES
   ============================================================================== */

.story-section,
.values-section,
.team-section {
    padding: var(--space-20) 0;
}

.story-section {
    background-color: var(--color-surface);
}

.values-section {
    background-color: var(--color-surface-alt);
}

.lead-paragraph {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    margin-bottom: var(--space-6);
}

/* Team navigation with enhanced link styles */
.team-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin: var(--space-8) 0;
    padding-bottom: var(--space-5);
    border-bottom: 2px solid var(--color-border);
}

.team-nav-link {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    position: relative;
    font-weight: var(--font-weight-medium);
}

.team-nav-link:hover {
    text-decoration: none;
    background-color: var(--color-surface-alt);
}

.team-nav-link.active {
    background-color: var(--color-primary);
    color: var(--color-white); /* Text on primary active tab — keep literal white */
    text-decoration: none;
}

/* ==============================================================================
   CONTACT PAGE SPECIFIC STYLES
   ============================================================================== */

.contact-methods {
    padding: var(--space-20) 0;
    background: var(--color-surface);
}

.methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-12);
}

.method-card {
    /* Reuse value-card styles for consistency */
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    text-align: center;
    transition: all var(--transition-base);
    cursor: pointer;
    position: relative;
}

.method-card:hover,
.method-card:focus {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.method-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Office cards styling */
.office-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
    transition: all var(--transition-base);
}

.office-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.office-city {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.office-details {
    font-style: normal;
}

.office-address,
.office-phone,
.office-hours {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* Emergency support styling */
.emergency-support {
    background: var(--color-danger-alpha);
    border: 1px solid var(--color-danger-light);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-top: var(--space-8);
    text-align: center;
}

.emergency-title {
    color: var(--color-danger);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}

.emergency-text {
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.emergency-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* FAQ Section */
.faq-section {
    padding: var(--space-20) 0;
    background: var(--color-surface-alt);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.faq-item {
    background: var(--color-surface);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-surface-alt);
    transition: all var(--transition-base);
}

.faq-item:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border);
}

.faq-question {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.faq-answer {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Social Links Section */
.social-section {
    padding: var(--space-16) 0;
    background: var(--color-surface);
    text-align: center;
}

.social-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    max-width: 800px;
    margin: var(--space-8) auto 0;
}

.social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: all var(--transition-base);
}

.social-card:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.social-card:hover .social-icon,
.social-card:hover .social-name,
.social-card:hover .social-handle {
    color: var(--color-white);
}

.social-icon {
    font-size: 2.5rem;
}

.social-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    transition: color var(--transition-base);
}

.social-handle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
}

/* ==============================================================================
   MODAL ENHANCEMENTS FOR ABOUT/CONTACT
   ============================================================================== */

/* Remove inline styles and use consistent modal styling */
.modal {
    /* Already defined in main styles, ensure no inline display:none */
}

#chat-modal {
    /* Specific styles for chat modal if needed */
}

/* ==============================================================================
   RESPONSIVE ADJUSTMENTS FOR ABOUT/CONTACT
   ============================================================================== */

@media (max-width: 1024px) {
    .contact-wrapper {
        gap: var(--space-8);
    }

    .team-nav {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
}

@media (max-width: 768px) {
    .about-hero,
    .contact-hero {
        padding: var(--space-16) 0 var(--space-12);
    }

    .hero-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }

    .methods-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .social-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-nav {
        gap: var(--space-2);
    }

    .team-nav-link {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 480px) {
    .social-links-grid {
        grid-template-columns: 1fr;
    }

    .breadcrumb {
        font-size: 0.75rem;
        gap: var(--space-2);
    }
}

/* ==============================================================================
   END OF ENHANCED UI STYLESHEET
   ============================================================================== */